File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-14
08-18
08-19
08-19
// FoxEmail — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// Figma form-email (136:3092 · 섹션 392:5820)
//
// 시안 구조는 **줄이 나뉜다** — [아이디] @ [도메인] 한 줄, 그 아래 도메인 드롭다운, 그 아래
// 선택적 확인 버튼(form-email 5543:9940: form-group 320×40 · select 320×40 · btn).
// 종전에는 넷을 한 줄에 두고 넘치면 접히게 했는데, 그러면 좁은 곳에서 드롭다운이 도메인 칸보다
// 먼저 접혀 시안과 순서가 어긋났다.
//
// 세 칸이 모두 input·select 인스턴스이고 버튼도 btn 인스턴스라, 이 파일은 줄 배치와 `@`
// 구분자만 갖는다 — 상자 모양과 상태는 FoxInput·FoxSelect가 가진 것을 쓴다.
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-email">
// <div class="fox-email__body">
// <div class="fox-email__group">
// <div class="fox-email__part">…fox-input(아이디)…</div>
// <span class="fox-email__at">@</span>
// <div class="fox-email__part">…fox-input(도메인)…</div>
// </div>
// …fox-select(도메인 목록)…
// <button class="fox-button …">확인</button> <!-- 선택 -->
// </div>
//
// 토큰이 아닌 값(사용자 승인):
// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
// export하지 않는다.
@use "abstracts" as fox;
@use "form-field" as field;
.fox-email {
@include field.root;
// 세 줄이 4px 간격으로 쌓인다(시안 form-group 0-40 · select 44-84).
&__body {
display: flex;
inline-size: 100%;
flex-direction: column;
gap: fox.gap(2);
}
// 아이디·@·도메인이 한 줄을 나눠 갖는다(시안 149 + @ + 149).
&__group {
display: flex;
align-items: center;
gap: fox.gap(2);
inline-size: 100%;
}
// 두 칸이 남는 폭을 똑같이 나눈다. `min-inline-size: 0`이 없으면 입력의 기본 폭 때문에
// 좁은 곳에서 넘친다.
&__part {
flex: 1 1 0;
min-inline-size: 0;
}
&__at {
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;
}
&__message {
@include field.message;
}
&__message-icon {
@include field.message-icon;
}
&:has([aria-invalid="true"]) .fox-email__message {
color: fox.color(font-system-danger);
}
}