Merge pull request #131 from EFUB4-Jukebox/dev

Hotfix : 마이페이지 핀 페이지 기능 추가
EFUB4-Jukebox · Sep 18, 2024 · 8aa5287 · 8aa5287
2 parents b4c8855 + 0dc3faf
commit 8aa5287
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 16 deletions.
diff --git a/src/components/MyPage/PinFeed.jsx b/src/components/MyPage/PinFeed.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import pinIconSpark from "../../assets/images/MyPage/spark-51.svg";
 import calendarIcon from "../../assets/images/MyPage/calendar.svg";
@@ -11,13 +11,64 @@ import { useQuery } from "@tanstack/react-query";
 const PinFeed = ({ myPinFeedData, onSelectedLocation = () => {} }) => {
   const [totalPinNum, setTotalPinNum] = useState();
   const [pinFeedList, setPinFeedList] = useState([]);
-  const [feedElementTitle, setFeedElementTitle] = useState();
-  const [feedElementArtist, setFeedElementArtist] = useState();
-  const [feedElementImgPath, setFeedElementImgPath] = useState();
-  const [listenedDate, setListenedDate] = useState();
-  const [placeName, setPlaceName] = useState();
-
+  const [currentPage, setCurrentPage] = useState(1);
+  const [hasMore, setHasMore] = useState(false);
   const navigate = useNavigate();
+  const loaderRef = useRef(null);
+
+  useEffect(() => {
+    if (myPinFeedData) {
+      console.log(myPinFeedData);
+      setTotalPinNum(myPinFeedData.totalElements);
+      setPinFeedList(myPinFeedData.pinFeedList);
+      setHasMore(myPinFeedData.pinFeedList.length === 20);
+    }
+  }, []);
+
+  const loadMoreResults = async () => {
+    console.log(pinFeedList.length);
+    console.log(hasMore);
+    if (!hasMore) return;
+
+    try {
+      console.log(currentPage);
+      const data = await getMyPinFeed(currentPage);
+      console.log("fetched Data:", data);
+      setPinFeedList(prev => [...prev, ...data.pinFeedList]);
+      setCurrentPage(prev => prev + 1);
+      setHasMore(data.pinFeedList.length === 20);
+    } catch (error) {
+      console.error("핀피드 조회 에러: ", error);
+    }
+  };
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      entries => {
+        console.log(entries);
+
+        if (entries[0].isIntersecting) {
+          console.log("로딩");
+          loadMoreResults(); // 스크롤 끝까지 내릴 때 추가 데이터 요청
+        }
+      },
+      {
+        root: null, // 기본값 viewport
+        rootMargin: " 0px 0px 100px 0px",
+        threshold: 0, // 0%에서 호출
+      },
+    );
+
+    if (loaderRef.current) {
+      observer.observe(loaderRef.current);
+    }
+    return () => {
+      if (loaderRef.current) {
+        observer.unobserve(loaderRef.current);
+      }
+    };
+  }, [currentPage, hasMore]);
+
   const goCalendar = () => {
     navigate("/calendar");
   };
@@ -38,7 +89,7 @@ const PinFeed = ({ myPinFeedData, onSelectedLocation = () => {} }) => {
       setTotalPinNum(myPinFeedData.totalElements);
       setPinFeedList(myPinFeedData.pinFeedList);
     }
-  }, [myPinFeedData]);
+  }, []);
 
   return (
     <PinFeedContainer>
@@ -80,6 +131,7 @@ const PinFeed = ({ myPinFeedData, onSelectedLocation = () => {} }) => {
           )}
         </>
       )}
+      <div ref={loaderRef} style={{ height: "15px" }}></div>
     </PinFeedContainer>
   );
 };

diff --git a/src/pages/MyPage/MyPage.jsx b/src/pages/MyPage/MyPage.jsx
@@ -60,8 +60,8 @@ const MyPage = ({ onSelectedLocation = () => {} }) => {
     refetch: refetchPinFeed,
     isFetching: isPinFeedFetching,
   } = useQuery({
-    queryKey: ["getMyPinFeed"],
-    queryFn: getMyPinFeed,
+    queryKey: ["getMyPinFeed", 0], // 두 번째 요소로 page 값을 포함
+    queryFn: ({ queryKey }) => getMyPinFeed(queryKey[1]), // queryKey에서 page 값을 추출하여 전달
   });
 
   const {
@@ -118,6 +118,7 @@ const MyPage = ({ onSelectedLocation = () => {} }) => {
   // }, []);
 
   useEffect(() => {
+    console.log(myPinFeedData);
     if (clickedPage === "playlist") {
       refetchPlaylist();
     } else if (clickedPage === "pinfeed") {

diff --git a/src/pages/MyPage/MyPinSearchPage.jsx b/src/pages/MyPage/MyPinSearchPage.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import { useNavigate } from "react-router-dom";
 import SideSection from "../../components/common/SideSection";
@@ -13,6 +13,10 @@ const MyPinSearchPage = ({ onSelectedLocation = () => {} }) => {
   const [showSideBar, setShowSideBar] = useState(true);
   const [pinList, setPinList] = useState();
   const [init, setInit] = useState(true);
+  const [page, setPage] = useState(0);
+  const [hasMore, setHasMore] = useState(false);
+  const loaderRef = useRef(null);
+
   // const [searchTriggered, setSearchTriggered] = useState(false);
 
   const navigate = useNavigate();
@@ -45,11 +49,57 @@ const MyPinSearchPage = ({ onSelectedLocation = () => {} }) => {
     console.log(inputValue);
     const encodedKeyword = encodeURIComponent(inputValue);
     console.log(encodedKeyword);
-    const res = await searchPin({ keyword: encodedKeyword });
+    const res = await searchPin({ keyword: encodedKeyword, page: page });
     console.log(res);
+    setPage(prev => prev + 1);
+    setHasMore(res.myPinList.length === 20);
     setPinList(res.myPinList);
   };
 
+  const loadMoreResults = async () => {
+    console.log(hasMore);
+    if (!hasMore) return;
+
+    try {
+      console.log("page:", page);
+      const encodedKeyword = encodeURIComponent(inputValue);
+      const data = await searchPin({ keyword: encodedKeyword, page: page });
+      console.log("fetched Data:", data);
+      setPinList(prev => [...prev, ...data.myPinList]);
+      setPage(prev => prev + 1);
+      setHasMore(data.myPinList.length === 20);
+    } catch (error) {
+      console.error("핀피드 조회 에러: ", error);
+    }
+  };
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      entries => {
+        console.log(entries);
+
+        if (entries[0].isIntersecting) {
+          console.log("로딩");
+          loadMoreResults(); // 스크롤 끝까지 내릴 때 추가 데이터 요청
+        }
+      },
+      {
+        root: null, // 기본값 viewport
+        rootMargin: " 0px 0px 100px 0px",
+        threshold: 0, // 0%에서 호출
+      },
+    );
+
+    if (loaderRef.current) {
+      observer.observe(loaderRef.current);
+    }
+    return () => {
+      if (loaderRef.current) {
+        observer.unobserve(loaderRef.current);
+      }
+    };
+  }, [page, hasMore]);
+
   return (
     <SideSection showSideBar={showSideBar}>
       <BackIcon src={backIcon} onClick={goMyPage} />
@@ -79,6 +129,7 @@ const MyPinSearchPage = ({ onSelectedLocation = () => {} }) => {
             <EmptyMessage>{init ? "" : "검색 결과가 없습니다."}</EmptyMessage>
           </Empty>
         )}
+        <div ref={loaderRef} style={{ height: "15px" }}></div>
       </Content>
     </SideSection>
   );

diff --git a/src/services/api/myPage.js b/src/services/api/myPage.js
@@ -19,9 +19,9 @@ export const getMyProfile = async () => {
   }
 };
 
-export const getMyPinFeed = async () => {
+export const getMyPinFeed = async page => {
   try {
-    const data = await get(`/me/feed`);
+    const data = await get(`me/feed?page=${page}&size=20`);
     return data;
   } catch (error) {
     throw new Error("데이터 불러오기에 실패하였습니다.");
@@ -124,10 +124,10 @@ export const deleteBookmarkOne = async playlistId => {
   }
 };
 
-export const searchPin = async ({ keyword }) => {
+export const searchPin = async ({ keyword, page }) => {
   try {
     console.log(keyword);
-    const data = await get(`/me/pins?keyword=${keyword}`);
+    const data = await get(`/me/pins?keyword=${keyword}&page=${page}&size=20`);
     return data;
   } catch (error) {
     throw new Error("데이터 불러오기에 실패하였습니다.");