# E2e UI Fix

> e2e-ui-execute에서 생성된 버그 리포트를 Playwright MCP로 재현 및 수정. E2E 테스트 실행 중 발견된 버그 수정. Use when this capability is needed.

- Skill: `tomevault-io/e2e-ui-fix-3` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/e2e-ui-fix-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/e2e-ui-fix-3/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/e2e-ui-fix-3

---


# UI E2E 버그 수정 커맨드

## 사용자 입력

```text
$ARGUMENTS
```

아규먼트에서 테스트 번호(필수)를 추출. 예: `/e2e-ui-fix 3` → Test 3 버그 수정.

---

## 개요

E2E 테스트 중 발견된 버그에 대한 체계적 수정 워크플로우:

1. **버그 리포트 로드**: docs/e2e-ui/bug-report-test-N.md 읽기 (English 버전, AI용)
2. **버그 재현**: Playwright MCP로 버그 존재 확인
3. **근본 원인 분석**: Grep, Read, Playwright MCP 활용
4. **수정 구현**: 코딩 원칙 준수하여 문제 수정
5. **수정 검증**: Playwright MCP로 버그 해결 확인
6. **테스트 작성**: 회귀 방지용 Playwright 테스트 생성
7. **문서화**: 이중언어 수정 요약 생성

---

## 사전 조건

- ✅ 버그 리포트 존재: `docs/e2e-ui/bug-report-test-N.md` (English 버전 필수)
- ✅ Playwright MCP 서버 실행 중
- ✅ 프론트엔드 서버 실행 중

---

## 실행 워크플로우

### 1단계: 준비

**버그 리포트 로드** (English 버전만, AI용):

- `docs/e2e-ui/bug-report-test-N.md` 읽기 (English, AI용 - ko.md 아님)
- 추출 정보: 재현 단계, 예상 vs 실제 동작, 증거, 콘솔 에러, 우선순위

**프로젝트 설정 읽기**:

- `playwright.config.ts`: base URL, 테스트 디렉토리 추출
- `package.json`: 프레임워크 감지

### 2단계: 버그 재현

**Playwright MCP로 버그 재현**:

- 버그 리포트의 정확한 단계 따르기
- 실제 동작과 예상 동작 비교
- 수정 전 증거용 스크린샷 촬영
- 현재 상태 문서화

**버그 재현 실패 시**:

- 버그가 이미 수정되었을 가능성 기록
- 사용자에게 계속 진행 또는 건너뛸지 질문

### 3단계: 근본 원인 분석

**분석 단계**:

1. **재현에서 에러 세부사항 추출**
2. **관련 컴포넌트 식별** (Grep 사용)
3. **소스 파일 읽기** (타겟팅된 읽기)
4. **근본 원인 찾기**:
   - JavaScript 에러 → 코드 버그
   - 요소 누락 → 컴포넌트 렌더링 문제
   - 잘못된 동작 → 로직 에러
   - 네트워크 실패 → API 통합 문제

**발견 사항 문서화**:

- 근본 원인 기록
- 라인 번호와 함께 영향받는 파일 기록
- 수정 접근법 식별

### 4단계: 수정 구현

**수정 구현**:

- 최소한의 집중된 변경
- **코딩 원칙 엄격히 준수**
- 프로젝트 코딩 표준 준수
- 엣지 케이스 고려

**수정 유형**:

1. **UI 컴포넌트 버그**: 렌더링 로직, 조건부 렌더링, CSS 수정
2. **로직 에러**: 계산, 검증, 상태 관리 수정
3. **통합 문제**: API 호출, 데이터 변환, 에러 처리 수정

### 5단계: 수정 검증

**Playwright MCP로 수정 검증**:

- 재현 단계 반복
- 예상 동작이 이제 작동하는지 확인
- 콘솔 에러 없는지 확인
- 수정 후 증거용 스크린샷 촬영
- 엣지 케이스 테스트

**수정 검증 실패 시**:

- 3단계(분석)로 돌아가기
- 작동하지 않은 것 문서화

### 6단계: 회귀 테스트 작성

**Playwright 테스트 생성** (수정 검증 후에만):

**파일 위치**: `playwright.config.ts`의 디렉토리 사용

**파일 명명**: testMatch의 프로젝트 패턴 따르기

```typescript
import { test, expect } from "@playwright/test";

test.describe("Test N: {시나리오 이름}", () => {
  test("should {예상 동작}", async ({ page }) => {
    // 네비게이션, 상호작용, assertion
  });

  // 필요 시 엣지 케이스 테스트
});
```

### 7단계: 문서화

**이중언어 수정 요약 생성**:

- `docs/e2e-ui/fix-summary-test-N.ko.md` (Korean)
- `docs/e2e-ui/fix-summary-test-N.md` (English)

**버그 리포트 상태 업데이트**:

- 버그 리포트에 "Fixed" 상태 추가
- 수정 요약 링크

---

## 핵심 규칙

### ✅ 반드시 할 것

- **`playwright.config.ts`와 `package.json` 먼저 읽기**
- **English 버그 리포트만 읽기** (.md, ko.md 아님) - 토큰 절약
- **수정 시도 전에 버그 먼저 재현**
- **코딩 원칙 엄격히 준수**
- **테스트 작성 전에 수정 작동 확인**
- playwright.config.ts의 디렉토리에 회귀 테스트 작성
- 이중언어 수정 요약 생성 (ko.md + md)
- 증거용 스크린샷 촬영 (수정 전, 수정 후)

### ❌ 절대 하지 말 것

- **`playwright.config.ts` 읽기 건너뛰기**
- Korean 버그 리포트(ko.md) 읽기 (토큰 낭비)
- 버그 재현 단계 건너뛰기
- 근본 원인 이해 없이 수정
- 수정 작동 확인 전에 테스트 코드 작성
- playwright.config에 명시된 디렉토리 외부에 테스트 작성
- 광범위하고 대규모 변경

### 🎯 수정 품질 기준

**좋은 수정**:

- 증상이 아닌 근본 원인 해결
- 최소한의 코드 변경
- 코드 품질 유지
- 기존 기능 망가뜨리지 않음

**좋은 테스트**:

- 원래 버그 시나리오 재현
- 수정 전 실패, 수정 후 성공
- 엣지 케이스 테스트
- 명확한 assertions

---

## 완료 보고 형식

수정 완료 후 사용자에게 제공할 요약:

```markdown
## 버그 수정 완료: Test N

### 🐛 원본 버그

- **우선순위**: {priority}
- **이슈**: {한 줄 설명}

### ✅ 수정 요약

- **근본 원인**: {root cause}
- **수정 접근법**: {approach}
- **변경된 파일**: {count}개 파일

### 🧪 검증

- **재현**: ✅ 버그 재현 성공
- **수정 검증**: ✅ 예상 동작 정상 작동
- **테스트 작성**: ✅ 회귀 테스트 생성됨

### 📝 생성된 파일

- **수정 요약**: `docs/e2e-ui/fix-summary-test-N.ko.md` and `.md`
- **테스트 파일**: `{path/to/test.spec.ts}`

### 🔄 다음 단계

1. 수정 구현 검토
2. 전체 테스트 스위트 실행
3. 다음 버그 또는 테스트 계속: `/e2e-ui-execute {N+1}`
```

---

## 실행

위의 가이드라인에 따라 작업을 시작하세요.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/kubrickcode) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->