import React, { useState, useRef, useEffect } from "react"; import { Play, Pause, RotateCcw, CheckCircle, Coffee } from 'lucide-react'; const FOCUS_MINUTES = 25; const BREAK_MINUTES = 5; const MODES = { focus: { label: "집중", color: "text-red-400", minutes: FOCUS_MINUTES, icon: }, break: { label: "휴식", color: "text-blue-400", minutes: BREAK_MINUTES, icon: } }; function pad(n) { return n.toString().padStart(2, '0'); } export default function App() { const [mode, setMode] = useState('focus'); const [secondsLeft, setSecondsLeft] = useState(MODES.focus.minutes * 60); const [running, setRunning] = useState(false); const timerRef = useRef(null); const [sessions, setSessions] = useStorage('pomodoro_sessions', []); const [flash, setFlash] = useState(false); // 원형 진행률 계산 const totalSeconds = MODES[mode].minutes * 60; const progress = 1 - secondsLeft / totalSeconds; // 타이머 동작 useEffect(() => { if (!running) { if (timerRef.current) clearInterval(timerRef.current); return; } timerRef.current = setInterval(() => { setSecondsLeft(s => { if (s <= 1) { clearInterval(timerRef.current); setRunning(false); setFlash(true); setTimeout(() => setFlash(false), 1200); if (mode === 'focus') { setSessions(list => [{ time: new Date().toISOString(), type: '집중' }, ...list]); setMode('break'); setSecondsLeft(MODES.break.minutes * 60); setTimeout(() => setRunning(true), 800); } else { setSessions(list => [{ time: new Date().toISOString(), type: '휴식' }, ...list]); setMode('focus'); setSecondsLeft(MODES.focus.minutes * 60); setTimeout(() => setRunning(true), 800); } return 0; } return s - 1; }); }, 1000); return () => timerRef.current && clearInterval(timerRef.current); }, [running, mode]); // 모드 전환 시 타이머 리셋 useEffect(() => { setSecondsLeft(MODES[mode].minutes * 60); }, [mode]); // 시간 표시 const minutes = Math.floor(secondsLeft / 60); const seconds = secondsLeft % 60; // SVG 원형 타이머 const R = 76, C = 2 * Math.PI * R; function handleReset() { setRunning(false); setSecondsLeft(MODES[mode].minutes * 60); } // 오늘 기록만 보여주기 const today = new Date().toISOString().slice(0, 10); const todaySessions = (sessions || []).filter(s => (s.time || "").slice(0, 10) === today); return (

{/* 원형 타이머 카드 */}

{MODES[mode].icon} {MODES[mode].label}

{pad(minutes)}:{pad(seconds)}

{/* 오늘의 세션 기록 */}

오늘의 기록 {todaySessions.length}회

{todaySessions.length === 0 && (

🕰️ 아직 세션 기록이 없습니다

)}

{todaySessions.map((s, idx) => (

{s.type === '집중' ? : } {s.type} {new Date(s.time).toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' })}

))}

); }