---

name: ui-publishing description: shadcn/ui와 Tailwind CSS를 사용한 UI 컴포넌트 생성 가이드. UI 컴포넌트 생성, 스타일링, PRD 화면 구현 시 사용.

UI 퍼블리싱 가이드

기술 스택

• UI 라이브러리: shadcn/ui (Radix primitives)
• 스타일링: Tailwind CSS 4.x
• 유틸리티: cn() - 조건부 클래스 병합

사용 가능한 컴포넌트

위치: src/components/ui/

PRD 화면-컴포넌트 매핑

참고: docs/PRD.md

cn() 유틸리티 사용

Copyimport { cn } from '@/utils/cn'

// 조건부 클래스
<div className={cn(
  "base-class",
  isActive && "active-class",
  variant === "primary" && "primary-class"
)} />

컴포넌트 생성 패턴

Copyimport { 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 - 에러/삭제 액션