ID: key_26_22_05_25_P2_2_3 Created date: 5월 25 2026 월요일
연관 문서
개요
이슈 댓글 CRUD API 및 UI를 함께 구현한다.
마크다운 에디터, 멘션(@) 기능, 이모지 반응을 포함한다.
- 예상 소요: 3~4일
- 선행 조건: Phase 1 완료
- 완료 기준: 이슈 상세 페이지에서 댓글 작성·수정·삭제 동작 확인
Claude Code 작업 수행서
작업 지시
CIRA 서버 + UI에 댓글 기능을 구현해줘.
[프로젝트 경로]
- 서버: C:\workspace\tsh\boilerplate\be\befw-app-server
- UI: (web-plate 실제 경로)
[서버 수행 작업]
1. 댓글 도메인 패키지
com.tas.cira.comment/
├── controller/CommentController.java
├── service/CommentService.java
├── repository/CommentRepository.java
├── entity/Comment.java
├── entity/CommentReaction.java
└── dto/
├── CreateCommentRequest.java (content, parentCommentId?)
├── UpdateCommentRequest.java (content)
└── CommentResponse.java (id, author, content, createdAt, reactions, replies)
2. API 구현
POST /api/v1/issues/{issueId}/comments — 댓글 작성
GET /api/v1/issues/{issueId}/comments — 댓글 목록 (트리 구조)
PUT /api/v1/comments/{commentId} — 댓글 수정
DELETE /api/v1/comments/{commentId} — 댓글 삭제 (Soft Delete)
POST /api/v1/comments/{commentId}/reactions — 이모지 반응 추가/토글
GET /api/v1/users/search?keyword={q} — 멘션용 사용자 검색
3. 멘션 처리
- 댓글 content에서 @{username} 패턴 파싱
- 멘션된 사용자에게 알림 생성 (notifications 테이블 INSERT)
- 향후 이메일/인앱 알림 연동 포인트
4. 댓글 목록 트리 구조
- parentCommentId IS NULL: 최상위 댓글
- parentCommentId IS NOT NULL: 대댓글
- 응답: 최상위 댓글 + replies[] 배열 (2단계까지)
[UI 수행 작업]
5. CommentSection 컴포넌트
파일: src/components/issue/CommentSection.tsx
이슈 상세 페이지 하단에 삽입
구성:
- CommentList (댓글 목록)
- CommentForm (새 댓글 작성)
6. CommentItem 컴포넌트
파일: src/components/issue/CommentItem.tsx
표시 정보:
- 작성자 아바타 + 이름
- 작성 시간 (상대 시간: "3분 전", "2일 전")
- 마크다운 렌더링 (react-markdown)
- 수정/삭제 버튼 (본인 댓글만)
- 이모지 반응 버튼 (+추가 버튼)
- 답글 버튼 → 대댓글 입력 폼 토글
- 대댓글 목록 (들여쓰기)
7. CommentForm 컴포넌트
- 마크다운 에디터 (TipTap 또는 react-md-editor)
- 툴바: Bold, Italic, Code, Link
- 멘션(@) 자동완성:
* @ 입력 시 사용자 검색 팝업
* 선택 시 @{name} 삽입
- 단축키: Ctrl+Enter 제출
8. 이모지 반응 UI
- 기존 반응: 이모지 + 카운트 버튼 (클릭 시 토글)
- + 버튼: 이모지 피커 팝업 (emoji-picker-react)
- 본인이 반응한 항목 강조 표시
[준수 사항]
- 댓글 작성/수정 시 낙관적 업데이트
- 수정 모드: 댓글 본문 클릭 → 인라인 에디터 전환
- 삭제 확인 다이얼로그 표시
완료 기준
| 항목 | 기준 |
|---|---|
| 댓글 CRUD | 작성·수정·삭제 동작 |
| 대댓글 | 2단계 중첩 표시 |
| 마크다운 | 렌더링 정상 |
| 멘션 | @ 자동완성 동작 |
| 이모지 반응 | 추가/제거 토글 |
후행 작업
- 3-5_알림-시스템 — 멘션 알림 연동