프론트엔드 Vibe Coding

Tailwind CSS로 랜딩 페이지를 만들어줘.

기술 스택:
- Tailwind CSS v3
- Alpine.js (간단한 인터랙션)

요구사항:
1. Hero 섹션: 제목, 부제목, CTA 버튼 2개 ( primary/secondary)
2. 피처 섹션: 3개 카드 (아이콘, 제목, 설명)
3. 가격 섹션: 3개플랜 (Basic/Pro/Enterprise)
4. CTA 섹션: 배경 그라데이션, 폼
5. 푸터: 로고, 링크 3열
6. 반응형: 모바일 1열, 태블릿 2열, 데스크톱 3열
7. 다크 모드: class 전략, colors: { dark: '#1a1a1a' }

<!-- 버튼 -->
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
  클릭 me
</button>

<!-- 카드 -->
<div class="p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
  <h3 class="text-lg font-semibold mb-2">타이틀</h3>
  <p class="text-gray-600 dark:text-gray-300">본문</p>
</div>

<!-- 입력 필드 -->
<input 
  type="text"
  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600"
  placeholder="입력하세요"
/>

Bootstrap 5로 관리자 대시보드를 만들어줘.

요구사항:
1. 사이드바 + 메인 컨텐츠 레이아웃
2. 통계 카드 4개 (총 사용자, 수익, 주문, 신규)
3. 차트 영역 (Chart.js)
4. 테이블: 주문 목록 (검색, 페이징 포함)
5. Offcanvas 사이드바 (모바일)
6. 다크 모드 토글

다음 애니메이션을 CSS로 구현해줘:

1. 버튼 hover
   - scale(1.05), 배경색 변경
   - transition: all 0.3s ease

2. 페이지 로드 애니메이션
   - 헤더: slideDown + fadeIn (0.5s)
   - 콘텐츠: staggered fadeIn (각 요소 0.1s 지연)

3. 카드 hover
   - translateY(-4px)
   - box-shadow 증가

4. 로딩 스피너
   - spin animation (1s linear infinite)

5. 페이지 전환
   - fade + slide (0.3s)

/* Fade In Up Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease-out forwards;
}

/* Staggered Animation */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }

Framer Motion으로 React 애니메이션을 만들어줘:

1. 페이지 전환 애니메이션
   - AnimatePresence + motion.div
   - variants로 단계별 애니메이션

2. 리스트 애니메이션
   - layout prop으로 자동 리플로우
   - exitBeforeEnter strategy

3. 모달 애니메이션
   - backdrop blur + fade
   - scale + fadeIn

4. 스크롤 애니메이션
   - whileInView로 스크롤 트리거
   - viewport once: true

반응형 제품 카드를 만들어줘.

브레이크포인트:
- Mobile First: 기본 모바일, ~639px
- Medium: 640px ~ 1023px (2열)
- Desktop: 1024px ~ (4열)

요구사항:
1. 모바일: 1열, 이미지 상단, 텍스트 하단
2. 태블릿: 2열, 카드 그리드
3. 데스크톱: 4열, 호버 시 확대 효과 (scale 1.02)
4. 이미지: object-fit: cover, aspect-ratio 4/3
5. 텍스트: 클램핑 (line-clamp-2)

/* Mobile First */
.container {
  width: 100%;
  padding: 0 16px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Medium: 640px */
@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 1024px */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

React 상태 관리 패턴을 만들어줘:

1. Local State (useState)
   - 단일 컴포넌트 내 상태
   - 폼 입력, 토글, 로컬 UI 상태

2. Global State (Zustand)
   - 장바구니, 사용자 정보, 테마
   - 간단한 API, DevTools 지원

3. Server State (TanStack Query)
   - API 데이터 캐싱
   - 로딩/에러 상태 자동 관리
   - 백그라운드 리페치

4. URL State (React Router)
   - 필터, 페이지, 검색 파라미터
   - 브라우저 히스토리 연동

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface CartItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
}

interface CartState {
  items: CartItem[];
  addItem: (item: CartItem) => void;
  removeItem: (id: number) => void;
  clearCart: () => void;
}

export const useCartStore = create<CartState>()(
  persist(
    (set) => ({
      items: [],
      addItem: (item) => set((state) => ({
        items: [...state.items, item]
      })),
      removeItem: (id) => set((state) => ({
        items: state.items.filter((i) => i.id !== id)
      })),
      clearCart: () => set({ items: [] }),
    }),
    { name: 'cart-storage' }
  )
);

React 투두 앱에 테스트를 추가해줘.

기술 스택:
- Vitest + React Testing Library

요구사항:
1. TodoItem 단위 테스트
   - 체크박스 클릭 시 onToggle 호출
   - 삭제 버튼 클릭 시 onDelete 호출

2. TodoList 통합 테스트
   - 여러 todo 렌더링
   - 빈 목록 표시

3. TodoForm 통합 테스트
   - 입력 후 제출
   - 빈 입력 시 에러