@kood/claude-code 0.2.5 → 0.3.0

package/templates/tanstack-start/docs/design/components.md

@@ -1,175 +0,0 @@
-# 컴포넌트 가이드라인
-
-## 버튼 (Button)
-
-### 계층
-
-| 유형 | 용도 | 스타일 |
-|------|------|--------|
-| Primary | 주된 행동 | `bg-blue-600 text-white` |
-| Secondary | 대안적 행동 | `border border-gray-300` |
-| Tertiary | 덜 중요한 행동 | `text-blue-600` |
-| Destructive | 위험한 행동 | `bg-red-600 text-white` |
-
-```tsx
-// Primary
-<button className="px-4 py-2 bg-blue-600 text-white rounded-lg
-                   hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed">
-  저장하기
-</button>
-
-// Secondary
-<button className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
-  취소
-</button>
-
-// 로딩 상태
-<button disabled={isLoading} className="flex items-center gap-2">
-  {isLoading && <Spinner className="w-4 h-4 animate-spin" />}
-  {isLoading ? '저장 중...' : '저장하기'}
-</button>
-```
-
-### 크기
-```tsx
-<button className="px-3 py-1.5 text-sm">Small</button>
-<button className="px-4 py-2 text-base">Medium</button>
-<button className="px-6 py-3 text-lg">Large</button>
-```
-
-## 입력 필드 (Input)
-
-```tsx
-<div>
-  <label className="block text-sm font-medium text-gray-700 mb-1">이메일</label>
-  <input
-    type="email"
-    className="w-full px-3 py-2 border border-gray-300 rounded-lg
-               focus:ring-2 focus:ring-blue-500 focus:border-blue-500
-               placeholder:text-gray-400"
-    placeholder="example@email.com"
-  />
-  <p className="mt-1 text-sm text-gray-500">도움말</p>
-</div>
-
-// 에러 상태
-<input className="border border-red-500 focus:ring-red-500" />
-<p className="mt-1 text-sm text-red-600">오류 메시지</p>
-```
-
-### 아이콘 포함
-```tsx
-<div className="relative">
-  <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
-  <input className="pl-10 pr-3 py-2 ..." />
-</div>
-```
-
-## 카드 (Card)
-
-```tsx
-<div className="bg-white dark:bg-gray-800 rounded-lg border shadow-sm overflow-hidden">
-  <div className="px-6 py-4 border-b">
-    <h3 className="text-lg font-semibold">제목</h3>
-  </div>
-  <div className="px-6 py-4">본문</div>
-  <div className="px-6 py-4 bg-gray-50">푸터</div>
-</div>
-```
-
-## 모달 (Modal)
-
-```tsx
-<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
-  <div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
-    <div className="px-6 py-4 border-b flex items-center justify-between">
-      <h2 className="text-lg font-semibold">제목</h2>
-      <button><XIcon /></button>
-    </div>
-    <div className="px-6 py-4">본문</div>
-    <div className="px-6 py-4 bg-gray-50 flex justify-end gap-3">
-      <button>취소</button>
-      <button className="bg-blue-600 text-white">확인</button>
-    </div>
-  </div>
-</div>
-```
-
-### 크기
-```tsx
-max-w-sm   // 간단한 확인
-max-w-md   // 기본 (폼)
-max-w-lg   // 복잡한 내용
-max-w-2xl  // 테이블, 대시보드
-```
-
-## 알림/토스트 (Alert)
-
-```tsx
-// 정보
-<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg flex gap-3">
-  <InfoIcon className="w-5 h-5 text-blue-600" />
-  <p className="text-blue-800">안내 메시지</p>
-</div>
-
-// 성공: bg-green-50, border-green-200, text-green-800
-// 경고: bg-yellow-50, border-yellow-200, text-yellow-800
-// 오류: bg-red-50, border-red-200, text-red-800
-```
-
-## 배지 (Badge)
-
-```tsx
-<span className="px-2 py-0.5 text-xs font-medium rounded-full bg-green-100 text-green-800">
-  활성
-</span>
-
-// 숫자 배지
-<div className="relative">
-  <BellIcon />
-  <span className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs
-                   rounded-full flex items-center justify-center">3</span>
-</div>
-```
-
-## 테이블 (Table)
-
-```tsx
-<table className="w-full">
-  <thead className="bg-gray-50">
-    <tr>
-      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-        이름
-      </th>
-    </tr>
-  </thead>
-  <tbody className="divide-y divide-gray-200">
-    <tr className="hover:bg-gray-50">
-      <td className="px-6 py-4 whitespace-nowrap">홍길동</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-## 조합 원칙
-
-```tsx
-// ✅ Primary 하나만
-<div className="flex gap-2">
-  <button className="border">취소</button>
-  <button className="bg-blue-600 text-white">저장</button>
-</div>
-
-// ❌ Primary 여러 개
-<div className="flex gap-2">
-  <button className="bg-blue-600">취소</button>
-  <button className="bg-green-600">저장</button>
-</div>
-```
-
-## 체크리스트
-
-- [ ] 버튼 계층 구분 (Primary 화면당 1개)
-- [ ] 입력 필드에 레이블 필수
-- [ ] 에러/로딩 상태 시각적 표시
-- [ ] 포커스 스타일 명확히

package/templates/tanstack-start/docs/design/index.md

@@ -1,151 +0,0 @@
-# UI/UX 디자인 가이드
-
-> TanStack Start + Tailwind CSS v4
-
-@components.md
-@safe-area.md
-@tailwind-setup.md
-
----
-
-## 핵심 원칙
-
-| 원칙 | 설명 |
-|------|------|
-| **일관성** | 같은 요소는 같은 스타일과 동작 |
-| **계층 구조** | 중요한 것이 먼저 눈에 들어옴 |
-| **단순함** | 색상 3-5개, 폰트 2-3개, 충분한 여백 |
-| **접근성** | 충분한 대비, 읽기 쉬운 크기, 키보드 조작 |
-
----
-
-## 색상 (60-30-10 규칙)
-
-```
-60% - 배경색 (중립색)
-30% - 보조색 (카드, 섹션)
-10% - 강조색 (버튼, CTA)
-```
-
-### 의미론적 색상
-
-| 색상 | 의미 | Tailwind |
-|------|------|----------|
-| 🟢 Green | 성공 | `text-green-600` |
-| 🔴 Red | 오류 | `text-red-600` |
-| 🟡 Yellow | 경고 | `text-yellow-600` |
-| 🔵 Blue | 정보 | `text-blue-600` |
-
-### 다크 모드 매핑
-
-```
-라이트 ←→ 다크
-bg-white     ←→ bg-gray-900
-bg-gray-50   ←→ bg-gray-800
-text-gray-900 ←→ text-white
-text-gray-600 ←→ text-gray-300
-```
-
----
-
-## 폰트
-
-| 폰트 | 용도 |
-|------|------|
-| Pretendard | 한글 (권장) |
-| Inter | 영문 |
-| JetBrains Mono | 코드 |
-
-### 크기
-
-```
-text-4xl  36px  h1
-text-2xl  24px  h2, h3
-text-base 16px  본문
-text-sm   14px  보조 텍스트
-```
-
-### Tailwind 설정
-
-```css
-@theme {
-  --font-sans: "Pretendard", "Inter", system-ui, sans-serif;
-  --font-mono: "JetBrains Mono", monospace;
-}
-```
-
----
-
-## 간격 (8px 그리드)
-
-| 용도 | Tailwind | 크기 |
-|------|----------|------|
-| 아이콘-텍스트 | gap-1 | 4px |
-| 인라인 요소 | gap-2 | 8px |
-| 카드 내부 | p-4 | 16px |
-| 카드 간격 | gap-6 | 24px |
-| 섹션 간격 | py-12 | 48px |
-
-### 컨테이너
-
-```
-max-w-md   448px   폼
-max-w-lg   512px   모달
-max-w-3xl  768px   블로그
-max-w-7xl  1280px  대시보드
-```
-
----
-
-## 접근성 (WCAG AA)
-
-### 색상 대비
-
-| 기준 | 최소 대비 | 적용 대상 |
-|------|----------|----------|
-| AA | 4.5:1 | 일반 텍스트 |
-| AA (큰 텍스트) | 3:1 | 18px 이상 |
-
-```tsx
-// ❌ 색상만으로 구분
-<span className="text-red-600">오류</span>
-
-// ✅ 아이콘/텍스트 병행
-<span className="text-red-600 flex items-center gap-1">
-  <XCircleIcon className="w-4 h-4" />
-  오류가 발생했습니다
-</span>
-```
-
-### 키보드
-
-```tsx
-// ✅ 명확한 포커스 스타일
-<button className="focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
-
-// ❌ 포커스 제거 금지
-<button className="outline-none focus:outline-none">
-```
-
-### 폼
-
-```tsx
-<label htmlFor="email">이메일</label>
-<input
-  id="email"
-  required
-  aria-invalid={hasError}
-  aria-describedby={hasError ? "email-error" : undefined}
-/>
-{hasError && <p id="email-error" role="alert">오류</p>}
-```
-
-### 체크리스트
-
-- [ ] 모든 이미지에 alt
-- [ ] 폼 요소에 레이블
-- [ ] 키보드 접근 가능
-- [ ] 포커스 표시 유지
-- [ ] 대비 4.5:1 이상
-- [ ] 색상만으로 정보 전달 금지
-- [ ] 터치 영역 44px 이상

package/templates/tanstack-start/docs/design/safe-area.md

@@ -1,118 +0,0 @@
-# iOS Safe Area
-
-> **Library**: [tailwindcss-safe-area](https://github.com/mvllow/tailwindcss-safe-area)
-
-iOS 노치, 홈 인디케이터, 다이나믹 아일랜드 대응.
-
-## 설치
-
-```bash
-yarn add tailwindcss-safe-area
-```
-
-```typescript
-// tailwind.config.ts
-import safeArea from 'tailwindcss-safe-area'
-export default { plugins: [safeArea] }
-```
-
-## Viewport 설정 (필수)
-
-```typescript
-// src/routes/__root.tsx
-export const Route = createRootRoute({
-  head: () => ({
-    meta: [{
-      name: 'viewport',
-      content: 'width=device-width, initial-scale=1, viewport-fit=cover',
-    }],
-  }),
-})
-```
-
-## 유틸리티 클래스
-
-### Padding
-```tsx
-<div className="p-safe">          {/* 전체 */}
-<header className="pt-safe">      {/* 상단 (노치) */}
-<footer className="pb-safe">      {/* 하단 (홈 인디케이터) */}
-<div className="px-safe py-safe"> {/* X축, Y축 */}
-```
-
-### Margin
-```tsx
-<div className="m-safe mt-safe mb-safe mx-safe my-safe">
-```
-
-### Height
-```tsx
-<main className="h-screen-safe">     {/* safe area 제외 높이 */}
-<div className="min-h-screen-safe">  {/* 최소 높이 */}
-```
-
-### Fallback (safe area 없을 때 대체값)
-```tsx
-<div className="p-safe-or-4">    {/* safe area 또는 1rem */}
-<header className="pt-safe-or-2"> {/* 상단 또는 0.5rem */}
-<footer className="pb-safe-or-4"> {/* 하단 또는 1rem */}
-```
-
-## 레이아웃 패턴
-
-### 기본 앱 레이아웃
-```tsx
-<div className="min-h-screen-safe flex flex-col">
-  <header className="pt-safe-or-2 px-safe-or-4 bg-white border-b">
-    <nav className="h-14 flex items-center">헤더</nav>
-  </header>
-  <main className="flex-1 px-safe-or-4">{children}</main>
-  <footer className="pb-safe-or-2 px-safe-or-4 bg-white border-t">
-    <nav className="h-14 flex items-center justify-around">탭바</nav>
-  </footer>
-</div>
-```
-
-### 고정 하단 버튼
-```tsx
-<div className="fixed bottom-0 left-0 right-0 pb-safe-or-4 px-safe-or-4 bg-white border-t">
-  <button className="w-full h-12 bg-primary-600 text-white rounded-lg">
-    버튼
-  </button>
-</div>
-```
-
-### 전체 화면 모달
-```tsx
-<div className="fixed inset-0 bg-white z-50">
-  <div className="h-screen-safe flex flex-col p-safe">{children}</div>
-</div>
-```
-
-## 높이 문제 해결
-
-```tsx
-// 동적 뷰포트 높이 (권장)
-<div className="h-dvh">
-
-// 또는
-<div className="h-screen-safe">
-```
-
-## 트러블슈팅
-
-```tsx
-// ❌ 노치에 가려짐
-<header className="fixed top-0">
-
-// ✅ safe area 적용
-<header className="fixed top-0 pt-safe">
-
-// ❌ 홈 인디케이터와 겹침
-<button className="fixed bottom-4">
-
-// ✅ safe area 적용
-<div className="fixed bottom-0 pb-safe-or-4">
-  <button>...</button>
-</div>
-```

package/templates/tanstack-start/docs/design/tailwind-setup.md

@@ -1,156 +0,0 @@
-# Tailwind CSS 설정
-
-> Tailwind CSS v4
-
-## 설치
-
-```bash
-yarn add tailwindcss postcss autoprefixer
-```
-
-```css
-/* src/styles/app.css */
-@import "tailwindcss";
-```
-
-## 디자인 토큰 (@theme)
-
-```css
-@import "tailwindcss";
-
-@theme {
-  /* 색상 */
-  --color-primary-500: oklch(0.55 0.2 250);
-  --color-primary-600: oklch(0.48 0.22 250);
-  --color-primary-700: oklch(0.42 0.2 250);
-
-  --color-success: oklch(0.55 0.15 145);
-  --color-error: oklch(0.55 0.2 25);
-  --color-warning: oklch(0.75 0.15 85);
-
-  /* 폰트 */
-  --font-sans: "Pretendard", "Inter", system-ui, sans-serif;
-  --font-mono: "JetBrains Mono", monospace;
-
-  /* 반경 */
-  --radius-button: 0.5rem;
-  --radius-card: 0.75rem;
-  --radius-modal: 1rem;
-
-  /* 그림자 */
-  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);
-  --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-}
-```
-
-## 사용법
-
-```tsx
-<button className="bg-primary-600 hover:bg-primary-700">버튼</button>
-<div className="text-success">성공</div>
-<div className="rounded-[--radius-card]">카드</div>
-```
-
-## 다크 모드
-
-```css
-@theme {
-  --color-surface: white;
-  --color-text-primary: oklch(0.15 0 0);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-surface: oklch(0.15 0 0);
-    --color-text-primary: oklch(0.95 0 0);
-  }
-}
-```
-
-```tsx
-// Tailwind dark: 접두사
-<div className="bg-white dark:bg-gray-900">
-  <h1 className="text-gray-900 dark:text-white">제목</h1>
-</div>
-
-// CSS 변수 (자동 대응)
-<div className="bg-[--color-surface] text-[--color-text-primary]">
-```
-
-## CVA (class-variance-authority)
-
-```bash
-yarn add class-variance-authority clsx tailwind-merge
-```
-
-```tsx
-// src/lib/utils.ts
-import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))
-
-// src/components/ui/button.tsx
-import { cva, type VariantProps } from 'class-variance-authority'
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center font-medium transition-colors focus:ring-2 disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        primary: 'bg-primary-600 text-white hover:bg-primary-700',
-        secondary: 'border border-gray-300 hover:bg-gray-50',
-        destructive: 'bg-red-600 text-white hover:bg-red-700',
-      },
-      size: {
-        sm: 'px-3 py-1.5 text-sm rounded-md',
-        md: 'px-4 py-2 text-base rounded-lg',
-        lg: 'px-6 py-3 text-lg rounded-lg',
-      },
-    },
-    defaultVariants: { variant: 'primary', size: 'md' },
-  }
-)
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-  VariantProps<typeof buttonVariants> {}
-
-export const Button = ({ variant, size, className, ...props }: ButtonProps) => (
-  <button className={buttonVariants({ variant, size, className })} {...props} />
-)
-```
-
-## 반응형
-
-```css
-sm   640px   모바일 가로
-md   768px   태블릿
-lg   1024px  노트북
-xl   1280px  데스크탑
-```
-
-```tsx
-<div className="p-4 md:p-6 lg:p-8">
-<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
-```
-
-## 플러그인
-
-```css
-@import "tailwindcss";
-@plugin "@tailwindcss/forms";
-@plugin "@tailwindcss/typography";
-```
-
-```tsx
-<article className="prose dark:prose-invert">
-  {/* 마크다운 콘텐츠 */}
-</article>
-```
-
-## 체크리스트
-
-- [ ] @theme으로 디자인 토큰 정의
-- [ ] 브랜드/의미론적 색상 설정
-- [ ] 폰트 패밀리 설정
-- [ ] 다크 모드 대응
-- [ ] 모바일 퍼스트 반응형