ID: key_26_22_05_25_사전_P6 Created date: 5월 25 2026 월요일
연관 문서
개발 일정 > 사전 준비 UI (web-plate) | UI 개발
개요
web-plate (CIRA UI 레포) 루트에 CLAUDE.md를 작성한다.
이 파일은 Claude Code가 UI 컴포넌트를 생성·수정할 때 참조하는 핵심 컨텍스트 문서다.
Claude Code 작업 수행서
목표
UI 레포 루트에 CLAUDE.md를 생성하고, 컴포넌트 생성 규칙·상태 관리·API 연동 방식을 모두 명시한다.
작업 지시
UI 레포 루트에 CLAUDE.md 파일을 생성해줘.
아래 섹션을 모두 포함해서 작성해야 해.
---
## 프로젝트 개요
- 서비스명: CIRA UI
- 프레임워크: Next.js 14 (App Router)
- 언어: TypeScript (strict 모드)
- 컴포넌트 라이브러리: [P4에서 결정된 라이브러리]
- 스타일: Tailwind CSS
## 디렉토리 구조
src/
├── app/ (Next.js App Router 페이지)
│ ├── (auth)/ (로그인, 회원가입 — 레이아웃 분리)
│ └── (main)/ (인증 필요 페이지)
│ ├── projects/
│ ├── issues/
│ └── board/
├── components/
│ ├── ui/ (기본 UI 원자 컴포넌트)
│ ├── layout/ (AppLayout, Sidebar, Header)
│ ├── issue/ (이슈 관련 컴포넌트)
│ ├── board/ (칸반 보드)
│ └── shared/ (공통 모달, 폼 등)
├── hooks/ (커스텀 훅)
├── lib/
│ ├── api/ (axios 인스턴스, API 함수)
│ └── utils/ (유틸 함수)
├── store/ (Zustand 스토어)
└── types/ (전역 타입 정의)
## 컴포넌트 생성 규칙
- 파일명: PascalCase (예: IssueCard.tsx)
- 컴포넌트: 함수형 컴포넌트 + 화살표 함수
- Props 타입: interface XxxProps 또는 type XxxProps
- export: named export (default export 금지)
- 스타일: Tailwind 클래스 (인라인 style 금지)
## 상태 관리 규칙
- 서버 상태: @tanstack/react-query (useQuery, useMutation)
- 클라이언트 전역 상태: Zustand (스토어 파일: store/{도메인}Store.ts)
- 로컬 상태: useState/useReducer
## API 연동 규칙
- API 함수: lib/api/{도메인}.ts 에 모아서 관리
- 타입: types/{도메인}.ts 에서 import
- 에러 처리: axios 인터셉터에서 공통 처리 + useMutation onError
## 라우팅 규칙
- 인증 보호: middleware.ts에서 next-auth 세션 확인
- 동적 라우트: [projectId], [issueId] 형태
## 환경변수
- NEXT_PUBLIC_API_BASE_URL: 서버 API URL
- NEXTAUTH_URL: 현재 도메인
- NEXTAUTH_SECRET: JWT 서명 시크릿
## 코드 품질
- ESLint + Prettier 설정 준수
- 컴포넌트당 단일 책임 원칙
- 커스텀 훅으로 비즈니스 로직 분리
- 반응형: mobile-first (Tailwind 브레이크포인트)
완료 기준
| 항목 | 기준 |
|---|---|
| CLAUDE.md 존재 | 레포 루트에 커밋 |
| 디렉토리 구조 생성 | 스캐폴딩 완료 |
| Claude Code 검증 | CLAUDE.md 기반 컴포넌트 생성 테스트 1회 수행 |