jun-claude-code 0.0.1

package/.claude/skills/React/react-hook-form.md

@@ -0,0 +1,222 @@
+---
+name: react-hook-form
+description: 폼 구현 시 사용. Zod 스키마 정의, useForm 훅 설정, 필드 에러 처리, TRPC mutation 연동 패턴 제공.
+keywords: [react-hook-form, zod, form, 폼, validation, 검증, useForm, register, handleSubmit]
+estimated_tokens: ~500
+---
+
+# React Hook Form + Zod 패턴
+
+## 핵심 역할
+
+- Zod 스키마 기반 폼 검증
+- useForm 훅을 통한 폼 상태 관리
+- TRPC mutation과의 연동
+- 타입 안전한 폼 처리
+
+## 파일 구조
+
+```
+src/features/auth/
+├── components/
+│   └── LoginForm.tsx        # 폼 컴포넌트
+├── schemas/
+│   └── loginFormSchema.ts   # Zod 스키마 (별도 파일)
+└── hooks/
+    └── useLoginMutation.ts  # TRPC mutation 훅
+```
+
+## 필수 준수 사항
+
+| 규칙 | 올바른 예 | 잘못된 예 |
+|------|----------|----------|
+| 스키마 파일 분리 | `*FormSchema.ts` 별도 파일 | 컴포넌트 내 스키마 정의 |
+| 타입 추론 | `z.infer<typeof schema>` | 수동 타입 정의 |
+| 에러 표시 | `formState.errors` 사용 | 커스텀 에러 상태 |
+| 로딩 상태 | `mutation.isPending` 사용 | 별도 loading 상태 |
+
+## 스키마 정의 패턴
+
+```typescript
+// schemas/loginFormSchema.ts
+import { z } from 'zod'
+
+export const loginFormSchema = z.object({
+  email: z
+    .string()
+    .min(1, '이메일을 입력해주세요')
+    .email('올바른 이메일 형식이 아닙니다'),
+  password: z
+    .string()
+    .min(1, '비밀번호를 입력해주세요')
+    .min(8, '비밀번호는 8자 이상이어야 합니다'),
+})
+
+export type LoginFormData = z.infer<typeof loginFormSchema>
+```
+
+### 조건부 검증
+
+```typescript
+export const registerFormSchema = z.object({
+  password: z.string().min(8),
+  confirmPassword: z.string(),
+}).refine((data) => data.password === data.confirmPassword, {
+  message: '비밀번호가 일치하지 않습니다',
+  path: ['confirmPassword'],
+})
+```
+
+## 폼 컴포넌트 패턴
+
+```typescript
+// components/LoginForm.tsx
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { loginFormSchema, LoginFormData } from '../schemas/loginFormSchema'
+import { trpc } from '@/utils/trpc'
+
+export function LoginForm() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginFormData>({
+    resolver: zodResolver(loginFormSchema),
+    defaultValues: {
+      email: '',
+      password: '',
+    },
+  })
+
+  const loginMutation = trpc.auth.login.useMutation({
+    onSuccess: (data) => {
+      // 성공 처리
+    },
+    onError: (error) => {
+      // 에러 처리
+    },
+  })
+
+  const onSubmit = (data: LoginFormData) => {
+    loginMutation.mutate(data)
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div>
+        <input
+          {...register('email')}
+          type="email"
+          placeholder="이메일"
+        />
+        {errors.email && (
+          <span className="error">{errors.email.message}</span>
+        )}
+      </div>
+
+      <div>
+        <input
+          {...register('password')}
+          type="password"
+          placeholder="비밀번호"
+        />
+        {errors.password && (
+          <span className="error">{errors.password.message}</span>
+        )}
+      </div>
+
+      <button
+        type="submit"
+        disabled={loginMutation.isPending}
+      >
+        {loginMutation.isPending ? '로그인 중...' : '로그인'}
+      </button>
+    </form>
+  )
+}
+```
+
+## 필드별 검증 (safeParse)
+
+```typescript
+// 실시간 필드 검증이 필요한 경우
+const validateEmail = (value: string) => {
+  const result = loginFormSchema.shape.email.safeParse(value)
+  return result.success ? true : result.error.errors[0].message
+}
+
+// useForm에서 사용
+const { register } = useForm<LoginFormData>({
+  mode: 'onBlur', // blur 시 검증
+})
+```
+
+## 에러 처리 패턴
+
+### 폼 에러 표시
+
+```typescript
+function FormField({ name, register, errors }: FormFieldProps) {
+  return (
+    <div className="form-field">
+      <input {...register(name)} />
+      {errors[name] && (
+        <p className="error-message">{errors[name]?.message}</p>
+      )}
+    </div>
+  )
+}
+```
+
+### 서버 에러 처리
+
+```typescript
+const loginMutation = trpc.auth.login.useMutation({
+  onError: (error) => {
+    // TRPC 에러를 폼 에러로 변환
+    if (error.data?.code === 'UNAUTHORIZED') {
+      setError('password', {
+        message: '이메일 또는 비밀번호가 올바르지 않습니다'
+      })
+    }
+  },
+})
+```
+
+## Watch 패턴
+
+```typescript
+const { watch, register } = useForm<FormData>()
+
+// 특정 필드 감시
+const watchedEmail = watch('email')
+
+// 전체 폼 감시
+const formValues = watch()
+
+// 조건부 렌더링
+{watchedEmail && <p>입력된 이메일: {watchedEmail}</p>}
+```
+
+## 체크리스트
+
+### 스키마 설정
+- [ ] 스키마를 별도 파일(*FormSchema.ts)로 분리
+- [ ] z.infer로 타입 추론
+- [ ] 에러 메시지 한글화
+
+### 폼 구현
+- [ ] zodResolver 사용
+- [ ] defaultValues 설정
+- [ ] register로 필드 등록
+
+### 에러 처리
+- [ ] formState.errors로 에러 표시
+- [ ] 서버 에러는 setError로 처리
+- [ ] 필드별 에러 메시지 표시
+
+### TRPC 연동
+- [ ] useMutation 사용
+- [ ] isPending으로 로딩 상태 표시
+- [ ] onSuccess/onError 핸들러 구현

package/.claude/skills/React/tailwind-styled.md

@@ -0,0 +1,165 @@
+---
+name: tailwind-styled
+description: tailwind-styled-components로 스타일링 시 사용. DOM depth 최소화 원칙, wrapper 제거 패턴, 조건부 스타일 적용법 제공.
+keywords: [tailwind, styled-components, tw, DOM, depth, wrapper, 스타일링]
+estimated_tokens: ~350
+---
+
+# tailwind-styled-components 스킬
+
+## 핵심 원칙
+
+**DOM depth를 최소화하라.**
+- 불필요한 wrapper div 제거
+- 스타일만을 위한 중첩 요소 금지
+- 하나의 Styled Component가 하나의 DOM 요소
+
+## 필수 준수 사항
+
+### DOM Depth 최소화
+
+| 잘못된 예 | 올바른 예 |
+|----------|----------|
+| `<Wrapper><Inner><Content>...</Content></Inner></Wrapper>` | `<Container>...</Container>` |
+| `<div><div className="...">...</div></div>` | `<StyledDiv>...</StyledDiv>` |
+
+### 예제: 불필요한 중첩 제거
+
+```typescript
+// ❌ Bad - 불필요한 DOM depth
+const Card = () => (
+  <div>
+    <div className="p-4">
+      <div className="bg-white rounded-lg shadow">
+        <div className="flex flex-col gap-4">
+          {content}
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+// ✅ Good - 최소한의 DOM depth
+const CardContainer = tw.div`
+  p-4
+  bg-white
+  rounded-lg
+  shadow
+  flex
+  flex-col
+  gap-4
+`;
+
+const Card = () => (
+  <CardContainer>
+    {content}
+  </CardContainer>
+);
+```
+
+### 예제: Tailwind 디자인 변환
+
+```typescript
+// 원본 Tailwind (depth: 3)
+<div className="p-5">
+  <div className="bg-white rounded-t-[32px]">
+    <div className="flex flex-col gap-5">
+      <h2>Title</h2>
+    </div>
+  </div>
+</div>
+
+// ✅ 변환 후 (depth: 1)
+const StepContent = tw.div`
+  p-5
+  bg-white
+  rounded-t-[32px]
+  flex
+  flex-col
+  gap-5
+`;
+
+<StepContent>
+  <Title>Title</Title>
+</StepContent>
+```
+
+## Styled Component 네이밍
+
+| 용도 | 네이밍 패턴 | 예시 |
+|------|------------|------|
+| 컨테이너 | `*Container`, `*Wrapper` | `CardContainer` |
+| 섹션 | `*Section`, `*Area` | `HeaderSection` |
+| 아이템 | `*Item`, `*Row` | `ListItem` |
+| 텍스트 | `Title`, `Label`, `Text` | `SectionLabel` |
+| 입력 | `*Input`, `*Field` | `PhoneInput` |
+| 버튼 | `*Button`, `*Btn` | `SubmitButton` |
+
+## Props 기반 동적 스타일링
+
+```typescript
+import tw from 'tailwind-styled-components';
+
+interface ButtonProps {
+  $primary?: boolean;
+  $size?: 'sm' | 'md' | 'lg';
+}
+
+const Button = tw.button<ButtonProps>`
+  rounded-lg
+  font-medium
+  transition-colors
+
+  ${({ $primary }) =>
+    $primary
+      ? 'bg-blue-500 text-white hover:bg-blue-600'
+      : 'bg-gray-200 text-gray-800 hover:bg-gray-300'
+  }
+
+  ${({ $size }) => {
+    switch ($size) {
+      case 'sm': return 'px-3 py-1.5 text-sm';
+      case 'lg': return 'px-6 py-3 text-lg';
+      default: return 'px-4 py-2 text-base';
+    }
+  }}
+`;
+
+// 사용
+<Button $primary $size="lg">Submit</Button>
+```
+
+## 기존 HTML 요소 확장
+
+```typescript
+// 기존 컴포넌트에 스타일 추가
+const StyledLink = tw(Link)`
+  text-blue-500
+  hover:underline
+`;
+
+// input 확장
+const Input = tw.input`
+  w-full
+  px-4
+  py-2
+  border
+  border-gray-300
+  rounded-lg
+  focus:outline-none
+  focus:ring-2
+  focus:ring-blue-500
+`;
+```
+
+## 체크리스트
+
+### DOM 구조
+- [ ] 스타일만을 위한 wrapper div가 있는가? → 제거
+- [ ] 중첩된 div를 하나로 합칠 수 있는가? → 합치기
+- [ ] depth가 3 이상인가? → 리팩토링 고려
+
+### Styled Component
+- [ ] 의미 있는 이름인가?
+- [ ] transient props($prefix)를 사용하는가?
+- [ ] 재사용 가능한 컴포넌트인가?

package/.claude/skills/React/tanstack-router.md

@@ -0,0 +1,184 @@
+---
+name: tanstack-router
+description: TanStack Router로 라우팅 구현 시 사용. 파일 기반 라우트 구조, 동적 경로, beforeLoad 인증 guard 패턴 제공.
+keywords: [tanstack, router, 라우팅, 파일기반, createFileRoute, navigate, beforeLoad, guard]
+estimated_tokens: ~450
+---
+
+# TanStack Router 패턴
+
+## 핵심 역할
+
+- 파일 기반 라우팅 설정
+- 동적 라우트 및 레이아웃 구성
+- 인증 guard 구현
+- 타입 안전한 네비게이션
+
+## 파일 기반 라우팅 구조
+
+```
+src/routes/
+├── __root.tsx           # 루트 레이아웃
+├── index.tsx            # / 경로
+├── _layout.tsx          # 공통 레이아웃 (언더스코어)
+├── _layout/
+│   ├── dashboard.tsx    # /dashboard
+│   └── settings.tsx     # /settings
+├── products/
+│   ├── index.tsx        # /products
+│   └── $productId.tsx   # /products/:productId (동적)
+└── auth/
+    ├── login.tsx        # /auth/login
+    └── register.tsx     # /auth/register
+```
+
+## 필수 준수 사항
+
+| 규칙 | 올바른 예 | 잘못된 예 |
+|------|----------|----------|
+| 동적 라우트 | `$slug.tsx`, `$productId.tsx` | `:slug.tsx`, `[slug].tsx` |
+| 레이아웃 라우트 | `_layout.tsx` (언더스코어) | `layout.tsx` |
+| 루트 라우트 | `__root.tsx` (더블 언더스코어) | `root.tsx` |
+| 네비게이션 훅 | `Route.useNavigate()` | `useNavigate()` 직접 import |
+
+## 라우트 정의 패턴
+
+### 기본 라우트
+
+```typescript
+// routes/products/index.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/products/')({
+  component: ProductsPage,
+})
+
+function ProductsPage() {
+  return <div>Products List</div>
+}
+```
+
+### 동적 라우트
+
+```typescript
+// routes/products/$productId.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/products/$productId')({
+  component: ProductDetailPage,
+})
+
+function ProductDetailPage() {
+  const { productId } = Route.useParams()
+  return <div>Product: {productId}</div>
+}
+```
+
+### 루트 레이아웃
+
+```typescript
+// routes/__root.tsx
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+  component: RootLayout,
+})
+
+function RootLayout() {
+  return (
+    <div>
+      <Header />
+      <Outlet />
+      <Footer />
+    </div>
+  )
+}
+```
+
+### 레이아웃 라우트 (그룹화)
+
+```typescript
+// routes/_layout.tsx
+import { createFileRoute, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_layout')({
+  component: LayoutWrapper,
+})
+
+function LayoutWrapper() {
+  return (
+    <div className="with-sidebar">
+      <Sidebar />
+      <main>
+        <Outlet />
+      </main>
+    </div>
+  )
+}
+```
+
+## 네비게이션
+
+```typescript
+function ProductCard({ productId }: { productId: string }) {
+  const navigate = Route.useNavigate()
+
+  const handleClick = () => {
+    navigate({ to: '/products/$productId', params: { productId } })
+  }
+
+  return <button onClick={handleClick}>View Product</button>
+}
+```
+
+## 인증 Guard (beforeLoad)
+
+```typescript
+// routes/_authenticated.tsx
+import { createFileRoute, redirect } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_authenticated')({
+  beforeLoad: async ({ context }) => {
+    const { isAuthenticated } = context.auth
+
+    if (!isAuthenticated) {
+      throw redirect({
+        to: '/auth/login',
+        search: { redirect: location.pathname },
+      })
+    }
+  },
+  component: AuthenticatedLayout,
+})
+```
+
+### 역할 기반 Guard
+
+```typescript
+export const Route = createFileRoute('/_admin')({
+  beforeLoad: async ({ context }) => {
+    const { user } = context.auth
+
+    if (!user || user.role !== 'admin') {
+      throw redirect({ to: '/unauthorized' })
+    }
+  },
+})
+```
+
+## 체크리스트
+
+### 라우트 설정 시
+- [ ] 동적 파라미터에 `$` 프리픽스 사용
+- [ ] 레이아웃 라우트에 `_` 프리픽스 사용
+- [ ] 루트 레이아웃은 `__root.tsx`
+
+### 네비게이션
+- [ ] `Route.useNavigate()` 사용
+- [ ] 타입 안전한 params 전달
+- [ ] 동적 파라미터는 params 객체로 전달
+
+### 인증
+- [ ] beforeLoad에서 인증 체크
+- [ ] redirect로 리다이렉트 처리
+- [ ] 원래 경로 저장 (redirect search param)

package/README.md

@@ -0,0 +1,94 @@
+# jun-claude-code
+
+Claude Code 설정 템플릿 CLI입니다. 미리 정의된 `.claude` 설정을 `~/.claude`로 복사하여 새 프로젝트에서 빠르게 Claude Code 환경을 구축할 수 있습니다.
+
+## 설치
+
+```bash
+# npx로 바로 실행
+npx jun-claude-code
+
+# 또는 전역 설치
+npm install -g jun-claude-code
+```
+
+## 사용법
+
+```bash
+# 기본 실행 (기존 파일이 있으면 덮어쓰기 확인)
+jun-claude-code
+
+# 미리보기 (실제 복사 없이 복사될 파일 목록 확인)
+jun-claude-code --dry-run
+
+# 강제 덮어쓰기 (확인 없이 모든 파일 복사)
+jun-claude-code --force
+```
+
+## 포함된 설정
+
+### Agents (`.claude/agents/`)
+
+| Agent | 설명 |
+|-------|------|
+| `explore` | 빠른 코드베이스 탐색 |
+| `task-planner` | 작업 계획 수립 |
+| `code-writer` | 코드 작성 |
+| `code-reviewer` | 셀프 코드 리뷰 |
+| `git-manager` | Git 작업 (커밋, PR) |
+| `impact-analyzer` | 사이드이펙트 분석 |
+| `qa-tester` | 테스트/빌드 검증 |
+| `architect` | 아키텍처 설계 |
+| `designer` | UI/UX 스타일링 |
+| `context-collector` | Context 수집 |
+| `context-manager` | Context 문서 관리 |
+
+### Skills (`.claude/skills/`)
+
+| Skill | 설명 |
+|-------|------|
+| `Coding` | 공통 코딩 원칙 (SRP, 응집도, 가독성) |
+| `Git` | Git 커밋/PR 규칙 |
+| `Backend` | 백엔드 개발 원칙 (레이어, TypeORM) |
+
+### Hooks (`.claude/hooks/`)
+
+- 워크플로우 순서 강제 프로토콜
+- Skill/Agent 평가 프로토콜
+
+## 커스터마이징
+
+설치 후 `~/.claude/` 디렉토리에서 필요에 맞게 수정하세요.
+
+```
+~/.claude/
+├── CLAUDE.md          # 작업 가이드
+├── agents/            # Agent 정의 수정/추가
+├── skills/            # Skill 가이드 수정/추가
+├── hooks/             # 자동 실행 스크립트
+└── context/           # 프로젝트별 Context (직접 추가)
+```
+
+### 프로젝트별 설정
+
+프로젝트 루트에 `.claude/` 폴더를 만들어 프로젝트별 설정을 추가할 수 있습니다.
+
+```
+your-project/
+├── .claude/
+│   ├── context/       # 프로젝트 아키텍처, 도메인 지식
+│   └── skills/        # 프로젝트 전용 스킬
+└── CLAUDE.md          # 프로젝트 설명
+```
+
+## 핵심 원칙
+
+이 템플릿의 핵심 원칙:
+
+1. **Context 절약**: Main Agent의 Context Window 보존을 위해 Subagent에 작업 위임
+2. **워크플로우 준수**: Planning → Validation → Implementation → Review
+3. **Git 작업 위임**: 모든 Git 작업은 `git-manager` Agent 사용
+
+## License
+
+MIT

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const copy_1 = require("./copy");
+const program = new commander_1.Command();
+program
+    .name('jun-claude-code')
+    .description('Copy .claude configuration files to your home directory (~/.claude)')
+    .version('1.0.0')
+    .option('-d, --dry-run', 'Preview files to be copied without actually copying')
+    .option('-f, --force', 'Overwrite existing files without confirmation')
+    .action(async (options) => {
+    try {
+        await (0, copy_1.copyClaudeFiles)({
+            dryRun: options.dryRun,
+            force: options.force,
+        });
+    }
+    catch (error) {
+        if (error instanceof Error) {
+            console.error('Error:', error.message);
+        }
+        else {
+            console.error('An unexpected error occurred');
+        }
+        process.exit(1);
+    }
+});
+program.parse();

package/dist/copy.d.ts

@@ -0,0 +1,8 @@
+export interface CopyOptions {
+    dryRun?: boolean;
+    force?: boolean;
+}
+/**
+ * Copy .claude files to user's home directory
+ */
+export declare function copyClaudeFiles(options?: CopyOptions): Promise<void>;