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 ? ( - - ) : ( -
-
- {user?.profileImagePath && ( -
- -
- )} -
-
- {user?.nickname} -
-
- {user?.newsEmail} -
-
- -
+ {isUserLoading && } +
+
+ {user?.profileImagePath && ( +
+
-
- -
-
- {PROFILE_MSG.FAVORITE_CATEGORY} + )} +
+
+ {user?.nickname}
-
- +
+ {user?.newsEmail}
+
+ +
+
+
+ +
+
+ {PROFILE_MSG.FAVORITE_CATEGORY}
-
- {PROFILE_MSG.DESCRIPTION} -
-
- {user?.aboutMe} -
+ +
+
+
+
+ {PROFILE_MSG.DESCRIPTION}
+
{user?.aboutMe}
- )} +
) } 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 ( - + <> + {user?.memberId && myId && ( + + )} + ) } 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 ? ( - - ) : ( -
    - {followList && - followList.pages.map((group, i) => ( - - {group.responses?.map((user: FollowUserProps) => ( -
  • - -
  • - ))} -
    - ))} -
    -
+ + return ( + <> + {isFollowLoading && } +
    + {followList && + followList.pages.map((group, i) => ( + + {group.responses?.map((user: FollowUserProps) => ( +
  • + +
  • + ))} +
    + ))} +
    +
+ ) } 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 {