Commit @1297aee5d704d281fc5497a2f755eff0a43c4f96

임동욱 08-26

feat: 스크롤바 디자인을 디자인시스템에 등록

시안 scroll(7341:2675)이다. 컴포넌트가 아니라 스크롤이 생기는 요소에 입히는
외형이라 `fox.scroll()` 믹스인과 `.fox-scroll` 클래스로 냈다.

둘레 4px 여백은 트랙 padding이 아니라 막대의 투명 테두리로 만든다 — padding으로
주면 막대가 트랙 끝까지 가지 못한다. Chrome 121+가 표준 속성을 보면 웹킷 규칙을
통째로 무시하므로 Firefox 대비는 @supports로 갈라 놓았다.

이미 스크롤이 있던 @fox 컴포넌트 넷(셀렉트 목록·칩 셀렉트·모달·파일목록)에 적용했다.

Co-Authored-By: Claude Opus 5

@1297aee5d704d281fc5497a2f755eff0a43c4f96

bbf16ab

1297aee

@fox/dev-test/component-groups.ts

--- @fox/dev-test/component-groups.ts

+++ @fox/dev-test/component-groups.ts


     label: "Icon",
     subgroups: [{ label: "Icon", ids: ["fox-ico"] }],
   },
+  // 스크롤바도 시안 섹션이 아니라 모든 화면이 쓰는 기반이라 앞쪽에 둔다.
+  {
+    label: "Scroll",
+    subgroups: [{ label: "Scroll", ids: ["fox-scroll"] }],
+  },
   {
     label: "Action",
     subgroups: [

bbf16ab

1297aee

@fox/dev-test/component-registry.tsx

--- @fox/dev-test/component-registry.tsx

+++ @fox/dev-test/component-registry.tsx

...	...	@@ -900,6 +900,42 @@
900	900	],
901	901	},
902	902	{
	903	+ id: "fox-scroll",
	904	+ name: "fox-scroll (스크롤바)",
	905	+ description:
	906	+ "Figma 시안(scroll 7341:2675)을 옮겼습니다. React 컴포넌트가 아니라 스크롤이 생기는 요소에 붙이는 클래스입니다 — <div class=\"fox-scroll\"> 처럼요. 넘침 여부는 정하지 않고 외형만 입힙니다. 막대는 4px이고 둘레 4px 여백은 막대의 투명 테두리로 만듭니다(트랙에 padding을 주면 막대가 끝까지 가지 못합니다). 컴포넌트 안에서는 클래스 대신 fox.scroll() 믹스인을 부르며, 이미 셀렉트 목록·칩 셀렉트·모달·파일목록 네 곳에 들어가 있습니다. ⚠️ Firefox는 ::-webkit-scrollbar가 없어 표준 속성으로 근사합니다 — 두께가 thin 한 단계뿐이고 모서리는 정할 수 없습니다.",
	907	+ variants: [
	908	+ {
	909	+ label: "세로 (시안 col) — 상자 안을 굴려 보세요",
	910	+ node: (
	911	+ <div className={`fox-scroll ${styles.scrollDemo}`}>
	912	+ {Array.from({ length: 12 }, (_, index) => (
	913	+ <p key={index}>스크롤 내용 {index + 1}번째 줄입니다.</p>
	914	+ ))}
	915	+ </div>
	916	+ ),
	917	+ },
	918	+ {
	919	+ label: "가로 (시안 row)",
	920	+ node: (
	921	+ <div className={`fox-scroll ${styles.scrollDemoRow}`}>
	922	+ <p>가로로 넘치는 내용입니다. 오른쪽 끝까지 굴려 보세요.</p>
	923	+ </div>
	924	+ ),
	925	+ },
	926	+ {
	927	+ label: "붙이지 않았을 때 — 브라우저 기본 스크롤바",
	928	+ node: (
	929	+ <div className={styles.scrollDemo}>
	930	+ {Array.from({ length: 12 }, (_, index) => (
	931	+ <p key={index}>스크롤 내용 {index + 1}번째 줄입니다.</p>
	932	+ ))}
	933	+ </div>
	934	+ ),
	935	+ },
	936	+ ],
	937	+ },
	938	+ {
903	939	id: "fox-button",
904	940	name: "FoxButton",
905	941	description:

bbf16ab

1297aee

@fox/dev-test/dev-test.module.scss

--- @fox/dev-test/dev-test.module.scss

+++ @fox/dev-test/dev-test.module.scss

...	...	@@ -624,3 +624,29 @@
624	624	color: fox.color(icon-neutral-default);
625	625	}
626	626	}
	627	+
	628	+// 스크롤바를 보이려면 넘치는 상자가 있어야 한다 — 그 상자를 만드는 데모 전용 규칙.
	629	+.scrollDemo {
	630	+ overflow-y: auto;
	631	+ inline-size: 100%;
	632	+ max-inline-size: 32rem;
	633	+ block-size: 16rem;
	634	+ padding: fox.padding(6);
	635	+ border: fox.border(1) solid fox.color(border-neutral-subtle);
	636	+ border-radius: fox.radius(3);
	637	+ background: fox.color(surface-neutral-default);
	638	+}
	639	+
	640	+.scrollDemoRow {
	641	+ overflow-x: auto;
	642	+ inline-size: 100%;
	643	+ max-inline-size: 32rem;
	644	+ padding: fox.padding(6);
	645	+ border: fox.border(1) solid fox.color(border-neutral-subtle);
	646	+ border-radius: fox.radius(3);
	647	+ background: fox.color(surface-neutral-default);
	648	+
	649	+ > p {
	650	+ inline-size: 64rem;
	651	+ }
	652	+}

bbf16ab

1297aee

@fox/styles/_fox-chip-select-option.scss

--- @fox/styles/_fox-chip-select-option.scss

+++ @fox/styles/_fox-chip-select-option.scss

...	...	@@ -69,6 +69,7 @@
69	69	// ⚠️ 확정 전 임시값 — 파일 상단 승인 목록 참고.
70	70	max-block-size: 24rem;
71	71	overflow-y: auto;
	72	+ @include fox.scroll;
72	73	}
73	74
74	75	// 모바일 전용. 판 좌우 끝까지 닿는다(`align-self: stretch`).

bbf16ab

1297aee

@fox/styles/_fox-file-upload.scss

--- @fox/styles/_fox-file-upload.scss

+++ @fox/styles/_fox-file-upload.scss


     padding: 0;
     overflow-x: clip;
     overflow-y: auto;
+    @include fox.scroll;
     border: fox.border(1) solid fox.color(border-neutral-subtle);
     border-radius: fox.radius(3);
     list-style: none;

1297aee

@fox/styles/_fox-scroll.scss (added)

+++ @fox/styles/_fox-scroll.scss

...	...	@@ -0,0 +1,14 @@
	1	+// fox-scroll — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F) scroll (7341:2675)
	2	+//
	3	+// 마크업 계약:
	4	+// <div class="fox-scroll" style="overflow-y: auto">…</div>
	5	+//
	6	+// 외형만 입힌다. 세로(col)·가로(row)를 가리지 않고 그 요소에 생기는 스크롤바 전부가 대상이다.
	7	+// 규칙 본체는 `fox.scroll()` 믹스인이고, 이 클래스는 그것을 마크업에서 바로 쓰게 열어 둔 것이다
	8	+// — 컴포넌트 안에서는 클래스 대신 믹스인을 부른다.
	9	+
	10	+@use "abstracts" as fox;
	11	+
	12	+.fox-scroll {
	13	+ @include fox.scroll;
	14	+}

bbf16ab

1297aee

@fox/styles/_fox-select-option.scss

--- @fox/styles/_fox-select-option.scss

+++ @fox/styles/_fox-select-option.scss


   // ⚠️ 확정 전 임시값 — 파일 상단 TODO 참고.
   max-block-size: 24rem;
   overflow-y: auto;
+  @include fox.scroll;
   list-style: none;
   border: fox.border(1) solid fox.color(border-neutral-default);
   border-radius: fox.form(radius-md);

bbf16ab

1297aee

@fox/styles/_mixins.scss

--- @fox/styles/_mixins.scss

+++ @fox/styles/_mixins.scss

...	...	@@ -1,4 +1,5 @@
1	1	@use "sass:map";
	2	+@use "functions";
2	3	@use "tokens";
3	4
4	5	/// PC 이상(>= 768px). 미디어 쿼리 조건부는 `var()`를 해석하지 못해 브레이크포인트만
...	...	@@ -27,3 +28,38 @@
27	28	@content;
28	29	}
29	30	}
	31	+
	32	+/// 스크롤바 외형 — 시안 `scroll`(7341:2675). 스크롤이 생기는 요소에 붙인다. 넘침 여부는
	33	+/// 정하지 않는다 — `overflow`는 붙이는 쪽이 이미 갖고 있다.
	34	+///
	35	+/// 막대는 4px이고 둘레에 4px 여백이 있다. 여백을 트랙 `padding`으로 주면 막대가 끝까지
	36	+/// 가지 못해, 막대에 투명 테두리를 둘러 안쪽으로만 들어가게 한다.
	37	+///
	38	+/// 웹킷 계열은 `::-webkit-scrollbar`로 시안대로 그리고, 그 의사요소가 없는 Firefox는 표준
	39	+/// 속성으로 근사한다(두께가 `thin` 한 단계뿐이고 모서리는 정할 수 없다). 두 경로를 같이 쓰면
	40	+/// Chrome 121+가 표준 속성을 보고 웹킷 규칙을 통째로 무시하므로 `@supports`로 갈라 놓는다.
	41	+///
	42	+/// 웹킷 의사요소는 표준이 아니라 논리 속성(`inline-size`)을 받지 않아 물리 속성으로 적는다.
	43	+@mixin scroll {
	44	+ &::-webkit-scrollbar {
	45	+ width: calc(#{functions.number(3)} + #{functions.padding(2)} * 2);
	46	+ height: calc(#{functions.number(3)} + #{functions.padding(2)} * 2);
	47	+ }
	48	+
	49	+ &::-webkit-scrollbar-track,
	50	+ &::-webkit-scrollbar-corner {
	51	+ background: transparent;
	52	+ }
	53	+
	54	+ &::-webkit-scrollbar-thumb {
	55	+ border: functions.padding(2) solid transparent;
	56	+ border-radius: functions.radius(max);
	57	+ background-color: functions.color(element-neutral-alpha);
	58	+ background-clip: padding-box;
	59	+ }
	60	+
	61	+ @supports not selector(::-webkit-scrollbar) {
	62	+ scrollbar-width: thin;
	63	+ scrollbar-color: functions.color(element-neutral-alpha) transparent;
	64	+ }
	65	+}

bbf16ab

1297aee

@fox/styles/components.scss

--- @fox/styles/components.scss

+++ @fox/styles/components.scss

...	...	@@ -1,6 +1,7 @@
1	1	// 공용 컴포넌트 스타일 묶음. 필요한 것만 쓰려면 개별 파티셜(`@fox/styles/fox-button`)을
2	2	// 직접 @use 한다. 둘을 같이 써도 Sass가 모듈을 한 번만 로드해 중복되지 않는다.
3	3
	4	+@use "fox-scroll";
4	5	@use "fox-ico";
5	6	@use "fox-button";
6	7	@use "fox-text-button";

Add a comment

Open 0
Closed 0

List

...	...	@@ -187,6 +187,7 @@
187	187	padding: 0;
188	188	overflow-x: clip;
189	189	overflow-y: auto;
	190	+ @include fox.scroll;
190	191	border: fox.border(1) solid fox.color(border-neutral-subtle);
191	192	border-radius: fox.radius(3);
192	193	list-style: none;

...	...	@@ -14,6 +14,11 @@
14	14	label: "Icon",
15	15	subgroups: [{ label: "Icon", ids: ["fox-ico"] }],
16	16	},
	17	+ // 스크롤바도 시안 섹션이 아니라 모든 화면이 쓰는 기반이라 앞쪽에 둔다.
	18	+ {
	19	+ label: "Scroll",
	20	+ subgroups: [{ label: "Scroll", ids: ["fox-scroll"] }],
	21	+ },
17	22	{
18	23	label: "Action",
19	24	subgroups: [

...	...	@@ -52,6 +52,7 @@
52	52	// 없다.
53	53	overflow-x: hidden;
54	54	overflow-y: auto;
	55	+ @include fox.scroll;
55	56	border: fox.border(1) solid fox.color(border-neutral-subtle);
56	57	border-radius: fox.card(radius-xlg);
57	58	background: fox.color(surface-neutral-default);

...	...	@@ -40,6 +40,7 @@
40	40	// ⚠️ 확정 전 임시값 — 파일 상단 TODO 참고.
41	41	max-block-size: 24rem;
42	42	overflow-y: auto;
	43	+ @include fox.scroll;
43	44	list-style: none;
44	45	border: fox.border(1) solid fox.color(border-neutral-default);
45	46	border-radius: fox.form(radius-md);

Delete comment