#109 feat: 친구 신청 api 연결

src/api/ConnectionApi.tsx

@@ -55,3 +55,16 @@ export const getRecommendedFriendsList = async (
     return null;
   }
 };
+
+// * 친구 신청 post
+export const postFollow = async (memberId: string): Promise<FollowersListData | null> => {
+  try {
+    const response = await axiosInstance.post(`/member/follow`, {
+      memberId: memberId,
+    });
+    return response.data.data;
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return null;
+  }
+};

src/components/Connection/Connection.tsx

@@ -1,3 +1,4 @@
+import { postFollow } from '../../api/ConnectionApi';
 import { FollowInfo } from '../../types/ConnectionType';
 import * as S from './ConnectionStyled';
 
@@ -6,14 +7,18 @@ interface ConnectionProps {
 }
 
 const Connection = ({ follower }: ConnectionProps) => {
+  const follow = () => {
+    postFollow(follower.memberId!); // memberId는 항상 존재하기 때문에 !로 검사 생략
+  };
+
   return (
     <S.ConnectionLayout>
       <S.ProfileImageWrapper src={follower.profileImage} />
       <S.ConnectionUserWrapper>
         <p className="name">{follower.name}</p>
         <p className="nickName">{follower.nickname}</p>
       </S.ConnectionUserWrapper>
-      <S.FriendRequestButtonWrapper>
+      <S.FriendRequestButtonWrapper onClick={follow}>
         <p>친구 신청</p>
       </S.FriendRequestButtonWrapper>
     </S.ConnectionLayout>

src/pages/MyPage.tsx

@@ -20,6 +20,7 @@ import { useQuery } from '@tanstack/react-query';
 import Pagination from '@mui/material/Pagination';
 import { notifications, unreadCount } from '../contexts/sseAtom';
 import { Helmet } from 'react-helmet-async';
+import { useFollowersList } from '../hooks/useFollowersList';
 
 const MyPage = () => {
   const navigate = useNavigate();
@@ -28,6 +29,7 @@ const MyPage = () => {
     queryKey: ['alarmNoti'],
     queryFn: getAlarmList,
   });
+  const { data: followersList } = useFollowersList(0, 8);
 
   console.log(alarmNoti);
   const [teamBool, setTeamBool] = useState<string>('personal'); // 기본값으로 팀 탭을 보여줌
@@ -287,7 +289,7 @@ const MyPage = () => {
                     )}
                   </S.CaptionText>
                   <S.CaptionText onClick={() => navigate(`/connections`)}>
-                    <span>친구 10명</span>
+                    <span>친구 {followersList?.pageInfoResDto.totalItems}명</span>
                   </S.CaptionText>
                 </Flex>
               </Flex>

src/types/ConnectionType.ts

@@ -1,5 +1,5 @@
 export type FollowInfo = {
-  memberId?: number;
+  memberId?: string;
   nickname?: string;
   name?: string;
   profileImage?: string;