import React, { useState, useEffect, useRef, useCallback } from "react"; import { Play, Pause, RotateCcw, Settings, X, Trophy } from "lucide-react"; const LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); const T = { ko: { focus: "집중", brk: "휴식", start: "시작", pause: "멈추기", reset: "초기화", settings: "설정", focusMin: "집중 시간 (분)", breakMin: "휴식 시간 (분)", apply: "적용", today: "오늘", total: "누적", best: "최고 기록", completed: "완료!", breakDone: "휴식 끝! 다시 집중!" }, en: { focus: "Focus", brk: "Break", start: "Start", pause: "Pause", reset: "Reset", settings: "Settings", focusMin: "Focus (min)", breakMin: "Break (min)", apply: "Apply", today: "Today", total: "Total", best: "Best", completed: "Done!", breakDone: "Break over! Focus!" }, ja: { focus: "集中", brk: "休憩", start: "開始", pause: "一時停止", reset: "リセット", settings: "設定", focusMin: "集中時間 (分)", breakMin: "休憩時間 (分)", apply: "適用", today: "今日", total: "累計", best: "最高", completed: "完了!", breakDone: "休憩終了! 集中!" }, zh: { focus: "专注", brk: "休息", start: "开始", pause: "暂停", reset: "重置", settings: "设置", focusMin: "专注时间 (分)", breakMin: "休息时间 (分)", apply: "应用", today: "今天", total: "累计", best: "最佳", completed: "完成!", breakDone: "休息结束! 继续!" }, }; const t = T[LANG] || T.en; export default function App() { const [workMin, setWorkMin] = useSharedStorage("pomo_work", 25); const [breakMin, setBreakMin] = useSharedStorage("pomo_break", 5); const [totalSessions, setTotalSessions] = useSharedStorage("pomo_total", 0); const [bestDay, setBestDay] = useSharedStorage("pomo_best", 0); const [todayCount, setTodayCount] = useSharedStorage("pomo_today", 0); const [todayDate, setTodayDate] = useSharedStorage("pomo_date", ""); const [timeLeft, setTimeLeft] = useState(workMin * 60); const [running, setRunning] = useState(false); const [isBreak, setIsBreak] = useState(false); const [showSettings, setShowSettings] = useState(false); const [tempWork, setTempWork] = useState(workMin); const [tempBreak, setTempBreak] = useState(breakMin); const [flash, setFlash] = useState(""); const intervalRef = useRef(null); const totalSec = isBreak ? breakMin * 60 : workMin * 60; const progress = totalSec > 0 ? 1 - timeLeft / totalSec : 0; const mm = String(Math.floor(timeLeft / 60)).padStart(2, "0"); const ss = String(timeLeft % 60).padStart(2, "0"); const today = new Date().toISOString().slice(0, 10); useEffect(() => { if (todayDate !== today) { setTodayDate(today); setTodayCount(0); } }, [today, todayDate, setTodayDate, setTodayCount]); useEffect(() => { if (!running) return; intervalRef.current = setInterval(() => { setTimeLeft(prev => { if (prev <= 1) { if (!isBreak) { const nt = totalSessions + 1; const nd = todayCount + 1; setTotalSessions(nt); setTodayCount(nd); if (nd > bestDay) setBestDay(nd); setFlash(t.completed); setTimeout(() => setFlash(""), 2000); setIsBreak(true); return breakMin * 60; } else { setFlash(t.breakDone); setTimeout(() => setFlash(""), 2000); setIsBreak(false); return workMin * 60; } } return prev - 1; }); }, 1000); return () => clearInterval(intervalRef.current); }, [running, isBreak, workMin, breakMin, totalSessions, todayCount, bestDay, setTotalSessions, setTodayCount, setBestDay]); const toggle = useCallback(() => setRunning(r => !r), []); const reset = useCallback(() => { setRunning(false); setIsBreak(false); setTimeLeft(workMin * 60); clearInterval(intervalRef.current); }, [workMin]); const applySettings = useCallback(() => { setWorkMin(tempWork); setBreakMin(tempBreak); setShowSettings(false); setRunning(false); setIsBreak(false); setTimeLeft(tempWork * 60); }, [tempWork, tempBreak, setWorkMin, setBreakMin]); const R = 100; const C = 2 * Math.PI * R; const offset = C * (1 - progress); return (

{isBreak ? "☕ " + t.brk : "🔥 " + t.focus}

{flash ? (

{flash}

) : ( <>

{mm}:{ss}

{isBreak ? t.brk : t.focus} · {isBreak ? breakMin : workMin}:00

)}

{todayCount}

{t.today}

{totalSessions}

{t.total}

{bestDay}

{t.best}

{showSettings && (

setShowSettings(false)} />

{t.settings}

{t.focusMin} setTempWork(Math.max(1, parseInt(e.target.value) || 1))} className="w-full px-4 py-3 rounded-xl border border-gray-200 text-base mb-3 outline-none focus:ring-2 focus:ring-rose-500" /> {t.breakMin} setTempBreak(Math.max(1, parseInt(e.target.value) || 1))} className="w-full px-4 py-3 rounded-xl border border-gray-200 text-base mb-4 outline-none focus:ring-2 focus:ring-rose-500" />

)}

); }

Pomodoro Timer

Pomodoro Timer

reviews