# 할일관리 앱 구현 계획

## Context

PRD에 정의된 간단한 할일관리 웹 앱을 구현한다. UI 레퍼런스(ToDoing 앱)의 따뜻한 디자인 톤과 TodoMVC/MS To Do의 UX 패턴을 참고하여, 단일 HTML 파일로 완성한다.

## 기술 결정

- **단일 파일**: `index.html` 하나에 HTML + CSS + JavaScript 모두 포함
- **프레임워크 없음**: vanilla JavaScript
- **데이터 저장**: localStorage
- **서버 불필요**: 브라우저에서 직접 열어 사용

## 구현할 기능

1. **할일 추가** — 입력창 + Enter 키 또는 추가 버튼
2. **할일 완료 토글** — 체크박스 클릭 → 취소선 처리
3. **할일 삭제** — 삭제(🗑) 버튼
4. **목록 표시** — 할일 리스트 렌더링
5. **localStorage 저장** — 추가/완료/삭제 시 자동 저장, 새로고침 후 복원
6. **진행률 표시** — 상단에 완료/전체 개수 및 프로그레스 바 (ToDoing 레퍼런스 참고)
7. **빈 상태 안내** — 할일이 없을 때 안내 메시지 표시

## UI/디자인 방향

레퍼런스 종합:

| 요소 | 적용 방향 |
|------|----------|
| 색상 | ToDoing 참고 — 따뜻한 골드/노란 포인트 컬러 + 흰 배경 |
| 레이아웃 | 중앙 정렬 카드형 컨테이너 (MS To Do 스타일) |
| 헤더 | 앱 제목 + 진행률 바 (ToDoing 참고) |
| 입력창 | 상단 고정, placeholder "할일을 입력하세요..." |
| 할일 항목 | 체크박스 + 텍스트 + 삭제 버튼, hover 시 삭제 버튼 강조 |
| 완료 처리 | 체크 시 취소선 + 텍스트 흐리게 (TodoMVC 패턴) |
| 반응형 | max-width 제한 + 모바일 대응 |

## 파일 구조

```
클로드md실습/
├── index.html          ← 신규 생성 (앱 본체)
├── PRD.md
├── REFERENCE.md
├── PLAN.md
└── CLAUDE.md
```

## 구현 순서

### Step 1: HTML 구조
- 헤더 (제목 + 진행률 바)
- 입력 영역 (input + 추가 버튼)
- 할일 리스트 컨테이너
- 빈 상태 메시지

### Step 2: CSS 스타일링
- 골드/노란 포인트 컬러 팔레트
- 카드형 컨테이너 + 그림자
- 할일 항목 스타일 (체크박스, 취소선, hover 효과)
- 프로그레스 바 애니메이션
- 반응형 미디어쿼리

### Step 3: JavaScript 로직
- Todo 데이터 모델 (id, text, completed)
- localStorage CRUD (load, save)
- 렌더링 함수 (리스트 + 진행률 업데이트)
- 이벤트 핸들러 (추가, 완료 토글, 삭제)
- Enter 키 바인딩

## 검증 방법

1. 브라우저에서 `index.html` 직접 열기
2. 할일 추가 → 리스트에 표시되는지 확인
3. 체크박스 토글 → 취소선 + 진행률 변경 확인
4. 삭제 버튼 → 항목 제거 확인
5. 새로고침 → 데이터 유지 확인
6. 모바일 너비(375px)로 축소 → 레이아웃 확인