File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-18
08-18
08-14
08-19
08-19
08-14
08-14
08-18
08-18
08-14
08-18
08-18
08-19
08-19
// FoxPhoneNumber — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// Figma form-phonenumber (섹션 391:3156)
//
// 두 모양이 있다.
// - unit(136:2926): 상자 셋을 하이픈으로 잇는다. 앞자리는 선택, 뒤 둘은 입력이며
// 시안에서도 select·input 컴포넌트의 인스턴스라 그대로 조합한다. 그래서 이 파일은
// 줄 배치와 하이픈만 갖고, 상자 모양·상태는 FoxSelect·FoxInput이 가진 것을 쓴다.
// - combine(190:1772): 상자 하나 안에 세 칸을 두고 각 칸을 가운데 정렬한다. 이건
// 시안이 별도 상자라 여기서 직접 그린다.
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-phone-number" role="group" aria-labelledby="…">
// <span class="fox-phone-number__label" id="…">레이블</span>
// <div class="fox-phone-number__row"> <!-- unit -->
// <div class="fox-phone-number__part">…select…</div>
// <span class="fox-phone-number__separator">-</span>
// <div class="fox-phone-number__part">…input…</div>
// <span class="fox-phone-number__separator">-</span>
// <div class="fox-phone-number__part">…input…</div>
// </div>
// <div class="fox-phone-number__box"> <!-- combine -->
// <input class="fox-phone-number__segment">
// <span class="fox-phone-number__separator">-</span>
// …
// </div>
// <p class="fox-phone-number__message">…</p>
// </div>
//
// 상태는 FoxInput과 같은 두 갈래다(자동 / `data-state` 고정). combine 상자에만 규칙이
// 필요하다 — unit은 조각이 알아서 따라온다.
//
// 라벨·헬퍼·상자·알맹이와 두 갈래 상태는 `form-field` 믹스인이 갖는다.
//
// 시안에 크기 축이 없다. 상자는 md 하나뿐이다.
//
// 토큰이 아닌 값(FoxInput과 동일한 근거로 승인된 항목):
// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
// export하지 않는다.
// - flex / text-align: 구조 규칙.
@use "abstracts" as fox;
@use "form-field" as field;
.fox-phone-number {
@include field.root;
// ── unit ──────────────────────────────────────────────────────────────────
&__row {
display: flex;
align-items: center;
gap: fox.gap(2);
inline-size: 100%;
}
// 세 조각이 남는 폭을 똑같이 나눈다.
&__part {
flex: 1 0 0;
min-inline-size: 0;
}
&__separator {
flex-shrink: 0;
color: fox.color(font-neutral-default);
font-family: fox.font-family(body);
font-size: fox.font-size(body-md);
font-weight: fox.font-weight(regular);
line-height: 1.5;
letter-spacing: -0.025em;
}
// ── combine ───────────────────────────────────────────────────────────────
&__box {
@include field.box($gap: 2);
@include field.box-size(md);
}
&__segment {
text-align: center;
@include field.field($font-size: label-md);
}
&__message {
@include field.message;
}
&__message-icon {
@include field.message-icon;
}
}
// unit 모양은 조각(FoxSelect·FoxInput)이 제 상태를 갖고 있어 combine 상자에만 규칙이
// 필요하다. 다만 헬퍼 색은 두 모양 모두 물들어야 하므로 오류 표시를 넓게 본다 — unit에는
// `__segment`가 없다.
@include field.auto-states(
"fox-phone-number",
$field: "segment",
$invalid-within: "[aria-invalid=\"true\"]"
);
@include field.fixed-states("fox-phone-number", $field: "segment");