import React, { useState, useCallback, useMemo } from "react"; import { Plus, X, Check, Flame, Trash2 } from "lucide-react"; const LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); const T = { ko: { title: "습관 트래커", add: "습관 추가", name: "습관 이름", placeholder: "예: 운동, 독서, 명상", save: "추가", empty: "습관을 추가해보세요", emptyDesc: "매일 체크하며 연속 기록을 만들어보세요", streak: "연속", best: "최고", days: "일", today: "오늘", done: "완료!", allDone: "오늘 할 일 끝! 🎉" }, en: { title: "Habit Tracker", add: "Add Habit", name: "Habit name", placeholder: "e.g. Exercise, Read, Meditate", save: "Add", empty: "Add your first habit", emptyDesc: "Check off daily and build your streak", streak: "Streak", best: "Best", days: "days", today: "Today", done: "Done!", allDone: "All done today! 🎉" }, ja: { title: "習慣トラッカー", add: "習慣を追加", name: "習慣名", placeholder: "例: 運動, 読書, 瞑想", save: "追加", empty: "習慣を追加しましょう", emptyDesc: "毎日チェックして連続記録を作りましょう", streak: "連続", best: "最高", days: "日", today: "今日", done: "完了!", allDone: "今日は全部完了! 🎉" }, zh: { title: "习惯追踪", add: "添加习惯", name: "习惯名称", placeholder: "例：运动、阅读、冥想", save: "添加", empty: "添加你的第一个习惯", emptyDesc: "每天打卡建立连续记录", streak: "连续", best: "最佳", days: "天", today: "今天", done: "完成!", allDone: "今天全部完成! 🎉" }, }; const t = T[LANG] || T.en; const EMOJIS = ["💪", "📚", "🧘", "🏃", "💤", "🥗", "✍️", "🎵", "🧹", "💊"]; const COLORS = ["from-orange-400 to-rose-500", "from-blue-400 to-indigo-500", "from-emerald-400 to-teal-500", "from-violet-400 to-purple-500", "from-amber-400 to-orange-500", "from-cyan-400 to-sky-500"]; export default function App() { const [habits, setHabits] = useSharedStorage("habits_v3", []); const [showAdd, setShowAdd] = useState(false); const [name, setName] = useState(""); const [emoji, setEmoji] = useState("💪"); const today = new Date().toISOString().slice(0, 10); const handleAdd = useCallback(() => { if (!name.trim()) return; setHabits(prev => [...(prev || []), { id: Date.now(), name: name.trim(), emoji, checks: [], streak: 0, bestStreak: 0, color: COLORS[((prev || []).length) % COLORS.length], }]); setName(""); setShowAdd(false); }, [name, emoji, setHabits]); const toggleCheck = useCallback((id) => { setHabits(prev => (prev || []).map(h => { if (h.id !== id) return h; const checks = h.checks || []; const done = checks.includes(today); const newChecks = done ? checks.filter(d => d !== today) : [...checks, today]; let streak = 0; const d = new Date(); while (true) { const ds = d.toISOString().slice(0, 10); if (newChecks.includes(ds)) { streak++; d.setDate(d.getDate() - 1); } else break; } return { ...h, checks: newChecks.slice(-60), streak, bestStreak: Math.max(h.bestStreak || 0, streak) }; })); }, [today, setHabits]); const deleteHabit = useCallback((id) => { setHabits(prev => (prev || []).filter(h => h.id !== id)); }, [setHabits]); const habitList = habits || []; const doneCount = habitList.filter(h => (h.checks || []).includes(today)).length; const allDone = habitList.length > 0 && doneCount === habitList.length; const last7 = useMemo(() => { const days = []; for (let i = 6; i >= 0; i--) { const d = new Date(); d.setDate(d.getDate() - i); days.push(d.toISOString().slice(0, 10)); } return days; }, []); return (

{t.title}

{habitList.length > 0 && (

{doneCount}/{habitList.length} {t.today}

)}

{allDone &&

{t.allDone}

}

{habitList.length === 0 ? (

🎯

{t.empty}

{t.emptyDesc}

) : (

{habitList.map(h => { const isDone = (h.checks || []).includes(today); return (

{h.name}

{h.streak} {t.days} {t.best} {h.bestStreak || 0}

{last7.map(d => { const checked = (h.checks || []).includes(d); return (

); })}

)}

{showAdd && (

setShowAdd(false)} />

{t.add}

{t.name} setName(e.target.value)} placeholder={t.placeholder} onKeyDown={e => e.key === "Enter" && handleAdd()} className="w-full px-4 py-3 rounded-xl border border-gray-200 text-base text-gray-900 mb-3 outline-none focus:ring-2 focus:ring-gray-900 placeholder:text-gray-400" />

{EMOJIS.map(em => ( ))}

)}

); }

Habit Tracker

Habit Tracker

reviews