Skip to content

[Fix] 프로필 페이지 - description 레이아웃 개선 #178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Chiman2937 merged 3 commits into from
Dec 15, 2025
Merged

[Fix] 프로필 페이지 - description 레이아웃 개선 #178

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
02c9f82
fix: profileDescriptionBadge - MBTI value가 없을 때도 공간 차지하도록 수정
Chiman2937 Dec 14, 2025
36e2772
Merge branch 'main' into chiyoung-fix/profile-description
claudia99503 Dec 14, 2025
b2c9e26
Merge branch 'main' into chiyoung-fix/profile-description
Chiman2937 Dec 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion src/components/pages/user/profile/profile-description-badge/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Icon, IconId } from '@/components/icon';
import { cn } from '@/lib/utils';

export interface ProfileDescriptionBadgeProps {
label: string;
Expand All @@ -11,14 +12,23 @@ interface Props {
}

export const ProfileDescriptionBadge = ({ badgeItems }: Props) => {
const PLACEHOLDER = '-';

return (
<div className='flex flex-row items-center gap-4'>
<div className='flex-center size-10 rounded-xl bg-gray-100'>
<Icon id={badgeItems.iconId} className='text-mint-500 size-6' />
</div>
<div className='flex flex-col'>
<span className='text-text-xs-medium text-gray-500'>{badgeItems.label}</span>
<span className='text-text-md-semibold text-gray-700'>{badgeItems.value}</span>
<span
className={cn(
'text-text-md-semibold h-6 text-gray-700',
!badgeItems.value && 'text-text-md-regular text-gray-500',
)}
>
{badgeItems.value || PLACEHOLDER}
</span>
</div>
</div>
);
Expand Down