Feat: 마이리스트, 콜라보리스트 페이지 팔로우 기능 구현

src/app/_api/follow/createFollowUser.ts

@@ -0,0 +1,7 @@
+import axiosInstance from '@/lib/axios/axiosInstance';
+
+const createFollowUser = async (userId: number) => {
+  return await axiosInstance.post(`/follow/${userId}`);
+};
+
+export default createFollowUser;

src/app/_api/follow/deleteFollowUser.ts

@@ -0,0 +1,7 @@
+import axiosInstance from '@/lib/axios/axiosInstance';
+
+const deleteFollowUser = async (userId: number) => {
+  return await axiosInstance.delete(`/follow/${userId}`);
+};
+
+export default deleteFollowUser;

src/app/_api/list/getAllList.ts

@@ -1,7 +1,7 @@
 import axiosInstance from '@/lib/axios/axiosInstance';
 import { AllListType } from '@/lib/types/listType';
 
-export async function getAllList(userId: number, type: string, category: string, cursorId?: number) {
+const getAllList = async (userId: number, type: string, category: string, cursorId?: number) => {
   const params = new URLSearchParams({
     type,
     category,
@@ -13,6 +13,7 @@ export async function getAllList(userId: number, type: string, category: string,
   }
 
   const response = await axiosInstance.get<AllListType>(`/users/${userId}/lists?${params.toString()}`);
-
   return response.data;
-}
+};
+
+export default getAllList;

src/app/_api/user/getUserOne.ts

@@ -1,8 +1,10 @@
 import axiosInstance from '@/lib/axios/axiosInstance';
 import { UserType } from '@/lib/types/userProfileType';
 
-export const getUserOne = async (userId: number) => {
+const getUserOne = async (userId: number) => {
   const response = await axiosInstance.get<UserType>(`/users/${userId}`);
 
   return response.data;
 };
+
+export default getUserOne;

src/app/layout.tsx

@@ -34,6 +34,7 @@ export default function TempLayout({ children }: { children: ReactNode }) {
         <QueryClientProvider client={queryClient}>
           <div id="modal-root" />
           <div>{children}</div>
+          <ToastContainer />
         </QueryClientProvider>
       </body>
     </html>

src/app/user/[userId]/_components/Card.tsx

@@ -36,7 +36,7 @@ export default function Card({ list, isOwner }: CardProps) {
         {list.listItems.map((item) => (
           <li key={item.id} className={styles.item}>
             <span className={styles.rank}>
-              {item.ranking}
+              {item.rank}
               {'.'}
             </span>
             <span className={styles.itemTitle}>{item.title}</span>

src/app/user/[userId]/_components/Content.tsx

@@ -17,8 +17,8 @@ import BlueLineLongIcon from '/public/icons/blue_line_long.svg';
 import Card from './Card';
 import Categories from './Categories';
 
-import { getUserOne } from '@/app/_api/user/getUserOne';
-import { getAllList } from '@/app/_api/list/getAllList';
+import getUserOne from '@/app/_api/user/getUserOne';
+import getAllList from '@/app/_api/list/getAllList';
 
 import { QUERY_KEYS } from '@/lib/constants/queryKeys';
 import { UserType } from '@/lib/types/userProfileType';

src/app/user/[userId]/_components/FollowButton.css.ts

@@ -1,13 +1,26 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 import { vars } from '@/styles/theme.css';
 
 export const button = style({
   padding: '0.8rem 1.2rem',
-
-  backgroundColor: vars.color.blue,
   borderRadius: '5rem',
+  fontWeight: '400',
+  lineHeight: '1.6rem',
+});
 
-  fontSize: '1rem',
-  fontWeight: '600',
-  color: vars.color.white,
+export const variant = styleVariants({
+  primary: [
+    button,
+    {
+      backgroundColor: vars.color.blue,
+      color: vars.color.white,
+    },
+  ],
+  gray: [
+    button,
+    {
+      backgroundColor: vars.color.gray7,
+      color: vars.color.white,
+    },
+  ],
 });

src/app/user/[userId]/_components/FollowButton.tsx

@@ -1,27 +1,83 @@
 'use client';
 
-/**
- TODO
- - [ ] 상태(팔로우, 언팔로우)에 따른 팔로우 버튼 UI
- - [ ] 조건(비회원, 회원)에 따른 팔로우 버튼 동작(api 연동)
- */
+import { useRouter } from 'next/navigation';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
 
 import * as styles from './FollowButton.css';
 
-interface ActionProps {
+import createFollowUser from '@/app/_api/follow/createFollowUser';
+import deleteFollowUser from '@/app/_api/follow/deleteFollowUser';
+import getUserOne from '@/app/_api/user/getUserOne';
+
+import { QUERY_KEYS } from '@/lib/constants/queryKeys';
+import { UserType } from '@/lib/types/userProfileType';
+import { useUser } from '@/store/useUser';
+import toasting from '@/lib/utils/toasting';
+
+interface FollowButtonProps {
+  userId: number;
   isFollowed: boolean;
 }
 
-export default function FollowButton({ isFollowed }: ActionProps) {
-  const label = isFollowed ? '팔로우' : '팔로우 취소';
+const MAX_FOLLOWING = 1000;
+
+export default function FollowButton({ isFollowed, userId }: FollowButtonProps) {
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const { user: userMe } = useUser();
+
+  const { data: userMeData } = useQuery<UserType>({
+    queryKey: [QUERY_KEYS.userOne, userMe.id],
+    queryFn: () => getUserOne(userMe.id),
+    enabled: !!userMe.id,
+  });
+
+  const followUser = useMutation({
+    mutationKey: [QUERY_KEYS.follow, userId],
+    mutationFn: () => createFollowUser(userId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.userOne, userId],
+      });
+    },
+    onError: (error: AxiosError) => {
+      if (error.response?.status === 401) {
+        toasting({ type: 'warning', txt: '로그인이 필요한 기능입니다.' });
+        router.push('/login');
+      }
+    },
+  });
+
+  const deleteFollowingUser = useMutation({
+    mutationKey: [QUERY_KEYS.deleteFollow, userId],
+    mutationFn: () => deleteFollowUser(userId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.userOne, userId],
+      });
+    },
+  });
+
+  const handleFollowUser = (isFollowed: boolean) => () => {
+    if (userMeData && userMeData?.followingCount >= MAX_FOLLOWING) {
+      toasting({ type: 'warning', txt: '최대 1000명까지 팔로우할 수 있어요.' });
+      return;
+    }
 
-  const handleFollowUser = () => {
-    // 1. follow 하는 api 요청 + update
+    if (isFollowed) {
+      deleteFollowingUser.mutate();
+    } else {
+      followUser.mutate();
+    }
   };
 
   return (
-    <button className={styles.button} onClick={handleFollowUser}>
-      {label}
+    <button
+      className={`${isFollowed ? styles.variant.gray : styles.variant.primary}`}
+      onClick={handleFollowUser(isFollowed)}
+    >
+      {isFollowed ? '팔로우 취소' : '팔로우'}
     </button>
   );
 }

src/app/user/[userId]/_components/Profile.tsx

@@ -16,7 +16,7 @@ import FollowButton from './FollowButton';
 import SettingIcon from '/public/icons/setting.svg';
 
 import useMoveToPage from '@/hooks/useMoveToPage';
-import { getUserOne } from '@/app/_api/user/getUserOne';
+import getUserOne from '@/app/_api/user/getUserOne';
 import { QUERY_KEYS } from '@/lib/constants/queryKeys';
 import { UserType } from '@/lib/types/userProfileType';
 
@@ -78,15 +78,15 @@ export default function Profile({ userId }: { userId: number }) {
           <div className={styles.info}>
             <div className={styles.user}>
               <span className={styles.nickName}>{data?.nickname}</span>
-              {!data?.isOwner && <FollowButton isFollowed={!!data?.isFollowed} />}
+              {!data?.isOwner && <FollowButton userId={userId} isFollowed={!!data?.isFollowed} />}
             </div>
             <div className={styles.follow}>
               <div className={styles.text} onClick={onClickMoveToPage(`/user/${userId}/followings`)}>
-                <span className={styles.count}>{data?.followingCount}</span>
+                <span className={styles.count}>{data?.followingCount.toLocaleString('ko-KR')}</span>
                 <span>팔로잉</span>
               </div>
               <div className={styles.text} onClick={onClickMoveToPage(`/user/${userId}/followers`)}>
-                <span className={styles.count}>{data?.followerCount}</span>
+                <span className={styles.count}>{data?.followerCount.toLocaleString('ko-KR')}</span>
                 <span>팔로워</span>
               </div>
             </div>

src/lib/constants/queryKeys.ts

@@ -9,4 +9,6 @@ export const QUERY_KEYS = {
   getRecommendedLists: 'getRecommendedLists',
   getRecommendedUsers: 'getRecommendedUsers',
   getTrendingLists: 'getTrendingLists',
+  follow: 'follow',
+  deleteFollow: 'deleteFollow',
 };

src/lib/types/listType.ts

@@ -81,6 +81,7 @@ export interface ListDetailType {
   collectCount: number;
   viewCount: number;
 }
+
 // 리스트 전체 조회 타입
 export interface AllListType {
   cursorId: number;
@@ -98,9 +99,9 @@ export interface ListType {
 
 export interface ItemType {
   id: number;
-  ranking: number;
+  rank: number;
   title: string;
-  comment?: string;
-  link?: string;
+  comment?: string; // 리스트 상세조회 타입에서 사용할때는 optional 여부 확인하기
+  link?: string; // 리스트 상세조회 타입에서 사용할때는 optional 여부 확인하기
   imageUrl?: string;
 }