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
// FoxAddress — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// Figma form-address (5346:5823 · 섹션 5383:8863)
//
// [우편번호 + 주소 검색] / [주소] / [상세주소]. 시안에서 세 상자가 모두 input 인스턴스이고
// 버튼도 btn 인스턴스라, 이 파일은 줄 배치만 갖는다 — 상자 모양과 상태는 FoxInput이 가진
// 것을 쓴다.
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-address">
// <div class="fox-address__row">
// <div class="fox-address__zip">…fox-input (읽기 전용)…</div>
// <button class="fox-button fox-button--secondary fox-button--md">주소 검색</button>
// </div>
// …fox-input (주소, 읽기 전용)…
// …fox-input (상세주소)…
// </div>
//
// 우편번호와 주소는 검색 결과로만 채워진다 — 손으로 고칠 수 없다. 상세주소만 입력한다.
//
// 토큰이 아닌 값:
// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
// export하지 않는다.
@use "abstracts" as fox;
@use "form-field" as field;
.fox-address {
@include field.root;
// 우편번호는 남는 폭을 먹고 버튼은 글자만큼만 차지한다.
&__row {
display: flex;
align-items: flex-start;
gap: fox.gap(3);
inline-size: 100%;
}
&__zip {
flex: 1 0 0;
min-inline-size: 0;
}
&__message {
@include field.message;
}
&__message-icon {
@include field.message-icon;
}
&:has([aria-invalid="true"]) .fox-address__message {
color: fox.color(font-system-danger);
}
}