Todo Tutorial

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

주요 기능

• 할 일 추가·수정·삭제·완료 토글
• 우선순위(높음/보통/낮음) 및 카테고리(업무/개인/쇼핑) 지정
• 키워드 검색, 상태(전체/진행중/완료)·카테고리별 필터링
• 생성일순·이름순·마감일순 정렬
• 다크 모드 지원 (d 키로 토글)
• 로컬 스토리지에 자동 저장되어 새로고침 후에도 유지

관련 링크

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

기술 스택

• Next.js 16 (App Router, Turbopack)
• React 19
• Tailwind CSS v4
• shadcn/ui (radix-mira 스타일, taupe 베이스, phosphor 아이콘)
• TypeScript / ESLint / Prettier
• Vitest / Testing Library
• 패키지 매니저: 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 테스트 실행 (watch 모드)

컴포넌트 추가

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

bunx --bun shadcn@latest add button

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

컴포넌트 사용

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

Contributors

• 토이크레인 - Frontend Developer