Code - nbnloper/edupay-admin

// FoxCheckbox — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F) // Figma checkbox // // 체크박스 한 칸이다 — 네모 표시(`fox-check-icon`) + 라벨 + 부가설명. // // 마크업 계약 (React 밖 소비자용): // <label class="fox-checkbox fox-checkbox--lg"> // <input type="checkbox" class="fox-checkbox__input" name="terms" value="privacy"> // <span class="fox-check-icon fox-check-icon--lg">…svg…</span> // <span class="fox-checkbox__body"> // <span class="fox-checkbox__label">라벨</span> // <span class="fox-checkbox__description">부가 설명</span>  // </span> // </label> // // 루트가 `<label>`이라 어디를 눌러도 브라우저가 선택을 처리한다. 상태는 전부 네이티브 // `<input type="checkbox">`가 소유한다(규약 3). // // 라디오와 다른 점은 **여러 개를 동시에 고를 수 있다**는 것뿐이다. `name`이 같아도 서로를 // 끄지 않으므로 그룹이 단일 선택을 강제하지 않고, 폼 전송 시 고른 것들이 함께 나간다. // // ⚠️ 부분선택(`:indeterminate`)은 HTML 속성이 아니라 DOM 프로퍼티다. 마크업만으로는 켤 수 // 없고 `el.indeterminate = true` 한 줄이 필요하다 — React 밖 소비자가 알아야 할 지점이다. // // input은 순서상 **맨 앞**에 와야 한다. 네모 표시와 본문이 `~` 형제 선택자로 그 상태를 // 따라가기 때문이다. 시각적으로만 숨기고 포커스는 살려 둔다 — `display: none`으로 지우면 // 키보드로 도달할 수 없다. // // 라벨 서체는 시안 확인 완료(body/lg·body/md · font-neutral-strong · 150% · -0.025em). // ⚠️ 부가설명의 서체는 시안 미확인이라 `fox-radio`와 같은 값으로 맞췄다. // // 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목): // - line-height / letter-spacing: 라벨·부가설명의 시안 텍스트 스타일 값이나 Figma가 변수로 // export하지 않는다. // // 토큰이 아닌 값(사용자 승인): // - 아이콘의 위쪽 여백 `0.1rem`(1px): 시안 icon-area의 `padding-top` 값이고 변수로 바인딩 // 되어 있지 않다. 크기·브레이크포인트가 바뀌어도 필요한 보정이 0.75~1.25px 범위라 하나로 // 쓴다(1rem = 10px). // - cursor / display / flex / position: 구조·상호작용 규칙. // - 숨긴 input의 `inline-size: 0`: 크기가 아니라 "보이지 않게" 하는 구조 값이다. @use "@fox/styles/abstracts" as fox; .fox-checkbox { // 숨긴 input의 위치 기준. 안 주면 input이 조상까지 올라가 엉뚱한 곳에 붙는다. position: relative; display: flex; // 부가설명이 여러 줄이어도 네모 표시는 첫 줄에 붙어 있어야 한다. align-items: flex-start; gap: fox.gap(3); cursor: pointer; // 시각적으로만 숨긴다. `opacity: 0`은 포커스를 유지하므로 키보드로 도달할 수 있고, // 클릭은 루트 `<label>`이 받는다. &__input { position: absolute; inline-size: 0; block-size: 0; margin: 0; opacity: 0; pointer-events: none; } // 시안이 아이콘을 감싼 icon-area에 위쪽 여백 1px을 준다. 라벨의 line box(글자 크기 × 1.5)가 // 아이콘보다 조금 높아서, 그만큼 내려야 글자 첫 줄과 시각 중심이 맞는다. // // 감싸는 요소를 따로 두지 않고 여백으로 처리한다 — 1px 내리는 것 말고는 하는 일이 없어 // React 밖 소비자에게 마크업을 하나 더 요구할 이유가 없다. .fox-check-icon { margin-block-start: 0.1rem; } &__body { display: flex; flex-direction: column; gap: fox.gap(1); align-items: flex-start; } // 자간은 px이 아니라 em이다 — 라벨은 크기 수식어(lg·md)마다, 부가설명은 브레이크포인트마다 // 글자 크기가 달라지는데, px으로 박으면 그 자리에서 비율이 어긋난다. &__label { // 시안이 라벨에 "가로 채우기"를 준다. 본문이 `align-items: flex-start`라 그대로 두면 // 글자 너비만큼만 차지하므로, 라벨만 늘려 준다. align-self: stretch; color: fox.color(font-neutral-strong); font-family: fox.font-family(body); font-weight: fox.font-weight(regular); line-height: 1.5; letter-spacing: -0.025em; } &__description { color: fox.color(font-neutral-subtle); font-family: fox.font-family(body); font-weight: fox.font-weight(regular); font-size: fox.font-size(body-sm); line-height: 1.5; letter-spacing: -0.025em; } // ── 크기 ──────────────────────────────────────────────────────────────────── &--lg &__label { font-size: fox.font-size(body-lg); } &--md &__label { font-size: fox.font-size(body-md); } } // ── 비활성 ──────────────────────────────────────────────────────────────────── // 글자색도 함께 흐려진다. 네모 표시는 `_fox-check-icon.scss`가 같은 `:disabled`를 보고 // 처리하므로 여기서 건드리지 않는다. .fox-checkbox:has(.fox-checkbox__input:disabled) { cursor: default; } .fox-checkbox__input:disabled ~ .fox-checkbox__body .fox-checkbox__label, .fox-checkbox__input:disabled ~ .fox-checkbox__body .fox-checkbox__description { color: fox.color(font-neutral-disabled); } // ── 글자 감추기 ─────────────────────────────────────────────────────────────── // `display: none`으로 지우면 접근성 트리에서도 빠져 이름 없는 조작기가 된다. 그래서 // 자리만 없애고 DOM에는 남긴다 — 루트가 `<label>`이라 이 글자가 곧 이름이다. .fox-checkbox--hide-label { gap: 0; > .fox-checkbox__body { position: absolute; inline-size: fox.border(1); block-size: fox.border(1); overflow: hidden; clip-path: inset(50%); } }