generated from gc/template-java-maven
HYOJIN
c2a71c1b77
- 디자인 시스템 가이드 문서 11개 생성 (docs/design/) - CSS 변수 토큰 시스템 (@theme + :root/.dark 전환) - cn() 유틸리티 (clsx + tailwind-merge) - Button/Badge 공통 컴포넌트 (variant/size, 다크모드 대응) - 하드코딩 Tailwind 색상 → CSS 변수 토큰 리팩토링 (30개 파일) - 차트 팔레트 다크모드 색상 업데이트 (CHART_COLORS_HEX) - 버튼 다크모드 채도/대비 강화 (primary-600 기반) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
125 lines
3.5 KiB
Markdown
125 lines
3.5 KiB
Markdown
# 스타일 리팩토링 프롬프트 템플릿
|
|
|
|
기존 컴포넌트의 스타일을 디자인 시스템에 맞게 리팩토링할 때 사용한다.
|
|
|
|
---
|
|
|
|
## 기본 템플릿
|
|
|
|
```
|
|
[파일] 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)]` |
|