From 192ee59785fe282999f4ff6c3a9d1c1afe373e8f Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Fri, 4 Apr 2025 01:39:38 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=ED=8C=94=EB=A1=9C=EC=9A=B0=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EB=94=94=EB=B0=94=EC=9A=B4=EC=8A=A4=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useFollowUser.ts | 40 ++++++++++++++------------------------
 1 file changed, 15 insertions(+), 25 deletions(-)

diff --git a/src/hooks/useFollowUser.ts b/src/hooks/useFollowUser.ts
index 039c0983..6da30ab3 100644
--- a/src/hooks/useFollowUser.ts
+++ b/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,23 +24,19 @@ 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],
   )
 
@@ -49,31 +44,26 @@ const useFollowUser = ({
     (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 {

From a50379d29d3eb763d5be930b688bf66f7d2af381 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Fri, 4 Apr 2025 01:45:22 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20id=EA=B0=80=20=EC=A1=B4=EC=9E=AC?=
 =?UTF-8?q?=ED=95=A0=20=EB=95=8C=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EB=90=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ProfileEditButton/ProfileEditButton.tsx   | 57 ++++++++++---------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/components/ProfileEditButton/ProfileEditButton.tsx b/src/components/ProfileEditButton/ProfileEditButton.tsx
index 01c9e281..9f54dd5a 100644
--- a/src/components/ProfileEditButton/ProfileEditButton.tsx
+++ b/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>
+      )}
+    </>
   )
 }
 

From 034f867b48c69362d61d88e13ec3a370fc583e82 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Fri, 4 Apr 2025 01:46:58 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=EB=A1=9C=EB=94=A9=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=EC=9D=BC=20=EB=95=8C=20=EC=9A=94=EC=86=8C=20=EC=9C=84?=
 =?UTF-8?q?=EC=97=90=20Spinner=EA=B0=80=20=EB=A0=8C=EB=8D=94=EB=A7=81=20?=
 =?UTF-8?q?=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(routes)/user/[userId]/page.tsx       | 85 +++++++++----------
 .../common/FollowList/FollowList.tsx          | 57 ++++++-------
 2 files changed, 68 insertions(+), 74 deletions(-)

diff --git a/src/app/(routes)/user/[userId]/page.tsx b/src/app/(routes)/user/[userId]/page.tsx
index df44e786..c5416c4e 100644
--- a/src/app/(routes)/user/[userId]/page.tsx
+++ b/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>
     </>
   )
 }
diff --git a/src/components/common/FollowList/FollowList.tsx b/src/components/common/FollowList/FollowList.tsx
index 9739f381..b8108500 100644
--- a/src/components/common/FollowList/FollowList.tsx
+++ b/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>
+    </>
   )
 }