미니 프로젝트 — 투두 앱

import { useState } from "react";

function TodoApp() {
  // state: 할 일 목록 배열
  const [todos, setTodos] = useState([
    { id: 1, text: "React 공부하기", completed: false },
    { id: 2, text: "투두 앱 만들기", completed: false },
  ]);

  // 다음 ID를 위한 카운터
  const [nextId, setNextId] = useState(3);

  // 필터 상태 (all / active / completed)
  const [filter, setFilter] = useState("all");

  return (
    <div className="todo-app">
      <h1>📝 할 일 목록</h1>

      {/* 입력 폼 */}
      <TodoForm onAdd={addTodo} />

      {/* 필터 버튼 */}
      <div className="filters">
        <button onClick={() => setFilter("all")}>전체</button>
        <button onClick={() => setFilter("active")}>진행 중</button>
        <button onClick={() => setFilter("completed")}>완료</button>
      </div>

      {/* 할 일 목록 */}
      <TodoList
        todos={filteredTodos}
        onToggle={toggleTodo}
        onDelete={deleteTodo}
      />

      {/* 통계 */}
      <p>{todos.filter(t => !t.completed).length}개 남음</p>
    </div>
  );
}

// ── 추가 (Create) ──
const addTodo = (text) => {
  const newTodo = {
    id: nextId,
    text: text,
    completed: false,
  };

  // 스프레드로 새 배열 생성 (기존 배열 수정 X)
  setTodos([...todos, newTodo]);
  setNextId(nextId + 1);
};

// ── 삭제 (Delete) ──
const deleteTodo = (id) => {
  // filter로 해당 id를 제외한 새 배열 생성
  setTodos(todos.filter(todo => todo.id !== id));
};

// ── TodoForm 컴포넌트 ──
function TodoForm({ onAdd }) {
  const [text, setText] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (text.trim() === "") return; // 빈 값 방지

    onAdd(text);   // 부모의 addTodo 호출
    setText("");    // 입력 필드 초기화
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="할 일을 입력하세요"
      />
      <button type="submit">추가</button>
    </form>
  );
}

// ── 완료 토글 (Update) ──
const toggleTodo = (id) => {
  setTodos(
    todos.map(todo =>
      todo.id === id
        ? { ...todo, completed: !todo.completed }  // 해당 항목만 변경
        : todo  // 나머지는 그대로
    )
  );
};

// ── 필터링 (파생 데이터) ──
const filteredTodos = todos.filter(todo => {
  if (filter === "active") return !todo.completed;
  if (filter === "completed") return todo.completed;
  return true;  // "all"
});

// ── TodoItem 컴포넌트 ──
function TodoItem({ todo, onToggle, onDelete }) {
  return (
    <li className={todo.completed ? "completed" : ""}>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => onToggle(todo.id)}
      />
      <span style={{
        textDecoration: todo.completed ? "line-through" : "none"
      }}>
        {todo.text}
      </span>
      <button onClick={() => onDelete(todo.id)}>삭제</button>
    </li>
  );
}