SKILL.md
UI 퍼블리싱 가이드
기술 스택
- UI 라이브러리: shadcn/ui (Radix primitives)
- 스타일링: Tailwind CSS 4.x
- 유틸리티:
cn()- 조건부 클래스 병합
사용 가능한 컴포넌트
위치: src/components/ui/
| 컴포넌트 | Import | 용도 |
|---|---|---|
| Button | @/components/ui/button |
액션, CTA |
| Card | @/components/ui/card |
콘텐츠 컨테이너 |
| Input | @/components/ui/input |
텍스트 입력 |
| Textarea | @/components/ui/textarea |
여러 줄 텍스트 |
| Label | @/components/ui/label |
폼 라벨 |
| Badge | @/components/ui/badge |
태그, 상태 |
| Dialog | @/components/ui/dialog |
모달 다이얼로그 |
| AlertDialog | @/components/ui/alert-dialog |
확인 다이얼로그 |
| Command | @/components/ui/command |
검색/콤보박스 |
| Skeleton | @/components/ui/skeleton |
로딩 상태 |
| Sonner | @/components/ui/sonner |
토스트 알림 |
PRD 화면-컴포넌트 매핑
참고: docs/PRD.md
| 화면 | 컴포넌트 |
|---|---|
| 로그인 (S-01) | Button |
| 홈 (S-02) | Card |
| 기록 목록 (S-03) | Card, Badge, Skeleton |
| 기록 작성 (S-04) | Input, Textarea, Badge, Command, Button |
| 기록 상세 (S-05) | Card, Badge, Button, AlertDialog |
| 리포트 (S-06, S-07) | Card |
cn() 유틸리티 사용
import { cn } from '@/utils/cn'
// 조건부 클래스
;<div
className={cn(
'base-class',
isActive && 'active-class',
variant === 'primary' && 'primary-class'
)}
/>컴포넌트 생성 패턴
import { cn } from '@/utils/cn'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
interface RecordCardProps {
title: string
emotions: string[]
className?: string
}
function RecordCard({ title, emotions, className }: RecordCardProps) {
return (
<Card className={cn('w-full', className)}>
<CardHeader>
<CardTitle>{title}</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-2">
{emotions.map(emotion => (
<Badge
key={emotion}
variant="secondary">
{emotion}
</Badge>
))}
</div>
</CardContent>
</Card>
)
}
export default RecordCard뷰포트
모바일 뷰 전용 프로젝트
- 모든 화면은 모바일 뷰 컨테이너 안에서 렌더링
간격 및 레이아웃
- Tailwind spacing scale 사용:
p-4,m-2,gap-4 - 레이아웃은
flex와grid선호 - 세로 정렬은
space-y-*사용
색상
src/styles/index.css에 정의된 CSS 변수 사용:
bg-background,text-foreground- 기본 색상bg-primary,text-primary-foreground- 주요 액션bg-muted,text-muted-foreground- 보조 콘텐츠bg-destructive- 에러/삭제 액션