[FOLLOW] 친구 목록 및 친구 프로필 페이지 구현

src/App.tsx

@@ -23,6 +23,7 @@ import Notice from 'pages/Notice';
 import KakaoLogin from 'pages/Auth/OAuth/KakaoLogin';
 import NaverLogin from 'pages/Auth/OAuth/NaverLogin';
 import GoogleLogin from 'pages/Auth/OAuth/GoogleLogin';
+import FollowProfile from 'pages/Follow/components/FollowProfile';
 
 export default function App(): JSX.Element {
   return (
@@ -40,6 +41,7 @@ export default function App(): JSX.Element {
           <Route path="/setting/id-change" element={<IdChange />} />
           <Route path="/" element={<DefaultLayout />}>
             <Route path="/friend-list" element={<FollowPage />} />
+            <Route path="/friend-list/:id" element={<FollowProfile />} />
           </Route>
           <Route path="/withdrawal" element={<Withdrawal />} />
           <Route path="/post" element={<Post />} />

src/api/follow/entity.ts

@@ -6,23 +6,33 @@ export interface FollowListParams {
   pageSize: number;
 }
 
-export interface GetFollowListParams {
+export interface GetFollowListResponse {
+  content: {
+    account: string;
+    email: string;
+    id: number;
+    nickname: string;
+    userType: string;
+  }[];
+  empty: boolean;
+  last: boolean;
+  number: number;
+}
+
+export interface SendedOrReceivedFollowParams {
   page: number;
   pageSize: number;
 }
 
-export interface GetFollowListResponse {
+export interface SendedOrReceivedFollowResponse {
   content: {
     id: number;
     follower: User;
     user: User;
-    account: string;
-  }[]
-}
-
-export interface CheckSendedFollowParams {
-  page: number;
-  pageSize: number;
+  }[];
+  empty: boolean;
+  last: boolean;
+  number: number;
 }
 
 export interface FollowerParams {
@@ -40,9 +50,46 @@ export interface SearchUsersParams {
 }
 
 export interface SearchUsersResponse {
-  content: FollowerInfo[]
+  content: FollowerInfo[];
+  empty: boolean;
+  last: boolean;
+  number: number;
 }
 
-export interface AcceptFollowParams {
+export interface RequestFollowParams {
   id: number;
 }
+
+export interface AcceptFollowParams extends RequestFollowParams {
+}
+
+export interface CancleFollowParams extends RequestFollowParams {
+}
+
+export interface RejectFollowParams extends RequestFollowParams {
+}
+
+export interface GetFollowReviewResponse {
+  content: {
+    name: string;
+    placeId: string;
+    photos?: string[];
+    shopId: number;
+    category: string;
+  }[]
+  empty: boolean;
+  first: boolean;
+  last: boolean;
+}
+
+export interface GetDetailReviewResponse {
+  content: {
+    content: string;
+    createdAt: string;
+    id: number;
+    rate: number;
+  }[];
+  empty: boolean;
+  first: boolean;
+  last: boolean;
+}

src/api/follow/index.ts

@@ -1,32 +1,41 @@
 import {
-  FollowListParams,
-  GetFollowListParams,
-  CheckSendedFollowParams,
-  DeleteFollowerParams,
   PostFollowerParams,
-  SearchUsersParams,
   AcceptFollowParams,
   GetFollowListResponse,
   SearchUsersResponse,
+  CancleFollowParams,
+  RejectFollowParams,
+  SendedOrReceivedFollowResponse,
+  DeleteFollowerParams,
+  GetFollowReviewResponse,
+  GetDetailReviewResponse,
 } from './entity';
 import followApi from './followApiClient';
 
-export const followList = (param: FollowListParams) => followApi.get(`/follow/followers?${param.cursor}&pageSize=${param.pageSize}`);
+export const followList = (pageParam: string) => followApi.get<GetFollowListResponse>(`/follow/followers?pageSize=10&${pageParam}`);
 
-export const getFollowList = (param: GetFollowListParams) => followApi.get<GetFollowListResponse>(`/follow/requests/receive?page=${param.page}&pageSize=${param.pageSize}`);
+export const checkReceivedFollow = (pageParam: number) => followApi.get<SendedOrReceivedFollowResponse>(`/follow/requests/receive?page=${pageParam}&pageSize=20`);
 
-export const checkSendedFollow = (param: CheckSendedFollowParams) => followApi.get(`/follow/requests/send?page=${param.page}&pageSize=${param.pageSize}`);
+export const checkSendedFollow = (pageParam: number) => followApi.get<SendedOrReceivedFollowResponse>(`/follow/requests/send?page=${pageParam}&pageSize=10`);
 
 export const requestFollow = (param: PostFollowerParams) => followApi.post('/follow/requests', {
   userAccount: param.userAccount,
 });
 
-export const deleteFollower = (param: DeleteFollowerParams) => followApi.delete('/follow/follwers', {
-  data: {
-    userAccount: param.userAccount,
-  },
+export const acceptFollow = (param: AcceptFollowParams) => followApi.post(`/follow/requests/${param.id}/accept`);
+
+export const searchUsers = (keyword: string, pageParam: string) => followApi.get<SearchUsersResponse>(`/users?keyword=${keyword}&${pageParam}&pageSize=10`);
+
+export const cancelFollow = (param: CancleFollowParams) => followApi.delete(`/follow/requests/${param.id}/cancel`);
+
+export const rejectFollow = (param: RejectFollowParams) => followApi.delete(`/follow/requests/${param.id}/reject`);
+
+export const deleteFollow = (param: DeleteFollowerParams) => followApi.delete('/follow/followers', {
+  data: { userAccount: param.userAccount },
 });
 
-export const acceptFollow = (param: AcceptFollowParams) => followApi.post(`/follow/requests/${param.id}/accept`);
+export const recentlyActiveFollow = () => followApi.get<GetFollowListResponse>('/recently-active-followers?pageSize=15');
+
+export const getFollowReview = (id: number, pageParam: string) => followApi.get<GetFollowReviewResponse>(`/review/follower/${id}/shops?size=9&${pageParam}`);
 
-export const searchUsers = (param: SearchUsersParams) => followApi.get<SearchUsersResponse>(`/users?keyword=${param.keyword}`);
+export const getDetailReview = (followId: number, placeId: string, pageParam: number) => followApi.get<GetDetailReviewResponse>(`/review/follower/${followId}/shop/${placeId}?${pageParam}`);