import React, { useState, useRef, useCallback, useEffect } from "react"; import confetti from "canvas-confetti"; import { Play, Pause, RotateCcw, Coffee, Brain } from "lucide-react"; const MODES = { focus: { label: "집중", minutes: 25, color: "#ef4444" }, short: { label: "짧은 휴식", minutes: 5, color: "#10b981" }, long: { label: "긴 휴식", minutes: 15, color: "#6366f1" } }; export default function App() { const [mode, setMode] = useState("focus"); const [seconds, setSeconds] = useState(MODES.focus.minutes * 60); const [running, setRunning] = useState(false); const [sessions, setSessions] = useStorage("pomo_sessions", []); const intervalRef = useRef(null); const startTimeRef = useRef(null); const current = MODES[mode]; const totalSeconds = current.minutes * 60; const progress = ((totalSeconds - seconds) / totalSeconds) * 100; const mins = Math.floor(seconds / 60); const secs = seconds % 60; useEffect(() => { if (!running) return; intervalRef.current = setInterval(() => { setSeconds(prev => { if (prev <= 1) { clearInterval(intervalRef.current); setRunning(false); confetti({ particleCount: 100, spread: 70 }); if (mode === "focus") { setSessions(prev => [...prev, { time: new Date().toISOString(), duration: current.minutes }]); } return 0; } return prev - 1; }); }, 1000); return () => clearInterval(intervalRef.current); }, [running, mode]); const handleToggle = useCallback(() => { if (seconds === 0) { setSeconds(totalSeconds); } setRunning(r => !r); }, [seconds, totalSeconds]); const handleReset = useCallback(() => { setRunning(false); clearInterval(intervalRef.current); setSeconds(totalSeconds); }, [totalSeconds]); const switchMode = useCallback((m) => { setRunning(false); clearInterval(intervalRef.current); setMode(m); setSeconds(MODES[m].minutes * 60); }, []); const todaySessions = (sessions || []).filter(s => { try { return new Date(s.time).toDateString() === new Date().toDateString(); } catch { return false; } }); return (

: } className={running ? "" : "bg-rose-500"} > {running ? "일시정지" : seconds === 0 ? "다시 시작" : "시작"} }> 초기화

{todaySessions.length === 0 ? (

아직 완료한 세션이 없습니다

) : (

{todaySessions.length}회 완료 {todaySessions.reduce((sum, s) => sum + (s.duration || 25), 0)}분 집중

)}

); }

뽀모도로 타이머

뽀모도로 타이머

reviews