export default function App() { const [tasks, setTasks] = useStorage("dailyTasks", []); const [input, setInput] = useState(""); const [selectedDate, setSelectedDate] = useState(() => dayjs().format("YYYY-MM-DD")); const inputRef = useRef(null); const todayStr = dayjs().format("YYYY-MM-DD"); const filteredTasks = useMemo(() => { const list = (tasks || []).filter(t => t.date === selectedDate); return list.slice().reverse(); }, [tasks, selectedDate]); const doneCount = (filteredTasks || []).filter(t => t.isDone).length; const totalCount = filteredTasks.length; const progress = totalCount === 0 ? 0 : Math.round((doneCount / totalCount) * 100); const handleAdd = () => { const trimmed = input.trim(); if (!trimmed) return; const newTask = { id: Date.now().toString(), text: trimmed, isDone: false, date: selectedDate, createdAt: Date.now(), }; setTasks([...(tasks || []), newTask]); setInput(""); inputRef.current?.focus(); }; const handleToggle = (id) => { setTasks((tasks || []).map(t => t.id === id ? { ...t, isDone: !t.isDone } : t)); }; const handleDelete = (id) => { setTasks((tasks || []).filter(t => t.id !== id)); }; const handleKeyDown = (e) => { if (e.key === "Enter") handleAdd(); }; const isToday = selectedDate === todayStr; const displayDate = isToday ? "오늘" : dayjs(selectedDate).format("M월 D일"); return (

{/* Header */}

{displayDate}의 할일

{dayjs(selectedDate).format("YYYY년 M월 D일 dddd".replace("dddd", ["일","월","화","수","목","금","토"][dayjs(selectedDate).day()]+"요일"))}

{totalCount > 0 && (

{doneCount}/{totalCount} 완료

)}

{/* Date selector */}

{[-1, 0, 1, 2].map(offset => { const d = dayjs().add(offset, "day"); const dStr = d.format("YYYY-MM-DD"); const isSelected = selectedDate === dStr; const label = offset === -1 ? "어제" : offset === 0 ? "오늘" : offset === 1 ? "내일" : d.format("M/D"); return ( ); })} setSelectedDate(e.target.value)} className="shrink-0 px-3 py-2 rounded-full text-xs text-teal-700 border border-teal-200 bg-white focus:outline-none focus:border-teal-400" />

{/* Task list */}

{filteredTasks.length === 0 ? (

✅

{displayDate}에 등록된 할일이 없어요

아래 입력창에 할일을 추가해보세요!

) : ( (filteredTasks || []).map(task => (

{/* Checkbox */} {/* Text */} {task.text} {/* Delete */}

)) )}

{/* Input bar */}

setInput(e.target.value)} onKeyDown={handleKeyDown} placeholder={`${displayDate} 할일을 입력하세요`} className="flex-1 px-4 py-3 rounded-xl border border-teal-200 text-sm text-slate-700 bg-teal-50 focus:outline-none focus:border-teal-400 placeholder-slate-300" />

); }