@choblue/claude-code-toolkit 1.2.5 → 1.2.7

package/.claude/skills/ReactHookForm/SKILL.md

@@ -107,201 +107,7 @@ function CreateUserForm() {
 
 ---
 
-## 4. Controller 패턴
-
-`register`를 사용할 수 없는 제어 컴포넌트 (Select, DatePicker, 커스텀 UI 라이브러리 등)에 사용한다.
-
-```typescript
-import { Controller, useForm } from 'react-hook-form';
-
-function UserForm() {
-  const { control, handleSubmit } = useForm<UserFormValues>({
-    resolver: zodResolver(userSchema),
-  });
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Controller
-        name="role"
-        control={control}
-        render={({ field, fieldState: { error } }) => (
-          <>
-            <Select
-              value={field.value}
-              onChange={field.onChange}
-              options={roleOptions}
-            />
-            {error && <span>{error.message}</span>}
-          </>
-        )}
-      />
-
-      <Controller
-        name="birthDate"
-        control={control}
-        render={({ field, fieldState: { error } }) => (
-          <>
-            <DatePicker
-              selected={field.value}
-              onChange={field.onChange}
-            />
-            {error && <span>{error.message}</span>}
-          </>
-        )}
-      />
-    </form>
-  );
-}
-```
-
----
-
-## 5. 에러 핸들링
-
-### errors 객체로 직접 표시
-
-```typescript
-// 간단한 에러 표시
-{errors.email && <span className="error">{errors.email.message}</span>}
-```
-
-### 재사용 가능한 에러 컴포넌트
-
-```typescript
-interface FieldErrorProps {
-  error?: FieldError;
-}
-
-function FieldError({ error }: FieldErrorProps) {
-  if (!error) return null;
-  return <span className="field-error">{error.message}</span>;
-}
-
-// 사용
-<input {...register('email')} />
-<FieldError error={errors.email} />
-```
-
----
-
-## 6. 폼 검증 모드
-
-### mode 옵션
-
-| mode | 동작 | 용도 |
-|------|------|------|
-| `onSubmit` (기본) | 제출 시에만 검증 | 대부분의 폼 |
-| `onBlur` | 포커스를 벗어날 때 검증 | 긴 폼, 단계별 입력 |
-| `onChange` | 입력할 때마다 검증 | 실시간 피드백이 필요한 필드 |
-| `onTouched` | 첫 blur 이후부터 onChange로 검증 | 사용자 친화적 검증 |
-
-```typescript
-const { register, handleSubmit } = useForm<FormValues>({
-  resolver: zodResolver(schema),
-  mode: 'onBlur', // 포커스를 벗어날 때 검증
-});
-```
-
----
-
-## 7. 동적 필드 (useFieldArray)
-
-반복되는 필드 그룹을 동적으로 추가/삭제한다.
-
-```typescript
-const orderSchema = z.object({
-  items: z.array(
-    z.object({
-      productId: z.string().min(1, '상품을 선택해주세요'),
-      quantity: z.number().min(1, '수량은 1개 이상이어야 합니다'),
-    })
-  ).min(1, '최소 1개 이상의 상품을 추가해주세요'),
-});
-
-type OrderForm = z.infer<typeof orderSchema>;
-
-function OrderForm() {
-  const { control, register, handleSubmit } = useForm<OrderForm>({
-    resolver: zodResolver(orderSchema),
-    defaultValues: { items: [{ productId: '', quantity: 1 }] },
-  });
-
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: 'items',
-  });
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      {fields.map((field, index) => (
-        <div key={field.id}>
-          <input {...register(`items.${index}.productId`)} />
-          <input
-            type="number"
-            {...register(`items.${index}.quantity`, { valueAsNumber: true })}
-          />
-          <button type="button" onClick={() => remove(index)}>
-            삭제
-          </button>
-        </div>
-      ))}
-      <button type="button" onClick={() => append({ productId: '', quantity: 1 })}>
-        상품 추가
-      </button>
-    </form>
-  );
-}
-```
-
----
-
-## 8. 중첩 객체 / 배열 스키마
-
-### 중첩 객체
-
-```typescript
-const addressSchema = z.object({
-  zipCode: z.string().length(5, '우편번호는 5자리입니다'),
-  city: z.string().min(1, '도시를 입력해주세요'),
-  detail: z.string().min(1, '상세 주소를 입력해주세요'),
-});
-
-const userSchema = z.object({
-  name: z.string().min(1),
-  address: addressSchema,       // 중첩 객체
-  tags: z.array(z.string()),    // 문자열 배열
-});
-
-type UserForm = z.infer<typeof userSchema>;
-
-// register로 점 표기법 사용
-<input {...register('address.zipCode')} />
-<input {...register('address.city')} />
-<input {...register('address.detail')} />
-
-// 에러 접근도 점 표기법
-{errors.address?.zipCode && <span>{errors.address.zipCode.message}</span>}
-```
-
-### 스키마 재사용
-
-```typescript
-// 공통 스키마를 조합하여 재사용한다
-const baseUserSchema = z.object({
-  name: z.string().min(1),
-  email: z.string().email(),
-});
-
-const createUserSchema = baseUserSchema.extend({
-  password: z.string().min(8),
-});
-
-const updateUserSchema = baseUserSchema.partial(); // 모든 필드 optional
-```
-
----
-
-## 9. 네이밍 컨벤션
+## 4. 네이밍 컨벤션
 
 | 대상 | 규칙 | 예시 |
 |------|------|------|
@@ -312,7 +118,7 @@ const updateUserSchema = baseUserSchema.partial(); // 모든 필드 optional
 
 ---
 
-## 10. 금지 사항
+## 5. 금지 사항
 
 - 스키마 없이 수동 검증 금지 - 반드시 Zod 스키마를 정의하고 `zodResolver`를 사용한다
 - `any` 타입 사용 금지 - `z.infer<typeof schema>`로 타입을 추론한다
@@ -320,3 +126,9 @@ const updateUserSchema = baseUserSchema.partial(); // 모든 필드 optional
 - `handleSubmit` 없이 `onSubmit` 직접 처리 금지 - `handleSubmit`이 검증을 수행한다
 - 폼 타입과 스키마를 별도로 정의 금지 - 타입 불일치 위험이 있으므로 `z.infer`를 사용한다
 - 에러 메시지 하드코딩 금지 - Zod 스키마에 메시지를 정의한다
+
+---
+
+## 심화 참조
+
+- `references/advanced-patterns.md` - Controller 패턴, 에러 핸들링, 폼 검증 모드, 동적 필드(useFieldArray), 중첩 객체/배열 스키마

package/.claude/skills/ReactHookForm/references/advanced-patterns.md

@@ -0,0 +1,193 @@
+# React Hook Form 심화 패턴
+
+## 1. Controller 패턴
+
+`register`를 사용할 수 없는 제어 컴포넌트 (Select, DatePicker, 커스텀 UI 라이브러리 등)에 사용한다.
+
+```typescript
+import { Controller, useForm } from 'react-hook-form';
+
+function UserForm() {
+  const { control, handleSubmit } = useForm<UserFormValues>({
+    resolver: zodResolver(userSchema),
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        name="role"
+        control={control}
+        render={({ field, fieldState: { error } }) => (
+          <>
+            <Select
+              value={field.value}
+              onChange={field.onChange}
+              options={roleOptions}
+            />
+            {error && <span>{error.message}</span>}
+          </>
+        )}
+      />
+
+      <Controller
+        name="birthDate"
+        control={control}
+        render={({ field, fieldState: { error } }) => (
+          <>
+            <DatePicker
+              selected={field.value}
+              onChange={field.onChange}
+            />
+            {error && <span>{error.message}</span>}
+          </>
+        )}
+      />
+    </form>
+  );
+}
+```
+
+---
+
+## 2. 에러 핸들링
+
+### errors 객체로 직접 표시
+
+```typescript
+// 간단한 에러 표시
+{errors.email && <span className="error">{errors.email.message}</span>}
+```
+
+### 재사용 가능한 에러 컴포넌트
+
+```typescript
+type FieldErrorProps = {
+  error?: FieldError;
+};
+
+function FieldError({ error }: FieldErrorProps) {
+  if (!error) return null;
+  return <span className="field-error">{error.message}</span>;
+}
+
+// 사용
+<input {...register('email')} />
+<FieldError error={errors.email} />
+```
+
+---
+
+## 3. 폼 검증 모드
+
+### mode 옵션
+
+| mode | 동작 | 용도 |
+|------|------|------|
+| `onSubmit` (기본) | 제출 시에만 검증 | 대부분의 폼 |
+| `onBlur` | 포커스를 벗어날 때 검증 | 긴 폼, 단계별 입력 |
+| `onChange` | 입력할 때마다 검증 | 실시간 피드백이 필요한 필드 |
+| `onTouched` | 첫 blur 이후부터 onChange로 검증 | 사용자 친화적 검증 |
+
+```typescript
+const { register, handleSubmit } = useForm<FormValues>({
+  resolver: zodResolver(schema),
+  mode: 'onBlur', // 포커스를 벗어날 때 검증
+});
+```
+
+---
+
+## 4. 동적 필드 (useFieldArray)
+
+반복되는 필드 그룹을 동적으로 추가/삭제한다.
+
+```typescript
+const orderSchema = z.object({
+  items: z.array(
+    z.object({
+      productId: z.string().min(1, '상품을 선택해주세요'),
+      quantity: z.number().min(1, '수량은 1개 이상이어야 합니다'),
+    })
+  ).min(1, '최소 1개 이상의 상품을 추가해주세요'),
+});
+
+type OrderForm = z.infer<typeof orderSchema>;
+
+function OrderForm() {
+  const { control, register, handleSubmit } = useForm<OrderForm>({
+    resolver: zodResolver(orderSchema),
+    defaultValues: { items: [{ productId: '', quantity: 1 }] },
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'items',
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {fields.map((field, index) => (
+        <div key={field.id}>
+          <input {...register(`items.${index}.productId`)} />
+          <input
+            type="number"
+            {...register(`items.${index}.quantity`, { valueAsNumber: true })}
+          />
+          <button type="button" onClick={() => remove(index)}>
+            삭제
+          </button>
+        </div>
+      ))}
+      <button type="button" onClick={() => append({ productId: '', quantity: 1 })}>
+        상품 추가
+      </button>
+    </form>
+  );
+}
+```
+
+---
+
+## 5. 중첩 객체 / 배열 스키마
+
+### 중첩 객체
+
+```typescript
+const addressSchema = z.object({
+  zipCode: z.string().length(5, '우편번호는 5자리입니다'),
+  city: z.string().min(1, '도시를 입력해주세요'),
+  detail: z.string().min(1, '상세 주소를 입력해주세요'),
+});
+
+const userSchema = z.object({
+  name: z.string().min(1),
+  address: addressSchema,       // 중첩 객체
+  tags: z.array(z.string()),    // 문자열 배열
+});
+
+type UserForm = z.infer<typeof userSchema>;
+
+// register로 점 표기법 사용
+<input {...register('address.zipCode')} />
+<input {...register('address.city')} />
+<input {...register('address.detail')} />
+
+// 에러 접근도 점 표기법
+{errors.address?.zipCode && <span>{errors.address.zipCode.message}</span>}
+```
+
+### 스키마 재사용
+
+```typescript
+// 공통 스키마를 조합하여 재사용한다
+const baseUserSchema = z.object({
+  name: z.string().min(1),
+  email: z.string().email(),
+});
+
+const createUserSchema = baseUserSchema.extend({
+  password: z.string().min(8),
+});
+
+const updateUserSchema = baseUserSchema.partial(); // 모든 필드 optional
+```

package/.claude/skills/TDD/SKILL.md

@@ -7,8 +7,8 @@ description: TDD(테스트 주도 개발) 공통 원칙. 테스트 작성 시 Re
 
 이 문서는 모든 테스트 코드 작성 시 적용되는 공통 원칙을 정의한다.
 FE/BE별 상세 규칙은 각각의 파일을 참고한다.
-- `frontend.md` - React Testing Library 기반 프론트엔드 테스트 규칙
-- `backend.md` - NestJS 백엔드 테스트 규칙
+- `references/frontend.md` - React Testing Library 기반 프론트엔드 테스트 규칙
+- `references/backend.md` - NestJS 백엔드 테스트 규칙
 
 ---
 

package/.claude/skills/TailwindCSS/SKILL.md

@@ -49,165 +49,7 @@ React 규칙은 `../React/SKILL.md`, 공통 원칙은 `../Coding/SKILL.md`를
 
 ---
 
-## 2. 반응형 디자인
-
-### 브레이크포인트
-| 접두사 | 최소 너비 | 용도 |
-|--------|-----------|------|
-| (없음) | 0px | 모바일 기본 |
-| `sm:` | 640px | 소형 태블릿 |
-| `md:` | 768px | 태블릿 |
-| `lg:` | 1024px | 데스크톱 |
-| `xl:` | 1280px | 대형 데스크톱 |
-| `2xl:` | 1536px | 초대형 데스크톱 |
-
-### Mobile-First 원칙
-- 모바일 스타일을 기본으로 작성하고, 큰 화면에 대해 재정의한다
-
-```typescript
-// Good - Mobile-First
-<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-  {items.map((item) => (
-    <Card key={item.id} data={item} />
-  ))}
-</div>
-
-// Good - 반응형 타이포그래피
-<h1 className="text-2xl font-bold md:text-3xl lg:text-4xl">
-  제목
-</h1>
-```
-
----
-
-## 3. 다크 모드
-
-### dark: prefix 사용
-- `dark:` 접두사로 다크 모드 스타일을 정의한다
-- v4에서는 기본적으로 `prefers-color-scheme` 미디어 쿼리로 동작한다
-- 수동 토글(class 전략)이 필요하면 CSS에서 `@custom-variant`를 설정한다
-
-```css
-/* app.css - 수동 다크 모드 토글 시 */
-@import "tailwindcss";
-@custom-variant dark (&:where(.dark, .dark *));
-```
-
-```typescript
-// 컴포넌트에서 사용
-<div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
-  <p className="text-gray-600 dark:text-gray-300">
-    라이트/다크 모드를 지원하는 텍스트
-  </p>
-</div>
-```
-
-### 시맨틱 색상 활용
-- 반복되는 라이트/다크 색상 조합은 `@theme`과 CSS 변수로 추출한다
-
-```css
-/* app.css */
-@import "tailwindcss";
-
-@theme {
-  --color-background: #ffffff;
-  --color-foreground: #0a0a0a;
-}
-
-.dark {
-  --color-background: #0a0a0a;
-  --color-foreground: #fafafa;
-}
-```
-
----
-
-## 4. 커스텀 설정
-
-### @theme 디렉티브 사용
-- CSS 파일에서 `@theme` 디렉티브로 디자인 토큰을 정의한다
-- v4에서는 `tailwind.config.ts`가 불필요하다. 모든 커스텀 설정은 CSS의 `@theme`에서 정의한다
-- v4는 콘텐츠 파일을 자동 감지하므로 `content` 배열 설정이 불필요하다
-
-```css
-/* app.css */
-@import "tailwindcss";
-
-@theme {
-  --color-primary-50: #eff6ff;
-  --color-primary-100: #dbeafe;
-  --color-primary-500: #3b82f6;
-  --color-primary-600: #2563eb;
-  --color-primary-700: #1d4ed8;
-  --color-success: #10b981;
-  --color-warning: #f59e0b;
-  --color-danger: #ef4444;
-
-  --spacing-18: 4.5rem;
-  --spacing-88: 22rem;
-
-  --font-sans: 'Inter', sans-serif;
-}
-```
-
----
-
-## 5. 자주 쓰는 패턴
-
-### Flexbox 레이아웃
-```typescript
-// 가로 정렬 (중앙)
-<div className="flex items-center justify-center">
-
-// 가로 정렬 (양쪽 분산)
-<div className="flex items-center justify-between">
-
-// 세로 정렬
-<div className="flex flex-col gap-4">
-
-// 자식 요소 간격
-<div className="flex gap-2">
-```
-
-### Grid 레이아웃
-```typescript
-// 반응형 그리드
-<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-
-// 고정 비율 그리드
-<div className="grid grid-cols-[1fr_2fr] gap-4">
-
-// 사이드바 레이아웃
-<div className="grid grid-cols-[240px_1fr] gap-8">
-```
-
-### Spacing 패턴
-```typescript
-// 섹션 간격
-<section className="py-12 md:py-16 lg:py-20">
-
-// 컨테이너
-<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-
-// 카드
-<div className="rounded-lg border p-6 shadow-sm">
-```
-
-### Typography 패턴
-```typescript
-// 텍스트 말줄임
-<p className="truncate">긴 텍스트...</p>
-
-// 여러 줄 말줄임
-<p className="line-clamp-3">긴 텍스트...</p>
-
-// 반응형 텍스트
-<h1 className="text-2xl font-bold tracking-tight md:text-4xl">
-```
-
----
-
-## 6. cn() 유틸리티
+## 2. cn() 유틸리티
 
 ### clsx + tailwind-merge 조합
 - 조건부 클래스 결합에는 `cn()` 유틸리티를 사용한다
@@ -227,12 +69,12 @@ export function cn(...inputs: ClassValue[]) {
 ```typescript
 import { cn } from '@/lib/utils';
 
-interface ButtonProps {
+type ButtonProps = {
   variant?: 'primary' | 'secondary' | 'danger';
   size?: 'sm' | 'md' | 'lg';
   className?: string;
   children: React.ReactNode;
-}
+};
 
 export function Button({ variant = 'primary', size = 'md', className, children }: ButtonProps) {
   return (
@@ -303,9 +145,8 @@ const buttonVariants = cva(
   }
 );
 
-interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {}
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants>;
 
 export function Button({ variant, size, className, ...props }: ButtonProps) {
   return (
@@ -322,82 +163,7 @@ export function Button({ variant, size, className, ...props }: ButtonProps) {
 
 ---
 
-## 7. 컴포넌트 추출
-
-### 반복 클래스 처리
-- 동일한 클래스 조합이 3회 이상 반복되면 컴포넌트로 추출한다
-- `@apply`보다 컴포넌트 추출을 우선한다
-
-```typescript
-// Bad - 동일한 클래스 반복
-<button className="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">저장</button>
-<button className="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">확인</button>
-<button className="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">전송</button>
-
-// Good - 컴포넌트로 추출
-<Button>저장</Button>
-<Button>확인</Button>
-<Button>전송</Button>
-```
-
-### @apply 사용 (제한적 허용)
-- 컴포넌트 추출이 어려운 경우에만 `@apply`를 사용한다
-- 주로 base layer의 글로벌 스타일에서 사용한다
-- v4에서도 `@apply`는 지원되지만, 여전히 컴포넌트 추출을 우선한다
-
-```css
-/* 허용 - 글로벌 기본 스타일 */
-@layer base {
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-/* 지양 - 컴포넌트 스타일을 @apply로 작성 */
-.btn-primary {
-  @apply rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700;
-}
-```
-
----
-
-## 8. 트랜지션 & 모션
-
-### transition 속성 명시
-- `transition-all` 사용을 금지한다 - 변경되는 속성만 명시한다
-- 불필요한 속성까지 트랜지션되면 성능이 저하된다
-
-```typescript
-// Bad - 모든 속성에 트랜지션
-<button className="transition-all">
-
-// Good - 필요한 속성만
-<button className="transition-colors">
-<div className="transition-[transform,opacity]">
-```
-
-### prefers-reduced-motion 존중
-- 애니메이션/트랜지션이 있는 요소에는 `motion-reduce:` 변형을 고려한다
-
-```typescript
-// 모션 감소 선호 시 애니메이션 비활성화
-<div className="animate-bounce motion-reduce:animate-none">
-<div className="transition-transform motion-reduce:transition-none">
-```
-
-### 다크 모드 color-scheme
-- 다크 모드 지원 시 `color-scheme: dark`를 설정하여 네이티브 UI(스크롤바, 입력 필드 등)도 다크 테마에 맞춘다
-
-```css
-/* app.css */
-.dark {
-  color-scheme: dark;
-}
-```
-
----
-
-## 9. 금지 사항
+## 3. 금지 사항
 
 - 인라인 `style={{}}` 사용 금지 - Tailwind 유틸리티 클래스를 사용한다
 - 임의값(arbitrary values) 남용 금지 - `w-[137px]` 같은 임의값은 최소화한다
@@ -426,3 +192,11 @@ const colorClasses = {
 
 <div className={colorClasses[color]}>
 ```
+
+---
+
+## 심화 참조
+
+- `references/responsive-dark.md` - 반응형 디자인, 다크 모드, 커스텀 설정 (@theme, 브레이크포인트, dark: prefix)
+- `references/patterns-components.md` - 자주 쓰는 레이아웃/타이포그래피 패턴, 컴포넌트 추출 규칙
+- `references/transitions.md` - 트랜지션 & 모션 (transition 속성 명시, prefers-reduced-motion, color-scheme)