요구사항 분석 → DB 설계 → API → UI → 테스트까지 실제 기능 하나를 Claude Code와 함께 처음부터 끝까지 완성하는 실전 워크스루.
실전 프로젝트 — 기능 하나를 처음부터 끝까지
이론과 실전은 다릅니다. 이 강에서는 지금까지 배운 모든 기법을 통합해서 실제 기능 하나 — "회사 후기 시스템" — 을 처음부터 끝까지 Claude Code와 함께 구현합니다. 요구사항 분석 → DB 설계 → Server Action → UI → 테스트 → 배포 체크까지 전체 흐름을 보여줍니다.
1단계: 요구사항 분석 (탐색)
"회사 후기 시스템을 구현하기 전에 먼저 현재 코드베이스를 파악해줘.
수정하지 말고 분석만:
파악할 것:
1. 현재 companies 테이블 구조 (types/supabase.ts)
2. 회사 관련 기존 페이지/컴포넌트
3. 유사한 기능 (공고 리뷰 등) 이 이미 있는지
4. 인증 패턴 (로그인 사용자만 후기 작성 가능해야 함)
분석 완료 후 구현 전 질문할 것이 있으면 물어봐."2단계: 설계 계획 수립
"분석 결과를 바탕으로 회사 후기 시스템 구현 계획을 작성해줘.
요구사항:
- 로그인 사용자만 후기 작성 (회사당 1개)
- 평점 (1~5), 장점, 단점, 한줄평
- 후기 목록은 누구나 볼 수 있음
- 어드민이 부적절한 후기 삭제 가능
계획에 포함:
1. DB 테이블 설계 (company_reviews)
2. RLS 정책
3. 생성할 파일 목록
4. 작업 순서 (의존성 고려)
5. 예상 리스크
계획 확인 후 승인하면 구현 시작."3단계: DB 마이그레이션 (실행)
"승인했어. 1단계로 DB 마이그레이션부터 시작해줘.
파일: supabase/migrations/[timestamp]_create_company_reviews.sql
포함할 것:
- company_reviews 테이블 생성
- 인덱스 (company_id, user_id)
- RLS 정책 4개 (SELECT 공개, INSERT 인증됨+1개, UPDATE 본인, DELETE 본인+어드민)
- unique(company_id, user_id) 제약 (회사당 1개)"4단계: Server Action
"DB 준비됐어. 다음은 Server Action 작성해줘.
파일: app/actions/reviews.ts
함수:
- createReview(data): 후기 작성 (로그인 필수)
- updateReview(id, data): 후기 수정 (본인만)
- deleteReview(id): 후기 삭제 (본인 또는 어드민)
- getCompanyReviews(companyId): 회사 후기 목록
패턴:
- 반환: { success: boolean, data?, message? }
- 인증: Supabase auth.getUser()
- 타입: types/supabase.ts의 자동생성 타입 사용"5단계: UI 컴포넌트
"Server Action 완료. 이제 UI 만들어줘.
컴포넌트:
1. components/ReviewForm.tsx
- 별점 선택 (1~5, 클릭 가능한 별 아이콘)
- 장점/단점/한줄평 textarea
- 제출 버튼 (로딩 상태)
- 이미 작성한 경우 수정 모드로 전환
2. components/ReviewList.tsx
- 별점 평균 + 분포 바
- 후기 카드 목록 (작성자·날짜·별점·내용)
- 본인 후기에는 수정/삭제 버튼
3. app/[locale]/companies/[id]/page.tsx 에 ReviewList 통합"6단계: 테스트 및 검증
"UI까지 완성됐어. 전체 검증해줘.
1. 타입 검증: npx tsc --noEmit
2. 린트: npm run lint
3. 빌드: npm run build
기능 테스트 시나리오 작성:
- 비로그인 사용자: ReviewForm 비표시, 후기 목록은 표시
- 로그인 사용자: 후기 작성 → 성공
- 중복 작성 시도: 에러 메시지 표시
- 본인 후기 수정/삭제: 정상 작동
- 어드민 타인 후기 삭제: 정상 작동
테스트 코드로 작성해줘 (수동 테스트 대신)."7단계: 배포 준비
"배포 전 최종 체크:
/pre-pr 실행 후 추가로:
1. 마이그레이션 파일이 실제 Supabase에 적용됐는지 확인
2. 새 환경변수 추가됐으면 Vercel에 등록 필요 여부
3. 이 기능이 영향 주는 기존 페이지 목록
4. PR 설명 초안 (이슈 #번호 연결 포함)"완성된 워크플로우 요약
탐색 (읽기만)
↓
계획 수립 + 승인
↓
DB 마이그레이션 → npx tsc 확인
↓
Server Action → npx tsc 확인
↓
UI 컴포넌트 → npm run build 확인
↓
테스트 작성 → npm run test 확인
↓
/pre-pr → PR 생성실전에서 가장 중요한 것은 "각 단계마다 검증하는 것"입니다. DB 마이그레이션 완료 후 타입 체크, Server Action 완료 후 빌드 확인 — 단계별 검증이 없으면 UI까지 만들고 나서야 초기 DB 설계 오류를 발견하는 상황이 발생합니다. 오류는 가장 가까운 곳에서 잡는 것이 가장 저렴합니다.
핵심 정리
- 탐색(읽기만) → 계획+승인 → DB → Action → UI → 테스트 → 배포 순서 — 단계 건너뛰지 않는 것이 전체 속도를 높임
- 각 단계 완료마다 npx tsc → npm run build 검증 — 오류가 누적되지 않게 즉시 처리
- 테스트는 마지막이 아닌 각 레이어마다 — DB RLS, Server Action, UI 컴포넌트 각각의 테스트로 재발 방지
관련 검색어 · 클로드 코드 실전 · AI 기능 개발 · Claude Code 프로젝트 · 클로드 코드 완벽 마스터 · Next.js Supabase AI 개발