[#69] Feat: 짤 상세 모달 get api 구현 및 적용 #108

hyeonjinan096 · 2024-03-06T13:52:09Z

📝 작업 내용

짤 상세 데이터 get api 훅 구현
짤 상세 모달에 데이터 적용
copyZzal, downloadZzal 유틸 함수 ZzalUtils에 통합
짤 다운로드 시에 로딩 스피너를 추가했습니다.
추후 전송버튼에도 활용할 수 있을 것 같습니다.

close #69

#69/feature/image-detail-modal-api

vercel · 2024-03-06T13:52:15Z

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 10, 2024 1:58pm

choi-ik

구현부 부분이 아직 채워져있지 않고 단순 코드 이동이라 리뷰 할게 많지 않네요 ㅎㅎ 딱 하나 리뷰 남겨두었습니다!!

choi-ik · 2024-03-06T14:24:34Z

src/components/ImageDetailModal/index.tsx

-  const [isLiked, setIsLiked] = useState(imageLikeYn);
+  const { zzalDetails, isPending } = useGetZzalDetails(IMAGEID);
+
+  if (isPending || !zzalDetails) return <>로딩중...</>;


<Fragment> <Fragment /> 로 변경해주시면 좋을듯요 !

src/hooks/api/zzal/useGetZzalDetails.ts

HY219

현진님 고생 많으셨습니다 👍
변수명,함수명 위주로 살펴봐봤습니다!

HY219 · 2024-03-07T00:57:32Z

src/components/ImageDetailModal/index.tsx

@@ -83,13 +65,13 @@ const ImageDetailModal = ({ isOpen, onClose }: Props) => {
              Icon={FolderDown}
              iconLabel="다운로드"
              children="다운로드"
-              onClick={handleDownloadZzal}
+              onClick={handleDownloadButton}


handleDownloadButton도 다른 핸들러 함수 이름과 동일하게 handleClickDownloadButton으로 변경하는 것은 어떤가요?

HY219 · 2024-03-07T08:43:46Z

src/components/ImageDetailModal/index.tsx

-  {
-    /*TODO: [2024.03.05] 해당 handler함수 로직 추가하기*/
-  }
+  const handleClickCopyButton = debounce(() => {


현진님 궁금증 하나 남겨봅니다 😀

debounce를 써서 더블클릭 등을 했을 때 여러 번 이벤트가 발생하는 것을 방지해줄 수 있군요! 배워갑니다 👍

상세 페이지에 있는 신고, 삭제 버튼에도 debounce를 걸어주는게 좋을까요? 아니면 불필요할까요?
삭제 시에도 debounce를 걸어주는 것이 좋다는 글을 하나 봐서 여쭤봅니다!

저는 신고하기는 모달이 바로 나와서 괜찮을 것 같은데 삭제시에는 debounce를 걸어주시면 좋을 것 같습니당👍

메인에서 pull해서 삭제 함수에 debounce 적용했습니다~!

@HY219 삭제 시에 debounce를 걸어주는게 왜 좋은지 여쭤봐도 될까요?

얼핏 봤던 글이였는데 제가 잘못 알았던 것 같습니다.
찾아보니까 아래와 같은 글도 있네요!

현진님 수정해주셨는데 번거롭게 해드렸네요ㅜ!
아직 언제 debounce를 사용해주는지 파악이 안된 것 같아요

https://thewavelet.tistory.com/65

아 그러면 삭제시 디바운스를 제거하고 요청 중에 click하지 못하도록 변경하면 될까요?

오 그렇게 해주실 수 있으면 저는 좋은 방법이라고 생각합니다! 😀

#69/feature/image-detail-modal-api

src/components/ImageDetailModal/ButtonWithIcon.tsx

src/components/ImageDetailModal/index.tsx

Kim-Jaemin420 · 2024-03-07T16:26:04Z

src/components/ImageDetailModal/index.tsx

-  {
-    /*TODO: [2024.03.05] 해당 handler함수 로직 추가하기*/
-  }
+  const handleClickCopyButton = debounce(() => {


@HY219 삭제 시에 debounce를 걸어주는게 왜 좋은지 여쭤봐도 될까요?

Kim-Jaemin420 · 2024-03-07T16:27:56Z

src/components/ImageDetailModal/index.tsx

+  return (
+    <Suspense fallback={"...pending"}>
+      <Modal isOpen={isOpen} onClose={onClose} size="sm">
+        <ImageDetailModalContent />


컴포넌트를 쪼개 주신 이유가 있으신가요?

useSuspenseQuery를 사용하기 위해 컴포넌트 상위에서 Suspense로 감싸줘야했습니다.
따라서 ImageDetailModalContent를 따로 분리했습니다.

suspense 때문에 불필요한 컴포넌트 분리가 생겼는데, 이 부분이 좀 걸리네요ㅠ 저도 한 번 고민해보겠습니다

이미지 상세 모달의 스켈레톤이나 로딩 화면을 보여줄건지, 보여준다면 어떻게 보여줄건지가 중요해질 거 같은데 현진님 생각하신 방향 혹시 있으신가요?

처음엔 짤이 있는 페이지에서 로딩 화면 보여주다가 데이터가 다 오면 모달을 띄어주는 걸 생각했습니다.
지금 생각해 보니 스켈레톤을 넣는 것도 좋을 것 같네요!
스켈레톤을 넣는다면 상단 메뉴에 #버튼을 제외한 4개의 버튼에 각각 표현하고 아래 이미지 렌더링 되는 부분은 다 스켈레톤 처리하는 건 어떨까요? 이렇게 되면 useQuery로 구현해도 되는 걸까요?

따로 페이지가 아닌 모달이라 조금 까다롭긴 하네요ㅠ스켈레톤 구현할때 다시 논의해보면 좋을 것 같습니다!

yjc2021 · 2024-03-10T06:57:16Z

src/utils/zzalUtils.ts

+    canvas.width = image.naturalWidth;
+    canvas.height = image.naturalHeight;
+
+    const ctx = canvas.getContext("2d");


축약어 금지 컨벤션이 있어서 네이밍 바꿔야 할 것 같아요ㅠ
canvasContext나 imageContext는 어떤가요? 🤔

canvasContext로 변경하겠습니다!

Kim-Jaemin420

LGTM!

yjc2021 · 2024-03-10T07:07:15Z

src/components/common/Spinner.tsx

@@ -0,0 +1,9 @@
+const Spinner = () => {


spinner의 사이즈를 조절할 수 있게 daisyUI에서 제공하는 spinner 컴포넌트 사이즈 토큰을 props로 전달받으면 어떨까요?
또 확장성을 위해 className도 props로 받고 div에 주입하는 건 어떨까요?

관련해서 재민님과 논의해봤는데 현재로는 스피너가 사용되는부분이 짤 상세모달 버튼밖에 없어서
우선 패스하고 추후에 필요할시 변경하기로 했습니다:0

#69/feature/image-detail-modal-api

yjc2021

LGTM 🦖

hyeonjinan096 added 5 commits March 6, 2024 14:58

Feat: 짤 상세 get api함수와 커스텀 훅 구현

620260a

Feat: 짤 상세 모달에 서버 데이터 적용

4e53bb2

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

b221816

#69/feature/image-detail-modal-api

Rename: copyZzal 함수, downloadZzal 함수 zzalUtils에 통합

939e17a

Feat: 짤 상세 모달에 짤 copy, download 기능 추가

742c6d7

hyeonjinan096 added the ✨ Feature 새로운 기능 추가 label Mar 6, 2024

hyeonjinan096 self-assigned this Mar 6, 2024

hyeonjinan096 requested review from Kim-Jaemin420, choi-ik, yjc2021 and HY219 as code owners March 6, 2024 13:52

choi-ik reviewed Mar 6, 2024

View reviewed changes

yjc2021 reviewed Mar 6, 2024

View reviewed changes

src/hooks/api/zzal/useGetZzalDetails.ts Outdated Show resolved Hide resolved

hyeonjinan096 added 2 commits March 7, 2024 01:22

Rename: 서버 tag 데이터 타입 변경에 따른 수정

f7b6642

Refactor: <>구문을 <Fragment>로 번경

dd6523b

vercel bot deployed to Preview March 6, 2024 17:38 View deployment

HY219 reviewed Mar 7, 2024

View reviewed changes

Rename: handleClickDeleteButton 핸들러 함수명 수정

eb4ebda

vercel bot deployed to Preview March 7, 2024 02:27 View deployment

Refactor: useGetZzalDetails의 useQuery를 useSuspenseQuery로 변경

2d79037

vercel bot deployed to Preview March 7, 2024 03:33 View deployment

Feat: 짤 다운로드시 Loading spinner 기능 구현

32d0438

vercel bot deployed to Preview March 7, 2024 06:22 View deployment

HY219 reviewed Mar 7, 2024

View reviewed changes

hyeonjinan096 added 3 commits March 7, 2024 19:04

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

4bdf28b

#69/feature/image-detail-modal-api

Style: ImageDetailModal 사이즈 수정

fa3cee9

Feat: ImageDetailModal내부 짤 삭제 함수에 debounce 적용

0d634bc

vercel bot deployed to Preview March 7, 2024 10:25 View deployment

Kim-Jaemin420 reviewed Mar 7, 2024

View reviewed changes

hyeonjinan096 added 2 commits March 8, 2024 14:05

Feat: 짤 삭제 동작 debounce 제거 및 isLoading, isDisabled 설정 추가

e18c380

Refactor: 짤 상세 모달 컴포넌트 리팩토링

c5432b7

vercel bot deployed to Preview March 8, 2024 05:42 View deployment

Feat: Spinner 공통 컴포넌트화

e45ae3e

vercel bot deployed to Preview March 8, 2024 10:32 View deployment

yjc2021 reviewed Mar 10, 2024

View reviewed changes

Kim-Jaemin420 approved these changes Mar 10, 2024

View reviewed changes

yjc2021 reviewed Mar 10, 2024

View reviewed changes

hyeonjinan096 added 2 commits March 10, 2024 22:47

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

eace9bf

#69/feature/image-detail-modal-api

Cleanup: 변경된 유틸함수 경로 적용 및 copyZzal 파일 삭제

2a64ba5

vercel bot deployed to Preview March 10, 2024 13:54 View deployment

Refactor: ctx -> canvasContext 축약어 제거

cfdba17

vercel bot deployed to Preview March 10, 2024 13:58 View deployment

yjc2021 approved these changes Mar 10, 2024

View reviewed changes

hyeonjinan096 merged commit 2d1ba1b into main Mar 11, 2024
3 checks passed

hyeonjinan096 deleted the #69/feature/image-detail-modal-api branch March 11, 2024 00:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#69] Feat: 짤 상세 모달 get api 구현 및 적용 #108

[#69] Feat: 짤 상세 모달 get api 구현 및 적용 #108

hyeonjinan096 commented Mar 6, 2024 •

edited

Loading

vercel bot commented Mar 6, 2024 •

edited

Loading

choi-ik left a comment

choi-ik Mar 6, 2024

HY219 left a comment

HY219 Mar 7, 2024

HY219 Mar 7, 2024 •

edited

Loading

hyeonjinan096 Mar 7, 2024

hyeonjinan096 Mar 7, 2024 •

edited

Loading

Kim-Jaemin420 Mar 7, 2024

HY219 Mar 8, 2024

hyeonjinan096 Mar 8, 2024

HY219 Mar 8, 2024

Kim-Jaemin420 Mar 7, 2024

Kim-Jaemin420 Mar 7, 2024

hyeonjinan096 Mar 8, 2024

Kim-Jaemin420 Mar 8, 2024

Kim-Jaemin420 Mar 8, 2024

hyeonjinan096 Mar 8, 2024

Kim-Jaemin420 Mar 10, 2024

yjc2021 Mar 10, 2024

hyeonjinan096 Mar 10, 2024

Kim-Jaemin420 left a comment

yjc2021 Mar 10, 2024

hyeonjinan096 Mar 10, 2024

yjc2021 left a comment

[#69] Feat: 짤 상세 모달 get api 구현 및 적용 #108

[#69] Feat: 짤 상세 모달 get api 구현 및 적용 #108

Conversation

hyeonjinan096 commented Mar 6, 2024 • edited Loading

📝 작업 내용

vercel bot commented Mar 6, 2024 • edited Loading

choi-ik left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HY219 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HY219 Mar 7, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hyeonjinan096 Mar 7, 2024 • edited Loading

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

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

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

Kim-Jaemin420 left a comment

Choose a reason for hiding this comment

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

hyeonjinan096 commented Mar 6, 2024 •

edited

Loading

vercel bot commented Mar 6, 2024 •

edited

Loading

HY219 Mar 7, 2024 •

edited

Loading

hyeonjinan096 Mar 7, 2024 •

edited

Loading