@su-record/vibe 2.8.41 → 2.8.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@su-record/vibe",
-  "version": "2.8.41",
+  "version": "2.8.42",
   "description": "AI Coding Framework for Claude Code — 56 agents, 45 skills, multi-LLM orchestration",
   "type": "module",
   "main": "dist/cli/index.js",

package/skills/vibe.figma/SKILL.md

@@ -36,44 +36,44 @@ Figma 트리가 코드의 원천이다. 스크린샷은 검증용이다.
 
 ```
 /vibe.figma
+  입력: 모든 URL을 한번에 받는다
+    Storyboard: https://figma.com/...?node-id=aaa (있으면)
+    MO Design: https://figma.com/...?node-id=xxx
+    PC Design: https://figma.com/...?node-id=yyy (있으면)
+
   → Phase 0: Setup (스택 감지, 디렉토리 생성, 기존 자산 인덱싱)
   → Phase 1: Storyboard (스토리보드 → 기능 스펙 문서 작성, 파일 생성 없음)
-  → Phase 2: 재료 확보 (디자인 URL → 트리 + 노드 렌더링 이미지 + 스크린샷)
-  → Phase 3: 구조적 코드 생성 (트리 → HTML+SCSS 매핑 + 시맨틱 보강)
-  → Phase 3.5: 컴파일 게이트 (tsc → build → dev 확인)
-  → Phase 4: 시각 검증 루프 (렌더링 vs 스크린샷 비교 → 수정)
-  ─── 추가 브레이크포인트가 있으면 Phase 2~4 반복 ───
-  → Phase 5: 공통화 (브레이크포인트별 작업 병합 → 최종 프로젝트 구조)
-
-브레이크포인트별 작업 구조:
+  → Phase 2: 재료 확보 (모든 BP의 트리 + 노드 렌더링 이미지 + 스크린샷)
+  → Phase 3: 리매핑 (tree.json → remapped.json, BP 간 노드 매칭 + CSS diff)
+  → Phase 4: 순차 코드 생성 (remapped.json → 섹션별 HTML+SCSS)
+  → Phase 5: 컴파일 게이트 (tsc → build → dev 확인)
+  → Phase 6: 시각 검증 루프 (렌더링 vs 스크린샷 비교 → 수정)
+
+작업 디렉토리 구조:
   각 Figma URL의 ROOT name에서 폴더명 추출 (kebab-case):
     "MO_Main ..."  → /tmp/{feature}/mo-main/
     "PC_Main ..."  → /tmp/{feature}/pc-main/
 
   /tmp/{feature}/
-  ├── mo-main/              ← 첫 번째 URL (모바일)
-  │   ├── tree.json
-  │   ├── bg/
-  │   ├── content/
-  │   └── sections/
-  ├── pc-main/              ← 두 번째 URL (데스크탑)
+  ├── mo-main/              ← 모바일 Phase 2 추출 결과
   │   ├── tree.json
-  │   ├── bg/
-  │   ├── content/
-  │   └── sections/
-  └── final/                ← Phase 5 공통화 결과
-      ├── components/{feature}/
-      └── styles/{feature}/
+  │   ├── bg/               ← BG 프레임 렌더링
+  │   ├── content/          ← 콘텐츠 노드 렌더링
+  │   └── sections/         ← Phase 4 검증용 스크린샷
+  ├── pc-main/              ← 데스크탑 Phase 2 추출 결과
+  │   └── (동일 구조)
+  └── remapped.json         ← Phase 3 리매핑 결과 (모든 BP 통합)
+
+  remapped.json이 Phase 4의 유일한 입력.
+  → BP 간 노드 매칭 완료
+  → CSS diff (mo/pc) 포함
+  → 이미지 렌더링 파일 경로 포함
+  → Phase 4에서 바로 코드 생성 가능
 
-Phase 5 공통화:
-  1. 각 브레이크포인트의 컴포넌트 diff
-     → 구조 동일: 1개로 병합
-     → 구조 다름: props로 분기 또는 별도 유지
-  2. SCSS diff
-     → 같은 값: 기본 스타일
-     → 다른 값: @media 오버라이드
-  3. 토큰 diff → 합집합 정리
-  4. /tmp/ 임시 폴더 → 프로젝트 디렉토리에 최종 배치
+  코드 출력: 프로젝트 디렉토리에 직접 배치
+    components/{feature}/HeroSection.vue
+    styles/{feature}/layout/_hero.scss (모바일 기본 + @media PC)
+    styles/{feature}/components/_hero.scss
 ```
 
 ---
@@ -202,7 +202,7 @@ Phase 5 공통화:
 - question: "스토리보드 Figma URL을 입력해주세요. (없으면 '없음')"
 - options 제공 금지 — 자유 텍스트 입력만 허용
 
-"없음" 응답 시 → Phase 2로 건너뜀
+"없음" 응답 시 → 스토리보드 분석 스킵
 
 ### 1-1. 스토리보드 분석
 
@@ -238,8 +238,8 @@ URL에서 fileKey, nodeId 추출
 
 ```
 ❌ Phase 1에서 코드 파일을 생성하지 않는다.
-   → Phase 1 HTML 구조와 Phase 3 트리 매핑이 충돌하면 이중 작업
-   → Phase 3에서 tree.json 기반으로 코드를 생성
+   → Phase 1 HTML 구조와 Phase 4 트리 매핑이 충돌하면 이중 작업
+   → Phase 4에서 remapped.json 기반으로 코드를 생성
 
 ✅ Phase 1의 출력물은 기능 스펙 문서 (텍스트):
 
@@ -283,7 +283,7 @@ Phase 1 완료 조건:
   □ 공통 컴포넌트가 식별되어 있다
   □ 파일을 하나도 생성하지 않았다
 
-Phase 3에서 이 스펙 + tree.json을 합쳐서 코드를 생성한다.
+Phase 4에서 이 스펙 + remapped.json을 합쳐서 코드를 생성한다.
 ```
 
 ---
@@ -425,7 +425,7 @@ UI 요소 → vw 비례:
 
 ---
 
-## Phase 2.5: 공통 패턴 분석 (멀티 프레임 전용)
+## Phase 3: 리매핑 (tree.json → remapped.json)
 
 **URL 2개 이상일 때만 실행. 단일 URL이면 Phase 3으로 건너뜀.**
 **프레임 간 공통 요소를 식별하여 공유 컴포넌트로 추출한다.**
@@ -466,7 +466,7 @@ UI 요소 → vw 비례:
 
 ---
 
-## Phase 3: 퍼즐 조립
+## Phase 4: 순차 코드 생성
 
 **Phase 1에서 만든 컴포넌트에 Phase 2의 재료로 디자인을 입힌다.**
 **스크린샷을 보면서 퍼즐을 맞추듯 조립한다.**
@@ -688,11 +688,11 @@ URL 있으면:
 
 ---
 
-## Phase 3.5: 컴파일 게이트
+## Phase 5: 컴파일 게이트
 
 **Phase 3 퍼즐 조립 완료 후, 브라우저 검증 전에 컴파일 성공을 보장한다.**
 **컴파일 에러는 스킵 불가 — 반드시 수정 또는 사용자 보고.**
-**Phase 3.5 실패 시 Phase 4 진행 불가 (hard gate).**
+**Phase 5 실패 시 Phase 4 진행 불가 (hard gate).**
 
 ```
 자동 반복: 컴파일 성공까지. 최대 3라운드.
@@ -705,7 +705,7 @@ Phase 3 시작 전에 기존 프로젝트의 에러를 캡처:
   1. 타입 체크 베이스라인: (3.5-1에서 선택한 동일 명령 사용) > /tmp/{feature}/baseline-typecheck.txt 2>&1
   2. 빌드 베이스라인: npm run build > /tmp/{feature}/baseline-build.txt 2>&1
 
-Phase 3.5에서는 baseline에 없는 **새로 발생한 에러만** 수정 대상.
+Phase 5에서는 baseline에 없는 **새로 발생한 에러만** 수정 대상.
 baseline에 존재하던 에러는 무시하고 별도 보고 ("기존 에러 {N}개 유지").
 vibe.figma가 생성/수정한 파일 외의 에러는 자동 수정 금지.
 ```
@@ -783,13 +783,13 @@ vibe.figma가 생성/수정한 파일 외의 에러는 자동 수정 금지.
 컴파일 게이트 결과 보고:
 
   ✅ 통과:
-    "Phase 3.5: 컴파일 게이트 PASS (라운드 {N})"
+    "Phase 5: 컴파일 게이트 PASS (라운드 {N})"
     - tsc: 0 errors
     - build: success
     - dev server: running on localhost:{port}
 
   ❌ 실패 (3라운드 후):
-    "Phase 3.5: 컴파일 게이트 FAIL"
+    "Phase 5: 컴파일 게이트 FAIL"
     - 남은 에러 목록 (파일, 줄, 메시지)
     - 시도한 수정 내역
     - 사용자 수동 수정 필요
@@ -798,7 +798,7 @@ vibe.figma가 생성/수정한 파일 외의 에러는 자동 수정 금지.
 
 ---
 
-## Phase 4: 검증 루프
+## Phase 6: 시각 검증 루프
 
 **Puppeteer + CDP로 실제 렌더링 결과를 확인하며 자동 수정한다.**
 **사람이 브라우저 보면서 고치는 것과 동일한 루프.**
@@ -812,7 +812,7 @@ vibe.figma가 생성/수정한 파일 외의 에러는 자동 수정 금지.
 
 ```
 1. dev 서버 시작:
-   Phase 3.5에서 이미 시작된 dev 서버 사용 (재시작 불필요)
+   Phase 5에서 이미 시작된 dev 서버 사용 (재시작 불필요)
    → localhost:{port} 확인
 
 2. Puppeteer 브라우저 시작:

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 출력
+```