ID: key_26_22_05_25_사전_P4 Created date: 5월 25 2026 월요일
연관 문서
개발 일정 > 사전 준비 UI 개발 | UI (web-plate)
개요
UI 프레임워크 및 컴포넌트 라이브러리를 확정한다. 확정 전에는 UI 개발을 시작하지 않는다.
후보 비교
| 항목 | Ant Design | Material-UI (MUI) | Shadcn/ui + Tailwind |
|---|---|---|---|
| 번들 크기 | 큼 | 중간 | 작음 (필요한 것만) |
| 커스터마이징 | 테마 토큰 기반 | sx prop | Tailwind 클래스 |
| TypeScript | 완전 지원 | 완전 지원 | 완전 지원 |
| Jira 유사 UI | 높음 | 중간 | 자유도 높음 |
| 차트 연동 | Ant Design Charts | Recharts/Chart.js | Recharts/Chart.js |
Claude Code 작업 수행서
목표
선택된 UI 라이브러리를 프로젝트에 설치하고 글로벌 테마 및 공통 컴포넌트 기반을 구성한다.
작업 지시
CIRA UI 프로젝트에 컴포넌트 라이브러리를 설정하고 기초 구조를 구성해줘.
[프로젝트 경로]
- UI 레포 경로: (실제 경로 기재, web-plate 기반)
- 선택 라이브러리: [Ant Design / MUI / Shadcn+Tailwind 중 결정값]
[수행 작업]
1. 패키지 설치
- 선택된 컴포넌트 라이브러리
- 추가 필수 패키지:
* @hello-pangea/dnd (칸반 Drag & Drop)
* recharts (차트)
* @tanstack/react-query (서버 상태 관리)
* zustand (클라이언트 상태 관리)
* next-auth (인증)
* axios (HTTP 클라이언트)
2. 글로벌 테마 설정
- 색상 토큰 정의 (Primary, Secondary, Success, Warning, Error)
- Typography 스케일
- 브레이크포인트 (mobile: 768px, tablet: 1024px, desktop: 1280px)
3. 공통 레이아웃 컴포넌트 생성
- AppLayout (사이드바 + 헤더 + 컨텐츠 영역)
- Sidebar (프로젝트 네비게이션)
- Header (검색바, 알림, 프로필)
4. API 클라이언트 설정
- axios 인스턴스 생성 (baseURL, 인터셉터)
- 응답 포맷 타입 정의 (ApiResponse<T>, PageResponse<T>)
- 인증 토큰 자동 헤더 삽입
5. 환경변수 파일 구성
- .env.local.example 생성
- NEXT_PUBLIC_API_BASE_URL 등 필수 변수 정의
[준수 사항]
- TypeScript strict 모드 유지
- 절대 경로 import 설정 (@/ prefix)
- CLAUDE.md "UI 기술 스택" 섹션 업데이트
완료 기준
| 항목 | 기준 |
|---|---|
| 패키지 설치 | npm run build 오류 없음 |
| 테마 설정 | 색상 토큰 정의 완료 |
| AppLayout | 스토리북 또는 dev 서버에서 렌더링 확인 |
| API 클라이언트 | 타입 정의 완료 |
선행 조건
- UI 레포(
web-plate) 접근 가능 상태