🚨Fix : profile/follow button 에러수정

src/apis/follow/index.ts

@@ -8,7 +8,7 @@ const postFollowUser = async (userId: string, token: string) => {
     { userId },
     {
       headers: {
-        Authorization: token
+        Authorization: `bearer ${token}`
       }
     }
   );
@@ -19,7 +19,7 @@ const deleteFollowUser = async (userId: string, token: string) => {
   const response = await axios.delete<Follow>(`${API_BASE_URL}/follow/delete`, {
     data: { id: userId },
     headers: {
-      Authorization: token
+      Authorization: `bearer ${token}`
     }
   });
   return response.data;

src/pages/profile/components/FollowButton.tsx

@@ -1,40 +1,50 @@
 import { useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import useSessionStorage from '@hooks/useSessionStorage';
 import { deleteFollowUser, postFollowUser } from '@apis/follow';
 import { Button } from '@components/Button';
 import { User } from '@/types';
 
 interface FollowButtonProps {
-  followDataId: string;
+  followingDataId: string; // 삭제용 - following data id
+  followingUserId: string; // 팔로우용 - 팔로우할 userId
+  following?: boolean;
 }
 
-const FollowButton = ({ followDataId }: FollowButtonProps) => {
-  const [followed, setFollowed] = useState(true);
+const FollowButton = ({
+  followingDataId,
+  followingUserId,
+  following = true
+}: FollowButtonProps) => {
+  const [followed, setFollowed] = useState(following);
+  const [dataId, setDataId] = useState(followingDataId);
   const [userSessionData] = useSessionStorage<Pick<User, '_id' | 'token'>>(
     'userData',
     {
       _id: '',
       token: ''
     }
   );
-  const { token, _id } = userSessionData;
+  const { token } = userSessionData;
 
-  const { refetch } = useQuery({
-    queryKey: ['follow'],
-    queryFn: async () => {
-      const data = followed
-        ? await deleteFollowUser(followDataId, token)
-        : await postFollowUser(_id, token);
+  const { mutate } = useMutation(
+    () =>
+      followed
+        ? deleteFollowUser(dataId, token)
+        : postFollowUser(followingUserId, token),
+    {
+      onSuccess: (data) => {
+        if (!followed) {
+          setDataId(data._id);
+        }
 
-      return data;
-    },
-    enabled: false
-  });
+        setFollowed((prev) => !prev);
+      }
+    }
+  );
 
-  const handleClickFollow = async () => {
-    await refetch();
-    setFollowed((prev) => !prev);
+  const handleClickFollow = () => {
+    mutate();
   };
 
   return (

src/pages/profile/components/FollowUser.tsx

@@ -13,7 +13,7 @@ const FollowUser = ({
   followUser,
   following
 }: FollowUserProps) => {
-  const { fullName, image, isOnline, email } = followUser;
+  const { _id, fullName, image, isOnline, email } = followUser;
 
   return (
     <FollowUserContainer>
@@ -22,8 +22,15 @@ const FollowUser = ({
         image={image}
         isOnline={isOnline}
         email={email}
+        id={_id}
       />
-      {following && <FollowButton followDataId={followDataId} />}
+      {following && (
+        <FollowButton
+          followingDataId={followDataId}
+          followingUserId={_id}
+          following={true}
+        />
+      )}
     </FollowUserContainer>
   );
 };

src/pages/profile/components/FollowUserInfo.tsx

@@ -1,22 +1,29 @@
 import { FollowUserInfoContainer } from './FollowUserInfo.style';
 import { UserId, UserName } from '@components/UserText';
 import { BadgeAvatar } from '@components/Avatar';
+import { useNavigate } from 'react-router-dom';
 
 interface FollowUserInfoProps {
   fullName: string;
   image?: string;
   email: string;
   isOnline: boolean;
+  id: string;
 }
 
 const FollowUserInfo = ({
   fullName,
   isOnline,
   email,
-  image
+  image,
+  id
 }: FollowUserInfoProps) => {
+  const navigate = useNavigate();
+
+  const handleClickInfo = () => navigate(`/profile/${id}`);
+
   return (
-    <FollowUserInfoContainer>
+    <FollowUserInfoContainer onClick={handleClickInfo}>
       <BadgeAvatar
         alt={fullName}
         src={image}

src/pages/profile/constants/profileTabs.ts

@@ -1,6 +1,6 @@
 export const PROFILE_TABS = {
   MEDITATION: '명상',
-  FOLLOWING: '팔로워',
-  FOLLOWER: '팔로잉',
+  FOLLOWING: '팔로잉',
+  FOLLOWER: '팔로워',
   INFO: '명상정보'
 };