✨ feat: 게시글 상세 댓글ui추가

[jungmyunggi]

🔨 테스크

• close [FE] 특정 블로그 글 클릭 시 상세 페이지/모달이 나오도록 수정 #347

게시글 상세에 댓글 ui추가

• detail 폴더 안에 전부 몰아넣어놨습니다.
• 나중에 FSD로 변경할 때 이 컴포넌트만 따로 ui폴더로 넣으면 될거같아요

댓글 수정

{modifyId !== comment.id ? (
                    <p className="mt-1 text-gray-800">{comment.content}</p>
                  ) : (
                    <div className="">
                      <textarea className="w-[100%] mt-2 flex-1 bg-transparent p-2 rounded-md h-20 outline-none ring-2 ring-gray-300 border-transparent resize-none">
                        {comment.content}
                      </textarea>
                      <div className="flex justify-end gap-3 text-sm">
                        <button onClick={() => handleModify(null)} className="hover:bg-gray-200 py-2 px-4 rounded-lg">
                          취소
                        </button>
                        <button className="bg-primary hover:bg-primary/80 py-2 px-4 text-white  rounded-lg">
                          댓글 수정
                        </button>
                      </div>
                    </div>
                  )}

• useState를 통해 수정하는 댓글을 저장하고 해당 댓글일 경우 textarea로 변경되게 했습니다.

댓글 삭제

function DeleteButton({ id, handleOpen }: { id: number; handleOpen: () => void }) {
  return (
    <div className="w-[100%] h-[100%] absolute top-0 left-0 z-[1000] bg-white/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
      <div className="flex flex-col fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full max-w-xs md:max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg">
        <header className="flex flex-col space-y-2 text-center sm:text-left">
          <span className="text-lg font-semibold">댓글 삭제</span>
        </header>
        <section>
          <p className="text-sm text-muted-foreground text-center md:text-start">댓글을 정말로 삭제하시겠습니까?</p>
        </section>
        <footer className="flex flex-row justify-end space-x-2">
          <button onClick={handleOpen} className="py-2 px-4 rounded-sm hover:bg-gray-100">
            취소
          </button>
          <button className="bg-primary py-2 px-4 text-white rounded-sm hover:bg-primary/90">확인</button>
          {id}
        </footer>
      </div>
    </div>
  );

• 기존의 shadcn의 모달은 화면 전체에 overlay를 걸어서 클릭시 모달 자체가 꺼지는 현상이 발생해서 따로 모달 컴포넌트를 만들었습니다.
• 상세 모달 or 페이지에만 overlay가 나오도록 수정했고 overlay클릭시 모달이 꺼지는건 넣지 않았습니다.

📋 작업 내용

• 댓글 UI구현
• 댓글 수정/삭제 추가
• 댓글 더보기 추가

📷 스크린 샷

[junyeokk]

수고하셨습니다!

[junyeokk]

P5) 클래스가 엄청 길군요.. 이걸 조금 완화할 수 있는 방법이 있을지 찾아보면 좋을 것 같아요 !

[junyeokk]

P4) 지금 컴포넌트가 댓글 작성도 하고, 리스트도 가져오고, 수정도 해서 한 컴포넌트 안에 역할이 많이 있는 것 같아요. 그래서 작성 영역(CommentInput)과 댓글 항목(CommentItem)을 분리하면 각 컴포넌트가 하나의 책임만 가지게 되어 응집도가 높아질 것 같습니다.

특히 댓글 항목은 단순한 UI 반복이 아니라 수정 여부에 따른 조건부 렌더링과 상태 변경 로직을 포함하고 있어서 분리하면 가독성도 좋아지고 유지보수하기 더 쉬울 것 같아요.

[junyeokk]

P5) 파일명과 함수명이 달라요 !

[junyeokk]

P5) 혹시 실제로 배포된 페이지에서 댓글이 사용될 때도 dummy data가 쓰이는걸까요?