diff --git a/src/api/index.ts b/src/api/index.ts
index ef0330a5..0c973517 100644
--- a/src/api/index.ts
+++ b/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,
};
};
diff --git a/src/api/service/follower-service/index.ts b/src/api/service/follower-service/index.ts
new file mode 100644
index 00000000..fad5c3f3
--- /dev/null
+++ b/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;
+ }
+ },
+});
diff --git a/src/api/service/index.ts b/src/api/service/index.ts
index bf5b1ae7..cbdb6b69 100644
--- a/src/api/service/index.ts
+++ b/src/api/service/index.ts
@@ -1,2 +1,3 @@
export * from './auth-service';
+export * from './follower-service';
export * from './user-service';
diff --git a/src/app/message/page.tsx b/src/app/message/page.tsx
index c5a3e352..be52fc9e 100644
--- a/src/app/message/page.tsx
+++ b/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 (
@@ -45,7 +25,7 @@ export default function FollowingPage() {
{tab === 'following' && (
<>
-
+
>
)}
diff --git a/src/hooks/use-follower/use-follower-get/index.ts b/src/hooks/use-follower/use-follower-get/index.ts
new file mode 100644
index 00000000..d44d0b18
--- /dev/null
+++ b/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;
+};
diff --git a/src/mock/handlers.ts b/src/mock/handlers.ts
index 31528087..501edb3e 100644
--- a/src/mock/handlers.ts
+++ b/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];
diff --git a/src/mock/service/followers/followers-handler.ts b/src/mock/service/followers/followers-handler.ts
new file mode 100644
index 00000000..af6da5d1
--- /dev/null
+++ b/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];
diff --git a/src/mock/service/followers/followers-mocks.ts b/src/mock/service/followers/followers-mocks.ts
new file mode 100644
index 00000000..07bdfb6f
--- /dev/null
+++ b/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: '안녕하세요 헐크입니다!',
+ },
+];