[Feat/#60] 게시물 삭제 모달 구현

[minjeoong]

🔥 Related Issues

• close [ Feat ] 삭제하기 버튼 컴포넌트 #60

✅ 작업 리스트

• 게시물 삭제 모달 구현
• 추후 스프린트를 위한 수정하기 추가에 대한 구현

🔧 작업 내용

게시물 삭제 모달 구현했습니다.
해당 모달은 게시물을 삭제하거나, 댓글을 삭제하는 용도로 쓰일 예정입니다.
interaction 정의된 게 없어서, 디자이너께 button 클릭 시 디자인을 요청 드렸습니다.
만들어주신 해당 디자인에 대해 :active css 주었습니다.
... 버튼의 위치가 변경되어도 그 것에 맞게 따라다니도록 구현하였습니다! (영상 확인)

📣 리뷰어에게 어떠신가요?

[ 해당 컴포넌트가 쓰이는 곳, 수정해야하는 곳 ]

1. 댓글 컴포넌트
2. 대댓글 컴포넌트
3. 헤더 컴포넌트

에 해당 컴포넌트로 변경 필요할 수 있을 것 같습니다.
그리고 유저가 쓴 게시물인 경우에만 해당 버튼이 보여야 하기 때문에,
헤더에서도 props 수정이 불가피해보입니다.
댓글 컴포넌트도 마찬가지로 불가피해보입니다.
-> 추후 디테일 페이지 구현하면서 해당 내용 추가로 수정해두겠습니다!

[ 컴포넌트 @params ]

다음과 같이 아이콘 사이즈 변경 가능합니다.
현재는 2.4rem, 2.0rem 두 가지 설정해두었습니다.

export const moreIcon = recipe({
  base: {
    width: "2.4rem",
    height: "2.4rem",
  },
  variants: {
    iconSize: {
      "24": {
        width: "2.4rem",
        height: "2.4rem",
      },
      "20": {
        width: "2.0rem",
        height: "2.0rem",
      },
    },
  },
});

[ 해당 컴포넌트 사용 방법 ]

이렇게 useMoreModal 훅을 만들었습니다.
위치는 @shared/hook/useMoreModal 입니다.
위치나 다양한 피드백 환영합니다.

[수정하기 기능 ]
추후 스프린트를 위해 수정하기 기능을 추가 했습니다.
onEdit 함수가 들어가면, 수정하기가 있다고 인식하도록 구현했습니다.
근데 코드를 작성하면 작성할 수록 이게 맞나 싶은 생각이 들었어요..
다들 한번씩 봐주시고 말씀 주시면 감사할 것 같습니다.

📸 스크린샷 / GIF / Link

2025-01-16.06.44.27.mov