diff --git a/src/entities/ideal_partner/api/__mock__/idealPartner.mock.ts b/src/entities/ideal_partner/api/__mock__/idealPartner.mock.ts index 61b39a9..2b7b2e6 100644 --- a/src/entities/ideal_partner/api/__mock__/idealPartner.mock.ts +++ b/src/entities/ideal_partner/api/__mock__/idealPartner.mock.ts @@ -9,7 +9,7 @@ export const MockIdealPartner: IdealPartner = { images: [], locations: 'IMPORTANT', religion: { religionCategory: 'ETC', religionName: '' }, - requiredOptions: [], + requiredOptions: ['나이', '지역'], smoking: { smokingAmount: '', smokingCategory: 'DOESNT_MATTER' }, style: '눈이 크신 분', toMatchMaker: '잘 부탁드립니다 !', diff --git a/src/entities/ideal_partner/ui/IdealPartnerProfile/IdealPartnerProfile.tsx b/src/entities/ideal_partner/ui/IdealPartnerProfile/IdealPartnerProfile.tsx index 602f651..f8a5df0 100644 --- a/src/entities/ideal_partner/ui/IdealPartnerProfile/IdealPartnerProfile.tsx +++ b/src/entities/ideal_partner/ui/IdealPartnerProfile/IdealPartnerProfile.tsx @@ -8,6 +8,8 @@ import { getReligionText } from '../../../profile/lib/getReligionText'; import { useProfileEditContext } from 'src/features/EditInfo/ProfileEditContext'; import { useTranslation } from 'react-i18next'; +const ImportantBadge = () => 중요; + export const IdealPartnerProfile = ({ profile }: { profile: IdealPartner }) => { const { t } = useTranslation(); @@ -18,27 +20,45 @@ export const IdealPartnerProfile = ({ profile }: { profile: IdealPartner }) => { const showBlankValue = value.canEdit; + const renderBadge = (key: string) => (profile.requiredOptions.includes(key) ? : <>); + return (
- { -
- onClickEdit?.('IDEAL_AGE')} /> - - {profile.ageRange ? `${profile.ageRange?.min}-${profile.ageRange?.max}` : '나이는 딱히 상관 없어요'} - -
- } - {(showBlankValue || profile.heightRange) && ( -
- onClickEdit?.('IDEAL_HEIGHT_STYLE')} /> - - {profile.heightRange?.min}cm - {profile.heightRange?.max}cm - + {(showBlankValue || profile.ageRange || profile.heightRange) && ( +
+ {(showBlankValue || profile.ageRange) && ( +
+ onClickEdit?.('IDEAL_AGE')} + suffix={renderBadge('나이')} + /> + + {profile.ageRange ? `${profile.ageRange?.min}-${profile.ageRange?.max}` : '나이는 딱히 상관 없어요'} + +
+ )} + {(showBlankValue || profile.heightRange) && ( +
+ onClickEdit?.('IDEAL_HEIGHT_STYLE')} + suffix={renderBadge('키 + 선호하는 스타일')} + /> + + {profile.heightRange?.min}cm - {profile.heightRange?.max}cm + +
+ )}
)} {(showBlankValue || profile.style) && (
- onClickEdit?.('IDEAL_HEIGHT_STYLE')} /> + onClickEdit?.('IDEAL_HEIGHT_STYLE')} + suffix={renderBadge('키 + 선호하는 스타일')} + /> {profile.style}
)} @@ -51,28 +71,48 @@ export const IdealPartnerProfile = ({ profile }: { profile: IdealPartner }) => {
)}
- onClickEdit?.('IDEAL_LOCATION')} /> + onClickEdit?.('IDEAL_LOCATION')} + suffix={renderBadge('지역')} + /> {t(`LOCATION_${profile.locations}`)}
- onClickEdit?.('IDEAL_HOBBY')} /> + onClickEdit?.('IDEAL_HOBBY')} + suffix={renderBadge('취미')} + />
{t(`HOBBY_${profile.hobbies}`)}
{(showBlankValue || profile.religion) && (
- onClickEdit?.('IDEAL_RELIGION')} /> + onClickEdit?.('IDEAL_RELIGION')} + suffix={renderBadge('종교')} + /> {getReligionText(profile.religion)}
)} {(showBlankValue || profile.drinking) && (
- onClickEdit?.('IDEAL_DRINKING')} /> + onClickEdit?.('IDEAL_DRINKING')} + suffix={renderBadge('음주 습관')} + /> {getDrinkingText(profile.drinking)}
)} {(showBlankValue || profile.smoking) && (
- onClickEdit?.('IDEAL_SMOKING')} /> + onClickEdit?.('IDEAL_SMOKING')} + suffix={renderBadge('흡연 여부')} + /> {getSmokingText(profile.smoking, 'IDEAL')}
)} diff --git a/src/shared/ui/Profile/Profile.module.css b/src/shared/ui/Profile/Profile.module.css index 504f5df..7fb7afe 100644 --- a/src/shared/ui/Profile/Profile.module.css +++ b/src/shared/ui/Profile/Profile.module.css @@ -26,6 +26,17 @@ align-items: center; } +.RequiredBadge { + background-color: var(--color-primary); + padding: 6px 12px; + border-radius: 16px; + color: #fff; + font-size: 12px; + font-weight: 600; + line-height: 12px; + margin-left: 3px; +} + .CellHeaderTitle { font-weight: 600; font-size: 14px; diff --git a/src/shared/ui/Profile/ProfileCellHeader.tsx b/src/shared/ui/Profile/ProfileCellHeader.tsx index 951bec6..8af9005 100644 --- a/src/shared/ui/Profile/ProfileCellHeader.tsx +++ b/src/shared/ui/Profile/ProfileCellHeader.tsx @@ -3,12 +3,22 @@ import { Edit } from 'src/shared/ui/icons'; import { Theme } from 'src/shared/styles/constants'; import { Button } from 'src/shared/ui/Button/Button'; import { useProfileEditContext } from 'src/features/EditInfo/ProfileEditContext'; +import { ReactElement } from 'react'; -export const ProfileCellHeader = ({ title, onClickEdit }: { title: string; onClickEdit?: () => void }) => { +export const ProfileCellHeader = ({ + title, + suffix, + onClickEdit, +}: { + title: string; + suffix?: ReactElement; + onClickEdit?: () => void; +}) => { const { canEdit } = useProfileEditContext(); return (
{title} + {suffix} {canEdit && onClickEdit && (