팔로우 유무에 따라 버튼이 변경되지 않는 문제 수정

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

@@ -1,66 +1,75 @@
+'use client'
+
 import {
   Avatar,
   CategoryListItem,
   FollowListButton,
   ProfileEditButton,
+  Spinner,
 } from '@/components'
 import { CATEGORIES_RENDER, PROFILE_MSG } from '@/constants'
-import { fetchGetUserProfile } from '@/services/users/useUsers'
+import { useGetUserProfile } from '@/services/users/useUsers'
 import { UserLayoutProps } from './layout'
 
-export default async function UserPage({
-  params: { userId },
-}: UserLayoutProps) {
-  const user = await fetchGetUserProfile({ memberId: userId })
+export default function UserPage({ params: { userId } }: UserLayoutProps) {
+  const { data: user, isFetching: isUserLoading } = useGetUserProfile(
+    Number(userId),
+  )
 
   return (
     <>
-      <div className="flex flex-col gap-4 px-4 py-6">
-        <div className="flex gap-3">
-          {user?.profileImagePath && (
-            <div className="relative h-20 w-20">
-              <Avatar
-                src={user.profileImagePath}
-                alt="profile"
-              />
+      {isUserLoading ? (
+        <Spinner />
+      ) : (
+        <div className="flex flex-col gap-4 px-4 py-6">
+          <div className="flex gap-3">
+            {user?.profileImagePath && (
+              <div className="relative h-20 w-20">
+                <Avatar
+                  src={user.profileImagePath}
+                  alt="profile"
+                />
+              </div>
+            )}
+            <div className="flex flex-col gap-1 py-0.5">
+              <div className="text-xl font-semibold text-gray9">
+                {user?.nickname}
+              </div>
+              <div className="text-xs font-medium text-gray6">
+                {user?.newsEmail}
+              </div>
+              <div className="flex gap-1 text-xs font-medium text-gray6">
+                <FollowListButton user={user} />
+              </div>
             </div>
-          )}
-          <div className="flex flex-col gap-1 py-0.5">
-            <div className="text-xl font-semibold text-gray9">
-              {user?.nickname}
-            </div>
-            <div className="text-xs font-medium text-gray6">
-              {user?.newsEmail}
+          </div>
+          <ProfileEditButton user={user} />
+          <div className="flex flex-col ">
+            <div className="py-3 text-sm font-semibold text-gray9">
+              {PROFILE_MSG.FAVORITE_CATEGORY}
             </div>
-            <div className="flex gap-1 text-xs font-medium text-gray6">
-              <FollowListButton user={user} />
+            <div>
+              <CategoryListItem
+                label={
+                  user?.favoriteCategory
+                    ? CATEGORIES_RENDER[user.favoriteCategory]
+                    : '없음'
+                }
+                active={true}
+                disabled={true}
+              />
             </div>
           </div>
-        </div>
-        <ProfileEditButton user={user} />
-        <div className="flex flex-col ">
-          <div className="py-3 text-sm font-semibold text-gray9">
-            {PROFILE_MSG.FAVORITE_CATEGORY}
-          </div>
           <div>
-            <CategoryListItem
-              label={
-                user?.favoriteCategory
-                  ? CATEGORIES_RENDER[user.favoriteCategory]
-                  : '없음'
-              }
-              active={true}
-              disabled={true}
-            />
-          </div>
-        </div>
-        <div>
-          <div className="py-3 text-sm font-semibold text-gray9">
-            {PROFILE_MSG.DESCRIPTION}
+            <div className="py-3 text-sm font-semibold text-gray9">
+              {PROFILE_MSG.DESCRIPTION}
+            </div>
+            <div className="text-sm font-normal text-gray9">
+              {user?.aboutMe}
+            </div>
           </div>
-          <div className="text-sm font-normal text-gray9">{user?.aboutMe}</div>
         </div>
-      </div>
+      )}
     </>
   )
 }

src/components/FollowListButton/FollowListButton.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { PROFILE_MSG } from '@/constants'
-import { useFollowUser, useModal } from '@/hooks'
+import { useModal } from '@/hooks'
 import { useCurrentUser } from '@/hooks/useCurrentUser'
 import { fetchGetFollowers, fetchGetFollowing } from '@/services/users/useUsers'
 import { UserProfileResBody } from '@/types'
@@ -13,13 +13,6 @@ const FollowListButton = ({ user }: { user: UserProfileResBody }) => {
   const myId = currentUser?.memberId
   const { Modal, isOpen, modalClose, currentModal, handleOpenCurrentModal } =
     useModal()
-  const { followingCount, setFollowingCount, followerCount } = useFollowUser({
-    memberId: user?.memberId || 0,
-    isInitFollowing: !!user?.isFollowing,
-    followingInitCount: user?.followingCount || 0,
-    followerInitCount: user?.followerCount || 0,
-    handleOpenCurrentModal,
-  })
 
   return (
     <>
@@ -28,15 +21,15 @@ const FollowListButton = ({ user }: { user: UserProfileResBody }) => {
         onClick={() => {
           handleOpenCurrentModal('following')
         }}>
-        {PROFILE_MSG.FOLLOWING} {followingCount}
+        {PROFILE_MSG.FOLLOWING} {user?.followingCount}
       </div>
       {PROFILE_MSG.LIST_DIVIDER}
       <div
         className="cursor-pointer hover:font-semibold"
         onClick={() => {
           handleOpenCurrentModal('follower')
         }}>
-        {PROFILE_MSG.FOLLOWER} {followerCount}
+        {PROFILE_MSG.FOLLOWER} {user?.followerCount}
       </div>
       {currentModal !== 'login' && isOpen && (
         <Modal
@@ -54,8 +47,7 @@ const FollowListButton = ({ user }: { user: UserProfileResBody }) => {
                 fetchFn={fetchGetFollowing}
                 myId={myId}
                 type="following"
-                followingCount={followingCount}
-                setFollowingCount={setFollowingCount}
+                followingCount={user?.followingCount}
               />
             )}
             {currentModal === 'follower' && (
@@ -64,8 +56,7 @@ const FollowListButton = ({ user }: { user: UserProfileResBody }) => {
                 fetchFn={fetchGetFollowers}
                 myId={myId}
                 type="follower"
-                followingCount={followingCount}
-                setFollowingCount={setFollowingCount}
+                followingCount={user?.followingCount}
               />
             )}
           </div>

src/components/ProfileEditButton/ProfileEditButton.tsx

@@ -14,44 +14,39 @@ const ProfileEditButton = ({ user }: { user: UserProfileResBody }) => {
   const { currentUser } = useCurrentUser()
   const myId = currentUser?.memberId
   const { handleOpenCurrentModal } = useModal()
-  const { isFollowing, handleClickFollow } = useFollowUser({
-    memberId: user?.memberId || 0,
-    isInitFollowing: !!user?.isFollowing,
-    followingInitCount: user?.followingCount || 0,
-    followerInitCount: user?.followerCount || 0,
+  const { handleClickFollow } = useFollowUser({
+    profileId: user?.memberId || 0,
+    memberId: currentUser?.memberId || 0,
+    myId: myId || 0,
     handleOpenCurrentModal,
   })
 
-  return myId ? (
+  return (
     <Button
       type="button"
       onClick={() => {
         if (user?.memberId === myId) {
           router.push('/user/setting')
-        } else if (isFollowing) {
-          handleClickFollow(isFollowing)
+        } else if (user?.isFollowing) {
+          handleClickFollow(user?.isFollowing)
         } else {
-          handleClickFollow(isFollowing)
+          handleClickFollow(user?.isFollowing)
         }
       }}
       className={cls(
         'button button-md button-lg',
         getProfileButtonColor({
-          isFollowing,
+          isFollowing: user?.isFollowing,
           memberId: user?.memberId,
           myId,
         }),
       )}>
       {getProfileButtonText({
-        isFollowing,
+        isFollowing: user?.isFollowing,
         memberId: user?.memberId,
         myId,
       })}
     </Button>
-  ) : (
-    <DeferredComponent>
-      <Spinner />
-    </DeferredComponent>
   )
 }
 

src/components/common/FollowList/FollowList.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, Fragment, SetStateAction } from 'react'
+import { Fragment, useEffect } from 'react'
 import { Spinner } from '@/components'
 import useFollowQuery from '@/components/common/FollowList/hooks/useFollowQuery'
 import useInfiniteScroll from '@/hooks/useInfiniteScroll'
@@ -12,7 +12,6 @@ export interface FollowListProps {
   myId?: number
   type?: string
   followingCount?: number
-  setFollowingCount?: Dispatch<SetStateAction<number | undefined>>
 }
 
 export interface FollowUserProps {
@@ -29,7 +28,6 @@ const FollowList = ({
   myId,
   type,
   followingCount,
-  setFollowingCount,
 }: FollowListProps) => {
   const { followList, fetchNextPage, hasNextPage, isFollowLoading } =
     useFollowQuery({
@@ -38,11 +36,11 @@ const FollowList = ({
       type,
     })
   const { target } = useInfiniteScroll({ hasNextPage, fetchNextPage })
-
+  useEffect(() => {
+    console.log(isFollowLoading)
+  }, [isFollowLoading])
   return isFollowLoading ? (
-    <DeferredComponent>
-      <Spinner />
-    </DeferredComponent>
+    <Spinner />
   ) : (
     <ul className="flex flex-col gap-y-2">
       {followList &&
@@ -60,7 +58,6 @@ const FollowList = ({
                   followingCount={followingCount}
                   myId={myId}
                   profileId={memberId}
-                  setFollowingCount={setFollowingCount}
                 />
               </li>
             ))}

src/components/common/FollowList/hooks/useFollowQuery.ts

@@ -5,7 +5,7 @@ import { useInfiniteQuery } from '@tanstack/react-query'
 const useFollowQuery = ({ memberId, fetchFn, type }: FollowListProps) => {
   const queryKey =
     type === 'following' ? QUERY_KEYS.FOLLOWING : QUERY_KEYS.FOLLOWERS
-  const { data, fetchNextPage, hasNextPage, isLoading } = useInfiniteQuery({
+  const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery({
     queryKey: [queryKey, memberId],
     queryFn: ({ pageParam }) =>
       fetchFn({
@@ -22,7 +22,7 @@ const useFollowQuery = ({ memberId, fetchFn, type }: FollowListProps) => {
     followList: data,
     fetchNextPage,
     hasNextPage,
-    isFollowLoading: isLoading,
+    isFollowLoading: isFetching,
   }
 }
 

src/components/common/User/User.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { Dispatch, SetStateAction } from 'react'
 import { PROFILE_MSG } from '@/constants'
 import { useFollowUser, useModal } from '@/hooks'
 import { cls } from '@/utils'
@@ -14,12 +13,11 @@ interface UserProps {
   nickname: string
   profileImagePath: string
   aboutMe?: string
-  isFollowing?: boolean
+  isFollowing: boolean
   isAuth?: boolean
   followingCount?: number
   myId?: number
   profileId?: number
-  setFollowingCount?: Dispatch<SetStateAction<number | undefined>>
 }
 
 const User = ({
@@ -29,20 +27,16 @@ const User = ({
   aboutMe,
   isFollowing,
   isAuth,
-  followingCount,
   myId,
   profileId,
-  setFollowingCount,
 }: UserProps) => {
   const { Modal, isOpen, modalClose, currentModal, handleOpenCurrentModal } =
     useModal()
-  const { isFollowing: isFollowingValue, handleClickListInFollow } =
-    useFollowUser({
-      profileId: profileId || 0,
-      memberId: memberId || 0,
-      isInitFollowing: !!isFollowing,
-      followerInitCount: followingCount || 0,
-    })
+  const { handleClickListInFollow } = useFollowUser({
+    profileId: profileId || 0,
+    memberId: memberId || 0,
+    myId: myId || 0,
+  })
 
   return (
     <>
@@ -70,23 +64,16 @@ const User = ({
               type="button"
               className={cls(
                 'button px-2.5 py-1.5 text-sm',
-                isFollowingValue ? 'button-white' : 'button-emerald',
+                isFollowing ? 'button-white' : 'button-emerald',
               )}
               onClick={() => {
                 if (myId) {
-                  handleClickListInFollow(isFollowingValue)
-                  if (isFollowingValue) {
-                    profileId === myId &&
-                      setFollowingCount?.((prev) => prev! - 1)
-                  } else {
-                    profileId === myId &&
-                      setFollowingCount?.((prev) => prev! + 1)
-                  }
+                  handleClickListInFollow(isFollowing)
                 } else {
                   handleOpenCurrentModal('login')
                 }
               }}>
-              {isFollowingValue ? PROFILE_MSG.FOLLOWING : PROFILE_MSG.FOLLOW}
+              {isFollowing ? PROFILE_MSG.FOLLOWING : PROFILE_MSG.FOLLOW}
             </Button>
           </div>
         )}