Code - nbnloper/edupay-admin

// FoxTooltipRich — 시안: 통합관리자페이지 디자인시스템 Figma tooltip-rich // // 제목과 본문을 담은 말풍선이다. `fox-popover`와 판·꼬리의 구조가 같고 **누를 것이 없다** — // 닫기도 액션 버튼도 없다. // // 마크업 계약 (React 밖 소비자용): // <div class="fox-tooltip-rich fox-tooltip-rich--top fox-tooltip-rich--arrow-left"> // <div class="fox-tooltip-rich__arrow-area">  // <span class="fox-tooltip-rich__arrow"></span>  // </div> // <div class="fox-tooltip-rich__content"> // <div class="fox-tooltip-rich__body"> // <div class="fox-tooltip-rich__title-row"> // <strong class="fox-tooltip-rich__title">제목</strong> // </div> // <div class="fox-tooltip-rich__message-row"> // <span class="fox-tooltip-rich__message">본문</span> // </div> // </div> // </div> // </div> // // `--top`은 꼬리가 판 **위**에 붙고(트리거 아래에 뜨는 말풍선), `--bottom`은 아래에 붙는다. // 마크업 순서가 그것을 정한다 — `order`나 `column-reverse`를 쓰지 않는다. // // 꼬리는 **CSS가 그린다**(SVG를 쓰지 않는다). 그림과 방향·위치 규칙은 `_bubble.scss`의 // `arrow()` 믹스인이 갖는다 — `fox-popover`와 같은 그림이라 한곳에 둔다. 왜 시안 SVG를 // 쓰지 않는지도 그 파일 상단에 적혀 있다. // // `fox-popover`와 다른 점은 셋뿐이다: // 1. 테두리가 한 단계 옅다(`border-neutral-default` ↔ 팝오버의 `border-neutral-strong`). // 꼬리도 같은 값을 받는다. // 2. 제목과 본문 사이가 좁다(`padding-3` 8px ↔ 팝오버의 `padding-6` 16px). // 3. 그림자가 없다 — 시안이 주지 않는다. // // 제목 줄의 오른쪽 여백(`padding-9`)은 팝오버와 같다. 닫기 버튼이 없어 비워 둘 이유가 // 없어 보이지만 시안이 같은 값을 주므로 그대로 둔다 — 두 말풍선의 글줄 시작·끝이 맞는다. // // 토큰이 아닌 값: // - ⚠️ `inline-size: 36rem`(360px): 시안 값 그대로다. 토큰 스케일에 360이 없다. 폭을 바꿔야 // 하는 자리는 호출부가 `className`으로 덮는다(`fox-popover`와 같은 처리). // - line-height / letter-spacing: 시안 텍스트 스타일 heading/xsm·body/sm의 값이나 Figma가 // 변수로 export하지 않는다. -0.375px·-0.325px은 각각 15px·13px 기준이라 `-0.025em`으로 // 적는다(다른 컴포넌트와 같은 근거). // - box-sizing / display / flex: 구조 규칙. @use "@fox/styles/abstracts" as fox; @use "@fox/styles/bubble" as bubble; .fox-tooltip-rich { @include bubble.root; // ── 판 ────────────────────────────────────────────────────────────────────── &__content { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: fox.gap(4); align-self: stretch; padding: fox.padding(8); border: fox.border(1) solid fox.color(border-neutral-default); border-radius: fox.radius(5); background: fox.color(surface-neutral-default); } // ── 글자 ──────────────────────────────────────────────────────────────────── &__body { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; } &__title-row { display: flex; align-items: center; gap: fox.gap(5); align-self: stretch; padding-inline-end: fox.padding(9); } &__title { flex: 1 0 0; min-inline-size: 0; color: fox.color(font-neutral-strong); font-family: fox.font-family(title); font-size: fox.font-size(heading-xsm); font-weight: fox.font-weight(bold); line-height: 1.4; letter-spacing: -0.025em; } // 제목과 본문 사이 간격을 본문의 윗여백이 맡는다(시안이 그렇게 준다) — 제목만 있을 때 // 아래로 빈자리가 남지 않는다. &__message-row { display: flex; align-items: flex-start; align-self: stretch; padding-block-start: fox.padding(3); } &__message { flex: 1 0 0; min-inline-size: 0; color: fox.color(font-neutral-default); font-family: fox.font-family(body); font-size: fox.font-size(body-sm); font-weight: fox.font-weight(regular); line-height: 1.5; letter-spacing: -0.025em; } } // 꼬리. 판과 같은 색을 넘긴다 — 꼬리는 판이 뾰족하게 튀어나온 부분이다. @include bubble.arrow( "fox-tooltip-rich", $border: fox.color(border-neutral-default), $fill: fox.color(surface-neutral-default) );