snp-connection-monitoring/docs/design/prompts/refactor-style.md

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

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

---

기본 템플릿

[파일] 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)]