nbnloper / edupay-admin star
Forked from ldu0009 / edupay-admin
임동욱 임동욱 08-12
docs: 버튼 시안 출처를 통합관리자페이지 파일로 갱신 
새 Figma 파일(KE9UILWhB8qTBe14uXUn4F)의 다섯 시안을 이전 파일과 대조했다.
노드 ID·변형 목록·토큰 값·구조가 전부 같아 스타일 변경분은 없다. 컴파일된
CSS는 바이트 단위로 이전과 동일하다.

  btn      컴포넌트 세트 48변형 전체 대조 — 일치
  btn-txt  생성 코드가 노드 ID까지 이전 파일과 동일
  btn-lnk  생성 코드 바이트 비교 — 동일(에셋 URL만 재발급)
  btn-ico  변수 세트·메타데이터 + ghost/overlay/disabled 대표 변형 — 일치
  toggle   default·ghost·overlay의 active 3종 + 아이콘 fill — 일치

btn-txt의 아이콘 크기는 컴포넌트 세트가 여전히 리터럴이다. 다만 전시 섹션의
인스턴스가 icon/4·3·2를 쓰고 있어 우리 매핑과 의도가 같음을 확인했고 그
근거를 주석에 남긴다.

Co-Authored-By: Claude Opus 5
@7b3cddf493f55d11911d986d38287778b1ad8798
a800049
7b3cddf
@fox/dev-test/component-registry.tsx
--- @fox/dev-test/component-registry.tsx
+++ @fox/dev-test/component-registry.tsx
@@ -93,7 +93,7 @@
 
     id: "fox-button",
 
     name: "FoxButton",
 
     description:
 
-      "Figma 시안(관리자페이지 node 390:439)을 토큰만으로 옮겼습니다. 너비는 내용에 따라 가변이고 높이만 고정입니다. hover·pressed는 마우스를 올리거나 눌러 확인하세요. error 계열은 시안 미정이라 비어 있습니다.",
 
+      "Figma 시안(btn, 컴포넌트 세트 106:1606)을 토큰만으로 옮겼습니다. 너비는 내용에 따라 가변이고 높이만 고정입니다. hover·pressed는 마우스를 올리거나 눌러 확인하세요. error 계열은 시안 미정이라 비어 있습니다.",
 
     variants: [
 
       {
 
         label: "계열 (type) — hover·pressed 확인 가능",
a800049
7b3cddf
@fox/styles/_fox-button-group.scss
--- @fox/styles/_fox-button-group.scss
+++ @fox/styles/_fox-button-group.scss
@@ -1,4 +1,4 @@
 
-// FoxButtonGroup — 시안: 관리자페이지 Figma btn-group (컴포넌트 세트 398:4854)
 
+// FoxButtonGroup — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F) Figma btn-group (컴포넌트 세트 398:4854)
 
 //
 
 // 시안에서 가져온 건 간격뿐이다 — 크기·방향과 무관하게 `gap/2` 하나다. 그래서 크기별
 
 // 모디파이어가 없다(React 래퍼의 `size`는 자식 버튼에 내려주는 값이지 그룹의 모양이 아니다).
a800049
7b3cddf
@fox/styles/_fox-button.scss
--- @fox/styles/_fox-button.scss
+++ @fox/styles/_fox-button.scss
@@ -1,4 +1,4 @@
 
-// FoxButton — 시안: 관리자페이지 Figma node 390:439
 
+// FoxButton — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F) Figma btn (컴포넌트 세트 106:1606 · 섹션 390:439)
 
 //
 
 // 마크업 계약 (React 밖 소비자용):
 
 //   <button class="fox-button fox-button--primary fox-button--md">
a800049
7b3cddf
@fox/styles/_fox-icon-button.scss
--- @fox/styles/_fox-icon-button.scss
+++ @fox/styles/_fox-icon-button.scss
@@ -1,4 +1,5 @@
 
-// FoxIconButton — 시안: 관리자페이지 Figma btn-ico (400:6312) + btn-ico-toggle (404:5247)
 
+// FoxIconButton — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F) Figma btn-ico (400:6312 · 섹션 405:5387)
 
+//                       + btn-ico-toggle (404:5247 · 섹션 405:5629)
 
 //
 
 // 두 시안은 계열·크기·모양이 같고 토글에만 `active` 상태가 하나 더 있다. 그래서 한 블록으로
 
 // 두고, 켜짐은 `aria-pressed="true"`로 표시한다 — 토글 버튼의 표준 속성이라 스타일 훅과
a800049
7b3cddf
@fox/styles/_fox-link-button.scss
--- @fox/styles/_fox-link-button.scss
+++ @fox/styles/_fox-link-button.scss
@@ -1,4 +1,4 @@
 
-// FoxLinkButton — 시안: 관리자페이지 Figma btn-lnk (컴포넌트 세트 107:207)
 
+// FoxLinkButton — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F) Figma btn-lnk (컴포넌트 세트 107:207 · 섹션 391:676)
 
 //
 
 // 마크업 계약 (React 밖 소비자용):
 
 //   <a href="…" class="fox-link-button fox-link-button--primary fox-link-button--md">
a800049
7b3cddf
@fox/styles/_fox-text-button.scss
--- @fox/styles/_fox-text-button.scss
+++ @fox/styles/_fox-text-button.scss
@@ -1,4 +1,4 @@
 
-// FoxTextButton — 시안: 관리자페이지 Figma btn-txt (컴포넌트 세트 106:2468)
 
+// FoxTextButton — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F) Figma btn-txt (컴포넌트 세트 106:2468 · 섹션 390:569)
 
 //
 
 // 마크업 계약 (React 밖 소비자용):
 
 //   <button class="fox-text-button fox-text-button--primary fox-text-button--md">
@@ -15,8 +15,9 @@
 
 //     변수로 export하지 않는다.
 
 //   - box-sizing / cursor / white-space / flex-shrink: 구조·상호작용 규칙.
 
 //
 
-// 아이콘 크기는 시안이 변수를 걸지 않아 리터럴(20/16/16/12px)로 나온다. 값이 정확히
 
-// 일치하는 `icon-*`(모드 무관)에 매핑했다. `form-icon-*`은 PC에서 24/20/16/12라 어긋난다.
 
+// 아이콘 크기는 컴포넌트 세트가 변수를 걸지 않아 리터럴(20/16/16/12px)로 나온다. 값이
 
+// 정확히 일치하는 `icon-*`(모드 무관)에 매핑했다 — 전시 섹션(390:569)의 인스턴스가
 
+// icon/4·3·2를 쓰고 있어 의도도 같다. `form-icon-*`은 PC에서 24/20/16/12라 어긋난다.
 
 
 @use "abstracts" as fox;
Add a comment
List