Code - nbnloper/edupay-admin

// FoxModal — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F) // modal (190:1136 · 섹션 391:4640) // // 마크업 계약 (React 밖 소비자용): // <dialog class="fox-modal fox-modal--md"> // <div class="fox-modal__body"> // <div class="fox-modal__tit"><h2 class="fox-modal__title">타이틀</h2></div>  // <div class="fox-modal__contents">…</div> // </div> // <div class="fox-modal__foot">  // <div class="fox-modal__utility">…</div>  // <div class="fox-modal__actions">…</div>  // </div> // <button class="fox-modal__close" type="button" aria-label="닫기">…svg…</button> // </dialog> // `<dialog>`는 `showModal()`로 열어야 뒷배경과 초점 가두기가 생긴다. // // 크기 넷(sm·md·lg·full)이 모두 폭 토큰이다. 모바일에서는 넷 다 같은 폭(348px)으로 // 모이고 여백·모서리·닫기 버튼도 함께 줄어든다 — 반응형 토큰이 그렇게 정의돼 있다. // // 제목 줄에만 오른쪽 여백을 준다 — 닫기 버튼이 그 자리에 겹쳐 앉기 때문이다. 본문과 // 아래쪽은 그 여백이 필요 없다. // // 닫기 버튼은 64px 칸의 아래쪽에 아이콘을 붙인다(시안 items-end). 그래야 아이콘이 제목 // 글줄과 눈높이가 맞는다. 상자 테두리 위에 얹히도록 1px 밖으로 내민다. // // 토큰이 아닌 값: // - 아래쪽 버튼의 최소 폭 8rem: 시안 값이나 Figma가 변수로 export하지 않는다(사용자 승인). // - 그림자 색: 시안이 테마 토큰이 아니라 `alpha/black10` 원시값에 직접 물려 놓았다 // (fox-carousel-button과 같은 사정). // - 뒷배경을 덮는 방식(`::backdrop`)과 가운데 정렬: 구조 규칙. // - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로 // export하지 않는다. @use "abstracts" as fox; .fox-modal { box-sizing: border-box; // `<dialog>`는 닫혀 있을 때 브라우저가 숨기는데, `display`를 주면 그 기본값을 덮어 // 닫힌 모달이 화면에 그대로 남는다. 열렸을 때만 배치를 준다. display: none; flex-direction: column; align-items: flex-start; // `<dialog>`의 브라우저 기본 여백·테두리를 지우고 가운데에 놓는다. max-inline-size: calc(100% - #{fox.padding(7)} * 2); max-block-size: calc(100% - #{fox.padding(7)} * 2); margin: auto; padding: fox.modal(padding-default); // 세로만 스크롤한다. `overflow: auto`로 두면 닫기 버튼이 테두리를 덮으려고 일부러 1px // 밖으로 나간 것(`__close`의 `inset-inline-end: -1px`)까지 넘침으로 세어 가로 스크롤바가 // 생긴다 — 그 버튼은 배경도 테두리도 없고 아이콘이 8px 안쪽이라 x축을 잘라도 보이는 변화가 // 없다. overflow-x: hidden; overflow-y: auto; @include fox.scroll; border: fox.border(1) solid fox.color(border-neutral-subtle); border-radius: fox.card(radius-xlg); background: fox.color(surface-neutral-default); color: fox.color(font-neutral-default); // 시안 neutral/lv3 — 그림자 둘이 겹친다. box-shadow: fox.shadow(location4) fox.shadow(location4) fox.shadow(blur4) 0 fox.primitive(alpha-black10), fox.shadow(location2) fox.shadow(location2) fox.shadow(blur3) 0 fox.primitive(alpha-black10); &::backdrop { background: fox.color(background-dim); } // 닫기 버튼이 상자 모서리에 얹히므로 기준점이 필요하다. position: relative; &[open] { display: flex; } // ── 크기 ────────────────────────────────────────────────────────────────── &--sm { inline-size: fox.modal(width-sm); } &--md { inline-size: fox.modal(width-md); } &--lg { inline-size: fox.modal(width-lg); } &--full { inline-size: fox.modal(width-full); } // ── 본문 ────────────────────────────────────────────────────────────────── &__body { display: flex; flex-direction: column; align-items: flex-start; gap: fox.gap(5); inline-size: 100%; } // 닫기 버튼이 오른쪽 위에 앉으므로 제목만 그만큼 비켜 준다. // // 제목이 없어도 한 줄 높이를 남긴다 — 시안의 tit 프레임이 제목 없이도 28px(제목 글자 // 크기 × 줄높이)을 차지한다. 이 자리를 없애면 닫기 버튼이 내용 위로 내려앉는다. &__tit { display: flex; flex-direction: column; align-items: flex-start; gap: fox.gap(3); inline-size: 100%; min-block-size: calc(#{fox.font-size(heading-md)} * 1.4); padding-inline-end: fox.padding(8); } &__title { inline-size: 100%; margin: 0; color: fox.color(font-neutral-strong); font-family: fox.font-family(title); font-size: fox.font-size(heading-md); font-weight: fox.font-weight(bold); line-height: 1.4; letter-spacing: -0.025em; word-break: break-word; } &__contents { display: flex; flex-direction: column; align-items: flex-start; gap: fox.gap(5); inline-size: 100%; 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; // 그림이 들어오면 폭을 채운다 — 시안의 contents 슬롯에 든 것도 폭 100%다. > img, > svg, > picture { inline-size: 100%; block-size: auto; } // form은 내용이 아니라 그릇이다. 폭을 안 잡아 주면 `align-items: flex-start`에 걸려 // 자기 내용만큼만 벌어지고, 그 안의 입력칸이 모달을 넘어 잘린다. 폭만 정한다 — // 안쪽 배치는 화면이 자기 모듈로 정하고 있어 여기서 건드리면 그쪽을 덮는다. > form { inline-size: 100%; } } // ── 아래쪽 ──────────────────────────────────────────────────────────────── &__foot { display: flex; align-items: center; justify-content: flex-end; gap: fox.gap(3); inline-size: 100%; padding-block-start: fox.padding(8); } // 왼편은 남는 폭을 먹어 버튼을 오른쪽 끝으로 민다. &__utility { display: flex; flex: 1 0 0; align-items: flex-start; gap: fox.gap(3); min-inline-size: 0; } &__actions { display: flex; flex-shrink: 0; align-items: center; justify-content: flex-end; gap: fox.gap(3); margin-inline-start: auto; } // 시안에서 모달 버튼은 최소 8rem이다 — 글자가 짧아도 두 버튼의 폭이 같아 보이게 한다. // 버튼 자체의 성질이 아니라 이 자리의 규칙이라 여기서 준다(btn 컴포넌트 세트에는 // 최소 폭 표기가 없다). &__actions .fox-button { min-inline-size: 8rem; } // ── 닫기 ────────────────────────────────────────────────────────────────── // 시안대로 아이콘을 칸 아래쪽에 붙여 제목 글줄과 눈높이를 맞춘다. &__close { position: absolute; inset-block-start: calc(-1 * #{fox.border(1)}); inset-inline-end: calc(-1 * #{fox.border(1)}); display: flex; align-items: flex-end; inline-size: fox.modal(btn-close); font-size: fox.modal(btn-close); block-size: fox.modal(btn-close); padding: fox.padding(3); border: none; background: none; color: fox.color(icon-neutral-default); cursor: pointer; } &__close-icon { display: inline-flex; > * { inline-size: fox.icon(5); font-size: fox.icon(5); block-size: fox.icon(5); } } }