[UI] 상세페이지 댓글창 컴포넌트 구현

[HiJuwon]

체크리스트

• 🧰 npm run dev로 실행 환경에서 잘 돌아가는걸 확인했나요?
• 🎋 base 브랜치를 develop 브랜치로 설정했나요?
• 🖌️ PR 제목은 형식에 맞게 잘 작성했나요?
• 🏷️ 라벨은 등록했나요?
• 🙆 리뷰어는 등록했나요?

---

📌 관련 이슈번호

• Closed [UI] 상세페이지 댓글창 컴포넌트 구현 #84

---

✅ Key Changes

상세페이지에서 작성 완료 시 나타나는 하단 댓글창 컴포넌트를 구현했습니다.

구현 컴포넌트 경로: src/components/DetailView/Comment

컴포넌트 구성:

• 전체 댓글 영역 컴포넌트 CommentSection.tsx : 전체 댓글 섹션에 대한 컴포넌트입니다.
• 개별 댓글 아이템 컴포넌트 CommentItem.tsx : 댓글 입력시 댓글 목록에 렌더링되는 개별 댓글 아이템입니다.
• 댓글 입력창 컴포넌트 CommentInput.tsx : 댓글 작성하는 textarea와 댓글 입력 버튼을 포함한 입력창 컴포넌트입니다.
• 댓글 입력 버튼 CommentCompletionButton.tsx

주요 로직:

• 상세페이지에서 제목 및 상세 설명을 추가하고, 페이지 우측 하단의 '작성 완료' 버튼을 클릭하면 댓글창이 나타납니다.
  • '수정하기' 버튼을 눌러 다시 수정 모드로 들어가면 댓글창을 볼 수 없습니다, 댓글창은 작성 완료 시에만 볼 수 있습니다.
• textarea에 댓글을 작성하고 댓글 입력 버튼을 누르면 댓글 목록에 개별 댓글 아이템이 나타납니다.
• 댓글은 최소 1자 이상 작성해야 댓글을 입력할 수 있게 했습니다.

---

📸 스크린샷 or 실행영상

2025-07-28.10.31.38.mov

---

💬 To Reviewers

상세페이지 타이틀 문구가 파묻히는 문제

• 서버에서 실행해보시면, 상세페이지 제목 입력하여 작성 완료 버튼을 눌렀을 때 댓글창은 제대로 나타나지만, 상세페이지 제목이 파묻히게 되는 현상이 있을 겁니다. 해당 부분은 댓글 컴포넌트를 구현하면서 함께 수정하려 했으나 아직 문제의 원인을 제대로 파악하지 못해서, 일단 고치지 못했습니다 🥲
• 금주에 리팩토링하면서 해당 오류를 수정하겠습니다.

댓글 목록 위에 오버레이되는 흰색 그라데이션

• 피그마 화면설계상에서 댓글이 많아져 댓글 목록을 스크롤하여 보게되면 목록 위에 흰색 그라데이션이 깔리는 스타일링이 되어있습니다.
• 해당 부분에 대한 상세한 기능 명세가 빠진 부분이 있어, 일단 이 부분은 디자이너분께 질문 남겨두었고 답변 오면 리팩토링할 때 추가 구현하겠습니다.

[github-actions]

✅ PREVIEW https://veco-79bxw98m7-gaeulzzangs-projects.vercel.app

[waldls]

확인했습니다! 주석 꼼꼼하게 달아주셔서 좋아요 👍🏻 추후 API 연동 후에, 적어주신 내용대로 리팩토링 진행해주시면 될 것 같습니다~!!

[sunhwaaRj]

댓글 최대 글자수는 없는지 궁금합니다!!

[HiJuwon]

화면설계서 상에는 댓글 최대 글자 제한은 없었는데, 한번 여쭤보겠습니다~~!

[HiJuwon]

댓글 최대 글자수는 없는 것으로 정해졌습니다