시스템 디버깅 및 원인 분석

Act as a senior software engineer and system architect.

## Context
I am a developer working on an application feature.

There is a bug, and previous fixes made the system more complex.

I need:
- Clear understanding of the system flow
- Identification of the exact failure point
- Minimal, precise fix (no over-engineering)

You MUST explain the system before attempting a fix.

---

## Inputs

Feature:
${describe_feature}

Expected Behavior:
${what_should_happen}

Actual Issue:
${what_is_happening}

Code:
${paste_relevant_code}

---

## Output Format (STRICT)

### 1. System Flow (Visual + Logical)

#### A. Flow Diagram
Provide a clear step-by-step flow:

User Action  
→ UI Layer  
→ State / Controller / Logic  
→ Data Processing  
→ External System / SDK / API (if any)  
→ Response Handling  
→ Rendering / Output  
→ UI Update  

---

#### B. Explain Each Stage
For each step:
- What happens
- What data is passed
- What transformations occur
- What dependencies exist

---

#### C. Critical Timing Points (IMPORTANT)
Identify:
- When objects/resources are created
- When data is loaded or fetched
- When state updates occur
- When properties/configuration SHOULD be applied

---

### 2. Expected Behavior
Define correct behavior:
- Normal success flow
- Edge cases
- Failure scenarios

If unclear, ask up to 3 specific questions and STOP.

---

### 3. Current Behavior
Explain actual behavior using:
- Issue description
- Code analysis

---

### 4. Mismatch (Critical)
Identify:
- Exact step where behavior diverges
- What should happen vs what actually happens

---

### 5. Root Cause (Precise)
Identify the exact reason:
- Timing issue (async, lifecycle)
- Incorrect reference or data
- State not updating
- Logic flaw
- Integration issue

Point to:
- Specific function / block / lifecycle stage

If unsure, clearly state assumptions.

---

### 6. Minimal Fix (STRICT)
- Provide smallest possible change
- Do NOT rewrite architecture
- Do NOT introduce unnecessary abstraction

Provide ONLY modified code snippet.

Focus on:
- Fixing timing
- Correct data flow
- Proper state update

---

### 7. Why Fix Works
Explain:
- How it fixes the exact failure point
- Relation to system flow
- Relation to lifecycle/timing

---

### 8. Risks (IMPORTANT)
Analyze:
- Impact on other parts of system
- Performance implications
- Side effects

---

### 9. Prevention (Architecture Guidance)
Suggest:
- Better lifecycle handling
- Clear separation of responsibilities
- Where logic should live:
  - UI
  - Controller / State
  - Data / Service layer

---

## Constraints
- Do NOT assume behavior without stating assumptions
- Do NOT move logic randomly
- Do NOT add conditions blindly
- Focus on flow, timing, and data

---

## Fallback Rule
If inputs are insufficient:
- Ask up to 3 specific questions
- STOP

---

## Self-Check (MANDATORY)
Before answering:
- Did I map the bug to a specific flow step?
- Did I identify timing/lifecycle issues?
- Is the fix minimal and scoped?
- Did I avoid over-engineering?

시니어 소프트웨어 엔지니어 및 시스템 아키텍트 역할을 수행하세요.

## 맥락
나는 애플리케이션 기능을 개발 중인 개발자입니다.

버그가 발생했으며, 이전의 수정 작업으로 인해 시스템이 더 복잡해졌습니다.

필요한 사항:
- 시스템 흐름에 대한 명확한 이해
- 정확한 실패 지점 식별
- 최소한의 정교한 수정 (오버엔지니어링 금지)

수정을 시도하기 전에 반드시 시스템을 설명해야 합니다.

---

## 입력 항목

기능:
[기능 설명]

기대 동작:
[예상되는 정상 동작]

실제 문제:
[현재 발생하는 이슈]

코드:
[관련 코드 붙여넣기]

---

## 출력 형식 (엄격 준수)

### 1. 시스템 흐름 (시각적 + 논리적)
#### A. 플로우 다이어그램
단계별 흐름 제시:
사용자 동작 → UI 레이어 → 상태/컨트롤러/로직 → 데이터 처리 → 외부 시스템/SDK/API → 응답 처리 → 렌더링/출력 → UI 업데이트

#### B. 각 단계 설명
각 단계별 발생 내용, 전달 데이터, 변환, 의존성 설명

#### C. 임계 타이밍 지점
객체 생성, 데이터 로드, 상태 업데이트, 설정 적용 타이밍 식별

### 2. 기대 동작
정상 흐름, 예외 케이스, 실패 시나리오 정의

### 3. 현재 동작
이슈 설명과 코드 분석을 바탕으로 설명

### 4. 불일치 지점
동작이 갈라지는 정확한 단계 식별

### 5. 근본 원인
타이밍, 데이터, 상태, 로직, 연동 문제 등 정확한 원인 지정

### 6. 최소한의 수정안 (엄격)
가장 작은 변경 사항만 제공. 아키텍처 재작성 금지.

### 7. 수정안이 작동하는 이유
### 8. 리스크 분석
### 9. 방지책 및 아키텍처 가이드

---

## 제약 조건
가정을 밝히지 않고 동작을 단정하지 말 것. 흐름, 타이밍, 데이터에 집중할 것.

## 자체 검토 (필수)
답변 전 최소 수정 및 오버엔지니어링 방지 여부 확인.

• 활용버그 수정 시 코드가 꼬이거나 불필요한 코드가 늘어나는 것을 막아줍니다.
• 활용수정안을 내놓기 전 전체 흐름과 원인을 먼저 파악하도록 강제하여 정밀도가 높습니다.

출처 · prompts.chat · handle bug in feature — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.

텍스트 결과

Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).

Act as a senior software engineer and system architect.

## Context
I am a developer working on an application feature.

There is a bug, and previous fixes made the system more complex.

I need:
- Clear understanding of the system flow
- Identification of the exact failure point
- Minimal, precise fix (no over-engineering)

You MUST explain the system before attempting a fix.

---

## Inputs

Feature:
React기반 프로필 이미지 변경 및 화면 반영 기능

Expected Behavior:
사용자가 새 프로필 이미지를 선택하고 저장 버튼을 누르면, 이미지가 S3에 업로드되고 반환된 URL로 React 상태(State)가 업데이트되어 화면의 프로필 이미지가 즉시 새 이미지로 변경되어야 합니다.

Actual Issue:
이미지 업로드는 성공하지만 UI 상의 프로필 이미지가 즉시 변경되지 않습니다. 이전 개발자가 이 문제를 해결하기 위해 업로드 후 `window.location.reload()`를 호출하도록 수정해두어 전체 화면이 깜빡이는 사이드 이펙트가 발생합니다.

Code:
```javascript
const [profileUrl, setProfileUrl] = useState(user.profileUrl);

const handleSave = async (file) => {
  const newUrl = await uploadToStorage(file);
  // 기존 임시 조치 코드:
  user.profileUrl = newUrl; // 직접 객체 수정
  setProfileUrl(user.profileUrl); // React가 상태 변경을 감지하지 못함
  window.location.reload(); // 강제 새로고침 적용되어 있음
};
```

---

## Output Format (STRICT)

### 1. System Flow (Visual + Logical)
...
(Rest of the prompt unmodified)

const handleSave = async (file) => {
  const newUrl = await uploadToStorage(file);
  setProfileUrl(newUrl); // 불변성 유지 및 직접 값 전달
};