snp-connection-monitoring/docs/design/prompts/new-component.md

새 컴포넌트 생성 프롬프트 템플릿

아래 템플릿을 복사하여 Claude에게 컴포넌트 생성을 요청할 때 사용한다.

---

기본 템플릿

[파일] frontend/src/components/{경로}/{ComponentName}.tsx

[계약]
interface {ComponentName}Props {
  // Props 정의
  className?: string;
}

[제약]
- docs/design/code-conventions.md 의 규칙 준수
- CSS 변수 토큰 사용 (HEX 하드코딩 금지)
- cn() 유틸리티 사용 (src/utils/cn.ts)
- Lucide React 아이콘만 사용
- any 타입 금지, strict 모드
- forwardRef 적용 (DOM 접근 필요한 경우)
- prefers-reduced-motion 고려

---

실제 사용 예시

버튼 컴포넌트

[파일] frontend/src/components/ui/Button.tsx

[계약]
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'accent' | 'outline' | 'ghost' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
  className?: string;
}

[참조] docs/design/components.md (Button 섹션)

[제약]
- CSS 변수 토큰 사용
- cn() 사용
- forwardRef 적용
- disabled + loading 상태 처리
- focus-visible ring 적용

데이터 테이블 컴포넌트

[파일] frontend/src/components/ui/DataTable.tsx

[계약]
interface Column<T> {
  key: keyof T;
  header: string;
  width?: string;
  render?: (value: T[keyof T], row: T) => React.ReactNode;
}

interface DataTableProps<T> {
  columns: Column<T>[];
  data: T[];
  loading?: boolean;
  emptyMessage?: string;
  className?: string;
}

[제약]
- CSS 변수 토큰 사용
- 로딩 시 스켈레톤 표시
- 빈 상태 메시지 표시
- 반응형 (모바일에서 가로 스크롤)

상태 Badge

[파일] frontend/src/components/ui/StatusBadge.tsx

[계약]
type StatusType = 'success' | 'warning' | 'danger' | 'info' | 'default';

interface StatusBadgeProps {
  status: StatusType;
  label: string;
  dot?: boolean;
  className?: string;
}

[참조] docs/design/components.md (Badge 섹션)

[제약]
- 시멘틱 컬러 사용 (--color-success 등)
- dot prop이 true이면 상태 점 표시

---

체크리스트 (컴포넌트 생성 전)

• 기존 컴포넌트로 해결 가능한지 확인 (src/components/ 탐색)
• Props 인터페이스 설계 완료
• 담당 디자인 문서 섹션 참조 (docs/design/components.md)
• 파일 경로 결정 (ui/ vs 도메인 폴더)
• 접근성 요구사항 파악 (aria, focus, keyboard)