ID: key_26_22_05_25_P1_1_6 Created date: 5월 25 2026 월요일
연관 문서
개요
이슈 목록, 상세, 생성 모달 UI를 구현한다. Phase 1 UI의 핵심 화면이다.
- 예상 소요: 4~5일
- 선행 조건: 1-3_서버-이슈-CRUD-API, 1-5_UI-인증-페이지 완료
- 완료 기준: 이슈 생성 → 목록 확인 → 상세 진입 → 수정 → 삭제 전체 플로우 동작 확인
구현 화면 목록
| 경로 | 설명 |
|---|---|
| /projects | 프로젝트 목록 |
| /projects/[projectId]/issues | 이슈 목록 |
| /projects/[projectId]/issues/[issueId] | 이슈 상세 |
| (모달) | 이슈 생성 모달 |
Claude Code 작업 수행서
목표
이슈 CRUD UI 전체를 구현한다. React Query로 서버 상태를 관리하고, 인라인 편집을 지원한다.
작업 지시
CIRA UI에 이슈 목록, 상세, 생성 UI를 구현해줘. CLAUDE.md 컨벤션 준수.
[프로젝트 경로]
- UI 레포 경로: (web-plate 실제 경로)
[수행 작업]
1. API 함수 작성
파일: src/lib/api/projects.ts, src/lib/api/issues.ts
- getProjects(): Promise<ProjectSummaryResponse[]>
- getProject(projectId): Promise<ProjectResponse>
- createProject(data): Promise<ProjectResponse>
- getIssues(projectId, filters): Promise<PageResponse<IssueSummaryResponse>>
- getIssue(issueId): Promise<IssueResponse>
- createIssue(projectId, data): Promise<IssueResponse>
- updateIssue(issueId, data): Promise<IssueResponse>
- deleteIssue(issueId): Promise<void>
- updateIssueStatus(issueId, statusId): Promise<IssueResponse>
2. 타입 정의
파일: src/types/issue.ts, src/types/project.ts
- 서버 응답 타입과 1:1 매핑
- IssueFilterParams 타입 (status, priority, assigneeId 등)
3. 프로젝트 목록 페이지
파일: src/app/(main)/projects/page.tsx
- useQuery로 프로젝트 목록 조회
- 프로젝트 카드 컴포넌트 (이름, 키, 멤버 수, 이슈 수)
- 프로젝트 생성 버튼 → CreateProjectModal
- 로딩/에러 상태 처리
4. 이슈 목록 페이지
파일: src/app/(main)/projects/[projectId]/issues/page.tsx
컴포넌트 구성:
- IssueListPage (페이지 컴포넌트)
- IssueFilter (필터 바 — 상태, 우선순위, 담당자, 검색어)
- IssueTable (테이블 형식 목록)
* 컬럼: 이슈키, 제목, 상태(배지), 우선순위(아이콘), 담당자(아바타), 생성일
* 행 클릭 → 상세 페이지 이동
- Pagination (페이지네이션)
- CreateIssueButton → CreateIssueModal
5. 이슈 생성 모달
파일: src/components/issue/CreateIssueModal.tsx
- 필드:
* 이슈 타입 (아이콘 드롭다운)
* 제목 (필수, 최대 500자)
* 설명 (마크다운 에디터 — react-md-editor 또는 TipTap)
* 우선순위 드롭다운
* 담당자 (프로젝트 멤버 검색)
* 스프린트 (선택)
* 스토리 포인트 (숫자 입력)
* 시작일 / 마감일 (날짜 선택)
- 폼 유효성: 제목 필수
- useMutation으로 이슈 생성, 완료 후 목록 자동 갱신 (queryClient.invalidateQueries)
6. 이슈 상세 페이지
파일: src/app/(main)/projects/[projectId]/issues/[issueId]/page.tsx
레이아웃: 2컬럼 (좌: 본문, 우: 사이드 메타정보)
좌측:
- 이슈 키 + 제목 (클릭 시 인라인 편집)
- 설명 (마크다운 렌더링, 편집 버튼)
- 이슈 로그 타임라인 (하단)
우측 사이드:
- 상태 변경 버튼 (useAvailableTransitions)
- 담당자 (아바타 + 이름, 클릭 시 변경)
- 보고자
- 우선순위
- 스프린트
- 스토리 포인트
- 시작일 / 마감일
- 생성일 / 수정일
인라인 편집 패턴:
- 필드 클릭 → 편집 모드 전환
- 저장 (Enter 또는 외부 클릭) → updateIssue API 호출
- 취소 (Esc)
7. React Query 훅 분리
파일: src/hooks/useIssues.ts, src/hooks/useProjects.ts
- useIssues(projectId, filters)
- useIssue(issueId)
- useCreateIssue()
- useUpdateIssue()
- useDeleteIssue()
- useUpdateIssueStatus()
8. 삭제 기능
- 이슈 상세 페이지 상단 "더보기" 메뉴 → 삭제
- 확인 다이얼로그 표시
- 삭제 후 이슈 목록으로 이동
[준수 사항]
- 로딩 상태: 스켈레톤 UI 사용 (Shimmer 효과)
- 에러 상태: 토스트 알림
- 낙관적 업데이트 (useMutation의 onMutate) — 상태 변경 시 즉시 UI 반영
- 반응형 (모바일에서 우측 사이드바 하단으로 이동)
완료 기준
| 항목 | 기준 |
|---|---|
| 이슈 목록 | 필터링 + 페이지네이션 동작 |
| 이슈 생성 | 모달 → 생성 → 목록 자동 갱신 |
| 이슈 상세 | 전체 메타 정보 표시 |
| 인라인 편집 | 필드 클릭 → 편집 → 저장 동작 |
| 상태 변경 | 허용된 상태만 선택 가능 |
| 삭제 | 확인 다이얼로그 → 삭제 → 목록 이동 |
후행 작업
- 2-2_UI-칸반-보드 — 이슈 카드 컴포넌트 재사용
- 2-3_댓글-API-UI — 이슈 상세 페이지에 댓글 섹션 추가