@kood/claude-code 0.1.6 → 0.1.9

package/templates/tanstack-start/docs/library/tanstack-start/auth-patterns.md

@@ -1,171 +1,78 @@
 # TanStack Start - 인증 패턴
 
-> **상위 문서**: [TanStack Start](./index.md)
-
-TanStack Start에서의 인증 구현 패턴입니다.
-
-## 로그인
+## 기본 인증 함수
 
 ```typescript
-import { createServerFn } from '@tanstack/react-start'
-import { redirect } from '@tanstack/react-router'
-import bcrypt from 'bcryptjs'
-
+// 로그인
 export const loginFn = createServerFn({ method: 'POST' })
   .inputValidator((data: { email: string; password: string }) => data)
   .handler(async ({ data }) => {
     const user = await authenticateUser(data.email, data.password)
-
-    if (!user) {
-      return { error: 'Invalid credentials' }
-    }
+    if (!user) return { error: 'Invalid credentials' }
 
     const session = await useAppSession()
-    await session.update({
-      userId: user.id,
-      email: user.email,
-    })
-
+    await session.update({ userId: user.id, email: user.email })
     throw redirect({ to: '/dashboard' })
   })
-```
 
-## 로그아웃
-
-```typescript
+// 로그아웃
 export const logoutFn = createServerFn({ method: 'POST' })
   .handler(async () => {
     const session = await useAppSession()
     await session.clear()
     throw redirect({ to: '/' })
   })
-```
 
-## 현재 사용자 조회
-
-```typescript
+// 현재 사용자
 export const getCurrentUserFn = createServerFn({ method: 'GET' })
   .handler(async () => {
     const session = await useAppSession()
-    const userId = session.data.userId
-
-    if (!userId) {
-      return null
-    }
-
-    return await getUserById(userId)
-  })
-```
-
-## 회원가입
-
-```typescript
-export const registerFn = createServerFn({ method: 'POST' })
-  .inputValidator((data: { email: string; password: string; name: string }) => data)
-  .handler(async ({ data }) => {
-    const existingUser = await getUserByEmail(data.email)
-    if (existingUser) {
-      return { error: 'User already exists' }
-    }
-
-    const hashedPassword = await bcrypt.hash(data.password, 12)
-
-    const user = await createUser({
-      email: data.email,
-      password: hashedPassword,
-      name: data.name,
-    })
-
-    const session = await useAppSession()
-    await session.update({ userId: user.id })
-
-    return { success: true, user: { id: user.id, email: user.email } }
+    if (!session.data.userId) return null
+    return getUserById(session.data.userId)
   })
 ```
 
 ## 인증 미들웨어
 
 ```typescript
-import { createMiddleware } from '@tanstack/react-start'
-import { redirect } from '@tanstack/react-router'
-
 export const authMiddleware = createMiddleware({ type: 'function' })
   .server(async ({ next }) => {
     const session = await useAppSession()
-
-    if (!session.data.userId) {
-      throw redirect({ to: '/login' })
-    }
-
+    if (!session.data.userId) throw redirect({ to: '/login' })
     const user = await getUserById(session.data.userId)
-
     return next({ context: { user } })
   })
-```
 
-## 보호된 Server Function
-
-```typescript
-export const getProtectedData = createServerFn({ method: 'GET' })
+// 사용
+export const protectedFn = createServerFn({ method: 'GET' })
   .middleware([authMiddleware])
-  .handler(async ({ context }) => {
-    // context.user 사용 가능
-    return {
-      message: `Hello, ${context.user.name}!`,
-      data: await getPrivateData(context.user.id),
-    }
-  })
+  .handler(async ({ context }) => ({ user: context.user }))
 ```
 
 ## 보호된 라우트
 
 ```tsx
-// routes/dashboard.tsx
-import { createFileRoute, redirect } from '@tanstack/react-router'
-
 export const Route = createFileRoute('/dashboard')({
   beforeLoad: async () => {
     const user = await getCurrentUserFn()
-
-    if (!user) {
-      throw redirect({ to: '/login' })
-    }
-
+    if (!user) throw redirect({ to: '/login' })
     return { user }
   },
-  component: DashboardPage,
+  component: () => {
+    const { user } = Route.useRouteContext()
+    return <h1>Welcome, {user.name}!</h1>
+  },
 })
-
-function DashboardPage() {
-  const { user } = Route.useRouteContext()
-  return <h1>Welcome, {user.name}!</h1>
-}
 ```
 
 ## Better Auth 통합
 
 ```typescript
-// lib/auth.ts
-import { betterAuth } from 'better-auth'
-import { prismaAdapter } from 'better-auth/adapters/prisma'
-import { prisma } from './prisma'
-
 export const auth = betterAuth({
   database: prismaAdapter(prisma),
-  emailAndPassword: {
-    enabled: true,
-  },
+  emailAndPassword: { enabled: true },
 })
 
-// Server Function에서 사용
-import { createServerFn } from '@tanstack/react-start'
-import { auth } from '@/lib/auth'
-
 export const getSession = createServerFn({ method: 'GET' })
-  .handler(async ({ request }) => {
-    const session = await auth.api.getSession({
-      headers: request.headers,
-    })
-    return session
-  })
+  .handler(async ({ request }) => auth.api.getSession({ headers: request.headers }))
 ```

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

@@ -1,33 +1,40 @@
 # TanStack Start
 
-> **Version**: 1.x | Full-stack React Framework
+> 1.x | Full-stack React Framework
+
+@setup.md
+@server-functions.md
+@middleware.md
+@routing.md
+@auth-patterns.md
 
 ---
 
 ## ⛔ 필수 규칙
 
-```
-❌ /api 라우터 사용 금지 → Server Functions 사용
-❌ handler 내부 수동 검증 금지 → inputValidator 사용
-❌ handler 내부 수동 인증 체크 금지 → middleware 사용
-✅ POST/PUT/PATCH에는 반드시 inputValidator 추가
-✅ 인증 필요 시 반드시 middleware 추가
-```
+| 금지 | 대신 |
+|------|------|
+| /api 라우터 | Server Functions |
+| handler 내 수동 검증 | inputValidator |
+| handler 내 수동 인증 | middleware |
+
+✅ POST/PUT/PATCH → inputValidator 필수
+✅ 인증 필요 → middleware 필수
 
 ---
 
-## 🚀 Quick Reference (복사용)
+## Quick Reference
 
 ```typescript
-// ✅ Server Function (GET + 인증)
+// GET + 인증
 export const getUsers = createServerFn({ method: 'GET' })
-  .middleware([authMiddleware])  // ⭐ 인증 미들웨어
+  .middleware([authMiddleware])
   .handler(async () => prisma.user.findMany())
 
-// ✅ Server Function (POST + Validation + 인증)
+// POST + Validation + 인증
 export const createUser = createServerFn({ method: 'POST' })
-  .middleware([authMiddleware])        // ⭐ 인증 미들웨어
-  .inputValidator(createUserSchema)    // ⭐ Zod 스키마
+  .middleware([authMiddleware])
+  .inputValidator(createUserSchema)
   .handler(async ({ data }) => prisma.user.create({ data }))
 
 // Route with Loader
@@ -36,79 +43,25 @@ export const Route = createFileRoute('/users')({
   loader: async () => ({ users: await getUsers() }),
 })
 
-// Component에서 Loader 데이터 사용
+// Loader 데이터 사용
 const UsersPage = (): JSX.Element => {
   const { users } = Route.useLoaderData()
   return <div>{/* render */}</div>
 }
 ```
 
-### 라우트 파일 구조
-
-```
-routes/
-├── __root.tsx            # Root layout
-├── index.tsx             # /
-├── about.tsx             # /about
-└── users/
-    ├── index.tsx         # /users
-    ├── $id.tsx           # /users/:id
-    ├── -components/      # 페이지 전용 컴포넌트
-    └── -functions/       # 페이지 전용 Server Functions ⭐
-```
-
-### Server Functions 위치
-
-```
-공통 함수 (여러 라우트)  → @/functions/
-라우트 전용 함수         → routes/[경로]/-functions/
-```
-
----
-
-## 문서 구조
-
-- [설치 및 설정](./setup.md) - 패키지 설치, Vite 설정, TypeScript 설정
-- [Server Functions](./server-functions.md) - 서버 함수 정의 및 사용법
-- [Middleware](./middleware.md) - 미들웨어 정의 및 적용
-- [Routing](./routing.md) - 파일 기반 라우팅, 동적 라우트, SSR
-- [인증 패턴](./auth-patterns.md) - 로그인, 로그아웃, 세션 관리
-
-## 빠른 시작
-
-```bash
-yarn add @tanstack/react-start @tanstack/react-router vinxi
-yarn add -D vite @vitejs/plugin-react vite-tsconfig-paths
-```
-
-## 핵심 개념
-
-### Server Functions
-서버에서만 실행되는 타입 안전한 함수를 정의합니다.
-
-```typescript
-import { createServerFn } from '@tanstack/react-start'
-
-export const getData = createServerFn({ method: 'GET' })
-  .handler(async () => {
-    return { message: 'Hello from server' }
-  })
-```
-
-### File-based Routing
-파일 시스템 기반의 자동 라우팅을 지원합니다.
+### 구조
 
 ```
 routes/
-├── index.tsx        → /
-├── about.tsx        → /about
-└── users/
-    ├── index.tsx    → /users
-    └── $id.tsx      → /users/:id
+├── __root.tsx          # Root layout
+├── index.tsx           # /
+├── users/
+│   ├── index.tsx       # /users
+│   ├── $id.tsx         # /users/:id
+│   ├── -components/    # 페이지 전용
+│   └── -functions/     # 페이지 전용 Server Functions
+
+공통 함수 → @/functions/
+라우트 전용 → routes/[경로]/-functions/
 ```
-
-## 참고 자료
-
-- [TanStack Start 공식 문서](https://tanstack.com/start/latest)
-- [TanStack Router 문서](https://tanstack.com/router/latest)
-- [Vinxi 문서](https://vinxi.dev)

package/templates/tanstack-start/docs/library/tanstack-start/middleware.md

@@ -1,142 +1,64 @@
 # TanStack Start - Middleware
 
-> **상위 문서**: [TanStack Start](./index.md)
+Server Function 및 라우트에 공통 로직 적용.
 
-미들웨어는 Server Function 및 라우트 핸들러에 공통 로직을 적용합니다.
-
-## Server Function Middleware
+## 기본 패턴
 
 ```typescript
-import { createMiddleware, createServerFn } from '@tanstack/react-start'
-
 // 미들웨어 정의
 const loggingMiddleware = createMiddleware({ type: 'function' })
-  .client(() => {
-    console.log('Client: Server function called')
-  })
   .server(({ next }) => {
-    console.log('Server: Processing request')
+    console.log('Processing request')
     return next()
   })
 
-// 미들웨어 적용
+// 적용
 const fn = createServerFn()
   .middleware([loggingMiddleware])
-  .handler(async () => {
-    return { message: 'Hello' }
-  })
+  .handler(async () => ({ message: 'Hello' }))
 ```
 
-## Zod Validation Middleware
+## 인증 미들웨어
 
 ```typescript
-import { createMiddleware } from '@tanstack/react-start'
-import { zodValidator } from '@tanstack/react-start/validators'
-import { z } from 'zod'
-
-const mySchema = z.object({
-  workspaceId: z.string(),
-})
-
-const workspaceMiddleware = createMiddleware({ type: 'function' })
-  .inputValidator(zodValidator(mySchema))
-  .server(({ next, data }) => {
-    console.log('Workspace ID:', data.workspaceId)
-    return next()
+const authMiddleware = createMiddleware({ type: 'function' })
+  .server(async ({ next }) => {
+    const session = await getSession()
+    if (!session) throw redirect({ to: '/login' })
+    return next({ context: { user: session.user } })
   })
-```
 
-## Global Request Middleware
-
-```typescript
-// src/start.ts
-import { createStart, createMiddleware } from '@tanstack/react-start'
-
-const myGlobalMiddleware = createMiddleware().server(({ next }) => {
-  console.log('Global middleware running')
-  return next()
-})
-
-export const startInstance = createStart(() => {
-  return {
-    requestMiddleware: [myGlobalMiddleware],
-  }
-})
+// 사용
+export const protectedFn = createServerFn({ method: 'GET' })
+  .middleware([authMiddleware])
+  .handler(async ({ context }) => ({ user: context.user }))
 ```
 
-## Global Server Function Middleware
+## Zod Validation Middleware
 
 ```typescript
-// src/start.ts
-import { createStart } from '@tanstack/react-start'
-import { loggingMiddleware } from './middleware'
-
-export const startInstance = createStart(() => {
-  return {
-    functionMiddleware: [loggingMiddleware],
-  }
-})
+const workspaceMiddleware = createMiddleware({ type: 'function' })
+  .inputValidator(zodValidator(z.object({ workspaceId: z.string() })))
+  .server(({ next, data }) => next())
 ```
 
-## Route-Level Middleware
+## Global Middleware
 
 ```typescript
-export const Route = createFileRoute('/hello')({
-  server: {
-    middleware: [authMiddleware, loggerMiddleware], // 모든 핸들러에 적용
-    handlers: {
-      GET: async ({ request }) => {
-        return new Response('Hello, World! from ' + request.url)
-      },
-      POST: async ({ request }) => {
-        const body = await request.json()
-        return new Response(`Hello, ${body.name}!`)
-      },
-    },
-  },
-})
+// src/start.ts
+export const startInstance = createStart(() => ({
+  requestMiddleware: [globalMiddleware],  // 모든 요청
+  functionMiddleware: [loggingMiddleware], // 모든 Server Function
+}))
 ```
 
-## Handler-Specific Middleware
+## Route-Level
 
 ```typescript
 export const Route = createFileRoute('/hello')({
   server: {
-    handlers: ({ createHandlers }) =>
-      createHandlers({
-        GET: {
-          middleware: [loggerMiddleware], // GET에만 적용
-          handler: async ({ request }) => {
-            return new Response('Hello, World! from ' + request.url)
-          },
-        },
-      }),
+    middleware: [authMiddleware], // 모든 핸들러
+    handlers: { GET: async ({ request }) => new Response('Hello') },
   },
 })
 ```
-
-## 인증 미들웨어 예시
-
-```typescript
-import { createMiddleware } from '@tanstack/react-start'
-import { redirect } from '@tanstack/react-router'
-
-const authMiddleware = createMiddleware({ type: 'function' })
-  .server(async ({ next }) => {
-    const session = await getSession()
-
-    if (!session) {
-      throw redirect({ to: '/login' })
-    }
-
-    return next({ context: { user: session.user } })
-  })
-
-// 사용
-export const protectedFn = createServerFn({ method: 'GET' })
-  .middleware([authMiddleware])
-  .handler(async ({ context }) => {
-    // context.user 사용 가능
-    return { user: context.user }
-  })
-```

package/templates/tanstack-start/docs/library/tanstack-start/routing.md

@@ -1,163 +1,66 @@
 # TanStack Start - Routing
 
-> **상위 문서**: [TanStack Start](./index.md)
+파일 기반 라우팅.
 
-TanStack Start는 파일 기반 라우팅을 지원합니다.
-
-## 기본 라우트
+## 기본 패턴
 
 ```tsx
 // routes/about.tsx
-import { createFileRoute } from '@tanstack/react-router'
-
 export const Route = createFileRoute('/about')({
   component: AboutPage,
 })
 
-function AboutPage() {
-  return <h1>About</h1>
-}
-```
-
-## Loader를 사용한 데이터 로딩
-
-```tsx
-// routes/index.tsx
-import { createFileRoute } from '@tanstack/react-router'
-
+// Loader
 export const Route = createFileRoute('/')({
   component: Page,
-  loader: async () => {
-    const res = await fetch('https://api.example.com/posts')
-    return res.json()
-  },
+  loader: async () => fetch('/api/posts').then(r => r.json()),
 })
 
 function Page() {
   const posts = Route.useLoaderData()
-  return (
-    <ul>
-      {posts.map((post) => (
-        <li key={post.id}>{post.title}</li>
-      ))}
-    </ul>
-  )
+  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
 }
-```
-
-## 동적 라우트
-
-```tsx
-// routes/users/$id.tsx
-import { createFileRoute } from '@tanstack/react-router'
 
+// 동적 라우트
 export const Route = createFileRoute('/users/$id')({
-  loader: async ({ params }) => {
-    const user = await getUserById(params.id)
-    return { user }
-  },
-  component: UserDetailPage,
-})
-
-function UserDetailPage() {
-  const { user } = Route.useLoaderData()
-  return <h1>{user.name}</h1>
-}
-```
-
-## SSR 설정
-
-```tsx
-// routes/posts/$postId.tsx
-export const Route = createFileRoute('/posts/$postId')({
-  ssr: true,  // SSR 활성화
-  beforeLoad: () => {
-    console.log('서버에서 초기 요청 시 실행')
-  },
-  loader: () => {
-    console.log('서버에서 초기 요청 시 실행')
+  loader: async ({ params }) => ({ user: await getUserById(params.id) }),
+  component: () => {
+    const { user } = Route.useLoaderData()
+    return <h1>{user.name}</h1>
   },
-  component: () => <div>서버에서 렌더링됨</div>,
 })
 ```
 
-### SSR 옵션
+## SSR 옵션
 
 ```typescript
-// ssr: true - 전체 SSR (기본값)
-// ssr: false - 클라이언트 사이드만
-// ssr: 'data-only' - 데이터만 서버에서 로드, 렌더링은 클라이언트
+ssr: true       // 전체 SSR (기본값)
+ssr: false      // 클라이언트만
+ssr: 'data-only' // 데이터만 서버, 렌더링은 클라이언트
 ```
 
 ## Server Routes (API)
 
-### 기본 API 라우트
-
 ```typescript
-// routes/api/hello.ts
-import { createFileRoute } from '@tanstack/react-router'
-
 export const Route = createFileRoute('/api/hello')({
   server: {
     handlers: {
-      GET: async ({ request }) => {
-        return new Response('Hello, World!')
-      },
+      GET: async () => new Response('Hello'),
       POST: async ({ request }) => {
         const body = await request.json()
-        return new Response(`Hello, ${body.name}!`)
+        return json({ name: body.name })
       },
     },
   },
 })
 ```
 
-### JSON 응답
-
-```typescript
-import { createFileRoute } from '@tanstack/react-router'
-import { json } from '@tanstack/react-start'
-
-export const Route = createFileRoute('/api/users')({
-  server: {
-    handlers: {
-      GET: async ({ request }) => {
-        const users = await getUsers()
-        return json({ users })
-      },
-    },
-  },
-})
-```
-
-## 라우트 파일 구조
+## 구조
 
 ```
 routes/
-├── __root.tsx           → Root layout
-├── index.tsx            → /
-├── about.tsx            → /about
-├── users/
-│   ├── index.tsx        → /users
-│   └── $id.tsx          → /users/:id
-├── posts/
-│   ├── index.tsx        → /posts
-│   ├── $postId.tsx      → /posts/:postId
-│   └── new.tsx          → /posts/new
-└── api/
-    ├── hello.ts         → /api/hello
-    └── users.ts         → /api/users
-```
-
-## Catch-All 라우트
-
-```tsx
-// routes/$.tsx - 모든 매칭되지 않는 경로 처리
-export const Route = createFileRoute('/$')({
-  component: NotFoundPage,
-})
-
-function NotFoundPage() {
-  return <h1>404 - Page Not Found</h1>
-}
+├── __root.tsx      → Root layout
+├── index.tsx       → /
+├── users/$id.tsx   → /users/:id
+├── $.tsx           → Catch-all (404)
 ```