@kood/claude-code 0.1.7 → 0.1.10

package/templates/tanstack-start/docs/guides/services.md

@@ -0,0 +1,143 @@
+# Service Layer
+
+도메인별 SDK/서비스 레이어 구조.
+
+## 폴더 구조
+
+```
+services/
+├── user/
+│   ├── index.ts            # 진입점 (re-export)
+│   ├── schemas.ts          # Zod 스키마
+│   ├── queries.ts          # GET 요청 (읽기)
+│   └── mutations.ts        # POST 요청 (쓰기)
+├── auth/
+│   ├── index.ts
+│   ├── schemas.ts
+│   ├── queries.ts
+│   └── mutations.ts
+└── post/
+    ├── index.ts
+    ├── schemas.ts
+    ├── queries.ts
+    └── mutations.ts
+```
+
+## Schemas 파일
+
+```typescript
+// services/user/schemas.ts
+import { z } from 'zod'
+
+export const createUserSchema = z.object({
+  email: z.email(),
+  name: z.string().min(1).max(100).trim(),
+})
+
+export const updateUserSchema = z.object({
+  id: z.string(),
+  email: z.email().optional(),
+  name: z.string().min(1).max(100).trim().optional(),
+})
+
+export type CreateUserInput = z.infer<typeof createUserSchema>
+export type UpdateUserInput = z.infer<typeof updateUserSchema>
+```
+
+## Queries 파일
+
+```typescript
+// services/user/queries.ts
+import { createServerFn } from '@tanstack/react-start'
+import { prisma } from '@/database/prisma'
+
+export const getUsers = createServerFn({ method: 'GET' })
+  .handler(async () => {
+    return prisma.user.findMany({
+      orderBy: { createdAt: 'desc' },
+    })
+  })
+
+export const getUserById = createServerFn({ method: 'GET' })
+  .handler(async ({ data: id }: { data: string }) => {
+    const user = await prisma.user.findUnique({ where: { id } })
+    if (!user) throw new Error('User not found')
+    return user
+  })
+
+export const getUserByEmail = createServerFn({ method: 'GET' })
+  .handler(async ({ data: email }: { data: string }) => {
+    return prisma.user.findUnique({ where: { email } })
+  })
+```
+
+## Mutations 파일
+
+```typescript
+// services/user/mutations.ts
+import { createServerFn } from '@tanstack/react-start'
+import { prisma } from '@/database/prisma'
+import { createUserSchema, updateUserSchema } from './schemas'
+
+export const createUser = createServerFn({ method: 'POST' })
+  .inputValidator(createUserSchema)
+  .handler(async ({ data }) => {
+    return prisma.user.create({ data })
+  })
+
+export const updateUser = createServerFn({ method: 'POST' })
+  .inputValidator(updateUserSchema)
+  .handler(async ({ data }) => {
+    const { id, ...updateData } = data
+    return prisma.user.update({ where: { id }, data: updateData })
+  })
+
+export const deleteUser = createServerFn({ method: 'POST' })
+  .handler(async ({ data: id }: { data: string }) => {
+    return prisma.user.delete({ where: { id } })
+  })
+```
+
+## 진입점 파일
+
+```typescript
+// services/user/index.ts
+export * from './schemas'
+export * from './queries'
+export * from './mutations'
+```
+
+## 사용 예시
+
+```typescript
+// routes/users/-hooks/use-users.ts
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { getUsers, createUser, deleteUser } from '@/services/user'
+```
+
+## Database 폴더
+
+```
+database/
+├── prisma.ts               # Prisma Client 싱글톤
+└── seed.ts                 # 시드 스크립트 (선택)
+```
+
+```typescript
+// database/prisma.ts
+import { PrismaClient } from '../../generated/prisma'
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClient | undefined
+}
+
+export const prisma =
+  globalForPrisma.prisma ??
+  new PrismaClient({
+    log: process.env.NODE_ENV === 'development' ? ['query'] : [],
+  })
+
+if (process.env.NODE_ENV !== 'production') {
+  globalForPrisma.prisma = prisma
+}
+```

package/templates/tanstack-start/docs/library/tanstack-query/index.md

@@ -2,7 +2,6 @@
 
 > 5.x | React Data Fetching Library
 
-@setup.md
 @use-query.md
 @use-mutation.md
 @invalidation.md
@@ -47,7 +46,15 @@ const mutation = useMutation({
 ```tsx
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
-const queryClient = new QueryClient()
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5,   // 5분
+      gcTime: 1000 * 60 * 30,     // 30분 (이전 cacheTime)
+      retry: 3,
+    },
+  },
+})
 
 function App() {
   return (
@@ -57,3 +64,12 @@ function App() {
   )
 }
 ```
+
+### Query Keys 패턴
+
+```typescript
+['todos']                       // 단순
+['todo', { id: 5 }]             // 파라미터
+['todos', 'list', { filters }]  // 계층적
+['todos', 'detail', todoId]
+```

package/templates/tanstack-start/docs/library/zod/index.md

@@ -2,7 +2,6 @@
 
 > **v4** | TypeScript Schema Validation
 
-@basic-types.md
 @complex-types.md
 @transforms.md
 @validation.md
@@ -56,3 +55,19 @@ z.looseObject({ name: z.string() })   // 추가 키 통과
 // Refinement 체이닝 가능
 z.string().refine(val => val.includes("@")).min(5)  // ✅ v4
 ```
+
+### v4 추가 API
+
+```typescript
+// 문자열 불리언 (환경변수용)
+z.stringbool()  // "true"/"yes"/"1" → true
+
+// 날짜/시간 ISO 포맷
+z.iso.date()      // 2024-01-15
+z.iso.datetime()  // ISO 날짜시간
+z.iso.duration()  // P1D, PT1H
+
+// 템플릿 리터럴
+const css = z.templateLiteral([z.number(), z.enum(["px", "em", "rem"])])
+// `${number}px` | `${number}em` | `${number}rem`
+```

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

@@ -1,163 +0,0 @@
-# 접근성 (Accessibility)
-
-## WCAG 기준
-
-| 레벨 | 설명 |
-|------|------|
-| A | 최소 기준 (필수) |
-| AA | 권장 기준 (일반 목표) |
-| AAA | 최고 기준 |
-
-## 색상 대비
-
-| 기준 | 대비 | 대상 |
-|------|------|------|
-| AA | 4.5:1 | 일반 텍스트 |
-| AA (큰 텍스트) | 3:1 | 18px 이상 |
-| AAA | 7:1 | 최고 접근성 |
-
-```tsx
-// ❌ 색상만으로 구분
-<span className="text-red-600">오류</span>
-
-// ✅ 아이콘/텍스트 병행
-<span className="text-red-600 flex items-center gap-1">
-  <XCircleIcon className="w-4 h-4" />
-  오류가 발생했습니다
-</span>
-```
-
-## 키보드 접근성
-
-| 키 | 동작 |
-|-----|------|
-| Tab | 다음 요소 |
-| Shift+Tab | 이전 요소 |
-| Enter | 클릭, 링크 이동 |
-| Space | 체크박스, 버튼 |
-| Escape | 모달 닫기 |
-
-```tsx
-// ✅ 명확한 포커스 스타일
-<button className="focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
-
-// ❌ 포커스 제거 금지
-<button className="outline-none focus:outline-none">
-```
-
-## 시맨틱 HTML
-
-```tsx
-// ✅ 시맨틱 HTML
-<header>...</header>
-<nav>...</nav>
-<main><article><section>...</section></article></main>
-<footer>...</footer>
-
-// ❌ div 남용
-<div className="header">...</div>
-```
-
-### 제목 계층
-```tsx
-// ✅ 순서대로
-<h1>페이지 제목</h1>
-  <h2>섹션 1</h2>
-    <h3>하위 섹션</h3>
-
-// ❌ 건너뛰기 금지
-<h1>제목</h1>
-  <h3>섹션</h3>
-```
-
-## ARIA 속성
-
-```tsx
-// 레이블 연결
-<label htmlFor="email">이메일</label>
-<input id="email" type="email" />
-
-// aria-label
-<input aria-label="검색어 입력" type="search" />
-
-// 에러 상태
-<input aria-invalid="true" aria-describedby="email-error" />
-<p id="email-error" role="alert">오류 메시지</p>
-
-// 동적 알림
-<div aria-live="polite">{message}</div>
-
-// 숨김 처리 (스크린 리더만)
-<span className="sr-only">메뉴 열기</span>
-
-// 장식용 숨김
-<div aria-hidden="true">장식용 아이콘</div>
-```
-
-## 폼 접근성
-
-```tsx
-<div>
-  <label htmlFor="email">
-    이메일 <span className="text-red-600" aria-hidden="true">*</span>
-    <span className="sr-only">(필수)</span>
-  </label>
-  <input
-    id="email"
-    required
-    aria-required="true"
-    aria-invalid={hasError}
-    aria-describedby={hasError ? "email-error" : undefined}
-  />
-  {hasError && <p id="email-error" role="alert">오류 메시지</p>}
-</div>
-```
-
-## 이미지 대체 텍스트
-
-```tsx
-// 정보 전달 이미지
-<img src="chart.png" alt="2024년 매출: 1월 100만원에서 12월 500만원으로 성장" />
-
-// 장식용
-<img src="decorative.png" alt="" />
-
-// 아이콘 버튼
-<button aria-label="닫기">
-  <img src="close.svg" alt="" />
-</button>
-```
-
-## 터치 접근성
-
-```tsx
-// 최소 44x44px
-<button className="min-w-[44px] min-h-[44px] p-2">
-  <Icon className="w-6 h-6" />
-</button>
-
-// 터치 타겟 간격 8px 이상
-<div className="flex gap-2">
-```
-
-## 테스트 도구
-
-| 도구 | 용도 |
-|------|------|
-| axe DevTools | 브라우저 확장 |
-| Lighthouse | Chrome 내장 |
-| eslint-plugin-jsx-a11y | 코드 레벨 검사 |
-
-## 체크리스트
-
-### 필수 (Level A)
-- [ ] 모든 이미지에 alt
-- [ ] 폼 요소에 레이블
-- [ ] 키보드 접근 가능
-- [ ] 포커스 표시 유지
-- [ ] 색상만으로 정보 전달 금지
-
-### 권장 (Level AA)
-- [ ] 대비 4.5:1 이상
-- [ ] 제목 계층 논리적
-- [ ] 200% 확대 시 가로 스크롤 없음

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

@@ -1,93 +0,0 @@
-# 색상 시스템
-
-## 60-30-10 규칙
-
-```
-60% 기본색 - 배경, 여백
-30% 보조색 - 카드, 섹션
-10% 강조색 - 버튼, 링크, CTA
-```
-
-## 색상 팔레트
-
-### 기본색 (Neutral)
-```
-bg-white      가장 밝은 배경
-bg-gray-50    섹션 배경
-bg-gray-100   카드 배경, hover
-bg-gray-200   테두리, 구분선
-text-gray-500 보조 텍스트
-text-gray-700 본문
-text-gray-900 제목, 강조
-```
-
-### 의미론적 색상
-
-| 색상 | 의미 | Tailwind |
-|------|------|----------|
-| 🟢 Green | 성공, 완료 | `text-green-600` |
-| 🔴 Red | 오류, 위험 | `text-red-600` |
-| 🟡 Yellow | 경고, 주의 | `text-yellow-600` |
-| 🔵 Blue | 정보, 안내 | `text-blue-600` |
-
-```tsx
-// ✅ 올바른 사용
-<span className="text-green-600">저장되었습니다</span>
-<span className="text-red-600">필수 항목입니다</span>
-
-// ❌ 잘못된 사용 - 빨간색을 장식용으로
-<span className="text-red-600">새로운 기능!</span>
-```
-
-## 색상 대비 (WCAG)
-
-| 기준 | 최소 대비 | 적용 대상 |
-|------|----------|----------|
-| AA | 4.5:1 | 일반 텍스트 |
-| AA (큰 텍스트) | 3:1 | 18px 이상 |
-| AAA | 7:1 | 최고 접근성 |
-
-```tsx
-// ✅ 좋은 대비
-<p className="text-gray-900">대비 15.8:1</p>
-<p className="text-gray-700">대비 8.6:1</p>
-
-// ❌ 피해야 함
-<p className="text-gray-400">대비 3.0:1</p>
-```
-
-## 다크 모드
-
-```
-라이트             다크
-bg-white     ←→    bg-gray-900
-bg-gray-50   ←→    bg-gray-800
-text-gray-900 ←→   text-white
-text-gray-600 ←→   text-gray-300
-```
-
-```tsx
-<div className="bg-white dark:bg-gray-900">
-  <h1 className="text-gray-900 dark:text-white">제목</h1>
-  <p className="text-gray-600 dark:text-gray-300">본문</p>
-</div>
-```
-
-## Tailwind 설정
-
-```css
-@theme {
-  --color-primary-500: oklch(0.55 0.2 250);
-  --color-primary-600: oklch(0.48 0.22 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);
-}
-```
-
-## 체크리스트
-
-- [ ] 브랜드 색상 1-2가지만
-- [ ] 의미론적 색상은 해당 의미로만
-- [ ] 대비 4.5:1 이상
-- [ ] 색상만으로 정보 전달 금지 (아이콘/텍스트 병행)

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

@@ -1,122 +0,0 @@
-# 간격과 레이아웃
-
-## 8px 그리드
-
-```css
-1    → 4px    아주 작은 간격
-2    → 8px    작은 간격
-4    → 16px   기본 간격
-6    → 24px   중간 간격
-8    → 32px   큰 간격
-12   → 48px   섹션 간격
-16   → 64px   페이지 섹션
-```
-
-| 용도 | Tailwind | 크기 |
-|------|----------|------|
-| 아이콘-텍스트 | gap-1 | 4px |
-| 인라인 요소 | gap-2 | 8px |
-| 카드 내부 | p-4 | 16px |
-| 카드 간격 | gap-6 | 24px |
-| 섹션 간격 | py-12 | 48px |
-
-## Padding vs Margin vs Gap
-
-```tsx
-// Padding (내부 여백)
-<div className="p-4">     {/* 전체 16px */}
-<div className="px-4 py-2"> {/* 좌우 16px, 상하 8px */}
-
-// Margin (외부 여백)
-<div className="mb-4">    {/* 아래 16px */}
-<div className="mx-auto"> {/* 좌우 중앙 */}
-
-// Gap (Flex/Grid 간격)
-<div className="flex gap-4">
-<div className="grid gap-6">
-```
-
-## 레이아웃 패턴
-
-### 카드
-```tsx
-<div className="p-6 rounded-lg border">
-  <h3 className="text-lg font-semibold mb-2">제목</h3>
-  <p className="text-gray-600 mb-4">본문</p>
-  <div className="flex gap-2">
-    <button>취소</button>
-    <button>확인</button>
-  </div>
-</div>
-```
-
-### 폼
-```tsx
-<form className="space-y-6">
-  <div className="space-y-4">
-    <div>
-      <label className="block text-sm font-medium mb-1">이름</label>
-      <input className="w-full px-3 py-2 border rounded" />
-    </div>
-  </div>
-  <div className="flex justify-end gap-3">
-    <button>취소</button>
-    <button className="bg-blue-600 text-white">저장</button>
-  </div>
-</form>
-```
-
-### 네비게이션
-```tsx
-<nav className="px-4 py-3 border-b">
-  <div className="max-w-6xl mx-auto flex items-center justify-between">
-    <div>Logo</div>
-    <div className="flex items-center gap-6">{/* 메뉴 */}</div>
-    <div className="flex items-center gap-3">{/* 액션 */}</div>
-  </div>
-</nav>
-```
-
-## 반응형 간격
-
-```tsx
-<section className="py-8 md:py-12 lg:py-16">
-  <div className="px-4 md:px-6 lg:px-8">
-<div className="grid gap-4 md:gap-6 lg:gap-8">
-```
-
-## 시각적 그룹핑
-
-```tsx
-// ✅ 관련 요소 가깝게, 다른 그룹 멀리
-<div className="mb-6">
-  <h3 className="mb-2">제목</h3>   {/* 밀접: 8px */}
-  <p>설명</p>
-</div>                              {/* 분리: 24px */}
-<div className="mb-6">
-  <h3 className="mb-2">다른 제목</h3>
-  <p>다른 설명</p>
-</div>
-```
-
-## 컨테이너
-
-```tsx
-<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> {/* 기본 */}
-<div className="max-w-3xl mx-auto px-4"> {/* 좁은 (블로그) */}
-```
-
-```css
-max-w-md   448px   폼
-max-w-lg   512px   모달
-max-w-3xl  768px   블로그
-max-w-5xl  1024px  표준
-max-w-7xl  1280px  대시보드
-```
-
-## 체크리스트
-
-- [ ] 8px 배수 사용
-- [ ] 관련 요소 가깝게, 다른 그룹 멀리
-- [ ] 반응형 간격 적용
-- [ ] 터치 영역 최소 44px

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

@@ -1,80 +0,0 @@
-# 타이포그래피
-
-## 기본 원칙
-- 폰트 2-3개만 (제목용, 본문용, 코드용)
-- 크기로 계층 표현
-- 일관된 스타일
-
-## 폰트 선택
-
-| 폰트 | 용도 |
-|------|------|
-| Pretendard | 한글 프로젝트 (권장) |
-| Inter | 영문, 웹 전반 |
-| Noto Sans KR | 다국어 프로젝트 |
-| JetBrains Mono | 코드 |
-
-## 크기 시스템
-
-```css
-text-xs     12px   작은 레이블
-text-sm     14px   보조 텍스트
-text-base   16px   본문 (기본)
-text-lg     18px   강조 본문
-text-xl     20px   소제목 (h4)
-text-2xl    24px   섹션 제목 (h3)
-text-3xl    30px   부제목 (h2)
-text-4xl    36px   페이지 제목 (h1)
-text-5xl    48px   히어로
-```
-
-```tsx
-<h1 className="text-4xl font-bold">제목</h1>
-<h2 className="text-2xl font-semibold">섹션</h2>
-<p className="text-base">본문</p>
-<span className="text-sm text-gray-500">보조</span>
-```
-
-## 줄 간격 (Line Height)
-
-```css
-leading-tight     1.25   제목
-leading-normal    1.5    본문 (권장)
-leading-relaxed   1.625  긴 글
-```
-
-## 굵기 (Font Weight)
-
-```css
-font-normal    400   본문
-font-medium    500   약간 강조
-font-semibold  600   부제목, 버튼
-font-bold      700   제목
-```
-
-## 가독성 최적화
-
-```tsx
-// 줄 길이 제한 (45-75자)
-<article className="max-w-prose mx-auto">
-
-// 글자 간격
-<h1 className="text-5xl tracking-tight">히어로</h1>
-<span className="text-xs tracking-wide uppercase">LABEL</span>
-```
-
-## Tailwind 폰트 설정
-
-```css
-@theme {
-  --font-sans: "Pretendard", "Inter", system-ui, sans-serif;
-  --font-mono: "JetBrains Mono", monospace;
-}
-```
-
-## 체크리스트
-
-- [ ] 폰트 2-3개 이하
-- [ ] 본문 16px 이상
-- [ ] 줄 간격 1.5 이상
-- [ ] 제목/본문 명확한 크기 차이