Rorkでポモドーロタイマーアプリを作る完全チュートリアル

ポモドーロタイマーアプリを作成してください。
 
機能要件:
- 25分の作業タイマーと5分の休憩タイマー
- 長い休憩（15分）を4セッションごとに挿入
- 開始・一時停止・リセットボタン
- 円形プログレスバーで残り時間を表示
- セッション完了時にバイブレーション通知
- 完了したセッション数のカウント表示
- ダークモード対応のシンプルなUI

// タイマーのコアロジック（Rork が自動生成）
import { useState, useEffect, useRef } from 'react';
 
const useTimer = (initialMinutes: number) => {
  const [seconds, setSeconds] = useState(initialMinutes * 60);
  const [isRunning, setIsRunning] = useState(false);
  const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
  useEffect(() => {
    if (isRunning && seconds > 0) {
      intervalRef.current = setInterval(() => {
        setSeconds((prev) => prev - 1);
      }, 1000);
    }
    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, [isRunning, seconds]);
 
  // 残り時間を mm:ss 形式に変換
  const formatTime = () => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };
 
  return { seconds, isRunning, setIsRunning, setSeconds, formatTime };
};
 
// 期待する出力例:
// formatTime() → "25:00"（開始時）
// formatTime() → "24:59"（1秒後）
// formatTime() → "00:00"（終了時）

セッション管理を改善してください。
 
- 作業セッション（25分）完了後、自動的に休憩セッション（5分）に切り替え
- 4回の作業セッション完了後は、長い休憩（15分）に切り替え
- 現在のセッション種別（作業/短い休憩/長い休憩）を画面上部に表示
- セッション完了数を「🍅 × 3」のようなトマトアイコンで表示

// セッション管理ロジック
type SessionType = 'work' | 'shortBreak' | 'longBreak';
 
interface PomodoroState {
  sessionType: SessionType;
  completedSessions: number;
  totalWorkMinutes: number;
}
 
const getNextSession = (state: PomodoroState): SessionType => {
  if (state.sessionType !== 'work') {
    return 'work'; // 休憩後は必ず作業セッション
  }
  // 4セッションごとに長い休憩
  return (state.completedSessions + 1) % 4 === 0
    ? 'longBreak'
    : 'shortBreak';
};
 
const getSessionDuration = (type: SessionType): number => {
  switch (type) {
    case 'work': return 25;
    case 'shortBreak': return 5;
    case 'longBreak': return 15;
  }
};
 
// 期待する出力例:
// getNextSession({ sessionType: 'work', completedSessions: 2, ... })
//   → 'shortBreak'
// getNextSession({ sessionType: 'work', completedSessions: 3, ... })
//   → 'longBreak'
// getNextSession({ sessionType: 'shortBreak', completedSessions: 3, ... })
//   → 'work'

タイマーの表示を円形プログレスバーに変更してください。
 
- SVGで円形のプログレスリングを描画
- 残り時間に応じてリングが減っていくアニメーション
- 作業セッションは赤系（#FF6B6B）、休憩セッションは緑系（#51CF66）
- リングの中央に残り時間を大きく表示
- スムーズなアニメーション（1秒ごとに滑らかに遷移）

セッション完了時の通知を追加してください。
 
- バイブレーション（Haptics）でセッション完了を通知
- 完了時に短い効果音を再生
- セッション種別に応じて異なるバイブレーションパターン
  - 作業完了: 長め（成功パターン）
  - 休憩完了: 短め（再開パターン）

import * as Haptics from 'expo-haptics';
 
// セッション完了時のフィードバック
const onSessionComplete = async (sessionType: SessionType) => {
  if (sessionType === 'work') {
    // 作業完了: 成功パターン
    await Haptics.notificationAsync(
      Haptics.NotificationFeedbackType.Success
    );
  } else {
    // 休憩完了: 軽いタップ
    await Haptics.impactAsync(
      Haptics.ImpactFeedbackStyle.Light
    );
  }
};
 
// 期待する動作:
// 作業セッション完了時 → 強めのバイブレーション
// 休憩セッション完了時 → 軽いバイブレーション

UIを仕上げてください。
 
- ダークモード対応（背景: #1A1A2E、テキスト: #EAEAEA）
- セッション切替時にフェードアニメーション
- 下部に統計情報を表示（今日の合計作業時間、完了セッション数）
- フォントはシステムフォント（太字）で時間を大きく表示
- 開始ボタンは丸型、一時停止とリセットは小さめに配置