@su-record/vibe 2.8.14 → 2.8.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -38,18 +38,46 @@ URL에서 fileKey, nodeId 추출:
|
|
|
38
38
|
→ nodeId: 하이픈을 콜론으로 ("1-109" → "1:109")
|
|
39
39
|
|
|
40
40
|
1. get_metadata(fileKey, nodeId) → 전체 프레임 목록
|
|
41
|
-
2. 관련 섹션별 get_design_context:
|
|
42
|
-
- "해상도 대응" / "Media Query" → 브레이크포인트
|
|
41
|
+
2. 관련 섹션별 get_design_context 또는 get_screenshot:
|
|
42
|
+
- "해상도 대응" / "Media Query" → 브레이크포인트 + ⚠️ 디자인 시안 사이즈
|
|
43
43
|
- "인터랙션" / "Interaction" → 호버/클릭/스크롤 스펙
|
|
44
44
|
- "애니메이션" / "Animation" / "Motion" → 트랜지션 스펙
|
|
45
45
|
- "상태" / "State" → 로딩/에러/성공 UI
|
|
46
46
|
- "컬러" / "Color" / "타이포" / "Typography" → 디자인 가이드
|
|
47
47
|
```
|
|
48
48
|
|
|
49
|
+
### ⚠️ 해상도 대응 프레임에서 반드시 추출해야 하는 값
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
Media Query Guide에서 추출:
|
|
53
|
+
1. PC Main Target: 1920px (실제 타겟 해상도)
|
|
54
|
+
2. Breakpoint: 1024px (PC↔Mobile 경계)
|
|
55
|
+
3. Mobile Portrait: ~480px
|
|
56
|
+
4. Mobile Minimum: 360px~
|
|
57
|
+
5. ⚠️ 디자인 시안 PC: 2560px (Figma 아트보드 크기)
|
|
58
|
+
6. ⚠️ 디자인 시안 Mobile: 720px (Figma 아트보드 크기)
|
|
59
|
+
|
|
60
|
+
디자인 시안 사이즈가 없으면 Step B에서 스케일 팩터를 계산할 수 없음:
|
|
61
|
+
Figma 값 × (타겟 / 시안) = 실제 코드 값
|
|
62
|
+
예: Figma PC font-size 48px × (1920/2560) = 36px
|
|
63
|
+
예: Figma Mobile font-size 28px × (480/720) = 18.67px → 19px
|
|
64
|
+
```
|
|
65
|
+
|
|
49
66
|
추출 결과를 `storyboardSpec`으로 저장:
|
|
50
67
|
```
|
|
51
68
|
storyboardSpec = {
|
|
52
|
-
breakpoints: {
|
|
69
|
+
breakpoints: {
|
|
70
|
+
pcTarget: 1920, // PC 타겟 해상도
|
|
71
|
+
breakpoint: 1024, // PC↔Mobile 경계
|
|
72
|
+
mobilePortrait: 480, // Mobile portrait max
|
|
73
|
+
mobileMinimum: 360, // Mobile minimum
|
|
74
|
+
designPc: 2560, // ⚠️ Figma PC 시안 사이즈
|
|
75
|
+
designMobile: 720, // ⚠️ Figma Mobile 시안 사이즈
|
|
76
|
+
},
|
|
77
|
+
scaleFactor: {
|
|
78
|
+
pc: 1920 / 2560, // = 0.75 (PC 스케일)
|
|
79
|
+
mobile: 480 / 720, // = 0.667 (Mobile 스케일)
|
|
80
|
+
},
|
|
53
81
|
interactions: [ ... ],
|
|
54
82
|
animations: [ ... ],
|
|
55
83
|
states: { ... },
|
|
@@ -85,16 +85,23 @@ for each (designFrame, component) in mappings:
|
|
|
85
85
|
→ WebFetch로 다운로드 → static/images/{feature}/ 저장
|
|
86
86
|
→ URL→로컬경로 매핑 테이블에 추가
|
|
87
87
|
|
|
88
|
-
3. 스크린샷
|
|
88
|
+
3. 스크린샷 분석 + ⚠️ 스케일 팩터 적용:
|
|
89
89
|
→ 레이아웃 (flex/grid 방향, 정렬)
|
|
90
|
-
→ 색상 (배경, 텍스트, 보더)
|
|
91
|
-
→ 타이포 (크기, 굵기, 줄간격)
|
|
92
|
-
→ 간격 (padding, gap, margin)
|
|
90
|
+
→ 색상 (배경, 텍스트, 보더) — 스케일 불필요
|
|
91
|
+
→ 타이포 (크기, 굵기, 줄간격) — ⚠️ 스케일 팩터 적용
|
|
92
|
+
→ 간격 (padding, gap, margin) — ⚠️ 스케일 팩터 적용
|
|
93
93
|
→ 배경 이미지 구조 (Multi-Layer: Bg/Overlay/Content)
|
|
94
94
|
|
|
95
|
-
|
|
95
|
+
⚠️ Figma 값을 코드에 넣을 때 반드시 scaleFactor 적용:
|
|
96
|
+
코드 값 = Figma 추출 값 × scaleFactor
|
|
97
|
+
예: Figma font-size 48px × 0.75 (PC) = 36px
|
|
98
|
+
예: Figma padding 60px × 0.667 (Mobile) = 40px
|
|
99
|
+
scaleFactor는 Step A의 storyboardSpec.scaleFactor에서 참조
|
|
100
|
+
스토리보드 없으면 디폴트: PC 0.75 (1920/2560), Mobile 0.667 (480/720)
|
|
101
|
+
|
|
102
|
+
4. component 파일에 반영 (Edit 도구):
|
|
96
103
|
→ <template> 안의 placeholder를 실제 마크업으로 교체
|
|
97
|
-
→ <style> 블록에
|
|
104
|
+
→ <style> 블록에 스케일 적용된 스타일 작성
|
|
98
105
|
→ 이미지 경로를 로컬 경로로 교체
|
|
99
106
|
→ Step A의 기능 주석과 핸들러는 보존
|
|
100
107
|
```
|