Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 9x 9x 9x 9x 9x 18x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x | import { useEffect } from 'react';
import { Fragment } from 'react/jsx-runtime';
import { useQueryClient } from '@tanstack/react-query';
import { API } from '@/api';
import { useModal } from '@/components/ui';
import { followKeys } from '@/lib/query-key/query-key-follow';
import { FollowType } from '@/types/service/follow';
import { User } from '@/types/service/user';
import { ProfileFollowsModal } from '../profile-follows-modal';
interface Props {
user: User;
}
export const ProfileFollowsBadge = ({ user }: Props) => {
const { open } = useModal();
const queryClient = useQueryClient();
const listMap: {
label: string;
type: FollowType;
value: string;
}[] = [
{
label: '팔로워',
type: 'followers',
value: user.followersCnt.toLocaleString(),
},
{
label: '팔로잉',
type: 'followees',
value: user.followeesCnt.toLocaleString(),
},
];
const listLength = listMap.length;
const handleFollowsBadgeClick = (type: FollowType) => {
open(<ProfileFollowsModal type={type} user={user} />);
};
// 팔로워/팔로우 모달 정보를 미리 불러옴
useEffect(() => {
const prefetch = async () => {
await Promise.all([
queryClient.prefetchInfiniteQuery({
queryFn: () => API.followerService.getFollowerList({ userId: user.userId }),
queryKey: followKeys.followers(user.userId),
initialPageParam: undefined,
}),
queryClient.prefetchInfiniteQuery({
queryFn: () => API.followerService.getFolloweeList({ userId: user.userId }),
queryKey: followKeys.followees(user.userId),
initialPageParam: undefined,
}),
]);
};
prefetch();
}, [queryClient, user.userId]);
return (
<div className='flex-center bg-mono-white mb-4 rounded-3xl py-4 shadow-sm'>
{listMap.map((item, index) => (
<Fragment key={item.label}>
<button
className='flex-col-center group mx-4 w-full cursor-pointer gap-0.75 py-0.75'
onClick={() => handleFollowsBadgeClick(item.type)}
>
<span className='text-text-xl-bold group-hover:text-mint-500 text-gray-800 transition-colors duration-300'>
{item.value}
</span>
<span className='text-text-xs-medium text-gray-500'>{item.label}</span>
</button>
{index < listLength - 1 && <div className='h-10 w-1 border-r-1 border-gray-200' />}
</Fragment>
))}
</div>
);
};
|