patternslisted

# Patterns Skill 복합 UI 패턴 (Molecules, Organisms) 설계 및 구현 스킬입니다. Atomic Design의 조합 단계로, 재사용 가능한 복합 컴포넌트를 제공합니다. ## Triggers - "패턴", "molecules", "organisms", "patterns" - "카드 디자인", "모달", "드롭다운" - "네비게이션", "사이드바", "탭" - "폼 패턴", "테이블", "리스트" --- ## Input | 항목 | 필수 | 설명 | |------|------|------| | `patternType` | ✅ | 패턴 유형 (card, modal, dropdown, nav, form, data-display) | | `variant` | ❌ | 변형 스타일 | | `interactive` | ❌ | 인터랙션 포함 여부 | | `responsive` | ❌ | 반응형 동작 정의 | --- ## Card Variants ### Basic Card ```tsx // components/ui/card.tsx (shadcn/ui 기본) import * as React from 'react'; import { cn } from '@/lib/utils'; const Card = React.forwardRef< HTMLDivElement, React.HTMLAttributes<HTMLDivElement> >(({ className, ...props }, ref) => ( <div ref={ref} className={cn( 'rounded-xl border bg-card text-card-foreground shadow-sm', className )} {...props} /> )); Card.displayName = 'Card'; const CardHeader = React.forwardRef< HTMLDivElement, React.HTMLAttributes<HTMLDivElement> >(({ className, ...props }, ref) => ( <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} /> )); CardHeader.displayName = 'CardHeader'; const CardTitle = React.forwardRef< HTMLDivElement, React.HTMLAttributes<HTMLDivElement> >(({ className, ...props }, ref) => ( <div ref={ref} className={cn('font-semibold leading-none tracking-tight', className)} {...props} /> )); CardTitle.displayName = 'CardTitle'