Clush Workshop TODO

스펙드리븐 워크샵 실습을 위한 React + Vite + TypeScript TODO 앱입니다.

이 프로젝트는 완성형 서비스가 아니라, 워크샵 중 스펙을 먼저 확정하고 그 스펙을 기반으로 기존 TODO 앱에 기능을 추가하는 과정을 연습하기 위한 출발점입니다.

기술 스택

• Node.js 24 이상
• React
• Vite
• TypeScript
• Vitest
• ESLint
• Mock API

현재 기능

• 할 일 등록
• 등록된 할 일 목록 표시
• 완료 처리 시 해당 할 일을 목록에서 제거

백엔드는 포함하지 않습니다. 모든 API 통신은 프론트엔드 내부 mock API로 비동기 호출처럼 동작합니다.

실행 방법

의존성을 설치합니다.

npm install

개발 서버를 실행합니다.

npm run dev

기본 접속 주소는 Vite가 출력하는 로컬 URL을 사용합니다.

검증 명령

린트를 실행합니다.

npm run lint

테스트를 실행합니다.

npm test

프로덕션 빌드를 확인합니다.

npm run build

워크샵 실습 계획

워크샵에서는 이 TODO 앱을 기반으로 스펙드리븐 개발 흐름을 실습합니다.

1. .opencode 기반으로 coder, reviewer, planner 서브에이전트를 만듭니다.
2. 스펙을 인터뷰 형태로 확정하는 커맨드를 만듭니다.
3. 확정된 스펙을 바탕으로 기존 TODO 앱에 기능을 추가합니다.

프로젝트 구조

src/
  api/
    todos.ts
  App.tsx
  main.tsx
.opencode/
  agents/
  commands/
  modes/
  plugins/
  skills/
  tools/
  themes/