import React from "https://esm.sh/react@19"; import ReactDOMClient from "https://esm.sh/react-dom@19/client"; // lodash import를 제거해도 기능상 문제는 없으나, 원본 코드의 의도를 살리기 위해 유지합니다. import { get, set, cloneDeep } from "https://esm.sh/lodash@4"; const LOCAL_STORAGE_KEY = "reactTodos"; function App() { const [todos, setTodos] = React.useState([]); const [newTodoText, setNewTodoText] = React.useState(""); const [editingTodoId, setEditingTodoId] = React.useState(null); const [editText, setEditText] = React.useState(""); // inputRef는 개별 todo 항목 편집 시에도 사용되므로, 필요 시 각 todo에 대한 ref를 따로 관리하는 것이 더 좋을 수 있습니다. // 현재 구현에서는 마지막으로 편집하는 요소에만 focus가 맞춰지는 문제가 발생할 수 있습니다. // 이 예제에서는 기존 구조를 유지합니다. const inputRef = React.useRef(null); // Load todos from localStorage on initial render React.useEffect(() => { const storedTodos = localStorage.getItem(LOCAL_STORAGE_KEY); if (storedTodos) { try { setTodos(JSON.parse(storedTodos)); } catch (e) { console.error("Failed to parse todos from localStorage:", e); localStorage.removeItem(LOCAL_STORAGE_KEY); // Corrupted data, remove it } } }, []); // Save todos to localStorage whenever they change React.useEffect(() => { // Avoid saving on initial render if todos is empty and nothing was loaded if (todos.length > 0 || localStorage.getItem(LOCAL_STORAGE_KEY)) { try { localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todos)); } catch (e) { console.error("Failed to save todos to localStorage:", e); } } }, [todos]); const handleAddTodo = () => { if (newTodoText.trim()) { const newTodo = { id: Date.now(), text: newTodoText.trim(), // Trim whitespace from new todo text completed: false, }; // lodash.set 사용 부분을 React의 표준적인 불변성 업데이트 방식으로 수정합니다. // 기존 코드는 lodash.set을 불필요하게 복잡하게 사용하고 있었습니다. setTodos((prevTodos) => [...prevTodos, newTodo]); setNewTodoText(""); } }; const handleToggleComplete = (id) => { setTodos((prevTodos) => prevTodos.map((todo) => todo.id === id ? { ...todo, completed: !todo.completed } : todo ) ); }; const handleDeleteTodo = (id) => { setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id)); }; const handleStartEditing = (todo) => { setEditingTodoId(todo.id); setEditText(todo.text); // inputRef.current 가 null이 아닐 때 focus를 시도합니다. // Edit 모드로 전환 시마다 focus를 주기 위해 useEffect 후 callback에서 focus하는 방식을 사용할 수 있습니다. // 예제에서는 기존 onDoubleClick을 유지합니다. requestAnimationFrame(() => { // Ensure the input is rendered before focusing inputRef.current?.focus(); }); }; // Handle editing with double click const handleDoubleClick = (todo) => { handleStartEditing(todo); }; const handleSaveEdit = (id) => { if (editText.trim()) { setTodos((prevTodos) => prevTodos.map((todo) => todo.id === id ? { ...todo, text: editText.trim() } : todo // Trim edit text ) ); setEditingTodoId(null); setEditText(""); } else { // If edit text is empty, delete the todo handleDeleteTodo(id); setEditingTodoId(null); // Ensure editing state is reset } }; const handleCancelEdit = () => { setEditingTodoId(null); setEditText(""); }; const handleKeyDown = (e, id) => { if (e.key === "Enter") { e.preventDefault(); // Prevent form submission or default Enter behavior handleSaveEdit(id); } else if (e.key === "Escape") { e.preventDefault(); // Prevent default Escape behavior handleCancelEdit(); } }; const handleNewTodoKeyDown = (e) => { if (e.key === "Enter") { e.preventDefault(); // Prevent form submission or default Enter behavior handleAddTodo(); } }; return (

Todo App Powered by React

setNewTodoText(e.target.value)} onKeyDown={handleNewTodoKeyDown} placeholder="Add a new todo..." className="flex-grow p-3 rounded-l-lg border border-gray-300 dark:border-gray-700 dark:bg-gray-700 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600" aria-label="New todo input" />

handleToggleComplete(todo.id)} className="mr-4 h-5 w-5 text-blue-600 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded cursor-pointer focus:ring-blue-500" aria-label={`Toggle completion for ${todo.text}`} /> {editingTodoId === todo.id ? ( setEditText(e.target.value)} onKeyDown={(e) => handleKeyDown(e, todo.id)} // onBlur removed to allow saving via Enter key without losing focus prematurely // Use onKeyDown for saving/canceling className="flex-grow p-2 rounded bg-transparent border-b-2 border-blue-500 dark:border-blue-400 focus:outline-none focus:ring-0" aria-label="Edit todo input" autoFocus // Ensure input is focused when editing starts /> ) : ( handleDoubleClick(todo)} // Allow editing via double click > {todo.text} )}
{editingTodoId !== todo.id && ( )}
Your todo list is empty! Add something.

Double click item to edit, press Esc to cancel edit.
Press Enter to save edit or add new todo.

); } ReactDOMClient.createRoot(document.getElementById('root')).render();