내가 쓰는 Claude Code 커맨드 모음

# Frontend Bug Fix Command

프론트엔드 버그를 체계적으로 수정하는 커맨드입니다. 코드 리뷰와 브라우저 테스트를 통해 버그가 완전히 해결될 때까지 반복합니다.

## Workflow

### Phase 1: 문제 파악
1. 사용자에게 다음을 질문합니다:
   - 어떤 버그/문제가 발생하나요?
   - 어떤 페이지/컴포넌트에서 발생하나요?
   - 재현 방법은 무엇인가요?
   - 기대하는 동작은 무엇인가요?

### Phase 2: 코드 분석 및 수정
1. 관련 파일들을 탐색하고 읽습니다
2. 버그의 원인을 파악합니다
3. 코드를 수정합니다

### Phase 3: 종합 코드 리뷰 (통과할 때까지 반복)
1. `code-reviewer` 에이전트를 호출하여 **관련 기능 전체**를 종합적으로 리뷰합니다:
   - 수정된 코드뿐만 아니라 해당 기능과 관련된 전체 파일/컴포넌트를 리뷰
   - 전체 로직 설계가 올바른지 검증
   - 안티패턴이 없는지 확인
   - 설계상 문제점이 없는지 검토
   - 로직 오류가 없는지 확인
2. 리뷰에서 발견된 문제를 수정합니다
3. 리뷰가 ✓ APPROVED 될 때까지 반복합니다

### Phase 4: 브라우저 테스트 (통과할 때까지 반복)
1. Playwright MCP 도구를 사용하여 브라우저에서 실제 기능을 테스트합니다
2. 테스트 실패 시:
   - 문제점을 파악합니다
   - 코드를 수정합니다
   - Phase 3 (코드 리뷰)로 돌아갑니다
3. 모든 테스트가 통과할 때까지 반복합니다

### Phase 5: 완료
1. 수정 내용을 요약합니다
2. 필요시 git commit을 제안합니다

## Instructions

아래 단계를 따라 프론트엔드 버그를 수정하세요:

---

**Step 1: 문제 파악하기**

사용자에게 AskUserQuestion 도구를 사용하여 다음을 질문하세요:
- 발생하는 버그/문제 상세 설명
- 문제가 발생하는 페이지 URL 또는 컴포넌트
- 재현 단계
- 기대하는 정상 동작

---

**Step 2: 관련 코드 분석**

1. Explore 에이전트로 관련 코드 파일들을 찾습니다
2. 파일들을 읽고 버그 원인을 파악합니다
3. 수정 계획을 세웁니다

---

**Step 3: 코드 수정**

버그를 수정하는 코드를 작성합니다.

---

**Step 4: 종합 코드 리뷰 루프**

```
REPEAT:
  1. Task 도구로 code-reviewer 에이전트를 호출합니다:
     - subagent_type: "code-reviewer"
     - prompt: 아래 형식으로 종합 리뷰 요청

  리뷰 프롬프트 예시:
  "Review the [기능명] implementation comprehensively.

   Files to review:
   - [관련 파일 전체 목록]

   Review scope (NOT just the changes, but the ENTIRE feature):
   1. Overall architecture and design - Is the design sound?
   2. Anti-patterns - Any code smells or anti-patterns?
   3. Logic correctness - Is the entire logic flow correct?
   4. Edge cases - Are all edge cases handled?
   5. State management - Is state managed properly?
   6. Component composition - Are components well structured?
   7. Performance - Any unnecessary re-renders or expensive operations?"

  2. 리뷰 결과 확인:
     - ✓ APPROVED → Phase 5로 진행
     - ⚠ NEEDS FIXES → 문제 수정 후 다시 리뷰
```

---

**Step 5: 브라우저 테스트 루프**

```
REPEAT:
  1. Playwright MCP 도구로 브라우저 테스트:
     - mcp__playwright__browser_navigate: 해당 페이지로 이동
     - mcp__playwright__browser_snapshot: 현재 상태 캡처
     - mcp__playwright__browser_click/type 등: 사용자 동작 시뮬레이션
     - 결과 검증

  2. 테스트 결과 확인:
     - 통과 → Phase 6으로 진행
     - 실패 → 코드 수정 후 Step 4 (코드 리뷰)로 돌아감
```

---

**Step 6: 완료 및 커밋**

1. 수정 내용 요약을 사용자에게 보고합니다
2. Git commit을 제안합니다

---

## Browser Test URLs

프로젝트에 맞게 설정하세요:

- User Website: http://localhost:3000
- Admin Website: http://localhost:3002

---

지금 바로 Step 1을 시작하여 사용자에게 버그에 대해 질문하세요.