@kood/claude-code 0.2.5 → 0.3.1

package/templates/tanstack-start/docs/library/tanstack-router/navigation.md

@@ -1,29 +1,13 @@
 # TanStack Router - Navigation
 
-Link 컴포넌트와 프로그래밍 네비게이션.
-
-## Link 컴포넌트
+<patterns>
 
 ```tsx
-import { Link } from '@tanstack/react-router'
-
-// 기본
+// Link
 <Link to="/about">About</Link>
-
-// 동적 파라미터
-<Link to="/posts/$postId" params={{ postId: '123' }}>
-  Post 123
-</Link>
-
-// Search params
-<Link to="/products" search={{ page: 1, sort: 'newest' }}>
-  Products
-</Link>
-
-// Search params 병합
-<Link to="/products" search={prev => ({ ...prev, page: 2 })}>
-  Next Page
-</Link>
+<Link to="/posts/$postId" params={{ postId: '123' }}>Post 123</Link>
+<Link to="/products" search={{ page: 1, sort: 'newest' }}>Products</Link>
+<Link to="/products" search={prev => ({ ...prev, page: 2 })}>Next</Link>
 
 // Active 스타일
 <Link
@@ -33,72 +17,59 @@ import { Link } from '@tanstack/react-router'
 >
   About
 </Link>
+<Link to="/" activeOptions={{ exact: true }}>Home</Link>
 
-// 정확히 일치할 때만 active
-<Link to="/" activeOptions={{ exact: true }}>
-  Home
-</Link>
-```
-
-## Link Props
-
-| Prop | 타입 | 설명 |
-|------|------|------|
-| `to` | string | 목적지 경로 |
-| `params` | object | Path 파라미터 |
-| `search` | object \| function | Search params |
-| `hash` | string | Hash |
-| `replace` | boolean | history replace |
-| `preload` | 'intent' \| 'render' \| 'viewport' | Preload 전략 |
-| `activeProps` | object | Active 시 props |
-| `inactiveProps` | object | Inactive 시 props |
-
-## useNavigate
-
-```tsx
-import { useNavigate } from '@tanstack/react-router'
-
-function Component() {
+// useNavigate
+const Component = () => {
   const navigate = useNavigate()
 
-  // 기본
-  const goToAbout = () => {
-    navigate({ to: '/about' })
-  }
+  const goToAbout = () => navigate({ to: '/about' })
+  const goToPost = (id: string) => navigate({ to: '/posts/$postId', params: { postId: id } })
+  const updateSearch = () => navigate({ to: '/products', search: prev => ({ ...prev, page: 2 }) })
+  const replaceRoute = () => navigate({ to: '/login', replace: true })
+  const goUp = () => navigate({ to: '..' })
 
-  // 동적 파라미터
-  const goToPost = (postId: string) => {
-    navigate({ to: '/posts/$postId', params: { postId } })
-  }
+  return <button onClick={goToAbout}>Go</button>
+}
 
-  // Search params
-  const updateSearch = () => {
-    navigate({
-      to: '/products',
-      search: prev => ({ ...prev, page: 2 }),
-    })
-  }
+// Preloading
+<Link to="/posts" preload="intent">Posts</Link>       // hover 시
+<Link to="/dashboard" preload="render">Dash</Link>    // 렌더링 시
+<Link to="/products" preload="viewport">Prod</Link>   // viewport 진입 시
 
-  // Replace (뒤로가기 안 됨)
-  const replaceRoute = () => {
-    navigate({ to: '/login', replace: true })
-  }
+// 조건부 네비게이션
+const SubmitButton = () => {
+  const navigate = useNavigate()
+  const [isPending, startTransition] = useTransition()
 
-  // 상대 경로
-  const goUp = () => {
-    navigate({ to: '..' })
+  const handleSubmit = async () => {
+    const result = await submitForm()
+    if (result.success) {
+      startTransition(() => navigate({ to: '/success' }))
+    }
   }
 
-  return (
-    <button onClick={goToAbout}>Go to About</button>
-  )
+  return <button onClick={handleSubmit} disabled={isPending}>Submit</button>
 }
 ```
 
-## navigate 옵션
+</patterns>
+
+<options>
 
-| 옵션 | 타입 | 설명 |
-|------|------|------|
+| Link Props | 타입 | 설명 |
+|------------|------|------|
+| `to` | string | 목적지 경로 |
+| `params` | object | Path 파라미터 |
+| `search` | object \| function | Search params |
+| `hash` | string | Hash |
+| `replace` | boolean | history replace |
+| `preload` | 'intent' \| 'render' \| 'viewport' | Preload 전략 |
+| `activeProps` | object | Active 시 props |
+| `inactiveProps` | object | Inactive 시 props |
+
+| navigate 옵션 | 타입 | 설명 |
+|---------------|------|------|
 | `to` | string | 목적지 경로 |
 | `params` | object | Path 파라미터 |
 | `search` | object \| function | Search params |
@@ -106,45 +77,4 @@ function Component() {
 | `replace` | boolean | history.replace 사용 |
 | `resetScroll` | boolean | 스크롤 리셋 |
 
-## Preloading
-
-```tsx
-// hover 시 preload
-<Link to="/posts" preload="intent">
-  Posts
-</Link>
-
-// 렌더링 시 preload
-<Link to="/dashboard" preload="render">
-  Dashboard
-</Link>
-
-// viewport 진입 시 preload
-<Link to="/products" preload="viewport">
-  Products
-</Link>
-```
-
-## 조건부 네비게이션
-
-```tsx
-function SubmitButton() {
-  const navigate = useNavigate()
-  const [isPending, startTransition] = useTransition()
-
-  const handleSubmit = async () => {
-    const result = await submitForm()
-    if (result.success) {
-      startTransition(() => {
-        navigate({ to: '/success' })
-      })
-    }
-  }
-
-  return (
-    <button onClick={handleSubmit} disabled={isPending}>
-      Submit
-    </button>
-  )
-}
-```
+</options>

package/templates/tanstack-start/docs/library/tanstack-router/route-context.md

@@ -1,181 +1,79 @@
 # TanStack Router - Route Context
 
-beforeLoad, context, protected routes 구현.
-
-## beforeLoad
-
-라우트 로드 전 실행. 인증 체크, 리다이렉트, context 추가.
+<patterns>
 
 ```tsx
-import { createFileRoute, redirect } from '@tanstack/react-router'
-
+// beforeLoad: 인증 체크 + context 추가
 export const Route = createFileRoute('/dashboard')({
   beforeLoad: async ({ context, location }) => {
-    // context에서 인증 상태 확인
     if (!context.auth.isAuthenticated) {
-      throw redirect({
-        to: '/login',
-        search: { redirect: location.href },
-      })
-    }
-
-    // 추가 context 반환 (loader에서 사용 가능)
-    return {
-      userPermissions: await fetchPermissions(context.auth.user.id),
+      throw redirect({ to: '/login', search: { redirect: location.href } })
     }
+    return { userPermissions: await fetchPermissions(context.auth.user.id) }
   },
-  loader: async ({ context }) => {
-    // beforeLoad에서 반환한 context 사용
-    return fetchDashboardData(context.userPermissions)
-  },
+  loader: async ({ context }) => fetchDashboardData(context.userPermissions),
   component: DashboardPage,
 })
-```
-
-## Protected Routes (Layout)
-
-pathless layout으로 보호된 라우트 그룹 생성.
-
-### _authed.tsx (Layout)
-
-```tsx
-// routes/_authed.tsx
-import { createFileRoute, redirect, Outlet } from '@tanstack/react-router'
-import { getCurrentUser } from '@/functions/auth'
 
+// Protected Routes: _authed.tsx (pathless layout)
 export const Route = createFileRoute('/_authed')({
   beforeLoad: async ({ location }) => {
     const user = await getCurrentUser()
-
-    if (!user) {
-      throw redirect({
-        to: '/login',
-        search: { redirect: location.href },
-      })
-    }
-
-    // 하위 라우트에서 사용할 context
+    if (!user) throw redirect({ to: '/login', search: { redirect: location.href } })
     return { user }
   },
   component: () => <Outlet />,
 })
-```
-
-### _authed/dashboard.tsx
-
-```tsx
-// routes/_authed/dashboard.tsx
-import { createFileRoute } from '@tanstack/react-router'
 
+// _authed/dashboard.tsx
 export const Route = createFileRoute('/_authed/dashboard')({
   component: DashboardPage,
 })
-
-function DashboardPage() {
-  // _authed에서 전달된 context
-  const { user } = Route.useRouteContext()
-
-  return (
-    <div>
-      <h1>Welcome, {user.name}!</h1>
-    </div>
-  )
+const DashboardPage = () => {
+  const { user } = Route.useRouteContext()  // _authed에서 전달된 context
+  return <h1>Welcome, {user.name}!</h1>
 }
-```
-
-### 구조
-
-```
-routes/
-├── _authed.tsx           # Protected layout (beforeLoad에서 인증 체크)
-├── _authed/
-│   ├── dashboard.tsx     # /dashboard (protected)
-│   ├── settings.tsx      # /settings (protected)
-│   └── profile.tsx       # /profile (protected)
-├── login.tsx             # /login (public)
-└── index.tsx             # / (public)
-```
-
-## Root Context
-
-전역 context 설정 (QueryClient, Auth 등).
-
-### __root.tsx
-
-```tsx
-// routes/__root.tsx
-import { createRootRouteWithContext, Outlet } from '@tanstack/react-router'
-import type { QueryClient } from '@tanstack/react-query'
 
+// Root Context
 interface RouterContext {
   queryClient: QueryClient
-  auth: {
-    isAuthenticated: boolean
-    user: { id: string; name: string } | null
-  }
+  auth: { isAuthenticated: boolean; user: User | null }
 }
 
 export const Route = createRootRouteWithContext<RouterContext>()({
   component: RootLayout,
 })
 
-function RootLayout() {
-  return (
-    <div>
-      <Outlet />
-    </div>
-  )
-}
-```
-
-### Router 생성
-
-```tsx
-// app/router.tsx
-import { createRouter } from '@tanstack/react-router'
-import { routeTree } from './routeTree.gen'
-import { queryClient } from './query-client'
-
-export const router = createRouter({
+const router = createRouter({
   routeTree,
-  context: {
-    queryClient,
-    auth: {
-      isAuthenticated: false,
-      user: null,
-    },
-  },
+  context: { queryClient, auth: { isAuthenticated: false, user: null } },
 })
-```
-
-## redirect
-
-```tsx
-import { redirect } from '@tanstack/react-router'
 
-// 기본 리다이렉트
+// redirect
 throw redirect({ to: '/login' })
+throw redirect({ to: '/login', search: { redirect: '/dashboard' } })
+throw redirect({ to: '/posts/$postId', params: { postId: '123' } })
+throw redirect({ to: '/home', replace: true })
+```
 
-// Search params 포함
-throw redirect({
-  to: '/login',
-  search: { redirect: '/dashboard' },
-})
+</patterns>
 
-// 동적 파라미터
-throw redirect({
-  to: '/posts/$postId',
-  params: { postId: '123' },
-})
+<structure>
 
-// replace (뒤로가기 X)
-throw redirect({
-  to: '/home',
-  replace: true,
-})
+```
+routes/
+├── _authed.tsx           # Protected layout
+├── _authed/
+│   ├── dashboard.tsx     # /dashboard (protected)
+│   ├── settings.tsx      # /settings (protected)
+│   └── profile.tsx       # /profile (protected)
+├── login.tsx             # /login (public)
+└── index.tsx             # / (public)
 ```
 
-## Context 사용 위치
+</structure>
+
+<usage>
 
 | 위치 | 접근 방법 |
 |------|----------|
@@ -183,21 +81,4 @@ throw redirect({
 | loader | `{ context }` 파라미터 |
 | component | `Route.useRouteContext()` |
 
-```tsx
-export const Route = createFileRoute('/example')({
-  beforeLoad: ({ context }) => {
-    console.log(context.auth)
-    return { extra: 'data' }
-  },
-  loader: ({ context }) => {
-    // beforeLoad 반환값도 포함됨
-    console.log(context.extra)
-  },
-  component: ExamplePage,
-})
-
-function ExamplePage() {
-  const context = Route.useRouteContext()
-  // context.auth, context.extra 모두 접근 가능
-}
-```
+</usage>

package/templates/tanstack-start/docs/library/tanstack-router/search-params.md

@@ -1,213 +1,74 @@
 # TanStack Router - Search Params
 
-Type-safe URL search params with Zod validation.
-
-## 기본 사용
+<patterns>
 
 ```tsx
-import { createFileRoute } from '@tanstack/react-router'
-import { z } from 'zod'
-
-// 스키마 정의
-const productSearchSchema = z.object({
-  page: z.number().catch(1),
-  filter: z.string().catch(''),
-  sort: z.enum(['newest', 'oldest', 'price']).catch('newest'),
+// Zod 스키마 + 라우트
+const searchSchema = z.object({
+  page: z.number().catch(1),            // 기본값
+  search: z.string().optional(),        // 선택
+  sort: z.enum(['newest', 'price']).catch('newest'),
+  tags: z.array(z.string()).catch([]),  // 배열
+  inStock: z.boolean().catch(true),     // Boolean
+  from: z.string().date().optional(),   // 날짜
+  minPrice: z.number().min(0).catch(0), // 범위
 })
 
-type ProductSearch = z.infer<typeof productSearchSchema>
-
-// 라우트에 적용
 export const Route = createFileRoute('/products')({
-  validateSearch: productSearchSchema,
+  validateSearch: searchSchema,
+  loaderDeps: ({ search }) => ({ search }),  // search 변경 시 loader 재실행
+  loader: async ({ deps: { search } }) => fetchProducts(search),
   component: ProductsPage,
 })
 
-// 컴포넌트에서 사용
-function ProductsPage() {
-  const { page, filter, sort } = Route.useSearch()
-
-  return (
-    <div>
-      <p>Page: {page}</p>
-      <p>Filter: {filter}</p>
-      <p>Sort: {sort}</p>
-    </div>
-  )
+const ProductsPage = () => {
+  const { page, search, sort } = Route.useSearch()
+  return <div>Page: {page}, Sort: {sort}</div>
 }
-```
-
-## Zod 스키마 패턴
-
-```tsx
-import { z } from 'zod'
-
-// 기본값 (.catch)
-const schema = z.object({
-  page: z.number().catch(1),            // 파싱 실패 시 1
-  search: z.string().optional(),        // undefined 허용
-  tab: z.enum(['all', 'active']).catch('all'),
-})
-
-// 복잡한 타입
-const advancedSchema = z.object({
-  // 배열
-  tags: z.array(z.string()).catch([]),
-
-  // 날짜
-  from: z.string().date().optional(),
-  to: z.string().date().optional(),
-
-  // 숫자 범위
-  minPrice: z.number().min(0).catch(0),
-  maxPrice: z.number().max(10000).catch(10000),
-
-  // Boolean
-  inStock: z.boolean().catch(true),
-})
-```
-
-## Search Params 업데이트
-
-### Link로 업데이트
-
-```tsx
-import { Link } from '@tanstack/react-router'
-
-// 전체 교체
-<Link to="/products" search={{ page: 1, sort: 'newest' }}>
-  Reset
-</Link>
 
-// 병합
-<Link to="/products" search={prev => ({ ...prev, page: 2 })}>
-  Next Page
-</Link>
+// Link로 업데이트
+<Link to="/products" search={{ page: 1, sort: 'newest' }}>Reset</Link>
+<Link to="/products" search={prev => ({ ...prev, page: 2 })}>Next</Link>
 
-// 특정 값만 변경
-<Link
-  to="/products"
-  search={prev => ({ ...prev, sort: 'price' })}
->
-  Sort by Price
-</Link>
-```
-
-### useNavigate로 업데이트
-
-```tsx
-import { useNavigate } from '@tanstack/react-router'
-
-function Pagination() {
+// useNavigate로 업데이트
+const Pagination = () => {
   const navigate = useNavigate()
   const { page } = Route.useSearch()
 
   const goToPage = (newPage: number) => {
-    navigate({
-      to: '/products',
-      search: prev => ({ ...prev, page: newPage }),
-    })
+    navigate({ to: '/products', search: prev => ({ ...prev, page: newPage }) })
   }
 
   return (
     <div>
-      <button onClick={() => goToPage(page - 1)} disabled={page <= 1}>
-        Prev
-      </button>
+      <button onClick={() => goToPage(page - 1)} disabled={page <= 1}>Prev</button>
       <span>Page {page}</span>
-      <button onClick={() => goToPage(page + 1)}>
-        Next
-      </button>
+      <button onClick={() => goToPage(page + 1)}>Next</button>
     </div>
   )
 }
-```
-
-## 실전 예시
-
-### 필터 + 정렬 + 페이지네이션
-
-```tsx
-import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
-import { z } from 'zod'
-
-const searchSchema = z.object({
-  page: z.number().min(1).catch(1),
-  pageSize: z.number().catch(10),
-  search: z.string().catch(''),
-  category: z.enum(['all', 'tech', 'lifestyle']).catch('all'),
-  sort: z.enum(['newest', 'oldest', 'popular']).catch('newest'),
-})
-
-export const Route = createFileRoute('/posts')({
-  validateSearch: searchSchema,
-  loaderDeps: ({ search }) => ({ search }),  // search 변경 시 loader 재실행
-  loader: async ({ deps: { search } }) => {
-    return fetchPosts(search)
-  },
-  component: PostsPage,
-})
 
-function PostsPage() {
+// 실전: 필터 + 정렬 + 페이지네이션
+const PostsPage = () => {
   const { page, search, category, sort } = Route.useSearch()
   const posts = Route.useLoaderData()
   const navigate = useNavigate()
 
-  const updateSearch = (updates: Partial<typeof searchSchema._type>) => {
-    navigate({
-      to: '/posts',
-      search: prev => ({ ...prev, ...updates, page: 1 }),  // 필터 변경 시 1페이지로
-    })
+  const updateSearch = (updates: Partial<z.infer<typeof searchSchema>>) => {
+    navigate({ to: '/posts', search: prev => ({ ...prev, ...updates, page: 1 }) })
   }
 
   return (
     <div>
-      {/* 검색 */}
-      <input
-        value={search}
-        onChange={e => updateSearch({ search: e.target.value })}
-        placeholder="Search..."
-      />
-
-      {/* 카테고리 필터 */}
-      <select
-        value={category}
-        onChange={e => updateSearch({ category: e.target.value as any })}
-      >
+      <input value={search} onChange={e => updateSearch({ search: e.target.value })} />
+      <select value={category} onChange={e => updateSearch({ category: e.target.value as any })}>
         <option value="all">All</option>
         <option value="tech">Tech</option>
-        <option value="lifestyle">Lifestyle</option>
       </select>
-
-      {/* 정렬 */}
-      <select
-        value={sort}
-        onChange={e => updateSearch({ sort: e.target.value as any })}
-      >
-        <option value="newest">Newest</option>
-        <option value="oldest">Oldest</option>
-        <option value="popular">Popular</option>
-      </select>
-
-      {/* 목록 */}
-      {posts.map(post => (
-        <div key={post.id}>{post.title}</div>
-      ))}
+      {posts.map(post => <div key={post.id}>{post.title}</div>)}
     </div>
   )
 }
 ```
 
-## loaderDeps
-
-Search params 변경 시 loader 재실행하려면 `loaderDeps` 필요.
-
-```tsx
-export const Route = createFileRoute('/products')({
-  validateSearch: searchSchema,
-  loaderDeps: ({ search }) => ({ search }),  // 의존성 선언
-  loader: async ({ deps: { search } }) => {
-    return fetchProducts(search)
-  },
-})
-```
+</patterns>