[#81] Feat: 짤 이미지 삭제 api 연결 및 성공/삭제 시 동작 구현 #86

HY219 · 2024-03-03T07:30:32Z

📝 작업 내용

짤 이미지 삭제 api 연결
- /v1/image/${imageId} - DELETE
성공/삭제 시 Toast 띄우기
- toastify 이용
성공 시 모달 닫히는 동작 구현
- ~~Context API 이용~~
- 모달 컨텍스트를 사용하지 않고, onSuccess 콜백 이용

📷 스크린샷 (선택)

💬 리뷰 요구사항(선택)

+추가로 궁금한 사항이 있습니다!

서버에서 imageId를 int값으로 전달 받는데, url일 경우 string으로 지정해줘야하나요?
현재 코드에서는 number로 받고 있는데, string으로 변경해줘야하는지 궁금합니다!
```
export const deleteMyZzal = (imageId: number) => {
  return http.delete<number>({ url: `/v1/image/${imageId}` });
};
```

다음과 같이 에러가 뜨는데, 캐시 무효화 문제인지, 배포 ID 문제인지 해결이 어려워 도움 요청합니다.

📍 기타 (선택)

TODO: 홈 화면 등 페이지 구현 시, 짤 이미지 삭제 성공 시 페이지 ~~새로고침 필요~~ 쿼리 무효화 필요
TODO: 이미지 상세 모달 구현 시, 유저 본인이 업로드한 이미지가 아닐 경우 삭제 버튼 비활성화 구현 필요
TODO: [2024-03-03] 이미지 상세 모달 구현 코드에 따라 변경될 수 있습니다. (이미지 삭제 성공 시, 모달이 닫히는 동작을 구현하기 위해 코드 구현) -> 짤 클릭 시 모달 열고 닫는 코드

close #81

useMutation을 이용 /v1/image/ url로 삭제 요청 TODO: 이미지 상세보기 api 연결 후, 실제 imageId 전달해야합니다. TODO: 삭제 API 요청이 성공하면, 모달을 닫고 페이지를 새로고침해야합니다.

toastify 사용 짤 이미지 삭제 성공 시 모달 자동으로 닫히도록 구현 TODO: 짤 이미지 삭제 성공 시 페이지 새로고침 TODO: 이미지 상세 모달 구현 시, 유저 본인이 업로드한 이미지가 아닐 경우 삭제 버튼 비활성화 구현 필요

vercel · 2024-03-03T07:30:37Z

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 5, 2024 2:59pm

src/components/ImageDetailModal/ImageMenuBar.tsx

Kim-Jaemin420 · 2024-03-03T11:08:09Z

삭제시, 새로고침이 필요한건 아닐거예요! 삭제 성공후 querykey invalidate 시켜주면 아마 원하시는대로 동작하지 않을까 합니다. 한 번 알아보고 적용해주세요!

HY219 · 2024-03-03T17:32:07Z

삭제시, 새로고침이 필요한건 아닐거예요! 삭제 성공후 querykey invalidate 시켜주면 아마 원하시는대로 동작하지 않을까 합니다. 한 번 알아보고 적용해주세요!

감사합니다 😀

혹시 invalidateQueries로 쿼리 무효화하는 거 말씀하시는 건가요?

삭제 성공 후 쿼리를 무효화하는 걸 말씀하시는게 맞다면, 홈, 업로드한 짤, 좋아요한 짤 페이지에 API가 연결되고 쿼리키가 생성된 후에 쿼리 무효화 코드를 추가할 수 있을 것 같아서 TODO로 두었습니다!

위 코드가 구현된 후에 추가할 수 있을 것 같은데 어떻게 생각하시나요?

Kim-Jaemin420 · 2024-03-03T19:17:54Z

@HY219 넵 맞습니다! 새로고침으로 표현해주셔서 잘못 이해하고 계신 줄 알고 팁을 드렸습니다ㅎㅎ 어차피 업로드한 짤과 좋아요한 짤은 페이지 진입시에 재요청하니 굳이 invalidate 해줄 필요는 없을 것 같습니다~

hyeonjinan096 · 2024-03-04T00:18:41Z

src/components/ImageDetailModal/ImageMenuBar.tsx

이미지 상세 모달 UI가 변경되면서 ImageMenuBar가 제거되고 index에 버튼이 다 모인 구조로 변경되었습니다. 위치만 바뀐 거여서 나중에 코드가 옮겨질 수 있을 것 같네요!

오 감사합니다! 그럼 이미지 상세 모달 UI가 머지된 후에 코드 수정 후 머지하는게 좋겠네요:)

HY219 · 2024-03-04T00:42:51Z

@HY219 넵 맞습니다! 새로고침으로 표현해주셔서 잘못 이해하고 계신 줄 알고 팁을 드렸습니다ㅎㅎ 어차피 업로드한 짤과 좋아요한 짤은 페이지 진입시에 재요청하니 굳이 invalidate 해줄 필요는 없을 것 같습니다~

제가 표현을 잘 못 쓴 것 같네요! 🤣

모달이 닫히는 경우에 페이지에 진입하는 걸 알 수 있나요?

같은 url 창에서 모달을 열었다 닫았을 때 진입해 있던 페이지에 영향을 주거나, 재진입했다고 인식하지 못할 것 같은데 어떻게 생각하시나요?

src/components/ImageDetailModal/ImageMenuBar.tsx

TODO: 모달 클릭 시 URL이 변경되도록 구현 후, 이미지 삭제 성공 시 이전 페이지로 이동하는 navigate 추가

#81/feature/delete-my-zzal-api

Kim-Jaemin420 · 2024-03-05T12:05:04Z

src/components/ImageDetailModal/ImageMenuBar.tsx

  const [isLiked, setIsLiked] = useState(false);

  const handleClickLike = () => {
    setIsLiked((prevLiked) => !prevLiked);
  };

+  const { deleteMyZzal } = useDeleteMyZzal();


api 커스텀 훅은 상단에 위치시키면 더 잘 보일 거 같아요!

넵 👍 놓쳤네요 감사합니다!!

yjc2021 · 2024-03-05T12:25:27Z

src/hooks/api/report/useDeleteMyZzal.ts

해당 api 훅은

관리자 페이지에서 신고 사진을 삭제하는 기능인가요

이미지 상세 모달에서 본인 사진을 삭제하는 기능인가요?
만약 2번이라면 디렉토리 구조 수정하셔야 할 것 같습니다!

오 그러네요...ㄷㄷㄷ머지될뻔

yjc2021 · 2024-03-05T12:33:00Z

src/hooks/api/report/useDeleteMyZzal.ts

+  const { mutate, ...rest } = useMutation({
+    mutationFn: deleteMyZzal,
+    onSuccess: () => {
+      toast.success("사진이 삭제되었습니다.");


[내 사진 삭제] 후 masonry layout의 사진들은 업데이트가 되나요?
invalidateQueries나 setQueryData로 캐시 업데이트를 해야 할 것 같은데 어떻게 생각하시나요?
아래 시나리오를 적어봤는데 혹시 아래와 같은 상황이 발생한다면 invalidateQueries로 한번 다시 데이터를 받아오는 게 좋을 것 같습니다
[시나리오]
본인이 올린 사진 A를 홈의 masonry layout에서 클릭해서 이미지 상세 모달로 이동 -> 모달에서 사진 삭제 성공 -> 모달 닫히고, 다시 홈의 masonry layout으로 이동 -> 이때 masonry layout의 사진들은 이미지 삭제하기 전의 캐시라 방금 삭제한 이미지가 보인다

TODO 사항이군요~ 네버마인드 :)
TODO 주석 달아주세요!!

onSuccess와 onError에 관한 코드 ImageMenuBar 파일로 위치 변경해줬습니다! useDeleteMyZzal에서 onSuccess를 중복으로 작성하지 않아도 될 것 같았습니다:)

report -> zzal

yjc2021

LGTM 입니다~ 💯 '

src/components/ImageDetailModal/ImageMenuBar.tsx

Kim-Jaemin420

저도 LGTM 입니닷!

HY219 added 2 commits March 1, 2024 21:38

Feat: 짤 이미지 삭제 api 연결 구현

09345d8

useMutation을 이용 /v1/image/ url로 삭제 요청 TODO: 이미지 상세보기 api 연결 후, 실제 imageId 전달해야합니다. TODO: 삭제 API 요청이 성공하면, 모달을 닫고 페이지를 새로고침해야합니다.

HY219 requested review from Kim-Jaemin420, choi-ik, yjc2021 and hyeonjinan096 as code owners March 3, 2024 07:30

HY219 self-assigned this Mar 3, 2024

HY219 added the ✨ Feature 새로운 기능 추가 label Mar 3, 2024

vercel bot deployed to Preview March 3, 2024 07:46 View deployment

vercel bot deployed to Preview March 3, 2024 08:14 View deployment

HY219 force-pushed the #81/feature/delete-my-zzal-api branch 2 times, most recently from d5bf0a3 to d527ac1 Compare March 3, 2024 08:57

Kim-Jaemin420 reviewed Mar 3, 2024

View reviewed changes

src/components/ImageDetailModal/ImageMenuBar.tsx Outdated Show resolved Hide resolved

Refactor: 모달 컨텍스트를 사용하지 않고, onSuccess 콜백을 이용해 모달 닫기 구현

3f8fdee

vercel bot deployed to Preview March 3, 2024 19:13 View deployment

hyeonjinan096 reviewed Mar 4, 2024

View reviewed changes

Kim-Jaemin420 reviewed Mar 5, 2024

View reviewed changes

src/components/ImageDetailModal/ImageMenuBar.tsx Outdated Show resolved Hide resolved

Modify: 짤 이미지 삭제 성공 시, 모달 닫는 동작 삭제

9566a95

TODO: 모달 클릭 시 URL이 변경되도록 구현 후, 이미지 삭제 성공 시 이전 페이지로 이동하는 navigate 추가

vercel bot had a problem deploying to Preview March 5, 2024 11:30 Failure

Merge branch 'main' of https://github.com/zzalmyu/zzalmyu-frontend into

8c50676

#81/feature/delete-my-zzal-api

vercel bot had a problem deploying to Preview March 5, 2024 11:32 Failure

Fix: ImageMenuBar 컴포넌트에서 사용하지 않는 onClose props 제거

01c213e

vercel bot deployed to Preview March 5, 2024 11:36 View deployment

Kim-Jaemin420 reviewed Mar 5, 2024

View reviewed changes

Refactor: api 커스텀 훅인 useDeleteMyZzal()을 상단으로 위치 이동'

af5366a

vercel bot deployed to Preview March 5, 2024 12:18 View deployment

yjc2021 reviewed Mar 5, 2024

View reviewed changes

HY219 added 2 commits March 5, 2024 21:38

Rename: useDeleteMyZzal api 커스텀 hook을 zzal 폴더로 이동

0f20665

report -> zzal

Refactor: onSuccess, onError 시 toast 출력 코드 ImageMenuBar 파일로 이동

baeda06

vercel bot deployed to Preview March 5, 2024 12:46 View deployment

yjc2021 approved these changes Mar 5, 2024

View reviewed changes

Kim-Jaemin420 reviewed Mar 5, 2024

View reviewed changes

src/components/ImageDetailModal/ImageMenuBar.tsx Outdated Show resolved Hide resolved

Refactor: useDeleteMyZzal() api 훅 코드 작성 위치 변경

c0efb38

vercel bot deployed to Preview March 5, 2024 14:59 View deployment

Kim-Jaemin420 approved these changes Mar 5, 2024

View reviewed changes

HY219 merged commit 661688d into main Mar 5, 2024
3 checks passed

HY219 deleted the #81/feature/delete-my-zzal-api branch March 5, 2024 15:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#81] Feat: 짤 이미지 삭제 api 연결 및 성공/삭제 시 동작 구현 #86

[#81] Feat: 짤 이미지 삭제 api 연결 및 성공/삭제 시 동작 구현 #86

HY219 commented Mar 3, 2024 •

edited

Loading

vercel bot commented Mar 3, 2024 •

edited

Loading

Kim-Jaemin420 commented Mar 3, 2024

HY219 commented Mar 3, 2024

Kim-Jaemin420 commented Mar 3, 2024

hyeonjinan096 Mar 4, 2024

HY219 Mar 4, 2024

HY219 commented Mar 4, 2024

Kim-Jaemin420 Mar 5, 2024

HY219 Mar 5, 2024

yjc2021 Mar 5, 2024

Kim-Jaemin420 Mar 5, 2024

yjc2021 Mar 5, 2024

yjc2021 Mar 5, 2024 •

edited

Loading

HY219 Mar 5, 2024

yjc2021 left a comment

Kim-Jaemin420 left a comment

[#81] Feat: 짤 이미지 삭제 api 연결 및 성공/삭제 시 동작 구현 #86

[#81] Feat: 짤 이미지 삭제 api 연결 및 성공/삭제 시 동작 구현 #86

Conversation

HY219 commented Mar 3, 2024 • edited Loading

📝 작업 내용

📷 스크린샷 (선택)

💬 리뷰 요구사항(선택)

📍 기타 (선택)

vercel bot commented Mar 3, 2024 • edited Loading

Kim-Jaemin420 commented Mar 3, 2024

HY219 commented Mar 3, 2024

Kim-Jaemin420 commented Mar 3, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HY219 commented Mar 4, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yjc2021 Mar 5, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yjc2021 left a comment

Choose a reason for hiding this comment

Kim-Jaemin420 left a comment

Choose a reason for hiding this comment

HY219 commented Mar 3, 2024 •

edited

Loading

vercel bot commented Mar 3, 2024 •

edited

Loading

yjc2021 Mar 5, 2024 •

edited

Loading