# 스타일 리팩토링 프롬프트 템플릿

기존 컴포넌트의 스타일을 디자인 시스템에 맞게 리팩토링할 때 사용한다.

---

## 기본 템플릿

```
[파일] frontend/src/components/{경로}/{ComponentName}.tsx (또는 pages/...)

[계약]
- 기존 Props 인터페이스 유지 (변경 금지)
- 기존 비즈니스 로직 유지 (변경 금지)
- className prop 추가 허용

[참조]
- docs/design/colors.md
- docs/design/components.md
- docs/design/code-conventions.md

[제약]
- 하드코딩 색상(HEX, Tailwind 기본 팔레트)을 CSS 변수 토큰으로 교체
- 임의 px 여백을 4px 스케일 Tailwind 클래스로 교체
- cn() 유틸리티 도입 (src/utils/cn.ts)
- Lucide React 외 아이콘 라이브러리 제거
- any 타입 금지
- console.log 제거
```

---

## 실제 사용 예시

### 색상 토큰 교체

```
[파일] frontend/src/pages/apihub/ApiHubServicePage.tsx

[계약]
- 기존 Props 및 로직 유지
- API 호출 로직 변경 금지

[참조] docs/design/colors.md

[제약]
- bg-white → bg-[var(--color-bg-surface)]
- bg-gray-50 → bg-[var(--color-bg-base)]
- text-gray-900 → text-[var(--color-text-primary)]
- text-gray-600 → text-[var(--color-text-secondary)]
- text-gray-400 → text-[var(--color-text-tertiary)]
- border-gray-200 → border-[var(--color-border)]
- border-gray-400 → border-[var(--color-border-strong)]
- bg-blue-600 → bg-[var(--color-primary)]
- text-blue-600 → text-[var(--color-primary)]
- text-green-* → text-[var(--color-success)]
- text-red-* → text-[var(--color-danger)]
- text-yellow-* → text-[var(--color-warning)]
```

### cn() 도입

```
[파일] frontend/src/components/SomeComponent.tsx

[계약]
- 기존 Props 유지

[제약]
- 조건부 className 처리를 cn() 유틸리티로 통일
- className prop 노출 추가
- 클래스 충돌 제거
```

### 컴포넌트 분리 없는 스타일 정리

```
[파일] frontend/src/layouts/ApiHubLayout.tsx

[계약]
- 레이아웃 구조 유지
- 자식 컴포넌트 렌더링 방식 유지

[참조]
- docs/design/spacing.md
- docs/design/typography.md

[제약]
- 임의 px 여백 제거
- 타입 스케일 적용
- CSS 변수 토큰 적용
- 기존 기능/라우팅 변경 금지
```

---

## 리팩토링 전 확인 사항

- [ ] 기존 컴포넌트가 어떤 역할을 하는지 파악했다
- [ ] 변경하면 안 되는 Props/로직 범위를 파악했다
- [ ] 영향받는 다른 컴포넌트가 없는지 확인했다
- [ ] 적용할 CSS 변수 토큰 매핑을 준비했다

---

## 색상 매핑 빠른 참조

| 기존 Tailwind | 대체 토큰 |
|---------------|-----------|
| `bg-white` | `bg-[var(--color-bg-surface)]` |
| `bg-gray-50` | `bg-[var(--color-bg-base)]` |
| `bg-gray-100` | `bg-[var(--color-bg-elevated)]` |
| `text-gray-900` | `text-[var(--color-text-primary)]` |
| `text-gray-600` | `text-[var(--color-text-secondary)]` |
| `text-gray-400` | `text-[var(--color-text-tertiary)]` |
| `border-gray-200` | `border-[var(--color-border)]` |
| `border-gray-400` | `border-[var(--color-border-strong)]` |
| `bg-blue-500`, `bg-blue-600` | `bg-[var(--color-primary)]` |
| `text-blue-600` | `text-[var(--color-primary)]` |
| `hover:bg-blue-700` | `hover:bg-[var(--color-primary-hover)]` |
| `bg-green-*` / `text-green-*` | `bg/text-[var(--color-success)]` |
| `bg-red-*` / `text-red-*` | `bg/text-[var(--color-danger)]` |
| `bg-yellow-*` / `text-yellow-*` | `bg/text-[var(--color-warning)]` |
| `bg-sky-*` / `text-sky-*` | `bg/text-[var(--color-info)]` |