import React, { useState, useCallback, useEffect } from "react"; import { Plus, Minus, RotateCcw, Target, ChevronDown } from "lucide-react"; const LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); const T = { ko: { cups: "잔", goal: "목표", today: "오늘", done: "목표 달성! 🎉", left: "잔 남음", reset: "초기화", history: "최근 7일", goalLabel: "일일 목표", apply: "적용", avg: "평균" }, en: { cups: "cups", goal: "Goal", today: "Today", done: "Goal reached! 🎉", left: "cups left", reset: "Reset", history: "Last 7 days", goalLabel: "Daily Goal", apply: "Apply", avg: "Average" }, ja: { cups: "杯", goal: "目標", today: "今日", done: "目標達成! 🎉", left: "杯残り", reset: "リセット", history: "直近7日間", goalLabel: "1日の目標", apply: "適用", avg: "平均" }, zh: { cups: "杯", goal: "目标", today: "今天", done: "达标! 🎉", left: "杯剩余", reset: "重置", history: "最近7天", goalLabel: "每日目标", apply: "应用", avg: "平均" }, }; const t = T[LANG] || T.en; const DAYS = { ko: ["일","월","화","수","목","금","토"], en: ["S","M","T","W","T","F","S"], ja: ["日","月","火","水","木","金","土"], zh: ["日","一","二","三","四","五","六"] }; const dayLabels = DAYS[LANG] || DAYS.en; export default function App() { const [cups, setCups] = useSharedStorage("water_cups_v2", 0); const [goal, setGoal] = useSharedStorage("water_goal_v2", 8); const [history, setHistory] = useSharedStorage("water_hist_v2", []); const [savedDate, setSavedDate] = useSharedStorage("water_date_v2", ""); const [showGoal, setShowGoal] = useState(false); const [tempGoal, setTempGoal] = useState(goal); const today = new Date().toISOString().slice(0, 10); useEffect(() => { if (savedDate !== today) { if (savedDate && cups > 0) { setHistory(prev => { const h = (prev || []).filter(d => d.date !== savedDate); return [{ date: savedDate, cups }, ...h].slice(0, 30); }); } setSavedDate(today); setCups(0); } }, [today, savedDate, cups, setSavedDate, setCups, setHistory]); const progress = Math.min(cups / goal, 1); const remaining = Math.max(goal - cups, 0); const R = 90; const C = 2 * Math.PI * R; const addCup = useCallback(() => setCups(c => c + 1), [setCups]); const removeCup = useCallback(() => setCups(c => Math.max(0, c - 1)), [setCups]); const resetCups = useCallback(() => setCups(0), [setCups]); const last7 = []; for (let i = 6; i >= 0; i--) { const d = new Date(); d.setDate(d.getDate() - i); const ds = d.toISOString().slice(0, 10); const entry = ds === today ? { date: ds, cups } : (history || []).find(h => h.date === ds); last7.push({ date: ds, cups: entry ? entry.cups : 0, day: dayLabels[d.getDay()] }); } const weekAvg = Math.round(last7.reduce((s, d) => s + d.cups, 0) / 7 * 10) / 10; return (

{cups}

/ {goal} {t.cups}

{progress >= 1 ? (

{t.done}

) : (

{remaining} {t.left}

)}

{t.history}

{t.avg} {weekAvg}

{last7.map((d, i) => { const pct = goal > 0 ? Math.min(d.cups / goal, 1) : 0; const isToday = d.date === today; return (

{d.day}

); })}

{showGoal && (

setShowGoal(false)} />

{t.goalLabel}

{tempGoal}

)}

); }

Water Tracker

Water Tracker

reviews