[#74] Feat: 짤 이미지 신고 api 연결 구현

[HY219]

📝 작업 내용

• 이미지 상세 모달에서 신고하기 이미지 버튼 클릭 시 신고하기 POST API를 요청합니다.
• /v1/report/{$imageId} 로 POST 요청

+handleClickReportButton 이름이 한 파일에서 중복으로 쓰여 문제가 발생해, 신고 상세 모달에서의 핸들러 함수 이름은 handleClickReportCompleteButton으로 수정해주었습니다

+코드를 작성한 ImageMenuBar.tsx 파일이 다른 파일과 통합되면서 main에서 사용되지 않아, 추후 통합이 필요합니다.

📷 스크린샷 (선택)

💬 리뷰 요구사항(선택)

• ./src/components/ImageDetailModal/ImageMenuBar.tsx 파일의 13번째 줄과
  ./src/apis/zzal.ts 파일의 4번째 줄의
  변수명이 postReportZzal 으로 같아 그대로 두어도 상관없는지 변경하면 좋을지 궁금합니다!

  • 변경해야한다면, 코드의 통일성을 위해서 변수명을 어떻게 작성할지 정하면 좋을 것 같습니다!

  ./src/components/ImageDetailModal/ImageMenuBar.tsx
  

  ./src/apis/zzal.ts
  

• 신고하기 POST API를 호출하는 함수와 타입 정의를 zzal.ts, zzal.dto.ts 파일에 작성해주었는데, report.ts, report.dto.ts 파일에 작성하는 것이 더 좋을지 궁금합니다!

  • 짤 상세 모달 메뉴에 위치해 있는 좋아요, 다운로드등의 기능들이 zzal.ts 에 포함이 될 것이라 생각해 zzal.ts에 코드를 작성했습니다.
  • 또 현재 .src/types/report.ts 파일에 정의 해둔 인터페이스명과 헷갈릴 여지가 있어보여 zzal.ts에 코드를 작성했습니다.

• 변수명, 함수명, 폴더명이 가독성있게 작성되었는지 궁금합니다!

📍 기타 (선택)

• 이미지 상세보기 api 연결 후, 실제 imageId 추가 필요

  • TODO: [2024-02-28] 이미지 상세보기 api 연결 후, 실제 imageId를 가져와야합니다.

• 이미지 상세 모달에서 신고하기 이미지 버튼 클릭 시 신고 확인 모달 을 먼저 출력해야하는데, 새로 이슈 생성해서 구현하도록 하겠습니다:)

• 추가로, 이미 이미지를 한 번 신고한 유저가 같은 이미지를 재신고하는 동작은 허용되지 않도록 서버에서 작업해주신 것 같아요.
  

  => 신고했던 이미지를 재신고하는 동작을 했을 때, '이미 신고한 이미지입니다.'라는 toast 메시지 또는 모달을 띄우면 좋을 것 같아요!

  정하면 좋을 것 같습니다:)

• 코드 동작을 브라우저에서 확인하려면, ./src/routes/_layout-with-chat/index.tsx 파일에 ImageDetailModal 컴포넌트를 import 하고, 4번째 줄에 다음 코드를 추가해 주세요:)

  return ( <><ImageDetailModal isOpen={true} onClose={() => {}} /></> );

close #74

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
zzalmyu-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 6, 2024 1:57am

[Kim-Jaemin420]

고생하셨습니다!

[yjc2021]

수고하셨습니다 LGTM 👍

[choi-ik]

LGTM!!!🚀🚀🚀🚀🚀🚀🚀🚀🚀 x 5조 5억

[hyeonjinan096]

수고하셨습니다👍👍👍