Skip to content

Commit 17fa4cc

Browse files
dudwnsdudwns
authored
Merge pull request #347 from Team-TenTen/feature/#346/loading
페이지 로딩 개선
2 parents 7daef9a + 034f867 commit 17fa4cc

4 files changed

Lines changed: 113 additions & 126 deletions

File tree

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

Lines changed: 40 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -18,58 +18,53 @@ export default function UserPage({ params: { userId } }: UserLayoutProps) {
1818

1919
return (
2020
<>
21-
{isUserLoading ? (
22-
<Spinner />
23-
) : (
24-
<div className="flex flex-col gap-4 px-4 py-6">
25-
<div className="flex gap-3">
26-
{user?.profileImagePath && (
27-
<div className="relative h-20 w-20">
28-
<Avatar
29-
src={user.profileImagePath}
30-
alt="profile"
31-
/>
32-
</div>
33-
)}
34-
<div className="flex flex-col gap-1 py-0.5">
35-
<div className="text-xl font-semibold text-gray9">
36-
{user?.nickname}
37-
</div>
38-
<div className="text-xs font-medium text-gray6">
39-
{user?.newsEmail}
40-
</div>
41-
<div className="flex gap-1 text-xs font-medium text-gray6">
42-
<FollowListButton user={user} />
43-
</div>
21+
{isUserLoading && <Spinner />}
22+
<div className="flex flex-col gap-4 px-4 py-6">
23+
<div className="flex gap-3">
24+
{user?.profileImagePath && (
25+
<div className="relative h-20 w-20">
26+
<Avatar
27+
src={user.profileImagePath}
28+
alt="profile"
29+
/>
4430
</div>
45-
</div>
46-
<ProfileEditButton user={user} />
47-
<div className="flex flex-col ">
48-
<div className="py-3 text-sm font-semibold text-gray9">
49-
{PROFILE_MSG.FAVORITE_CATEGORY}
31+
)}
32+
<div className="flex flex-col gap-1 py-0.5">
33+
<div className="text-xl font-semibold text-gray9">
34+
{user?.nickname}
5035
</div>
51-
<div>
52-
<CategoryListItem
53-
label={
54-
user?.favoriteCategory
55-
? CATEGORIES_RENDER[user.favoriteCategory]
56-
: '없음'
57-
}
58-
active={true}
59-
disabled={true}
60-
/>
36+
<div className="text-xs font-medium text-gray6">
37+
{user?.newsEmail}
6138
</div>
39+
<div className="flex gap-1 text-xs font-medium text-gray6">
40+
<FollowListButton user={user} />
41+
</div>
42+
</div>
43+
</div>
44+
<ProfileEditButton user={user} />
45+
<div className="flex flex-col ">
46+
<div className="py-3 text-sm font-semibold text-gray9">
47+
{PROFILE_MSG.FAVORITE_CATEGORY}
6248
</div>
6349
<div>
64-
<div className="py-3 text-sm font-semibold text-gray9">
65-
{PROFILE_MSG.DESCRIPTION}
66-
</div>
67-
<div className="text-sm font-normal text-gray9">
68-
{user?.aboutMe}
69-
</div>
50+
<CategoryListItem
51+
label={
52+
user?.favoriteCategory
53+
? CATEGORIES_RENDER[user.favoriteCategory]
54+
: '없음'
55+
}
56+
active={true}
57+
disabled={true}
58+
/>
59+
</div>
60+
</div>
61+
<div>
62+
<div className="py-3 text-sm font-semibold text-gray9">
63+
{PROFILE_MSG.DESCRIPTION}
7064
</div>
65+
<div className="text-sm font-normal text-gray9">{user?.aboutMe}</div>
7166
</div>
72-
)}
67+
</div>
7368
</>
7469
)
7570
}

‎src/components/ProfileEditButton/ProfileEditButton.tsx‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ import { UserProfileResBody } from '@/types'
66
import { cls, getProfileButtonColor, getProfileButtonText } from '@/utils'
77
import { useRouter } from 'next/navigation'
88
import Button from '../common/Button/Button'
9-
import DeferredComponent from '../common/DeferedComponent/DeferedComponent'
10-
import Spinner from '../common/Spinner/Spinner'
119

1210
const ProfileEditButton = ({ user }: { user: UserProfileResBody }) => {
1311
const router = useRouter()
@@ -21,32 +19,37 @@ const ProfileEditButton = ({ user }: { user: UserProfileResBody }) => {
2119
handleOpenCurrentModal,
2220
})
2321

22+
const buttonColor = getProfileButtonColor({
23+
isFollowing: user?.isFollowing,
24+
memberId: user?.memberId,
25+
myId,
26+
})
27+
28+
const buttonText = getProfileButtonText({
29+
isFollowing: user?.isFollowing,
30+
memberId: user?.memberId,
31+
myId,
32+
})
33+
2434
return (
25-
<Button
26-
type="button"
27-
onClick={() => {
28-
if (user?.memberId === myId) {
29-
router.push('/user/setting')
30-
} else if (user?.isFollowing) {
31-
handleClickFollow(user?.isFollowing)
32-
} else {
33-
handleClickFollow(user?.isFollowing)
34-
}
35-
}}
36-
className={cls(
37-
'button button-md button-lg',
38-
getProfileButtonColor({
39-
isFollowing: user?.isFollowing,
40-
memberId: user?.memberId,
41-
myId,
42-
}),
43-
)}>
44-
{getProfileButtonText({
45-
isFollowing: user?.isFollowing,
46-
memberId: user?.memberId,
47-
myId,
48-
})}
49-
</Button>
35+
<>
36+
{user?.memberId && myId && (
37+
<Button
38+
type="button"
39+
onClick={() => {
40+
if (user?.memberId === myId) {
41+
router.push('/user/setting')
42+
} else if (user?.isFollowing) {
43+
handleClickFollow(user?.isFollowing)
44+
} else {
45+
handleClickFollow(user?.isFollowing)
46+
}
47+
}}
48+
className={cls('button button-md button-lg', buttonColor)}>
49+
{buttonText}
50+
</Button>
51+
)}
52+
</>
5053
)
5154
}
5255

‎src/components/common/FollowList/FollowList.tsx‎

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -36,35 +36,34 @@ const FollowList = ({
3636
type,
3737
})
3838
const { target } = useInfiniteScroll({ hasNextPage, fetchNextPage })
39-
useEffect(() => {
40-
console.log(isFollowLoading)
41-
}, [isFollowLoading])
42-
return isFollowLoading ? (
43-
<Spinner />
44-
) : (
45-
<ul className="flex flex-col gap-y-2">
46-
{followList &&
47-
followList.pages.map((group, i) => (
48-
<Fragment key={i}>
49-
{group.responses?.map((user: FollowUserProps) => (
50-
<li key={user.memberId}>
51-
<User
52-
memberId={user.memberId}
53-
nickname={user.nickname}
54-
profileImagePath={user.profileImagePath}
55-
aboutMe={user.aboutMe}
56-
isFollowing={user.isFollowing}
57-
isAuth={myId === user.memberId}
58-
followingCount={followingCount}
59-
myId={myId}
60-
profileId={memberId}
61-
/>
62-
</li>
63-
))}
64-
</Fragment>
65-
))}
66-
<div ref={target}></div>
67-
</ul>
39+
40+
return (
41+
<>
42+
{isFollowLoading && <Spinner />}
43+
<ul className="flex flex-col gap-y-2">
44+
{followList &&
45+
followList.pages.map((group, i) => (
46+
<Fragment key={i}>
47+
{group.responses?.map((user: FollowUserProps) => (
48+
<li key={user.memberId}>
49+
<User
50+
memberId={user.memberId}
51+
nickname={user.nickname}
52+
profileImagePath={user.profileImagePath}
53+
aboutMe={user.aboutMe}
54+
isFollowing={user.isFollowing}
55+
isAuth={myId === user.memberId}
56+
followingCount={followingCount}
57+
myId={myId}
58+
profileId={memberId}
59+
/>
60+
</li>
61+
))}
62+
</Fragment>
63+
))}
64+
<div ref={target}></div>
65+
</ul>
66+
</>
6867
)
6968
}
7069

‎src/hooks/useFollowUser.ts‎

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { useCallback, useMemo } from 'react'
1+
import { useCallback } from 'react'
22
import { useDeleteFollow, usePostFollow } from '@/services/users/useUsers'
3-
import { debounce } from 'lodash'
43
import { useCurrentUser } from './useCurrentUser'
54

65
export interface UseFollowUserProps {
@@ -25,55 +24,46 @@ const useFollowUser = ({
2524
: profileId
2625
: memberId
2726

28-
const debounceUnFollowUser = useMemo(
27+
const handleRemoveFollow = useCallback(
2928
() =>
30-
debounce(async () => {
31-
await deleteFollow({
32-
memberId: targetMemberId,
33-
})
34-
}, 300),
29+
deleteFollow({
30+
memberId: targetMemberId,
31+
}),
3532
[targetMemberId, deleteFollow],
3633
)
3734

38-
const debounceFollowUser = useMemo(
35+
const handleAddFollow = useCallback(
3936
() =>
40-
debounce(async () => {
41-
await postFollow({
42-
memberId: targetMemberId,
43-
})
44-
}, 300),
37+
postFollow({
38+
memberId: targetMemberId,
39+
}),
4540
[targetMemberId, postFollow],
4641
)
4742

4843
const handleClickFollow = useCallback(
4944
(isFollowing: boolean) => {
5045
if (isLoggedIn) {
5146
if (isFollowing) {
52-
debounceUnFollowUser()
47+
handleRemoveFollow()
5348
} else {
54-
debounceFollowUser()
49+
handleAddFollow()
5550
}
5651
} else {
5752
handleOpenCurrentModal?.('login')
5853
}
5954
},
60-
[
61-
debounceUnFollowUser,
62-
debounceFollowUser,
63-
isLoggedIn,
64-
handleOpenCurrentModal,
65-
],
55+
[handleRemoveFollow, handleAddFollow, isLoggedIn, handleOpenCurrentModal],
6656
)
6757

6858
const handleClickListInFollow = useCallback(
6959
(isFollowing: boolean) => {
7060
if (isFollowing) {
71-
debounceUnFollowUser()
61+
handleRemoveFollow()
7262
} else {
73-
debounceFollowUser()
63+
handleAddFollow()
7464
}
7565
},
76-
[debounceUnFollowUser, debounceFollowUser],
66+
[handleRemoveFollow, handleAddFollow],
7767
)
7868

7969
return {

0 commit comments

Comments
 (0)