feat(subscription): 프로필 완성도 힌트 배너 추가

소득·면적·예산·자치구 티어 중 미입력 항목이 있으면
프로필 패널 상단에 입력 권장 안내 배너 표시.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-01 10:31:37 +09:00
parent 8514232775
commit abd8762b5c
2 changed files with 35 additions and 0 deletions

View File

@@ -1085,6 +1085,21 @@
line-height: 1.4; line-height: 1.4;
} }
.sub-profile-hint {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 14px;
background: color-mix(in srgb, var(--accent-cyan) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--accent-cyan) 25%, transparent);
border-radius: var(--radius-sm);
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
margin: 0 16px 4px;
}
.sub-profile-hint__icon { flex-shrink: 0; font-size: 14px; }
.sub-form-input { .sub-form-input {
background: var(--bg-tertiary); background: var(--bg-tertiary);
border: 1px solid var(--line); border: 1px solid var(--line);

View File

@@ -1243,6 +1243,26 @@ function ProfileTab() {
</div> </div>
</div> </div>
{/* 프로필 완성도 힌트 */}
{(() => {
const missing = [];
if (!profile.income_level) missing.push('소득 수준');
if (!profile.min_area || !profile.max_area) missing.push('희망 면적');
if (!profile.max_price) missing.push('최대 예산');
const hasDistricts = profile.preferred_districts &&
Object.values(profile.preferred_districts).some(arr => arr?.length > 0);
if (!hasDistricts) missing.push('자치구 티어');
if (missing.length === 0) return null;
return (
<div className="sub-profile-hint">
<span className="sub-profile-hint__icon">💡</span>
<span>
<strong>매칭 정확도 개선 가능</strong> {missing.join(', ')} 입력 정확한 점수를 산출합니다.
</span>
</div>
);
})()}
<div className="sub-modal__form"> <div className="sub-modal__form">
{/* 기본 정보 */} {/* 기본 정보 */}
<div className="sub-form-section" style={{ borderBottom: '1px solid var(--line)' }}> <div className="sub-form-section" style={{ borderBottom: '1px solid var(--line)' }}>