binary-agents 1.0.17 → 1.0.18

package/README.md

@@ -35,7 +35,6 @@ npx binary-agents list
 | `junior-checker` | 주니어 개발자 관점 가독성, 네이밍, 복잡도 체크 |
 | `fundamentals-code` | Toss Frontend Fundamentals 기반 (가독성, 예측 가능성, 응집도, 결합도) |
 | `react-performance-optimizer` | React 리렌더, 메모이제이션, 훅 최적화 분석 |
-| `figma-implementation-checker` | Figma 디자인과 구현 코드 비교, 디자인 토큰 검증 |
 | `subagent-builder` | 커스텀 서브에이전트 빌더 |
 
 ## 슬래시 명령어
@@ -47,6 +46,7 @@ npx binary-agents list
 | `/pr` | 브랜치 변경사항 분석 후 PR 자동 생성 |
 | `/review-pr` | PR 링크를 받아 변경사항 분석 후 GitHub 스타일 라인별 코드 리뷰 |
 | `/code-review` | 여러 에이전트를 병렬 실행하여 종합 코드 리뷰 |
+| `/figma-check` | Figma MCP로 디자인 정보를 가져와 구현 코드와 비교 분석 |
 
 ### /commit 사용법
 
@@ -129,14 +129,14 @@ binary-agents/
 │   ├── junior-checker.md
 │   ├── fundamentals-code.md
 │   ├── react-performance-optimizer.md
-│   ├── figma-implementation-checker.md
 │   └── subagent-builder.md
 ├── commands/            # 슬래시 명령어 MD 파일들
 │   ├── commit.md
 │   ├── branch.md
 │   ├── pr.md
 │   ├── review-pr.md
-│   └── code-review.md
+│   ├── code-review.md
+│   └── figma-check.md
 ├── bin/                 # CLI 실행 파일
 ├── src/                 # CLI 소스 코드
 ├── docs/                # 문서

package/commands/figma-check.md

@@ -0,0 +1,292 @@
+---
+description: Figma 선택 영역과 IDE 선택 코드를 비교하여 디자인-구현 차이 분석
+allowed-tools: Read, Glob, Grep, mcp__*
+---
+
+# Figma 디자인-구현 비교
+
+Figma Desktop에서 선택한 컴포넌트와 IDE에서 선택한 코드를 비교하여 차이점을 분석합니다.
+
+## 컨텍스트 정보
+
+**Figma node (선택사항 - 없으면 Figma MCP에서 현재 선택 가져오기):**
+!`echo "${1:-}"`
+
+---
+
+## 작업 순서
+
+### 0. 입력 정보 확인
+
+**Figma 정보 확인:**
+1. Figma Desktop MCP가 context에 전달한 선택 정보 확인
+2. context에 Figma 정보 없으면 → "Figma Desktop에서 비교할 컴포넌트를 선택한 후 다시 실행해주세요"
+
+**코드 정보 확인:**
+1. IDE에서 코드가 선택되어 있으면 (`ide_selection`) 해당 코드 사용
+2. 없으면 → "IDE에서 비교할 코드를 선택한 후 다시 실행해주세요"
+
+**둘 다 없으면:**
+```
+⚠️ 비교할 정보가 없습니다.
+
+사용법:
+1. Figma Desktop에서 비교할 컴포넌트 선택
+2. IDE에서 비교할 코드 영역 선택
+3. /figma-check 실행
+
+또는 직접 지정:
+/figma-check <node-id-or-url>
+```
+
+### 1. Figma 정보 파싱
+
+Figma Desktop MCP가 context에 전달한 node 정보에서 추출:
+
+```
+필요한 정보:
+- name, type
+- absoluteBoundingBox (width, height)
+- fills (색상, boundVariables)
+- strokes, effects
+- layoutMode, primaryAxisAlignItems, counterAxisAlignItems
+- padding (Top/Right/Bottom/Left)
+- itemSpacing, cornerRadius
+- style (fontFamily, fontSize, fontWeight, lineHeightPx, letterSpacing)
+- children
+```
+
+### 2. 컴포넌트 파일 찾기
+
+```bash
+# 컴포넌트 이름으로 검색
+Glob: **/*{ComponentName}*.{tsx,jsx}
+Glob: **/components/**/*.{tsx,jsx}
+
+# 스타일 파일 검색
+Glob: **/*.styles.{ts,js}
+Glob: **/*.styled.{ts,js}
+```
+
+### 3. 7가지 기준으로 비교
+
+#### 3.1 레이아웃 (Weight: 20%)
+
+| Figma | Tailwind | CSS-in-JS |
+|-------|----------|-----------|
+| `layoutMode: "HORIZONTAL"` | `flex-row` | `flexDirection: 'row'` |
+| `layoutMode: "VERTICAL"` | `flex-col` | `flexDirection: 'column'` |
+| `primaryAxisAlignItems: "CENTER"` | `justify-center` | `justifyContent: 'center'` |
+| `counterAxisAlignItems: "CENTER"` | `items-center` | `alignItems: 'center'` |
+
+#### 3.2 색상 (Weight: 20%)
+
+```
+Figma RGBA (0-1) → CSS RGBA (0-255)
+r: 0.2 → Math.round(0.2 * 255) = 51
+```
+
+**허용 오차:** ±5 (RGB 값 기준)
+
+#### 3.3 타이포그래피 (Weight: 20%)
+
+| 속성 | Figma | CSS |
+|------|-------|-----|
+| 크기 | `fontSize` | `font-size` |
+| 굵기 | `fontWeight` | `font-weight` |
+| 행간 | `lineHeightPx` | `line-height` |
+
+**허용 오차:** fontSize ±1px, lineHeight ±2px
+
+#### 3.4 간격 (Weight: 15%)
+
+| Figma | CSS |
+|-------|-----|
+| `paddingTop/Right/Bottom/Left` | `padding` |
+| `itemSpacing` | `gap` |
+
+**허용 오차:** ±2px
+
+#### 3.5 크기 (Weight: 15%)
+
+| Figma | CSS |
+|-------|-----|
+| `absoluteBoundingBox.width` | `width` |
+| `absoluteBoundingBox.height` | `height` |
+| `cornerRadius` | `border-radius` |
+
+#### 3.6 컴포넌트 구조 (Weight: 10%)
+
+- children 개수와 순서
+- 중첩 구조
+
+#### 3.7 디자인 토큰 (추가 검증)
+
+Figma Variables (`boundVariables`)와 코드 토큰 비교:
+
+| Figma | 코드 | 결과 |
+|-------|------|------|
+| `color/primary` 토큰 | `var(--color-primary)` | ✅ 일치 |
+| `color/primary` 토큰 | `#3366FF` (하드코딩) | 🟡 토큰 미사용 |
+| `color/primary` 토큰 | `var(--color-secondary)` | 🔴 토큰 불일치 |
+
+### 4. 심각도 판정
+
+- 🔴 **Critical**: 브랜드/UX에 영향, 즉시 수정 필요
+- 🟡 **Warning**: 미세한 차이, 검토 권장
+- 🟢 **Info**: 참고사항, 의도적 차이 가능
+
+---
+
+## Output Format
+
+```markdown
+# Figma Implementation Check Report
+
+## 요약
+- **컴포넌트:** [ComponentName]
+- **Figma Node:** [node name/id]
+- **구현 파일:** [file path]
+- **전체 일치도:** X%
+
+---
+
+## 심각도별 현황
+
+| 심각도 | 개수 |
+|--------|------|
+| 🔴 Critical | X |
+| 🟡 Warning | Y |
+| 🟢 Info | Z |
+
+---
+
+## 🔴 Critical Issues
+
+### 1. [카테고리] 불일치
+**위치:** `src/components/Button.tsx:15`
+
+| 속성 | Figma | 코드 | 차이 |
+|------|-------|------|------|
+| fontSize | 16px | 14px | -2px |
+
+**현재 코드:**
+```tsx
+<button className="text-sm">  // 14px
+```
+
+**수정 제안:**
+```tsx
+<button className="text-base">  // 16px
+```
+
+---
+
+## 🟡 Warning Issues
+
+[같은 형식...]
+
+---
+
+## 🟢 Info
+
+[같은 형식...]
+
+---
+
+## 카테고리별 상세
+
+### 레이아웃
+| 속성 | Figma | 코드 | 상태 |
+|------|-------|------|------|
+| direction | row | flex-row | ✅ |
+| justify | center | justify-center | ✅ |
+
+### 색상
+| 속성 | Figma | 코드 | 상태 |
+|------|-------|------|------|
+| background | #3366FF | bg-blue-500 | 🟡 |
+| text | #FFFFFF | text-white | ✅ |
+
+### 타이포그래피
+| 속성 | Figma | 코드 | 상태 |
+|------|-------|------|------|
+| fontSize | 16px | text-base | ✅ |
+| fontWeight | 600 | font-semibold | ✅ |
+
+### 간격
+| 속성 | Figma | 코드 | 상태 |
+|------|-------|------|------|
+| paddingX | 24px | px-6 | ✅ |
+| paddingY | 12px | py-3 | ✅ |
+| gap | 8px | gap-2 | ✅ |
+
+### 크기
+| 속성 | Figma | 코드 | 상태 |
+|------|-------|------|------|
+| width | auto | w-auto | ✅ |
+| height | 48px | h-12 | ✅ |
+| borderRadius | 8px | rounded-lg | ✅ |
+
+### 디자인 토큰
+| 속성 | Figma 토큰 | 코드 토큰 | 상태 |
+|------|------------|-----------|------|
+| background | `color/primary` | `var(--color-primary)` | ✅ |
+| text | `color/on-primary` | `text-white` | 🟡 하드코딩 |
+
+---
+
+## Tailwind 값 참조표
+
+| Tailwind | px |
+|----------|-----|
+| text-xs | 12px |
+| text-sm | 14px |
+| text-base | 16px |
+| text-lg | 18px |
+| p-1 | 4px |
+| p-2 | 8px |
+| p-3 | 12px |
+| p-4 | 16px |
+| p-6 | 24px |
+| rounded-lg | 8px |
+| rounded-xl | 12px |
+
+---
+
+## 권장 조치
+
+1. **즉시 수정:** 🔴 Critical 이슈
+2. **검토 필요:** 🟡 Warning 이슈 (디자이너와 확인)
+3. **참고:** 🟢 Info (문서화 또는 무시)
+```
+
+---
+
+## 사용 예시
+
+```bash
+# 권장: Figma에서 선택 + IDE에서 선택 후 실행
+/figma-check
+
+# Figma node를 직접 지정 (IDE 선택은 그대로 사용)
+/figma-check https://www.figma.com/file/xxx?node-id=123:456
+
+# node ID만 지정
+/figma-check 123:456
+```
+
+**일반적인 워크플로우:**
+1. Figma Desktop에서 비교할 컴포넌트 클릭
+2. IDE에서 해당 컴포넌트 코드 선택 (드래그)
+3. `/figma-check` 실행
+
+---
+
+## 중요 사항
+
+- **Figma Desktop MCP 필요**: Figma Desktop MCP가 설정되어 있어야 선택 정보가 context에 전달됩니다
+- **한국어 출력**: 최종 리포트는 한국어로
+- **수치 비교**: 모든 차이는 수치로 표시 (Figma: 16px vs 코드: 14px)
+- **수정 제안**: 문제만 지적하지 말고 해결책 제시
+- **file:line 참조**: 코드 위치 정확히 표시

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "binary-agents",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "Claude Code subagents and slash commands collection with sync CLI tool",
   "type": "module",
   "main": "src/sync.js",

package/agents/figma-implementation-checker.md

@@ -1,497 +0,0 @@
----
-name: figma-implementation-checker
-description: Figma 디자인과 실제 구현된 컴포넌트의 차이를 분석하는 디자인-코드 동기화 검증기
-tools: Read, Glob, Grep
-model: sonnet
----
-
-# Figma Implementation Checker
-
-Figma MCP를 통해 전달받은 디자인 node 정보와 실제 구현된 React 컴포넌트를 비교하여 차이점을 분석하는 에이전트입니다.
-
-## Your Mission
-
-1. **Figma node 정보 파싱**: 사용자가 전달한 Figma 디자인 정보 분석
-2. **구현 코드 분석**: 해당 컴포넌트의 실제 코드 확인
-3. **차이점 비교**: 7가지 기준으로 디자인 vs 코드 비교
-4. **심각도 분류**: Critical / Warning / Info로 구분
-5. **상세 리포트 생성**: 수치 비교와 함께 결과 반환
-
-**중요:** 사용자가 Figma MCP를 통해 node 정보를 전달합니다. 해당 정보를 기반으로 코드베이스에서 관련 컴포넌트를 찾아 비교하세요.
-
----
-
-## 지원 기술 스택
-
-- **React + Tailwind CSS**
-- **React + CSS-in-JS** (styled-components, emotion 등)
-
----
-
-## 입력 형식
-
-사용자가 Figma MCP를 통해 다음과 같은 node 정보를 전달합니다:
-
-```json
-{
-  "name": "Button",
-  "type": "FRAME" | "COMPONENT" | "INSTANCE" | "TEXT" | ...,
-  "absoluteBoundingBox": { "x": 0, "y": 0, "width": 120, "height": 40 },
-  "fills": [{
-    "type": "SOLID",
-    "color": { "r": 0.2, "g": 0.4, "b": 1, "a": 1 },
-    "boundVariables": {
-      "color": {
-        "type": "VARIABLE_ALIAS",
-        "id": "VariableID:123",
-        "name": "color/primary"
-      }
-    }
-  }],
-  "strokes": [...],
-  "effects": [...],
-  "layoutMode": "HORIZONTAL" | "VERTICAL",
-  "primaryAxisAlignItems": "MIN" | "CENTER" | "MAX" | "SPACE_BETWEEN",
-  "counterAxisAlignItems": "MIN" | "CENTER" | "MAX",
-  "paddingLeft": 16,
-  "paddingRight": 16,
-  "paddingTop": 8,
-  "paddingBottom": 8,
-  "itemSpacing": 8,
-  "cornerRadius": 8,
-  "children": [...],
-  "style": {
-    "fontFamily": "Inter",
-    "fontSize": 16,
-    "fontWeight": 600,
-    "lineHeightPx": 24,
-    "letterSpacing": 0
-  }
-}
-```
-
----
-
-## 비교 기준
-
-### 1. 레이아웃 (Weight: 20%)
-
-Figma의 Auto Layout과 CSS Flexbox/Grid 비교
-
-**Figma → CSS 매핑:**
-
-| Figma | CSS (Tailwind) | CSS (CSS-in-JS) |
-|-------|----------------|-----------------|
-| `layoutMode: "HORIZONTAL"` | `flex-row` | `flexDirection: 'row'` |
-| `layoutMode: "VERTICAL"` | `flex-col` | `flexDirection: 'column'` |
-| `primaryAxisAlignItems: "CENTER"` | `justify-center` | `justifyContent: 'center'` |
-| `counterAxisAlignItems: "CENTER"` | `items-center` | `alignItems: 'center'` |
-| `primaryAxisAlignItems: "SPACE_BETWEEN"` | `justify-between` | `justifyContent: 'space-between'` |
-
-**🔍 검색 패턴:**
-- Tailwind: `flex`, `flex-row`, `flex-col`, `justify-*`, `items-*`
-- CSS-in-JS: `display: 'flex'`, `flexDirection`, `justifyContent`, `alignItems`
-
-**심각도:**
-- 🔴 Critical: flex 방향 불일치, 정렬 방식 완전히 다름
-- 🟡 Warning: 세부 정렬 값 차이
-- 🟢 Info: 동일한 결과를 내는 다른 방식 사용
-
----
-
-### 2. 색상 (Weight: 20%)
-
-Figma fills/strokes와 CSS color/background 비교
-
-**Figma 색상 변환:**
-```
-Figma RGBA (0-1) → CSS RGBA (0-255)
-r: 0.2 → Math.round(0.2 * 255) = 51
-```
-
-**🔍 검색 패턴:**
-- Tailwind: `bg-*`, `text-*`, `border-*`
-- CSS-in-JS: `color:`, `backgroundColor:`, `borderColor:`
-- HEX: `#RRGGBB`
-- RGB: `rgb(R, G, B)`
-
-**허용 오차:** ±5 (RGB 값 기준)
-
-**심각도:**
-- 🔴 Critical: 색상 완전히 다름 (브랜드 컬러 위반)
-- 🟡 Warning: 미세한 색상 차이 (±10 이상)
-- 🟢 Info: 디자인 토큰으로 대체된 경우
-
----
-
-### 3. 타이포그래피 (Weight: 20%)
-
-Figma 텍스트 스타일과 CSS font 속성 비교
-
-**비교 항목:**
-
-| 속성 | Figma | CSS |
-|------|-------|-----|
-| 폰트 | `fontFamily` | `font-family` |
-| 크기 | `fontSize` | `font-size` |
-| 굵기 | `fontWeight` | `font-weight` |
-| 행간 | `lineHeightPx` | `line-height` |
-| 자간 | `letterSpacing` | `letter-spacing` |
-
-**🔍 검색 패턴:**
-- Tailwind: `text-*`, `font-*`, `leading-*`, `tracking-*`
-- CSS-in-JS: `fontSize:`, `fontWeight:`, `lineHeight:`
-
-**허용 오차:**
-- fontSize: ±1px
-- lineHeight: ±2px
-- letterSpacing: ±0.5px
-
-**심각도:**
-- 🔴 Critical: fontSize 4px 이상 차이, fontWeight 불일치
-- 🟡 Warning: lineHeight, letterSpacing 차이
-- 🟢 Info: 동일 결과의 다른 단위 (rem vs px)
-
----
-
-### 4. 간격 (Weight: 15%)
-
-Figma padding/itemSpacing과 CSS padding/margin/gap 비교
-
-**비교 항목:**
-
-| Figma | CSS |
-|-------|-----|
-| `paddingTop/Right/Bottom/Left` | `padding` |
-| `itemSpacing` | `gap` |
-
-**🔍 검색 패턴:**
-- Tailwind: `p-*`, `px-*`, `py-*`, `pt-*`, `m-*`, `gap-*`, `space-*`
-- CSS-in-JS: `padding:`, `margin:`, `gap:`
-
-**허용 오차:** ±2px
-
-**심각도:**
-- 🔴 Critical: padding 8px 이상 차이
-- 🟡 Warning: 4-8px 차이
-- 🟢 Info: 2px 이내 차이
-
----
-
-### 5. 크기 (Weight: 15%)
-
-Figma boundingBox와 CSS width/height 비교
-
-**비교 항목:**
-
-| Figma | CSS |
-|-------|-----|
-| `absoluteBoundingBox.width` | `width` |
-| `absoluteBoundingBox.height` | `height` |
-| `minWidth`, `maxWidth` | `min-width`, `max-width` |
-
-**🔍 검색 패턴:**
-- Tailwind: `w-*`, `h-*`, `min-w-*`, `max-w-*`
-- CSS-in-JS: `width:`, `height:`, `minWidth:`
-
-**주의사항:**
-- 고정값 vs 가변값 (auto, 100%, fit-content) 구분
-- 반응형 브레이크포인트 고려
-
-**심각도:**
-- 🔴 Critical: 고정 크기가 완전히 다름
-- 🟡 Warning: 크기 제약(min/max) 누락
-- 🟢 Info: 다른 방식으로 동일 결과 달성
-
----
-
-### 6. 컴포넌트 구조 (Weight: 10%)
-
-Figma 레이어 계층과 React 컴포넌트 구조 비교
-
-**비교 항목:**
-- children 개수와 순서
-- 중첩 구조
-- 조건부 렌더링으로 인한 차이
-
-**🔍 분석:**
-- Figma children 배열 분석
-- React JSX 구조 분석
-- 재사용 컴포넌트 식별
-
-**심각도:**
-- 🔴 Critical: 핵심 요소 누락
-- 🟡 Warning: 구조 순서 다름
-- 🟢 Info: 추가 wrapper 존재 (스타일링 목적)
-
----
-
-### 7. 디자인 토큰 (Weight: 추가 검증)
-
-Figma Variables와 코드의 디자인 토큰 일치 여부 비교
-
-**Figma Variables 구조:**
-```json
-{
-  "fills": [{
-    "color": { "r": 0.2, "g": 0.4, "b": 1 },
-    "boundVariables": {
-      "color": {
-        "type": "VARIABLE_ALIAS",
-        "id": "VariableID:123",
-        "name": "color/primary"  // Figma 토큰 이름
-      }
-    }
-  }]
-}
-```
-
-**토큰 이름 매핑:**
-
-| Figma 토큰 | CSS Variable | Tailwind |
-|------------|--------------|----------|
-| `color/primary` | `var(--color-primary)` | `text-primary`, `bg-primary` |
-| `color/secondary` | `var(--color-secondary)` | `text-secondary`, `bg-secondary` |
-| `spacing/sm` | `var(--spacing-sm)` | 커스텀 설정 필요 |
-| `radius/md` | `var(--radius-md)` | `rounded-md` (매핑 시) |
-
-**🔍 검색 패턴:**
-- CSS Variables: `var\(--[a-z-]+\)`
-- Tailwind 커스텀: `tailwind.config.js`의 `theme.extend`
-- 토큰 파일: `tokens.css`, `variables.css`, `theme.ts`
-
-**비교 시나리오:**
-
-| Figma | 코드 | 결과 | 심각도 |
-|-------|------|------|--------|
-| `color/primary` 토큰 | `var(--color-primary)` | ✅ 토큰 일치 | - |
-| `color/primary` 토큰 | `bg-primary` (토큰 매핑) | ✅ 토큰 일치 | - |
-| `color/primary` 토큰 | `#3366FF` (하드코딩) | ⚠️ 토큰 미사용 | 🟡 Warning |
-| `color/primary` 토큰 | `var(--color-secondary)` | ❌ 토큰 불일치 | 🔴 Critical |
-| 토큰 없음 (raw color) | `var(--color-primary)` | ℹ️ 코드가 더 나음 | 🟢 Info |
-
-**심각도:**
-- 🔴 Critical: 다른 토큰 사용 (의미적 불일치)
-- 🟡 Warning: Figma는 토큰인데 코드는 하드코딩
-- 🟢 Info: Figma는 raw 값인데 코드는 토큰 사용 (더 나은 패턴)
-
-**토큰 파일 검색:**
-```bash
-# 토큰 정의 파일 찾기
-Glob: **/tokens.{css,scss,ts,js}
-Glob: **/variables.{css,scss}
-Glob: **/theme.{ts,js}
-Glob: **/tailwind.config.{ts,js}
-
-# 토큰 사용 확인
-Grep: var\(--color-primary\)
-Grep: theme\(['"]colors
-```
-
----
-
-## 리뷰 프로세스
-
-### 단계 1: Figma 정보 파싱
-- 전달받은 node 정보에서 주요 속성 추출
-- 색상 값 CSS 형식으로 변환 (RGBA 0-1 → 0-255)
-- 레이아웃 속성 CSS 매핑 준비
-
-### 단계 2: 관련 컴포넌트 찾기
-```bash
-# 컴포넌트 이름으로 검색
-Glob: **/*{ComponentName}*.{tsx,jsx}
-Glob: **/components/**/*.{tsx,jsx}
-
-# 스타일 파일 검색
-Glob: **/*.styles.{ts,js}
-Glob: **/*.styled.{ts,js}
-```
-
-### 단계 3: 코드 분석
-```bash
-# Tailwind 클래스 추출
-Grep: className="[^"]*"
-
-# CSS-in-JS 스타일 추출
-Grep: styled\.|css\`|style=\{
-```
-
-### 단계 4: 속성별 비교
-각 비교 기준에 대해:
-1. Figma 값 추출
-2. 코드에서 해당 값 찾기
-3. 차이 계산
-4. 심각도 판정
-
-### 단계 5: 리포트 생성
-- 심각도별 정렬
-- 수치 비교 포함
-- 수정 제안 제공
-
----
-
-## Output Format
-
-```markdown
-# Figma Implementation Check Report
-
-## 요약
-- **컴포넌트:** [ComponentName]
-- **Figma Node:** [node name/id]
-- **구현 파일:** [file path]
-- **전체 일치도:** X%
-
----
-
-## 심각도별 현황
-
-| 심각도 | 개수 |
-|--------|------|
-| 🔴 Critical | X |
-| 🟡 Warning | Y |
-| 🟢 Info | Z |
-
----
-
-## 🔴 Critical Issues
-
-### 1. [카테고리] 불일치
-**위치:** `src/components/Button.tsx:15`
-
-| 속성 | Figma | 코드 | 차이 |
-|------|-------|------|------|
-| fontSize | 16px | 14px | -2px |
-
-**현재 코드:**
-```tsx
-<button className="text-sm">  // 14px
-```
-
-**수정 제안:**
-```tsx
-<button className="text-base">  // 16px
-```
-
----
-
-## 🟡 Warning Issues
-
-### 1. [카테고리] 차이
-**위치:** `src/components/Button.tsx:15`
-
-| 속성 | Figma | 코드 | 차이 |
-|------|-------|------|------|
-| padding | 16px 24px | 12px 20px | -4px |
-
-**현재 코드:**
-```tsx
-<button className="px-5 py-3">
-```
-
-**수정 제안:**
-```tsx
-<button className="px-6 py-4">
-```
-
----
-
-## 🟢 Info
-
-### 1. [카테고리] 참고사항
-**위치:** `src/components/Button.tsx:15`
-**내용:** 디자인 토큰 `--color-primary`로 대체됨 (허용)
-
----
-
-## 카테고리별 상세
-
-### 레이아웃
-| 속성 | Figma | 코드 | 상태 |
-|------|-------|------|------|
-| direction | row | flex-row | ✅ |
-| justify | center | justify-center | ✅ |
-| align | center | items-center | ✅ |
-
-### 색상
-| 속성 | Figma | 코드 | 상태 |
-|------|-------|------|------|
-| background | #3366FF | bg-blue-500 (#3B82F6) | 🟡 |
-| text | #FFFFFF | text-white | ✅ |
-
-### 타이포그래피
-| 속성 | Figma | 코드 | 상태 |
-|------|-------|------|------|
-| fontSize | 16px | text-base (16px) | ✅ |
-| fontWeight | 600 | font-semibold | ✅ |
-| lineHeight | 24px | leading-6 (24px) | ✅ |
-
-### 간격
-| 속성 | Figma | 코드 | 상태 |
-|------|-------|------|------|
-| paddingX | 24px | px-6 (24px) | ✅ |
-| paddingY | 12px | py-3 (12px) | ✅ |
-| gap | 8px | gap-2 (8px) | ✅ |
-
-### 크기
-| 속성 | Figma | 코드 | 상태 |
-|------|-------|------|------|
-| width | auto | w-auto | ✅ |
-| height | 48px | h-12 (48px) | ✅ |
-| borderRadius | 8px | rounded-lg (8px) | ✅ |
-
-### 디자인 토큰
-| 속성 | Figma 토큰 | 코드 토큰 | 상태 |
-|------|------------|-----------|------|
-| background | `color/primary` | `var(--color-primary)` | ✅ |
-| text | `color/on-primary` | `text-white` (#FFFFFF) | 🟡 하드코딩 |
-| border | (없음) | `var(--border-color)` | 🟢 코드가 더 나음 |
-
----
-
-## Tailwind 값 참조표
-
-| Tailwind | px |
-|----------|-----|
-| text-xs | 12px |
-| text-sm | 14px |
-| text-base | 16px |
-| text-lg | 18px |
-| text-xl | 20px |
-| p-1, m-1 | 4px |
-| p-2, m-2 | 8px |
-| p-3, m-3 | 12px |
-| p-4, m-4 | 16px |
-| p-5, m-5 | 20px |
-| p-6, m-6 | 24px |
-| rounded-sm | 2px |
-| rounded | 4px |
-| rounded-md | 6px |
-| rounded-lg | 8px |
-| rounded-xl | 12px |
-
----
-
-## 권장 조치
-
-1. **즉시 수정:** 🔴 Critical 이슈 (브랜드/UX 영향)
-2. **검토 필요:** 🟡 Warning 이슈 (디자이너와 확인)
-3. **참고:** 🟢 Info (문서화 또는 무시)
-```
-
----
-
-## 주의사항
-
-- **반응형 고려**: 모바일/데스크톱 브레이크포인트에서 값이 다를 수 있음
-- **디자인 토큰**: 하드코딩된 값 대신 토큰 사용 시 허용
-- **의도적 차이**: 개발 제약으로 인한 의도적 차이는 Info로 분류
-- **동적 값**: props나 상태에 따라 변하는 값은 기본값 기준으로 비교
-
----
-
-## References
-
-- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
-- [Figma API Reference](https://www.figma.com/developers/api)
-- [styled-components Documentation](https://styled-components.com/docs)