[FEATURE] 대댓글 시스템 구현 완료

[scs0209]

구현 완료 내용

대댓글 시스템 구현

• 대댓글 작성: 댓글에 대한 답글 작성 기능
• 대댓글 수정: 인라인 편집으로 대댓글 내용 수정
• 대댓글 삭제: 대댓글 삭제 기능 (작성자/관리자만 가능)
• 좋아요/싫어요: 대댓글에도 좋아요/싫어요 시스템 적용

기술 스펙

• React Hook Form + Zod validation
• 부모-자식 댓글 관계 (Prisma 모델링)
• 일관된 디자인 시스템 (fuchsia 테마로 댓글과 구분)
• TypeScript 타입 안전성 보장

관련 파일

• src/features/comment/ui/ReplyForm.tsx - 대댓글 작성 폼
• src/features/comment/ui/Reply.tsx - 대댓글 컴포넌트
• src/features/comment/ui/ReplyEditForm.tsx - 대댓글 수정 폼
• src/features/comment/ui/Comment.tsx - 댓글 컴포넌트 (대댓글 리스트 포함)

주요 기능

✅ 대댓글 작성 (parentId 관계)
✅ 대댓글 수정 (인라인 편집)
✅ 대댓글 삭제 (권한 검증)
✅ 대댓글 좋아요/싫어요
✅ 실시간 유효성 검사 (1-1000자 제한)
✅ 일관된 색상 체계 (cyan=수정, fuchsia=삭제)
✅ 디자인 시스템 일관성

사용자 경험

• 댓글 하단에 대댓글 작성 폼 제공
• 대댓글은 들여쓰기로 시각적 구분
• 수정/삭제 버튼으로 직관적인 조작
• fuchsia 테마로 댓글과 시각적 구분

데이터베이스 구조

Comment {
  id: Int (Primary Key)
  content: String
  parentId: Int? (Self-Relation)
  postId: Int
  authorId: Int
  createdAt: DateTime
  updatedAt: DateTime
}

남은 이슈

⚠️ 캐싱 문제: 댓글/대댓글 작성/수정/삭제 후 페이지 새로고침 필요

• 서버 컴포넌트 특성상 클라이언트 상태 변경이 자동 반영되지 않음
• revalidatePath 방식 시도했으나 효과 없음
• 추가 캐시 무효화 전략 검토 필요

API 엔드포인트

✅ POST /api/comments - 댓글/대댓글 생성
✅ PUT /api/comments/individual/[commentId] - 댓글/대댓글 수정
✅ DELETE /api/comments/individual/[commentId] - 댓글/대댓글 삭제
✅ GET /api/comments/[postId] - 댓글 목록 조회 (대댓글 포함)

Relates to #35