페이지 로딩 개선

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

@@ -18,58 +18,53 @@ export default function UserPage({ params: { userId } }: UserLayoutProps) {
 
   return (
     <>
-      {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>
+      {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>
-          <ProfileEditButton user={user} />
-          <div className="flex flex-col ">
-            <div className="py-3 text-sm font-semibold text-gray9">
-              {PROFILE_MSG.FAVORITE_CATEGORY}
+          )}
+          <div className="flex flex-col gap-1 py-0.5">
+            <div className="text-xl font-semibold text-gray9">
+              {user?.nickname}
             </div>
-            <div>
-              <CategoryListItem
-                label={
-                  user?.favoriteCategory
-                    ? CATEGORIES_RENDER[user.favoriteCategory]
-                    : '없음'
-                }
-                active={true}
-                disabled={true}
-              />
+            <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>
+        <ProfileEditButton user={user} />
+        <div className="flex flex-col ">
+          <div className="py-3 text-sm font-semibold text-gray9">
+            {PROFILE_MSG.FAVORITE_CATEGORY}
           </div>
           <div>
-            <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>
+            <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>
+          <div className="text-sm font-normal text-gray9">{user?.aboutMe}</div>
         </div>
-      )}
+      </div>
     </>
   )
 }

src/components/ProfileEditButton/ProfileEditButton.tsx

@@ -6,8 +6,6 @@ import { UserProfileResBody } from '@/types'
 import { cls, getProfileButtonColor, getProfileButtonText } from '@/utils'
 import { useRouter } from 'next/navigation'
 import Button from '../common/Button/Button'
-import DeferredComponent from '../common/DeferedComponent/DeferedComponent'
-import Spinner from '../common/Spinner/Spinner'
 
 const ProfileEditButton = ({ user }: { user: UserProfileResBody }) => {
   const router = useRouter()
@@ -21,32 +19,37 @@ const ProfileEditButton = ({ user }: { user: UserProfileResBody }) => {
     handleOpenCurrentModal,
   })
 
+  const buttonColor = getProfileButtonColor({
+    isFollowing: user?.isFollowing,
+    memberId: user?.memberId,
+    myId,
+  })
+
+  const buttonText = getProfileButtonText({
+    isFollowing: user?.isFollowing,
+    memberId: user?.memberId,
+    myId,
+  })
+
   return (
-    <Button
-      type="button"
-      onClick={() => {
-        if (user?.memberId === myId) {
-          router.push('/user/setting')
-        } else if (user?.isFollowing) {
-          handleClickFollow(user?.isFollowing)
-        } else {
-          handleClickFollow(user?.isFollowing)
-        }
-      }}
-      className={cls(
-        'button button-md button-lg',
-        getProfileButtonColor({
-          isFollowing: user?.isFollowing,
-          memberId: user?.memberId,
-          myId,
-        }),
-      )}>
-      {getProfileButtonText({
-        isFollowing: user?.isFollowing,
-        memberId: user?.memberId,
-        myId,
-      })}
-    </Button>
+    <>
+      {user?.memberId && myId && (
+        <Button
+          type="button"
+          onClick={() => {
+            if (user?.memberId === myId) {
+              router.push('/user/setting')
+            } else if (user?.isFollowing) {
+              handleClickFollow(user?.isFollowing)
+            } else {
+              handleClickFollow(user?.isFollowing)
+            }
+          }}
+          className={cls('button button-md button-lg', buttonColor)}>
+          {buttonText}
+        </Button>
+      )}
+    </>
   )
 }
 

src/components/common/FollowList/FollowList.tsx

@@ -36,35 +36,34 @@ const FollowList = ({
       type,
     })
   const { target } = useInfiniteScroll({ hasNextPage, fetchNextPage })
-  useEffect(() => {
-    console.log(isFollowLoading)
-  }, [isFollowLoading])
-  return isFollowLoading ? (
-    <Spinner />
-  ) : (
-    <ul className="flex flex-col gap-y-2">
-      {followList &&
-        followList.pages.map((group, i) => (
-          <Fragment key={i}>
-            {group.responses?.map((user: FollowUserProps) => (
-              <li key={user.memberId}>
-                <User
-                  memberId={user.memberId}
-                  nickname={user.nickname}
-                  profileImagePath={user.profileImagePath}
-                  aboutMe={user.aboutMe}
-                  isFollowing={user.isFollowing}
-                  isAuth={myId === user.memberId}
-                  followingCount={followingCount}
-                  myId={myId}
-                  profileId={memberId}
-                />
-              </li>
-            ))}
-          </Fragment>
-        ))}
-      <div ref={target}></div>
-    </ul>
+
+  return (
+    <>
+      {isFollowLoading && <Spinner />}
+      <ul className="flex flex-col gap-y-2">
+        {followList &&
+          followList.pages.map((group, i) => (
+            <Fragment key={i}>
+              {group.responses?.map((user: FollowUserProps) => (
+                <li key={user.memberId}>
+                  <User
+                    memberId={user.memberId}
+                    nickname={user.nickname}
+                    profileImagePath={user.profileImagePath}
+                    aboutMe={user.aboutMe}
+                    isFollowing={user.isFollowing}
+                    isAuth={myId === user.memberId}
+                    followingCount={followingCount}
+                    myId={myId}
+                    profileId={memberId}
+                  />
+                </li>
+              ))}
+            </Fragment>
+          ))}
+        <div ref={target}></div>
+      </ul>
+    </>
   )
 }
 

src/hooks/useFollowUser.ts

@@ -1,6 +1,5 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback } from 'react'
 import { useDeleteFollow, usePostFollow } from '@/services/users/useUsers'
-import { debounce } from 'lodash'
 import { useCurrentUser } from './useCurrentUser'
 
 export interface UseFollowUserProps {
@@ -25,55 +24,46 @@ const useFollowUser = ({
       : profileId
     : memberId
 
-  const debounceUnFollowUser = useMemo(
+  const handleRemoveFollow = useCallback(
     () =>
-      debounce(async () => {
-        await deleteFollow({
-          memberId: targetMemberId,
-        })
-      }, 300),
+      deleteFollow({
+        memberId: targetMemberId,
+      }),
     [targetMemberId, deleteFollow],
   )
 
-  const debounceFollowUser = useMemo(
+  const handleAddFollow = useCallback(
     () =>
-      debounce(async () => {
-        await postFollow({
-          memberId: targetMemberId,
-        })
-      }, 300),
+      postFollow({
+        memberId: targetMemberId,
+      }),
     [targetMemberId, postFollow],
   )
 
   const handleClickFollow = useCallback(
     (isFollowing: boolean) => {
       if (isLoggedIn) {
         if (isFollowing) {
-          debounceUnFollowUser()
+          handleRemoveFollow()
         } else {
-          debounceFollowUser()
+          handleAddFollow()
         }
       } else {
         handleOpenCurrentModal?.('login')
       }
     },
-    [
-      debounceUnFollowUser,
-      debounceFollowUser,
-      isLoggedIn,
-      handleOpenCurrentModal,
-    ],
+    [handleRemoveFollow, handleAddFollow, isLoggedIn, handleOpenCurrentModal],
   )
 
   const handleClickListInFollow = useCallback(
     (isFollowing: boolean) => {
       if (isFollowing) {
-        debounceUnFollowUser()
+        handleRemoveFollow()
       } else {
-        debounceFollowUser()
+        handleAddFollow()
       }
     },
-    [debounceUnFollowUser, debounceFollowUser],
+    [handleRemoveFollow, handleAddFollow],
   )
 
   return {