#109 feat: 추천 친구 api 연결

AJD-Archive · Nov 13, 2024 · ea591c0 · ea591c0
1 parent a7c9a21
commit ea591c0
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 22 deletions.
diff --git a/src/api/ConnectionApi.tsx b/src/api/ConnectionApi.tsx
@@ -7,13 +7,7 @@ export const getFollowersList = async (
   size: number
 ): Promise<FollowersListData | null> => {
   try {
-    const response = await axiosInstance.get(`/member/follow?page=${page}&size=${size}`, {
-      params: {
-        page: page,
-        size: size,
-      },
-    });
-    console.log('내 친구 목록', response.data);
+    const response = await axiosInstance.get(`/member/follow?page=${page}&size=${size}`);
     return response.data.data;
   } catch (error) {
     console.error('Error fetching data:', error);
@@ -31,10 +25,29 @@ export const getSearchFriendsList = async (
     const response = await axiosInstance.get(
       `/member/follow/search/all?keyword=${keyword}&page=${page}&size=${size}`
     );
-    console.log('검색 친구 목록', response.data);
 
     return {
-      followInfoResDto: response.data.data.memberInfoForFollowResDtos, // 원하는 필드 이름으로 매핑
+      followInfoResDto: response.data.data.memberInfoForFollowResDtos,
+      pageInfoResDto: response.data.data.pageInfoResDto,
+    };
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return null;
+  }
+};
+
+// * 추천 친구 get
+export const getRecommendedFriendsList = async (
+  page: number,
+  size: number
+): Promise<FollowersListData | null> => {
+  try {
+    const response = await axiosInstance.get(
+      `/member/follow/recommended?page=${page}&size=${size}`
+    );
+
+    return {
+      followInfoResDto: response.data.data.recommendedFollowInfoResDtos,
       pageInfoResDto: response.data.data.pageInfoResDto,
     };
   } catch (error) {

diff --git a/src/hooks/useFollowersList.ts b/src/hooks/useFollowersList.ts
@@ -1,6 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import { FollowersListData } from '../types/ConnectionType';
-import { getFollowersList, getSearchFriendsList } from '../api/ConnectionApi';
+import {
+  getFollowersList,
+  getRecommendedFriendsList,
+  getSearchFriendsList,
+} from '../api/ConnectionApi';
 
 export const useFollowersList = (page: number, size: number) => {
   return useQuery<FollowersListData | null>({
@@ -17,3 +21,11 @@ export const useSearchFriendsList = (keyword: string, page: number, size: number
     staleTime: 1000 * 60 * 5,
   });
 };
+
+export const useRecommendFriendsList = (page: number, size: number) => {
+  return useQuery<FollowersListData | null>({
+    queryKey: ['followersList', page, size],
+    queryFn: () => getRecommendedFriendsList(page, size),
+    staleTime: 1000 * 60 * 5,
+  });
+};
diff --git a/src/pages/ConnectionsPage/ConnectionsPage.tsx b/src/pages/ConnectionsPage/ConnectionsPage.tsx
@@ -6,15 +6,15 @@ import leftarrow from '../../img/leftarrow.png';
 import Connection from '../../components/Connection/Connection';
 import Pagination from '../../components/CustomPagination';
 import { useNavigate } from 'react-router-dom';
-import { useFollowersList } from '../../hooks/useFollowersList';
+import { useFollowersList, useRecommendFriendsList } from '../../hooks/useFollowersList';
 import { useState } from 'react';
 
 const ConnectionsPage = () => {
   const navigate = useNavigate();
   const [currentPage, setCurrentPage] = useState<number>(0);
 
   const { data: followersList } = useFollowersList(currentPage, 8);
-  console.log(followersList);
+  const { data: recommendList } = useRecommendFriendsList(currentPage, 10);
 
   // * 페이지네이션 페이지 변경 감지 함수
   const handleChangePage = (event: React.ChangeEvent<unknown>, value: number) => {
@@ -41,18 +41,20 @@ const ConnectionsPage = () => {
             </Flex>
           </S.HeaderLayout>
 
+          <S.SectionTitleWrapper>
+            {followersList?.followInfoResDto.length == 0 ? <p>추천 친구</p> : <p>내 친구 목록</p>}
+          </S.SectionTitleWrapper>
+
           <S.ConnectionsWrapper>
-            {followersList?.followInfoResDto.map((follower, index) => (
-              <Connection key={index} follower={follower} />
-            ))}
+            {followersList?.followInfoResDto.length === 0
+              ? recommendList?.followInfoResDto.map((follower, index) => (
+                  <Connection key={index} follower={follower} />
+                ))
+              : followersList?.followInfoResDto.map((follower, index) => (
+                  <Connection key={index} follower={follower} />
+                ))}
           </S.ConnectionsWrapper>
 
-          {followersList?.followInfoResDto.length == 0 && (
-            <S.NoResultWrapper>
-              <p>친구가 없습니다.</p>
-            </S.NoResultWrapper>
-          )}
-
           {followersList?.followInfoResDto.length !== 0 && (
             <S.PaginationWrapper>
               <Pagination

diff --git a/src/pages/ConnectionsPage/ConnectionsPageStyled.tsx b/src/pages/ConnectionsPage/ConnectionsPageStyled.tsx
@@ -46,10 +46,20 @@ export const SecondaryTitleWrapper = styled(TitleWrapper)`
   }
 `;
 
+export const SectionTitleWrapper = styled.div`
+  p {
+    width: 85%;
+    margin: 0 auto;
+    margin-top: 2rem;
+    font-size: 1rem;
+    color: ${theme.color.gray};
+  }
+`;
+
 export const ConnectionsWrapper = styled.div`
   width: 100%;
   height: fit-content;
-  margin-top: 2rem;
+  margin-top: 1rem;
 
   display: flex;
   flex-wrap: wrap;