File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
// 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;
.fox-address {
display: flex;
flex-direction: column;
gap: fox.gap(3);
inline-size: 100%;
&__label {
color: fox.color(font-neutral-default);
font-family: fox.font-family(body);
font-size: fox.font-size(label-md);
font-weight: fox.font-weight(medium);
line-height: 1;
letter-spacing: -0.025em;
}
// 우편번호는 남는 폭을 먹고 버튼은 글자만큼만 차지한다.
&__row {
display: flex;
align-items: flex-start;
gap: fox.gap(3);
inline-size: 100%;
}
&__zip {
flex: 1 0 0;
min-inline-size: 0;
}
&__message {
display: flex;
gap: fox.number(3);
align-items: flex-start;
margin: 0;
color: fox.color(font-neutral-subtle);
font-family: fox.font-family(body);
font-size: fox.font-size(body-sm);
font-weight: fox.font-weight(regular);
line-height: 1.5;
letter-spacing: -0.025em;
}
&__message-icon {
display: inline-flex;
flex-shrink: 0;
align-items: flex-start;
padding-block-start: fox.padding(1);
> * {
inline-size: fox.icon(3);
block-size: fox.icon(3);
}
}
&:has([aria-invalid="true"]) .fox-address__message {
color: fox.color(font-system-danger);
}
}