Todo Tutorial
Claude Code Playbook 강의의 실습용 저장소입니다. Next.js 와 shadcn/ui 로 시작하는 작은 Todo 앱을 단계별로 발전시키며 Claude Code 사용법을 익힙니다.
프로젝트 소개
브라우저 localStorage 에 데이터를 저장하는 Todo 앱입니다. 별도의 서버나 데이터베이스 없이 동작하며, 다음 기능을 제공합니다.
- 할 일 추가 · 완료 체크 · 삭제
- 할 일 텍스트 인라인 편집 (Enter 저장, Esc 취소, 비우면 삭제)
- 우선순위(높음 / 보통 / 낮음)와 마감일 지정
- 카테고리(업무 / 개인 / 쇼핑) 분류와 카테고리별 필터
- 제목 검색, 진행 상태 필터(전체 / 진행중 / 완료)
- 정렬(생성일순 / 이름순 / 마감일순)
- 다크 모드 (
d 키로 전환)
관련 링크
기술 스택
- Next.js 16 (App Router, Turbopack)
- React 19
- Tailwind CSS v4
- shadcn/ui (radix-maia 스타일, taupe 베이스)
- TypeScript / ESLint / Prettier
- 패키지 매니저: bun 1.3.6
시작하기
bun 이 설치되어 있어야 합니다.
bun install
bun dev
개발 서버는 기본적으로 http://localhost:3000 에서 열립니다.
자주 쓰는 스크립트:
bun dev # 개발 서버 실행
bun run build # 프로덕션 빌드
bun run start # 빌드 결과 실행
bun run lint # ESLint
bun run typecheck # tsc --noEmit
bun run format # Prettier 포맷팅
bun run test # Vitest 테스트 1회 실행
bun run test:watch # Vitest 감시 모드
챕터별 시작 브랜치
각 레슨은 시작 시점의 코드 상태를 브랜치로 제공합니다. 레슨 본문에서 안내하는 브랜치로 전환한 뒤 따라가시면 됩니다.
git checkout ch02-03
컴포넌트 추가
shadcn/ui 컴포넌트는 다음과 같이 추가합니다.
bunx --bun shadcn@latest add button
components/ui 디렉토리에 컴포넌트가 추가됩니다.
컴포넌트 사용
import { Button } from "@/components/ui/button";
Contributors
- 토이크레인 - Frontend Developer
