import React, { useState, useEffect, useRef, useCallback } from "react"; import { Play, Pause, RotateCcw, SkipForward } from "lucide-react"; var LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); var T = { ko: { title: "운동 타이머", work: "운동", rest: "휴식", ready: "준비", round: "라운드", of: "/", start: "시작", pause: "멈추기", reset: "초기화", skip: "건너뛰기", done: "운동 완료! 🎉", total: "총 시간", presets: "프리셋", custom: "커스텀", workSec: "운동 (초)", restSec: "휴식 (초)", rounds: "라운드", apply: "적용" }, en: { title: "Workout Timer", work: "Work", rest: "Rest", ready: "Ready", round: "Round", of: "/", start: "Start", pause: "Pause", reset: "Reset", skip: "Skip", done: "Workout done! 🎉", total: "Total", presets: "Presets", custom: "Custom", workSec: "Work (sec)", restSec: "Rest (sec)", rounds: "Rounds", apply: "Apply" }, ja: { title: "ワークアウトタイマー", work: "運動", rest: "休憩", ready: "準備", round: "ラウンド", of: "/", start: "開始", pause: "一時停止", reset: "リセット", skip: "スキップ", done: "完了! 🎉", total: "合計", presets: "プリセット", custom: "カスタム", workSec: "運動 (秒)", restSec: "休憩 (秒)", rounds: "ラウンド", apply: "適用" }, zh: { title: "运动计时器", work: "运动", rest: "休息", ready: "准备", round: "轮次", of: "/", start: "开始", pause: "暂停", reset: "重置", skip: "跳过", done: "完成! 🎉", total: "总计", presets: "预设", custom: "自定义", workSec: "运动 (秒)", restSec: "休息 (秒)", rounds: "轮次", apply: "应用" }, }; var t = T[LANG] || T.en; var PRESETS = [ { name: "Tabata", work: 20, rest: 10, rounds: 8 }, { name: "HIIT", work: 40, rest: 20, rounds: 6 }, { name: "Circuit", work: 45, rest: 15, rounds: 10 }, { name: "Stretch", work: 30, rest: 10, rounds: 8 }, ]; export default function App() { var [workSec, setWorkSec] = useState(20); var [restSec, setRestSec] = useState(10); var [totalRounds, setTotalRounds] = useState(8); var [timeLeft, setTimeLeft] = useState(20); var [round, setRound] = useState(1); var [phase, setPhase] = useState("idle"); var [running, setRunning] = useState(false); var ref = useRef(null); var isWork = phase === "work"; var isRest = phase === "rest"; var isDone = phase === "done"; var totalSec = isWork ? workSec : isRest ? restSec : workSec; var progress = totalSec > 0 ? timeLeft / totalSec : 0; var mm = String(Math.floor(timeLeft / 60)).padStart(2, "0"); var ss = String(timeLeft % 60).padStart(2, "0"); useEffect(function() { if (!running || isDone) return; ref.current = setInterval(function() { setTimeLeft(function(prev) { if (prev <= 1) { if (isWork) { if (round >= totalRounds) { setPhase("done"); setRunning(false); return 0; } setPhase("rest"); return restSec; } else { setPhase("work"); setRound(function(r) { return r + 1; }); return workSec; } } return prev - 1; }); }, 1000); return function() { clearInterval(ref.current); }; }, [running, isWork, isDone, round, totalRounds, workSec, restSec]); var handleStart = useCallback(function() { if (phase === "idle" || isDone) { setPhase("work"); setRound(1); setTimeLeft(workSec); } setRunning(true); }, [phase, isDone, workSec]); var handlePause = useCallback(function() { setRunning(false); }, []); var handleReset = useCallback(function() { setRunning(false); setPhase("idle"); setRound(1); setTimeLeft(workSec); clearInterval(ref.current); }, [workSec]); var handleSkip = useCallback(function() { if (isWork) { if (round >= totalRounds) { setPhase("done"); setRunning(false); setTimeLeft(0); return; } setPhase("rest"); setTimeLeft(restSec); } else { setPhase("work"); setRound(function(r) { return r + 1; }); setTimeLeft(workSec); } }, [isWork, round, totalRounds, restSec, workSec]); var selectPreset = useCallback(function(p) { setWorkSec(p.work); setRestSec(p.rest); setTotalRounds(p.rounds); setTimeLeft(p.work); setPhase("idle"); setRound(1); setRunning(false); }, []); var bgColor = isDone ? "from-emerald-500 to-green-600" : isRest ? "from-orange-500 to-amber-600" : isWork ? "from-teal-600 to-emerald-700" : "from-slate-800 to-slate-950"; return (

{isDone ? (

🏆

{t.done}

{totalRounds} {t.round} · {totalRounds * (workSec + restSec)}{t.total}

) : ( <>

{isWork ? "🔥 " + t.work : isRest ? "💤 " + t.rest : t.ready} {t.round} {round}{t.of}{totalRounds}

{mm}:{ss}

{Array.from({ length: totalRounds }).map(function(_, i) { return

; })}

)}

{!running ? ( ) : ( <> )}

{(phase === "idle" || isDone) && (

{t.presets}

{PRESETS.map(function(p) { var active = p.work === workSec && p.rest === restSec && p.rounds === totalRounds; return ( ); })}

)}

); }

Workout Timer

Workout Timer

reviews