kdypick - 재사용 코드 선택 및 적용

02-reusable-code 라이브러리에서 필요한 코드를 선택하여 현재 개발 중인 프로젝트에 적용합니다. 기존 개발 중인 프로젝트일 경우 종합적으로 분석하여 필요한 코드를 맞춤 추천합니다.

코드 라이브러리 위치

GENERAL_PRO 결정 순서:
1. 환경변수 GENERAL_PRO_PATH
2. CWD가 00-general-pro* 내부이면 해당 루트
3. ~/{develop,dev}/00-general-pro-web 존재 탐색
4. 실패 시 AskUserQuestion: "00-general-pro-web 경로를 입력해주세요"

GENERAL_PRO = {결정된 경로}

TypeScript/React (02-reusable-code)

$GENERAL_PRO/02-reusable-code/
├── 01-ui-components/     → UI 컴포넌트
├── 02-hooks/             → React 커스텀 훅
├── 03-utils/             → 유틸리티 함수
├── 04-supabase-patterns/ → Supabase 패턴
├── 05-auth-rbac/         → 인증/권한 패턴
├── 06-api-middleware/    → API 미들웨어
├── 07-contexts/          → React 컨텍스트
├── 08-services/          → 서비스 레이어
├── 09-templates/         → 프로젝트 템플릿
└── 10-stripe-patterns/   → Stripe SaaS 패턴

Python (02-reusable-code-python)

$GENERAL_PRO/02-reusable-code-python/
├── utils/      → 유틸리티 (Excel, PDF, HWPX, 오디오, 세션, 디바이스)
├── api/        → API 패턴 (FastAPI 인증, WebSocket 스트리밍)
├── ai/         → AI 모델 (Whisper STT 엔진)
├── analyzers/  → 데이터 분석
└── templates/  → 보고서 템플릿

실행 단계

Phase 0: 프로젝트 유형 판별

먼저 현재 프로젝트가 신규 프로젝트인지 기존 개발 중인 프로젝트인지 판별합니다.

# 기존 프로젝트 판별 기준
# 1. CLAUDE.md 존재 여부
# 2. docs/ 폴더 존재 여부
# 3. src/ 폴더에 실제 코드 존재 여부
# 4. git 커밋 히스토리 존재 여부

# 언어 스택 감지
ls -la package.json pyproject.toml requirements.txt 2>/dev/null

판별 결과에 따른 분기:

• 신규 프로젝트 → Phase 1 (기본 분석)으로 진행
• 기존 프로젝트 → Phase 0-A (종합 분석)으로 진행

Phase 0-A: 기존 프로젝트 종합 분석 (기존 프로젝트인 경우)

기존 개발 중인 프로젝트일 경우, 프로젝트를 깊이 이해한 후 맞춤 추천을 제공합니다.

0-A-0. 분석 깊이 결정

소스 파일 수 = Glob *.ts *.tsx *.py *.js *.jsx 카운트 (node_modules, .next, dist 제외)

if 소스 파일 수 > 300:
    AskUserQuestion:
      question: "대규모 프로젝트 ({N}개 파일). 분석 방식을 선택하세요."
      options:
        - "빠른 추천 (권장)" → package.json + docs/ + CLAUDE.md만 분석하여 추천
        - "전체 분석" → 0-A-1 ~ 0-A-5 전체 수행
else:
    → 0-A-1 ~ 0-A-5 전체 수행 (기본)

0-A-1. 프로젝트 문서 분석

# 프로젝트 핵심 문서 확인
cat CLAUDE.md 2>/dev/null
cat docs/status/current.md 2>/dev/null
cat docs/handover/*.md 2>/dev/null | head -200
cat README.md 2>/dev/null

확인 항목:

• 프로젝트 목적 및 도메인
• 현재 개발 진행 상황
• 주요 기능 및 모듈
• 알려진 이슈 및 TODO

0-A-2. 기술 스택 심층 분석

# package.json 전체 분석
cat package.json

# 사용 중인 주요 라이브러리 확인
grep -E "(react|next|vue|supabase|prisma|tailwind|shadcn)" package.json

분석 항목:

0-A-3. 코드 패턴 분석

# 기존 컴포넌트 패턴 분석
ls -la src/components/ 2>/dev/null
head -50 src/components/**/*.tsx 2>/dev/null | head -100

# 기존 훅 패턴 분석
ls -la src/hooks/ 2>/dev/null

# 유틸리티 구조 분석
ls -la src/lib/ src/utils/ 2>/dev/null

# API 패턴 분석
ls -la src/app/api/ app/api/ pages/api/ 2>/dev/null

분석 항목:

• 컴포넌트 작성 스타일 (함수형, forwardRef 사용 등)
• 네이밍 컨벤션 (camelCase, PascalCase, kebab-case)
• 파일 구조 (컴포넌트별 폴더 vs 플랫)
• export 스타일 (named vs default)
• Props 정의 방식 (interface vs type)

0-A-4. 현재 프로젝트 GAP 분석

기존 코드와 02-reusable-code를 비교하여 부족한 부분을 식별합니다.

## 프로젝트 GAP 분석 결과

### 현재 보유
- [x] Button 컴포넌트 (자체 구현)
- [x] useDebounce 훅
- [x] cn 유틸리티

### 부족한 부분 (추천)
- [ ] LoadingState - API 호출 시 로딩 처리 패턴 부재
- [ ] useInfiniteScroll - 목록 페이지에 필요
- [ ] ErrorBoundary - 에러 처리 컴포넌트 부재
- [ ] supabase/server.ts - SSR 클라이언트 설정 누락

### 개선 가능한 부분
- [ ] Button → 02-reusable-code 버전이 더 완성도 높음
- [ ] 인증 패턴 → auth-rbac 적용 시 권한 관리 강화 가능

0-A-5. 맞춤 추천 제공

프로젝트 분석 결과를 바탕으로 우선순위별 추천을 제공합니다.

## 맞춤 코드 추천

### 🔴 필수 (바로 필요)
프로젝트 진행에 즉시 필요한 코드:
1. **useInfiniteScroll** - 현재 개발 중인 목록 페이지에 필요
2. **LoadingState** - API 호출 로딩 처리 표준화

### 🟡 권장 (있으면 좋음)
코드 품질 및 유지보수성 향상:
1. **ErrorBoundary** - 에러 처리 표준화
2. **Toast** - 사용자 피드백 통일

### 🟢 선택 (향후 고려)
추후 확장 시 유용:
1. **auth-rbac** - 권한 관리 기능 추가 시
2. **api-middleware** - API 레이어 추상화 시

어떤 것을 적용할까요?
1. 필수만 적용
2. 필수 + 권장 적용
3. 직접 선택

Phase 1: 현재 프로젝트 분석 (신규 프로젝트 또는 간단 분석)

# 현재 위치 확인
pwd

# 프로젝트 타입 감지
ls -la package.json pyproject.toml tsconfig.json 2>/dev/null

# 기존 구조 확인
ls -la src/components/ src/hooks/ src/lib/ src/utils/ 2>/dev/null

프로젝트 구조 파악:

• src/components/ui/ 존재 여부
• src/hooks/ 존재 여부
• src/lib/ 또는 src/utils/ 존재 여부
• Tailwind, Supabase 사용 여부

Phase 2: 사용 가능한 코드 목록 표시

사용자에게 카테고리별 목록 제공:

## 사용 가능한 재사용 코드

### 01-ui-components
- [ ] core/Button.tsx - 버튼 컴포넌트
- [ ] core/Input.tsx - 입력 컴포넌트
- [ ] core/Card.tsx - 카드 컴포넌트
- [ ] feedback/Toast.tsx - 토스트 알림
- [ ] feedback/LoadingState.tsx - 로딩 상태

### 02-hooks
- [ ] useDebounce.ts - 디바운스 훅
- [ ] useInfiniteScroll.ts - 무한 스크롤
- [ ] useGeolocation.ts - 위치 정보

### 03-utils
- [ ] cn.ts - className 병합
- [ ] formatters/price.ts - 가격 포맷팅
- [ ] formatters/date.ts - 날짜 포맷팅

### 04-supabase-patterns
- [ ] client.ts - 클라이언트 설정
- [ ] server.ts - 서버 설정
- [ ] middleware.ts - 미들웨어

어떤 코드를 가져올까요?
1. 전체 카테고리 선택
2. 개별 파일 선택
3. 추천 (프로젝트 분석 기반)

Python 코드 목록 (풀스택/Python 프로젝트 시 추가 표시):

### Python — utils
- [ ] excel_reader.py - Excel 파일 읽기/파싱
- [ ] pdf_reader.py - PDF 텍스트 추출
- [ ] hwpx_generator.py - HWPX 문서 생성
- [ ] audio_processor.py - 오디오 파일 처리
- [ ] session_manager.py - SQLite 세션 관리
- [ ] device_detector.py - 디바이스/GPU 감지

### Python — api
- [ ] fastapi_auth.py - FastAPI JWT 인증
- [ ] websocket_handler.py - WebSocket 스트리밍

### Python — ai
- [ ] whisper_engine.py - Whisper STT 엔진

Phase 3: 사용자 선택

선택 방식:

## 코드 선택

선택 방식:
1. **전체 카테고리** - "hooks 전체", "ui 전체"
2. **개별 파일** - "useDebounce, Button, cn"
3. **추천 세트** - 프로젝트 타입에 맞는 추천
   - Next.js 기본: cn, Button, Input, useDebounce
   - Supabase 포함: + client, server, middleware
   - 전체 스택: + auth-rbac, api-middleware

Phase 4: 의존성 확인

선택한 코드의 의존성 체크:

## 의존성 확인

### 필요한 패키지
| 패키지 | 현재 | 필요 | 상태 |
|--------|------|------|------|
| clsx | 미설치 | ^2.x | 설치 필요 |
| tailwind-merge | 미설치 | ^2.x | 설치 필요 |
| lucide-react | ^0.300 | ^0.x | OK |

### 설치 명령
\`\`\`bash
npm install clsx tailwind-merge
\`\`\`

설치 후 진행할까요?

Phase 5: 대상 경로 결정

프로젝트 구조에 맞게 경로 매핑:

## 파일 배치 계획

| 원본 | 대상 |
|------|------|
| 01-ui-components/core/Button.tsx | src/components/ui/Button.tsx |
| 02-hooks/useDebounce.ts | src/hooks/useDebounce.ts |
| 03-utils/cn.ts | src/lib/utils.ts |
| 04-supabase-patterns/client.ts | src/lib/supabase/client.ts |

경로를 수정하시겠습니까?
1. 위 경로로 진행
2. 커스텀 경로 지정

Phase 6: 프로젝트 특화 설정

6.1 CSS 변수 설정 (UI 컴포넌트 사용 시)

## CSS 변수 설정 필요

UI 컴포넌트가 CSS 변수를 사용합니다.
globals.css에 다음을 추가해야 합니다:

\`\`\`css
:root {
  --color-primary: theme('colors.emerald.600');
  --color-primary-hover: theme('colors.emerald.700');
  --color-secondary: theme('colors.gray.600');
  --color-danger: theme('colors.red.600');
}
\`\`\`

프로젝트 테마 색상:
1. emerald (기본)
2. blue
3. purple
4. 커스텀 지정

6.2 로케일 설정 (포맷터 사용 시)

## 로케일 설정

포맷터가 기본 한국어 라벨을 사용합니다.
변경이 필요하면 import 후 오버라이드:

\`\`\`typescript
import { getRelativeTime, DEFAULT_LABELS } from '@/lib/formatters/date';

// 영어로 변경
const EN_LABELS = {
  justNow: 'just now',
  minutesAgo: (n: number) => \`\${n} minutes ago\`,
  // ...
};

getRelativeTime(date, EN_LABELS);
\`\`\`

6.3 환경 변수 설정 (Supabase 사용 시)

## 환경 변수 필요

Supabase 패턴을 사용하려면 .env.local에 추가:

\`\`\`env
NEXT_PUBLIC_SUPABASE_URL=your-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-key  # 서버 전용
\`\`\`

Phase 7: 파일 복사 및 적용

# 폴더 생성
mkdir -p src/components/ui src/hooks src/lib/supabase

# 파일 복사
cp "$GENERAL_PRO/02-reusable-code/01-ui-components/core/Button.tsx" src/components/ui/
cp "$GENERAL_PRO/02-reusable-code/02-hooks/useDebounce.ts" src/hooks/
cp "$GENERAL_PRO/02-reusable-code/03-utils/cn.ts" src/lib/utils.ts

Phase 8: Import 경로 수정

프로젝트의 alias 설정에 맞게 import 경로 수정:

// Before (라이브러리 상대 경로)
import { cn } from '../utils/cn';

// After (프로젝트 alias)
import { cn } from '@/lib/utils';

Phase 8-A: 기존 프로젝트 스타일 적용 (기존 프로젝트인 경우)

상세 템플릿은 references/presets-and-analysis.md 참조

기존 프로젝트일 경우 8-A-1(코딩 스타일 통일), 8-A-2(기존 컴포넌트 통합), 8-A-3(문서 업데이트)를 순서대로 수행합니다.

Phase 9: 결과 보고

출력 형식은 references/presets-and-analysis.md 참조

추가된 파일 목록, 설정 완료 체크리스트, 사용 예시, 추가 설정 필요 항목을 보고합니다.

Phase 9-A: 사후 사용 검증

복사된 파일이 프로젝트에서 실제로 사용되는지 검증합니다.

EACH 복사된 파일 F:
  1. F의 named export 목록 추출 (Grep: "export (const|function|class|type|interface)")
  2. 각 export가 프로젝트 내 다른 파일에서 import되는지 Grep 확인
  3. 미사용 export 비율 계산

결과 표시:

## 사용 검증 결과

### 활발히 사용 중 (import 확인)
- src/hooks/useDebounce.ts — 3곳에서 import

### 미사용 경고 (0곳 import)
- src/contexts/SidebarContext.tsx — ⚠️ 삭제 권장
- src/store/zustand/example-store.ts — ⚠️ 삭제 권장

미사용 파일 {N}개 감지. 삭제하시겠습니까?
1. 미사용 파일 전체 삭제
2. 개별 선택
3. 유지 (나중에 사용 예정)

주의: 프로젝트 초기 단계(Phase 0~1)에서는 아직 import하지 않은 파일이 많을 수 있으므로, 이 Phase는 경고만 출력하고 자동 삭제하지 않습니다.

빠른 선택 세트 / 사용 예시 / 분석 모드

상세 내용은 references/presets-and-analysis.md 참조

주의사항

1. 경로 확인 - 프로젝트 구조에 맞게 경로 조정
2. 의존성 - 필요한 패키지 설치 확인
3. CSS 변수 - UI 컴포넌트 사용 시 필수 설정
4. Import alias - tsconfig.json의 paths 설정 확인
5. 타입 - TypeScript 프로젝트가 아니면 .ts → .js 변환 필요

Superpowers 연계

이 스킬 실행 중 아래 superpowers 원칙을 적용한다.

관련 스킬

• /kdygenesis — 메타 오케스트레이션에서 기능별 반복 조건 발동
• /kdyweb — init/page 완료 후 기반 컴포넌트 추천으로 발동
• /kdyextract — 프로젝트에서 범용 코드 추출
• /kdysetting — 프로젝트 초기 설정