[Feat] 팔로잉 목록 api 및 msw 작업

src/api/index.ts

@@ -1,12 +1,14 @@
-import { authServiceRemote, userServiceRemote } from './service';
+import { authServiceRemote, followerServiceRemote, userServiceRemote } from './service';
 
 const provideAPIService = () => {
   const userService = userServiceRemote();
   const authService = authServiceRemote();
+  const followerService = followerServiceRemote();
 
   return {
     usersService: userService,
     authService,
+    followerService,
   };
 };
 

src/api/service/follower-service/index.ts

@@ -0,0 +1,14 @@
+import { baseAPI } from '@/api/core';
+
+export const followerServiceRemote = () => ({
+  // 팔로워 목록 조회
+  // 임시주소로 작성. 나중에 수정 필요.
+  getFollowers: async () => {
+    try {
+      const response = await baseAPI.get('http://localhost:4000/followers');
+      return response.data;
+    } catch (error) {
+      throw error;
+    }
+  },
+});

src/api/service/index.ts

@@ -1,2 +1,3 @@
 export * from './auth-service';
+export * from './follower-service';
 export * from './user-service';

src/app/message/page.tsx

@@ -4,39 +4,19 @@ import { useSearchParams } from 'next/navigation';
 
 import { Chat, FollowingList, FollowingSearch } from '@/components/pages/message';
 import { TabNavigation } from '@/components/shared';
+import { useGetFollowers } from '@/hooks/use-follower/use-follower-get';
 
 const SOCIAL_TABS = [
   { label: '팔로잉', value: 'following' },
   { label: '메세지', value: 'chat' },
 ];
 
-const FOLLOWING_LIST = [
-  {
-    id: 1,
-    name: '신짱구',
-    profileImage:
-      'https://images.unsplash.com/photo-1714635218254-740bad86a0e8?q=80&w=765&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-    profileMessage: '안녕하세요 신짱구입니다',
-  },
-  {
-    id: 2,
-    name: '신짱구',
-    profileImage:
-      'https://images.unsplash.com/photo-1714635218254-740bad86a0e8?q=80&w=765&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-    profileMessage: '안녕하세요 신짱구입니다',
-  },
-  {
-    id: 3,
-    name: '신짱구',
-    profileImage:
-      'https://images.unsplash.com/photo-1714635218254-740bad86a0e8?q=80&w=765&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-    profileMessage: '안녕하세요 신짱구입니다',
-  },
-];
-
 export default function FollowingPage() {
+  const { data: followers } = useGetFollowers();
+
   const params = useSearchParams();
   const tab = params.get('tab') || 'following';
+  if (!followers) return null;
   return (
     <div className='min-h-screen bg-[#F1F5F9]'>
       <TabNavigation basePath='/message' tabs={SOCIAL_TABS} />
@@ -45,7 +25,7 @@ export default function FollowingPage() {
       {tab === 'following' && (
         <>
           <FollowingSearch />
-          <FollowingList items={FOLLOWING_LIST} />
+          <FollowingList items={followers} />
         </>
       )}
     </div>

src/hooks/use-follower/use-follower-get/index.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { API } from '@/api';
+
+export const useGetFollowers = () => {
+  const query = useQuery({
+    queryKey: ['followers'],
+    queryFn: () => API.followerService.getFollowers(),
+  });
+  return query;
+};

src/mock/handlers.ts

@@ -1,4 +1,5 @@
 import { authHandlers } from './service/auth/auth-handlers';
+import { followerHandlers } from './service/followers/followers-handler';
 import { userHandlers } from './service/user/users-handler';
 
-export const handlers = [...userHandlers, ...authHandlers];
+export const handlers = [...userHandlers, ...authHandlers, ...followerHandlers];

src/mock/service/followers/followers-handler.ts

@@ -0,0 +1,12 @@
+import { http, HttpResponse } from 'msw';
+
+import { mockFollowingItems } from './followers-mocks';
+
+const getFollowersMock = http.get('http://localhost:4000/followers', () => {
+  if (!mockFollowingItems) {
+    return HttpResponse.json({ message: '팔로잉 목록이 없습니다.' }, { status: 404 });
+  }
+  return HttpResponse.json(mockFollowingItems);
+});
+
+export const followerHandlers = [getFollowersMock];

src/mock/service/followers/followers-mocks.ts

@@ -0,0 +1,65 @@
+export const mockFollowingItems = [
+  {
+    id: 1,
+    name: '신짱구',
+    profileImage:
+      'https://images.unsplash.com/photo-1714635218254-740bad86a0e8?q=80&w=765&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    profileMessage: '안녕하세요 신짱구입니다!',
+  },
+  {
+    id: 2,
+    name: '김맹구',
+    profileImage:
+      'https://images.unsplash.com/photo-1534361960057-19889db9621e?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    profileMessage: '안녕하세요 김맹구입니다!',
+  },
+  {
+    id: 3,
+    name: '흰둥이',
+    profileImage:
+      'https://images.unsplash.com/photo-1533738363-b7f9aef128ce?q=80&w=735&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    profileMessage: '안녕하세요 흰둥이입니다!',
+  },
+  {
+    id: 4,
+    name: '김철수',
+    profileImage:
+      'https://images.unsplash.com/photo-1503777119540-ce54b422baff?w=400&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fCVFQSVCMyVBMCVFQyU5NiU5MSVFQyU5RCVCNHxlbnwwfHwwfHx8MA%3D%3D',
+    profileMessage: '안녕하세요 김철수입니다!',
+  },
+  {
+    id: 5,
+    name: '유환욱',
+    profileImage:
+      'https://images.unsplash.com/photo-1571566882372-1598d88abd90?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fCVFQSVCMyVBMCVFQyU5NiU5MSVFQyU5RCVCNHxlbnwwfHwwfHx8MA%3D%3D',
+    profileMessage: '안녕하세요 유환욱입니다!',
+  },
+  {
+    id: 6,
+    name: '호날두',
+    profileImage:
+      'https://images.unsplash.com/photo-1589656966895-2f33e7653819?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8JUVCJThGJTk5JUVCJUFDJUJDfGVufDB8fDB8fHww',
+    profileMessage: '안녕하세요 호날두입니다!',
+  },
+  {
+    id: 7,
+    name: '메시',
+    profileImage:
+      'https://images.unsplash.com/photo-1574068468668-a05a11f871da?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fCVFQiU4RiU5OSVFQiVBQyVCQ3xlbnwwfHwwfHx8MA%3D%3D',
+    profileMessage: '안녕하세요 메시입니다!',
+  },
+  {
+    id: 8,
+    name: '아이언맨',
+    profileImage:
+      'https://images.unsplash.com/photo-1591824438708-ce405f36ba3d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8JUVCJThGJTk5JUVCJUFDJUJDfGVufDB8fDB8fHww',
+    profileMessage: '안녕하세요 아이언맨입니다!',
+  },
+  {
+    id: 9,
+    name: '헐크',
+    profileImage:
+      'https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fCVFQiU4RiU5OSVFQiVBQyVCQ3xlbnwwfHwwfHx8MA%3D%3D',
+    profileMessage: '안녕하세요 헐크입니다!',
+  },
+];