팔로우 버튼 정상 작동 및 잡다한 내용 수정

src/app/(userpage)/user/[userId]/components/FollowModal/FollowModal.tsx

@@ -27,8 +27,8 @@ export default function FollowModal({ isModalState, setIsModalState, followState
   const { data } = useQuery({
     queryKey: ["followData", followState],
     queryFn: async () => {
-      const res = httpClient.get<UserProduct>(`users/${userId}/${followState}`, {
-        headers: { Authorization: ACCESS_TOKEN },
+      const res = httpClient.get<UserProduct>(`/users/${userId}/${followState}`, {
+        headers: { Authorization: `Bearer ${ACCESS_TOKEN}` },
         cache: "no-cache",
       });
       return res;

src/app/(userpage)/user/[userId]/components/MyProfileButton/MyProfileButton.module.scss

@@ -11,5 +11,5 @@
 }
 
 .profile {
-  width: 80%;
+  width: 100%;
 }

src/app/(userpage)/user/[userId]/components/MyProfileButton/MyProfileButton.tsx

@@ -1,3 +1,4 @@
+import { signOut } from "next-auth/react";
 import React, { useState } from "react";
 import Button from "@/components/Button/Button";
 import Modal from "@/components/Modal/Modal";
@@ -26,6 +27,7 @@ export default function MyProfileButton() {
       <Button
         styleType='tertiary'
         className={styles.profile}
+        onClick={() => signOut({ callbackUrl: "/" })}
       >
         로그아웃
       </Button>

src/app/(userpage)/user/[userId]/components/UserActivityList/UserActivityList.tsx

@@ -51,9 +51,9 @@ export default function UserActivityList({ userId }: UserActivityListProps) {
     queryKey: ["userProductData", selectedButton],
     queryFn: async ({ pageParam }) => {
       const res = await httpClient.get<ProductsResponseType>(
-        `users/${userId}/${selectedButton}-products?cursor=${pageParam}`,
+        `/users/${userId}/${selectedButton}-products?cursor=${pageParam}`,
         {
-          headers: { Authorization: ACCESS_TOKEN },
+          headers: { Authorization: `Bearer ${ACCESS_TOKEN}` },
           cache: "no-cache",
         },
       );

src/app/(userpage)/user/[userId]/components/UserInfo/UserInfo.module.scss

@@ -102,12 +102,4 @@
 
 .profile {
   width: 100%;
-
-  @include respond-to(tablet) {
-    width: 80%;
-  }
-
-  @include respond-to(mobile) {
-    width: 245px;
-  }
 }

src/app/(userpage)/user/[userId]/components/UserInfo/UserInfo.tsx

@@ -1,6 +1,6 @@
-/* eslint-disable import/no-named-as-default */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useSession } from "next-auth/react";
 import React, { useState } from "react";
 import Button from "@/components/Button/Button";
@@ -35,7 +35,9 @@ export default function UserInfo({
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [followModalProps, setFollowModalProps] = useState("");
   const { data: session } = useSession();
+  const queryClient = useQueryClient();
   const loginUser = session?.user.id;
+  const ACCESS_TOKEN = session?.accessToken;
 
   const handelFolloweesModal = () => {
     setFollowModalProps("followees");
@@ -47,6 +49,36 @@ export default function UserInfo({
     setIsModalOpen(true);
   };
 
+  const followPostDelete = async () => {
+    const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/follow`, {
+      method: isfollow ? "DELETE" : "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${ACCESS_TOKEN}`,
+      },
+      body: JSON.stringify({ userId: Number(userId) }),
+    });
+
+    if (!res.ok) {
+      const errorData = await res.json();
+      throw new Error(errorData.message || "Something went wrong");
+    }
+
+    const data = await res.json();
+    return data;
+  };
+
+  const mutation = useMutation({
+    mutationKey: ["followData", userId],
+    mutationFn: followPostDelete,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userData", String(userId)] });
+    },
+    onError: (error: Error) => {
+      console.error("Mutation failed", error.message);
+    },
+  });
+
   return (
     <>
       <FollowModal
@@ -81,8 +113,9 @@ export default function UserInfo({
             {isfollow ? (
               <Button
                 styleType='tertiary'
-                disabled
+                disabled={false}
                 className={styles.profile}
+                onClick={() => mutation.mutate()}
               >
                 팔로우 취소
               </Button>
@@ -91,6 +124,7 @@ export default function UserInfo({
                 styleType='primary'
                 disabled={false}
                 className={styles.profile}
+                onClick={() => mutation.mutate()}
               >
                 팔로우
               </Button>

src/app/(userpage)/user/[userId]/page.tsx

@@ -23,7 +23,7 @@ export default function UserPage({ params }: { params: { userId: number } }) {
     queryKey: ["userData", params.userId],
     queryFn: async () => {
       const res = httpClient.get<UserDetail>(`/users/${params.userId}`, {
-        headers: { Authorization: ACCESS_TOKEN ?? "" },
+        headers: { Authorization: `Bearer ${ACCESS_TOKEN}` },
         cache: "no-cache",
       });
       return res;
@@ -35,7 +35,7 @@ export default function UserPage({ params }: { params: { userId: number } }) {
       {data && (
         <>
           <UserInfo
-            userId={params.userId}
+            userId={data.id}
             nickname={data.nickname}
             image={data.image}
             description={data.description}

src/components/Card/Activity/Activity.tsx

@@ -61,7 +61,11 @@ export default function Activity({ title, averageRating, reviewCount, chipCatego
                 fill
               />
             </figure>
-            <span>{mainContent?.toFixed(1)}</span>
+            {title === "남긴 별점 평균" && mainContent !== 0 ? (
+              <span>{mainContent?.toFixed(1)}</span>
+            ) : (
+              <span>{mainContent?.toFixed(0)}</span>
+            )}
           </div>
         )}
       </div>

src/types/global.ts

@@ -55,8 +55,8 @@ export type ErrorResponse = {
       value: string;
     };
   };
-} 
-  
+};
+
 export type ProductDetailType = {
   id: number;
   name: string;