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
// FoxStepIndicator — 시안: 통합관리자페이지 디자인시스템 Figma step-indicator
//
// `fox-step-indicator-item`들을 가로로 늘어놓는 묶음이다. 배치만 갖는다 — 어디까지 왔는지는 각 단계가 말한다.
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-step-indicator" role="group" aria-label="가입 절차">
// …fox-step-indicator-item (completion)…
// …fox-step-indicator-item (ongoing)…
// …fox-step-indicator-item (before, 마지막이면 선 없이)…
// </div>
//
// 토큰이 아닌 값:
// - ⚠️ `inline-size: 40rem`(400px): 시안 값 그대로다. 80px × 5단계라 **단계가 다섯 개일 때의
// 폭**이고, 개수가 다르면 맞지 않는다. 토큰 스케일에도 400이 없다. 단계 수가 다른 화면은
// 호출부가 `className`으로 덮는다 — 시안에서 폭 규칙을 받으면 그 값으로 바꾼다.
// - display / align-items: 구조 규칙.
//
// 세로 정렬이 `center`라 글자가 있는 화면과 없는 화면(모바일)에서 동그라미 줄이 같은 높이에
// 놓인다.
@use "@fox/styles/abstracts" as fox;
.fox-step-indicator {
box-sizing: border-box;
display: flex;
align-items: center;
inline-size: 40rem;
// 모바일에서는 글자가 사라져 폭이 남는다 — 고정 폭을 풀어 화면에 맞춘다
// (`fox-step-indicator-item`의 `__text`가 숨는 것과 짝이다).
@include fox.mobile {
inline-size: 100%;
}
}