---
name: code-flow-web-report
description: 웹 애플리케이션의 런타임 흐름을 시각화하는 인터랙티브 리포트를 생성합니다. 라우트, 컨트롤러, 서비스 흐름 분석 요청 시 활성화됩니다.
allowed-tools: Read, Write, Edit, Glob, Grep, Bash
---

# Code Flow Web Report

웹 애플리케이션의 요청 처리 흐름을 시각화하는 인터랙티브 HTML 리포트를 생성하는 스킬입니다.

## 기능

### 분석 대상
- **라우트 (Routes)**: URL 엔드포인트 매핑
- **컨트롤러 (Controllers)**: 요청 처리 로직
- **서비스 (Services)**: 비즈니스 로직
- **미들웨어 (Middleware)**: 전처리/후처리
- **모델/리포지토리**: 데이터 접근

### 시각화 요소
- 요청 흐름 시퀀스 다이어그램
- 레이어 간 의존성 그래프
- 컴포넌트 상호작용 맵
- API 엔드포인트 목록

### 지원 프레임워크
- Express.js / Koa.js
- NestJS
- Django / Flask
- Laravel / Symfony
- Spring Boot

## 분석 프로세스

1. 라우트 정의 파일 스캔
2. 컨트롤러/핸들러 매핑 추출
3. 서비스 의존성 분석
4. 미들웨어 체인 파악
5. 데이터 흐름 추적
6. 인터랙티브 HTML 생성

## HTML 템플릿

```html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>코드 흐름 리포트</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        * { font-family: 'Noto Sans KR', sans-serif; }
        .mermaid { background: #f8fafc; padding: 1rem; border-radius: 0.5rem; }
        .endpoint-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-6xl mx-auto px-4 py-4">
            <h1 class="text-xl font-bold text-slate-800">🔄 코드 흐름 리포트</h1>
        </div>
    </header>

    <main class="max-w-6xl mx-auto px-4 py-8">
        <!-- 요약 -->
        <section class="bg-white rounded-xl shadow-sm p-6 mb-6">
            <h2 class="text-lg font-bold text-slate-700 mb-4">📊 요약</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="bg-teal-50 rounded-lg p-4 text-center">
                    <div class="text-2xl font-bold text-teal-600">24</div>
                    <div class="text-sm text-slate-600">API 엔드포인트</div>
                </div>
                <div class="bg-blue-50 rounded-lg p-4 text-center">
                    <div class="text-2xl font-bold text-blue-600">8</div>
                    <div class="text-sm text-slate-600">컨트롤러</div>
                </div>
                <div class="bg-purple-50 rounded-lg p-4 text-center">
                    <div class="text-2xl font-bold text-purple-600">12</div>
                    <div class="text-sm text-slate-600">서비스</div>
                </div>
                <div class="bg-amber-50 rounded-lg p-4 text-center">
                    <div class="text-2xl font-bold text-amber-600">5</div>
                    <div class="text-sm text-slate-600">미들웨어</div>
                </div>
            </div>
        </section>

        <!-- 아키텍처 다이어그램 -->
        <section class="bg-white rounded-xl shadow-sm p-6 mb-6">
            <h2 class="text-lg font-bold text-slate-700 mb-4">🏗️ 아키텍처</h2>
            <div class="mermaid">
                graph TD
                    Client[클라이언트] --> Router[라우터]
                    Router --> MW[미들웨어]
                    MW --> Controller[컨트롤러]
                    Controller --> Service[서비스]
                    Service --> Repository[리포지토리]
                    Repository --> DB[(데이터베이스)]
            </div>
        </section>

        <!-- 요청 흐름 -->
        <section class="bg-white rounded-xl shadow-sm p-6 mb-6">
            <h2 class="text-lg font-bold text-slate-700 mb-4">🔄 요청 흐름 예시</h2>
            <div class="mermaid">
                sequenceDiagram
                    participant C as Client
                    participant R as Router
                    participant M as Middleware
                    participant CT as Controller
                    participant S as Service
                    participant DB as Database

                    C->>R: POST /api/users
                    R->>M: authMiddleware()
                    M->>CT: UserController.create()
                    CT->>S: UserService.createUser()
                    S->>DB: INSERT INTO users
                    DB-->>S: user record
                    S-->>CT: User object
                    CT-->>C: 201 Created
            </div>
        </section>

        <!-- API 엔드포인트 목록 -->
        <section class="bg-white rounded-xl shadow-sm p-6 mb-6">
            <h2 class="text-lg font-bold text-slate-700 mb-4">📡 API 엔드포인트</h2>
            <div class="space-y-3">
                <div class="endpoint-card border rounded-lg p-4 transition-all cursor-pointer">
                    <div class="flex items-center gap-3">
                        <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-bold rounded">GET</span>
                        <code class="text-slate-700">/api/users</code>
                        <span class="text-slate-400 text-sm ml-auto">UserController.list</span>
                    </div>
                </div>
                <div class="endpoint-card border rounded-lg p-4 transition-all cursor-pointer">
                    <div class="flex items-center gap-3">
                        <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-bold rounded">POST</span>
                        <code class="text-slate-700">/api/users</code>
                        <span class="text-slate-400 text-sm ml-auto">UserController.create</span>
                    </div>
                </div>
                <div class="endpoint-card border rounded-lg p-4 transition-all cursor-pointer">
                    <div class="flex items-center gap-3">
                        <span class="px-2 py-1 bg-amber-100 text-amber-700 text-xs font-bold rounded">PUT</span>
                        <code class="text-slate-700">/api/users/:id</code>
                        <span class="text-slate-400 text-sm ml-auto">UserController.update</span>
                    </div>
                </div>
                <div class="endpoint-card border rounded-lg p-4 transition-all cursor-pointer">
                    <div class="flex items-center gap-3">
                        <span class="px-2 py-1 bg-red-100 text-red-700 text-xs font-bold rounded">DELETE</span>
                        <code class="text-slate-700">/api/users/:id</code>
                        <span class="text-slate-400 text-sm ml-auto">UserController.delete</span>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <script>
        mermaid.initialize({ startOnLoad: true, theme: 'default' });
    </script>
</body>
</html>
```

## 사용 예시

```
이 웹앱의 코드 흐름을 분석해서 리포트로 만들어줘
API 요청이 어떻게 처리되는지 시각화해줘
라우트에서 DB까지의 흐름을 다이어그램으로 보여줘
```

## 출처
Original skill from skills.cokac.com
