@su-record/vibe 2.8.41 → 2.8.44

package/skills/vibe.figma/templates/component-index.md

@@ -0,0 +1,126 @@
+# Component Index Template
+
+Phase 0에서 프로젝트 기존 컴포넌트를 인덱싱할 때 이 구조를 따른다.
+
+---
+
+## 인덱스 구조
+
+```json
+{
+  "sources": [
+    {
+      "type": "local",
+      "path": "components/",
+      "name": "project-components",
+      "excludedFolders": ["__tests__", "stories"]
+    },
+    {
+      "type": "local",
+      "path": "composables/",
+      "name": "project-composables"
+    }
+  ],
+  "components": [
+    {
+      "name": "BaseButton",
+      "path": "components/common/BaseButton.vue",
+      "props": ["label: string", "variant: 'primary' | 'secondary'", "disabled: boolean"],
+      "slots": ["default"],
+      "classes": ["base-button", "base-button--primary", "base-button--secondary"],
+      "description": "공통 버튼 컴포넌트"
+    },
+    {
+      "name": "GNB",
+      "path": "components/layout/GNB.vue",
+      "props": ["menuItems: MenuItem[]"],
+      "slots": [],
+      "classes": ["gnb", "gnb__logo", "gnb__menu"],
+      "description": "글로벌 네비게이션 바"
+    }
+  ],
+  "composables": [
+    {
+      "name": "useAuth",
+      "path": "composables/useAuth.ts",
+      "params": [],
+      "returns": "{ user: User, login: (email: string, pw: string) => Promise<void> }",
+      "description": "인증 상태 관리"
+    }
+  ],
+  "types": [
+    {
+      "name": "User",
+      "path": "types/User.ts",
+      "fields": ["id: string", "email: string", "name: string"]
+    }
+  ],
+  "designTokens": {
+    "source": "styles/_variables.scss",
+    "colors": [
+      { "name": "$color-primary", "value": "#3b82f6" },
+      { "name": "$color-navy", "value": "#0a1628" }
+    ],
+    "spacing": [
+      { "name": "$space-sm", "value": "8px" },
+      { "name": "$space-md", "value": "16px" }
+    ],
+    "typography": [
+      { "name": "$font-pretendard", "value": "'Pretendard', sans-serif" }
+    ]
+  }
+}
+```
+
+---
+
+## 인덱싱 규칙
+
+### 소스 스캔 (Phase 0)
+
+```
+Glob 패턴:
+  components/**/*.vue, components/**/*.tsx  → 컴포넌트
+  composables/**/*.ts, hooks/**/*.ts       → Composables/Hooks
+  types/**/*.ts, types.ts                  → 타입 정의
+  styles/_variables.scss, tailwind.config.* → 디자인 토큰
+```
+
+### 컴포넌트 추출 (Read 기반)
+
+각 파일에서:
+- **Props**: `defineProps<{...}>` 또는 `interface Props` 패턴
+- **Slots**: `<slot>` 또는 `{children}` 패턴
+- **Classes**: 최상위 template 요소의 `class="..."` 또는 `className={...}`
+- **Description**: JSDoc `@description` 또는 파일 첫 번째 주석
+
+### 제한
+
+- 파일 50개 초과 시 우선순위 디렉토리만: components/ui/ → components/common/ → components/shared/
+- 파일당 Read 최대 300줄
+- 전체 인덱싱 2분 이내
+
+### Figma 노드 ↔ 컴포넌트 매핑 (Phase 3)
+
+```
+tree.json 노드의 name/type으로 component-index 매칭:
+
+  name "Btn_*" + component-index에 BaseButton 존재
+    → <BaseButton :label="..." variant="primary" /> 로 재사용
+
+  name "GNB" + component-index에 GNB 존재
+    → <GNB :menu-items="..." /> 로 재사용
+
+  매칭 안 됨 → 새 컴포넌트 생성
+  50% 미만 props 호환 → 매칭 거부, 새로 생성
+```
+
+---
+
+## 저장 위치
+
+```
+/tmp/{feature}/{bp-folder}/component-index.json
+```
+
+Phase 3에서 Read로 로드하여 컴포넌트 재사용 판단에 사용.

package/skills/vibe.figma/templates/remapped-tree.md

@@ -0,0 +1,277 @@
+# Remapped Tree Template
+
+tree.json을 코드 생성에 최적화된 구조로 리매핑한다.
+모든 브레이크포인트의 tree.json을 동시에 입력받아, 노드 매칭 + CSS diff까지 포함.
+
+---
+
+## 입력
+
+```
+/tmp/{feature}/
+  mo-main/tree.json    ← 모바일 Figma tree
+  pc-main/tree.json    ← 데스크탑 Figma tree (있으면)
+```
+
+## 출력
+
+```
+/tmp/{feature}/remapped.json
+```
+
+---
+
+## 구조 정의
+
+```json
+{
+  "feature": "winter-pcbang",
+  "designWidth": {
+    "mo": 720,
+    "pc": 2560
+  },
+  "minWidth": 340,
+  "breakpoint": 1025,
+  "sections": [
+    {
+      "section": "hero",
+      "tag": "section",
+      "storyboard": {
+        "name": "Hero (키비주얼)",
+        "features": ["키비주얼 + 이벤트 정보 + 공유 버튼"],
+        "interactions": ["공유 버튼 클릭 → 공유 다이얼로그"],
+        "states": ["default"]
+      },
+      "bg": {
+        "mo": { "nodeId": "...", "file": "mo-main/bg/hero-bg.png" },
+        "pc": { "nodeId": "...", "file": "pc-main/bg/hero-bg.png" }
+      },
+      "size": {
+        "mo": { "w": 720, "h": 1280 },
+        "pc": { "w": 2560, "h": 1080 }
+      },
+      "children": [
+        {
+          "role": "title-group",
+          "type": "flex-column",
+          "css": {
+            "mo": { "alignItems": "center", "gap": "24px", "width": "620px" },
+            "pc": { "alignItems": "center", "gap": "40px", "width": "1200px" }
+          },
+          "children": [
+            {
+              "role": "title-image",
+              "type": "node-render",
+              "render": {
+                "mo": { "nodeId": "...", "file": "mo-main/content/hero-title.png", "size": { "w": 620, "h": 174 } },
+                "pc": { "nodeId": "...", "file": "pc-main/content/hero-title.png", "size": { "w": 1200, "h": 340 } }
+              },
+              "alt": "추운 겨울, 따뜻한 보상이 펑펑"
+            },
+            {
+              "role": "subtitle-image",
+              "type": "node-render",
+              "render": {
+                "mo": { "nodeId": "...", "file": "mo-main/content/hero-subtitle.png", "size": { "w": 586, "h": 32 } },
+                "pc": { "nodeId": "...", "file": "pc-main/content/hero-subtitle.png", "size": { "w": 1100, "h": 60 } }
+              },
+              "alt": "겨울을 녹일 보상, 지금 PC방에서 획득하세요!"
+            }
+          ]
+        },
+        {
+          "role": "share-button",
+          "type": "interactive",
+          "tag": "button",
+          "css": {
+            "mo": { "width": "72px", "height": "72px", "borderRadius": "500px", "backgroundColor": "rgba(13,40,61,0.5)", "border": "1px solid #fff" },
+            "pc": { "width": "96px", "height": "96px", "borderRadius": "500px", "backgroundColor": "rgba(13,40,61,0.5)", "border": "1px solid #fff" }
+          },
+          "event": "share"
+        },
+        {
+          "role": "period-panel",
+          "type": "content-with-bg",
+          "bg": {
+            "mo": { "nodeId": "...", "file": "mo-main/bg/period-bg.png" },
+            "pc": { "nodeId": "...", "file": "pc-main/bg/period-bg.png" }
+          },
+          "size": {
+            "mo": { "w": 720, "h": 500 },
+            "pc": { "w": 2560, "h": 400 }
+          },
+          "children": [
+            {
+              "role": "target-label",
+              "type": "text",
+              "tag": "p",
+              "content": "참여 대상 : PC 유저 (Steam, Kakao)",
+              "css": {
+                "mo": { "fontSize": "24px", "fontWeight": "600", "color": "#ffffff", "textAlign": "center" },
+                "pc": { "fontSize": "32px", "fontWeight": "600", "color": "#ffffff", "textAlign": "center" }
+              }
+            },
+            {
+              "role": "info-group",
+              "type": "flex-column",
+              "css": {
+                "mo": { "gap": "10px", "padding": "22px 14px" },
+                "pc": { "gap": "16px", "padding": "30px 40px" }
+              },
+              "children": [
+                {
+                  "role": "info-row",
+                  "type": "flex-column",
+                  "css": {
+                    "mo": { "gap": "4px" },
+                    "pc": { "gap": "8px" }
+                  },
+                  "children": [
+                    {
+                      "role": "label",
+                      "type": "text",
+                      "tag": "span",
+                      "content": "이벤트 기간 (이벤트 참여 및 미션 수행)",
+                      "css": {
+                        "mo": { "fontSize": "24px", "fontWeight": "700", "color": "#003879" },
+                        "pc": { "fontSize": "28px", "fontWeight": "700", "color": "#003879" }
+                      }
+                    },
+                    {
+                      "role": "value",
+                      "type": "text",
+                      "tag": "span",
+                      "content": "2025.12.22. 11:00 ~ 2026.01.18. 11:00 [KST]",
+                      "css": {
+                        "mo": { "fontSize": "28px", "fontWeight": "500", "color": "#171716", "fontFamily": "'Roboto Condensed', sans-serif" },
+                        "pc": { "fontSize": "36px", "fontWeight": "500", "color": "#171716", "fontFamily": "'Roboto Condensed', sans-serif" }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+```
+
+---
+
+## 노드 타입 분류
+
+tree.json의 각 노드를 다음 타입 중 하나로 분류:
+
+| type | 판별 기준 | 코드 출력 |
+|------|----------|---------|
+| `section` | 1depth 자식 프레임 | `<section>` + background-image |
+| `flex-column` | Auto Layout VERTICAL | `<div>` + flex-direction: column |
+| `flex-row` | Auto Layout HORIZONTAL | `<div>` + flex-direction: row |
+| `text` | TEXT 노드 | `<span>/<p>/<h2>` + typography CSS |
+| `node-render` | 콘텐츠 이미지 (타이틀, 아이콘) | `<img>` + 노드 렌더링 |
+| `vector-group` | VECTOR 3+ 자식 (커스텀 폰트) | `<img>` + GROUP 렌더링 |
+| `interactive` | name에 btn/CTA/link | `<button>/<a>` + event |
+| `content-with-bg` | 콘텐츠 + 배경 프레임 | `<div>` + background-image + children |
+| `repeat` | 같은 구조 INSTANCE 3+ | `v-for` / `.map()` |
+| `skip` | 장식선, 0px, BG 하위 개별 레이어 | 제외 |
+
+---
+
+## 브레이크포인트 노드 매칭
+
+```
+MO tree.json 1depth 자식:
+  Hero (720x1280) ──────── PC tree.json에서 "Hero" name 매칭
+  KID (720x487)   ──────── PC: "KID" 매칭
+  Daily (720x3604) ─────── PC: "Daily" 매칭
+
+매칭 기준:
+  1순위: name 완전 일치
+  2순위: name prefix 일치 (Hero_MO → Hero_PC)
+  3순위: 순서 기반 (같은 위치의 자식)
+  매칭 불가: 해당 BP에만 존재하는 섹션으로 표시
+```
+
+---
+
+## CSS diff → SCSS 출력 규칙
+
+```
+remapped.json의 mo/pc CSS를 비교:
+
+같은 값:
+  → 기본 스타일로 출력 (vw 기반, mo designWidth 사용)
+
+다른 값:
+  → 기본: mo 값 (vw 기반)
+  → @media (min-width: {breakpoint}px): pc 값 (vw 기반, pc designWidth 사용)
+
+예시:
+  "gap": { "mo": "24px", "pc": "40px" }
+  →
+  gap: 3.33vw;                    // 24 / 720 × 100
+  @media (min-width: 1025px) {
+    gap: 1.56vw;                  // 40 / 2560 × 100
+  }
+
+  "color": { "mo": "#003879", "pc": "#003879" }
+  → (같으므로 @media 없음)
+  color: #003879;
+```
+
+---
+
+## 리매핑 프로세스
+
+```
+입력:
+  - Phase 1 스토리보드 스펙 (섹션 목록 + 기능 정의 + 인터랙션)
+  - Phase 2 추출 데이터 (모든 BP의 tree.json + 렌더링 이미지)
+
+1. 스토리보드 × tree.json 섹션 매칭
+   스토리보드에서 정의한 섹션 목록을 tree.json 1depth 자식과 매칭:
+
+   | 스토리보드 섹션 | tree.json name | 매칭 방법 |
+   |---------------|---------------|----------|
+   | Hero (키비주얼) | "Hero" | name 일치 |
+   | KID (로그인) | "KID" | name 일치 |
+   | Daily (출석 미션) | "Daily" | name 일치 |
+   | PlayTime (플레이타임) | "Frame 633371" | name 불일치 → 순서 기반 |
+
+   name이 "Frame 633372" 같은 무의미한 이름이면:
+   → 스토리보드의 섹션 순서로 매칭
+   → 매칭 후 스토리보드의 role/기능을 remapped.json에 기록
+
+2. 스토리보드 기능 정의 → 노드 역할 확정
+   스토리보드에서 정의한 기능/인터랙션으로 tree 노드의 role을 확정:
+
+   스토리보드: "STEP 1. 일일 출석 - 출석하기 버튼"
+   tree.json: Daily > Contents > FRAME > children 중 name="Btn_CheckIn"
+   → role: "interactive", event: "check-in", tag: "button"
+
+   스토리보드: "누적 출석 보상 - DAY2, DAY3, DAY5, DAY10"
+   tree.json: Daily > Contents > FRAME > INSTANCE × 4
+   → role: "repeat", items: 4, template: first INSTANCE
+
+   스토리보드가 없는 노드:
+   → name/type 기반 추정 (기존 방식 유지)
+   → 장식/BG는 스토리보드에 없으므로 자동 분류
+
+3. BP 간 섹션 매칭
+   모든 BP의 tree.json에서 같은 섹션 찾기:
+   → name 일치 또는 스토리보드 매칭 결과로 연결
+   → MO Hero ↔ PC Hero
+
+4. 각 섹션에 대해 재귀적으로:
+   a. 노드 타입 분류 (위 테이블) — 스토리보드로 확정된 role 우선
+   b. BG 프레임 식별 → frame-render로 마킹
+   c. 콘텐츠 이미지/벡터 그룹 → node-render로 마킹
+   d. TEXT 노드 → content + css 추출
+   e. skip 대상 제거
+   f. 각 BP의 CSS 값을 mo/pc로 분리 저장
+
+5. remapped.json 출력
+```