import React, { useState, useCallback, useMemo } from "react"; import { Plus, X, Trash2, Calendar } from "lucide-react"; var LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); var T = { ko: { title: "디데이", add: "추가", name: "이벤트 이름", date: "날짜", save: "저장", dday: "D-Day!", past: "지남", left: "일 남음", ago: "일 전", empty: "디데이를 추가하세요", emptyDesc: "생일, 기념일, 시험일 등을 등록하세요", today: "오늘" }, en: { title: "D-Day", add: "Add", name: "Event name", date: "Date", save: "Save", dday: "D-Day!", past: "past", left: "days left", ago: "days ago", empty: "Add a D-Day", emptyDesc: "Track birthdays, anniversaries, exams", today: "Today" }, ja: { title: "Dデイ", add: "追加", name: "イベント名", date: "日付", save: "保存", dday: "D-Day!", past: "過去", left: "日後", ago: "日前", empty: "Dデイを追加してください", emptyDesc: "誕生日、記念日、試験日などを登録", today: "今日" }, zh: { title: "倒数日", add: "添加", name: "事件名称", date: "日期", save: "保存", dday: "D-Day!", past: "已过", left: "天后", ago: "天前", empty: "添加倒数日", emptyDesc: "记录生日、纪念日、考试日", today: "今天" }, }; var t = T[LANG] || T.en; var EMOJIS = ["🎂", "❤️", "📚", "✈️", "🎉", "💍", "🏠", "🎓", "🏃", "⭐"]; export default function App() { var [events, setEvents] = useSharedStorage("dday_v2", []); var [showAdd, setShowAdd] = useState(false); var [name, setName] = useState(""); var [date, setDate] = useState(""); var [emoji, setEmoji] = useState("🎂"); var today = new Date(); today.setHours(0, 0, 0, 0); var sorted = useMemo(function() { return (events || []).slice().sort(function(a, b) { var da = Math.abs(new Date(a.date).getTime() - today.getTime()); var db = Math.abs(new Date(b.date).getTime() - today.getTime()); return da - db; }); }, [events, today]); var handleAdd = useCallback(function() { if (!name.trim() || !date) return; setEvents(function(prev) { return [{ id: Date.now(), name: name.trim(), date: date, emoji: emoji }, ...(prev || [])]; }); setName(""); setDate(""); setShowAdd(false); }, [name, date, emoji, setEvents]); var del = useCallback(function(id) { setEvents(function(prev) { return (prev || []).filter(function(e) { return e.id !== id; }); }); }, [setEvents]); function getDiff(dateStr) { var target = new Date(dateStr); target.setHours(0, 0, 0, 0); return Math.round((target.getTime() - today.getTime()) / 86400000); } return (

{t.title}

{today.toLocaleDateString(LANG, { year: "numeric", month: "long", day: "numeric", weekday: "long" })}

{sorted.length === 0 ? (

📅

{t.empty}

{t.emptyDesc}

) : (

{sorted.map(function(ev) { var diff = getDiff(ev.date); var isToday = diff === 0; var isFuture = diff > 0; var absDiff = Math.abs(diff); var label = isToday ? t.dday : isFuture ? absDiff + " " + t.left : absDiff + " " + t.ago; var color = isToday ? "bg-gradient-to-r from-rose-500 to-pink-500 text-white" : isFuture ? "bg-white border border-gray-100" : "bg-gray-50"; var numColor = isToday ? "text-white" : isFuture ? "text-rose-500" : "text-gray-400"; var textColor = isToday ? "text-white" : "text-gray-900"; var subColor = isToday ? "text-white/70" : "text-gray-400"; return (

{ev.emoji}

{ev.name}

{ev.date}

{isToday ? "D-0" : isFuture ? "D-" + absDiff : "D+" + absDiff}

{label}

); })}

)}

{showAdd && (

{t.add}

{t.name} {t.date}

{EMOJIS.map(function(em) { return ( ); })}

)}

); }

D-Day Counter

D-Day Counter

reviews