[Feat] 마이페이지 구매후기, 상품 상세 리뷰 모달, 이미지 리스트, 공유 버튼 구현 #158

ggjiny · 2024-07-12T16:11:13Z

🚀 작업 내용

마이페이지 구매 후기 (수정, 삭제 버튼 외 완료)
상품 상세 이미지 리스트 구현
페이지네이션 연결
이미지 누르면 나오는 모달 구현
공유 버튼 구현

📝 참고 사항

리뷰 모달과 좋아요 옵티미스틱 업데이트 하다가 정신이 나가버릴거 같아서 보류했습니다..
- 혹시 조언해주실 분 계시면 다 직접 설명해드릴 수 있으니,, 환영합니다 !!

🖼️ 스크린샷

🚨 관련 이슈 (이슈 번호)

[Feat] 마이페이지 구매후기 #142

✅ 체크리스트

Code Review 요청
Label 설정
PR 제목 규칙에 맞는지 확인

ggjiny · 2024-07-12T16:12:03Z

src/api/orderAPI.ts

-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${token}`,
+    const res = await fetch(
+      `${BASE_URL}/api/v1/order?page=0&size=10&startDate=2024-07-01T00:00:00&endDate=2024-07-30T23:59:59`,


이거 안넣으면 오류나서 넣었는데 필요없다면 지우겠습니다!

나중에 제가 수정할게요~

ggjiny · 2024-07-12T16:15:05Z

src/components/Buttons/ReviewLikeButton/ReviewLikeButton.tsx

+  useEffect(() => {
+    setIsChecked(isLiked);
+    setNewLikeCount(likeCount);
+  }, [isLiked, likeCount]);
+


이걸 안넣으면 모달에서 오른쪽, 왼쪽으로 넘겼을 때 업데이트가 안되던데,,, 왤까요..?

오호,, 나중에 머지 되고 함 봐볼게욧

사용처에서 key = id로 넣으면 해결 가능할 것 같아요!

//ReviewItem.tsx <ReviewLikeButton id={id} key={id} isLiked={likedByUser} likeCount={likeCount} />

bokeeeey

전체적으로 data라는 네이밍으로 사용하셨는데 어떤 데이터인지 더 명확하게 표현해주시면 좋을거같아요

bokeeeey · 2024-07-13T09:57:12Z

src/api/orderAPI.ts

-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${token}`,
+    const res = await fetch(
+      `${BASE_URL}/api/v1/order?page=0&size=10&startDate=2024-07-01T00:00:00&endDate=2024-07-30T23:59:59`,


나중에 제가 수정할게요~

bokeeeey · 2024-07-13T09:58:15Z

src/api/productReviewAPI.ts

+  const {
+    sort = 'createdAt',
+    page = '0',
+    size = '10',
+    startDate = '2024-01-01T00:00:00',
+    endDate = '2024-12-31T23:59:59',
+  } = params;


endDate는 현재시간 받아와서 사용하셔도 좋을거같아요~

bokeeeey · 2024-07-13T10:00:58Z

src/app/my-info/(account)/reviews/_components/MyReviewList.tsx

+    startDate: '2024-01-01T00:00:00',
+    endDate: '2024-12-31T23:59:59',
+  });


endDate는 현재시간을 받아와서 사용하셔도 좋을거같습니다~

bokeeeey · 2024-07-13T10:03:19Z

src/app/my-info/(account)/reviews/_components/MyReviewProduct.tsx

+
+  if (!productDetailData) return null;
+


null만 보여주는게 UX 차원에서 맞는걸까요?

bokeeeey · 2024-07-13T10:03:55Z

src/app/my-info/(account)/reviews/_components/MyReviewProduct.tsx

+
+  if (!productDetailData) return null;
+
+  const { name, thubmnailList, categoryName } = productDetailData;


Suggested change

const { name, thubmnailList, categoryName } = productDetailData;

const { name, thubmnailList, categoryName } = productDetailData ?? {};

이런식으로 empty case로 보여주는게 나을거같아요

bokeeeey · 2024-07-13T10:06:08Z

src/app/my-info/(account)/reviews/page.tsx

+    size: searchParams.size || '16',
+  };
+
+  const data = await getUserProductReviews(initialParams);


개인적으로 data라는 네이밍이 조금 애매한거같아요

페이지에서 prefetch 하고계신건가요? 캐싱으로 prefetch 하시는게 더 나을거같아요

bokeeeey · 2024-07-13T10:07:40Z

src/app/shop/[category]/[productId]/_components/TabContents/DetailTab.tsx

@@ -19,7 +19,7 @@ interface TabData {
 interface DetailTabProps {
  detailsImg: string;
  reviewData: ProductReviewType;
-  productId: string;
+  productId: number;


productId.toString() 메서드로 받으시는경우 있는거같은데

Suggested change

productId: number;

productId: number | string;

그냥 함수에서 둘다받아도 상관없을거같아요

bokeeeey · 2024-07-13T10:13:40Z

src/app/shop/[category]/[productId]/_components/TabContents/Review/ReviewImageModal.tsx

+  const { data } = useQuery<ProductReviewType>({
+    queryKey: ['review', productId, currentReviewId],
+    queryFn: () => getProductReviews({ productId }),
+  });
+


Suggested change

const { data } = useQuery<ProductReviewType>({

queryKey: ['review', productId, currentReviewId],

queryFn: () => getProductReviews({ productId }),

});

const { data: 이건 어떤 데이터인가요? } = useQuery<ProductReviewType>({

queryKey: ['review', productId, currentReviewId],

queryFn: () => getProductReviews({ productId }),

});

bokeeeey · 2024-07-13T10:15:14Z

src/components/Buttons/ShareButton/ShareBox.tsx

 import { useOutsideClick } from '@/hooks/useOutsideClick';
 import { KakaoIcon, LinkCopyIcon } from '@/public/index';
+import { ProductType } from '@/types/ProductTypes';


Suggested change

import { ProductType } from '@/types/ProductTypes';

import type { ProductType } from '@/types/ProductTypes';

bokeeeey · 2024-07-13T10:16:24Z

src/components/Buttons/ShareButton/ShareButton.tsx

@@ -1,14 +1,19 @@
 'use client';

 import { ShareIcon } from '@/public/index';
+import { ProductType } from '@/types/ProductTypes';


Suggested change

import { ProductType } from '@/types/ProductTypes';

import type { ProductType } from '@/types/ProductTypes';

minjeong9919

고생하셨습니닷 👍

minjeong9919 · 2024-07-15T02:26:11Z

src/app/my-info/(account)/reviews/_components/MyReviewProduct.tsx

+
+export default function MyReviewProduct({ productId, updatedAt, switchOption }: MyReviewProductProps) {
+  const { data: productDetailData } = useQuery<ProductType>({
+    queryKey: ['product-detail', productId],


이거 저 모든 키를 camel 로 작성하긴 했는데 통일시키지 않아도 상관없겟져?!!

다른 getProductDetail 불러오는 함수 query키 일치시키는 게 좋을 것 같아요.
OptionEditModal 컴포넌트의 경우 아래처럼 사용하고 있어요

queryKey: [`product-${productId}`], queryFn: () => getProductDetail(String(productId)),

두 방식 중에 하나로 하는 게 좋을 것 같습니다~

minjeong9919 · 2024-07-15T02:29:07Z

src/app/shop/[category]/[productId]/_components/TabContents/Review/ProductReviewList.tsx

 }

 export default function ProductReviewList({ data, productId }: ProductReviewListProps) {
  const { reviewDtoList, ...previewData } = data;
-  const allReviewImgs = reviewDtoList.flatMap((review) => review.reviewImgs);
+  const allReviewImgs = reviewDtoList.flatMap((review) =>


flatMap이라닛 첨 보는 신기한 친구군뇨

minjeong9919 · 2024-07-15T02:32:23Z

src/app/shop/[category]/[productId]/_components/TabContents/Review/ReviewImageList.tsx

+              disabled: isNextDisabled,
+            })}
+          >
+            {'>'}


Icon안에 추가적으로 text 넣으신 이유가 무엇인가용?

예리하시네유... ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ div로 했다가 바꿔서 남아있나봐용,,

minjeong9919 · 2024-07-15T02:36:44Z

src/components/Buttons/ReviewLikeButton/ReviewLikeButton.tsx

+  useEffect(() => {
+    setIsChecked(isLiked);
+    setNewLikeCount(likeCount);
+  }, [isLiked, likeCount]);
+


오호,, 나중에 머지 되고 함 봐볼게욧

minjeong9919 · 2024-07-15T02:38:28Z

src/components/Buttons/ShareButton/ShareBox.tsx

  const boxRef = useRef<HTMLDivElement>(null);

+  const shareUrl = window.location.href;
+
  useOutsideClick(boxRef, () => {
    handleClick();


prop으로 받으시는거면 OnClickClose,,? 같은 동작의 의미가 담겨져있는 네이밍ㅇ은 호옥시 어떠신지,,

armd482

수고하셨습니다~ 낙관적 업데이트는 잘 안되는 부분 알려주시면 아는데까진 도움을 줄 수 있습니다...(사실 저도 잘 모름/)

armd482 · 2024-07-14T14:07:35Z

src/app/shop/[category]/[productId]/_components/TabContents/Review/ReviewImageList.tsx

+  const [currentSectionIndex, setCurrentSectionIndex] = useState(0);
+
+  const isPrevDisabled = currentSectionIndex === 0;
+  const isNextDisabled = currentSectionIndex === Math.floor(reviewImgs.length / SECTION_SIZE) - 1;


1 안 빼도 될 것 같아요. reviewImgs가 빈 배열일 때 -1이라서 제대로 표시가 안되고 있어요!

Suggested change

const isNextDisabled = currentSectionIndex === Math.floor(reviewImgs.length / SECTION_SIZE) - 1;

const isNextDisabled = currentSectionIndex === Math.floor(reviewImgs.length / SECTION_SIZE);

armd482 · 2024-07-14T14:11:48Z

src/app/shop/[category]/[productId]/_components/TabContents/Review/ReviewImageList.tsx

+  const handleMovePrevSection = () => {
+    if (currentSectionIndex > 0) setCurrentSectionIndex((prev) => prev - 1);
+  };
+  const handleMoveNextSection = () => {
+    if (currentSectionIndex < Math.floor(reviewImgs.length / SECTION_SIZE)) setCurrentSectionIndex((prev) => prev + 1);


isPrevDisabled하고 isNextDisabled를 등호가 아닌 부등호로 하면 다음과 같이 적용할 수 있을 것 같아요!

Suggested change

const handleMovePrevSection = () => {

if (currentSectionIndex > 0) setCurrentSectionIndex((prev) => prev - 1);

};

const handleMoveNextSection = () => {

if (currentSectionIndex < Math.floor(reviewImgs.length / SECTION_SIZE)) setCurrentSectionIndex((prev) => prev + 1);

//const isPrevDisabled = currentSectionIndex <= 0;

//const isNextDisabled = currentSectionIndex >= Math.floor(reviewImgs.length / SECTION_SIZE) ;

const handleMovePrevSection = () => {

if (!isPrevDisabled) {

setCurrentSectionIndex((prev) => prev - 1);

}

};

const handleMoveNextSection = () => {

if (!isNextDisabled) {

setCurrentSectionIndex((prev) => prev + 1);

}

armd482 · 2024-07-15T03:58:29Z

src/components/Buttons/ReviewLikeButton/ReviewLikeButton.tsx

+  useEffect(() => {
+    setIsChecked(isLiked);
+    setNewLikeCount(likeCount);
+  }, [isLiked, likeCount]);
+


사용처에서 key = id로 넣으면 해결 가능할 것 같아요!

//ReviewItem.tsx <ReviewLikeButton id={id} key={id} isLiked={likedByUser} likeCount={likeCount} />

Young2un

고민인 부분이 어딜까용?? ㅠㅠ 고생하셨어용 ㅠㅠ
공식문서 당연히 보셨겠지만,, 일단 첨부

Young2un · 2024-07-16T01:47:06Z

src/hooks/useKakaoShare.ts

+declare global {
+  interface Window {
+    Kakao: Kakao;
+  }
+}


오홍 신기해요 카카오에서 쓰란 방식이겠죠?

Young2un · 2024-07-16T02:21:28Z

src/types/ProductReviewTypes.ts

+export interface ReviewSearchParams {
+  totalElements: number;
+  totalPages: number;
+  first: boolean;
+  last: boolean;
+  currentPage: number;
+}


페이지네이션 타입으로 함써보까나요?

Young2un · 2024-07-16T02:22:12Z

src/types/ProductReviewTypes.ts

+  totalElements: number;
+  totalPages: number;
+  first: boolean;
+  last: boolean;
+  currentPage: number;


위에랑 겹치는고 같아용!

ggjiny added 14 commits July 7, 2024 18:45

Feat: 카카오 공유, 링크 복사 구현

0d19fe1

Fix: Hero 이미지 blur 제거

8f2802e

Fix: 에러 방지를 위한 다른 코드 수정

a7faac2

Feat: 마이페이지 리뷰 구현

56a5370

Merge: branch 'develop' into 142-feat-마이페이지-구매후기

588813f

Fix: 로그인 모달에 이벤트 전파 막음

567cb9c

Fix: 응답 data 달라짐에 따른 수정

f419a1b

Feat: 리뷰 사진 모달 구현

d95b197

Fix: 카카오 문구 수정

63aa30e

Feat: 리뷰들에 pagination 연결

f6ff78d

Fix: 모달에서 좋아요 반영안되는 부분 해결

c515a40

Refactor: 리뷰 모달 열릴 때 데이터 다시 가져오는걸로 수정

af4cb4d

Merge: branch 'develop' into 142-feat-마이페이지-구매후기

e0e79c6

Fix: product id 타입 수정

dc79daa

ggjiny added 📖 Page 페이지 제작 📬 API 서버 api 통신 ✨ Component 기능 개발 labels Jul 12, 2024

ggjiny requested review from armd482, minjeong9919, Young2un and bokeeeey July 12, 2024 16:11

ggjiny self-assigned this Jul 12, 2024

ggjiny linked an issue Jul 12, 2024 that may be closed by this pull request

[Feat] 마이페이지 구매후기 #142

Open

Style: 불필요한 주석 제거

df394b6

ggjiny commented Jul 12, 2024

View reviewed changes

bokeeeey approved these changes Jul 13, 2024

View reviewed changes

minjeong9919 approved these changes Jul 15, 2024

View reviewed changes

armd482 approved these changes Jul 15, 2024

View reviewed changes

Young2un approved these changes Jul 16, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat] 마이페이지 구매후기, 상품 상세 리뷰 모달, 이미지 리스트, 공유 버튼 구현 #158

[Feat] 마이페이지 구매후기, 상품 상세 리뷰 모달, 이미지 리스트, 공유 버튼 구현 #158

ggjiny commented Jul 12, 2024 •

edited

Loading

ggjiny Jul 12, 2024

bokeeeey Jul 13, 2024

ggjiny Jul 12, 2024

minjeong9919 Jul 15, 2024

armd482 Jul 15, 2024 •

edited

Loading

bokeeeey left a comment

bokeeeey Jul 13, 2024

bokeeeey Jul 13, 2024

bokeeeey Jul 13, 2024

bokeeeey Jul 13, 2024

bokeeeey Jul 13, 2024

bokeeeey Jul 13, 2024

bokeeeey Jul 13, 2024

bokeeeey Jul 13, 2024

bokeeeey Jul 13, 2024

bokeeeey Jul 13, 2024

bokeeeey Jul 13, 2024

minjeong9919 left a comment

minjeong9919 Jul 15, 2024

armd482 Jul 15, 2024 •

edited

Loading

minjeong9919 Jul 15, 2024

minjeong9919 Jul 15, 2024

ggjiny Jul 15, 2024

minjeong9919 Jul 15, 2024

minjeong9919 Jul 15, 2024

armd482 left a comment •

edited

Loading

armd482 Jul 14, 2024

armd482 Jul 14, 2024

armd482 Jul 15, 2024 •

edited

Loading

Young2un left a comment

Young2un Jul 16, 2024

Young2un Jul 16, 2024

Young2un Jul 16, 2024


		if (!productDetailData) return null;

		const { name, thubmnailList, categoryName } = productDetailData;

	import { ProductType } from '@/types/ProductTypes';
	import type { ProductType } from '@/types/ProductTypes';

	const isNextDisabled = currentSectionIndex === Math.floor(reviewImgs.length / SECTION_SIZE) - 1;
	const isNextDisabled = currentSectionIndex === Math.floor(reviewImgs.length / SECTION_SIZE);

[Feat] 마이페이지 구매후기, 상품 상세 리뷰 모달, 이미지 리스트, 공유 버튼 구현 #158

Are you sure you want to change the base?

[Feat] 마이페이지 구매후기, 상품 상세 리뷰 모달, 이미지 리스트, 공유 버튼 구현 #158

Conversation

ggjiny commented Jul 12, 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

armd482 Jul 15, 2024 • edited Loading

Choose a reason for hiding this comment

bokeeeey left a 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

minjeong9919 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

armd482 Jul 15, 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

armd482 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

armd482 Jul 15, 2024 • edited Loading

Choose a reason for hiding this comment

Young2un left a 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

ggjiny commented Jul 12, 2024 •

edited

Loading

armd482 Jul 15, 2024 •

edited

Loading

armd482 Jul 15, 2024 •

edited

Loading

armd482 left a comment •

edited

Loading

armd482 Jul 15, 2024 •

edited

Loading