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>
116 lines
2.5 KiB
Markdown
116 lines
2.5 KiB
Markdown
# 새 컴포넌트 생성 프롬프트 템플릿
|
|
|
|
아래 템플릿을 복사하여 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)
|