import React, { useState, useCallback, useMemo } from "react"; import { Plus, Trash2, Check, Circle } from "lucide-react"; var LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); var T = { ko: { title: "할일 목록", add: "할일 추가", placeholder: "무엇을 해야 하나요?", all: "전체", active: "진행", done: "완료", empty: "할일이 없습니다", emptyDesc: "위 입력창에 할일을 추가하세요", clear: "완료 항목 삭제", items: "개", completed: "완료" }, en: { title: "Todo List", add: "Add Todo", placeholder: "What needs to be done?", all: "All", active: "Active", done: "Done", empty: "No todos", emptyDesc: "Add a todo using the input above", clear: "Clear completed", items: "items", completed: "completed" }, ja: { title: "やることリスト", add: "追加", placeholder: "何をしますか?", all: "全て", active: "進行中", done: "完了", empty: "やることがありません", emptyDesc: "上の入力欄からやることを追加しましょう", clear: "完了を削除", items: "件", completed: "完了" }, zh: { title: "待办事项", add: "添加", placeholder: "需要做什么?", all: "全部", active: "进行中", done: "已完成", empty: "暂无待办", emptyDesc: "在上方输入框添加待办事项", clear: "清除已完成", items: "项", completed: "完成" }, }; var t = T[LANG] || T.en; export default function App() { var [todos, setTodos] = useSharedStorage("todos_v3", []); var [input, setInput] = useState(""); var [filter, setFilter] = useState("all"); var list = todos || []; var doneCount = list.filter(function(td) { return td.done; }).length; var activeCount = list.length - doneCount; var progress = list.length > 0 ? Math.round((doneCount / list.length) * 100) : 0; var filtered = useMemo(function() { if (filter === "active") return list.filter(function(td) { return !td.done; }); if (filter === "done") return list.filter(function(td) { return td.done; }); return list; }, [list, filter]); var handleAdd = useCallback(function() { if (!input.trim()) return; setTodos(function(prev) { return [{ id: Date.now(), text: input.trim(), done: false }, ...(prev || [])]; }); setInput(""); }, [input, setTodos]); var toggle = useCallback(function(id) { setTodos(function(prev) { return (prev || []).map(function(td) { return td.id === id ? { ...td, done: !td.done } : td; }); }); }, [setTodos]); var remove = useCallback(function(id) { setTodos(function(prev) { return (prev || []).filter(function(td) { return td.id !== id; }); }); }, [setTodos]); var clearDone = useCallback(function() { setTodos(function(prev) { return (prev || []).filter(function(td) { return !td.done; }); }); }, [setTodos]); return (

{t.title}

{list.length > 0 && (

{doneCount}/{list.length}

)}

{["all", "active", "done"].map(function(f) { var label = f === "all" ? t.all + " " + list.length : f === "active" ? t.active + " " + activeCount : t.done + " " + doneCount; return ( ); })}

{filtered.length === 0 ? (

📋

{t.empty}

{t.emptyDesc}

) : (

{filtered.map(function(todo) { return (

{todo.text}

); })}

)}

{doneCount > 0 && (

)}

); }

Todo List

Todo List

reviews