REQUIREMENTS.md

Level 1: TodoList 기초

목표

App.jsx 파일 하나에서 TodoList의 CRUD 기능을 모두 구현합니다.

사용 개념

• useState

데이터 구조

각 할일(todo)은 다음 속성을 가집니다:

{
  id: 1,            // 고유 식별자 (숫자)
  title: "할일",     // 할일 제목 (문자열)
  completed: false,  // 완료 여부 (불리언)
  createdAt: "2026-03-18T12:00:00.000Z" // 생성 시간
}

요구사항

1. 할일 추가 (Create)

• 텍스트 입력창과 "추가" 버튼이 있어야 합니다
• 입력창에 할일을 입력하고 "추가" 버튼을 클릭하면 새로운 할일이 목록에 추가됩니다
• 추가 후 입력창은 비워져야 합니다
• 빈 문자열은 추가할 수 없어야 합니다

2. 할일 목록 표시 (Read)

• 모든 할일이 목록으로 표시되어야 합니다
• 각 할일에는 제목과 생성 시간이 보여야 합니다

3. 완료 처리 / 취소 (Update)

• 미완료 할일에는 "완료" 버튼이 있어야 합니다
• "완료" 버튼을 누르면 해당 할일의 completed가 true로 변경됩니다
• 완료된 할일에는 "취소" 버튼이 있어야 합니다
• "취소" 버튼을 누르면 completed가 다시 false로 변경됩니다
• 완료된 할일은 제목에 취소선이 표시되어야 합니다

4. 할일 삭제 (Delete)

• 각 할일에 "삭제" 버튼이 있어야 합니다
• "삭제" 버튼을 누르면 해당 할일이 목록에서 제거됩니다

스타일링

• CSS Module(App.module.css)을 사용합니다
• App.module.css에 .container와 .completed 클래스가 제공되어 있습니다
• 추가 스타일링은 자유롭게 해도 되고, 안 해도 됩니다

힌트

• id는 Date.now()를 활용하면 간단하게 고유값을 만들 수 있습니다
• createdAt은 new Date().toLocaleString()으로 보기 좋게 표시할 수 있습니다
• CSS Module은 import styles from './App.module.css' 으로 가져와서 className={styles.container} 처럼 사용합니다

완성 예시 구조

┌─────────────────────────────────┐
│          Todo List              │
│                                 │
│  [할일 입력...        ] [추가]  │
│                                 │
│  리액트 공부하기                │
│  2026. 3. 18. 오후 1:00        │
│  [완료]  [삭제]                 │
│                                 │
│  ~~장보기~~ (취소선)            │
│  2026. 3. 18. 오후 12:30       │
│  [취소]  [삭제]                 │
└─────────────────────────────────┘