@@ -1,58 +1,52 @@
-import reviewImage from '@/assets/reviewImg.png';
 import ReviewCard from '@/components/myReview/ReviewCard';
-import { Review } from '@/types/reviewType';
-// import ReviewWriteModal from '@/components/myReview/ReviewWriteModal';
-
-const data: { reviews: Review[] } = {
-  reviews: [
-    {
-      reviewId: 1,
-      title: '대한 고궁 투어',
-      content:
-        '경복궁은 한국의 역사와 전통을 온전히 느낄 수 있는 곳이었어요. 정문인 광화문을 지나 들어서면 웅장한 근정전과 경회루가 시선을 사로잡고, 조용한 연못과 정원은 마치 옛 시대로 돌아간 듯한 기분을 주었답니다. 주변의 한복 대여점에서 한복을 입고 방문하니 더욱 특별한 추억으로 남았어요. 고즈넉한 분위기 속에서 시간을 보내며 한국의 멋과 아름다움을 새삼 느낄 수 있었던 시간이었어요.',
-      imgSrc: reviewImage,
-      createdAt: new Date('2024-10-25'),
-      reviewCount: 10,
-      rating: 4.5,
-    },
-    {
-      reviewId: 2,
-      title: '대한 고궁 투어',
-      content:
-        '경복궁은 한국의 역사와 전통을 온전히 느낄 수 있는 곳이었어요. 정문인 광화문을 지나 들어서면 웅장한 근정전과 경회루가 시선을 사로잡고, 조용한 연못과 정원은 마치 옛 시대로 돌아간 듯한 기분을 주었답니다. 주변의 한복 대여점에서 한복을 입고 방문하니 더욱 특별한 추억으로 남았어요. 고즈넉한 분위기 속에서 시간을 보내며 한국의 멋과 아름다움을 새삼 느낄 수 있었던 시간이었어요.',
-      imgSrc: reviewImage,
-      createdAt: new Date('2024-10-25'),
-      reviewCount: 10,
-      rating: 5.0,
-    },
-    {
-      reviewId: 3,
-      title: '대한 고궁 투어',
-      content:
-        '경복궁은 한국의 역사와 전통을 온전히 느낄 수 있는 곳이었어요. 정문인 광화문을 지나 들어서면 웅장한 근정전과 경회루가 시선을 사로잡고, 조용한 연못과 정원은 마치 옛 시대로 돌아간 듯한 기분을 주었답니다. 주변의 한복 대여점에서 한복을 입고 방문하니 더욱 특별한 추억으로 남았어요. 고즈넉한 분위기 속에서 시간을 보내며 한국의 멋과 아름다움을 새삼 느낄 수 있었던 시간이었어요.',
-      imgSrc: reviewImage,
-      createdAt: new Date('2024-10-25'),
-      reviewCount: 10,
-      rating: 4.7,
-    },
-  ],
-};
+import { REVIEW_LIST } from '@/constants/queryKey';
+import useGetReviews from '@/hooks/query/useGetReviews';
+import useUserStore from '@/stores/useUserStore';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback, useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
 
 const MyReviews = () => {
+  const user = useUserStore((state) => state.user);
+
+  const { data, fetchNextPage, isFetchingNextPage, hasNextPage } = useGetReviews({
+    userId: user?.userId ?? '',
+  });
+
+  const queryClient = useQueryClient();
+
+  const { ref } = useInView({
+    threshold: 1,
+    skip: !hasNextPage,
+    onChange: useCallback(
+      (inView: boolean) => {
+        if (inView && hasNextPage && !isFetchingNextPage) {
+          fetchNextPage();
+        }
+      },
+      [hasNextPage, isFetchingNextPage, fetchNextPage],
+    ),
+  });
+
+  const reviews = data?.pages.flatMap((group) => group.data.data.reviews) || [];
+
+  useEffect(() => {
+    queryClient.resetQueries({ queryKey: [REVIEW_LIST, user?.userId] });
+  }, [user?.userId, queryClient]);
+
   return (
     <div>
-      <div>
-        {data.reviews.map((review: Review) => (
-          <ReviewCard
-            key={review.reviewId}
-            review={review}
-            showTitle={true}
-            showUser={false}
-            showDate={true}
-            showDelete={true}
-          />
-        ))}
-      </div>
+      {reviews.map((review) => (
+        <ReviewCard
+          key={review.reviewId}
+          review={review}
+          showTitle={true}
+          showUser={false}
+          showDate={true}
+          showDelete={true}
+        />
+      ))}
+      {hasNextPage && <div ref={ref}>{isFetchingNextPage ? 'Loading more...' : ''}</div>}
     </div>
   );
 };

리뷰: _:hammer_and_wrench: Refactor suggestion_

**사용자 ID 타입 캐스팅 개선 필요**

사용자 ID를 문자열로 강제 캐스팅하는 부분이 있습니다. 타입 안전성을 높이기 위해 개선이 필요합니다.


다음과 같이 수정을 제안합니다:

```diff
-    userId: (user?.userId as string) || '',
+    userId: user?.userId ?? '',
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
  const user = useUserStore((state) => state.user);

  const { data, fetchNextPage, isFetchingNextPage, hasNextPage } = useGetReviews({
    userId: user?.userId ?? '',
  });
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->