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 | 1x 1x 1x 1x 1x 9x 9x 9x 9x 9x 9x 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 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 | import { Icon, IconId } from '@/components/icon';
import { cn } from '@/lib/utils';
import { User } from '@/types/service/user';
const formatISO = (dateString: string) => {
const date = new Date(dateString);
const y = date.getFullYear();
const m = String(date.getMonth() + 1).padStart(2, '0');
const d = String(date.getDate()).padStart(2, '0');
return `${y}. ${m}. ${d}`;
};
interface Props {
user: User;
}
export const ProfileDescription = ({ user }: Props) => {
const listMap: {
label: string;
iconId: IconId;
value: string;
}[] = [
{
label: 'MBTI',
iconId: 'symbol',
value: user.mbti,
},
{
label: '가입 일자',
iconId: 'calendar-2',
value: formatISO(user.createdAt),
},
{
label: '모임 참여',
iconId: 'users-2',
value: `${user.groupJoinedCnt}회`,
},
{
label: '모임 생성',
iconId: 'map-pin-2',
value: `${user.groupCreatedCnt}회`,
},
];
const PLACEHOLDER = '-';
return (
<div className='bg-mono-white mt-6 flex flex-col gap-5 rounded-3xl px-6 py-6.25 shadow-md'>
{listMap.map((item) => (
<div key={item.label} className='flex flex-row items-center gap-4'>
<div className='flex-center size-10 rounded-xl bg-gray-100'>
<Icon id={item.iconId} className='text-mint-500 size-6' />
</div>
<div className='flex flex-col'>
<span className='text-text-xs-medium text-gray-500'>{item.label}</span>
<span
className={cn(
'text-text-md-semibold h-6 text-gray-700',
!item.value && 'text-text-md-regular text-gray-500',
)}
>
{item.value || PLACEHOLDER}
</span>
</div>
</div>
))}
</div>
);
};
|