@su-record/vibe 2.8.51 → 2.8.53

package/skills/vibe.figma.convert/rubrics/conversion-rules.md

@@ -1,113 +1,129 @@
-# Tree → Code Conversion Rules
-
-## Core Principle
-
-모든 CSS 값은 tree.json에서 직접 매핑한다. 추정하지 않는다.
-
-## Node → HTML Mapping (Do This First)
-
-각 노드를 순서대로 분류:
-
-| 노드 조건 | HTML 매핑 |
-|-----------|----------|
-| FRAME + Auto Layout | `<div>` + flex (direction/gap/padding 직접) |
-| FRAME + no Auto Layout | `<div>` + position:relative (자식 absolute) |
-| TEXT | `<span>` → Claude가 `<h2>/<p>/<button>` 승격 |
-| RECTANGLE/VECTOR + imageRef | `<img src="다운로드된 파일">` |
-| VECTOR/GROUP ≤ 64px | 아이콘 → `<img>` (렌더링 이미지) |
-| INSTANCE 반복 3+ | v-for (Vue) 또는 .map() (React) |
-| 크기 0px | 스킵 |
-| VECTOR 장식선 (w/h ≤ 2px) | 스킵 |
-
-## 배경 레이어 판별
-
-BG 프레임 (name에 "BG"/"bg" 또는 부모와 동일 크기 ±5%):
-  ❌ <img> 태그로 배경 처리 금지
-  ❌ position:absolute + inset:0 으로 이미지 배치 금지
-  ✅ 부모 요소에 CSS background-image로만 처리:
-     background-image: url('/images/{feature}/{section}-bg.webp');
-     background-size: cover;
-     background-position: center top;
-  ✅ BG 프레임은 HTML에 아무것도 렌더링하지 않음 (CSS만)
-
-## 이미지 vs HTML 판별 (각 노드마다 확인)
-
-```
-노드를 이미지로 처리하기 전에 반드시 확인:
-
-Q1. 이 노드에 TEXT 자식이 있는가?
-  YES → HTML로 구현 (텍스트는 이미지에 넣지 않는다)
-  NO → Q2로
-
-Q2. 이 노드가 INSTANCE 반복 패턴의 일부인가?
-  YES → HTML 반복 구조 (v-for/.map()) — 내부 이미지 에셋만 개별 추출
-  NO → Q3로
-
-Q3. 이 노드에 클릭/인터랙션이 필요한가? (btn, CTA, link, tab)
-  YES → HTML <button>/<a> — 이미지 금지
-  NO → Q4로
-
-Q4. 이 노드의 콘텐츠가 동적 데이터인가? (가격, 수량, 기간, 상태)
-  YES → HTML 텍스트 — 이미지 금지
-  NO → 이미지 렌더링 가능
-
-위 체크에서 하나라도 YES → HTML로 구현
-모두 NO → 이미지(벡터 글자, BG, 래스터, 복잡 그래픽)로 렌더링
-```
-
-## CSS 직접 매핑 규칙
-
-tree.json의 css 객체를 SCSS에 1:1 매핑한다:
-
-### layout/ 파일에 넣는 속성
-```
-display, flex-direction, justify-content, align-items,
-gap, padding, width, height, position, overflow, z-index, inset
-```
-
-### components/ 파일에 넣는 속성
-```
-background-color, color, font-family, font-size, font-weight,
-line-height, letter-spacing, text-align, border, border-radius,
-box-shadow, opacity, mix-blend-mode, filter, backdrop-filter
-```
-
-## 반응형 단위 변환 (scaleFactor 사용하지 않음)
-
-스토리보드 CONFIG에서 designWidth, minWidth 확보.
-
-**UI 요소 → vw 비례:**
-  vw값 = (Figma px / designWidth) × 100
-  적용: width, height, padding, gap, margin, border-radius,
-        border-width, box-shadow px, filter px, letter-spacing
-
-**폰트 → clamp(최소, vw, 최대):**
-  vw값 = (Figma px / designWidth) × 100
-  최소값 = 역할에 따라 결정:
-    h1~h2: 16px, h3~h4: 14px, 본문: 12px, 캡션: 10px, 버튼: 12px
-  최대값 = Figma 원본 px
-
-**변환하지 않는 속성:**
-  color, opacity, font-weight, font-family, z-index,
-  line-height(단위 없을 때), text-align, mix-blend-mode,
-  rotate, % 값
-
-## 장식 레이어 최적화
-
-BG 그룹 내 장식 요소가 10개 이상:
-  → 배경 이미지 1장 + 핵심 장식 2~3개만 유지
-  → 나머지 생략 (Phase 4 스크린샷 검증에서 확인)
-
-## Class Naming
-
-BEM 패턴: `.sectionName__childName`
-  - 부모: `.heroSection`
-  - 자식: `.heroSection__bg`, `.heroSection__title`, `.heroSection__shareBtn`
-  - template에서 사용한 모든 클래스가 SCSS에 정의되어야 함
-
-## 자가 검증 (코드 작성 후)
-
-- [ ] template 클래스 ↔ SCSS 클래스 1:1 일치
-- [ ] 모든 img src가 static/에 실제 존재
-- [ ] Auto Layout 노드 → SCSS에 flex 속성 존재
-- [ ] tree.json에 없는 CSS 값이 SCSS에 없음
+# Tree → Code Conversion Rules
+
+## Core Principle
+
+모든 CSS 값은 tree.json에서 직접 매핑한다. 추정하지 않는다.
+
+## Node → HTML Mapping (Do This First)
+
+각 노드를 순서대로 분류:
+
+| 노드 조건 | HTML 매핑 |
+|-----------|----------|
+| FRAME + Auto Layout | `<div>` + flex (direction/gap/padding 직접) |
+| FRAME + no Auto Layout | `<div>` + position:relative (자식 absolute) |
+| TEXT | `<span>` → Claude가 `<h2>/<p>/<button>` 승격 |
+| RECTANGLE/VECTOR + imageRef | `<img src="다운로드된 파일">` |
+| VECTOR/GROUP ≤ 64px | 아이콘 → `<img>` (렌더링 이미지) |
+| INSTANCE 반복 3+ | v-for (Vue) 또는 .map() (React) |
+| 크기 0px | 스킵 |
+| VECTOR 장식선 (w/h ≤ 2px) | 스킵 |
+
+## 배경 레이어 판별
+
+BG 프레임 (name에 "BG"/"bg" 또는 부모와 동일 크기 ±5%):
+  ❌ <img> 태그로 배경 처리 금지
+  ❌ position:absolute + inset:0 으로 이미지 배치 금지
+  ✅ 부모 요소에 CSS background-image로만 처리:
+     background-image: url('/images/{feature}/{section}-bg.webp');
+     background-size: cover;
+     background-position: center top;
+  ✅ BG 프레임은 HTML에 아무것도 렌더링하지 않음 (CSS만)
+
+## 이미지 vs HTML 판별 (각 노드마다 확인)
+
+```
+노드를 이미지로 처리하기 전에 반드시 확인:
+
+Q1. 이 노드에 TEXT 자식이 있는가?
+  YES → HTML로 구현 (텍스트는 이미지에 넣지 않는다)
+  NO → Q2로
+
+Q2. 이 노드가 INSTANCE 반복 패턴의 일부인가?
+  YES → HTML 반복 구조 (v-for/.map()) — 내부 이미지 에셋만 개별 추출
+  NO → Q3로
+
+Q3. 이 노드에 클릭/인터랙션이 필요한가? (btn, CTA, link, tab)
+  YES → HTML <button>/<a> — 이미지 금지
+  NO → Q4로
+
+Q4. 이 노드의 콘텐츠가 동적 데이터인가? (가격, 수량, 기간, 상태)
+  YES → HTML 텍스트 — 이미지 금지
+  NO → 이미지 렌더링 가능
+
+위 체크에서 하나라도 YES → HTML로 구현
+모두 NO → 이미지(벡터 글자, BG, 래스터, 복잡 그래픽)로 렌더링
+
+실제 테스트에서 발생한 잘못된 패턴:
+
+  ❌ <img src="hero-bg.webp" class="bg-img" />           → BG를 img 태그로
+  ❌ <img src="exchange-section1.webp" />                 → 카드 4개를 이미지 1장으로
+  ❌ <img src="daily-step2-list.webp" />                  → 보상 목록을 통째 이미지로
+  ❌ <img src="hero-period-bg-mo.webp" class="period-bg"> → Period BG를 img로
+
+  ✅ .heroSection { background-image: url('hero-bg.webp'); background-size: cover; }
+  ✅ <div v-for="card in cards" :key="card.id">
+       <img :src="card.icon" /> <span>{{ card.price }}</span>
+       <button>보상 교환하기</button>
+     </div>
+```
+
+## CSS 직접 매핑 규칙
+
+tree.json의 css 객체를 SCSS에 1:1 매핑한다:
+
+### layout/ 파일에 넣는 속성
+```
+display, flex-direction, justify-content, align-items,
+gap, padding, width, height, position, overflow, z-index, inset
+```
+
+### components/ 파일에 넣는 속성
+```
+background-color, color, font-family, font-size, font-weight,
+line-height, letter-spacing, text-align, border, border-radius,
+box-shadow, opacity, mix-blend-mode, filter, backdrop-filter
+```
+
+## 반응형 단위 변환 (scaleFactor 사용하지 않음)
+
+스토리보드 CONFIG에서 designWidth, minWidth 확보.
+
+**UI 요소 → vw 비례:**
+  vw값 = (Figma px / designWidth) × 100
+  적용: width, height, padding, gap, margin, border-radius,
+        border-width, box-shadow px, filter px, letter-spacing
+
+**폰트 → clamp(최소, vw, 최대):**
+  vw값 = (Figma px / designWidth) × 100
+  최소값 = 역할에 따라 결정:
+    h1~h2: 16px, h3~h4: 14px, 본문: 12px, 캡션: 10px, 버튼: 12px
+  최대값 = Figma 원본 px
+
+**변환하지 않는 속성:**
+  color, opacity, font-weight, font-family, z-index,
+  line-height(단위 없을 때), text-align, mix-blend-mode,
+  rotate, % 값
+
+## 장식 레이어 최적화
+
+BG 그룹 내 장식 요소가 10개 이상:
+  → 배경 이미지 1장 + 핵심 장식 2~3개만 유지
+  → 나머지 생략 (Phase 4 스크린샷 검증에서 확인)
+
+## Class Naming
+
+BEM 패턴: `.sectionName__childName`
+  - 부모: `.heroSection`
+  - 자식: `.heroSection__bg`, `.heroSection__title`, `.heroSection__shareBtn`
+  - template에서 사용한 모든 클래스가 SCSS에 정의되어야 함
+
+## 자가 검증 (코드 작성 후)
+
+- [ ] ⛔ BG 프레임이 <img> 태그로 처리되지 않았는가? (CSS background-image만 허용)
+- [ ] ⛔ TEXT 자식이 있는 프레임이 통째 이미지로 처리되지 않았는가?
+- [ ] ⛔ INSTANCE 반복 패턴(카드/아이템)이 이미지 1장으로 처리되지 않았는가?
+- [ ] template 클래스 ↔ SCSS 클래스 1:1 일치
+- [ ] 모든 img src가 static/에 실제 존재
+- [ ] Auto Layout 노드 → SCSS에 flex 속성 존재
+- [ ] tree.json에 없는 CSS 값이 SCSS에 없음

package/skills/vibe.figma.convert/templates/component.md

@@ -1,140 +1,140 @@
-# Component Output Template — Tree-Based Generation
-
-tree.json 노드를 기반으로 컴포넌트를 생성할 때 이 템플릿을 따른다.
-
----
-
-## Vue / Nuxt (External SCSS)
-
-```vue
-<!--
-  tree.json 구조:
-  {{SECTION_NAME}} ({{TYPE}} {{WIDTH}}x{{HEIGHT}})
-  ├── BG (FRAME — 배경 레이어)
-  │   └── imageRef → {{BG_IMAGE}}
-  ├── {{CHILD_1}} (FRAME — flex-column, gap:{{GAP}}px)
-  │   ├── TEXT "{{TEXT_1}}"
-  │   └── TEXT "{{TEXT_2}}"
-  └── {{CHILD_2}} (FRAME — flex-row, gap:{{GAP_2}}px)
-      └── INSTANCE × {{REPEAT_COUNT}} (반복 패턴)
--->
-<template>
-  <section class="{{sectionName}}">
-    <!-- BG: CSS background-image로 처리. img 태그 사용 금지! -->
-    <!-- SCSS: .{{sectionName}} { background-image: url('/images/{{FEATURE_KEY}}/{{bg-file}}.webp'); background-size: cover; } -->
-
-    <!-- {{CHILD_1}}: tree flex-column, gap:{{GAP}}px → 직접 매핑 -->
-    <div class="{{sectionName}}__{{child1Name}}">
-      <!-- TEXT 노드 → Claude가 시맨틱 태그 판단 -->
-      <h2 class="{{sectionName}}__title">{{TEXT_1}}</h2>
-      <p class="{{sectionName}}__desc">{{TEXT_2}}</p>
-    </div>
-
-    <!-- {{CHILD_2}}: INSTANCE 반복 → v-for -->
-    <ul class="{{sectionName}}__list">
-      <li
-        v-for="item in items"
-        :key="item.id"
-        class="{{sectionName}}__item"
-      >
-        <img :src="item.image" :alt="item.name" class="{{sectionName}}__itemImg" />
-        <span class="{{sectionName}}__itemLabel">{{ item.name }}</span>
-      </li>
-    </ul>
-  </section>
-</template>
-
-<script setup lang="ts">
-/**
- * {{SECTION_DISPLAY_NAME}}
- * tree.json: {{SECTION_NAME}} ({{TYPE}} {{WIDTH}}x{{HEIGHT}})
- *
- * [기능 정의]
- * - {{FEATURE_REQUIREMENT_1}}
- *
- * [인터랙션]
- * ① {{INTERACTION_1}}
- *
- * [상태] {{STATE_LIST}}
- */
-
-interface {{ItemType}} {
-  id: string
-  name: string
-  image: string
-}
-
-defineProps<{
-  items: {{ItemType}}[]
-}>()
-</script>
-<!-- styles: styles/{{FEATURE_KEY}}/layout/_{{section}}.scss + components/_{{section}}.scss -->
-```
-
----
-
-## SCSS Layout (tree.json → vw 반응형)
-
-```scss
-// tree.json 데이터:
-// {{SECTION_NAME}}: { width:{{WIDTH}}, height:{{HEIGHT}}, overflow:hidden }
-// {{CHILD_1}}: { display:flex, flexDirection:column, gap:{{GAP}}px, padding:"{{PADDING}}" }
-// designWidth = {{DESIGN_WIDTH}}px → vw = (px / designWidth) × 100
-
-.{{sectionName}} {
-  position: relative;
-  width: 100%;
-  height: {{HEIGHT_VW}}vw;               // tree: {{HEIGHT}} / {{DESIGN_WIDTH}} × 100
-  overflow: hidden;                       // tree: overflow:hidden
-  background-image: url('/images/{{FEATURE_KEY}}/{{section}}-bg.webp');
-  background-size: cover;
-  background-position: center top;
-}
-
-.{{sectionName}}__{{child1Name}} {
-  display: flex;                          // tree: display:flex
-  flex-direction: column;                 // tree: flexDirection:column
-  gap: {{GAP_VW}}vw;                      // tree: {{GAP}} / {{DESIGN_WIDTH}} × 100
-  padding: {{PADDING_VW}};               // tree: "{{PADDING}}" / {{DESIGN_WIDTH}} × 100
-}
-```
-
----
-
-## SCSS Components (tree.json → clamp 폰트)
-
-```scss
-// tree.json 데이터:
-// TEXT "{{TEXT_1}}": { fontSize:{{FONT_SIZE}}px, fontWeight:{{FONT_WEIGHT}}, color:{{COLOR}} }
-// designWidth = {{DESIGN_WIDTH}}px
-
-.{{sectionName}}__title {
-  // 역할: 제목 → 최소 16px
-  font-size: clamp(16px, {{FONT_SIZE_VW}}vw, {{FONT_SIZE}}px); // tree: {{FONT_SIZE}} / {{DESIGN_WIDTH}} × 100
-  font-weight: {{FONT_WEIGHT}};           // tree: 직접 (변환 안 함)
-  color: {{COLOR}};                       // tree: 직접 (변환 안 함)
-}
-```
-
----
-
-## React / Next.js 변환
-
-| Vue | React |
-|-----|-------|
-| `class="..."` | `className={styles.xxx}` (CSS Module) |
-| `v-for="i in items" :key="i.id"` | `{items.map(i => <X key={i.id} />)}` |
-| `v-if="condition"` | `{condition && <X />}` |
-| `@click="handler"` | `onClick={handler}` |
-| `<img src="/images/..."` | `<Image src="/images/..."` |
-
----
-
-## 검증 체크리스트
-
-- [ ] tree.json에 없는 CSS 값이 SCSS에 없음
-- [ ] template 클래스 ↔ SCSS 클래스 1:1 일치
-- [ ] 모든 img src가 static/에 실제 존재
-- [ ] TEXT 노드의 characters가 template에 그대로 삽입됨
-- [ ] Auto Layout 노드 → SCSS에 flex 속성 존재
-- [ ] 빌드 성공
+# Component Output Template — Tree-Based Generation
+
+tree.json 노드를 기반으로 컴포넌트를 생성할 때 이 템플릿을 따른다.
+
+---
+
+## Vue / Nuxt (External SCSS)
+
+```vue
+<!--
+  tree.json 구조:
+  {{SECTION_NAME}} ({{TYPE}} {{WIDTH}}x{{HEIGHT}})
+  ├── BG (FRAME — 배경 레이어)
+  │   └── imageRef → {{BG_IMAGE}}
+  ├── {{CHILD_1}} (FRAME — flex-column, gap:{{GAP}}px)
+  │   ├── TEXT "{{TEXT_1}}"
+  │   └── TEXT "{{TEXT_2}}"
+  └── {{CHILD_2}} (FRAME — flex-row, gap:{{GAP_2}}px)
+      └── INSTANCE × {{REPEAT_COUNT}} (반복 패턴)
+-->
+<template>
+  <section class="{{sectionName}}">
+    <!-- BG: CSS background-image로 처리. img 태그 사용 금지! -->
+    <!-- SCSS: .{{sectionName}} { background-image: url('/images/{{FEATURE_KEY}}/{{bg-file}}.webp'); background-size: cover; } -->
+
+    <!-- {{CHILD_1}}: tree flex-column, gap:{{GAP}}px → 직접 매핑 -->
+    <div class="{{sectionName}}__{{child1Name}}">
+      <!-- TEXT 노드 → Claude가 시맨틱 태그 판단 -->
+      <h2 class="{{sectionName}}__title">{{TEXT_1}}</h2>
+      <p class="{{sectionName}}__desc">{{TEXT_2}}</p>
+    </div>
+
+    <!-- {{CHILD_2}}: INSTANCE 반복 → v-for -->
+    <ul class="{{sectionName}}__list">
+      <li
+        v-for="item in items"
+        :key="item.id"
+        class="{{sectionName}}__item"
+      >
+        <img :src="item.image" :alt="item.name" class="{{sectionName}}__itemImg" />
+        <span class="{{sectionName}}__itemLabel">{{ item.name }}</span>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script setup lang="ts">
+/**
+ * {{SECTION_DISPLAY_NAME}}
+ * tree.json: {{SECTION_NAME}} ({{TYPE}} {{WIDTH}}x{{HEIGHT}})
+ *
+ * [기능 정의]
+ * - {{FEATURE_REQUIREMENT_1}}
+ *
+ * [인터랙션]
+ * ① {{INTERACTION_1}}
+ *
+ * [상태] {{STATE_LIST}}
+ */
+
+interface {{ItemType}} {
+  id: string
+  name: string
+  image: string
+}
+
+defineProps<{
+  items: {{ItemType}}[]
+}>()
+</script>
+<!-- styles: styles/{{FEATURE_KEY}}/layout/_{{section}}.scss + components/_{{section}}.scss -->
+```
+
+---
+
+## SCSS Layout (tree.json → vw 반응형)
+
+```scss
+// tree.json 데이터:
+// {{SECTION_NAME}}: { width:{{WIDTH}}, height:{{HEIGHT}}, overflow:hidden }
+// {{CHILD_1}}: { display:flex, flexDirection:column, gap:{{GAP}}px, padding:"{{PADDING}}" }
+// designWidth = {{DESIGN_WIDTH}}px → vw = (px / designWidth) × 100
+
+.{{sectionName}} {
+  position: relative;
+  width: 100%;
+  height: {{HEIGHT_VW}}vw;               // tree: {{HEIGHT}} / {{DESIGN_WIDTH}} × 100
+  overflow: hidden;                       // tree: overflow:hidden
+  background-image: url('/images/{{FEATURE_KEY}}/{{section}}-bg.webp');
+  background-size: cover;
+  background-position: center top;
+}
+
+.{{sectionName}}__{{child1Name}} {
+  display: flex;                          // tree: display:flex
+  flex-direction: column;                 // tree: flexDirection:column
+  gap: {{GAP_VW}}vw;                      // tree: {{GAP}} / {{DESIGN_WIDTH}} × 100
+  padding: {{PADDING_VW}};               // tree: "{{PADDING}}" / {{DESIGN_WIDTH}} × 100
+}
+```
+
+---
+
+## SCSS Components (tree.json → clamp 폰트)
+
+```scss
+// tree.json 데이터:
+// TEXT "{{TEXT_1}}": { fontSize:{{FONT_SIZE}}px, fontWeight:{{FONT_WEIGHT}}, color:{{COLOR}} }
+// designWidth = {{DESIGN_WIDTH}}px
+
+.{{sectionName}}__title {
+  // 역할: 제목 → 최소 16px
+  font-size: clamp(16px, {{FONT_SIZE_VW}}vw, {{FONT_SIZE}}px); // tree: {{FONT_SIZE}} / {{DESIGN_WIDTH}} × 100
+  font-weight: {{FONT_WEIGHT}};           // tree: 직접 (변환 안 함)
+  color: {{COLOR}};                       // tree: 직접 (변환 안 함)
+}
+```
+
+---
+
+## React / Next.js 변환
+
+| Vue | React |
+|-----|-------|
+| `class="..."` | `className={styles.xxx}` (CSS Module) |
+| `v-for="i in items" :key="i.id"` | `{items.map(i => <X key={i.id} />)}` |
+| `v-if="condition"` | `{condition && <X />}` |
+| `@click="handler"` | `onClick={handler}` |
+| `<img src="/images/..."` | `<Image src="/images/..."` |
+
+---
+
+## 검증 체크리스트
+
+- [ ] tree.json에 없는 CSS 값이 SCSS에 없음
+- [ ] template 클래스 ↔ SCSS 클래스 1:1 일치
+- [ ] 모든 img src가 static/에 실제 존재
+- [ ] TEXT 노드의 characters가 template에 그대로 삽입됨
+- [ ] Auto Layout 노드 → SCSS에 flex 속성 존재
+- [ ] 빌드 성공