Code - nbnloper/edupay-admin

// FoxStepIndicatorItem — 시안: 통합관리자페이지 디자인시스템 Figma step // // 단계 하나. 위에 동그라미와 선(인디케이터), 아래에 단계 번호와 제목이 놓인다. // // 마크업 계약 (React 밖 소비자용): // <div class="fox-step-indicator-item fox-step-indicator-item--ongoing"> // <div class="fox-step-indicator-item__indicator" aria-hidden="true"> // <span class="fox-step-indicator-item__mark"><span class="fox-step-indicator-item__dot"></span></span> // <span class="fox-step-indicator-item__line"></span>  // </div> // <div class="fox-step-indicator-item__text">  // <span class="fox-step-indicator-item__step">STEP 01</span> // <span class="fox-step-indicator-item__title">약관 동의</span> // </div> // </div> // // 상태별로 동그라미 안이 다르다: completion은 체크 글리프, ongoing은 `__dot`, before는 비었다. // 상태 클래스가 색·테두리를 정하므로 마크업은 그대로 두고 클래스만 바꾸면 된다. // // **모바일에서는 `__text`가 사라진다.** 시안의 device 변형을 CSS 브레이크포인트로 옮긴 // 것이다 — 조건부 렌더로 하면 창 폭이 바뀔 때마다 DOM이 들락거리고, React를 쓰지 않는 // 소비자는 같은 결과를 얻지 못한다(`fox-chip-select-option`의 확인 버튼과 같은 근거). // // 동그라미 안쪽 여백을 시안대로 적지 않는다. 시안은 `padding: 6px 5px`로 20px 안에 10×8 // 글리프를 밀어 넣는데, 그 값은 **가운데 정렬을 여백으로 계산한 것**이라(20-5-5=10, // 20-6-6=8) `justify-content`·`align-items`로 바꿔 적는다. 결과는 같고 5px·6px이라는 // 토큰 없는 값이 사라진다. // // 토큰이 아닌 값: // - ⚠️ `inline-size: 6.1rem`(선 61px): 시안 값 그대로다. 토큰 스케일에 61이 없고, 동그라미 // (20px)와 합치면 81px이라 단계 폭(80px)보다 1px 길다 — 다음 동그라미까지 틈 없이 // 닿게 하려고 겹치는 값으로 보인다. 단계 폭을 바꾸면 이 값도 함께 봐야 한다. // - ⚠️ `block-size: 0.15rem`(선 굵기 1.5px) / `border-width: 0.15rem`(ongoing 테두리): // 시안 값이나 border 토큰은 1px·2px·4px뿐이라 1.5px이 없다. 토큰이 생기면 바꾼다. // - ⚠️ 체크 글리프의 `10px × 8px`: 시안이 준 비율(5:4)이 다른 아이콘과 달라 `icon()` 스케일에 // 없다. `number()`의 같은 값(10px·8px)으로 지목한다. // - box-sizing / display / flex / aspect-ratio: 구조 규칙. // // ⚠️ 단계 제목의 굵기: 시안 CSS가 `var(--font-weight-regular, 700)`으로 이름과 값이 // 어긋나는데, **값(굵게)이 맞다**(사용자 확인). 700은 이 토큰 세트에 없어서 // (400 regular · 600 medium · 800 bold) 시스템의 `bold`를 쓴다 — Pretendard 기준으로 시안이 // Bold(700)라면 한 단계 더 굵은 ExtraBold(800)로 그려진다. 너무 굵어 보이면 `medium`으로 // 내린다. @use "@fox/styles/abstracts" as fox; .fox-step-indicator-item { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: fox.gap(3); inline-size: fox.number(20); // ── 인디케이터(동그라미 + 선) ─────────────────────────────────────────────── &__indicator { display: flex; align-items: center; } // 20px 정원. 안에 든 것(체크·점)은 상태가 정하고, 여기서는 자리만 만든다. &__mark { box-sizing: border-box; display: flex; flex-shrink: 0; align-items: center; justify-content: center; inline-size: fox.number(9); block-size: fox.number(9); aspect-ratio: 1 / 1; border-radius: fox.radius(max); } // 체크 글리프. 크기는 슬롯이 정하고 SVG는 따라온다. &__mark > svg { inline-size: fox.number(6); block-size: fox.number(5); } // ongoing의 가운데 점. &__dot { inline-size: fox.number(7); block-size: fox.number(7); flex-shrink: 0; aspect-ratio: 1 / 1; border-radius: fox.radius(max); background: fox.color(element-theme-primary); } &__line { flex-shrink: 0; inline-size: 6.1rem; block-size: 0.15rem; } // ── 글자 ──────────────────────────────────────────────────────────────────── &__text { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; padding-inline-end: fox.padding(3); // 모바일에서는 동그라미와 선만 남는다(파일 상단 주석 참고). @include fox.mobile { display: none; } } &__step { align-self: stretch; color: fox.color(font-neutral-subtle); font-family: fox.font-family(body); font-size: fox.font-size(body-xsm); font-weight: fox.font-weight(regular); line-height: 1.5; letter-spacing: -0.025em; } &__title { align-self: stretch; color: fox.color(font-neutral-default); font-family: fox.font-family(body); font-size: fox.font-size(body-sm); // 시안의 700은 토큰에 없어 시스템의 bold(800)로 올린다 — 파일 상단 주석 참고. font-weight: fox.font-weight(bold); line-height: 1.5; letter-spacing: -0.025em; } // ── 상태 ──────────────────────────────────────────────────────────────────── // 지난 단계. 동그라미가 회색으로 채워지고 체크가 반전색으로 얹힌다. 선도 함께 진하다 — // 여기까지 왔다는 표시다. &--completion { .fox-step-indicator-item__mark { background: fox.color(element-neutral-default); color: fox.color(element-neutral-inverse-static); } .fox-step-indicator-item__line { background: fox.color(element-neutral-default); } } // 지금 단계. 테두리만 강조색이고 안은 비어 있으며, 가운데 점이 그 자리를 채운다. // 선은 앞으로 갈 길이라 흐리다. &--ongoing { .fox-step-indicator-item__mark { border: 0.15rem solid fox.color(element-theme-primary); } .fox-step-indicator-item__line { background: fox.color(element-neutral-disabled); } } // 아직 오지 않은 단계. 흐린 테두리에 연한 면이고 안은 비었다. &--before { .fox-step-indicator-item__mark { border: fox.border(1) solid fox.color(element-neutral-disabled); background: fox.color(element-neutral-subtle); } .fox-step-indicator-item__line { background: fox.color(element-neutral-disabled); } } }