프롬프트 커스터마이징

# ❌ 나쁜 프롬프트 예제
"로그인 만들어줘"

# ✅ 좋은 프롬프트 예제
"React와 TypeScript를 사용하여 다음 요구사항을 만족하는 로그인 페이지를 만들어주세요:

1. 이메일과 비밀번호 입력 필드
2. 폼 검증 (이메일 형식, 비밀번호 최소 8자)
3. 로딩 상태 표시
4. 에러 메시지 표시
5. JWT 토큰을 localStorage에 저장
6. 로그인 성공 시 /dashboard로 리다이렉트

기존 프로젝트는 Next.js 14 App Router를 사용하고 있으며,
Tailwind CSS와 React Hook Form이 이미 설치되어 있습니다."

# 구조화된 프롬프트 템플릿

## 작업 목표
[무엇을 만들거나 수정할지 한 문장으로]

## 요구사항
1. [필수 기능 1]
2. [필수 기능 2]
3. [필수 기능 3]

## 기술적 제약
- 사용 기술: [프레임워크, 라이브러리]
- 호환성: [브라우저, Node 버전]
- 성능: [응답 시간, 번들 크기 제한]

## 참고사항
- [추가 고려사항]
- [선호하는 패턴이나 스타일]

# 실전 프롬프트 예제

"다음 API 엔드포인트를 Express.js로 구현해주세요:

**엔드포인트:** POST /api/users
**요청 바디:**
{
  "email": "user@example.com",
  "name": "John Doe",
  "role": "user" | "admin"
}

**검증 규칙:**
- 이메일: 유효한 형식, 중복 불가
- 이름: 2-50자, 필수
- 역할: user 또는 admin만 허용

**응답:**
- 성공(201): { id, email, name, role, createdAt }
- 실패(400): { error: "상세 에러 메시지" }

**추가 요구사항:**
- bcrypt로 비밀번호 해싱
- Joi로 유효성 검사
- Prisma ORM 사용
- 에러 처리 미들웨어 적용"

# .claude/prompts/component.md
---
name: component
description: React 컴포넌트 생성 템플릿
variables:
  - name: componentName
    description: 컴포넌트 이름 (PascalCase)
  - name: componentType
    description: 컴포넌트 타입 (functional | class)
    default: functional
---

다음 React 컴포넌트를 TypeScript로 작성해주세요:

**컴포넌트 이름:** {{componentName}}
**타입:** {{componentType}}

**요구사항:**
1. Props 타입 정의 (TypeScript interface)
2. 적절한 기본값 설정
3. JSDoc 주석 추가
4. PropTypes 또는 타입 체크
5. 재사용 가능한 구조

**스타일:**
- Tailwind CSS 사용
- 반응형 디자인
- 접근성 고려 (ARIA 속성)

**테스트:**
- Jest + React Testing Library
- 주요 동작 테스트 케이스 포함

# .claude/prompts/api-endpoint.md
---
name: api-endpoint
description: REST API 엔드포인트 생성
variables:
  - name: method
    description: HTTP 메서드
  - name: path
    description: API 경로
  - name: auth
    description: 인증 필요 여부
    default: "true"
---

다음 REST API 엔드포인트를 구현해주세요:

**메서드:** {{method}}
**경로:** {{path}}
**인증:** {{auth}}

**구현 사항:**
1. 요청 검증 (Joi 또는 Zod)
2. 비즈니스 로직 처리
3. 적절한 HTTP 상태 코드
4. 에러 핸들링
5. API 문서 (JSDoc 또는 OpenAPI)

**보안:**
- 인증/인가 확인
- Input sanitization
- Rate limiting
- CORS 설정

**테스트:**
- 유닛 테스트
- 통합 테스트
- 엣지 케이스 처리

# 템플릿 사용 방법

# 1. 템플릿 나열
claude prompt list

# 2. 템플릿 사용
claude prompt use component --componentName="UserCard" --componentType="functional"

# 3. 대화형으로 변수 입력
claude prompt use api-endpoint
# -> method: GET
# -> path: /api/users/:id
# -> auth: true

# 4. 템플릿 편집
claude prompt edit component

# 5. 새 템플릿 생성
claude prompt create my-template

# .claude/prompts/refactor.md
---
name: refactor
description: 코드 리팩토링 템플릿
variables:
  - name: filePath
    description: 리팩토링할 파일 경로
  - name: goal
    description: 리팩토링 목표
---

다음 파일을 리팩토링해주세요:

**파일:** {{filePath}}
**목표:** {{goal}}

**리팩토링 원칙:**
1. 기능 유지 (breaking change 없음)
2. 코드 가독성 향상
3. 성능 최적화
4. 타입 안정성 강화
5. 테스트 커버리지 유지

**체크리스트:**
- [ ] 함수/변수명 개선
- [ ] 중복 코드 제거
- [ ] 긴 함수 분리
- [ ] 매직 넘버/문자열 상수화
- [ ] 에러 처리 개선
- [ ] 주석 추가/업데이트

**검증:**
- 기존 테스트 통과
- 린트 에러 없음
- 타입 체크 통과

# 변수 정의 (프롬프트 템플릿 frontmatter)
---
name: database-migration
variables:
  # 필수 변수
  - name: tableName
    description: 테이블 이름
    required: true

  # 선택적 변수 (기본값 있음)
  - name: dbType
    description: 데이터베이스 타입
    default: "postgresql"
    options:
      - postgresql
      - mysql
      - mongodb

  # 다중 값 변수
  - name: columns
    description: 컬럼 목록 (쉼표로 구분)
    type: array

  # 불리언 변수
  - name: addTimestamps
    description: createdAt, updatedAt 추가 여부
    type: boolean
    default: true
---

{{tableName}} 테이블에 대한 {{dbType}} 마이그레이션을 생성해주세요.

**컬럼:**
{{#each columns}}
- {{this}}
{{/each}}

{{#if addTimestamps}}
**타임스탬프:**
- createdAt: TIMESTAMP DEFAULT CURRENT_TIMESTAMP
- updatedAt: TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
{{/if}}

# 환경 변수 활용
---
name: deploy
variables:
  - name: environment
    description: 배포 환경
    default: ${DEPLOY_ENV:-staging}

  - name: apiKey
    description: API 키
    default: ${API_KEY}
    secret: true  # 로그에 표시 안 됨
---

{{environment}} 환경에 배포합니다.

**환경 설정:**
- API_KEY: {{apiKey}}
- NODE_ENV: {{environment}}
- LOG_LEVEL: ${LOG_LEVEL:-info}

**배포 단계:**
1. 빌드 검증
2. 테스트 실행
3. {{environment}} 서버에 배포
4. 헬스 체크

# 계산된 변수 (Handlebars helpers)
---
name: component-suite
variables:
  - name: componentName
    description: 컴포넌트 이름
---

{{componentName}} 컴포넌트와 관련 파일들을 생성해주세요:

**생성할 파일:**
1. components/{{componentName}}/{{componentName}}.tsx
2. components/{{componentName}}/{{componentName}}.test.tsx
3. components/{{componentName}}/{{componentName}}.stories.tsx
4. components/{{componentName}}/{{lowercase componentName}}.module.css
5. components/{{componentName}}/index.ts

**내보내기 (index.ts):**
```typescript
export { {{componentName}} } from './{{componentName}}';
export type { {{componentName}}Props } from './{{componentName}}';
```

**테스트 파일 템플릿:**
```typescript
import { render, screen } from '@testing-library/react';
import { {{componentName}} } from './{{componentName}}';

describe('{{componentName}}', () => {
  it('renders correctly', () => {
    render(<{{componentName}} />);
    // assertions
  });
});
```

# 복잡한 변수 조합 예제
---
name: crud-generator
variables:
  - name: entity
    description: 엔티티 이름 (단수형)
  - name: fields
    description: 필드 목록 (JSON)
    type: json
  - name: features
    description: 포함할 기능
    type: array
    options:
      - pagination
      - search
      - filter
      - sort
---

{{entity}} 엔티티에 대한 CRUD API를 생성해주세요.

**필드 정의:**
{{#each fields}}
- {{name}}: {{type}} {{#if required}}(필수){{/if}}
{{/each}}

**기능:**
{{#each features}}
- {{capitalize this}}
{{/each}}

**생성할 파일:**
- models/{{lowercase entity}}.model.ts
- controllers/{{lowercase entity}}.controller.ts
- routes/{{lowercase entity}}.routes.ts
- services/{{lowercase entity}}.service.ts
{{#if (includes features "search")}}
- utils/{{lowercase entity}}.search.ts
{{/if}}

# 사용 예:
# claude prompt use crud-generator \
#   --entity="Product" \
#   --fields='[{"name":"title","type":"string","required":true},{"name":"price","type":"number","required":true}]' \
#   --features="pagination,search,filter"

# .claude/system-prompt.md
당신은 Next.js 14와 TypeScript 전문가입니다.

**코딩 스타일:**
- 함수형 컴포넌트와 Hooks 사용
- TypeScript strict 모드 준수
- ESLint와 Prettier 규칙 따르기
- 명확한 변수명 사용 (약어 지양)

**파일 구조:**
```
src/
├── app/              # Next.js App Router
├── components/       # 재사용 가능한 컴포넌트
│   ├── ui/          # 기본 UI 컴포넌트
│   └── features/    # 기능별 컴포넌트
├── lib/             # 유틸리티 함수
├── hooks/           # 커스텀 Hooks
└── types/           # TypeScript 타입 정의
```

**네이밍 규칙:**
- 컴포넌트: PascalCase (UserProfile.tsx)
- 함수/변수: camelCase (getUserData)
- 상수: UPPER_SNAKE_CASE (API_BASE_URL)
- 타입/인터페이스: PascalCase (UserData)

**필수 사항:**
- 모든 컴포넌트에 PropTypes 또는 TypeScript 타입
- 에러 바운더리 적용
- 로딩 상태 처리
- 접근성 고려 (ARIA 속성)
- 반응형 디자인 (Tailwind breakpoints)

**코드 생성 시:**
1. 먼저 기존 패턴 확인
2. 유사한 컴포넌트 참고
3. 프로젝트 컨벤션 준수
4. 테스트 코드 포함

# 백엔드 프로젝트 시스템 프롬프트 예제
# .claude/system-prompt.md

당신은 Node.js/Express 백엔드 개발 전문가입니다.

**기술 스택:**
- Runtime: Node.js 20 LTS
- Framework: Express.js 4.x
- Database: PostgreSQL 15 + Prisma ORM
- 인증: JWT (jsonwebtoken)
- 검증: Zod

**아키텍처 패턴:**
```
src/
├── controllers/    # HTTP 요청 처리
├── services/       # 비즈니스 로직
├── repositories/   # 데이터 접근
├── middlewares/    # Express 미들웨어
├── utils/          # 헬퍼 함수
└── types/          # 타입 정의
```

**레이어 분리:**
1. **Controller**: 요청/응답 처리만
2. **Service**: 비즈니스 로직 (재사용 가능)
3. **Repository**: DB 쿼리 (Prisma)

**에러 처리:**
- 커스텀 에러 클래스 사용
- 중앙 집중식 에러 핸들러
- 클라이언트 친화적 에러 메시지
- 상세 로깅 (winston)

**보안 원칙:**
- 모든 입력 검증 (Zod)
- SQL Injection 방지 (Prisma)
- XSS 방지 (helmet, sanitize)
- Rate limiting (express-rate-limit)
- CORS 적절히 설정

**테스트 요구사항:**
- 유닛 테스트: Jest
- 통합 테스트: Supertest
- 최소 80% 커버리지
- 모든 엣지 케이스 커버

# 팀 특화 시스템 프롬프트
# .claude/system-prompt.md

우리 팀의 개발 철학과 원칙을 따라주세요.

**핵심 원칙:**
1. **간결함**: 복잡한 것보다 단순한 해결책
2. **명확성**: 영리한 코드보다 읽기 쉬운 코드
3. **실용성**: 과도한 추상화 지양
4. **성능**: 불필요한 최적화 하지 않기

**금지사항:**
- Class 컴포넌트 사용 금지
- any 타입 사용 금지
- console.log 프로덕션 코드 포함 금지
- 인라인 스타일 사용 금지 (Tailwind 사용)
- 500줄 이상의 파일 (분리 필요)

**필수 패턴:**
- Custom Hooks로 로직 분리
- Error Boundary로 에러 처리
- Suspense로 로딩 처리
- 환경 변수로 설정 관리

**코드 리뷰 기준:**
1. 타입 안정성 (TypeScript)
2. 테스트 커버리지 (80% 이상)
3. 접근성 (WCAG AA)
4. 성능 (Lighthouse 90+)
5. 보안 (OWASP Top 10)

**특별 지시:**
- 새로운 의존성 추가 전 문의
- Breaking change는 마이그레이션 가이드 포함
- 공개 API는 JSDoc 필수
- 중요 결정은 ADR(Architecture Decision Record) 작성

# 시스템 프롬프트 활성화
# .claude/config.yaml

system_prompt:
  enabled: true
  file: .claude/system-prompt.md

  # 프롬프트 우선순위
  priority: high  # system prompt를 항상 최우선 적용

  # 특정 파일/디렉토리별 시스템 프롬프트
  overrides:
    - pattern: "src/components/**"
      file: .claude/prompts/component-system.md

    - pattern: "src/api/**"
      file: .claude/prompts/api-system.md

# ❌ 최적화되지 않은 프롬프트
"버그 고쳐줘"

# ✅ 최적화된 프롬프트
"다음 버그를 수정해주세요:

**증상:**
사용자가 로그인 버튼을 클릭하면 페이지가 새로고침되고
폼 데이터가 제출되지 않습니다.

**재현 단계:**
1. /login 페이지 접속
2. 이메일과 비밀번호 입력
3. 로그인 버튼 클릭
4. 페이지 새로고침 발생

**예상 동작:**
- 페이지 새로고침 없이 비동기 로그인
- 성공 시 /dashboard로 이동
- 실패 시 에러 메시지 표시

**환경:**
- 파일: src/components/LoginForm.tsx (52줄)
- 브라우저: Chrome 120
- React 18, TypeScript

**의심 원인:**
form 태그의 기본 submit 동작이 막히지 않은 것 같습니다."

# 점진적 프롬프트 개선 패턴

## 1단계: 기본 요청
"React 테이블 컴포넌트 만들어줘"

## 2단계: 구체화
"사용자 목록을 표시하는 React 테이블 컴포넌트를 만들어주세요.
컬럼: 이름, 이메일, 역할, 가입일"

## 3단계: 기술적 요구사항 추가
"TypeScript와 Tailwind CSS를 사용하여 다음 기능을 가진
사용자 목록 테이블을 만들어주세요:

**컬럼:**
- 이름 (정렬 가능)
- 이메일
- 역할 (필터 가능: admin, user, guest)
- 가입일 (날짜 포맷: YYYY-MM-DD)

**기능:**
- 정렬 (ASC/DESC)
- 페이지네이션 (10개씩)
- 검색 (이름, 이메일)
- 반응형 디자인"

## 4단계: 완전한 컨텍스트
"TypeScript와 Tailwind CSS를 사용하여 다음 기능을 가진
사용자 목록 테이블을 만들어주세요:

**데이터 구조:**
```typescript
interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'guest';
  createdAt: Date;
}
```

**컬럼:**
- 이름 (정렬 가능, 클릭 시 프로필로 이동)
- 이메일 (클립보드 복사 버튼)
- 역할 (필터 가능, 배지로 표시)
- 가입일 (상대 시간 + 절대 시간)

**기능:**
- 클라이언트 사이드 정렬
- 페이지네이션 (10/25/50개 선택 가능)
- 실시간 검색 (디바운싱 300ms)
- 선택된 행 하이라이트
- 로딩/빈 상태 처리

**기술:**
- React 18 + TypeScript
- Tailwind CSS + HeadlessUI
- React Query로 데이터 페칭
- 기존 useUsers hook 활용

**디자인:**
- 짝수 행 배경색 구분
- Hover 시 행 하이라이트
- 모바일: 카드 레이아웃으로 전환"

# Chain of Thought (사고 과정 유도)

# ❌ 직접적인 요청
"이 코드를 최적화해줘"

# ✅ 사고 과정 유도
"다음 코드의 성능 문제를 분석하고 최적화해주세요:

**분석 과정:**
1. 현재 코드의 시간 복잡도는?
2. 병목 지점은 어디인가?
3. 어떤 최적화 기법을 적용할 수 있는가?
4. 트레이드오프는 무엇인가?

**최적화 후:**
- 개선된 시간/공간 복잡도
- 벤치마크 비교
- 설명 주석 추가

```javascript
function findDuplicates(arr) {
  const duplicates = [];
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j] && !duplicates.includes(arr[i])) {
        duplicates.push(arr[i]);
      }
    }
  }
  return duplicates;
}
```"

# Few-shot Learning (예제 제공)

"다음 예제와 같은 스타일로 API 엔드포인트를 작성해주세요:

**예제 1 (GET):**
```typescript
// GET /api/users/:id
export async function GET(
  req: Request,
  { params }: { params: { id: string } }
) {
  try {
    const user = await db.user.findUnique({
      where: { id: params.id }
    });

    if (!user) {
      return NextResponse.json(
        { error: 'User not found' },
        { status: 404 }
      );
    }

    return NextResponse.json(user);
  } catch (error) {
    return NextResponse.json(
      { error: 'Internal server error' },
      { status: 500 }
    );
  }
}
```

**예제 2 (POST):**
```typescript
// POST /api/users
const createUserSchema = z.object({
  email: z.string().email(),
  name: z.string().min(2)
});

export async function POST(req: Request) {
  try {
    const body = await req.json();
    const validatedData = createUserSchema.parse(body);

    const user = await db.user.create({
      data: validatedData
    });

    return NextResponse.json(user, { status: 201 });
  } catch (error) {
    if (error instanceof z.ZodError) {
      return NextResponse.json(
        { error: error.errors },
        { status: 400 }
      );
    }
    return NextResponse.json(
      { error: 'Internal server error' },
      { status: 500 }
    );
  }
}
```

**이제 만들어주세요:**
DELETE /api/users/:id - 사용자 삭제 엔드포인트
- 존재하지 않는 사용자: 404
- 자신의 계정은 삭제 불가: 403
- 성공: 204 No Content"

# 예제 1: 새로운 기능 구현

"Next.js 14 프로젝트에 다크 모드를 구현해주세요.

**요구사항:**
1. 시스템 테마 자동 감지
2. 수동 전환 토글 버튼 (헤더에 배치)
3. localStorage에 사용자 선택 저장
4. 페이지 새로고침 시 설정 유지
5. 부드러운 전환 애니메이션

**구현 방법:**
- next-themes 라이브러리 사용
- Tailwind CSS dark: 클래스
- Context API로 상태 관리

**파일 구조:**
- providers/ThemeProvider.tsx: 테마 컨텍스트
- components/ThemeToggle.tsx: 토글 버튼
- app/layout.tsx: 프로바이더 적용

**디자인:**
- 라이트 모드: 흰 배경 (#ffffff)
- 다크 모드: 어두운 배경 (#0a0a0a)
- 토글 버튼: 해/달 아이콘, 부드러운 회전 애니메이션"

# 예제 2: 버그 수정

"장바구니에서 수량을 업데이트할 때 총 가격이 즉시 반영되지 않는 버그를 수정해주세요.

**현재 동작:**
1. 수량 +/- 버튼 클릭
2. 수량은 즉시 변경됨
3. 총 가격은 페이지 새로고침 후에만 업데이트

**예상 동작:**
- 수량 변경 시 총 가격 즉시 재계산
- 모든 가격 필드 동시 업데이트 (아이템 가격, 소계, 총계)

**관련 파일:**
- components/Cart.tsx (장바구니 컴포넌트)
- hooks/useCart.ts (장바구니 로직)
- utils/calculateTotal.ts (가격 계산)

**추가 고려사항:**
- 할인 쿠폰 적용 시에도 동작해야 함
- 소수점 처리 (toFixed(2))
- 로딩 상태 표시"

# 예제 3: 리팩토링

"UserProfile 컴포넌트를 리팩토링해주세요.

**현재 문제점:**
1. 500줄 이상의 단일 컴포넌트
2. 여러 책임 혼재 (UI, 데이터 페칭, 비즈니스 로직)
3. 중복된 코드
4. 테스트하기 어려운 구조

**리팩토링 목표:**
- 컴포넌트 분리 (단일 책임 원칙)
- Custom Hooks로 로직 추출
- 재사용 가능한 UI 컴포넌트
- 테스트 용이성 향상

**제안 구조:**
```
components/UserProfile/
├── index.tsx              # 메인 컴포넌트 (조합만)
├── UserInfo.tsx           # 사용자 정보 표시
├── UserStats.tsx          # 통계
├── UserActions.tsx        # 액션 버튼들
└── hooks/
    ├── useUserData.ts     # 데이터 페칭
    └── useUserActions.ts  # 액션 핸들러
```

**유지해야 할 것:**
- 기존 기능 모두 유지
- Props 인터페이스 호환성
- 스타일링 (Tailwind 클래스)"

# 예제 4: 성능 최적화

"대량의 데이터를 렌더링하는 테이블이 느립니다. 최적화해주세요.

**현재 상황:**
- 10,000개 행 렌더링
- 스크롤 시 버벅임
- 초기 로딩 5초+

**데이터:**
```typescript
interface Product {
  id: string;
  name: string;
  price: number;
  stock: number;
  category: string;
  imageUrl: string;
}
```

**최적화 전략:**
1. **가상화**: react-window 또는 react-virtual 사용
2. **메모이제이션**: React.memo, useMemo, useCallback
3. **Lazy Loading**: 이미지 지연 로딩
4. **데이터 페이지네이션**: 서버 사이드 또는 클라이언트 사이드

**목표:**
- 초기 로딩: 1초 이하
- 부드러운 스크롤 (60fps)
- 메모리 사용 최소화

**측정 방법:**
- React DevTools Profiler
- Chrome Performance tab
- lighthouse 스코어 90+"

# 예제 5: 테스트 작성

"LoginForm 컴포넌트에 대한 종합 테스트를 작성해주세요.

**테스트 케이스:**

**1. 렌더링**
- [ ] 이메일 입력 필드 표시
- [ ] 비밀번호 입력 필드 표시
- [ ] 로그인 버튼 표시

**2. 유효성 검사**
- [ ] 빈 이메일: 에러 메시지 표시
- [ ] 잘못된 이메일 형식: 에러 메시지
- [ ] 비밀번호 8자 미만: 에러 메시지
- [ ] 모든 필드 유효: 에러 없음

**3. 제출**
- [ ] 유효한 데이터: API 호출
- [ ] 로딩 상태: 버튼 비활성화, 스피너 표시
- [ ] 성공: /dashboard로 리다이렉트
- [ ] 실패: 에러 메시지 표시

**4. 접근성**
- [ ] 키보드 내비게이션
- [ ] 스크린 리더 레이블
- [ ] focus 스타일

**기술:**
- Jest + React Testing Library
- MSW로 API 모킹
- user-event로 상호작용 시뮬레이션"

# 예제 6: 아키텍처 설계

"블로그 플랫폼의 댓글 시스템을 설계해주세요.

**기능 요구사항:**
1. 댓글 작성/수정/삭제
2. 대댓글 (1단계 깊이)
3. 좋아요/싫어요
4. 실시간 업데이트
5. 페이지네이션
6. 신고 기능

**기술 스택:**
- Frontend: Next.js 14, React Query
- Backend: tRPC, Prisma
- Database: PostgreSQL
- Real-time: WebSocket (Socket.io)

**제공해주세요:**
1. **데이터 모델 (Prisma schema)**
   - Comment, Reply, Like, Report

2. **API 설계 (tRPC procedures)**
   - getComments, createComment, updateComment, deleteComment
   - createReply, likeComment, reportComment

3. **컴포넌트 구조**
   - CommentList, CommentItem, CommentForm, ReplyList

4. **상태 관리 전략**
   - React Query로 서버 상태
   - 낙관적 업데이트
   - WebSocket 이벤트 처리

5. **보안 고려사항**
   - 권한 검증 (본인만 수정/삭제)
   - XSS 방지 (sanitize)
   - Rate limiting"