Todo Tutorial

Claude Code Playbook 강의의 실습용 저장소입니다. Next.js 와 shadcn/ui 로 시작하는 작은 Todo 앱을 단계별로 발전시키며 Claude Code 사용법을 익힙니다.

"오늘의 할일"이라는 이름의 개인용 할일 관리 앱으로, 할일 추가·완료 체크·검색·정렬·우선순위와 카테고리 분류·다크모드 전환 같은 기능을 제공합니다.

주요 기능

• 할일 추가 / 완료 체크 / 삭제
• 우선순위·카테고리 선택
• 검색 및 카테고리 필터
• 정렬(우선순위, 생성일 등)
• 라이트/다크 테마 토글

관련 링크

• 강의 본문: https://docs.claude-hunt.com
• 수강생 결과물 공유: https://claude-hunt.com

기술 스택

• Next.js 16 (App Router, Turbopack)
• React 19
• Tailwind CSS v4
• shadcn/ui (radix-maia 스타일, taupe 베이스)
• TypeScript / ESLint / Prettier
• 패키지 매니저: bun 1.3.6

시작하기

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)
bun run test:watch # 테스트 watch 모드

챕터별 시작 브랜치

각 레슨은 시작 시점의 코드 상태를 브랜치로 제공합니다. 레슨 본문에서 안내하는 브랜치로 전환한 뒤 따라가시면 됩니다.

git checkout ch02-03

컴포넌트 추가

shadcn/ui 컴포넌트는 다음과 같이 추가합니다.

bunx --bun shadcn@latest add button

components/ui 디렉토리에 컴포넌트가 추가됩니다.

컴포넌트 사용

import { Button } from "@/components/ui/button";

Contributors

• 토이크레인 - Frontend Developer