nbnloper / edupay-admin star
Forked from ldu0009 / edupay-admin
임동욱 임동욱 08-26
feat: 스크롤바 디자인을 앱 전체에 적용 
globals.scss가 `*`에 건다. 스크롤이 어디에 생기는지 미리 알 수 없어서다 — 문서 자체,
셸 본문, 사이드바, 표 래퍼, 화면이 나중에 만드는 상자까지 한 번에 덮인다. 특이도가
0,0,0이라 어느 자리든 자기 규칙으로 덮을 수 있다.

@fox 컴포넌트 넷의 `fox.scroll()` 호출은 겹치지만 남긴다 — @fox는 이 파일 없이 다른
프로젝트로 복사돼도 제 모양이 나와야 한다.

카탈로그의 "붙이지 않았을 때" 예시는 뺐다. 전역이 된 뒤로는 같은 모양이라 오해만 준다.

Co-Authored-By: Claude Opus 5
@c04eefc1501087c0738320eeb421450c2131027d
1297aee
c04eefc
@fox/dev-test/component-registry.tsx
--- @fox/dev-test/component-registry.tsx
+++ @fox/dev-test/component-registry.tsx
@@ -903,7 +903,7 @@
 
     id: "fox-scroll",
 
     name: "fox-scroll (스크롤바)",
 
     description:
 
-      "Figma 시안(scroll 7341:2675)을 옮겼습니다. React 컴포넌트가 아니라 스크롤이 생기는 요소에 붙이는 클래스입니다 — <div class=\"fox-scroll\"> 처럼요. 넘침 여부는 정하지 않고 외형만 입힙니다. 막대는 4px이고 둘레 4px 여백은 막대의 투명 테두리로 만듭니다(트랙에 padding을 주면 막대가 끝까지 가지 못합니다). 컴포넌트 안에서는 클래스 대신 fox.scroll() 믹스인을 부르며, 이미 셀렉트 목록·칩 셀렉트·모달·파일목록 네 곳에 들어가 있습니다. ⚠️ Firefox는 ::-webkit-scrollbar가 없어 표준 속성으로 근사합니다 — 두께가 thin 한 단계뿐이고 모서리는 정할 수 없습니다.",
 
+      "Figma 시안(scroll 7341:2675)을 옮겼습니다. React 컴포넌트가 아니라 스크롤이 생기는 요소에 붙이는 클래스입니다 — <div class=\"fox-scroll\"> 처럼요. 넘침 여부는 정하지 않고 외형만 입힙니다. 막대는 4px이고 둘레 4px 여백은 막대의 투명 테두리로 만듭니다(트랙에 padding을 주면 막대가 끝까지 가지 못합니다). 이 앱에서는 globals.scss가 `*`에 걸어 두어 문서·본문·사이드바를 포함한 모든 스크롤에 이미 적용돼 있습니다 — 클래스를 따로 붙일 일은 @fox를 다른 프로젝트로 복사했을 때뿐입니다. 컴포넌트 안에서는 클래스 대신 fox.scroll() 믹스인을 부르고, 셀렉트 목록·칩 셀렉트·모달·파일목록 네 곳이 그렇게 쓰고 있습니다. ⚠️ Firefox는 ::-webkit-scrollbar가 없어 표준 속성으로 근사합니다 — 두께가 thin 한 단계뿐이고 모서리는 정할 수 없습니다.",
 
     variants: [
 
       {
 
         label: "세로 (시안 col) — 상자 안을 굴려 보세요",
@@ -920,16 +920,6 @@
 
         node: (
 
           <div className={`fox-scroll ${styles.scrollDemoRow}`}>
 
             <p>가로로 넘치는 내용입니다. 오른쪽 끝까지 굴려 보세요.</p>
 
-          </div>
 
-        ),
 
-      },
 
-      {
 
-        label: "붙이지 않았을 때 — 브라우저 기본 스크롤바",
 
-        node: (
 
-          <div className={styles.scrollDemo}>
 
-            {Array.from({ length: 12 }, (_, index) => (
 
-              <p key={index}>스크롤 내용 {index + 1}번째 줄입니다.</p>
 
-            ))}
 
           </div>
 
         ),
 
       },
1297aee
c04eefc
app/globals.scss
--- app/globals.scss
+++ app/globals.scss
@@ -6,6 +6,9 @@
 
 
 @use "@fox/styles";
 
 
+// 믹스인·함수만 가져온다 — CSS 출력이 0이라 위 진입점과 겹쳐도 규칙이 복제되지 않는다.
 
+@use "@fox/styles/abstracts" as fox;
 
+
 
 // 공용 컴포넌트 스타일. CSS Modules가 아니라 전역 BEM이라 여기서 한 번 불러온다 —
 
 // 그래야 React 밖(다른 프레임워크·순수 SCSS)에서도 같은 방식으로 쓸 수 있다.
 
 @use "@fox/styles/components";
@@ -96,3 +99,16 @@
 
   // 지금은 둘이 같은 서체를 가리킨다.
 
   font-family: var(--app-font-sans, system-ui), system-ui, sans-serif;
 
 }
 
+
 
+// 스크롤바 — 시안 `scroll`(7341:2675)을 앱 전체에 입힌다. `*`에 거는 이유는 스크롤이 어디에
 
+// 생기는지 미리 알 수 없어서다(문서 자체, 셸 본문, 사이드바, 표 래퍼, 화면이 나중에 만드는
 
+// 상자 …). 특이도 0,0,0이라 어느 자리든 자기 규칙으로 덮을 수 있다.
 
+//
 
+// @fox 컴포넌트도 각자 `fox.scroll()`을 부르고 있어 여기와 겹치지만 그대로 둔다 — @fox는
 
+// 이 파일 없이 다른 프로젝트로 복사돼도 제 모양이 나와야 한다.
 
+//
 
+// ⚠️ macOS는 기본이 겹쳐 뜨는(overlay) 스크롤바라 자리를 차지하지 않는데, 외형을 입히면
 
+// 자리를 차지하는 방식으로 바뀌어 스크롤되는 상자마다 안쪽 폭이 12px 줄어든다.
 
+* {
 
+  @include fox.scroll;
 
+}
Add a comment
List