Skip to content

Commit 21b8996

Browse files
dudwnsdudwns
authored
Merge pull request #348 from Team-TenTen/develop
[Release] v0.1.20
2 parents 31c5004 + 17fa4cc commit 21b8996

File tree

13 files changed

+189
-229
lines changed

13 files changed

+189
-229
lines changed

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
1+
'use client'
2+
13
import {
24
Avatar,
35
CategoryListItem,
46
FollowListButton,
57
ProfileEditButton,
8+
Spinner,
69
} from '@/components'
710
import { CATEGORIES_RENDER, PROFILE_MSG } from '@/constants'
8-
import { fetchGetUserProfile } from '@/services/users/useUsers'
11+
import { useGetUserProfile } from '@/services/users/useUsers'
912
import { UserLayoutProps } from './layout'
1013

11-
export default async function UserPage({
12-
params: { userId },
13-
}: UserLayoutProps) {
14-
const user = await fetchGetUserProfile({ memberId: userId })
14+
export default function UserPage({ params: { userId } }: UserLayoutProps) {
15+
const { data: user, isFetching: isUserLoading } = useGetUserProfile(
16+
Number(userId),
17+
)
1518

1619
return (
1720
<>
21+
{isUserLoading && <Spinner />}
1822
<div className="flex flex-col gap-4 px-4 py-6">
1923
<div className="flex gap-3">
2024
{user?.profileImagePath && (

‎src/components/FollowListButton/FollowListButton.tsx‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client'
22

33
import { PROFILE_MSG } from '@/constants'
4-
import { useFollowUser, useModal } from '@/hooks'
4+
import { useModal } from '@/hooks'
55
import { useCurrentUser } from '@/hooks/useCurrentUser'
66
import { fetchGetFollowers, fetchGetFollowing } from '@/services/users/useUsers'
77
import { UserProfileResBody } from '@/types'
@@ -13,13 +13,6 @@ const FollowListButton = ({ user }: { user: UserProfileResBody }) => {
1313
const myId = currentUser?.memberId
1414
const { Modal, isOpen, modalClose, currentModal, handleOpenCurrentModal } =
1515
useModal()
16-
const { followingCount, setFollowingCount, followerCount } = useFollowUser({
17-
memberId: user?.memberId || 0,
18-
isInitFollowing: !!user?.isFollowing,
19-
followingInitCount: user?.followingCount || 0,
20-
followerInitCount: user?.followerCount || 0,
21-
handleOpenCurrentModal,
22-
})
2316

2417
return (
2518
<>
@@ -28,15 +21,15 @@ const FollowListButton = ({ user }: { user: UserProfileResBody }) => {
2821
onClick={() => {
2922
handleOpenCurrentModal('following')
3023
}}>
31-
{PROFILE_MSG.FOLLOWING} {followingCount}
24+
{PROFILE_MSG.FOLLOWING} {user?.followingCount}
3225
</div>
3326
{PROFILE_MSG.LIST_DIVIDER}
3427
<div
3528
className="cursor-pointer hover:font-semibold"
3629
onClick={() => {
3730
handleOpenCurrentModal('follower')
3831
}}>
39-
{PROFILE_MSG.FOLLOWER} {followerCount}
32+
{PROFILE_MSG.FOLLOWER} {user?.followerCount}
4033
</div>
4134
{currentModal !== 'login' && isOpen && (
4235
<Modal
@@ -54,8 +47,7 @@ const FollowListButton = ({ user }: { user: UserProfileResBody }) => {
5447
fetchFn={fetchGetFollowing}
5548
myId={myId}
5649
type="following"
57-
followingCount={followingCount}
58-
setFollowingCount={setFollowingCount}
50+
followingCount={user?.followingCount}
5951
/>
6052
)}
6153
{currentModal === 'follower' && (
@@ -64,8 +56,7 @@ const FollowListButton = ({ user }: { user: UserProfileResBody }) => {
6456
fetchFn={fetchGetFollowers}
6557
myId={myId}
6658
type="follower"
67-
followingCount={followingCount}
68-
setFollowingCount={setFollowingCount}
59+
followingCount={user?.followingCount}
6960
/>
7061
)}
7162
</div>

‎src/components/PopularLink/PopularLinkList/PopularLinkList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ const PopularLinkList = () => {
5454
url={link.url}
5555
tagName={link.tagName}
5656
tagColor={link.tagColor as ChipColors}
57-
isInitLiked={link.isLiked}
58-
likeInitCount={link.likeCount}
57+
isLiked={link.isLiked}
58+
likeCount={link.likeCount}
5959
type="card"
6060
/>
6161
</SwiperSlide>

‎src/components/ProfileEditButton/ProfileEditButton.tsx‎

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -6,52 +6,50 @@ 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()
1412
const { currentUser } = useCurrentUser()
1513
const myId = currentUser?.memberId
1614
const { handleOpenCurrentModal } = useModal()
17-
const { isFollowing, handleClickFollow } = useFollowUser({
18-
memberId: user?.memberId || 0,
19-
isInitFollowing: !!user?.isFollowing,
20-
followingInitCount: user?.followingCount || 0,
21-
followerInitCount: user?.followerCount || 0,
15+
const { handleClickFollow } = useFollowUser({
16+
profileId: user?.memberId || 0,
17+
memberId: currentUser?.memberId || 0,
18+
myId: myId || 0,
2219
handleOpenCurrentModal,
2320
})
2421

25-
return myId ? (
26-
<Button
27-
type="button"
28-
onClick={() => {
29-
if (user?.memberId === myId) {
30-
router.push('/user/setting')
31-
} else if (isFollowing) {
32-
handleClickFollow(isFollowing)
33-
} else {
34-
handleClickFollow(isFollowing)
35-
}
36-
}}
37-
className={cls(
38-
'button button-md button-lg',
39-
getProfileButtonColor({
40-
isFollowing,
41-
memberId: user?.memberId,
42-
myId,
43-
}),
44-
)}>
45-
{getProfileButtonText({
46-
isFollowing,
47-
memberId: user?.memberId,
48-
myId,
49-
})}
50-
</Button>
51-
) : (
52-
<DeferredComponent>
53-
<Spinner />
54-
</DeferredComponent>
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+
34+
return (
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+
</>
5553
)
5654
}
5755

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

Lines changed: 28 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Dispatch, Fragment, SetStateAction } from 'react'
1+
import { Fragment, useEffect } from 'react'
22
import { Spinner } from '@/components'
33
import useFollowQuery from '@/components/common/FollowList/hooks/useFollowQuery'
44
import useInfiniteScroll from '@/hooks/useInfiniteScroll'
@@ -12,7 +12,6 @@ export interface FollowListProps {
1212
myId?: number
1313
type?: string
1414
followingCount?: number
15-
setFollowingCount?: Dispatch<SetStateAction<number | undefined>>
1615
}
1716

1817
export interface FollowUserProps {
@@ -29,7 +28,6 @@ const FollowList = ({
2928
myId,
3029
type,
3130
followingCount,
32-
setFollowingCount,
3331
}: FollowListProps) => {
3432
const { followList, fetchNextPage, hasNextPage, isFollowLoading } =
3533
useFollowQuery({
@@ -39,35 +37,33 @@ const FollowList = ({
3937
})
4038
const { target } = useInfiniteScroll({ hasNextPage, fetchNextPage })
4139

42-
return isFollowLoading ? (
43-
<DeferredComponent>
44-
<Spinner />
45-
</DeferredComponent>
46-
) : (
47-
<ul className="flex flex-col gap-y-2">
48-
{followList &&
49-
followList.pages.map((group, i) => (
50-
<Fragment key={i}>
51-
{group.responses?.map((user: FollowUserProps) => (
52-
<li key={user.memberId}>
53-
<User
54-
memberId={user.memberId}
55-
nickname={user.nickname}
56-
profileImagePath={user.profileImagePath}
57-
aboutMe={user.aboutMe}
58-
isFollowing={user.isFollowing}
59-
isAuth={myId === user.memberId}
60-
followingCount={followingCount}
61-
myId={myId}
62-
profileId={memberId}
63-
setFollowingCount={setFollowingCount}
64-
/>
65-
</li>
66-
))}
67-
</Fragment>
68-
))}
69-
<div ref={target}></div>
70-
</ul>
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+
</>
7167
)
7268
}
7369

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useInfiniteQuery } from '@tanstack/react-query'
55
const useFollowQuery = ({ memberId, fetchFn, type }: FollowListProps) => {
66
const queryKey =
77
type === 'following' ? QUERY_KEYS.FOLLOWING : QUERY_KEYS.FOLLOWERS
8-
const { data, fetchNextPage, hasNextPage, isLoading } = useInfiniteQuery({
8+
const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery({
99
queryKey: [queryKey, memberId],
1010
queryFn: ({ pageParam }) =>
1111
fetchFn({
@@ -22,7 +22,7 @@ const useFollowQuery = ({ memberId, fetchFn, type }: FollowListProps) => {
2222
followList: data,
2323
fetchNextPage,
2424
hasNextPage,
25-
isFollowLoading: isLoading,
25+
isFollowLoading: isFetching,
2626
}
2727
}
2828

‎src/components/common/LinkItem/LinkItem.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ export interface LinkItemProps {
4444
tagName: string
4545
tagColor: ChipColors
4646
readUsers?: linkViewHistories[]
47-
isInitLiked?: boolean
48-
likeInitCount: number
47+
isLiked: boolean
48+
likeCount: number
4949
read?: boolean
5050
summary?: boolean
5151
edit?: boolean
@@ -62,8 +62,8 @@ const LinkItem = ({
6262
tagName,
6363
tagColor,
6464
readUsers,
65-
isInitLiked,
66-
likeInitCount,
65+
isLiked,
66+
likeCount,
6767
read = false,
6868
summary = false,
6969
edit = false,
@@ -110,11 +110,9 @@ const LinkItem = ({
110110
linkId,
111111
})
112112
const { handleSaveReadInfo } = useReadSaveLink({ spaceId, linkId })
113-
const { isLiked, likeCount, handleClickLike } = useLikeLink({
113+
const { handleClickLike } = useLikeLink({
114114
spaceId,
115115
linkId,
116-
isLikedValue: isInitLiked,
117-
likeCountValue: likeInitCount,
118116
})
119117
return (
120118
<>

‎src/components/common/LinkItem/hooks/useLikeLink.ts‎

Lines changed: 14 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,35 @@
1-
import { useCallback, useMemo, useState } from 'react'
1+
import { useCallback } from 'react'
22
import { useDeleteLikeLink, usePostLikeLink } from '@/services/link/useLink'
3-
import { debounce } from 'lodash'
4-
import useToggle from '../../Toggle/hooks/useToggle'
53

64
export interface UseLikeLinkProps {
75
spaceId?: number
86
linkId: number
9-
isLikedValue?: boolean
10-
likeCountValue: number
117
}
128

13-
const useLikeLink = ({
14-
linkId,
15-
isLikedValue,
16-
likeCountValue,
17-
}: UseLikeLinkProps) => {
18-
const [isLiked, likeToggle] = useToggle(isLikedValue)
19-
const [likeCount, setLikeCount] = useState<number>(likeCountValue)
9+
const useLikeLink = ({ spaceId, linkId }: UseLikeLinkProps) => {
10+
const { mutate: deleteLikeLink } = useDeleteLikeLink({ spaceId })
11+
const { mutate: postLikeLink } = usePostLikeLink({ spaceId })
2012

21-
const { mutate: deleteLikeLink } = useDeleteLikeLink()
22-
const { mutate: postLikeLink } = usePostLikeLink()
13+
const handleRemoveLike = useCallback(() => {
14+
deleteLikeLink({ linkId })
15+
}, [deleteLikeLink, linkId])
2316

24-
const debounceUnLikeLink = useMemo(
25-
() =>
26-
debounce(async () => {
27-
await deleteLikeLink({ linkId })
28-
}, 300),
29-
[deleteLikeLink, linkId],
30-
)
31-
32-
const debounceLikeLink = useMemo(
33-
() =>
34-
debounce(async () => {
35-
await postLikeLink({ linkId })
36-
}, 300),
37-
[postLikeLink, linkId],
38-
)
17+
const handleAddLike = useCallback(() => {
18+
postLikeLink({ linkId })
19+
}, [postLikeLink, linkId])
3920

4021
const handleClickLike = useCallback(
4122
(isLike: boolean) => {
42-
likeToggle()
4323
if (isLike) {
44-
setLikeCount((prev) => prev - 1)
45-
debounceUnLikeLink()
24+
handleRemoveLike()
4625
} else {
47-
setLikeCount((prev) => prev + 1)
48-
debounceLikeLink()
26+
handleAddLike()
4927
}
5028
},
51-
[likeToggle, debounceUnLikeLink, debounceLikeLink],
29+
[handleRemoveLike, handleAddLike],
5230
)
5331

54-
return { isLiked, likeCount, handleClickLike }
32+
return { handleClickLike }
5533
}
5634

5735
export default useLikeLink

0 commit comments

Comments
 (0)