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 | 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 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 9x 9x 6x 6x 6x 1x 1x 1x 6x 6x 6x 6x 9x 9x 9x 9x 9x 9x 9x 9x 9x | import { useRouter } from 'next/navigation';
import { ImageWithFallback } from '@/components/ui';
import { cn } from '@/lib/utils';
interface FollowingCardProps {
userId: number;
nickname: string;
profileImage: string;
profileMessage: string;
type: 'following' | 'message';
count?: number;
onMessageClick?: () => void;
}
export const FollowingCard = ({
userId,
nickname,
profileImage,
profileMessage,
type,
count = 0,
onMessageClick,
}: FollowingCardProps) => {
const router = useRouter();
const handleClick = () => {
router.push(`/profile/${userId}`);
};
return (
<div
data-testid='following-card'
className='flex cursor-pointer items-center gap-3 bg-white p-5 hover:bg-gray-50'
onClick={handleClick}
>
<div className='relative size-12 overflow-hidden rounded-full'>
<ImageWithFallback
className='object-cover'
alt='프로필 이미지'
fill
loading='eager'
src={profileImage}
/>
</div>
<div className='flex flex-1 flex-col'>
<span className='text-text-md-bold text-gray-800'>{nickname}</span>
<span
className={cn(
'text-text-sm-medium line-clamp-1',
type === 'following' && 'text-gray-500',
type === 'message' && 'text-gray-700',
)}
>
{profileMessage}
</span>
</div>
{/* 탭이 following 인지 message인지에 따라 달라지는 요소. */}
{type === 'following' ? (
<button
className='text-text-xs-semibold cursor-pointer rounded-lg bg-gray-100 px-5 py-1 text-gray-800 transition hover:opacity-80'
onClick={(e) => {
e.stopPropagation();
onMessageClick?.();
}}
>
메세지
</button>
) : (
<span
className={`bg-mint-500 text-mono-white text-text-xs-bold rounded-full px-2 py-0.5 ${count === 0 ? 'opacity-0' : ''} `}
>
{count > 99 ? '99+' : count}
</span>
)}
</div>
);
};
|