File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
// FoxCertified — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// Figma form-certified (190:2017 · 섹션 392:5850)
//
// 세 줄이다. [전화번호 + 인증번호 받기] / [인증번호 입력 + 남은 시간] / [인증번호 확인].
// 전화번호는 combine 모양 그대로이고 두 버튼도 시안에서 btn 인스턴스라, 이 파일은 줄 배치와
// 인증번호 상자만 갖는다. 인증번호 상자를 FoxInput으로 쓰지 못한 이유는 오른쪽 남은 시간이
// 아이콘 슬롯(정사각 20px)보다 넓기 때문이다.
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-certified">
// <div class="fox-certified__row">
// <div class="fox-certified__phone">…fox-phone-number…</div>
// <button class="fox-button fox-button--secondary fox-button--md">인증번호 받기</button>
// </div>
// <div class="fox-certified__box">
// <input class="fox-certified__field" placeholder="인증번호 입력">
// <span class="fox-certified__timer">
// <span class="fox-certified__timer-icon">…svg…</span>
// <span class="fox-certified__timer-text">24:16</span>
// </span>
// </div>
// <button class="fox-button fox-button--primary fox-button--md fox-button--full-width">
// 인증번호 확인
// </button>
// </div>
//
// 인증번호 상자의 상태는 FoxInput과 같은 방식으로 브라우저가 판단한다 — 포커스는
// `:focus-within`, 비활성은 네이티브 속성. 시안에 상태 변형이 없어 고정 표기는 두지 않는다.
//
// 토큰이 아닌 값(FoxInput과 동일한 근거로 승인된 항목):
// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
// export하지 않는다.
// - box-sizing / flex: 구조 규칙.
@use "abstracts" as fox;
.fox-certified {
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%;
}
&__phone {
flex: 1 0 0;
min-inline-size: 0;
}
&__box {
box-sizing: border-box;
display: flex;
align-items: center;
gap: fox.gap(3);
inline-size: 100%;
block-size: fox.form(height-md);
padding-inline: fox.form(padding-md);
border: fox.border(1) solid fox.color(input-border);
border-radius: fox.form(radius-md);
background: fox.color(input-surface);
}
&__field {
flex: 1 0 0;
min-inline-size: 0;
margin: 0;
padding: 0;
border: none;
background: none;
color: fox.color(font-neutral-default);
font-family: fox.font-family(body);
font-size: fox.font-size(label-md);
font-weight: fox.font-weight(regular);
line-height: 1;
letter-spacing: -0.025em;
&::placeholder {
color: fox.color(font-neutral-subtler);
}
// 포커스는 상자 테두리가 표시하므로 기본 외곽선을 지운다.
&:focus {
outline: none;
}
&:disabled {
color: fox.color(font-neutral-disabled-strong);
cursor: default;
}
}
&__timer {
display: inline-flex;
flex-shrink: 0;
align-items: center;
gap: fox.gap(2);
color: fox.color(icon-system-warning-strong);
}
&__timer-icon {
display: inline-flex;
flex-shrink: 0;
> * {
inline-size: fox.icon(3);
block-size: fox.icon(3);
}
}
&__timer-text {
color: fox.color(font-system-warning);
font-family: fox.font-family(body);
font-size: fox.font-size(label-sm);
font-weight: fox.font-weight(regular);
line-height: 1;
letter-spacing: -0.025em;
text-align: end;
}
}
// ── 인증번호 상자 상태 ──────────────────────────────────────────────────────
// 뒤에 오는 규칙이 이긴다: 포커스 < 비활성.
.fox-certified__box:focus-within {
border-width: fox.border(2);
border-color: fox.color(input-border-active);
}
.fox-certified__box:has(.fox-certified__field:disabled) {
border-width: fox.border(1);
border-color: fox.color(input-border-disabled);
background: fox.color(input-surface-disabled);
}