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: '안녕하세요 헐크입니다!', + }, +];