Feat: apply infinite scroll connect myspacemyreview #169

package.json

@@ -30,6 +30,7 @@
     "react-helmet-async": "^2.0.4",
     "react-hook-form": "^7.49.2",
     "react-icons": "^4.12.0",
+    "react-intersection-observer": "^9.5.3",
     "react-kakao-maps-sdk": "^1.1.24",
     "react-mobile-datepicker": "^4.0.2",
     "react-router-dom": "^6.21.1",

src/api/review.ts

@@ -0,0 +1,20 @@
+import axios from 'axios';
+
+export const reviewRequest = {
+  getMyReview: async ({pageParam}: {pageParam: number}) => {
+    try {
+      const res = await axios.get('/api/members/my-reviews', {
+        params: {
+          size: 5,
+          page: pageParam,
+        },
+        withCredentials: true,
+      });
+      console.log(res);
+
+      return res.data;
+    } catch (error) {
+      console.log(error);
+    }
+  },
+};

src/api/spaces.ts

@@ -13,6 +13,21 @@ export const spacesRequest = {
     }
   },
 
+  getOutdated: async ({pageParam}: {pageParam: number}) => {
+    try {
+      const res = await axios.get('/api/members/my-spaces/outdated', {
+        params: {
+          size: 5,
+          page: pageParam,
+        },
+        withCredentials: true,
+      });
+      return res.data;
+    } catch (error) {
+      console.log(error);
+    }
+  },
+
   post: async () => {
     try {
       const res = await axios.post('/api/spaces', {withCredentials: true});

src/components/Auth/Input/Input.module.scss

@@ -1,4 +1,4 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 .email,
 .sertCode,
@@ -124,6 +124,7 @@
     height: 7.2rem;
     padding: 8px;
     border-radius: 50%;
+    border: 1px solid $neutral200;
 
     &__camera {
       background-color: $neutral100;

src/components/MySpaceBody/MySpaceBody.tsx

@@ -1,134 +1,18 @@
-import { useEffect, useState } from "react";
+import {useState} from 'react';
 
-import styles from "./MySpaceBody.module.scss";
+import styles from './MySpaceBody.module.scss';
 
-import MySpaceList from "./MySpaceList/MySpaceList";
-import Tab from "./Tab/Tab";
-
-import { MySpaces } from "@/types/user";
-
-const upcomming = [
-  {
-    id: 12312,
-    title: "강릉, 속초, 전주, 여수 여행",
-    startDate: "2024-01-12",
-    endDate: "2024-01-14",
-    dueDate: 0,
-    thumbnail:
-      "https://media.istockphoto.com/id/1356118511/photo/smart-city-and-abstract-dot-point-connect-with-gradient-line.jpg?s=612x612&w=0&k=20&c=GJldTyxDEt0GodKxGONHz9PrN9QcQQAGKONUM0vBvYc=",
-  },
-  {
-    id: 12321,
-    title: "강릉, 속초, 전주, 여수 여행",
-    startDate: "2024-01-18",
-    endDate: "2024-01-22",
-    dueDate: 4,
-    thumbnail:
-      "https://media.istockphoto.com/id/1356118511/photo/smart-city-and-abstract-dot-point-connect-with-gradient-line.jpg?s=612x612&w=0&k=20&c=GJldTyxDEt0GodKxGONHz9PrN9QcQQAGKONUM0vBvYc=",
-  },
-  {
-    id: 12334,
-    title: "강릉, 속초, 전주, 여수 여행",
-    startDate: "2024-01-18",
-    endDate: "2024-01-22",
-    dueDate: 15,
-    thumbnail:
-      "https://media.istockphoto.com/id/1356118511/photo/smart-city-and-abstract-dot-point-connect-with-gradient-line.jpg?s=612x612&w=0&k=20&c=GJldTyxDEt0GodKxGONHz9PrN9QcQQAGKONUM0vBvYc=",
-  },
-  {
-    id: 12343,
-    title: "강릉, 속초, 전주, 여수 여행",
-    startDate: "2024-01-18",
-    endDate: "2024-01-22",
-    dueDate: 15,
-    thumbnail:
-      "https://media.istockphoto.com/id/1356118511/photo/smart-city-and-abstract-dot-point-connect-with-gradient-line.jpg?s=612x612&w=0&k=20&c=GJldTyxDEt0GodKxGONHz9PrN9QcQQAGKONUM0vBvYc=",
-  },
-  {
-    id: 12352,
-    title: "강릉, 속초, 전주, 여수 여행",
-    startDate: "2024-01-18",
-    endDate: "2024-01-22",
-    dueDate: 15,
-    thumbnail:
-      "https://media.istockphoto.com/id/1356118511/photo/smart-city-and-abstract-dot-point-connect-with-gradient-line.jpg?s=612x612&w=0&k=20&c=GJldTyxDEt0GodKxGONHz9PrN9QcQQAGKONUM0vBvYc=",
-  },
-  {
-    id: 12315,
-    title: "강릉, 속초, 전주, 여수 여행",
-    startDate: "2024-01-18",
-    endDate: "2024-01-22",
-    dueDate: 15,
-    thumbnail:
-      "https://media.istockphoto.com/id/1356118511/photo/smart-city-and-abstract-dot-point-connect-with-gradient-line.jpg?s=612x612&w=0&k=20&c=GJldTyxDEt0GodKxGONHz9PrN9QcQQAGKONUM0vBvYc=",
-  },
-  {
-    id: 123253,
-    title: "강릉, 속초, 전주, 여수 여행",
-    startDate: "2024-01-18",
-    endDate: "2024-01-22",
-    dueDate: 15,
-    thumbnail:
-      "https://media.istockphoto.com/id/1356118511/photo/smart-city-and-abstract-dot-point-connect-with-gradient-line.jpg?s=612x612&w=0&k=20&c=GJldTyxDEt0GodKxGONHz9PrN9QcQQAGKONUM0vBvYc=",
-  },
-  {
-    id: 1231617,
-    title: "강릉, 속초, 전주, 여수 여행",
-    startDate: "2025-01-18",
-    endDate: "2025-01-22",
-    dueDate: 418,
-    thumbnail:
-      "https://media.istockphoto.com/id/1356118511/photo/smart-city-and-abstract-dot-point-connect-with-gradient-line.jpg?s=612x612&w=0&k=20&c=GJldTyxDEt0GodKxGONHz9PrN9QcQQAGKONUM0vBvYc=",
-  },
-];
-
-const outdated = [
-  {
-    id: 812367,
-    title: "강릉, 속초, 전주, 여수 여행",
-    startDate: "2023-12-17",
-    endDate: "2023-12-21",
-    dueDate: 0,
-    thumbnail:
-      "https://media.istockphoto.com/id/1356118511/photo/smart-city-and-abstract-dot-point-connect-with-gradient-line.jpg?s=612x612&w=0&k=20&c=GJldTyxDEt0GodKxGONHz9PrN9QcQQAGKONUM0vBvYc=",
-  },
-  {
-    id: 867123,
-    title: "캐리비안베이, 로만바스 온천, 라마드 호텔, 에버랜드",
-    startDate: "2023-04-17",
-    endDate: "2023-04-20",
-    dueDate: 0,
-    thumbnail:
-      "https://media.istockphoto.com/id/1356118511/photo/smart-city-and-abstract-dot-point-connect-with-gradient-line.jpg?s=612x612&w=0&k=20&c=GJldTyxDEt0GodKxGONHz9PrN9QcQQAGKONUM0vBvYc=",
-  },
-  {
-    id: 67123,
-    title: "강릉, 속초, 전주, 여수 여행",
-    startDate: "2022-12-29",
-    endDate: "2022-12-30",
-    dueDate: 0,
-    thumbnail:
-      "https://media.istockphoto.com/id/1356118511/photo/smart-city-and-abstract-dot-point-connect-with-gradient-line.jpg?s=612x612&w=0&k=20&c=GJldTyxDEt0GodKxGONHz9PrN9QcQQAGKONUM0vBvYc=",
-  },
-];
+import MySpaceList from './MySpaceList/MySpaceList';
+import Tab from './Tab/Tab';
 
 function MySpaceBody() {
-  const [tab, setTab] = useState("upcomming");
-  const [data, setData] = useState<MySpaces | null>(null);
-
-  useEffect(() => {
-    // const res = await() api호출부
-    // const spaces = res.data.data;
-    // tmp mock data
-    const spaces = tab === "upcomming" ? upcomming : outdated;
-    setData(spaces);
-  });
+  const [tab, setTab] = useState<string>('upcoming');
 
   return (
     <section className={styles.container}>
       <Tab tab={tab} setTab={setTab} />
 
-      <MySpaceList data={data} tab={tab} />
+      <MySpaceList tab={tab} />
     </section>
   );
 }

src/components/MySpaceBody/MySpaceList/MySpaceList.module.scss

@@ -1,4 +1,4 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 .container {
   display: flex;
@@ -24,17 +24,22 @@
     width: 6.6rem;
     background-position: center;
     background-size: cover;
+    background-repeat: no-repeat;
     background-blend-mode: darken;
     border-radius: 16px 0px 0px 16px;
 
+    &.default {
+      background-size: 70% 70%;
+    }
+
     & > span {
       z-index: 100;
       @include typography(button);
       color: $neutral0;
     }
 
     &::after {
-      content: "";
+      content: '';
       position: absolute;
       width: 100%;
       height: 100%;

src/components/MySpaceBody/MySpaceList/MySpaceList.tsx

@@ -1,43 +1,73 @@
-import styles from "./MySpaceList.module.scss";
+import styles from './MySpaceList.module.scss';
 
-import { setSpaceDate } from "@/utils/formatDate";
+import {useGetSpaces, useGetSpacesOut} from '@/hooks/Spaces/useSpaces';
+import {useInfiniteScroll} from '@/hooks/useInfiniteScroll';
 
-import { MySpaceListProps } from "@/types/user";
+import ObserveTarget from '@/components/Route/ObserveTarget/ObserveTarget';
+
+import defaultCity from '@/assets/icons/city_default.svg';
+import {setSpaceDate} from '@/utils/formatDate';
+
+import {Spaces} from '@/types/sidebar';
+import {MySpaceListProps} from '@/types/user';
+
+function MySpaceList({tab}: MySpaceListProps) {
+  const {data: upcomingData} = useGetSpaces(true);
+  const [outdatedData, hasNextData, inViewRef] = useInfiniteScroll(useGetSpacesOut);
 
-function MySpaceList({ data, tab }: MySpaceListProps) {
   return (
     <ul className={styles.container}>
-      {data?.map(({ id, title, startDate, endDate, dueDate, thumbnail }) => (
-        <li
-          key={id}
-          onClick={() => {
-            // navigate(`/trip/${id}`)
-          }}
-        >
-          <div
-            className={styles.img}
-            style={{
-              backgroundImage: `url(${thumbnail})`,
+      {tab === 'upcoming' &&
+        upcomingData?.data.spaces.map(({id, title, startDate, endDate, dueDate, thumbnail}: Spaces) => (
+          <li
+            key={id}
+            onClick={() => {
+              // navigate(`/trip/${id}`)
             }}
           >
-            <span>
-              {dueDate === 0
-                ? tab === "upcomming"
-                  ? "여행중"
-                  : ""
-                : `D-${dueDate}`}
-            </span>
-          </div>
-
-          <div className={styles.content}>
-            <div className={styles.content__title}>{title}</div>
-
-            <div className={styles.content__date}>
-              {setSpaceDate(startDate, endDate)}
+            <div
+              className={`${styles.img} ${thumbnail ? styles.city : styles.default}`}
+              style={{
+                backgroundImage: `url(${thumbnail ? thumbnail : defaultCity})`,
+              }}
+            >
+              <span>{dueDate <= 0 ? '여행중' : `D-${dueDate}`}</span>
+            </div>
+
+            <div className={styles.content}>
+              <div className={styles.content__title}>{title}</div>
+
+              <div className={styles.content__date}>{setSpaceDate(startDate, endDate)}</div>
             </div>
-          </div>
-        </li>
-      ))}
+          </li>
+        ))}
+
+      {tab === 'outdated' &&
+        outdatedData?.pages.map((page) =>
+          page.data.spaces.map(({id, title, startDate, endDate, thumbnail}: Spaces) => (
+            <li
+              key={id}
+              onClick={() => {
+                // navigate(`/trip/${id}`)
+              }}
+            >
+              <div
+                className={`${styles.img} ${thumbnail ? styles.city : styles.default}`}
+                style={{
+                  backgroundImage: `url(${thumbnail ? thumbnail : defaultCity})`,
+                }}
+              ></div>
+
+              <div className={styles.content}>
+                <div className={styles.content__title}>{title}</div>
+
+                <div className={styles.content__date}>{setSpaceDate(startDate, endDate)}</div>
+              </div>
+            </li>
+          )),
+        )}
+
+      {tab === 'outdated' && hasNextData && <ObserveTarget inViewRef={inViewRef} />}
     </ul>
   );
 }