import React, { useState, useCallback, useMemo } from "react"; import { ChevronLeft, ChevronRight } from "lucide-react"; const LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); const T = { ko: { title: "기분 일기", how: "오늘 기분이 어때요?", note: "한줄 메모 (선택)", save: "기록하기", saved: "오늘 기분 기록 완료!", history: "기록", empty: "아직 기록이 없어요", streak: "연속 기록", days: "일", thisMonth: "이번 달" }, en: { title: "Mood Journal", how: "How are you feeling?", note: "Short note (optional)", save: "Save", saved: "Today's mood saved!", history: "History", empty: "No entries yet", streak: "Streak", days: "days", thisMonth: "This Month" }, ja: { title: "気分日記", how: "今日の気分は?", note: "一言メモ (任意)", save: "記録する", saved: "今日の気分を記録しました!", history: "履歴", empty: "まだ記録がありません", streak: "連続記録", days: "日", thisMonth: "今月" }, zh: { title: "心情日记", how: "今天感觉如何?", note: "简短备注 (可选)", save: "记录", saved: "今天的心情已记录!", history: "历史", empty: "暂无记录", streak: "连续记录", days: "天", thisMonth: "本月" }, }; const t = T[LANG] || T.en; const MOODS = [ { emoji: "😄", label: "Great", color: "from-emerald-400 to-green-500", bg: "bg-emerald-50", text: "text-emerald-600" }, { emoji: "🙂", label: "Good", color: "from-sky-400 to-blue-500", bg: "bg-sky-50", text: "text-sky-600" }, { emoji: "😐", label: "Okay", color: "from-amber-400 to-yellow-500", bg: "bg-amber-50", text: "text-amber-600" }, { emoji: "😔", label: "Bad", color: "from-orange-400 to-red-400", bg: "bg-orange-50", text: "text-orange-600" }, { emoji: "😢", label: "Awful", color: "from-gray-400 to-slate-500", bg: "bg-gray-100", text: "text-gray-600" }, ]; export default function App() { const [entries, setEntries] = useSharedStorage("mood_v2", []); const [selected, setSelected] = useState(null); const [note, setNote] = useState(""); const [flash, setFlash] = useState(false); const today = new Date().toISOString().slice(0, 10); const todayEntry = (entries || []).find(e => e.date === today); const handleSave = useCallback(() => { if (selected === null) return; const entry = { date: today, mood: selected, note: note.trim(), time: new Date().toLocaleTimeString(LANG, { hour: "2-digit", minute: "2-digit" }) }; setEntries(prev => { const without = (prev || []).filter(e => e.date !== today); return [entry, ...without].slice(0, 90); }); setSelected(null); setNote(""); setFlash(true); setTimeout(() => setFlash(false), 2000); }, [selected, note, today, setEntries]); const streak = useMemo(() => { let count = 0; const d = new Date(); while (true) { const ds = d.toISOString().slice(0, 10); if ((entries || []).some(e => e.date === ds)) { count++; d.setDate(d.getDate() - 1); } else break; } return count; }, [entries]); const recent = (entries || []).slice(0, 14); const moodForEntry = todayEntry ? MOODS[todayEntry.mood] : null; return (

{t.title}

{streak > 0 && ( 🔥 {streak} {t.days} )}

{todayEntry ? (

{MOODS[todayEntry.mood].emoji}

{todayEntry.note &&

{todayEntry.note}

}

{todayEntry.time}

) : (

{t.how}

{MOODS.map((m, i) => ( ))}

{selected !== null && ( <> setNote(e.target.value)} placeholder={t.note} onKeyDown={e => e.key === "Enter" && handleSave()} className="w-full px-3 py-2.5 rounded-xl bg-white/90 border border-gray-200 text-gray-900 text-sm outline-none placeholder:text-gray-400 mb-3" /> )}

)} {flash &&

{t.saved}

} {recent.length > 0 && (

{t.history}

{recent.map(e => (

{MOODS[e.mood].emoji}

{e.note &&

{e.note}

}

{e.date === today ? t.thisMonth : e.date.slice(5)} · {e.time}

))}

)} {recent.length === 0 && !todayEntry && (

{t.empty}

)}

); }

Mood Journal

Mood Journal

reviews