From 55f604ce6f5c399f044ab1561d003558ed3c8f27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 09:57:25 +0900
Subject: [PATCH 01/31] =?UTF-8?q?feat:AI=20=ED=86=A0=ED=81=B0=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=EB=9F=89=20=EA=B4=80=EB=A6=AC=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AiTokenUsageController (index, list) 생성
- AiTokenUsage 모델 생성
- React 기반 토큰 사용량 조회 페이지 (필터, 통계, 페이지네이션)
- 라우트 추가 (system/ai-token-usage)
- AiTokenUsageMenuSeeder 메뉴 시더 생성

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../System/AiTokenUsageController.php         | 123 ++++++
 app/Models/System/AiTokenUsage.php            |  36 ++
 database/seeders/AiTokenUsageMenuSeeder.php   |  63 +++
 .../system/ai-token-usage/index.blade.php     | 369 ++++++++++++++++++
 routes/web.php                                |   7 +
 5 files changed, 598 insertions(+)
 create mode 100644 app/Http/Controllers/System/AiTokenUsageController.php
 create mode 100644 app/Models/System/AiTokenUsage.php
 create mode 100644 database/seeders/AiTokenUsageMenuSeeder.php
 create mode 100644 resources/views/system/ai-token-usage/index.blade.php

diff --git a/app/Http/Controllers/System/AiTokenUsageController.php b/app/Http/Controllers/System/AiTokenUsageController.php
new file mode 100644
index 00000000..8c9dd7d7
--- /dev/null
+++ b/app/Http/Controllers/System/AiTokenUsageController.php
@@ -0,0 +1,123 @@
+<?php
+
+namespace App\Http\Controllers\System;
+
+use App\Http\Controllers\Controller;
+use App\Models\System\AiTokenUsage;
+use App\Models\Tenants\Tenant;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\Http\Response;
+use Illuminate\View\View;
+
+class AiTokenUsageController extends Controller
+{
+    public function index(Request $request): View|Response
+    {
+        if ($request->header('HX-Request')) {
+            return response('', 200)->header('HX-Redirect', route('system.ai-token-usage.index'));
+        }
+
+        return view('system.ai-token-usage.index');
+    }
+
+    public function list(Request $request): JsonResponse
+    {
+        $perPage = $request->input('per_page', 20);
+        $startDate = $request->input('start_date');
+        $endDate = $request->input('end_date');
+        $tenantId = $request->input('tenant_id');
+        $menuName = $request->input('menu_name');
+
+        $query = AiTokenUsage::query()
+            ->orderByDesc('created_at');
+
+        if ($tenantId) {
+            $query->where('tenant_id', $tenantId);
+        }
+
+        if ($menuName) {
+            $query->where('menu_name', $menuName);
+        }
+
+        if ($startDate) {
+            $query->whereDate('created_at', '>=', $startDate);
+        }
+
+        if ($endDate) {
+            $query->whereDate('created_at', '<=', $endDate);
+        }
+
+        // 통계 (필터 조건 동일하게 적용)
+        $statsQuery = clone $query;
+        $stats = $statsQuery->selectRaw('
+            COUNT(*) as total_count,
+            SUM(prompt_tokens) as total_prompt_tokens,
+            SUM(completion_tokens) as total_completion_tokens,
+            SUM(total_tokens) as total_total_tokens,
+            SUM(cost_usd) as total_cost_usd,
+            SUM(cost_krw) as total_cost_krw
+        ')->first();
+
+        // 페이지네이션
+        $records = $query->paginate($perPage);
+
+        // 테넌트 이름 매핑
+        $tenantIds = $records->pluck('tenant_id')->unique();
+        $tenants = Tenant::whereIn('id', $tenantIds)->pluck('company_name', 'id');
+
+        $data = $records->through(function ($item) use ($tenants) {
+            return [
+                'id' => $item->id,
+                'tenant_id' => $item->tenant_id,
+                'tenant_name' => $tenants[$item->tenant_id] ?? '-',
+                'model' => $item->model,
+                'menu_name' => $item->menu_name,
+                'prompt_tokens' => $item->prompt_tokens,
+                'completion_tokens' => $item->completion_tokens,
+                'total_tokens' => $item->total_tokens,
+                'cost_usd' => (float) $item->cost_usd,
+                'cost_krw' => (float) $item->cost_krw,
+                'request_id' => $item->request_id,
+                'created_at' => $item->created_at->format('Y-m-d H:i:s'),
+            ];
+        });
+
+        // 필터용 메뉴 목록
+        $menuNames = AiTokenUsage::select('menu_name')
+            ->distinct()
+            ->orderBy('menu_name')
+            ->pluck('menu_name');
+
+        // 필터용 테넌트 목록
+        $allTenantIds = AiTokenUsage::select('tenant_id')
+            ->distinct()
+            ->pluck('tenant_id');
+        $allTenants = Tenant::whereIn('id', $allTenantIds)
+            ->orderBy('company_name')
+            ->get(['id', 'company_name']);
+
+        return response()->json([
+            'success' => true,
+            'data' => $data->items(),
+            'stats' => [
+                'total_count' => (int) ($stats->total_count ?? 0),
+                'total_prompt_tokens' => (int) ($stats->total_prompt_tokens ?? 0),
+                'total_completion_tokens' => (int) ($stats->total_completion_tokens ?? 0),
+                'total_total_tokens' => (int) ($stats->total_total_tokens ?? 0),
+                'total_cost_usd' => round((float) ($stats->total_cost_usd ?? 0), 6),
+                'total_cost_krw' => round((float) ($stats->total_cost_krw ?? 0), 2),
+            ],
+            'filters' => [
+                'menu_names' => $menuNames,
+                'tenants' => $allTenants->map(fn ($t) => ['id' => $t->id, 'name' => $t->company_name]),
+            ],
+            'pagination' => [
+                'current_page' => $records->currentPage(),
+                'last_page' => $records->lastPage(),
+                'per_page' => $records->perPage(),
+                'total' => $records->total(),
+            ],
+        ]);
+    }
+}
diff --git a/app/Models/System/AiTokenUsage.php b/app/Models/System/AiTokenUsage.php
new file mode 100644
index 00000000..2683eb67
--- /dev/null
+++ b/app/Models/System/AiTokenUsage.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Models\System;
+
+use Illuminate\Database\Eloquent\Model;
+
+class AiTokenUsage extends Model
+{
+    protected $table = 'ai_token_usages';
+
+    protected $fillable = [
+        'tenant_id',
+        'model',
+        'menu_name',
+        'prompt_tokens',
+        'completion_tokens',
+        'total_tokens',
+        'cost_usd',
+        'cost_krw',
+        'request_id',
+        'created_by',
+    ];
+
+    protected $casts = [
+        'prompt_tokens' => 'integer',
+        'completion_tokens' => 'integer',
+        'total_tokens' => 'integer',
+        'cost_usd' => 'decimal:6',
+        'cost_krw' => 'decimal:2',
+    ];
+
+    public function scopeForTenant($query, int $tenantId)
+    {
+        return $query->where('tenant_id', $tenantId);
+    }
+}
diff --git a/database/seeders/AiTokenUsageMenuSeeder.php b/database/seeders/AiTokenUsageMenuSeeder.php
new file mode 100644
index 00000000..adfa37c8
--- /dev/null
+++ b/database/seeders/AiTokenUsageMenuSeeder.php
@@ -0,0 +1,63 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Commons\Menu;
+use Illuminate\Database\Seeder;
+
+class AiTokenUsageMenuSeeder extends Seeder
+{
+    public function run(): void
+    {
+        $tenantId = 1;
+
+        // 시스템 관리 부모 메뉴 찾기
+        $parentMenu = Menu::where('tenant_id', $tenantId)
+            ->where('name', '시스템 관리')
+            ->first();
+
+        if (! $parentMenu) {
+            $this->command->error('시스템 관리 메뉴를 찾을 수 없습니다.');
+            return;
+        }
+
+        // 이미 존재하는지 확인
+        $existingMenu = Menu::where('tenant_id', $tenantId)
+            ->where('name', 'AI 토큰 사용량')
+            ->where('parent_id', $parentMenu->id)
+            ->first();
+
+        if ($existingMenu) {
+            $this->command->info('AI 토큰 사용량 메뉴가 이미 존재합니다.');
+            return;
+        }
+
+        // 현재 자식 메뉴 최대 sort_order 확인
+        $maxSort = Menu::where('parent_id', $parentMenu->id)
+            ->max('sort_order') ?? 0;
+
+        // 메뉴 생성
+        $menu = Menu::create([
+            'tenant_id' => $tenantId,
+            'parent_id' => $parentMenu->id,
+            'name' => 'AI 토큰 사용량',
+            'url' => '/system/ai-token-usage',
+            'icon' => 'brain-circuit',
+            'sort_order' => $maxSort + 1,
+            'is_active' => true,
+        ]);
+
+        $this->command->info("메뉴 생성 완료: {$menu->name} (sort_order: {$menu->sort_order})");
+
+        // 하위 메뉴 목록 출력
+        $this->command->info('');
+        $this->command->info('=== 시스템 관리 하위 메뉴 ===');
+        $children = Menu::where('parent_id', $parentMenu->id)
+            ->orderBy('sort_order')
+            ->get(['name', 'url', 'sort_order']);
+
+        foreach ($children as $child) {
+            $this->command->info("{$child->sort_order}. {$child->name} ({$child->url})");
+        }
+    }
+}
diff --git a/resources/views/system/ai-token-usage/index.blade.php b/resources/views/system/ai-token-usage/index.blade.php
new file mode 100644
index 00000000..54aa779c
--- /dev/null
+++ b/resources/views/system/ai-token-usage/index.blade.php
@@ -0,0 +1,369 @@
+@extends('layouts.app')
+
+@section('title', 'AI 토큰 사용량')
+
+@push('styles')
+<style>
+    .stat-card {
+        background: white;
+        border-radius: 12px;
+        padding: 16px 20px;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    .stat-card .label { font-size: 13px; color: #6b7280; margin-bottom: 4px; }
+    .stat-card .value { font-size: 22px; font-weight: 700; color: #111827; }
+    .stat-card .sub { font-size: 12px; color: #9ca3af; margin-top: 2px; }
+
+    .filter-bar {
+        background: white;
+        border-radius: 12px;
+        padding: 16px 20px;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        display: flex;
+        gap: 12px;
+        align-items: end;
+        flex-wrap: wrap;
+    }
+    .filter-bar label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 4px; font-weight: 500; }
+    .filter-bar select,
+    .filter-bar input {
+        border: 1px solid #d1d5db;
+        border-radius: 8px;
+        padding: 6px 10px;
+        font-size: 13px;
+        min-width: 140px;
+    }
+    .filter-bar button {
+        padding: 7px 16px;
+        border-radius: 8px;
+        font-size: 13px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.15s;
+    }
+
+    .data-table { width: 100%; border-collapse: collapse; }
+    .data-table th {
+        background: #f9fafb;
+        font-size: 12px;
+        font-weight: 600;
+        color: #6b7280;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        padding: 10px 12px;
+        text-align: left;
+        border-bottom: 1px solid #e5e7eb;
+    }
+    .data-table td {
+        padding: 10px 12px;
+        font-size: 13px;
+        color: #374151;
+        border-bottom: 1px solid #f3f4f6;
+    }
+    .data-table tr:hover td { background: #f9fafb; }
+    .data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
+
+    .pagination-bar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 0;
+    }
+    .pagination-bar button {
+        padding: 6px 12px;
+        border: 1px solid #d1d5db;
+        border-radius: 6px;
+        background: white;
+        font-size: 13px;
+        cursor: pointer;
+        transition: all 0.15s;
+    }
+    .pagination-bar button:disabled { opacity: 0.4; cursor: not-allowed; }
+    .pagination-bar button:not(:disabled):hover { background: #f3f4f6; }
+
+    .badge {
+        display: inline-block;
+        padding: 2px 8px;
+        border-radius: 10px;
+        font-size: 11px;
+        font-weight: 500;
+    }
+    .badge-blue { background: #dbeafe; color: #1d4ed8; }
+    .badge-green { background: #dcfce7; color: #16a34a; }
+    .badge-purple { background: #f3e8ff; color: #7c3aed; }
+
+    .empty-state {
+        text-align: center;
+        padding: 60px 20px;
+        color: #9ca3af;
+    }
+    .empty-state svg { margin: 0 auto 12px; }
+</style>
+@endpush
+
+@section('content')
+<meta name="csrf-token" content="{{ csrf_token() }}">
+<div id="ai-token-usage-root"></div>
+@endsection
+
+@push('scripts')
+<script src="https://unpkg.com/react@18/umd/react.development.js?v={{ time() }}"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js?v={{ time() }}"></script>
+<script src="https://unpkg.com/@babel/standalone/babel.min.js?v={{ time() }}"></script>
+<script src="https://unpkg.com/lucide@latest?v={{ time() }}"></script>
+@verbatim
+<script type="text/babel">
+const { useState, useEffect, useRef } = React;
+
+const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current && lucide.icons[name]) {
+            ref.current.innerHTML = '';
+            const svg = lucide.createElement(lucide.icons[name]);
+            svg.setAttribute('class', className);
+            ref.current.appendChild(svg);
+        }
+    }, [className]);
+    return <span ref={ref} className="inline-flex items-center" {...props} />;
+};
+
+const BrainCircuit = createIcon('brain-circuit');
+const Search = createIcon('search');
+const RotateCcw = createIcon('rotate-ccw');
+const ChevronLeft = createIcon('chevron-left');
+const ChevronRight = createIcon('chevron-right');
+const Zap = createIcon('zap');
+const DollarSign = createIcon('dollar-sign');
+const Hash = createIcon('hash');
+const ArrowUpDown = createIcon('arrow-up-down');
+
+const fmt = (n) => n != null ? Number(n).toLocaleString() : '0';
+const fmtUsd = (n) => n != null ? '$' + Number(n).toFixed(4) : '$0.0000';
+const fmtKrw = (n) => n != null ? Number(n).toLocaleString('ko-KR', { maximumFractionDigits: 0 }) + '원' : '0원';
+
+function AiTokenUsageApp() {
+    const [records, setRecords] = useState([]);
+    const [stats, setStats] = useState({});
+    const [filters, setFilters] = useState({ menu_names: [], tenants: [] });
+    const [pagination, setPagination] = useState({ current_page: 1, last_page: 1, per_page: 20, total: 0 });
+    const [loading, setLoading] = useState(true);
+
+    // 필터 상태
+    const today = new Date();
+    const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
+    const [startDate, setStartDate] = useState(firstDay.toISOString().split('T')[0]);
+    const [endDate, setEndDate] = useState(today.toISOString().split('T')[0]);
+    const [tenantId, setTenantId] = useState('');
+    const [menuName, setMenuName] = useState('');
+    const [page, setPage] = useState(1);
+
+    const fetchData = async (p = 1) => {
+        setLoading(true);
+        try {
+            const params = new URLSearchParams();
+            if (startDate) params.set('start_date', startDate);
+            if (endDate) params.set('end_date', endDate);
+            if (tenantId) params.set('tenant_id', tenantId);
+            if (menuName) params.set('menu_name', menuName);
+            params.set('page', p);
+            params.set('per_page', 20);
+
+            const res = await fetch(`/system/ai-token-usage/list?${params}`);
+            const json = await res.json();
+            if (json.success) {
+                setRecords(json.data);
+                setStats(json.stats);
+                setFilters(json.filters);
+                setPagination(json.pagination);
+                setPage(json.pagination.current_page);
+            }
+        } catch (err) {
+            console.error('데이터 조회 실패:', err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => { fetchData(); }, []);
+
+    const handleSearch = () => { fetchData(1); };
+    const handleReset = () => {
+        setStartDate(firstDay.toISOString().split('T')[0]);
+        setEndDate(today.toISOString().split('T')[0]);
+        setTenantId('');
+        setMenuName('');
+        setTimeout(() => fetchData(1), 0);
+    };
+    const goPage = (p) => { fetchData(p); };
+
+    return (
+        <div className="space-y-4">
+            {/* 페이지 헤더 */}
+            <div className="flex justify-between items-center">
+                <h1 className="text-2xl font-bold text-gray-800 flex items-center gap-2">
+                    <BrainCircuit className="w-7 h-7" />
+                    AI 토큰 사용량
+                </h1>
+            </div>
+
+            {/* 통계 카드 */}
+            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
+                <div className="stat-card">
+                    <div className="label">총 호출 수</div>
+                    <div className="value">{fmt(stats.total_count)}</div>
+                    <div className="sub">건</div>
+                </div>
+                <div className="stat-card">
+                    <div className="label">입력 토큰</div>
+                    <div className="value">{fmt(stats.total_prompt_tokens)}</div>
+                    <div className="sub">tokens</div>
+                </div>
+                <div className="stat-card">
+                    <div className="label">출력 토큰</div>
+                    <div className="value">{fmt(stats.total_completion_tokens)}</div>
+                    <div className="sub">tokens</div>
+                </div>
+                <div className="stat-card">
+                    <div className="label">전체 토큰</div>
+                    <div className="value">{fmt(stats.total_total_tokens)}</div>
+                    <div className="sub">tokens</div>
+                </div>
+                <div className="stat-card">
+                    <div className="label">총 비용 (USD)</div>
+                    <div className="value">{fmtUsd(stats.total_cost_usd)}</div>
+                    <div className="sub">달러</div>
+                </div>
+                <div className="stat-card">
+                    <div className="label">총 비용 (KRW)</div>
+                    <div className="value">{fmtKrw(stats.total_cost_krw)}</div>
+                    <div className="sub">원</div>
+                </div>
+            </div>
+
+            {/* 필터 바 */}
+            <div className="filter-bar">
+                <div>
+                    <label>시작일</label>
+                    <input type="date" value={startDate} onChange={e => setStartDate(e.target.value)} />
+                </div>
+                <div>
+                    <label>종료일</label>
+                    <input type="date" value={endDate} onChange={e => setEndDate(e.target.value)} />
+                </div>
+                <div>
+                    <label>테넌트</label>
+                    <select value={tenantId} onChange={e => setTenantId(e.target.value)}>
+                        <option value="">전체</option>
+                        {filters.tenants.map(t => (
+                            <option key={t.id} value={t.id}>{t.name}</option>
+                        ))}
+                    </select>
+                </div>
+                <div>
+                    <label>호출 메뉴</label>
+                    <select value={menuName} onChange={e => setMenuName(e.target.value)}>
+                        <option value="">전체</option>
+                        {filters.menu_names.map(m => (
+                            <option key={m} value={m}>{m}</option>
+                        ))}
+                    </select>
+                </div>
+                <button
+                    onClick={handleSearch}
+                    className="bg-blue-600 text-white hover:bg-blue-700 flex items-center gap-1"
+                >
+                    <Search className="w-4 h-4" /> 조회
+                </button>
+                <button
+                    onClick={handleReset}
+                    className="bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center gap-1"
+                >
+                    <RotateCcw className="w-4 h-4" /> 초기화
+                </button>
+            </div>
+
+            {/* 데이터 테이블 */}
+            <div className="bg-white rounded-xl shadow-sm overflow-hidden">
+                {loading ? (
+                    <div className="text-center py-16 text-gray-400">
+                        <div className="animate-spin inline-block w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full mb-3"></div>
+                        <p>데이터를 불러오는 중...</p>
+                    </div>
+                ) : records.length === 0 ? (
+                    <div className="empty-state">
+                        <BrainCircuit className="w-12 h-12 text-gray-300" />
+                        <p className="text-lg font-medium text-gray-500 mt-2">사용 내역이 없습니다</p>
+                        <p className="text-sm">AI 기능을 사용하면 토큰 사용량이 기록됩니다.</p>
+                    </div>
+                ) : (
+                    <>
+                        <div className="overflow-x-auto">
+                            <table className="data-table">
+                                <thead>
+                                    <tr>
+                                        <th>테넌트</th>
+                                        <th>사용일시</th>
+                                        <th>호출메뉴</th>
+                                        <th>모델</th>
+                                        <th className="num">입력토큰</th>
+                                        <th className="num">출력토큰</th>
+                                        <th className="num">전체토큰</th>
+                                        <th className="num">비용(USD)</th>
+                                        <th className="num">비용(KRW)</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {records.map(r => (
+                                        <tr key={r.id}>
+                                            <td>
+                                                <span className="badge badge-blue">{r.tenant_id}</span>
+                                                {' '}{r.tenant_name}
+                                            </td>
+                                            <td>{r.created_at}</td>
+                                            <td><span className="badge badge-green">{r.menu_name}</span></td>
+                                            <td><span className="badge badge-purple">{r.model}</span></td>
+                                            <td className="num">{fmt(r.prompt_tokens)}</td>
+                                            <td className="num">{fmt(r.completion_tokens)}</td>
+                                            <td className="num font-semibold">{fmt(r.total_tokens)}</td>
+                                            <td className="num">{fmtUsd(r.cost_usd)}</td>
+                                            <td className="num font-semibold">{fmtKrw(r.cost_krw)}</td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+
+                        {/* 페이지네이션 */}
+                        <div className="pagination-bar px-4">
+                            <span className="text-sm text-gray-500">
+                                총 {fmt(pagination.total)}건 (페이지 {pagination.current_page}/{pagination.last_page})
+                            </span>
+                            <div className="flex gap-2">
+                                <button
+                                    disabled={pagination.current_page <= 1}
+                                    onClick={() => goPage(pagination.current_page - 1)}
+                                    className="flex items-center gap-1"
+                                >
+                                    <ChevronLeft className="w-4 h-4" /> 이전
+                                </button>
+                                <button
+                                    disabled={pagination.current_page >= pagination.last_page}
+                                    onClick={() => goPage(pagination.current_page + 1)}
+                                    className="flex items-center gap-1"
+                                >
+                                    다음 <ChevronRight className="w-4 h-4" />
+                                </button>
+                            </div>
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}
+
+ReactDOM.createRoot(document.getElementById('ai-token-usage-root')).render(<AiTokenUsageApp />);
+</script>
+@endverbatim
+@endpush
diff --git a/routes/web.php b/routes/web.php
index 3b6566a0..12a40bf5 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -34,6 +34,7 @@
 use App\Http\Controllers\RolePermissionController;
 use App\Http\Controllers\Sales\SalesProductController;
 use App\Http\Controllers\System\AiConfigController;
+use App\Http\Controllers\System\AiTokenUsageController;
 use App\Http\Controllers\System\HolidayController;
 use App\Http\Controllers\Stats\StatDashboardController;
 use App\Http\Controllers\System\SystemAlertController;
@@ -404,6 +405,12 @@
         Route::delete('/{id}', [HolidayController::class, 'destroy'])->name('destroy');
     });
 
+    // AI 토큰 사용량 관리
+    Route::prefix('system/ai-token-usage')->name('system.ai-token-usage.')->group(function () {
+        Route::get('/', [AiTokenUsageController::class, 'index'])->name('index');
+        Route::get('/list', [AiTokenUsageController::class, 'list'])->name('list');
+    });
+
     // 명함 OCR API
     Route::post('/api/business-card-ocr', [BusinessCardOcrController::class, 'process'])->name('api.business-card-ocr');
 

From 1d12a75ac77ac8efdff07d72c843d030078c1c84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 10:36:19 +0900
Subject: [PATCH 02/31] =?UTF-8?q?fix:AI=20=ED=86=A0=ED=81=B0=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=EB=9F=89=20=EC=8B=9C=EB=8D=94=20-=20AI=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=EB=8F=85=EB=A6=BD=20=EA=B7=B8=EB=A3=B9=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 database/seeders/AiTokenUsageMenuSeeder.php | 69 ++++++++++++---------
 1 file changed, 41 insertions(+), 28 deletions(-)

diff --git a/database/seeders/AiTokenUsageMenuSeeder.php b/database/seeders/AiTokenUsageMenuSeeder.php
index adfa37c8..9f84b824 100644
--- a/database/seeders/AiTokenUsageMenuSeeder.php
+++ b/database/seeders/AiTokenUsageMenuSeeder.php
@@ -11,48 +11,61 @@ public function run(): void
     {
         $tenantId = 1;
 
-        // 시스템 관리 부모 메뉴 찾기
-        $parentMenu = Menu::where('tenant_id', $tenantId)
-            ->where('name', '시스템 관리')
+        // AI 관리 부모 그룹 찾기 또는 생성
+        $parentMenu = Menu::withoutGlobalScopes()
+            ->where('tenant_id', $tenantId)
+            ->where('name', 'AI 관리')
+            ->whereNull('parent_id')
+            ->whereNull('deleted_at')
             ->first();
 
         if (! $parentMenu) {
-            $this->command->error('시스템 관리 메뉴를 찾을 수 없습니다.');
-            return;
+            $parentMenu = Menu::withoutGlobalScopes()->create([
+                'tenant_id' => $tenantId,
+                'parent_id' => null,
+                'name' => 'AI 관리',
+                'url' => null,
+                'icon' => 'brain-circuit',
+                'sort_order' => 12,
+                'is_active' => true,
+            ]);
+            $this->command->info("AI 관리 부모 그룹 생성 완료 (id: {$parentMenu->id})");
         }
 
-        // 이미 존재하는지 확인
-        $existingMenu = Menu::where('tenant_id', $tenantId)
+        // AI 토큰 사용량 메뉴 존재 확인
+        $existingMenu = Menu::withoutGlobalScopes()
+            ->where('tenant_id', $tenantId)
             ->where('name', 'AI 토큰 사용량')
             ->where('parent_id', $parentMenu->id)
+            ->whereNull('deleted_at')
             ->first();
 
         if ($existingMenu) {
             $this->command->info('AI 토큰 사용량 메뉴가 이미 존재합니다.');
-            return;
+        } else {
+            $maxSort = Menu::withoutGlobalScopes()
+                ->where('parent_id', $parentMenu->id)
+                ->whereNull('deleted_at')
+                ->max('sort_order') ?? 0;
+
+            Menu::withoutGlobalScopes()->create([
+                'tenant_id' => $tenantId,
+                'parent_id' => $parentMenu->id,
+                'name' => 'AI 토큰 사용량',
+                'url' => '/system/ai-token-usage',
+                'icon' => 'brain-circuit',
+                'sort_order' => $maxSort + 1,
+                'is_active' => true,
+            ]);
+            $this->command->info('AI 토큰 사용량 메뉴 생성 완료');
         }
 
-        // 현재 자식 메뉴 최대 sort_order 확인
-        $maxSort = Menu::where('parent_id', $parentMenu->id)
-            ->max('sort_order') ?? 0;
-
-        // 메뉴 생성
-        $menu = Menu::create([
-            'tenant_id' => $tenantId,
-            'parent_id' => $parentMenu->id,
-            'name' => 'AI 토큰 사용량',
-            'url' => '/system/ai-token-usage',
-            'icon' => 'brain-circuit',
-            'sort_order' => $maxSort + 1,
-            'is_active' => true,
-        ]);
-
-        $this->command->info("메뉴 생성 완료: {$menu->name} (sort_order: {$menu->sort_order})");
-
-        // 하위 메뉴 목록 출력
+        // 결과 출력
         $this->command->info('');
-        $this->command->info('=== 시스템 관리 하위 메뉴 ===');
-        $children = Menu::where('parent_id', $parentMenu->id)
+        $this->command->info('=== AI 관리 하위 메뉴 ===');
+        $children = Menu::withoutGlobalScopes()
+            ->where('parent_id', $parentMenu->id)
+            ->whereNull('deleted_at')
             ->orderBy('sort_order')
             ->get(['name', 'url', 'sort_order']);
 

From a882e1f8f98d3d50b87a3e29638fe743398ff083 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 11:11:35 +0900
Subject: [PATCH 03/31] =?UTF-8?q?fix:AI=20=EB=A9=94=EB=89=B4=20=EC=8B=9C?=
 =?UTF-8?q?=EB=8D=94=20-=20AI=EC=84=A4=EC=A0=95=20=EC=9D=B4=EB=8F=99=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80=20(=EC=84=9C=EB=B2=84?=
 =?UTF-8?q?=20=EB=B0=B0=ED=8F=AC=EC=9A=A9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AI 관리 부모 그룹 생성
- AI 설정 메뉴를 기존 위치에서 AI 관리 그룹으로 이동
- AI 토큰 사용량 메뉴 생성 또는 이동
- 멱등성 보장 (재실행 안전)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 database/seeders/AiTokenUsageMenuSeeder.php | 59 ++++++++++++++-------
 1 file changed, 40 insertions(+), 19 deletions(-)

diff --git a/database/seeders/AiTokenUsageMenuSeeder.php b/database/seeders/AiTokenUsageMenuSeeder.php
index 9f84b824..e5f39563 100644
--- a/database/seeders/AiTokenUsageMenuSeeder.php
+++ b/database/seeders/AiTokenUsageMenuSeeder.php
@@ -11,16 +11,16 @@ public function run(): void
     {
         $tenantId = 1;
 
-        // AI 관리 부모 그룹 찾기 또는 생성
-        $parentMenu = Menu::withoutGlobalScopes()
+        // 1. AI 관리 부모 그룹 찾기 또는 생성
+        $aiGroup = Menu::withoutGlobalScopes()
             ->where('tenant_id', $tenantId)
             ->where('name', 'AI 관리')
             ->whereNull('parent_id')
             ->whereNull('deleted_at')
             ->first();
 
-        if (! $parentMenu) {
-            $parentMenu = Menu::withoutGlobalScopes()->create([
+        if (! $aiGroup) {
+            $aiGroup = Menu::withoutGlobalScopes()->create([
                 'tenant_id' => $tenantId,
                 'parent_id' => null,
                 'name' => 'AI 관리',
@@ -29,42 +29,63 @@ public function run(): void
                 'sort_order' => 12,
                 'is_active' => true,
             ]);
-            $this->command->info("AI 관리 부모 그룹 생성 완료 (id: {$parentMenu->id})");
+            $this->command->info("AI 관리 부모 그룹 생성 완료 (id: {$aiGroup->id})");
+        } else {
+            $this->command->info("AI 관리 부모 그룹 이미 존재 (id: {$aiGroup->id})");
         }
 
-        // AI 토큰 사용량 메뉴 존재 확인
-        $existingMenu = Menu::withoutGlobalScopes()
+        // 2. AI 설정 메뉴를 AI 관리 그룹으로 이동 (다른 그룹에 있는 경우)
+        $aiConfig = Menu::withoutGlobalScopes()
             ->where('tenant_id', $tenantId)
-            ->where('name', 'AI 토큰 사용량')
-            ->where('parent_id', $parentMenu->id)
+            ->where('name', 'AI 설정')
             ->whereNull('deleted_at')
             ->first();
 
-        if ($existingMenu) {
-            $this->command->info('AI 토큰 사용량 메뉴가 이미 존재합니다.');
+        if ($aiConfig && $aiConfig->parent_id !== $aiGroup->id) {
+            $aiConfig->update([
+                'parent_id' => $aiGroup->id,
+                'sort_order' => 1,
+            ]);
+            $this->command->info("AI 설정 메뉴를 AI 관리 그룹으로 이동 완료");
+        } elseif (! $aiConfig) {
+            $this->command->warn("AI 설정 메뉴가 존재하지 않습니다. (건너뜀)");
         } else {
-            $maxSort = Menu::withoutGlobalScopes()
-                ->where('parent_id', $parentMenu->id)
-                ->whereNull('deleted_at')
-                ->max('sort_order') ?? 0;
+            $this->command->info("AI 설정 메뉴가 이미 AI 관리 그룹에 있습니다.");
+        }
 
+        // 3. AI 토큰 사용량 메뉴 생성 또는 이동
+        $aiToken = Menu::withoutGlobalScopes()
+            ->where('tenant_id', $tenantId)
+            ->where('name', 'AI 토큰 사용량')
+            ->whereNull('deleted_at')
+            ->first();
+
+        if ($aiToken && $aiToken->parent_id !== $aiGroup->id) {
+            $aiToken->update([
+                'parent_id' => $aiGroup->id,
+                'sort_order' => 2,
+            ]);
+            $this->command->info("AI 토큰 사용량 메뉴를 AI 관리 그룹으로 이동 완료");
+        } elseif (! $aiToken) {
             Menu::withoutGlobalScopes()->create([
                 'tenant_id' => $tenantId,
-                'parent_id' => $parentMenu->id,
+                'parent_id' => $aiGroup->id,
                 'name' => 'AI 토큰 사용량',
                 'url' => '/system/ai-token-usage',
                 'icon' => 'brain-circuit',
-                'sort_order' => $maxSort + 1,
+                'sort_order' => 2,
                 'is_active' => true,
             ]);
-            $this->command->info('AI 토큰 사용량 메뉴 생성 완료');
+            $this->command->info("AI 토큰 사용량 메뉴 생성 완료");
+        } else {
+            $this->command->info("AI 토큰 사용량 메뉴가 이미 AI 관리 그룹에 있습니다.");
         }
 
         // 결과 출력
         $this->command->info('');
         $this->command->info('=== AI 관리 하위 메뉴 ===');
         $children = Menu::withoutGlobalScopes()
-            ->where('parent_id', $parentMenu->id)
+            ->where('parent_id', $aiGroup->id)
             ->whereNull('deleted_at')
             ->orderBy('sort_order')
             ->get(['name', 'url', 'sort_order']);

From bb81d07d61b79fc608ecb91f4837198b7802be8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 11:27:53 +0900
Subject: [PATCH 04/31] =?UTF-8?q?feat:=EC=A0=84=EC=B2=B4=20AI=20=EC=84=9C?=
 =?UTF-8?q?=EB=B9=84=EC=8A=A4=EC=97=90=20=ED=86=A0=ED=81=B0=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=EB=9F=89=20=EA=B8=B0=EB=A1=9D=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AiTokenHelper 공통 헬퍼 생성 (Gemini/Claude 응답 파서)
- BizCertOcrService (Claude) 토큰 기록 추가
- BusinessCardOcrService (Gemini) 토큰 기록 추가
- MeetingLogService (Claude) 토큰 기록 추가

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/Helpers/AiTokenHelper.php           | 92 +++++++++++++++++++++++++
 app/Services/BizCertOcrService.php      |  5 ++
 app/Services/BusinessCardOcrService.php |  5 ++
 app/Services/MeetingLogService.php      |  4 ++
 4 files changed, 106 insertions(+)
 create mode 100644 app/Helpers/AiTokenHelper.php

diff --git a/app/Helpers/AiTokenHelper.php b/app/Helpers/AiTokenHelper.php
new file mode 100644
index 00000000..11c1350e
--- /dev/null
+++ b/app/Helpers/AiTokenHelper.php
@@ -0,0 +1,92 @@
+<?php
+
+namespace App\Helpers;
+
+use App\Models\System\AiTokenUsage;
+use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Str;
+
+class AiTokenHelper
+{
+    /**
+     * Gemini API 응답에서 토큰 사용량 저장
+     */
+    public static function saveGeminiUsage(array $apiResult, string $model, string $menuName): void
+    {
+        try {
+            $usage = $apiResult['usageMetadata'] ?? null;
+            if (! $usage) {
+                return;
+            }
+
+            $promptTokens = $usage['promptTokenCount'] ?? 0;
+            $completionTokens = $usage['candidatesTokenCount'] ?? 0;
+            $totalTokens = $usage['totalTokenCount'] ?? 0;
+
+            // Gemini 2.0 Flash 기준 단가
+            $inputPrice = 0.10 / 1_000_000;
+            $outputPrice = 0.40 / 1_000_000;
+
+            self::save($model, $menuName, $promptTokens, $completionTokens, $totalTokens, $inputPrice, $outputPrice);
+        } catch (\Exception $e) {
+            Log::warning('AI token usage save failed (Gemini)', ['error' => $e->getMessage()]);
+        }
+    }
+
+    /**
+     * Claude API 응답에서 토큰 사용량 저장
+     */
+    public static function saveClaudeUsage(array $apiResult, string $model, string $menuName): void
+    {
+        try {
+            $usage = $apiResult['usage'] ?? null;
+            if (! $usage) {
+                return;
+            }
+
+            $promptTokens = $usage['input_tokens'] ?? 0;
+            $completionTokens = $usage['output_tokens'] ?? 0;
+            $totalTokens = $promptTokens + $completionTokens;
+
+            // Claude 3 Haiku 기준 단가
+            $inputPrice = 0.25 / 1_000_000;
+            $outputPrice = 1.25 / 1_000_000;
+
+            self::save($model, $menuName, $promptTokens, $completionTokens, $totalTokens, $inputPrice, $outputPrice);
+        } catch (\Exception $e) {
+            Log::warning('AI token usage save failed (Claude)', ['error' => $e->getMessage()]);
+        }
+    }
+
+    /**
+     * 공통 저장 로직
+     */
+    private static function save(
+        string $model,
+        string $menuName,
+        int $promptTokens,
+        int $completionTokens,
+        int $totalTokens,
+        float $inputPricePerToken,
+        float $outputPricePerToken,
+    ): void {
+        $costUsd = ($promptTokens * $inputPricePerToken) + ($completionTokens * $outputPricePerToken);
+        $exchangeRate = (float) config('services.gemini.exchange_rate', 1400);
+        $costKrw = $costUsd * $exchangeRate;
+
+        $tenantId = session('selected_tenant_id', 1);
+
+        AiTokenUsage::create([
+            'tenant_id' => $tenantId,
+            'model' => $model,
+            'menu_name' => $menuName,
+            'prompt_tokens' => $promptTokens,
+            'completion_tokens' => $completionTokens,
+            'total_tokens' => $totalTokens,
+            'cost_usd' => $costUsd,
+            'cost_krw' => $costKrw,
+            'request_id' => Str::uuid()->toString(),
+            'created_by' => auth()->id(),
+        ]);
+    }
+}
diff --git a/app/Services/BizCertOcrService.php b/app/Services/BizCertOcrService.php
index 8140aeb7..871a8e55 100644
--- a/app/Services/BizCertOcrService.php
+++ b/app/Services/BizCertOcrService.php
@@ -2,6 +2,7 @@
 
 namespace App\Services;
 
+use App\Helpers\AiTokenHelper;
 use App\Models\BizCert;
 use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Facades\Log;
@@ -88,6 +89,10 @@ public function processWithClaude(string $imageBase64, ?string $rawText = null):
             }
 
             $apiResponse = $response->json();
+
+            // 토큰 사용량 저장
+            AiTokenHelper::saveClaudeUsage($apiResponse, 'claude-3-haiku-20240307', '사업자등록증OCR');
+
             $claudeText = $apiResponse['content'][0]['text'] ?? '';
 
             if (empty($claudeText)) {
diff --git a/app/Services/BusinessCardOcrService.php b/app/Services/BusinessCardOcrService.php
index 15bf9034..0fb16654 100644
--- a/app/Services/BusinessCardOcrService.php
+++ b/app/Services/BusinessCardOcrService.php
@@ -2,6 +2,7 @@
 
 namespace App\Services;
 
+use App\Helpers\AiTokenHelper;
 use App\Models\System\AiConfig;
 use Illuminate\Http\Client\ConnectionException;
 use Illuminate\Support\Facades\Http;
@@ -130,6 +131,10 @@ private function callGeminiApi(string $url, string $base64Image, array $headers,
             }
 
             $result = $response->json();
+
+            // 토큰 사용량 저장
+            AiTokenHelper::saveGeminiUsage($result, $result['modelVersion'] ?? 'gemini', '명함OCR');
+
             $text = $result['candidates'][0]['content']['parts'][0]['text'] ?? '';
 
             // JSON 파싱
diff --git a/app/Services/MeetingLogService.php b/app/Services/MeetingLogService.php
index 85754ab0..780ee80e 100644
--- a/app/Services/MeetingLogService.php
+++ b/app/Services/MeetingLogService.php
@@ -2,6 +2,7 @@
 
 namespace App\Services;
 
+use App\Helpers\AiTokenHelper;
 use App\Models\MeetingLog;
 use Illuminate\Pagination\LengthAwarePaginator;
 use Illuminate\Support\Facades\Auth;
@@ -171,6 +172,9 @@ private function generateSummary(string $transcript, string $summaryType = 'meet
             if ($response->successful()) {
                 $data = $response->json();
 
+                // 토큰 사용량 저장
+                AiTokenHelper::saveClaudeUsage($data, 'claude-3-haiku-20240307', '회의록AI요약');
+
                 return $data['content'][0]['text'] ?? null;
             }
 

From ee9f9c128ae943eb86c30609fe63b931ce80c694 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 11:27:59 +0900
Subject: [PATCH 05/31] =?UTF-8?q?docs:GCC=20=ED=86=A0=ED=81=B0=20=EC=A0=95?=
 =?UTF-8?q?=EC=B1=85=20=EB=B9=84=EA=B5=90=EC=9E=90=EB=A3=8C=20=EA=B8=B0?=
 =?UTF-8?q?=EC=88=A0=EB=AC=B8=EC=84=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- API 응답 직접 추출 vs GCC Monitoring API 비교 분석
- SAM 프로젝트 적합성 근거 정리
- 기술 구현 명세 및 향후 개선 방안 포함

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 docs/GCC토큰정책비교자료.md | 238 ++++++++++++++++++++++++++++++++++++
 1 file changed, 238 insertions(+)
 create mode 100644 docs/GCC토큰정책비교자료.md

diff --git a/docs/GCC토큰정책비교자료.md b/docs/GCC토큰정책비교자료.md
new file mode 100644
index 00000000..154162b1
--- /dev/null
+++ b/docs/GCC토큰정책비교자료.md
@@ -0,0 +1,238 @@
+# AI 토큰 사용량 추적 방식 비교 분석
+
+> 작성일: 2026-02-07
+> 프로젝트: SAM (Smart Automation Management)
+> 목적: AI API 토큰 사용량 추적 방식 선택에 대한 기술적 근거 문서
+
+---
+
+## 1. 배경
+
+SAM 프로젝트는 Google Gemini API와 Anthropic Claude API를 여러 기능에서 활용하고 있다.
+AI API 비용 관리 및 테넌트별 사용량 분석을 위해 토큰 사용량 추적이 필요하며,
+이를 구현하는 두 가지 방식을 비교 분석한다.
+
+### SAM 프로젝트 AI API 호출 현황
+
+| 기능 | AI 서비스 | 모델 | 프로젝트 |
+|------|----------|------|---------|
+| AI 리포트 생성 | Google Gemini | gemini-2.0-flash | API |
+| 사업자등록증 OCR | Anthropic Claude | claude-3-haiku | MNG |
+| 명함 OCR | Google Gemini | gemini-2.0-flash | MNG |
+| 회의록 AI 요약 | Anthropic Claude | claude-3-haiku | MNG |
+| 음성 인식 (STT) | Google Cloud | Speech-to-Text | MNG |
+
+---
+
+## 2. 방식 A: API 응답에서 직접 추출하여 DB 저장 (채택)
+
+### 동작 원리
+
+```
+[SAM 서버] → [AI API 호출] → [응답 수신]
+                                   ↓
+                          usageMetadata / usage 필드 추출
+                                   ↓
+                          ai_token_usages 테이블에 저장
+                                   ↓
+                          MNG 관리 화면에서 조회
+```
+
+### Gemini API 응답 예시
+
+```json
+{
+  "candidates": [{ "content": { "parts": [{ "text": "..." }] } }],
+  "usageMetadata": {
+    "promptTokenCount": 1250,
+    "candidatesTokenCount": 523,
+    "totalTokenCount": 1773
+  }
+}
+```
+
+### Claude API 응답 예시
+
+```json
+{
+  "content": [{ "type": "text", "text": "..." }],
+  "usage": {
+    "input_tokens": 1100,
+    "output_tokens": 480
+  }
+}
+```
+
+### 장점
+
+- **비즈니스 컨텍스트 연결**: 테넌트, 기능(메뉴), 사용자 단위로 추적 가능
+- **추가 인증 불필요**: 기존 API Key만으로 동작 (Google Cloud 서비스 계정 불필요)
+- **실시간 기록**: API 호출 즉시 저장
+- **다중 AI 서비스 통합**: Gemini, Claude 등 서로 다른 AI 서비스를 하나의 테이블에서 통합 관리
+- **구현 난이도 낮음**: 응답에 이미 포함된 데이터를 추출하기만 하면 됨
+- **멀티테넌트 지원**: tenant_id 기반으로 테넌트별 비용 분리 가능
+
+### 단점
+
+- **코드 수정 필요**: 새 AI 기능 추가 시 토큰 저장 코드를 명시적으로 추가해야 함
+- **누락 가능성**: try-catch 내부에서 저장 실패 시 데이터 누락 가능 (단, 비즈니스 로직에 영향 없음)
+- **외부 호출 미추적**: SAM 외부에서 동일 API Key로 호출한 사용량은 추적 불가
+- **비용 계산은 추정치**: 모델별 단가를 코드에 하드코딩하므로 가격 변동 시 업데이트 필요
+
+---
+
+## 3. 방식 B: Google Cloud Monitoring API로 조회
+
+### 동작 원리
+
+```
+[Google Cloud Console]
+     ↓
+[Cloud Monitoring API]  ←  SAM 서버에서 주기적 조회
+     ↓
+  프로젝트 전체 사용량 집계 반환
+     ↓
+  SAM DB에 저장 또는 직접 표시
+```
+
+### 관련 Google Cloud API
+
+| API | 용도 | 제공 데이터 |
+|-----|------|-----------|
+| `monitoring.googleapis.com` | 메트릭 조회 | API 호출 수, 토큰 수 (프로젝트 단위) |
+| `serviceusage.googleapis.com` | 할당량 관리 | API 사용량 및 할당량 |
+| `billing.googleapis.com` | 결제 데이터 | 프로젝트 전체 과금 정보 |
+
+### 요구 사항
+
+1. **Google Cloud 프로젝트** 필요 (API Key만으로는 불가)
+2. **서비스 계정** 생성 및 IAM 역할 부여 필요
+   - `roles/monitoring.viewer` (Monitoring 읽기)
+   - `roles/billing.viewer` (결제 읽기)
+3. **OAuth2 인증** 또는 서비스 계정 JSON 키 파일
+4. Cloud Monitoring API 활성화
+
+### 장점
+
+- **자동 집계**: 모든 API 호출이 자동으로 집계됨 (코드 수정 불필요)
+- **누락 없음**: Google 인프라에서 직접 집계하므로 데이터 손실 없음
+- **정확한 과금 데이터**: Google이 산정한 실제 비용 조회 가능
+- **외부 호출 포함**: API Key를 사용하는 모든 호출이 포함됨
+
+### 단점
+
+- **비즈니스 컨텍스트 부재**: 프로젝트 전체 합계만 제공 (테넌트별, 기능별, 사용자별 분리 불가)
+- **추가 인프라 비용**: Cloud Monitoring API 자체도 과금 대상
+- **데이터 지연**: 실시간이 아닌 수 분~수 시간 지연 (최대 24시간)
+- **복잡한 인증**: 서비스 계정 설정, IAM 역할, OAuth2 등 관리 부담
+- **Gemini만 해당**: Claude API (Anthropic) 사용량은 Google Cloud에서 조회 불가
+- **API Key 방식 제한**: 현재 SAM이 사용하는 API Key 인증으로는 일부 메트릭 접근 제한
+
+---
+
+## 4. 비교표
+
+| 비교 항목 | 방식 A (API 응답 직접 추출) | 방식 B (GCC Monitoring API) |
+|-----------|:---:|:---:|
+| 테넌트별 분리 | **O** | X |
+| 기능/메뉴별 분리 | **O** | X |
+| 사용자별 추적 | **O** | X |
+| 실시간 기록 | **O** | X (지연 있음) |
+| 다중 AI 서비스 통합 | **O** (Gemini + Claude) | X (Gemini만) |
+| 추가 인증/인프라 필요 | X | **O** (서비스 계정, IAM) |
+| 누락 가능성 | 있음 (방어 코드 적용) | 없음 |
+| 코드 수정 필요성 | 새 기능마다 추가 | 불필요 |
+| 구현 난이도 | **낮음** | 높음 |
+| 운영 비용 | 없음 | Cloud Monitoring 과금 |
+| 비용 정확도 | 추정치 (모델별 단가 기반) | **정확** (Google 산정) |
+| 외부 호출 추적 | X | O |
+
+---
+
+## 5. SAM 프로젝트 적합성 분석
+
+### 방식 A를 채택한 핵심 이유
+
+1. **멀티테넌트 환경**
+   SAM은 여러 테넌트(회사)가 하나의 시스템을 공유하는 멀티테넌트 구조이다.
+   "어떤 회사(테넌트)가 얼마나 사용했는지"를 추적해야 하며, GCC는 이 정보를 제공하지 않는다.
+
+2. **기능별 비용 분석**
+   AI 리포트, 명함 OCR, 회의록 요약 등 기능별 사용량을 별도로 집계해야 한다.
+   GCC는 프로젝트 전체 합계만 제공하므로 기능별 분석이 불가능하다.
+
+3. **다중 AI 서비스**
+   SAM은 Gemini와 Claude를 함께 사용한다.
+   GCC는 Google 서비스(Gemini)만 추적 가능하고, Anthropic Claude 사용량은 별도 관리해야 한다.
+
+4. **인프라 단순성**
+   추가 서비스 계정, IAM 설정, Cloud Monitoring API 활성화 등의 인프라 작업 없이
+   기존 API 응답에서 데이터를 추출하는 것만으로 충분하다.
+
+---
+
+## 6. 향후 개선 방안
+
+### 6.1 월말 교차 검증 (권장)
+
+- 방식 A의 DB 합계와 Google Cloud Console 대시보드의 사용량을 월 1회 대조
+- 누락 여부를 확인하고 차이가 크면 원인 분석
+
+### 6.2 단가 자동 업데이트
+
+현재 모델별 단가가 코드에 하드코딩되어 있음. 향후 개선 가능:
+- `ai_configs` 테이블에 모델별 단가 컬럼 추가
+- 또는 별도 `ai_pricing` 설정 테이블 생성
+
+### 6.3 알림 기능
+
+- 월간 예산 임계치 초과 시 관리자 알림
+- 테넌트별 사용량 한도 설정
+
+---
+
+## 7. 기술 구현 명세
+
+### 저장 테이블: `ai_token_usages`
+
+| 컬럼 | 타입 | 설명 |
+|------|------|------|
+| id | bigint (PK) | 자동 증가 |
+| tenant_id | bigint (FK) | 테넌트 ID |
+| model | varchar(100) | AI 모델명 |
+| menu_name | varchar(100) | 호출 기능명 |
+| prompt_tokens | int unsigned | 입력 토큰 수 |
+| completion_tokens | int unsigned | 출력 토큰 수 |
+| total_tokens | int unsigned | 전체 토큰 수 |
+| cost_usd | decimal(10,6) | 예상 비용 (USD) |
+| cost_krw | decimal(12,2) | 예상 비용 (KRW) |
+| request_id | varchar(100) | 요청 추적 UUID |
+| created_by | bigint (FK) | 생성자 ID |
+| created_at | timestamp | 생성 시각 |
+| updated_at | timestamp | 수정 시각 |
+
+### 인덱스
+
+- `(tenant_id, created_at)` - 테넌트별 기간 조회
+- `(tenant_id, menu_name)` - 테넌트별 기능 조회
+
+### 비용 단가 기준 (2026-02 기준)
+
+| 모델 | 입력 단가 | 출력 단가 |
+|------|----------|----------|
+| Gemini 2.0 Flash | $0.10 / 1M tokens | $0.40 / 1M tokens |
+| Claude 3 Haiku | $0.25 / 1M tokens | $1.25 / 1M tokens |
+
+환율: 기본 1,400원/USD (config 설정 가능)
+
+---
+
+## 8. 결론
+
+SAM 프로젝트의 멀티테넌트 아키텍처와 다중 AI 서비스 사용 환경에서,
+**API 응답 직접 추출 방식(방식 A)**이 비즈니스 요구사항을 충족하는 최적의 선택이다.
+
+Google Cloud Monitoring API(방식 B)는 프로젝트 전체 사용량 확인에는 유용하나,
+테넌트별/기능별 상세 추적이 불가능하여 SAM의 핵심 요구사항을 충족하지 못한다.
+
+필요시 방식 B를 월말 교차 검증 용도로 보조적으로 활용할 수 있다.

From 5fe6afd9c48dd024d7512ef3458c9d3525592b71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 12:52:37 +0900
Subject: [PATCH 06/31] =?UTF-8?q?feat:AI=20=EC=9D=8C=EC=84=B1=EB=85=B9?=
 =?UTF-8?q?=EC=9D=8C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AiVoiceRecording 모델 (상태 상수, 접근자)
- AiVoiceRecordingService (GCS 업로드, STT, Gemini 분석 파이프라인)
- AiVoiceRecordingController (CRUD, 녹음 처리, 상태 폴링)
- React 블레이드 뷰 (녹음 UI, 파일 업로드, 목록, 상세 모달)
- 라우트 추가 (system/ai-voice-recording)
- 메뉴 시더에 AI 음성녹음 항목 추가

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../System/AiVoiceRecordingController.php     | 204 +++++
 app/Models/AiVoiceRecording.php               |  94 +++
 app/Services/AiVoiceRecordingService.php      | 475 +++++++++++
 database/seeders/AiTokenUsageMenuSeeder.php   |  28 +
 .../system/ai-voice-recording/index.blade.php | 798 ++++++++++++++++++
 routes/web.php                                |  13 +
 6 files changed, 1612 insertions(+)
 create mode 100644 app/Http/Controllers/System/AiVoiceRecordingController.php
 create mode 100644 app/Models/AiVoiceRecording.php
 create mode 100644 app/Services/AiVoiceRecordingService.php
 create mode 100644 resources/views/system/ai-voice-recording/index.blade.php

diff --git a/app/Http/Controllers/System/AiVoiceRecordingController.php b/app/Http/Controllers/System/AiVoiceRecordingController.php
new file mode 100644
index 00000000..de7efedd
--- /dev/null
+++ b/app/Http/Controllers/System/AiVoiceRecordingController.php
@@ -0,0 +1,204 @@
+<?php
+
+namespace App\Http\Controllers\System;
+
+use App\Http\Controllers\Controller;
+use App\Models\AiVoiceRecording;
+use App\Services\AiVoiceRecordingService;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\View\View;
+use Symfony\Component\HttpFoundation\Response;
+
+class AiVoiceRecordingController extends Controller
+{
+    public function __construct(
+        private readonly AiVoiceRecordingService $service
+    ) {}
+
+    /**
+     * React 뷰 반환
+     */
+    public function index(Request $request): View|Response
+    {
+        if ($request->header('HX-Request')) {
+            return response('', 200)->header('HX-Redirect', route('system.ai-voice-recording.index'));
+        }
+
+        return view('system.ai-voice-recording.index');
+    }
+
+    /**
+     * JSON 목록
+     */
+    public function list(Request $request): JsonResponse
+    {
+        $params = $request->only(['search', 'status', 'per_page']);
+        $recordings = $this->service->getList($params);
+
+        return response()->json([
+            'success' => true,
+            'data' => $recordings,
+        ]);
+    }
+
+    /**
+     * 새 녹음 생성
+     */
+    public function store(Request $request): JsonResponse
+    {
+        $validated = $request->validate([
+            'title' => 'nullable|string|max:200',
+        ]);
+
+        $recording = $this->service->create($validated);
+
+        return response()->json([
+            'success' => true,
+            'message' => '녹음이 생성되었습니다.',
+            'data' => $recording,
+        ], 201);
+    }
+
+    /**
+     * Base64 오디오 업로드 + 처리
+     */
+    public function processAudio(Request $request, int $id): JsonResponse
+    {
+        $recording = AiVoiceRecording::find($id);
+
+        if (! $recording) {
+            return response()->json([
+                'success' => false,
+                'message' => '녹음을 찾을 수 없습니다.',
+            ], 404);
+        }
+
+        $validated = $request->validate([
+            'audio' => 'required|string',
+            'duration' => 'required|integer|min:1',
+        ]);
+
+        $result = $this->service->processAudio(
+            $recording,
+            $validated['audio'],
+            $validated['duration']
+        );
+
+        if (! $result['ok']) {
+            return response()->json([
+                'success' => false,
+                'message' => $result['error'] ?? '처리 중 오류가 발생했습니다.',
+            ], 500);
+        }
+
+        return response()->json([
+            'success' => true,
+            'message' => '음성 분석이 완료되었습니다.',
+            'data' => $result['recording'],
+        ]);
+    }
+
+    /**
+     * 파일 업로드 + 처리
+     */
+    public function uploadFile(Request $request): JsonResponse
+    {
+        $validated = $request->validate([
+            'audio_file' => 'required|file|mimes:webm,wav,mp3,ogg,m4a,mp4|max:102400',
+            'title' => 'nullable|string|max:200',
+        ]);
+
+        $recording = $this->service->create([
+            'title' => $validated['title'] ?? '업로드된 음성녹음',
+        ]);
+
+        $result = $this->service->processUploadedFile(
+            $recording,
+            $request->file('audio_file')
+        );
+
+        if (! $result['ok']) {
+            return response()->json([
+                'success' => false,
+                'message' => $result['error'] ?? '처리 중 오류가 발생했습니다.',
+            ], 500);
+        }
+
+        return response()->json([
+            'success' => true,
+            'message' => '음성 분석이 완료되었습니다.',
+            'data' => $result['recording'],
+        ]);
+    }
+
+    /**
+     * 상세 조회
+     */
+    public function show(int $id): JsonResponse
+    {
+        $recording = $this->service->getById($id);
+
+        if (! $recording) {
+            return response()->json([
+                'success' => false,
+                'message' => '녹음을 찾을 수 없습니다.',
+            ], 404);
+        }
+
+        return response()->json([
+            'success' => true,
+            'data' => $recording,
+        ]);
+    }
+
+    /**
+     * 삭제
+     */
+    public function destroy(int $id): JsonResponse
+    {
+        $recording = AiVoiceRecording::find($id);
+
+        if (! $recording) {
+            return response()->json([
+                'success' => false,
+                'message' => '녹음을 찾을 수 없습니다.',
+            ], 404);
+        }
+
+        $this->service->delete($recording);
+
+        return response()->json([
+            'success' => true,
+            'message' => '녹음이 삭제되었습니다.',
+        ]);
+    }
+
+    /**
+     * 처리 상태 폴링용
+     */
+    public function status(int $id): JsonResponse
+    {
+        $recording = AiVoiceRecording::find($id);
+
+        if (! $recording) {
+            return response()->json([
+                'success' => false,
+                'message' => '녹음을 찾을 수 없습니다.',
+            ], 404);
+        }
+
+        return response()->json([
+            'success' => true,
+            'data' => [
+                'id' => $recording->id,
+                'status' => $recording->status,
+                'status_label' => $recording->status_label,
+                'is_completed' => $recording->isCompleted(),
+                'is_processing' => $recording->isProcessing(),
+                'transcript_text' => $recording->transcript_text,
+                'analysis_text' => $recording->analysis_text,
+            ],
+        ]);
+    }
+}
diff --git a/app/Models/AiVoiceRecording.php b/app/Models/AiVoiceRecording.php
new file mode 100644
index 00000000..9a36cb7c
--- /dev/null
+++ b/app/Models/AiVoiceRecording.php
@@ -0,0 +1,94 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\BelongsToTenant;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class AiVoiceRecording extends Model
+{
+    use BelongsToTenant, SoftDeletes;
+
+    protected $table = 'ai_voice_recordings';
+
+    protected $fillable = [
+        'tenant_id',
+        'user_id',
+        'title',
+        'interview_template_id',
+        'audio_file_path',
+        'audio_gcs_uri',
+        'transcript_text',
+        'analysis_text',
+        'status',
+        'duration_seconds',
+        'file_expiry_date',
+    ];
+
+    protected $casts = [
+        'duration_seconds' => 'integer',
+        'file_expiry_date' => 'datetime',
+        'created_at' => 'datetime',
+        'updated_at' => 'datetime',
+        'deleted_at' => 'datetime',
+    ];
+
+    public const STATUS_PENDING = 'PENDING';
+
+    public const STATUS_PROCESSING = 'PROCESSING';
+
+    public const STATUS_COMPLETED = 'COMPLETED';
+
+    public const STATUS_FAILED = 'FAILED';
+
+    public function user(): BelongsTo
+    {
+        return $this->belongsTo(User::class);
+    }
+
+    public function getFormattedDurationAttribute(): string
+    {
+        if (! $this->duration_seconds) {
+            return '00:00';
+        }
+
+        $minutes = floor($this->duration_seconds / 60);
+        $seconds = $this->duration_seconds % 60;
+
+        return sprintf('%02d:%02d', $minutes, $seconds);
+    }
+
+    public function getStatusLabelAttribute(): string
+    {
+        return match ($this->status) {
+            self::STATUS_PENDING => '대기중',
+            self::STATUS_PROCESSING => '처리중',
+            self::STATUS_COMPLETED => '완료',
+            self::STATUS_FAILED => '실패',
+            default => $this->status,
+        };
+    }
+
+    public function getStatusColorAttribute(): string
+    {
+        return match ($this->status) {
+            self::STATUS_PENDING => 'badge-warning',
+            self::STATUS_PROCESSING => 'badge-info',
+            self::STATUS_COMPLETED => 'badge-success',
+            self::STATUS_FAILED => 'badge-error',
+            default => 'badge-ghost',
+        };
+    }
+
+    public function isCompleted(): bool
+    {
+        return $this->status === self::STATUS_COMPLETED;
+    }
+
+    public function isProcessing(): bool
+    {
+        return $this->status === self::STATUS_PROCESSING;
+    }
+}
diff --git a/app/Services/AiVoiceRecordingService.php b/app/Services/AiVoiceRecordingService.php
new file mode 100644
index 00000000..99a6b73d
--- /dev/null
+++ b/app/Services/AiVoiceRecordingService.php
@@ -0,0 +1,475 @@
+<?php
+
+namespace App\Services;
+
+use App\Helpers\AiTokenHelper;
+use App\Models\AiVoiceRecording;
+use App\Models\System\AiConfig;
+use Illuminate\Http\UploadedFile;
+use Illuminate\Pagination\LengthAwarePaginator;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Log;
+
+class AiVoiceRecordingService
+{
+    public function __construct(
+        private GoogleCloudService $googleCloudService
+    ) {}
+
+    /**
+     * 목록 조회
+     */
+    public function getList(array $params = []): LengthAwarePaginator
+    {
+        $query = AiVoiceRecording::query()
+            ->with('user:id,name')
+            ->orderBy('created_at', 'desc');
+
+        if (! empty($params['status'])) {
+            $query->where('status', $params['status']);
+        }
+
+        if (! empty($params['search'])) {
+            $search = $params['search'];
+            $query->where(function ($q) use ($search) {
+                $q->where('title', 'like', "%{$search}%")
+                    ->orWhere('transcript_text', 'like', "%{$search}%")
+                    ->orWhere('analysis_text', 'like', "%{$search}%");
+            });
+        }
+
+        $perPage = $params['per_page'] ?? 10;
+
+        return $query->paginate($perPage);
+    }
+
+    /**
+     * 상세 조회
+     */
+    public function getById(int $id): ?AiVoiceRecording
+    {
+        return AiVoiceRecording::with('user:id,name')->find($id);
+    }
+
+    /**
+     * 새 녹음 레코드 생성
+     */
+    public function create(array $data): AiVoiceRecording
+    {
+        return AiVoiceRecording::create([
+            'tenant_id' => session('selected_tenant_id'),
+            'user_id' => Auth::id(),
+            'title' => $data['title'] ?? '무제 음성녹음',
+            'status' => AiVoiceRecording::STATUS_PENDING,
+            'file_expiry_date' => now()->addDays(7),
+        ]);
+    }
+
+    /**
+     * Base64 오디오 업로드 + 처리 파이프라인
+     */
+    public function processAudio(AiVoiceRecording $recording, string $audioBase64, int $durationSeconds): array
+    {
+        try {
+            $recording->update([
+                'status' => AiVoiceRecording::STATUS_PROCESSING,
+                'duration_seconds' => $durationSeconds,
+            ]);
+
+            // 1. GCS에 오디오 업로드
+            $objectName = sprintf(
+                'voice-recordings/%d/%d/%s.webm',
+                $recording->tenant_id,
+                $recording->id,
+                now()->format('YmdHis')
+            );
+
+            $gcsUri = $this->googleCloudService->uploadBase64Audio($audioBase64, $objectName);
+
+            if (! $gcsUri) {
+                throw new \Exception('오디오 파일 업로드 실패');
+            }
+
+            $recording->update([
+                'audio_file_path' => $objectName,
+                'audio_gcs_uri' => $gcsUri,
+            ]);
+
+            // 2. Speech-to-Text 변환
+            $transcript = $this->googleCloudService->speechToText($gcsUri);
+
+            if (! $transcript) {
+                throw new \Exception('음성 인식 실패');
+            }
+
+            $recording->update(['transcript_text' => $transcript]);
+
+            // 3. Gemini AI 분석
+            $analysis = $this->analyzeWithGemini($transcript);
+
+            $recording->update([
+                'analysis_text' => $analysis,
+                'status' => AiVoiceRecording::STATUS_COMPLETED,
+            ]);
+
+            return [
+                'ok' => true,
+                'recording' => $recording->fresh(),
+            ];
+        } catch (\Exception $e) {
+            Log::error('AiVoiceRecording 처리 실패', [
+                'recording_id' => $recording->id,
+                'error' => $e->getMessage(),
+            ]);
+
+            $recording->update(['status' => AiVoiceRecording::STATUS_FAILED]);
+
+            return [
+                'ok' => false,
+                'error' => $e->getMessage(),
+            ];
+        }
+    }
+
+    /**
+     * 파일 업로드 처리
+     */
+    public function processUploadedFile(AiVoiceRecording $recording, UploadedFile $file): array
+    {
+        try {
+            $recording->update(['status' => AiVoiceRecording::STATUS_PROCESSING]);
+
+            // 임시 저장
+            $tempPath = $file->store('temp', 'local');
+            $fullPath = storage_path('app/' . $tempPath);
+
+            // 파일 크기로 대략적인 재생 시간 추정 (12KB/초 기준)
+            $fileSize = $file->getSize();
+            $estimatedDuration = max(1, intval($fileSize / 12000));
+            $recording->update(['duration_seconds' => $estimatedDuration]);
+
+            // 1. GCS에 오디오 업로드
+            $extension = $file->getClientOriginalExtension() ?: 'webm';
+            $objectName = sprintf(
+                'voice-recordings/%d/%d/%s.%s',
+                $recording->tenant_id,
+                $recording->id,
+                now()->format('YmdHis'),
+                $extension
+            );
+
+            $gcsUri = $this->googleCloudService->uploadToStorage($fullPath, $objectName);
+
+            if (! $gcsUri) {
+                @unlink($fullPath);
+                throw new \Exception('오디오 파일 업로드 실패');
+            }
+
+            $recording->update([
+                'audio_file_path' => $objectName,
+                'audio_gcs_uri' => $gcsUri,
+            ]);
+
+            // 2. Speech-to-Text 변환
+            $transcript = $this->googleCloudService->speechToText($gcsUri);
+
+            // 임시 파일 삭제
+            @unlink($fullPath);
+
+            if (! $transcript) {
+                throw new \Exception('음성 인식 실패');
+            }
+
+            $recording->update(['transcript_text' => $transcript]);
+
+            // 3. Gemini AI 분석
+            $analysis = $this->analyzeWithGemini($transcript);
+
+            $recording->update([
+                'analysis_text' => $analysis,
+                'status' => AiVoiceRecording::STATUS_COMPLETED,
+            ]);
+
+            return [
+                'ok' => true,
+                'recording' => $recording->fresh(),
+            ];
+        } catch (\Exception $e) {
+            Log::error('AiVoiceRecording 파일 처리 실패', [
+                'recording_id' => $recording->id,
+                'error' => $e->getMessage(),
+            ]);
+
+            $recording->update(['status' => AiVoiceRecording::STATUS_FAILED]);
+
+            return [
+                'ok' => false,
+                'error' => $e->getMessage(),
+            ];
+        }
+    }
+
+    /**
+     * Gemini API로 영업 시나리오 분석
+     */
+    private function analyzeWithGemini(string $transcript): ?string
+    {
+        $config = AiConfig::getActiveGemini();
+
+        if (! $config) {
+            Log::warning('Gemini API 설정이 없습니다.');
+            return null;
+        }
+
+        $prompt = $this->buildAnalysisPrompt($transcript);
+
+        if ($config->isVertexAi()) {
+            return $this->callVertexAiApi($config, $prompt);
+        }
+
+        return $this->callGoogleAiStudioApi($config, $prompt);
+    }
+
+    /**
+     * Google AI Studio API 호출
+     */
+    private function callGoogleAiStudioApi(AiConfig $config, string $prompt): ?string
+    {
+        $model = $config->model;
+        $apiKey = $config->api_key;
+        $baseUrl = $config->base_url ?? 'https://generativelanguage.googleapis.com/v1beta';
+
+        $url = "{$baseUrl}/models/{$model}:generateContent?key={$apiKey}";
+
+        return $this->callGeminiApi($url, $prompt, [
+            'Content-Type' => 'application/json',
+        ], false);
+    }
+
+    /**
+     * Vertex AI API 호출
+     */
+    private function callVertexAiApi(AiConfig $config, string $prompt): ?string
+    {
+        $model = $config->model;
+        $projectId = $config->getProjectId();
+        $region = $config->getRegion();
+
+        if (! $projectId) {
+            Log::error('Vertex AI 프로젝트 ID가 설정되지 않았습니다.');
+            return null;
+        }
+
+        $accessToken = $this->getAccessToken($config);
+        if (! $accessToken) {
+            Log::error('Google Cloud 인증 실패');
+            return null;
+        }
+
+        $url = "https://{$region}-aiplatform.googleapis.com/v1/projects/{$projectId}/locations/{$region}/publishers/google/models/{$model}:generateContent";
+
+        return $this->callGeminiApi($url, $prompt, [
+            'Authorization' => 'Bearer ' . $accessToken,
+            'Content-Type' => 'application/json',
+        ], true);
+    }
+
+    /**
+     * Gemini API 공통 호출 로직
+     */
+    private function callGeminiApi(string $url, string $prompt, array $headers, bool $isVertexAi = false): ?string
+    {
+        $content = [
+            'parts' => [
+                ['text' => $prompt],
+            ],
+        ];
+
+        if ($isVertexAi) {
+            $content['role'] = 'user';
+        }
+
+        try {
+            $response = Http::timeout(120)
+                ->withHeaders($headers)
+                ->post($url, [
+                    'contents' => [$content],
+                    'generationConfig' => [
+                        'temperature' => 0.3,
+                        'topK' => 40,
+                        'topP' => 0.95,
+                        'maxOutputTokens' => 4096,
+                    ],
+                ]);
+
+            if (! $response->successful()) {
+                Log::error('Gemini API error', [
+                    'status' => $response->status(),
+                    'body' => $response->body(),
+                ]);
+                return null;
+            }
+
+            $result = $response->json();
+
+            // 토큰 사용량 저장
+            AiTokenHelper::saveGeminiUsage($result, $result['modelVersion'] ?? 'gemini', 'AI음성녹음분석');
+
+            return $result['candidates'][0]['content']['parts'][0]['text'] ?? null;
+        } catch (\Exception $e) {
+            Log::error('Gemini API 예외', ['error' => $e->getMessage()]);
+            return null;
+        }
+    }
+
+    /**
+     * 서비스 계정으로 OAuth2 액세스 토큰 가져오기
+     */
+    private function getAccessToken(AiConfig $config): ?string
+    {
+        $configuredPath = $config->getServiceAccountPath();
+
+        $possiblePaths = array_filter([
+            $configuredPath,
+            '/var/www/sales/apikey/google_service_account.json',
+            storage_path('app/google_service_account.json'),
+        ]);
+
+        $serviceAccountPath = null;
+        foreach ($possiblePaths as $path) {
+            if ($path && file_exists($path)) {
+                $serviceAccountPath = $path;
+                break;
+            }
+        }
+
+        if (! $serviceAccountPath) {
+            Log::error('Service account file not found', ['tried_paths' => $possiblePaths]);
+            return null;
+        }
+
+        $serviceAccount = json_decode(file_get_contents($serviceAccountPath), true);
+        if (! $serviceAccount) {
+            Log::error('Service account JSON parse failed');
+            return null;
+        }
+
+        $now = time();
+        $jwtHeader = $this->base64UrlEncode(json_encode(['alg' => 'RS256', 'typ' => 'JWT']));
+        $jwtClaim = $this->base64UrlEncode(json_encode([
+            'iss' => $serviceAccount['client_email'],
+            'scope' => 'https://www.googleapis.com/auth/cloud-platform',
+            'aud' => 'https://oauth2.googleapis.com/token',
+            'exp' => $now + 3600,
+            'iat' => $now,
+        ]));
+
+        $privateKey = openssl_pkey_get_private($serviceAccount['private_key']);
+        if (! $privateKey) {
+            Log::error('Failed to load private key');
+            return null;
+        }
+
+        openssl_sign($jwtHeader . '.' . $jwtClaim, $signature, $privateKey, OPENSSL_ALGO_SHA256);
+        $jwt = $jwtHeader . '.' . $jwtClaim . '.' . $this->base64UrlEncode($signature);
+
+        try {
+            $response = Http::asForm()->post('https://oauth2.googleapis.com/token', [
+                'grant_type' => 'urn:ietf:params:oauth:grant-type:jwt-bearer',
+                'assertion' => $jwt,
+            ]);
+
+            if ($response->successful()) {
+                return $response->json()['access_token'] ?? null;
+            }
+
+            Log::error('OAuth token request failed', [
+                'status' => $response->status(),
+                'body' => $response->body(),
+            ]);
+            return null;
+        } catch (\Exception $e) {
+            Log::error('OAuth token request exception', ['error' => $e->getMessage()]);
+            return null;
+        }
+    }
+
+    /**
+     * Base64 URL 인코딩
+     */
+    private function base64UrlEncode(string $data): string
+    {
+        return rtrim(strtr(base64_encode($data), '+/', '-_'), '=');
+    }
+
+    /**
+     * 영업 시나리오 분석 프롬프트
+     */
+    private function buildAnalysisPrompt(string $transcript): string
+    {
+        return <<<PROMPT
+다음은 회의 또는 영업 통화 녹취록을 텍스트로 변환한 내용입니다. 이 내용을 분석하여 구조화된 피드백을 제공해주세요.
+
+## 분석 요청사항:
+
+### 1. 전체 요약
+- 녹취록의 핵심 내용을 3-5문장으로 요약해주세요.
+
+### 2. 영업 강점 분석
+- 잘한 점, 효과적인 커뮤니케이션, 성공적인 전략 등을 구체적으로 분석해주세요.
+
+### 3. 개선이 필요한 부분
+- 놓친 기회, 개선할 수 있는 표현, 더 효과적인 접근 방법 등을 제안해주세요.
+
+### 4. 고객 반응/니즈 파악
+- 고객이 표현한 관심사, 우려사항, 요구사항을 정리해주세요.
+- 숨겨진 니즈나 잠재적 기회를 파악해주세요.
+
+### 5. 다음 단계 제안
+- 후속 조치 사항을 구체적으로 제안해주세요.
+- 우선순위와 시기를 포함해주세요.
+
+## 녹취록:
+{$transcript}
+
+## 분석 결과:
+PROMPT;
+    }
+
+    /**
+     * 삭제
+     */
+    public function delete(AiVoiceRecording $recording): bool
+    {
+        if ($recording->audio_file_path) {
+            $this->googleCloudService->deleteFromStorage($recording->audio_file_path);
+        }
+
+        return $recording->delete();
+    }
+
+    /**
+     * 만료된 파일 정리 (Cron용)
+     */
+    public function cleanupExpiredFiles(): int
+    {
+        $expired = AiVoiceRecording::where('file_expiry_date', '<=', now())
+            ->whereNotNull('audio_file_path')
+            ->get();
+
+        $count = 0;
+        foreach ($expired as $recording) {
+            if ($recording->audio_file_path) {
+                $this->googleCloudService->deleteFromStorage($recording->audio_file_path);
+                $recording->update([
+                    'audio_file_path' => null,
+                    'audio_gcs_uri' => null,
+                ]);
+                $count++;
+            }
+        }
+
+        return $count;
+    }
+}
diff --git a/database/seeders/AiTokenUsageMenuSeeder.php b/database/seeders/AiTokenUsageMenuSeeder.php
index e5f39563..905c9d4c 100644
--- a/database/seeders/AiTokenUsageMenuSeeder.php
+++ b/database/seeders/AiTokenUsageMenuSeeder.php
@@ -81,6 +81,34 @@ public function run(): void
             $this->command->info("AI 토큰 사용량 메뉴가 이미 AI 관리 그룹에 있습니다.");
         }
 
+        // 4. AI 음성녹음 메뉴 생성 또는 이동
+        $aiVoice = Menu::withoutGlobalScopes()
+            ->where('tenant_id', $tenantId)
+            ->where('name', 'AI 음성녹음')
+            ->whereNull('deleted_at')
+            ->first();
+
+        if ($aiVoice && $aiVoice->parent_id !== $aiGroup->id) {
+            $aiVoice->update([
+                'parent_id' => $aiGroup->id,
+                'sort_order' => 3,
+            ]);
+            $this->command->info("AI 음성녹음 메뉴를 AI 관리 그룹으로 이동 완료");
+        } elseif (! $aiVoice) {
+            Menu::withoutGlobalScopes()->create([
+                'tenant_id' => $tenantId,
+                'parent_id' => $aiGroup->id,
+                'name' => 'AI 음성녹음',
+                'url' => '/system/ai-voice-recording',
+                'icon' => 'mic',
+                'sort_order' => 3,
+                'is_active' => true,
+            ]);
+            $this->command->info("AI 음성녹음 메뉴 생성 완료");
+        } else {
+            $this->command->info("AI 음성녹음 메뉴가 이미 AI 관리 그룹에 있습니다.");
+        }
+
         // 결과 출력
         $this->command->info('');
         $this->command->info('=== AI 관리 하위 메뉴 ===');
diff --git a/resources/views/system/ai-voice-recording/index.blade.php b/resources/views/system/ai-voice-recording/index.blade.php
new file mode 100644
index 00000000..7e979102
--- /dev/null
+++ b/resources/views/system/ai-voice-recording/index.blade.php
@@ -0,0 +1,798 @@
+@extends('layouts.app')
+
+@section('title', 'AI 음성녹음')
+
+@push('styles')
+<style>
+    .recording-pulse { animation: pulse 1.5s ease-in-out infinite; }
+    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+    .waveform-bar { transition: height 0.1s ease; }
+    .fade-in { animation: fadeIn 0.2s ease-in; }
+    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+    .modal-overlay { background: rgba(0,0,0,0.5); }
+    .drop-zone { border: 2px dashed #d1d5db; transition: all 0.2s; }
+    .drop-zone.drag-over { border-color: #3b82f6; background: #eff6ff; }
+</style>
+@endpush
+
+@section('content')
+<div id="ai-voice-recording-root"></div>
+@endsection
+
+@push('scripts')
+<script src="https://unpkg.com/react@18/umd/react.development.js?v={{ time() }}"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js?v={{ time() }}"></script>
+<script src="https://unpkg.com/@babel/standalone/babel.min.js?v={{ time() }}"></script>
+<script src="https://unpkg.com/lucide@latest?v={{ time() }}"></script>
+@verbatim
+<script type="text/babel">
+const { useState, useEffect, useRef, useCallback } = React;
+
+const CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]')?.content;
+const BASE_URL = '/system/ai-voice-recording';
+
+// ============================================================
+// API
+// ============================================================
+const api = {
+    headers: () => ({
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': CSRF_TOKEN,
+        'Accept': 'application/json',
+    }),
+    async get(url) {
+        const res = await fetch(url, { headers: this.headers() });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.json();
+    },
+    async post(url, data) {
+        const res = await fetch(url, { method: 'POST', headers: this.headers(), body: JSON.stringify(data) });
+        if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error(err.message || `HTTP ${res.status}`); }
+        return res.json();
+    },
+    async del(url) {
+        const res = await fetch(url, { method: 'DELETE', headers: this.headers() });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.json();
+    },
+    async upload(url, formData) {
+        const res = await fetch(url, {
+            method: 'POST',
+            headers: { 'X-CSRF-TOKEN': CSRF_TOKEN, 'Accept': 'application/json' },
+            body: formData,
+        });
+        if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error(err.message || `HTTP ${res.status}`); }
+        return res.json();
+    },
+};
+
+// ============================================================
+// Lucide
+// ============================================================
+const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current && lucide.icons[name]) {
+            ref.current.innerHTML = '';
+            const svg = lucide.createElement(lucide.icons[name]);
+            svg.setAttribute('class', className);
+            ref.current.appendChild(svg);
+        }
+    }, [className]);
+    return <span ref={ref} className="inline-flex items-center" {...props} />;
+};
+
+const IconMic = createIcon('mic');
+const IconMicOff = createIcon('mic-off');
+const IconSquare = createIcon('square');
+const IconPlay = createIcon('play');
+const IconPause = createIcon('pause');
+const IconUpload = createIcon('upload');
+const IconTrash = createIcon('trash-2');
+const IconEye = createIcon('eye');
+const IconX = createIcon('x');
+const IconLoader = createIcon('loader');
+const IconCopy = createIcon('copy');
+const IconCheck = createIcon('check');
+const IconFile = createIcon('file-audio');
+const IconRefresh = createIcon('refresh-cw');
+
+// ============================================================
+// Toast
+// ============================================================
+function Toast({ message, type = 'success', onClose }) {
+    useEffect(() => { const t = setTimeout(onClose, 3000); return () => clearTimeout(t); }, []);
+    const bg = type === 'error' ? 'bg-red-500' : type === 'warning' ? 'bg-yellow-500' : 'bg-green-500';
+    return (
+        <div className={`fixed top-4 right-4 z-50 ${bg} text-white px-4 py-3 rounded-lg shadow-lg fade-in flex items-center gap-2`}>
+            <span>{message}</span>
+            <button onClick={onClose} className="ml-2 hover:opacity-80"><IconX className="w-4 h-4" /></button>
+        </div>
+    );
+}
+
+// ============================================================
+// StatusBadge
+// ============================================================
+function StatusBadge({ status }) {
+    const map = {
+        PENDING:    { label: '대기중', cls: 'badge badge-warning badge-sm' },
+        PROCESSING: { label: '처리중', cls: 'badge badge-info badge-sm' },
+        COMPLETED:  { label: '완료',   cls: 'badge badge-success badge-sm' },
+        FAILED:     { label: '실패',   cls: 'badge badge-error badge-sm' },
+    };
+    const s = map[status] || { label: status, cls: 'badge badge-ghost badge-sm' };
+    return <span className={s.cls}>{s.label}</span>;
+}
+
+// ============================================================
+// RecordingPanel - 브라우저 녹음
+// ============================================================
+function RecordingPanel({ onComplete, onCancel }) {
+    const [isRecording, setIsRecording] = useState(false);
+    const [isPaused, setIsPaused] = useState(false);
+    const [seconds, setSeconds] = useState(0);
+    const [title, setTitle] = useState('');
+    const [audioLevel, setAudioLevel] = useState(0);
+
+    const mediaRecorderRef = useRef(null);
+    const chunksRef = useRef([]);
+    const streamRef = useRef(null);
+    const timerRef = useRef(null);
+    const analyserRef = useRef(null);
+    const animFrameRef = useRef(null);
+
+    const formatTime = (s) => {
+        const m = Math.floor(s / 60);
+        const sec = s % 60;
+        return `${String(m).padStart(2,'0')}:${String(sec).padStart(2,'0')}`;
+    };
+
+    const startRecording = async () => {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            streamRef.current = stream;
+
+            // 오디오 레벨 분석
+            const audioCtx = new AudioContext();
+            const source = audioCtx.createMediaStreamSource(stream);
+            const analyser = audioCtx.createAnalyser();
+            analyser.fftSize = 256;
+            source.connect(analyser);
+            analyserRef.current = analyser;
+
+            const updateLevel = () => {
+                const data = new Uint8Array(analyser.frequencyBinCount);
+                analyser.getByteFrequencyData(data);
+                const avg = data.reduce((a, b) => a + b, 0) / data.length;
+                setAudioLevel(avg / 255);
+                animFrameRef.current = requestAnimationFrame(updateLevel);
+            };
+            updateLevel();
+
+            const mediaRecorder = new MediaRecorder(stream, {
+                mimeType: MediaRecorder.isTypeSupported('audio/webm;codecs=opus')
+                    ? 'audio/webm;codecs=opus' : 'audio/webm'
+            });
+            mediaRecorderRef.current = mediaRecorder;
+            chunksRef.current = [];
+
+            mediaRecorder.ondataavailable = (e) => {
+                if (e.data.size > 0) chunksRef.current.push(e.data);
+            };
+
+            mediaRecorder.onstop = () => {
+                const blob = new Blob(chunksRef.current, { type: 'audio/webm' });
+                const reader = new FileReader();
+                reader.onloadend = () => {
+                    onComplete({
+                        title: title || '무제 음성녹음',
+                        audioBase64: reader.result,
+                        duration: seconds,
+                    });
+                };
+                reader.readAsDataURL(blob);
+                cleanup();
+            };
+
+            mediaRecorder.start(1000);
+            setIsRecording(true);
+            setSeconds(0);
+            timerRef.current = setInterval(() => setSeconds(s => s + 1), 1000);
+        } catch (err) {
+            alert('마이크 접근 권한이 필요합니다. 브라우저 설정을 확인해주세요.');
+        }
+    };
+
+    const stopRecording = () => {
+        if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
+            mediaRecorderRef.current.stop();
+        }
+        setIsRecording(false);
+        setIsPaused(false);
+    };
+
+    const togglePause = () => {
+        if (!mediaRecorderRef.current) return;
+        if (isPaused) {
+            mediaRecorderRef.current.resume();
+            timerRef.current = setInterval(() => setSeconds(s => s + 1), 1000);
+        } else {
+            mediaRecorderRef.current.pause();
+            clearInterval(timerRef.current);
+        }
+        setIsPaused(!isPaused);
+    };
+
+    const cleanup = () => {
+        clearInterval(timerRef.current);
+        if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
+        if (streamRef.current) {
+            streamRef.current.getTracks().forEach(t => t.stop());
+        }
+    };
+
+    const handleCancel = () => {
+        if (isRecording && mediaRecorderRef.current) {
+            mediaRecorderRef.current.ondataavailable = null;
+            mediaRecorderRef.current.onstop = null;
+            if (mediaRecorderRef.current.state !== 'inactive') {
+                mediaRecorderRef.current.stop();
+            }
+        }
+        cleanup();
+        setIsRecording(false);
+        setIsPaused(false);
+        setSeconds(0);
+        onCancel();
+    };
+
+    useEffect(() => { return () => cleanup(); }, []);
+
+    // 파형 바 생성
+    const bars = Array.from({ length: 24 }, (_, i) => {
+        const h = isRecording && !isPaused
+            ? Math.max(4, audioLevel * 40 + Math.random() * 12)
+            : 4;
+        return h;
+    });
+
+    return (
+        <div className="card bg-base-100 shadow-sm border mb-4">
+            <div className="card-body p-4">
+                <div className="flex items-center justify-between mb-3">
+                    <h3 className="font-semibold text-base">녹음</h3>
+                    <button onClick={handleCancel} className="btn btn-ghost btn-xs"><IconX className="w-4 h-4" /></button>
+                </div>
+
+                <div className="mb-3">
+                    <input
+                        type="text" value={title} onChange={e => setTitle(e.target.value)}
+                        placeholder="녹음 제목을 입력하세요" disabled={isRecording}
+                        className="input input-bordered input-sm w-full"
+                    />
+                </div>
+
+                {/* 파형 */}
+                <div className="flex items-center justify-center gap-[2px] h-12 mb-3 bg-base-200 rounded-lg px-2">
+                    {bars.map((h, i) => (
+                        <div key={i} className="waveform-bar w-1.5 rounded-full"
+                             style={{
+                                 height: `${h}px`,
+                                 backgroundColor: isRecording ? (isPaused ? '#f59e0b' : '#ef4444') : '#d1d5db'
+                             }} />
+                    ))}
+                </div>
+
+                {/* 타이머 + 상태 */}
+                <div className="text-center mb-3">
+                    <span className={`text-2xl font-mono font-bold ${isRecording ? 'text-red-500' : ''}`}>
+                        {formatTime(seconds)}
+                    </span>
+                    {isRecording && (
+                        <span className="ml-2 recording-pulse text-red-500 text-sm">
+                            {isPaused ? '일시정지' : '녹음중'}
+                        </span>
+                    )}
+                </div>
+
+                {/* 버튼 */}
+                <div className="flex justify-center gap-2">
+                    {!isRecording ? (
+                        <button onClick={startRecording} className="btn btn-error btn-sm gap-1">
+                            <IconMic className="w-4 h-4" /> 녹음 시작
+                        </button>
+                    ) : (
+                        <>
+                            <button onClick={togglePause} className="btn btn-warning btn-sm gap-1">
+                                {isPaused ? <><IconPlay className="w-4 h-4" /> 재개</> : <><IconPause className="w-4 h-4" /> 일시정지</>}
+                            </button>
+                            <button onClick={stopRecording} className="btn btn-neutral btn-sm gap-1">
+                                <IconSquare className="w-4 h-4" /> 녹음 완료
+                            </button>
+                        </>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// ============================================================
+// FileUploadPanel - 파일 업로드
+// ============================================================
+function FileUploadPanel({ onComplete, onCancel }) {
+    const [title, setTitle] = useState('');
+    const [file, setFile] = useState(null);
+    const [dragOver, setDragOver] = useState(false);
+    const [uploading, setUploading] = useState(false);
+    const fileInputRef = useRef(null);
+
+    const acceptTypes = '.webm,.wav,.mp3,.ogg,.m4a,.mp4';
+
+    const handleDrop = (e) => {
+        e.preventDefault();
+        setDragOver(false);
+        const f = e.dataTransfer.files[0];
+        if (f) setFile(f);
+    };
+
+    const handleSubmit = async () => {
+        if (!file) return;
+        setUploading(true);
+        try {
+            const formData = new FormData();
+            formData.append('audio_file', file);
+            formData.append('title', title || file.name);
+            const result = await api.upload(`${BASE_URL}/upload`, formData);
+            onComplete(result);
+        } catch (err) {
+            onComplete({ success: false, message: err.message });
+        }
+        setUploading(false);
+    };
+
+    return (
+        <div className="card bg-base-100 shadow-sm border mb-4">
+            <div className="card-body p-4">
+                <div className="flex items-center justify-between mb-3">
+                    <h3 className="font-semibold text-base">파일 업로드</h3>
+                    <button onClick={onCancel} className="btn btn-ghost btn-xs"><IconX className="w-4 h-4" /></button>
+                </div>
+
+                <div className="mb-3">
+                    <input
+                        type="text" value={title} onChange={e => setTitle(e.target.value)}
+                        placeholder="제목 (비워두면 파일명 사용)"
+                        className="input input-bordered input-sm w-full"
+                    />
+                </div>
+
+                <div
+                    className={`drop-zone rounded-lg p-6 text-center cursor-pointer mb-3 ${dragOver ? 'drag-over' : ''}`}
+                    onDragOver={e => { e.preventDefault(); setDragOver(true); }}
+                    onDragLeave={() => setDragOver(false)}
+                    onDrop={handleDrop}
+                    onClick={() => fileInputRef.current?.click()}
+                >
+                    <input ref={fileInputRef} type="file" accept={acceptTypes} className="hidden"
+                           onChange={e => setFile(e.target.files[0])} />
+                    {file ? (
+                        <div className="flex items-center justify-center gap-2">
+                            <IconFile className="w-5 h-5 text-blue-500" />
+                            <span className="text-sm font-medium">{file.name}</span>
+                            <span className="text-xs text-gray-500">({(file.size / 1024 / 1024).toFixed(1)} MB)</span>
+                        </div>
+                    ) : (
+                        <div>
+                            <IconUpload className="w-8 h-8 mx-auto text-gray-400 mb-2" />
+                            <p className="text-sm text-gray-500">파일을 드래그하거나 클릭하여 선택</p>
+                            <p className="text-xs text-gray-400 mt-1">webm, wav, mp3, ogg, m4a, mp4 (최대 100MB)</p>
+                        </div>
+                    )}
+                </div>
+
+                <div className="flex justify-end gap-2">
+                    <button onClick={onCancel} className="btn btn-ghost btn-sm">취소</button>
+                    <button onClick={handleSubmit} disabled={!file || uploading}
+                            className="btn btn-primary btn-sm gap-1">
+                        {uploading ? <><IconLoader className="w-4 h-4 animate-spin" /> 처리중...</>
+                                   : <><IconUpload className="w-4 h-4" /> 업로드 및 분석</>}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// ============================================================
+// DetailModal - 상세 보기
+// ============================================================
+function DetailModal({ recording, onClose }) {
+    const [copied, setCopied] = useState(null);
+
+    const copyText = (text, field) => {
+        navigator.clipboard.writeText(text).then(() => {
+            setCopied(field);
+            setTimeout(() => setCopied(null), 2000);
+        });
+    };
+
+    if (!recording) return null;
+
+    return (
+        <div className="modal-overlay fixed inset-0 z-50 flex items-center justify-center" onClick={onClose}>
+            <div className="bg-base-100 rounded-xl shadow-2xl w-full max-w-3xl max-h-[85vh] flex flex-col mx-4 fade-in"
+                 onClick={e => e.stopPropagation()}>
+                {/* Header */}
+                <div className="flex items-center justify-between p-4 border-b">
+                    <div>
+                        <h3 className="font-bold text-lg">{recording.title}</h3>
+                        <div className="flex items-center gap-2 mt-1 text-sm text-gray-500">
+                            <StatusBadge status={recording.status} />
+                            {recording.formatted_duration && <span>{recording.formatted_duration}</span>}
+                            <span>{new Date(recording.created_at).toLocaleString('ko-KR')}</span>
+                        </div>
+                    </div>
+                    <button onClick={onClose} className="btn btn-ghost btn-sm btn-circle"><IconX className="w-5 h-5" /></button>
+                </div>
+
+                {/* Body */}
+                <div className="overflow-y-auto flex-1 p-4 space-y-4">
+                    {/* 녹취록 */}
+                    {recording.transcript_text && (
+                        <div>
+                            <div className="flex items-center justify-between mb-2">
+                                <h4 className="font-semibold text-sm text-gray-600">녹취록</h4>
+                                <button onClick={() => copyText(recording.transcript_text, 'transcript')}
+                                        className="btn btn-ghost btn-xs gap-1">
+                                    {copied === 'transcript' ? <><IconCheck className="w-3 h-3" /> 복사됨</> : <><IconCopy className="w-3 h-3" /> 복사</>}
+                                </button>
+                            </div>
+                            <div className="bg-base-200 rounded-lg p-3 text-sm whitespace-pre-wrap max-h-48 overflow-y-auto">
+                                {recording.transcript_text}
+                            </div>
+                        </div>
+                    )}
+
+                    {/* AI 분석 결과 */}
+                    {recording.analysis_text && (
+                        <div>
+                            <div className="flex items-center justify-between mb-2">
+                                <h4 className="font-semibold text-sm text-gray-600">AI 분석 결과</h4>
+                                <button onClick={() => copyText(recording.analysis_text, 'analysis')}
+                                        className="btn btn-ghost btn-xs gap-1">
+                                    {copied === 'analysis' ? <><IconCheck className="w-3 h-3" /> 복사됨</> : <><IconCopy className="w-3 h-3" /> 복사</>}
+                                </button>
+                            </div>
+                            <div className="bg-blue-50 rounded-lg p-3 text-sm whitespace-pre-wrap max-h-96 overflow-y-auto prose prose-sm max-w-none">
+                                {recording.analysis_text}
+                            </div>
+                        </div>
+                    )}
+
+                    {recording.status === 'PROCESSING' && (
+                        <div className="text-center py-8">
+                            <IconLoader className="w-8 h-8 animate-spin mx-auto text-blue-500 mb-2" />
+                            <p className="text-sm text-gray-500">음성을 분석하고 있습니다...</p>
+                        </div>
+                    )}
+
+                    {recording.status === 'FAILED' && (
+                        <div className="text-center py-8">
+                            <p className="text-sm text-red-500">처리 중 오류가 발생했습니다.</p>
+                        </div>
+                    )}
+                </div>
+
+                {/* Footer */}
+                <div className="flex justify-end p-4 border-t">
+                    <button onClick={onClose} className="btn btn-sm">닫기</button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// ============================================================
+// App
+// ============================================================
+function App() {
+    const [recordings, setRecordings] = useState([]);
+    const [pagination, setPagination] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [search, setSearch] = useState('');
+    const [statusFilter, setStatusFilter] = useState('');
+    const [page, setPage] = useState(1);
+
+    const [showRecorder, setShowRecorder] = useState(false);
+    const [showUploader, setShowUploader] = useState(false);
+    const [processing, setProcessing] = useState(false);
+    const [selectedRecording, setSelectedRecording] = useState(null);
+    const [toast, setToast] = useState(null);
+
+    const pollingRef = useRef({});
+
+    const showToast = (message, type = 'success') => setToast({ message, type });
+
+    // 목록 조회
+    const fetchList = useCallback(async () => {
+        setLoading(true);
+        try {
+            const params = new URLSearchParams();
+            if (search) params.set('search', search);
+            if (statusFilter) params.set('status', statusFilter);
+            params.set('per_page', '10');
+            params.set('page', page);
+            const res = await api.get(`${BASE_URL}/list?${params}`);
+            if (res.success) {
+                setRecordings(res.data.data || []);
+                setPagination({
+                    current_page: res.data.current_page,
+                    last_page: res.data.last_page,
+                    total: res.data.total,
+                });
+                // PROCESSING 상태인 항목 폴링 시작
+                (res.data.data || []).forEach(r => {
+                    if (r.status === 'PROCESSING') startPolling(r.id);
+                });
+            }
+        } catch (err) {
+            showToast('목록 조회 실패: ' + err.message, 'error');
+        }
+        setLoading(false);
+    }, [search, statusFilter, page]);
+
+    useEffect(() => { fetchList(); }, [fetchList]);
+
+    // 폴링
+    const startPolling = (id) => {
+        if (pollingRef.current[id]) return;
+        pollingRef.current[id] = setInterval(async () => {
+            try {
+                const res = await api.get(`${BASE_URL}/${id}/status`);
+                if (res.success && !res.data.is_processing) {
+                    clearInterval(pollingRef.current[id]);
+                    delete pollingRef.current[id];
+                    fetchList();
+                    if (res.data.is_completed) {
+                        showToast('음성 분석이 완료되었습니다.');
+                    }
+                }
+            } catch {
+                clearInterval(pollingRef.current[id]);
+                delete pollingRef.current[id];
+            }
+        }, 5000);
+    };
+
+    useEffect(() => {
+        return () => {
+            Object.values(pollingRef.current).forEach(clearInterval);
+        };
+    }, []);
+
+    // 녹음 완료
+    const handleRecordingComplete = async ({ title, audioBase64, duration }) => {
+        setShowRecorder(false);
+        setProcessing(true);
+        try {
+            // 1. 레코드 생성
+            const createRes = await api.post(BASE_URL, { title });
+            if (!createRes.success) throw new Error(createRes.message);
+
+            const recordingId = createRes.data.id;
+            showToast('녹음이 저장되었습니다. 분석을 시작합니다...');
+
+            // 목록 새로고침
+            await fetchList();
+
+            // 2. 오디오 처리 (비동기)
+            api.post(`${BASE_URL}/${recordingId}/process`, {
+                audio: audioBase64,
+                duration: duration,
+            }).then(() => {
+                fetchList();
+            }).catch(err => {
+                showToast('분석 처리 실패: ' + err.message, 'error');
+                fetchList();
+            });
+
+            startPolling(recordingId);
+        } catch (err) {
+            showToast('녹음 저장 실패: ' + err.message, 'error');
+        }
+        setProcessing(false);
+    };
+
+    // 파일 업로드 완료
+    const handleUploadComplete = (result) => {
+        setShowUploader(false);
+        if (result.success) {
+            showToast(result.message || '파일 업로드 및 분석이 완료되었습니다.');
+        } else {
+            showToast(result.message || '업로드 실패', 'error');
+        }
+        fetchList();
+    };
+
+    // 상세 보기
+    const handleView = async (id) => {
+        try {
+            const res = await api.get(`${BASE_URL}/${id}`);
+            if (res.success) setSelectedRecording(res.data);
+        } catch (err) {
+            showToast('상세 조회 실패: ' + err.message, 'error');
+        }
+    };
+
+    // 삭제
+    const handleDelete = async (id) => {
+        if (!confirm('정말 삭제하시겠습니까?')) return;
+        try {
+            await api.del(`${BASE_URL}/${id}`);
+            showToast('삭제되었습니다.');
+            fetchList();
+        } catch (err) {
+            showToast('삭제 실패: ' + err.message, 'error');
+        }
+    };
+
+    const formatDate = (d) => d ? new Date(d).toLocaleString('ko-KR', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }) : '-';
+    const formatDuration = (s) => {
+        if (!s) return '-';
+        const m = Math.floor(s / 60);
+        const sec = s % 60;
+        return `${String(m).padStart(2,'0')}:${String(sec).padStart(2,'0')}`;
+    };
+
+    return (
+        <div className="p-4 max-w-6xl mx-auto">
+            {toast && <Toast {...toast} onClose={() => setToast(null)} />}
+
+            {/* 헤더 */}
+            <div className="flex items-center justify-between mb-4">
+                <h1 className="text-xl font-bold">AI 음성녹음</h1>
+                <div className="flex gap-2">
+                    <button onClick={() => { setShowRecorder(!showRecorder); setShowUploader(false); }}
+                            className={`btn btn-sm gap-1 ${showRecorder ? 'btn-error' : 'btn-primary'}`}>
+                        <IconMic className="w-4 h-4" /> {showRecorder ? '녹음 닫기' : '새 녹음'}
+                    </button>
+                    <button onClick={() => { setShowUploader(!showUploader); setShowRecorder(false); }}
+                            className={`btn btn-sm gap-1 ${showUploader ? 'btn-warning' : 'btn-outline'}`}>
+                        <IconUpload className="w-4 h-4" /> {showUploader ? '업로드 닫기' : '파일 업로드'}
+                    </button>
+                </div>
+            </div>
+
+            {/* 녹음 패널 */}
+            {showRecorder && (
+                <RecordingPanel
+                    onComplete={handleRecordingComplete}
+                    onCancel={() => setShowRecorder(false)}
+                />
+            )}
+
+            {/* 업로드 패널 */}
+            {showUploader && (
+                <FileUploadPanel
+                    onComplete={handleUploadComplete}
+                    onCancel={() => setShowUploader(false)}
+                />
+            )}
+
+            {/* 검색/필터 */}
+            <div className="flex items-center gap-2 mb-4">
+                <input
+                    type="text" value={search}
+                    onChange={e => { setSearch(e.target.value); setPage(1); }}
+                    placeholder="제목, 내용 검색..."
+                    className="input input-bordered input-sm flex-1 max-w-xs"
+                />
+                <select value={statusFilter} onChange={e => { setStatusFilter(e.target.value); setPage(1); }}
+                        className="select select-bordered select-sm">
+                    <option value="">전체 상태</option>
+                    <option value="PENDING">대기중</option>
+                    <option value="PROCESSING">처리중</option>
+                    <option value="COMPLETED">완료</option>
+                    <option value="FAILED">실패</option>
+                </select>
+                <button onClick={fetchList} className="btn btn-ghost btn-sm"><IconRefresh className="w-4 h-4" /></button>
+            </div>
+
+            {/* 테이블 */}
+            <div className="card bg-base-100 shadow-sm border">
+                <div className="overflow-x-auto">
+                    <table className="table table-sm">
+                        <thead>
+                            <tr>
+                                <th>제목</th>
+                                <th className="text-center w-20">녹음시간</th>
+                                <th className="text-center w-20">상태</th>
+                                <th className="text-center w-28">작성자</th>
+                                <th className="text-center w-32">생성일시</th>
+                                <th className="text-center w-28">액션</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {loading ? (
+                                <tr><td colSpan="6" className="text-center py-8">
+                                    <IconLoader className="w-6 h-6 animate-spin mx-auto" />
+                                </td></tr>
+                            ) : recordings.length === 0 ? (
+                                <tr><td colSpan="6" className="text-center py-8 text-gray-400">
+                                    녹음 데이터가 없습니다.
+                                </td></tr>
+                            ) : recordings.map(r => (
+                                <tr key={r.id} className="hover">
+                                    <td>
+                                        <span className="font-medium cursor-pointer hover:text-blue-600"
+                                              onClick={() => handleView(r.id)}>
+                                            {r.title}
+                                        </span>
+                                    </td>
+                                    <td className="text-center font-mono text-sm">{formatDuration(r.duration_seconds)}</td>
+                                    <td className="text-center">
+                                        <StatusBadge status={r.status} />
+                                        {r.status === 'PROCESSING' && (
+                                            <IconLoader className="w-3 h-3 animate-spin inline ml-1" />
+                                        )}
+                                    </td>
+                                    <td className="text-center text-sm">{r.user?.name || '-'}</td>
+                                    <td className="text-center text-sm">{formatDate(r.created_at)}</td>
+                                    <td className="text-center">
+                                        <div className="flex justify-center gap-1">
+                                            <button onClick={() => handleView(r.id)}
+                                                    className="btn btn-ghost btn-xs" title="상세보기">
+                                                <IconEye className="w-4 h-4" />
+                                            </button>
+                                            <button onClick={() => handleDelete(r.id)}
+                                                    className="btn btn-ghost btn-xs text-red-500" title="삭제">
+                                                <IconTrash className="w-4 h-4" />
+                                            </button>
+                                        </div>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+
+                {/* 페이지네이션 */}
+                {pagination && pagination.last_page > 1 && (
+                    <div className="flex items-center justify-between p-3 border-t">
+                        <span className="text-sm text-gray-500">
+                            총 {pagination.total}건
+                        </span>
+                        <div className="join">
+                            {Array.from({ length: pagination.last_page }, (_, i) => i + 1).map(p => (
+                                <button key={p}
+                                        onClick={() => setPage(p)}
+                                        className={`join-item btn btn-xs ${p === pagination.current_page ? 'btn-active' : ''}`}>
+                                    {p}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            {/* 상세 모달 */}
+            {selectedRecording && (
+                <DetailModal
+                    recording={selectedRecording}
+                    onClose={() => setSelectedRecording(null)}
+                />
+            )}
+        </div>
+    );
+}
+
+// ============================================================
+// Mount
+// ============================================================
+const root = ReactDOM.createRoot(document.getElementById('ai-voice-recording-root'));
+root.render(<App />);
+</script>
+@endverbatim
+@endpush
diff --git a/routes/web.php b/routes/web.php
index 12a40bf5..06a71d36 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -35,6 +35,7 @@
 use App\Http\Controllers\Sales\SalesProductController;
 use App\Http\Controllers\System\AiConfigController;
 use App\Http\Controllers\System\AiTokenUsageController;
+use App\Http\Controllers\System\AiVoiceRecordingController;
 use App\Http\Controllers\System\HolidayController;
 use App\Http\Controllers\Stats\StatDashboardController;
 use App\Http\Controllers\System\SystemAlertController;
@@ -411,6 +412,18 @@
         Route::get('/list', [AiTokenUsageController::class, 'list'])->name('list');
     });
 
+    // AI 음성녹음 관리
+    Route::prefix('system/ai-voice-recording')->name('system.ai-voice-recording.')->group(function () {
+        Route::get('/', [AiVoiceRecordingController::class, 'index'])->name('index');
+        Route::get('/list', [AiVoiceRecordingController::class, 'list'])->name('list');
+        Route::post('/', [AiVoiceRecordingController::class, 'store'])->name('store');
+        Route::post('/upload', [AiVoiceRecordingController::class, 'uploadFile'])->name('upload');
+        Route::get('/{id}', [AiVoiceRecordingController::class, 'show'])->name('show');
+        Route::post('/{id}/process', [AiVoiceRecordingController::class, 'processAudio'])->name('process');
+        Route::delete('/{id}', [AiVoiceRecordingController::class, 'destroy'])->name('destroy');
+        Route::get('/{id}/status', [AiVoiceRecordingController::class, 'status'])->name('status');
+    });
+
     // 명함 OCR API
     Route::post('/api/business-card-ocr', [BusinessCardOcrController::class, 'process'])->name('api.business-card-ocr');
 

From 31dc453f68893155cd5ab15f230d560d6954b215 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 12:58:24 +0900
Subject: [PATCH 07/31] =?UTF-8?q?fix:AI=20=EC=9D=8C=EC=84=B1=EB=85=B9?=
 =?UTF-8?q?=EC=9D=8C=20React=20=EC=8A=A4=EC=BD=94=ED=94=84=20=EC=B6=A9?=
 =?UTF-8?q?=EB=8F=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 전역 Toast 등 컴포넌트명 충돌 방지를 위해 IIFE로 감싸기

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 resources/views/system/ai-voice-recording/index.blade.php | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/resources/views/system/ai-voice-recording/index.blade.php b/resources/views/system/ai-voice-recording/index.blade.php
index 7e979102..721fa787 100644
--- a/resources/views/system/ai-voice-recording/index.blade.php
+++ b/resources/views/system/ai-voice-recording/index.blade.php
@@ -26,6 +26,7 @@
 <script src="https://unpkg.com/lucide@latest?v={{ time() }}"></script>
 @verbatim
 <script type="text/babel">
+(function() {
 const { useState, useEffect, useRef, useCallback } = React;
 
 const CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]')?.content;
@@ -793,6 +794,7 @@ className={`join-item btn btn-xs ${p === pagination.current_page ? 'btn-active'
 // ============================================================
 const root = ReactDOM.createRoot(document.getElementById('ai-voice-recording-root'));
 root.render(<App />);
+})();
 </script>
 @endverbatim
 @endpush

From 031bcf8a4c017eb6ae3d064d4a7fa065b1fd9989 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 13:06:17 +0900
Subject: [PATCH 08/31] =?UTF-8?q?refactor:AI=20=EC=9D=8C=EC=84=B1=EB=85=B9?=
 =?UTF-8?q?=EC=9D=8C=20UI=20=EC=A0=84=EB=A9=B4=20=EC=9E=AC=EC=84=A4?=
 =?UTF-8?q?=EA=B3=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Canvas 기반 실시간 파형 시각화 (Web Audio API)
- 원형 녹음 버튼 (보라→빨강→녹색 상태 전환)
- 저장 진행률 오버레이 (프로그레스바 + 애니메이션)
- 카드형 목록 (호버 액션, 상태 아이콘)
- 탭 기반 상세 모달 (AI 분석 / 녹취록 원문)
- 파일 업로드 드래그&드롭 개선
- 검색/필터 UI 개선
- 전체 IIFE 스코프 격리

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../system/ai-voice-recording/index.blade.php | 1255 +++++++++--------
 1 file changed, 687 insertions(+), 568 deletions(-)

diff --git a/resources/views/system/ai-voice-recording/index.blade.php b/resources/views/system/ai-voice-recording/index.blade.php
index 721fa787..91e910e0 100644
--- a/resources/views/system/ai-voice-recording/index.blade.php
+++ b/resources/views/system/ai-voice-recording/index.blade.php
@@ -4,14 +4,18 @@
 
 @push('styles')
 <style>
-    .recording-pulse { animation: pulse 1.5s ease-in-out infinite; }
-    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
-    .waveform-bar { transition: height 0.1s ease; }
-    .fade-in { animation: fadeIn 0.2s ease-in; }
-    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
-    .modal-overlay { background: rgba(0,0,0,0.5); }
-    .drop-zone { border: 2px dashed #d1d5db; transition: all 0.2s; }
-    .drop-zone.drag-over { border-color: #3b82f6; background: #eff6ff; }
+    .rec-pulse { animation: recPulse 1.5s ease-in-out infinite; }
+    @keyframes recPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.08)} }
+    .fade-in { animation: fadeIn .25s ease-out; }
+    @keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
+    .slide-down { animation: slideDown .3s ease-out; }
+    @keyframes slideDown { from{opacity:0;max-height:0} to{opacity:1;max-height:600px} }
+    .progress-shine { background: linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); animation: shine 1.5s infinite; }
+    @keyframes shine { from{transform:translateX(-100%)} to{transform:translateX(100%)} }
+    .drop-zone { border:2px dashed #d1d5db; transition:all .2s; }
+    .drop-zone:hover,.drop-zone.active { border-color:#7c3aed; background:#f5f3ff; }
+    .modal-backdrop { background:rgba(0,0,0,.45); backdrop-filter:blur(2px); }
+    .ring-recording { box-shadow:0 0 0 6px rgba(239,68,68,.25); }
 </style>
 @endpush
 
@@ -27,378 +31,485 @@
 @verbatim
 <script type="text/babel">
 (function() {
-const { useState, useEffect, useRef, useCallback } = React;
+const { useState, useEffect, useRef, useCallback, useMemo } = React;
 
-const CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]')?.content;
-const BASE_URL = '/system/ai-voice-recording';
+const CSRF = document.querySelector('meta[name="csrf-token"]')?.content;
+const API = '/system/ai-voice-recording';
 
-// ============================================================
-// API
-// ============================================================
-const api = {
-    headers: () => ({
-        'Content-Type': 'application/json',
-        'X-CSRF-TOKEN': CSRF_TOKEN,
-        'Accept': 'application/json',
-    }),
-    async get(url) {
-        const res = await fetch(url, { headers: this.headers() });
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        return res.json();
-    },
-    async post(url, data) {
-        const res = await fetch(url, { method: 'POST', headers: this.headers(), body: JSON.stringify(data) });
-        if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error(err.message || `HTTP ${res.status}`); }
-        return res.json();
-    },
-    async del(url) {
-        const res = await fetch(url, { method: 'DELETE', headers: this.headers() });
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        return res.json();
-    },
-    async upload(url, formData) {
-        const res = await fetch(url, {
-            method: 'POST',
-            headers: { 'X-CSRF-TOKEN': CSRF_TOKEN, 'Accept': 'application/json' },
-            body: formData,
-        });
-        if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error(err.message || `HTTP ${res.status}`); }
-        return res.json();
-    },
+// ─── fetch helpers ───
+const http = {
+    h: () => ({ 'Content-Type':'application/json','X-CSRF-TOKEN':CSRF,'Accept':'application/json' }),
+    async get(u){ const r=await fetch(u,{headers:this.h()}); if(!r.ok) throw new Error(`HTTP ${r.status}`); return r.json(); },
+    async post(u,d){ const r=await fetch(u,{method:'POST',headers:this.h(),body:JSON.stringify(d)}); if(!r.ok){const e=await r.json().catch(()=>({})); throw new Error(e.message||`HTTP ${r.status}`);} return r.json(); },
+    async del(u){ const r=await fetch(u,{method:'DELETE',headers:this.h()}); if(!r.ok) throw new Error(`HTTP ${r.status}`); return r.json(); },
+    async upload(u,fd){ const r=await fetch(u,{method:'POST',headers:{'X-CSRF-TOKEN':CSRF,'Accept':'application/json'},body:fd}); if(!r.ok){const e=await r.json().catch(()=>({})); throw new Error(e.message||`HTTP ${r.status}`);} return r.json(); },
 };
 
-// ============================================================
-// Lucide
-// ============================================================
-const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
+// ─── Lucide icon helper ───
+const Icon = ({ name, className = 'w-5 h-5', ...p }) => {
     const ref = useRef(null);
     useEffect(() => {
         if (ref.current && lucide.icons[name]) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
-            svg.setAttribute('class', className);
-            ref.current.appendChild(svg);
+            const s = lucide.createElement(lucide.icons[name]);
+            s.setAttribute('class', className);
+            ref.current.appendChild(s);
         }
-    }, [className]);
-    return <span ref={ref} className="inline-flex items-center" {...props} />;
+    }, [name, className]);
+    return <span ref={ref} className="inline-flex items-center justify-center" {...p} />;
 };
 
-const IconMic = createIcon('mic');
-const IconMicOff = createIcon('mic-off');
-const IconSquare = createIcon('square');
-const IconPlay = createIcon('play');
-const IconPause = createIcon('pause');
-const IconUpload = createIcon('upload');
-const IconTrash = createIcon('trash-2');
-const IconEye = createIcon('eye');
-const IconX = createIcon('x');
-const IconLoader = createIcon('loader');
-const IconCopy = createIcon('copy');
-const IconCheck = createIcon('check');
-const IconFile = createIcon('file-audio');
-const IconRefresh = createIcon('refresh-cw');
+// ─── formatters ───
+const fmtTime = s => `${String(Math.floor(s/60)).padStart(2,'0')}:${String(s%60).padStart(2,'0')}`;
+const fmtDate = d => d ? new Date(d).toLocaleString('ko-KR',{year:'numeric',month:'2-digit',day:'2-digit',hour:'2-digit',minute:'2-digit'}) : '-';
 
-// ============================================================
-// Toast
-// ============================================================
-function Toast({ message, type = 'success', onClose }) {
-    useEffect(() => { const t = setTimeout(onClose, 3000); return () => clearTimeout(t); }, []);
-    const bg = type === 'error' ? 'bg-red-500' : type === 'warning' ? 'bg-yellow-500' : 'bg-green-500';
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// ToastContainer
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+function ToastContainer({ items, onRemove }) {
     return (
-        <div className={`fixed top-4 right-4 z-50 ${bg} text-white px-4 py-3 rounded-lg shadow-lg fade-in flex items-center gap-2`}>
-            <span>{message}</span>
-            <button onClick={onClose} className="ml-2 hover:opacity-80"><IconX className="w-4 h-4" /></button>
+        <div className="fixed top-4 right-4 z-[60] space-y-2">
+            {items.map(t => (
+                <div key={t.id} className={`fade-in flex items-center gap-2 px-4 py-3 rounded-lg shadow-lg text-white text-sm
+                    ${t.type==='error'?'bg-red-500':t.type==='warning'?'bg-amber-500':'bg-emerald-500'}`}>
+                    <Icon name={t.type==='error'?'alert-circle':t.type==='warning'?'alert-triangle':'check-circle'} className="w-4 h-4 flex-shrink-0" />
+                    <span className="flex-1">{t.msg}</span>
+                    <button onClick={()=>onRemove(t.id)} className="ml-1 opacity-70 hover:opacity-100"><Icon name="x" className="w-3.5 h-3.5" /></button>
+                </div>
+            ))}
         </div>
     );
 }
 
-// ============================================================
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 // StatusBadge
-// ============================================================
-function StatusBadge({ status }) {
-    const map = {
-        PENDING:    { label: '대기중', cls: 'badge badge-warning badge-sm' },
-        PROCESSING: { label: '처리중', cls: 'badge badge-info badge-sm' },
-        COMPLETED:  { label: '완료',   cls: 'badge badge-success badge-sm' },
-        FAILED:     { label: '실패',   cls: 'badge badge-error badge-sm' },
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+function StatusBadge({ status, size = 'sm' }) {
+    const m = {
+        PENDING:    { l:'대기중', bg:'bg-gray-100 text-gray-600', dot:'bg-gray-400' },
+        PROCESSING: { l:'분석중', bg:'bg-blue-50 text-blue-700', dot:'bg-blue-500' },
+        COMPLETED:  { l:'완료',   bg:'bg-emerald-50 text-emerald-700', dot:'bg-emerald-500' },
+        FAILED:     { l:'실패',   bg:'bg-red-50 text-red-600', dot:'bg-red-500' },
     };
-    const s = map[status] || { label: status, cls: 'badge badge-ghost badge-sm' };
-    return <span className={s.cls}>{s.label}</span>;
+    const s = m[status] || { l:status, bg:'bg-gray-100 text-gray-500', dot:'bg-gray-400' };
+    const sz = size === 'sm' ? 'text-xs px-2 py-0.5' : 'text-sm px-2.5 py-1';
+    return (
+        <span className={`inline-flex items-center gap-1.5 rounded-full font-medium ${s.bg} ${sz}`}>
+            <span className={`w-1.5 h-1.5 rounded-full ${s.dot} ${status==='PROCESSING'?'animate-pulse':''}`}/>
+            {s.l}
+        </span>
+    );
 }
 
-// ============================================================
-// RecordingPanel - 브라우저 녹음
-// ============================================================
-function RecordingPanel({ onComplete, onCancel }) {
-    const [isRecording, setIsRecording] = useState(false);
-    const [isPaused, setIsPaused] = useState(false);
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// RecorderWidget - Canvas 파형 + 원형 버튼
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+function RecorderWidget({ onDone }) {
+    const [phase, setPhase] = useState('idle');        // idle | recording | paused | saving
     const [seconds, setSeconds] = useState(0);
     const [title, setTitle] = useState('');
-    const [audioLevel, setAudioLevel] = useState(0);
+    const [saveProgress, setSaveProgress] = useState(0);
 
-    const mediaRecorderRef = useRef(null);
+    const canvasRef = useRef(null);
+    const mediaRef = useRef(null);
     const chunksRef = useRef([]);
     const streamRef = useRef(null);
-    const timerRef = useRef(null);
     const analyserRef = useRef(null);
-    const animFrameRef = useRef(null);
+    const audioCtxRef = useRef(null);
+    const timerRef = useRef(null);
+    const rafRef = useRef(null);
 
-    const formatTime = (s) => {
-        const m = Math.floor(s / 60);
-        const sec = s % 60;
-        return `${String(m).padStart(2,'0')}:${String(sec).padStart(2,'0')}`;
-    };
+    // Canvas 파형 그리기
+    const drawWaveform = useCallback(() => {
+        const canvas = canvasRef.current;
+        const analyser = analyserRef.current;
+        if (!canvas || !analyser) return;
+
+        const ctx = canvas.getContext('2d');
+        const W = canvas.width = canvas.offsetWidth * 2;
+        const H = canvas.height = canvas.offsetHeight * 2;
+        ctx.scale(2, 2);
+        const w = W / 2, h = H / 2;
+
+        const data = new Uint8Array(analyser.frequencyBinCount);
+        analyser.getByteTimeDomainData(data);
+
+        ctx.clearRect(0, 0, w, h);
+
+        // 중앙 기준선
+        ctx.strokeStyle = '#e5e7eb';
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(0, h/2);
+        ctx.lineTo(w, h/2);
+        ctx.stroke();
+
+        // 파형
+        ctx.strokeStyle = '#7c3aed';
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        const sliceW = w / data.length;
+        for (let i = 0; i < data.length; i++) {
+            const v = data[i] / 128.0;
+            const y = v * h / 2;
+            i === 0 ? ctx.moveTo(0, y) : ctx.lineTo(i * sliceW, y);
+        }
+        ctx.stroke();
+
+        rafRef.current = requestAnimationFrame(drawWaveform);
+    }, []);
 
     const startRecording = async () => {
         try {
             const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
             streamRef.current = stream;
 
-            // 오디오 레벨 분석
             const audioCtx = new AudioContext();
+            audioCtxRef.current = audioCtx;
             const source = audioCtx.createMediaStreamSource(stream);
             const analyser = audioCtx.createAnalyser();
-            analyser.fftSize = 256;
+            analyser.fftSize = 2048;
             source.connect(analyser);
             analyserRef.current = analyser;
 
-            const updateLevel = () => {
-                const data = new Uint8Array(analyser.frequencyBinCount);
-                analyser.getByteFrequencyData(data);
-                const avg = data.reduce((a, b) => a + b, 0) / data.length;
-                setAudioLevel(avg / 255);
-                animFrameRef.current = requestAnimationFrame(updateLevel);
-            };
-            updateLevel();
-
-            const mediaRecorder = new MediaRecorder(stream, {
-                mimeType: MediaRecorder.isTypeSupported('audio/webm;codecs=opus')
-                    ? 'audio/webm;codecs=opus' : 'audio/webm'
+            const mr = new MediaRecorder(stream, {
+                mimeType: MediaRecorder.isTypeSupported('audio/webm;codecs=opus') ? 'audio/webm;codecs=opus' : 'audio/webm'
             });
-            mediaRecorderRef.current = mediaRecorder;
+            mediaRef.current = mr;
             chunksRef.current = [];
 
-            mediaRecorder.ondataavailable = (e) => {
-                if (e.data.size > 0) chunksRef.current.push(e.data);
-            };
+            mr.ondataavailable = e => { if (e.data.size > 0) chunksRef.current.push(e.data); };
+            mr.start(1000);
 
-            mediaRecorder.onstop = () => {
-                const blob = new Blob(chunksRef.current, { type: 'audio/webm' });
-                const reader = new FileReader();
-                reader.onloadend = () => {
-                    onComplete({
-                        title: title || '무제 음성녹음',
-                        audioBase64: reader.result,
-                        duration: seconds,
-                    });
-                };
-                reader.readAsDataURL(blob);
-                cleanup();
-            };
-
-            mediaRecorder.start(1000);
-            setIsRecording(true);
+            setPhase('recording');
             setSeconds(0);
             timerRef.current = setInterval(() => setSeconds(s => s + 1), 1000);
-        } catch (err) {
-            alert('마이크 접근 권한이 필요합니다. 브라우저 설정을 확인해주세요.');
+            drawWaveform();
+        } catch {
+            alert('마이크 접근 권한이 필요합니다.\n브라우저 주소창의 자물쇠 아이콘에서 마이크를 허용해주세요.');
         }
     };
 
-    const stopRecording = () => {
-        if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
-            mediaRecorderRef.current.stop();
-        }
-        setIsRecording(false);
-        setIsPaused(false);
-    };
-
-    const togglePause = () => {
-        if (!mediaRecorderRef.current) return;
-        if (isPaused) {
-            mediaRecorderRef.current.resume();
-            timerRef.current = setInterval(() => setSeconds(s => s + 1), 1000);
-        } else {
-            mediaRecorderRef.current.pause();
+    const pauseRecording = () => {
+        if (mediaRef.current?.state === 'recording') {
+            mediaRef.current.pause();
             clearInterval(timerRef.current);
+            if (rafRef.current) cancelAnimationFrame(rafRef.current);
+            setPhase('paused');
         }
-        setIsPaused(!isPaused);
+    };
+
+    const resumeRecording = () => {
+        if (mediaRef.current?.state === 'paused') {
+            mediaRef.current.resume();
+            timerRef.current = setInterval(() => setSeconds(s => s + 1), 1000);
+            drawWaveform();
+            setPhase('recording');
+        }
+    };
+
+    const stopAndSave = () => {
+        if (!mediaRef.current || mediaRef.current.state === 'inactive') return;
+
+        clearInterval(timerRef.current);
+        if (rafRef.current) cancelAnimationFrame(rafRef.current);
+
+        const duration = seconds;
+
+        mediaRef.current.onstop = () => {
+            const blob = new Blob(chunksRef.current, { type: 'audio/webm' });
+            const reader = new FileReader();
+            reader.onloadend = async () => {
+                setPhase('saving');
+                setSaveProgress(0);
+
+                // 프로그레스 시뮬레이션
+                const iv = setInterval(() => setSaveProgress(p => Math.min(p + Math.random()*12, 90)), 300);
+
+                try {
+                    const create = await http.post(API, { title: title || '무제 음성녹음' });
+                    if (!create.success) throw new Error(create.message);
+
+                    setSaveProgress(40);
+
+                    // 비동기 처리 시작
+                    http.post(`${API}/${create.data.id}/process`, {
+                        audio: reader.result,
+                        duration,
+                    }).catch(() => {});
+
+                    clearInterval(iv);
+                    setSaveProgress(100);
+
+                    setTimeout(() => {
+                        cleanup();
+                        setPhase('idle');
+                        setSeconds(0);
+                        setTitle('');
+                        setSaveProgress(0);
+                        onDone(create.data.id);
+                    }, 600);
+                } catch (err) {
+                    clearInterval(iv);
+                    alert('저장 실패: ' + err.message);
+                    setPhase('idle');
+                    setSaveProgress(0);
+                }
+            };
+            reader.readAsDataURL(blob);
+        };
+
+        mediaRef.current.stop();
+        streamRef.current?.getTracks().forEach(t => t.stop());
+    };
+
+    const cancelRecording = () => {
+        clearInterval(timerRef.current);
+        if (rafRef.current) cancelAnimationFrame(rafRef.current);
+        if (mediaRef.current && mediaRef.current.state !== 'inactive') {
+            mediaRef.current.onstop = null;
+            mediaRef.current.ondataavailable = null;
+            mediaRef.current.stop();
+        }
+        cleanup();
+        setPhase('idle');
+        setSeconds(0);
     };
 
     const cleanup = () => {
-        clearInterval(timerRef.current);
-        if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
-        if (streamRef.current) {
-            streamRef.current.getTracks().forEach(t => t.stop());
-        }
+        streamRef.current?.getTracks().forEach(t => t.stop());
+        audioCtxRef.current?.close().catch(()=>{});
     };
 
-    const handleCancel = () => {
-        if (isRecording && mediaRecorderRef.current) {
-            mediaRecorderRef.current.ondataavailable = null;
-            mediaRecorderRef.current.onstop = null;
-            if (mediaRecorderRef.current.state !== 'inactive') {
-                mediaRecorderRef.current.stop();
-            }
-        }
-        cleanup();
-        setIsRecording(false);
-        setIsPaused(false);
-        setSeconds(0);
-        onCancel();
-    };
+    useEffect(() => () => { cleanup(); clearInterval(timerRef.current); if(rafRef.current) cancelAnimationFrame(rafRef.current); }, []);
 
-    useEffect(() => { return () => cleanup(); }, []);
-
-    // 파형 바 생성
-    const bars = Array.from({ length: 24 }, (_, i) => {
-        const h = isRecording && !isPaused
-            ? Math.max(4, audioLevel * 40 + Math.random() * 12)
-            : 4;
-        return h;
-    });
+    const isActive = phase === 'recording' || phase === 'paused';
 
     return (
-        <div className="card bg-base-100 shadow-sm border mb-4">
-            <div className="card-body p-4">
-                <div className="flex items-center justify-between mb-3">
-                    <h3 className="font-semibold text-base">녹음</h3>
-                    <button onClick={handleCancel} className="btn btn-ghost btn-xs"><IconX className="w-4 h-4" /></button>
+        <div className="bg-white border border-gray-200 rounded-xl overflow-hidden relative fade-in">
+            {/* 저장중 오버레이 */}
+            {phase === 'saving' && (
+                <div className="absolute inset-0 z-20 bg-white/95 flex flex-col items-center justify-center gap-4">
+                    <div className="p-4 bg-purple-100 rounded-full">
+                        <Icon name="cloud-upload" className="w-8 h-8 text-purple-600 animate-pulse" />
+                    </div>
+                    <div className="text-center">
+                        <p className="font-medium text-gray-800">녹음을 저장하고 있습니다</p>
+                        <p className="text-sm text-gray-500 mt-1">잠시만 기다려주세요...</p>
+                    </div>
+                    <div className="w-48 bg-gray-200 rounded-full h-2 overflow-hidden">
+                        <div className="h-full bg-purple-600 rounded-full transition-all duration-300 relative"
+                             style={{ width: `${saveProgress}%` }}>
+                            <div className="absolute inset-0 progress-shine" />
+                        </div>
+                    </div>
                 </div>
+            )}
 
-                <div className="mb-3">
-                    <input
-                        type="text" value={title} onChange={e => setTitle(e.target.value)}
-                        placeholder="녹음 제목을 입력하세요" disabled={isRecording}
-                        className="input input-bordered input-sm w-full"
-                    />
-                </div>
-
-                {/* 파형 */}
-                <div className="flex items-center justify-center gap-[2px] h-12 mb-3 bg-base-200 rounded-lg px-2">
-                    {bars.map((h, i) => (
-                        <div key={i} className="waveform-bar w-1.5 rounded-full"
-                             style={{
-                                 height: `${h}px`,
-                                 backgroundColor: isRecording ? (isPaused ? '#f59e0b' : '#ef4444') : '#d1d5db'
-                             }} />
-                    ))}
-                </div>
-
-                {/* 타이머 + 상태 */}
-                <div className="text-center mb-3">
-                    <span className={`text-2xl font-mono font-bold ${isRecording ? 'text-red-500' : ''}`}>
-                        {formatTime(seconds)}
-                    </span>
-                    {isRecording && (
-                        <span className="ml-2 recording-pulse text-red-500 text-sm">
-                            {isPaused ? '일시정지' : '녹음중'}
+            {/* 헤더 */}
+            <div className="flex items-center justify-between px-5 py-3 border-b border-gray-100">
+                <div className="flex items-center gap-2">
+                    <Icon name="mic" className="w-4 h-4 text-purple-600" />
+                    <span className="font-semibold text-gray-800 text-sm">음성 녹음</span>
+                    {phase === 'recording' && (
+                        <span className="flex items-center gap-1 px-2 py-0.5 bg-red-100 text-red-600 text-xs font-medium rounded-full">
+                            <span className="w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse" />
+                            녹음 중
                         </span>
                     )}
+                    {phase === 'paused' && (
+                        <span className="px-2 py-0.5 bg-amber-100 text-amber-600 text-xs font-medium rounded-full">일시정지</span>
+                    )}
+                </div>
+                {!isActive && phase !== 'saving' && (
+                    <button onClick={cancelRecording} className="text-gray-400 hover:text-gray-600 transition-colors">
+                        <Icon name="x" className="w-4 h-4" />
+                    </button>
+                )}
+            </div>
+
+            <div className="px-5 py-4 space-y-4">
+                {/* 제목 입력 */}
+                {!isActive && phase !== 'saving' && (
+                    <input type="text" value={title} onChange={e => setTitle(e.target.value)}
+                        placeholder="녹음 제목을 입력하세요 (선택)"
+                        className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-300 focus:border-purple-400 transition" />
+                )}
+
+                {/* Canvas 파형 */}
+                <div className="relative bg-gray-50 rounded-lg overflow-hidden" style={{ height: '80px' }}>
+                    <canvas ref={canvasRef} className="w-full h-full" />
+                    {isActive && (
+                        <div className="absolute top-2 right-2 flex items-center gap-1.5 bg-red-500 text-white px-2 py-0.5 rounded-full text-xs font-medium">
+                            <span className="w-1.5 h-1.5 bg-white rounded-full animate-pulse" />
+                            {fmtTime(seconds)}
+                        </div>
+                    )}
+                    {phase === 'idle' && (
+                        <div className="absolute inset-0 flex items-center justify-center">
+                            <span className="text-gray-400 text-sm">마이크 버튼을 눌러 녹음을 시작하세요</span>
+                        </div>
+                    )}
                 </div>
 
-                {/* 버튼 */}
-                <div className="flex justify-center gap-2">
-                    {!isRecording ? (
-                        <button onClick={startRecording} className="btn btn-error btn-sm gap-1">
-                            <IconMic className="w-4 h-4" /> 녹음 시작
+                {/* 타이머 (녹음중에만) */}
+                {isActive && (
+                    <div className="text-center">
+                        <span className="text-3xl font-mono font-bold text-gray-800 tracking-wider">{fmtTime(seconds)}</span>
+                    </div>
+                )}
+
+                {/* 컨트롤 버튼 */}
+                <div className="flex items-center justify-center gap-4">
+                    {phase === 'idle' && (
+                        <button onClick={startRecording}
+                            className="flex items-center justify-center w-16 h-16 rounded-full bg-purple-600 hover:bg-purple-700 text-white shadow-lg transition-all transform hover:scale-105 active:scale-95">
+                            <Icon name="mic" className="w-7 h-7" />
                         </button>
-                    ) : (
+                    )}
+
+                    {phase === 'recording' && (
                         <>
-                            <button onClick={togglePause} className="btn btn-warning btn-sm gap-1">
-                                {isPaused ? <><IconPlay className="w-4 h-4" /> 재개</> : <><IconPause className="w-4 h-4" /> 일시정지</>}
+                            <button onClick={pauseRecording}
+                                className="flex items-center justify-center w-11 h-11 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700 transition-all">
+                                <Icon name="pause" className="w-5 h-5" />
                             </button>
-                            <button onClick={stopRecording} className="btn btn-neutral btn-sm gap-1">
-                                <IconSquare className="w-4 h-4" /> 녹음 완료
+                            <button onClick={stopAndSave}
+                                className="flex items-center justify-center w-16 h-16 rounded-full bg-red-500 hover:bg-red-600 text-white shadow-lg ring-recording transition-all transform hover:scale-105 active:scale-95 rec-pulse">
+                                <Icon name="square" className="w-6 h-6" />
+                            </button>
+                            <button onClick={cancelRecording}
+                                className="flex items-center justify-center w-11 h-11 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700 transition-all">
+                                <Icon name="x" className="w-5 h-5" />
+                            </button>
+                        </>
+                    )}
+
+                    {phase === 'paused' && (
+                        <>
+                            <button onClick={resumeRecording}
+                                className="flex items-center justify-center w-11 h-11 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700 transition-all">
+                                <Icon name="play" className="w-5 h-5" />
+                            </button>
+                            <button onClick={stopAndSave}
+                                className="flex items-center justify-center w-16 h-16 rounded-full bg-emerald-500 hover:bg-emerald-600 text-white shadow-lg transition-all transform hover:scale-105 active:scale-95">
+                                <Icon name="check" className="w-7 h-7" />
+                            </button>
+                            <button onClick={cancelRecording}
+                                className="flex items-center justify-center w-11 h-11 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700 transition-all">
+                                <Icon name="x" className="w-5 h-5" />
                             </button>
                         </>
                     )}
                 </div>
+
+                {/* 안내 */}
+                <p className="text-center text-xs text-gray-400">
+                    {phase === 'idle' && '보라색 버튼을 눌러 녹음을 시작합니다'}
+                    {phase === 'recording' && '빨간 정지 버튼을 누르면 녹음이 저장됩니다'}
+                    {phase === 'paused' && '재생 버튼으로 이어서 녹음하거나, 체크 버튼으로 저장합니다'}
+                </p>
             </div>
         </div>
     );
 }
 
-// ============================================================
-// FileUploadPanel - 파일 업로드
-// ============================================================
-function FileUploadPanel({ onComplete, onCancel }) {
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// FileUploadWidget
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+function FileUploadWidget({ onDone, onCancel }) {
     const [title, setTitle] = useState('');
     const [file, setFile] = useState(null);
     const [dragOver, setDragOver] = useState(false);
     const [uploading, setUploading] = useState(false);
-    const fileInputRef = useRef(null);
+    const [progress, setProgress] = useState(0);
+    const inputRef = useRef(null);
 
-    const acceptTypes = '.webm,.wav,.mp3,.ogg,.m4a,.mp4';
+    const handleDrop = e => { e.preventDefault(); setDragOver(false); if(e.dataTransfer.files[0]) setFile(e.dataTransfer.files[0]); };
 
-    const handleDrop = (e) => {
-        e.preventDefault();
-        setDragOver(false);
-        const f = e.dataTransfer.files[0];
-        if (f) setFile(f);
-    };
-
-    const handleSubmit = async () => {
+    const submit = async () => {
         if (!file) return;
         setUploading(true);
+        setProgress(0);
+        const iv = setInterval(() => setProgress(p => Math.min(p + Math.random()*10, 90)), 400);
         try {
-            const formData = new FormData();
-            formData.append('audio_file', file);
-            formData.append('title', title || file.name);
-            const result = await api.upload(`${BASE_URL}/upload`, formData);
-            onComplete(result);
+            const fd = new FormData();
+            fd.append('audio_file', file);
+            fd.append('title', title || file.name.replace(/\.[^.]+$/, ''));
+            const res = await http.upload(`${API}/upload`, fd);
+            clearInterval(iv);
+            setProgress(100);
+            setTimeout(() => onDone(res), 400);
         } catch (err) {
-            onComplete({ success: false, message: err.message });
+            clearInterval(iv);
+            setUploading(false);
+            setProgress(0);
+            alert('업로드 실패: ' + err.message);
         }
-        setUploading(false);
     };
 
     return (
-        <div className="card bg-base-100 shadow-sm border mb-4">
-            <div className="card-body p-4">
-                <div className="flex items-center justify-between mb-3">
-                    <h3 className="font-semibold text-base">파일 업로드</h3>
-                    <button onClick={onCancel} className="btn btn-ghost btn-xs"><IconX className="w-4 h-4" /></button>
+        <div className="bg-white border border-gray-200 rounded-xl overflow-hidden relative fade-in">
+            {uploading && (
+                <div className="absolute inset-0 z-20 bg-white/95 flex flex-col items-center justify-center gap-4">
+                    <div className="p-4 bg-blue-100 rounded-full">
+                        <Icon name="cloud-upload" className="w-8 h-8 text-blue-600 animate-pulse" />
+                    </div>
+                    <p className="font-medium text-gray-800">파일을 업로드하고 분석 중입니다</p>
+                    <p className="text-sm text-gray-500">음성 인식과 AI 분석이 완료되면 알려드립니다</p>
+                    <div className="w-48 bg-gray-200 rounded-full h-2 overflow-hidden">
+                        <div className="h-full bg-blue-600 rounded-full transition-all duration-300 relative" style={{width:`${progress}%`}}>
+                            <div className="absolute inset-0 progress-shine" />
+                        </div>
+                    </div>
                 </div>
+            )}
 
-                <div className="mb-3">
-                    <input
-                        type="text" value={title} onChange={e => setTitle(e.target.value)}
-                        placeholder="제목 (비워두면 파일명 사용)"
-                        className="input input-bordered input-sm w-full"
-                    />
+            <div className="flex items-center justify-between px-5 py-3 border-b border-gray-100">
+                <div className="flex items-center gap-2">
+                    <Icon name="upload" className="w-4 h-4 text-blue-600" />
+                    <span className="font-semibold text-gray-800 text-sm">파일 업로드</span>
                 </div>
+                <button onClick={onCancel} className="text-gray-400 hover:text-gray-600"><Icon name="x" className="w-4 h-4" /></button>
+            </div>
 
-                <div
-                    className={`drop-zone rounded-lg p-6 text-center cursor-pointer mb-3 ${dragOver ? 'drag-over' : ''}`}
-                    onDragOver={e => { e.preventDefault(); setDragOver(true); }}
-                    onDragLeave={() => setDragOver(false)}
+            <div className="px-5 py-4 space-y-3">
+                <input type="text" value={title} onChange={e=>setTitle(e.target.value)}
+                    placeholder="제목 (비워두면 파일명 사용)"
+                    className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-blue-400 transition" />
+
+                <div className={`drop-zone rounded-lg p-8 text-center cursor-pointer ${dragOver?'active':''}`}
+                    onDragOver={e=>{e.preventDefault();setDragOver(true)}}
+                    onDragLeave={()=>setDragOver(false)}
                     onDrop={handleDrop}
-                    onClick={() => fileInputRef.current?.click()}
-                >
-                    <input ref={fileInputRef} type="file" accept={acceptTypes} className="hidden"
-                           onChange={e => setFile(e.target.files[0])} />
+                    onClick={()=>inputRef.current?.click()}>
+                    <input ref={inputRef} type="file" accept=".webm,.wav,.mp3,.ogg,.m4a,.mp4" className="hidden"
+                        onChange={e=>setFile(e.target.files[0])} />
                     {file ? (
-                        <div className="flex items-center justify-center gap-2">
-                            <IconFile className="w-5 h-5 text-blue-500" />
-                            <span className="text-sm font-medium">{file.name}</span>
-                            <span className="text-xs text-gray-500">({(file.size / 1024 / 1024).toFixed(1)} MB)</span>
+                        <div className="space-y-2">
+                            <div className="inline-flex items-center justify-center w-12 h-12 bg-blue-100 rounded-full">
+                                <Icon name="file-audio" className="w-6 h-6 text-blue-600" />
+                            </div>
+                            <p className="font-medium text-gray-800 text-sm">{file.name}</p>
+                            <p className="text-xs text-gray-500">{(file.size/1024/1024).toFixed(1)} MB</p>
+                            <button onClick={e=>{e.stopPropagation();setFile(null)}}
+                                className="text-xs text-red-500 hover:text-red-700">파일 변경</button>
                         </div>
                     ) : (
-                        <div>
-                            <IconUpload className="w-8 h-8 mx-auto text-gray-400 mb-2" />
-                            <p className="text-sm text-gray-500">파일을 드래그하거나 클릭하여 선택</p>
-                            <p className="text-xs text-gray-400 mt-1">webm, wav, mp3, ogg, m4a, mp4 (최대 100MB)</p>
+                        <div className="space-y-2">
+                            <div className="inline-flex items-center justify-center w-12 h-12 bg-gray-100 rounded-full">
+                                <Icon name="upload" className="w-6 h-6 text-gray-400" />
+                            </div>
+                            <p className="text-sm text-gray-500">파일을 드래그하거나 <span className="text-purple-600 font-medium">클릭</span>하여 선택</p>
+                            <p className="text-xs text-gray-400">webm, wav, mp3, ogg, m4a, mp4 (최대 100MB)</p>
                         </div>
                     )}
                 </div>
 
-                <div className="flex justify-end gap-2">
-                    <button onClick={onCancel} className="btn btn-ghost btn-sm">취소</button>
-                    <button onClick={handleSubmit} disabled={!file || uploading}
-                            className="btn btn-primary btn-sm gap-1">
-                        {uploading ? <><IconLoader className="w-4 h-4 animate-spin" /> 처리중...</>
-                                   : <><IconUpload className="w-4 h-4" /> 업로드 및 분석</>}
+                <div className="flex justify-end">
+                    <button onClick={submit} disabled={!file || uploading}
+                        className="inline-flex items-center gap-1.5 px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 text-white text-sm font-medium rounded-lg transition">
+                        <Icon name="sparkles" className="w-4 h-4" /> 업로드 및 AI 분석
                     </button>
                 </div>
             </div>
@@ -406,392 +517,400 @@ className="btn btn-primary btn-sm gap-1">
     );
 }
 
-// ============================================================
-// DetailModal - 상세 보기
-// ============================================================
-function DetailModal({ recording, onClose }) {
-    const [copied, setCopied] = useState(null);
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// RecordingCard - 목록 아이템
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+function RecordingCard({ item, onView, onDelete }) {
+    return (
+        <div className="flex items-center gap-4 px-4 py-3 hover:bg-gray-50 transition-colors border-b border-gray-100 last:border-b-0 group">
+            {/* 아이콘 */}
+            <div className={`flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center
+                ${item.status==='COMPLETED'?'bg-emerald-100':item.status==='PROCESSING'?'bg-blue-100':item.status==='FAILED'?'bg-red-100':'bg-gray-100'}`}>
+                <Icon name={item.status==='COMPLETED'?'check-circle':item.status==='PROCESSING'?'loader':item.status==='FAILED'?'alert-circle':'clock'}
+                    className={`w-5 h-5 ${item.status==='COMPLETED'?'text-emerald-600':item.status==='PROCESSING'?'text-blue-600 animate-spin':item.status==='FAILED'?'text-red-500':'text-gray-400'}`} />
+            </div>
 
-    const copyText = (text, field) => {
-        navigator.clipboard.writeText(text).then(() => {
-            setCopied(field);
-            setTimeout(() => setCopied(null), 2000);
-        });
+            {/* 정보 */}
+            <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                    <span className="font-medium text-gray-800 text-sm truncate cursor-pointer hover:text-purple-600 transition-colors"
+                          onClick={()=>onView(item.id)}>{item.title}</span>
+                    <StatusBadge status={item.status} />
+                </div>
+                <div className="flex items-center gap-3 mt-0.5 text-xs text-gray-400">
+                    {item.duration_seconds > 0 && (
+                        <span className="flex items-center gap-1"><Icon name="clock" className="w-3 h-3" />{fmtTime(item.duration_seconds)}</span>
+                    )}
+                    <span>{item.user?.name || '-'}</span>
+                    <span>{fmtDate(item.created_at)}</span>
+                </div>
+            </div>
+
+            {/* 액션 */}
+            <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                {item.status === 'COMPLETED' && (
+                    <button onClick={()=>onView(item.id)}
+                        className="px-2.5 py-1 text-xs font-medium text-purple-700 bg-purple-50 hover:bg-purple-100 rounded-lg transition-colors">
+                        결과 보기
+                    </button>
+                )}
+                <button onClick={()=>onDelete(item.id)}
+                    className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors">
+                    <Icon name="trash-2" className="w-4 h-4" />
+                </button>
+            </div>
+        </div>
+    );
+}
+
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// DetailModal
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+function DetailModal({ data, onClose }) {
+    const [copied, setCopied] = useState(null);
+    const [tab, setTab] = useState('analysis');
+
+    const copy = (text, key) => {
+        navigator.clipboard.writeText(text).then(() => { setCopied(key); setTimeout(()=>setCopied(null), 2000); });
     };
 
-    if (!recording) return null;
+    if (!data) return null;
 
     return (
-        <div className="modal-overlay fixed inset-0 z-50 flex items-center justify-center" onClick={onClose}>
-            <div className="bg-base-100 rounded-xl shadow-2xl w-full max-w-3xl max-h-[85vh] flex flex-col mx-4 fade-in"
-                 onClick={e => e.stopPropagation()}>
+        <div className="modal-backdrop fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onClose}>
+            <div className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-[85vh] flex flex-col fade-in" onClick={e=>e.stopPropagation()}>
                 {/* Header */}
-                <div className="flex items-center justify-between p-4 border-b">
-                    <div>
-                        <h3 className="font-bold text-lg">{recording.title}</h3>
-                        <div className="flex items-center gap-2 mt-1 text-sm text-gray-500">
-                            <StatusBadge status={recording.status} />
-                            {recording.formatted_duration && <span>{recording.formatted_duration}</span>}
-                            <span>{new Date(recording.created_at).toLocaleString('ko-KR')}</span>
+                <div className="px-6 py-4 border-b border-gray-100">
+                    <div className="flex items-start justify-between">
+                        <div>
+                            <h3 className="font-bold text-lg text-gray-900">{data.title}</h3>
+                            <div className="flex items-center gap-2 mt-1.5">
+                                <StatusBadge status={data.status} />
+                                {data.duration_seconds > 0 && (
+                                    <span className="text-xs text-gray-500 flex items-center gap-1">
+                                        <Icon name="clock" className="w-3 h-3" /> {fmtTime(data.duration_seconds)}
+                                    </span>
+                                )}
+                                <span className="text-xs text-gray-400">{fmtDate(data.created_at)}</span>
+                            </div>
                         </div>
+                        <button onClick={onClose} className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors">
+                            <Icon name="x" className="w-5 h-5 text-gray-400" />
+                        </button>
                     </div>
-                    <button onClick={onClose} className="btn btn-ghost btn-sm btn-circle"><IconX className="w-5 h-5" /></button>
+
+                    {/* 탭 */}
+                    {data.status === 'COMPLETED' && (
+                        <div className="flex gap-1 mt-3 bg-gray-100 rounded-lg p-1">
+                            <button onClick={()=>setTab('analysis')}
+                                className={`flex-1 text-xs font-medium py-1.5 rounded-md transition-colors ${tab==='analysis'?'bg-white text-purple-700 shadow-sm':'text-gray-500 hover:text-gray-700'}`}>
+                                AI 분석 결과
+                            </button>
+                            <button onClick={()=>setTab('transcript')}
+                                className={`flex-1 text-xs font-medium py-1.5 rounded-md transition-colors ${tab==='transcript'?'bg-white text-purple-700 shadow-sm':'text-gray-500 hover:text-gray-700'}`}>
+                                녹취록 원문
+                            </button>
+                        </div>
+                    )}
                 </div>
 
                 {/* Body */}
-                <div className="overflow-y-auto flex-1 p-4 space-y-4">
-                    {/* 녹취록 */}
-                    {recording.transcript_text && (
+                <div className="flex-1 overflow-y-auto px-6 py-4">
+                    {data.status === 'PROCESSING' && (
+                        <div className="flex flex-col items-center justify-center py-12 gap-3">
+                            <div className="p-4 bg-blue-50 rounded-full"><Icon name="loader" className="w-8 h-8 text-blue-500 animate-spin" /></div>
+                            <p className="font-medium text-gray-700">음성을 분석하고 있습니다</p>
+                            <p className="text-sm text-gray-400">STT 변환 및 AI 분석이 진행 중입니다...</p>
+                        </div>
+                    )}
+
+                    {data.status === 'FAILED' && (
+                        <div className="flex flex-col items-center justify-center py-12 gap-3">
+                            <div className="p-4 bg-red-50 rounded-full"><Icon name="alert-circle" className="w-8 h-8 text-red-400" /></div>
+                            <p className="font-medium text-gray-700">처리 중 오류가 발생했습니다</p>
+                            <p className="text-sm text-gray-400">다시 시도하거나 관리자에게 문의해주세요</p>
+                        </div>
+                    )}
+
+                    {data.status === 'PENDING' && (
+                        <div className="flex flex-col items-center justify-center py-12 gap-3">
+                            <div className="p-4 bg-gray-50 rounded-full"><Icon name="clock" className="w-8 h-8 text-gray-400" /></div>
+                            <p className="font-medium text-gray-700">처리 대기 중입니다</p>
+                        </div>
+                    )}
+
+                    {data.status === 'COMPLETED' && tab === 'analysis' && data.analysis_text && (
                         <div>
-                            <div className="flex items-center justify-between mb-2">
-                                <h4 className="font-semibold text-sm text-gray-600">녹취록</h4>
-                                <button onClick={() => copyText(recording.transcript_text, 'transcript')}
-                                        className="btn btn-ghost btn-xs gap-1">
-                                    {copied === 'transcript' ? <><IconCheck className="w-3 h-3" /> 복사됨</> : <><IconCopy className="w-3 h-3" /> 복사</>}
+                            <div className="flex justify-end mb-2">
+                                <button onClick={()=>copy(data.analysis_text,'a')}
+                                    className="inline-flex items-center gap-1 text-xs text-gray-500 hover:text-purple-600 transition-colors">
+                                    <Icon name={copied==='a'?'check':'copy'} className="w-3.5 h-3.5" />
+                                    {copied==='a'?'복사됨':'복사'}
                                 </button>
                             </div>
-                            <div className="bg-base-200 rounded-lg p-3 text-sm whitespace-pre-wrap max-h-48 overflow-y-auto">
-                                {recording.transcript_text}
+                            <div className="prose prose-sm max-w-none text-gray-700 whitespace-pre-wrap leading-relaxed">
+                                {data.analysis_text}
                             </div>
                         </div>
                     )}
 
-                    {/* AI 분석 결과 */}
-                    {recording.analysis_text && (
+                    {data.status === 'COMPLETED' && tab === 'transcript' && data.transcript_text && (
                         <div>
-                            <div className="flex items-center justify-between mb-2">
-                                <h4 className="font-semibold text-sm text-gray-600">AI 분석 결과</h4>
-                                <button onClick={() => copyText(recording.analysis_text, 'analysis')}
-                                        className="btn btn-ghost btn-xs gap-1">
-                                    {copied === 'analysis' ? <><IconCheck className="w-3 h-3" /> 복사됨</> : <><IconCopy className="w-3 h-3" /> 복사</>}
+                            <div className="flex justify-end mb-2">
+                                <button onClick={()=>copy(data.transcript_text,'t')}
+                                    className="inline-flex items-center gap-1 text-xs text-gray-500 hover:text-purple-600 transition-colors">
+                                    <Icon name={copied==='t'?'check':'copy'} className="w-3.5 h-3.5" />
+                                    {copied==='t'?'복사됨':'복사'}
                                 </button>
                             </div>
-                            <div className="bg-blue-50 rounded-lg p-3 text-sm whitespace-pre-wrap max-h-96 overflow-y-auto prose prose-sm max-w-none">
-                                {recording.analysis_text}
+                            <div className="bg-gray-50 rounded-lg p-4 text-sm text-gray-700 whitespace-pre-wrap leading-relaxed">
+                                {data.transcript_text}
                             </div>
                         </div>
                     )}
-
-                    {recording.status === 'PROCESSING' && (
-                        <div className="text-center py-8">
-                            <IconLoader className="w-8 h-8 animate-spin mx-auto text-blue-500 mb-2" />
-                            <p className="text-sm text-gray-500">음성을 분석하고 있습니다...</p>
-                        </div>
-                    )}
-
-                    {recording.status === 'FAILED' && (
-                        <div className="text-center py-8">
-                            <p className="text-sm text-red-500">처리 중 오류가 발생했습니다.</p>
-                        </div>
-                    )}
                 </div>
 
                 {/* Footer */}
-                <div className="flex justify-end p-4 border-t">
-                    <button onClick={onClose} className="btn btn-sm">닫기</button>
+                <div className="px-6 py-3 border-t border-gray-100 bg-gray-50 rounded-b-2xl flex justify-end">
+                    <button onClick={onClose}
+                        className="px-4 py-1.5 text-sm font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-200 rounded-lg transition-colors">
+                        닫기
+                    </button>
                 </div>
             </div>
         </div>
     );
 }
 
-// ============================================================
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 // App
-// ============================================================
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 function App() {
-    const [recordings, setRecordings] = useState([]);
-    const [pagination, setPagination] = useState(null);
+    const [items, setItems] = useState([]);
+    const [paging, setPaging] = useState(null);
     const [loading, setLoading] = useState(true);
     const [search, setSearch] = useState('');
-    const [statusFilter, setStatusFilter] = useState('');
+    const [status, setStatus] = useState('');
     const [page, setPage] = useState(1);
 
-    const [showRecorder, setShowRecorder] = useState(false);
-    const [showUploader, setShowUploader] = useState(false);
-    const [processing, setProcessing] = useState(false);
-    const [selectedRecording, setSelectedRecording] = useState(null);
-    const [toast, setToast] = useState(null);
-
+    const [mode, setMode] = useState('list'); // list | record | upload
+    const [detail, setDetail] = useState(null);
+    const [toasts, setToasts] = useState([]);
     const pollingRef = useRef({});
+    const toastId = useRef(0);
 
-    const showToast = (message, type = 'success') => setToast({ message, type });
+    const toast = (msg, type='success') => {
+        const id = ++toastId.current;
+        setToasts(ts => [...ts, { id, msg, type }]);
+        setTimeout(() => setToasts(ts => ts.filter(t => t.id !== id)), 4000);
+    };
 
-    // 목록 조회
-    const fetchList = useCallback(async () => {
-        setLoading(true);
+    // Fetch list
+    const fetchList = useCallback(async (silent) => {
+        if (!silent) setLoading(true);
         try {
-            const params = new URLSearchParams();
-            if (search) params.set('search', search);
-            if (statusFilter) params.set('status', statusFilter);
-            params.set('per_page', '10');
-            params.set('page', page);
-            const res = await api.get(`${BASE_URL}/list?${params}`);
+            const p = new URLSearchParams();
+            if (search) p.set('search', search);
+            if (status) p.set('status', status);
+            p.set('per_page', '10');
+            p.set('page', page);
+            const res = await http.get(`${API}/list?${p}`);
             if (res.success) {
-                setRecordings(res.data.data || []);
-                setPagination({
-                    current_page: res.data.current_page,
-                    last_page: res.data.last_page,
-                    total: res.data.total,
-                });
-                // PROCESSING 상태인 항목 폴링 시작
-                (res.data.data || []).forEach(r => {
-                    if (r.status === 'PROCESSING') startPolling(r.id);
-                });
+                setItems(res.data.data || []);
+                setPaging({ cur: res.data.current_page, last: res.data.last_page, total: res.data.total });
+                (res.data.data || []).forEach(r => { if(r.status==='PROCESSING') pollItem(r.id); });
             }
-        } catch (err) {
-            showToast('목록 조회 실패: ' + err.message, 'error');
-        }
+        } catch (e) { toast('목록 조회 실패','error'); }
         setLoading(false);
-    }, [search, statusFilter, page]);
+    }, [search, status, page]);
 
     useEffect(() => { fetchList(); }, [fetchList]);
 
-    // 폴링
-    const startPolling = (id) => {
+    // Polling
+    const pollItem = id => {
         if (pollingRef.current[id]) return;
         pollingRef.current[id] = setInterval(async () => {
             try {
-                const res = await api.get(`${BASE_URL}/${id}/status`);
-                if (res.success && !res.data.is_processing) {
+                const r = await http.get(`${API}/${id}/status`);
+                if (r.success && !r.data.is_processing) {
                     clearInterval(pollingRef.current[id]);
                     delete pollingRef.current[id];
-                    fetchList();
-                    if (res.data.is_completed) {
-                        showToast('음성 분석이 완료되었습니다.');
-                    }
+                    fetchList(true);
+                    if (r.data.is_completed) toast('음성 분석이 완료되었습니다');
+                    if (r.data.status === 'FAILED') toast('분석 처리 실패','error');
                 }
-            } catch {
-                clearInterval(pollingRef.current[id]);
-                delete pollingRef.current[id];
-            }
+            } catch { clearInterval(pollingRef.current[id]); delete pollingRef.current[id]; }
         }, 5000);
     };
 
-    useEffect(() => {
-        return () => {
-            Object.values(pollingRef.current).forEach(clearInterval);
-        };
-    }, []);
+    useEffect(() => () => Object.values(pollingRef.current).forEach(clearInterval), []);
 
-    // 녹음 완료
-    const handleRecordingComplete = async ({ title, audioBase64, duration }) => {
-        setShowRecorder(false);
-        setProcessing(true);
-        try {
-            // 1. 레코드 생성
-            const createRes = await api.post(BASE_URL, { title });
-            if (!createRes.success) throw new Error(createRes.message);
-
-            const recordingId = createRes.data.id;
-            showToast('녹음이 저장되었습니다. 분석을 시작합니다...');
-
-            // 목록 새로고침
-            await fetchList();
-
-            // 2. 오디오 처리 (비동기)
-            api.post(`${BASE_URL}/${recordingId}/process`, {
-                audio: audioBase64,
-                duration: duration,
-            }).then(() => {
-                fetchList();
-            }).catch(err => {
-                showToast('분석 처리 실패: ' + err.message, 'error');
-                fetchList();
-            });
-
-            startPolling(recordingId);
-        } catch (err) {
-            showToast('녹음 저장 실패: ' + err.message, 'error');
-        }
-        setProcessing(false);
+    // Handlers
+    const handleRecordDone = (id) => {
+        setMode('list');
+        toast('녹음이 저장되었습니다. AI 분석을 시작합니다...');
+        fetchList(true);
+        pollItem(id);
     };
 
-    // 파일 업로드 완료
-    const handleUploadComplete = (result) => {
-        setShowUploader(false);
-        if (result.success) {
-            showToast(result.message || '파일 업로드 및 분석이 완료되었습니다.');
+    const handleUploadDone = (res) => {
+        setMode('list');
+        if (res.success) {
+            toast(res.message || '업로드 완료');
+            fetchList(true);
+            if (res.data?.id) pollItem(res.data.id);
         } else {
-            showToast(result.message || '업로드 실패', 'error');
+            toast(res.message || '업로드 실패','error');
         }
-        fetchList();
     };
 
-    // 상세 보기
-    const handleView = async (id) => {
+    const handleView = async id => {
         try {
-            const res = await api.get(`${BASE_URL}/${id}`);
-            if (res.success) setSelectedRecording(res.data);
-        } catch (err) {
-            showToast('상세 조회 실패: ' + err.message, 'error');
-        }
+            const r = await http.get(`${API}/${id}`);
+            if (r.success) setDetail(r.data);
+        } catch { toast('조회 실패','error'); }
     };
 
-    // 삭제
-    const handleDelete = async (id) => {
-        if (!confirm('정말 삭제하시겠습니까?')) return;
+    const handleDelete = async id => {
+        if (!confirm('이 녹음을 삭제하시겠습니까?')) return;
         try {
-            await api.del(`${BASE_URL}/${id}`);
-            showToast('삭제되었습니다.');
-            fetchList();
-        } catch (err) {
-            showToast('삭제 실패: ' + err.message, 'error');
-        }
+            await http.del(`${API}/${id}`);
+            toast('삭제되었습니다');
+            fetchList(true);
+        } catch { toast('삭제 실패','error'); }
     };
 
-    const formatDate = (d) => d ? new Date(d).toLocaleString('ko-KR', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }) : '-';
-    const formatDuration = (s) => {
-        if (!s) return '-';
-        const m = Math.floor(s / 60);
-        const sec = s % 60;
-        return `${String(m).padStart(2,'0')}:${String(sec).padStart(2,'0')}`;
-    };
+    const completedCount = items.filter(i => i.status==='COMPLETED').length;
+    const processingCount = items.filter(i => i.status==='PROCESSING').length;
 
     return (
-        <div className="p-4 max-w-6xl mx-auto">
-            {toast && <Toast {...toast} onClose={() => setToast(null)} />}
+        <div className="max-w-4xl mx-auto py-2 px-4">
+            <ToastContainer items={toasts} onRemove={id => setToasts(ts => ts.filter(t => t.id !== id))} />
 
-            {/* 헤더 */}
-            <div className="flex items-center justify-between mb-4">
-                <h1 className="text-xl font-bold">AI 음성녹음</h1>
-                <div className="flex gap-2">
-                    <button onClick={() => { setShowRecorder(!showRecorder); setShowUploader(false); }}
-                            className={`btn btn-sm gap-1 ${showRecorder ? 'btn-error' : 'btn-primary'}`}>
-                        <IconMic className="w-4 h-4" /> {showRecorder ? '녹음 닫기' : '새 녹음'}
+            {/* 페이지 헤더 */}
+            <div className="flex items-center justify-between mb-5">
+                <div>
+                    <h1 className="text-xl font-bold text-gray-900">AI 음성녹음</h1>
+                    <p className="text-sm text-gray-500 mt-0.5">음성을 녹음하거나 파일을 업로드하면 AI가 자동으로 분석합니다</p>
+                </div>
+                <div className="flex items-center gap-2">
+                    <button onClick={() => setMode(mode==='record'?'list':'record')}
+                        className={`inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-all shadow-sm
+                            ${mode==='record'
+                                ? 'bg-red-500 hover:bg-red-600 text-white'
+                                : 'bg-purple-600 hover:bg-purple-700 text-white'}`}>
+                        <Icon name="mic" className="w-4 h-4" />
+                        {mode==='record' ? '녹음 닫기' : '새 녹음'}
                     </button>
-                    <button onClick={() => { setShowUploader(!showUploader); setShowRecorder(false); }}
-                            className={`btn btn-sm gap-1 ${showUploader ? 'btn-warning' : 'btn-outline'}`}>
-                        <IconUpload className="w-4 h-4" /> {showUploader ? '업로드 닫기' : '파일 업로드'}
+                    <button onClick={() => setMode(mode==='upload'?'list':'upload')}
+                        className={`inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-all
+                            ${mode==='upload'
+                                ? 'bg-gray-200 text-gray-700'
+                                : 'bg-white border border-gray-300 text-gray-700 hover:bg-gray-50'}`}>
+                        <Icon name="upload" className="w-4 h-4" />
+                        파일 업로드
                     </button>
                 </div>
             </div>
 
-            {/* 녹음 패널 */}
-            {showRecorder && (
-                <RecordingPanel
-                    onComplete={handleRecordingComplete}
-                    onCancel={() => setShowRecorder(false)}
-                />
+            {/* 녹음/업로드 위젯 */}
+            {mode === 'record' && (
+                <div className="mb-5">
+                    <RecorderWidget onDone={handleRecordDone} />
+                </div>
+            )}
+            {mode === 'upload' && (
+                <div className="mb-5">
+                    <FileUploadWidget onDone={handleUploadDone} onCancel={()=>setMode('list')} />
+                </div>
             )}
 
-            {/* 업로드 패널 */}
-            {showUploader && (
-                <FileUploadPanel
-                    onComplete={handleUploadComplete}
-                    onCancel={() => setShowUploader(false)}
-                />
-            )}
-
-            {/* 검색/필터 */}
-            <div className="flex items-center gap-2 mb-4">
-                <input
-                    type="text" value={search}
-                    onChange={e => { setSearch(e.target.value); setPage(1); }}
-                    placeholder="제목, 내용 검색..."
-                    className="input input-bordered input-sm flex-1 max-w-xs"
-                />
-                <select value={statusFilter} onChange={e => { setStatusFilter(e.target.value); setPage(1); }}
-                        className="select select-bordered select-sm">
-                    <option value="">전체 상태</option>
-                    <option value="PENDING">대기중</option>
-                    <option value="PROCESSING">처리중</option>
-                    <option value="COMPLETED">완료</option>
-                    <option value="FAILED">실패</option>
-                </select>
-                <button onClick={fetchList} className="btn btn-ghost btn-sm"><IconRefresh className="w-4 h-4" /></button>
+            {/* 통계 + 필터 */}
+            <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center gap-3">
+                    {paging && <span className="text-sm text-gray-500">전체 <span className="font-semibold text-gray-800">{paging.total}</span>건</span>}
+                    {processingCount > 0 && (
+                        <span className="flex items-center gap-1 text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full">
+                            <Icon name="loader" className="w-3 h-3 animate-spin" /> {processingCount}건 분석중
+                        </span>
+                    )}
+                </div>
+                <div className="flex items-center gap-2">
+                    <div className="relative">
+                        <Icon name="search" className="w-4 h-4 text-gray-400 absolute left-2.5 top-1/2 -translate-y-1/2" />
+                        <input type="text" value={search}
+                            onChange={e=>{setSearch(e.target.value);setPage(1)}}
+                            placeholder="검색..."
+                            className="pl-8 pr-3 py-1.5 text-sm border border-gray-200 rounded-lg w-44 focus:outline-none focus:ring-2 focus:ring-purple-200 focus:border-purple-400 transition" />
+                    </div>
+                    <select value={status} onChange={e=>{setStatus(e.target.value);setPage(1)}}
+                        className="text-sm border border-gray-200 rounded-lg px-2.5 py-1.5 focus:outline-none focus:ring-2 focus:ring-purple-200 text-gray-600 bg-white">
+                        <option value="">전체</option>
+                        <option value="COMPLETED">완료</option>
+                        <option value="PROCESSING">분석중</option>
+                        <option value="PENDING">대기중</option>
+                        <option value="FAILED">실패</option>
+                    </select>
+                    <button onClick={()=>fetchList()} className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+                        <Icon name="refresh-cw" className="w-4 h-4" />
+                    </button>
+                </div>
             </div>
 
-            {/* 테이블 */}
-            <div className="card bg-base-100 shadow-sm border">
-                <div className="overflow-x-auto">
-                    <table className="table table-sm">
-                        <thead>
-                            <tr>
-                                <th>제목</th>
-                                <th className="text-center w-20">녹음시간</th>
-                                <th className="text-center w-20">상태</th>
-                                <th className="text-center w-28">작성자</th>
-                                <th className="text-center w-32">생성일시</th>
-                                <th className="text-center w-28">액션</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {loading ? (
-                                <tr><td colSpan="6" className="text-center py-8">
-                                    <IconLoader className="w-6 h-6 animate-spin mx-auto" />
-                                </td></tr>
-                            ) : recordings.length === 0 ? (
-                                <tr><td colSpan="6" className="text-center py-8 text-gray-400">
-                                    녹음 데이터가 없습니다.
-                                </td></tr>
-                            ) : recordings.map(r => (
-                                <tr key={r.id} className="hover">
-                                    <td>
-                                        <span className="font-medium cursor-pointer hover:text-blue-600"
-                                              onClick={() => handleView(r.id)}>
-                                            {r.title}
-                                        </span>
-                                    </td>
-                                    <td className="text-center font-mono text-sm">{formatDuration(r.duration_seconds)}</td>
-                                    <td className="text-center">
-                                        <StatusBadge status={r.status} />
-                                        {r.status === 'PROCESSING' && (
-                                            <IconLoader className="w-3 h-3 animate-spin inline ml-1" />
-                                        )}
-                                    </td>
-                                    <td className="text-center text-sm">{r.user?.name || '-'}</td>
-                                    <td className="text-center text-sm">{formatDate(r.created_at)}</td>
-                                    <td className="text-center">
-                                        <div className="flex justify-center gap-1">
-                                            <button onClick={() => handleView(r.id)}
-                                                    className="btn btn-ghost btn-xs" title="상세보기">
-                                                <IconEye className="w-4 h-4" />
-                                            </button>
-                                            <button onClick={() => handleDelete(r.id)}
-                                                    className="btn btn-ghost btn-xs text-red-500" title="삭제">
-                                                <IconTrash className="w-4 h-4" />
-                                            </button>
-                                        </div>
-                                    </td>
-                                </tr>
-                            ))}
-                        </tbody>
-                    </table>
-                </div>
+            {/* 목록 */}
+            <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
+                {loading ? (
+                    <div className="flex items-center justify-center py-16">
+                        <Icon name="loader" className="w-6 h-6 text-gray-300 animate-spin" />
+                    </div>
+                ) : items.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-16 gap-3">
+                        <div className="p-4 bg-gray-50 rounded-full">
+                            <Icon name="mic-off" className="w-8 h-8 text-gray-300" />
+                        </div>
+                        <p className="text-gray-400 text-sm">녹음 데이터가 없습니다</p>
+                        <button onClick={()=>setMode('record')}
+                            className="text-sm text-purple-600 hover:text-purple-700 font-medium">
+                            첫 번째 녹음 시작하기 &rarr;
+                        </button>
+                    </div>
+                ) : (
+                    <div>
+                        {items.map(item => (
+                            <RecordingCard key={item.id} item={item} onView={handleView} onDelete={handleDelete} />
+                        ))}
+                    </div>
+                )}
 
                 {/* 페이지네이션 */}
-                {pagination && pagination.last_page > 1 && (
-                    <div className="flex items-center justify-between p-3 border-t">
-                        <span className="text-sm text-gray-500">
-                            총 {pagination.total}건
-                        </span>
-                        <div className="join">
-                            {Array.from({ length: pagination.last_page }, (_, i) => i + 1).map(p => (
-                                <button key={p}
-                                        onClick={() => setPage(p)}
-                                        className={`join-item btn btn-xs ${p === pagination.current_page ? 'btn-active' : ''}`}>
-                                    {p}
-                                </button>
-                            ))}
-                        </div>
+                {paging && paging.last > 1 && (
+                    <div className="flex items-center justify-center py-3 border-t border-gray-100 gap-1">
+                        <button onClick={()=>setPage(Math.max(1,page-1))} disabled={page===1}
+                            className="p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-30 rounded transition-colors">
+                            <Icon name="chevron-left" className="w-4 h-4" />
+                        </button>
+                        {Array.from({length:paging.last},(_,i)=>i+1).map(p => (
+                            <button key={p} onClick={()=>setPage(p)}
+                                className={`min-w-[28px] h-7 text-xs rounded-md font-medium transition-colors
+                                    ${p===paging.cur?'bg-purple-600 text-white':'text-gray-500 hover:bg-gray-100'}`}>
+                                {p}
+                            </button>
+                        ))}
+                        <button onClick={()=>setPage(Math.min(paging.last,page+1))} disabled={page===paging.last}
+                            className="p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-30 rounded transition-colors">
+                            <Icon name="chevron-right" className="w-4 h-4" />
+                        </button>
                     </div>
                 )}
             </div>
 
             {/* 상세 모달 */}
-            {selectedRecording && (
-                <DetailModal
-                    recording={selectedRecording}
-                    onClose={() => setSelectedRecording(null)}
-                />
-            )}
+            {detail && <DetailModal data={detail} onClose={()=>setDetail(null)} />}
         </div>
     );
 }
 
-// ============================================================
 // Mount
-// ============================================================
 const root = ReactDOM.createRoot(document.getElementById('ai-voice-recording-root'));
 root.render(<App />);
 })();

From af344bcc6066f108ecef06e67a6ff3743ea4094d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 13:15:46 +0900
Subject: [PATCH 09/31] =?UTF-8?q?feat:AI=20=EC=9D=8C=EC=84=B1=EB=85=B9?=
 =?UTF-8?q?=EC=9D=8C=20=EC=8B=A4=EC=8B=9C=EA=B0=84=20=EC=9D=8C=EC=84=B1?=
 =?UTF-8?q?=EC=9D=B8=EC=8B=9D=20=EB=B0=8F=20=EC=B9=B4=ED=85=8C=EA=B3=A0?=
 =?UTF-8?q?=EB=A6=AC=20=EC=84=A0=ED=83=9D=EA=B8=B0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Web Speech API로 녹음 중 실시간 텍스트 표시
- 인터뷰 카테고리/템플릿 선택 드롭다운 추가
- 녹음/파일업로드 시 interview_template_id 전달

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../System/AiVoiceRecordingController.php     |  22 +++
 app/Services/AiVoiceRecordingService.php      |   1 +
 .../system/ai-voice-recording/index.blade.php | 151 ++++++++++++++++--
 routes/web.php                                |   1 +
 4 files changed, 165 insertions(+), 10 deletions(-)

diff --git a/app/Http/Controllers/System/AiVoiceRecordingController.php b/app/Http/Controllers/System/AiVoiceRecordingController.php
index de7efedd..991ffb07 100644
--- a/app/Http/Controllers/System/AiVoiceRecordingController.php
+++ b/app/Http/Controllers/System/AiVoiceRecordingController.php
@@ -4,6 +4,7 @@
 
 use App\Http\Controllers\Controller;
 use App\Models\AiVoiceRecording;
+use App\Models\Interview\InterviewCategory;
 use App\Services\AiVoiceRecordingService;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
@@ -42,6 +43,24 @@ public function list(Request $request): JsonResponse
         ]);
     }
 
+    /**
+     * 카테고리 + 템플릿 목록
+     */
+    public function categories(): JsonResponse
+    {
+        $categories = InterviewCategory::with(['templates' => function ($q) {
+            $q->where('is_active', true)->orderBy('sort_order');
+        }])
+            ->where('is_active', true)
+            ->orderBy('sort_order')
+            ->get(['id', 'name', 'description']);
+
+        return response()->json([
+            'success' => true,
+            'data' => $categories,
+        ]);
+    }
+
     /**
      * 새 녹음 생성
      */
@@ -49,6 +68,7 @@ public function store(Request $request): JsonResponse
     {
         $validated = $request->validate([
             'title' => 'nullable|string|max:200',
+            'interview_template_id' => 'nullable|integer|exists:interview_templates,id',
         ]);
 
         $recording = $this->service->create($validated);
@@ -107,10 +127,12 @@ public function uploadFile(Request $request): JsonResponse
         $validated = $request->validate([
             'audio_file' => 'required|file|mimes:webm,wav,mp3,ogg,m4a,mp4|max:102400',
             'title' => 'nullable|string|max:200',
+            'interview_template_id' => 'nullable|integer|exists:interview_templates,id',
         ]);
 
         $recording = $this->service->create([
             'title' => $validated['title'] ?? '업로드된 음성녹음',
+            'interview_template_id' => $validated['interview_template_id'] ?? null,
         ]);
 
         $result = $this->service->processUploadedFile(
diff --git a/app/Services/AiVoiceRecordingService.php b/app/Services/AiVoiceRecordingService.php
index 99a6b73d..4e66425c 100644
--- a/app/Services/AiVoiceRecordingService.php
+++ b/app/Services/AiVoiceRecordingService.php
@@ -61,6 +61,7 @@ public function create(array $data): AiVoiceRecording
             'tenant_id' => session('selected_tenant_id'),
             'user_id' => Auth::id(),
             'title' => $data['title'] ?? '무제 음성녹음',
+            'interview_template_id' => $data['interview_template_id'] ?? null,
             'status' => AiVoiceRecording::STATUS_PENDING,
             'file_expiry_date' => now()->addDays(7),
         ]);
diff --git a/resources/views/system/ai-voice-recording/index.blade.php b/resources/views/system/ai-voice-recording/index.blade.php
index 91e910e0..58d2c453 100644
--- a/resources/views/system/ai-voice-recording/index.blade.php
+++ b/resources/views/system/ai-voice-recording/index.blade.php
@@ -104,11 +104,14 @@ function StatusBadge({ status, size = 'sm' }) {
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 // RecorderWidget - Canvas 파형 + 원형 버튼
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-function RecorderWidget({ onDone }) {
+function RecorderWidget({ onDone, categories }) {
     const [phase, setPhase] = useState('idle');        // idle | recording | paused | saving
     const [seconds, setSeconds] = useState(0);
     const [title, setTitle] = useState('');
     const [saveProgress, setSaveProgress] = useState(0);
+    const [transcript, setTranscript] = useState('');
+    const [interimTranscript, setInterimTranscript] = useState('');
+    const [selectedTemplateId, setSelectedTemplateId] = useState('');
 
     const canvasRef = useRef(null);
     const mediaRef = useRef(null);
@@ -118,6 +121,8 @@ function RecorderWidget({ onDone }) {
     const audioCtxRef = useRef(null);
     const timerRef = useRef(null);
     const rafRef = useRef(null);
+    const recognitionRef = useRef(null);
+    const confirmedRef = useRef([]);
 
     // Canvas 파형 그리기
     const drawWaveform = useCallback(() => {
@@ -159,6 +164,57 @@ function RecorderWidget({ onDone }) {
         rafRef.current = requestAnimationFrame(drawWaveform);
     }, []);
 
+    // Web Speech API - 실시간 음성인식
+    const startSpeechRecognition = () => {
+        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        if (!SpeechRecognition) return;
+
+        const recognition = new SpeechRecognition();
+        recognition.lang = 'ko-KR';
+        recognition.continuous = true;
+        recognition.interimResults = true;
+        recognition.maxAlternatives = 1;
+
+        confirmedRef.current = [];
+
+        recognition.onresult = (event) => {
+            let interim = '';
+            for (let i = 0; i < event.results.length; i++) {
+                const result = event.results[i];
+                const text = result[0].transcript;
+                if (result.isFinal) {
+                    if (!confirmedRef.current[i]) confirmedRef.current[i] = text;
+                } else {
+                    interim += text;
+                }
+            }
+            setTranscript(confirmedRef.current.filter(Boolean).join(' '));
+            setInterimTranscript(interim);
+        };
+
+        recognition.onerror = (event) => {
+            if (event.error === 'no-speech' || event.error === 'aborted') return;
+        };
+
+        recognition.onend = () => {
+            // 녹음 중이면 자동 재시작
+            if (recognitionRef.current) {
+                try { recognitionRef.current.start(); } catch (e) {}
+            }
+        };
+
+        recognition.start();
+        recognitionRef.current = recognition;
+    };
+
+    const stopSpeechRecognition = () => {
+        if (recognitionRef.current) {
+            const ref = recognitionRef.current;
+            recognitionRef.current = null; // onend에서 재시작 방지
+            try { ref.stop(); } catch (e) {}
+        }
+    };
+
     const startRecording = async () => {
         try {
             const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
@@ -183,8 +239,11 @@ function RecorderWidget({ onDone }) {
 
             setPhase('recording');
             setSeconds(0);
+            setTranscript('');
+            setInterimTranscript('');
             timerRef.current = setInterval(() => setSeconds(s => s + 1), 1000);
             drawWaveform();
+            startSpeechRecognition();
         } catch {
             alert('마이크 접근 권한이 필요합니다.\n브라우저 주소창의 자물쇠 아이콘에서 마이크를 허용해주세요.');
         }
@@ -195,6 +254,7 @@ function RecorderWidget({ onDone }) {
             mediaRef.current.pause();
             clearInterval(timerRef.current);
             if (rafRef.current) cancelAnimationFrame(rafRef.current);
+            stopSpeechRecognition();
             setPhase('paused');
         }
     };
@@ -204,6 +264,7 @@ function RecorderWidget({ onDone }) {
             mediaRef.current.resume();
             timerRef.current = setInterval(() => setSeconds(s => s + 1), 1000);
             drawWaveform();
+            startSpeechRecognition();
             setPhase('recording');
         }
     };
@@ -213,6 +274,7 @@ function RecorderWidget({ onDone }) {
 
         clearInterval(timerRef.current);
         if (rafRef.current) cancelAnimationFrame(rafRef.current);
+        stopSpeechRecognition();
 
         const duration = seconds;
 
@@ -227,7 +289,9 @@ function RecorderWidget({ onDone }) {
                 const iv = setInterval(() => setSaveProgress(p => Math.min(p + Math.random()*12, 90)), 300);
 
                 try {
-                    const create = await http.post(API, { title: title || '무제 음성녹음' });
+                    const storeData = { title: title || '무제 음성녹음' };
+                    if (selectedTemplateId) storeData.interview_template_id = parseInt(selectedTemplateId);
+                    const create = await http.post(API, storeData);
                     if (!create.success) throw new Error(create.message);
 
                     setSaveProgress(40);
@@ -247,6 +311,9 @@ function RecorderWidget({ onDone }) {
                         setSeconds(0);
                         setTitle('');
                         setSaveProgress(0);
+                        setTranscript('');
+                        setInterimTranscript('');
+                        setSelectedTemplateId('');
                         onDone(create.data.id);
                     }, 600);
                 } catch (err) {
@@ -266,6 +333,7 @@ function RecorderWidget({ onDone }) {
     const cancelRecording = () => {
         clearInterval(timerRef.current);
         if (rafRef.current) cancelAnimationFrame(rafRef.current);
+        stopSpeechRecognition();
         if (mediaRef.current && mediaRef.current.state !== 'inactive') {
             mediaRef.current.onstop = null;
             mediaRef.current.ondataavailable = null;
@@ -274,6 +342,8 @@ function RecorderWidget({ onDone }) {
         cleanup();
         setPhase('idle');
         setSeconds(0);
+        setTranscript('');
+        setInterimTranscript('');
     };
 
     const cleanup = () => {
@@ -281,7 +351,7 @@ function RecorderWidget({ onDone }) {
         audioCtxRef.current?.close().catch(()=>{});
     };
 
-    useEffect(() => () => { cleanup(); clearInterval(timerRef.current); if(rafRef.current) cancelAnimationFrame(rafRef.current); }, []);
+    useEffect(() => () => { stopSpeechRecognition(); cleanup(); clearInterval(timerRef.current); if(rafRef.current) cancelAnimationFrame(rafRef.current); }, []);
 
     const isActive = phase === 'recording' || phase === 'paused';
 
@@ -329,11 +399,26 @@ function RecorderWidget({ onDone }) {
             </div>
 
             <div className="px-5 py-4 space-y-4">
-                {/* 제목 입력 */}
+                {/* 제목 + 카테고리 입력 */}
                 {!isActive && phase !== 'saving' && (
-                    <input type="text" value={title} onChange={e => setTitle(e.target.value)}
-                        placeholder="녹음 제목을 입력하세요 (선택)"
-                        className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-300 focus:border-purple-400 transition" />
+                    <div className="space-y-2">
+                        <input type="text" value={title} onChange={e => setTitle(e.target.value)}
+                            placeholder="녹음 제목을 입력하세요 (선택)"
+                            className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-300 focus:border-purple-400 transition" />
+                        {categories && categories.length > 0 && (
+                            <select value={selectedTemplateId} onChange={e => setSelectedTemplateId(e.target.value)}
+                                className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-300 focus:border-purple-400 transition text-gray-600 bg-white">
+                                <option value="">시나리오 템플릿 선택 (선택)</option>
+                                {categories.map(cat => (
+                                    <optgroup key={cat.id} label={cat.name}>
+                                        {(cat.templates || []).map(tpl => (
+                                            <option key={tpl.id} value={tpl.id}>{tpl.title || tpl.name}</option>
+                                        ))}
+                                    </optgroup>
+                                ))}
+                            </select>
+                        )}
+                    </div>
                 )}
 
                 {/* Canvas 파형 */}
@@ -352,6 +437,28 @@ className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outl
                     )}
                 </div>
 
+                {/* 실시간 음성인식 텍스트 */}
+                {isActive && (
+                    <div className="bg-gray-50 border border-gray-200 rounded-lg p-3 min-h-[80px] max-h-[200px] overflow-y-auto">
+                        <div className="flex items-center justify-between mb-1.5">
+                            <span className="text-xs font-medium text-gray-500 flex items-center gap-1">
+                                <Icon name="message-square" className="w-3 h-3" />
+                                실시간 음성인식
+                            </span>
+                            <span className="text-xs text-gray-400">{(transcript + ' ' + interimTranscript).trim().length}자</span>
+                        </div>
+                        <div className="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap">
+                            {transcript}
+                            {interimTranscript && (
+                                <span className="text-purple-500 italic">{transcript ? ' ' : ''}{interimTranscript}</span>
+                            )}
+                            {!transcript && !interimTranscript && (
+                                <span className="text-gray-400 italic">말씀하시면 여기에 텍스트가 표시됩니다...</span>
+                            )}
+                        </div>
+                    </div>
+                )}
+
                 {/* 타이머 (녹음중에만) */}
                 {isActive && (
                     <div className="text-center">
@@ -417,9 +524,10 @@ className="flex items-center justify-center w-11 h-11 rounded-full bg-gray-100 h
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 // FileUploadWidget
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-function FileUploadWidget({ onDone, onCancel }) {
+function FileUploadWidget({ onDone, onCancel, categories }) {
     const [title, setTitle] = useState('');
     const [file, setFile] = useState(null);
+    const [selectedTemplateId, setSelectedTemplateId] = useState('');
     const [dragOver, setDragOver] = useState(false);
     const [uploading, setUploading] = useState(false);
     const [progress, setProgress] = useState(0);
@@ -436,6 +544,7 @@ function FileUploadWidget({ onDone, onCancel }) {
             const fd = new FormData();
             fd.append('audio_file', file);
             fd.append('title', title || file.name.replace(/\.[^.]+$/, ''));
+            if (selectedTemplateId) fd.append('interview_template_id', selectedTemplateId);
             const res = await http.upload(`${API}/upload`, fd);
             clearInterval(iv);
             setProgress(100);
@@ -478,6 +587,20 @@ function FileUploadWidget({ onDone, onCancel }) {
                     placeholder="제목 (비워두면 파일명 사용)"
                     className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-blue-400 transition" />
 
+                {categories && categories.length > 0 && (
+                    <select value={selectedTemplateId} onChange={e => setSelectedTemplateId(e.target.value)}
+                        className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-blue-400 transition text-gray-600 bg-white">
+                        <option value="">시나리오 템플릿 선택 (선택)</option>
+                        {categories.map(cat => (
+                            <optgroup key={cat.id} label={cat.name}>
+                                {(cat.templates || []).map(tpl => (
+                                    <option key={tpl.id} value={tpl.id}>{tpl.title || tpl.name}</option>
+                                ))}
+                            </optgroup>
+                        ))}
+                    </select>
+                )}
+
                 <div className={`drop-zone rounded-lg p-8 text-center cursor-pointer ${dragOver?'active':''}`}
                     onDragOver={e=>{e.preventDefault();setDragOver(true)}}
                     onDragLeave={()=>setDragOver(false)}
@@ -696,9 +819,17 @@ function App() {
     const [mode, setMode] = useState('list'); // list | record | upload
     const [detail, setDetail] = useState(null);
     const [toasts, setToasts] = useState([]);
+    const [categories, setCategories] = useState([]);
     const pollingRef = useRef({});
     const toastId = useRef(0);
 
+    // 카테고리 목록 로드
+    useEffect(() => {
+        http.get(`${API}/categories`).then(r => {
+            if (r.success) setCategories(r.data || []);
+        }).catch(() => {});
+    }, []);
+
     const toast = (msg, type='success') => {
         const id = ++toastId.current;
         setToasts(ts => [...ts, { id, msg, type }]);
@@ -816,12 +947,12 @@ className={`inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-m
             {/* 녹음/업로드 위젯 */}
             {mode === 'record' && (
                 <div className="mb-5">
-                    <RecorderWidget onDone={handleRecordDone} />
+                    <RecorderWidget onDone={handleRecordDone} categories={categories} />
                 </div>
             )}
             {mode === 'upload' && (
                 <div className="mb-5">
-                    <FileUploadWidget onDone={handleUploadDone} onCancel={()=>setMode('list')} />
+                    <FileUploadWidget onDone={handleUploadDone} onCancel={()=>setMode('list')} categories={categories} />
                 </div>
             )}
 
diff --git a/routes/web.php b/routes/web.php
index 06a71d36..9c8fd95b 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -416,6 +416,7 @@
     Route::prefix('system/ai-voice-recording')->name('system.ai-voice-recording.')->group(function () {
         Route::get('/', [AiVoiceRecordingController::class, 'index'])->name('index');
         Route::get('/list', [AiVoiceRecordingController::class, 'list'])->name('list');
+        Route::get('/categories', [AiVoiceRecordingController::class, 'categories'])->name('categories');
         Route::post('/', [AiVoiceRecordingController::class, 'store'])->name('store');
         Route::post('/upload', [AiVoiceRecordingController::class, 'uploadFile'])->name('upload');
         Route::get('/{id}', [AiVoiceRecordingController::class, 'show'])->name('show');

From b25b7c57f165fea979eef919f9567c458df7c230 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 13:36:17 +0900
Subject: [PATCH 10/31] =?UTF-8?q?fix:AI=20=EC=9D=8C=EC=84=B1=EB=85=B9?=
 =?UTF-8?q?=EC=9D=8C=20STT=20=EB=94=94=EB=B2=84=EA=B7=B8=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- processAudio STT 시작/결과 로그 추가
- GoogleCloudService STT 폴링 토큰 실패 로그 추가
- STT 요청 응답 및 완료 로그 추가

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/Services/AiVoiceRecordingService.php |  4 +++-
 app/Services/GoogleCloudService.php      | 11 +++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/Services/AiVoiceRecordingService.php b/app/Services/AiVoiceRecordingService.php
index 4e66425c..d28fc5bf 100644
--- a/app/Services/AiVoiceRecordingService.php
+++ b/app/Services/AiVoiceRecordingService.php
@@ -98,10 +98,12 @@ public function processAudio(AiVoiceRecording $recording, string $audioBase64, i
             ]);
 
             // 2. Speech-to-Text 변환
+            Log::info('AiVoiceRecording STT 시작', ['recording_id' => $recording->id, 'gcs_uri' => $gcsUri]);
             $transcript = $this->googleCloudService->speechToText($gcsUri);
+            Log::info('AiVoiceRecording STT 결과', ['recording_id' => $recording->id, 'transcript_length' => strlen($transcript ?? ''), 'transcript_preview' => mb_substr($transcript ?? '', 0, 100)]);
 
             if (! $transcript) {
-                throw new \Exception('음성 인식 실패');
+                throw new \Exception('음성 인식 실패: STT 결과가 비어있습니다 (transcript=' . var_export($transcript, true) . ')');
             }
 
             $recording->update(['transcript_text' => $transcript]);
diff --git a/app/Services/GoogleCloudService.php b/app/Services/GoogleCloudService.php
index 1774a4b8..8d8a792f 100644
--- a/app/Services/GoogleCloudService.php
+++ b/app/Services/GoogleCloudService.php
@@ -204,14 +204,19 @@ public function speechToText(string $gcsUri, string $languageCode = 'ko-KR'): ?s
             $operation = $response->json();
             $operationName = $operation['name'] ?? null;
 
+            Log::info('Google Cloud: STT 요청 응답', ['operation' => $operation]);
+
             if (! $operationName) {
-                Log::error('Google Cloud: STT 작업 이름 없음');
+                Log::error('Google Cloud: STT 작업 이름 없음', ['response_body' => $response->body()]);
 
                 return null;
             }
 
             // 작업 완료 대기 (폴링)
-            return $this->waitForSttOperation($operationName);
+            $result = $this->waitForSttOperation($operationName);
+            Log::info('Google Cloud: STT 완료', ['operationName' => $operationName, 'result_length' => strlen($result ?? '')]);
+
+            return $result;
         } catch (\Exception $e) {
             Log::error('Google Cloud: STT 예외', ['error' => $e->getMessage()]);
 
@@ -226,6 +231,8 @@ private function waitForSttOperation(string $operationName, int $maxAttempts = 6
     {
         $token = $this->getAccessToken();
         if (! $token) {
+            Log::error('Google Cloud: STT 폴링 토큰 획득 실패');
+
             return null;
         }
 

From d121a319b3b136dc3647de24d60e54125447c6b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 13:45:50 +0900
Subject: [PATCH 11/31] =?UTF-8?q?feat:GCS=20=EC=97=85=EB=A1=9C=EB=93=9C/ST?=
 =?UTF-8?q?T=20=EC=82=AC=EC=9A=A9=EB=9F=89=20=ED=86=A0=ED=81=B0=20?=
 =?UTF-8?q?=EA=B8=B0=EB=A1=9D=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AiTokenHelper: saveGcsStorageUsage(), saveSttUsage() 메서드 추가
- GoogleCloudService: uploadToStorage 반환값 배열로 변경 (uri + size)
- AiVoiceRecordingService: GCS/STT 각각 토큰 사용량 기록
- MeetingLogService: uploadToStorage 반환값 변경 대응

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/Helpers/AiTokenHelper.php            | 35 ++++++++++++++++++++++++
 app/Services/AiVoiceRecordingService.php | 26 +++++++++++++++---
 app/Services/GoogleCloudService.php      | 23 ++++++++++++----
 app/Services/MeetingLogService.php       | 12 +++++---
 4 files changed, 83 insertions(+), 13 deletions(-)

diff --git a/app/Helpers/AiTokenHelper.php b/app/Helpers/AiTokenHelper.php
index 11c1350e..de6c20d9 100644
--- a/app/Helpers/AiTokenHelper.php
+++ b/app/Helpers/AiTokenHelper.php
@@ -58,6 +58,41 @@ public static function saveClaudeUsage(array $apiResult, string $model, string $
         }
     }
 
+    /**
+     * Google Cloud Storage 업로드 사용량 저장
+     * GCS Class A 오퍼레이션: $0.005 / 1,000건, Storage: $0.02 / GB / month
+     */
+    public static function saveGcsStorageUsage(string $menuName, int $fileSizeBytes): void
+    {
+        try {
+            $fileSizeMB = $fileSizeBytes / (1024 * 1024);
+            // 업로드 API 호출 비용 ($0.005/1000 operations) + 월 스토리지 비용 ($0.02/GB, 7일 기준)
+            $operationCost = 0.005 / 1000;
+            $storageCost = ($fileSizeMB / 1024) * 0.02 * (7 / 30); // 7일 보관 기준
+            $costUsd = $operationCost + $storageCost;
+
+            self::save('google-cloud-storage', $menuName, $fileSizeBytes, 0, $fileSizeBytes, $costUsd / max($fileSizeBytes, 1), 0);
+        } catch (\Exception $e) {
+            Log::warning('AI token usage save failed (GCS)', ['error' => $e->getMessage()]);
+        }
+    }
+
+    /**
+     * Google Speech-to-Text 사용량 저장
+     * STT latest_long 모델: $0.009 / 15초
+     */
+    public static function saveSttUsage(string $menuName, int $durationSeconds): void
+    {
+        try {
+            // latest_long 모델: $0.009 per 15 seconds = $0.0006 per second
+            $costUsd = ceil($durationSeconds / 15) * 0.009;
+
+            self::save('google-speech-to-text', $menuName, $durationSeconds, 0, $durationSeconds, $costUsd / max($durationSeconds, 1), 0);
+        } catch (\Exception $e) {
+            Log::warning('AI token usage save failed (STT)', ['error' => $e->getMessage()]);
+        }
+    }
+
     /**
      * 공통 저장 로직
      */
diff --git a/app/Services/AiVoiceRecordingService.php b/app/Services/AiVoiceRecordingService.php
index d28fc5bf..bd9339fd 100644
--- a/app/Services/AiVoiceRecordingService.php
+++ b/app/Services/AiVoiceRecordingService.php
@@ -86,17 +86,23 @@ public function processAudio(AiVoiceRecording $recording, string $audioBase64, i
                 now()->format('YmdHis')
             );
 
-            $gcsUri = $this->googleCloudService->uploadBase64Audio($audioBase64, $objectName);
+            $uploadResult = $this->googleCloudService->uploadBase64Audio($audioBase64, $objectName);
 
-            if (! $gcsUri) {
+            if (! $uploadResult) {
                 throw new \Exception('오디오 파일 업로드 실패');
             }
 
+            $gcsUri = $uploadResult['uri'];
+            $fileSize = $uploadResult['size'] ?? 0;
+
             $recording->update([
                 'audio_file_path' => $objectName,
                 'audio_gcs_uri' => $gcsUri,
             ]);
 
+            // GCS 업로드 토큰 사용량 기록
+            AiTokenHelper::saveGcsStorageUsage('AI음성녹음-GCS저장', $fileSize);
+
             // 2. Speech-to-Text 변환
             Log::info('AiVoiceRecording STT 시작', ['recording_id' => $recording->id, 'gcs_uri' => $gcsUri]);
             $transcript = $this->googleCloudService->speechToText($gcsUri);
@@ -106,6 +112,9 @@ public function processAudio(AiVoiceRecording $recording, string $audioBase64, i
                 throw new \Exception('음성 인식 실패: STT 결과가 비어있습니다 (transcript=' . var_export($transcript, true) . ')');
             }
 
+            // STT 토큰 사용량 기록
+            AiTokenHelper::saveSttUsage('AI음성녹음-STT변환', $durationSeconds);
+
             $recording->update(['transcript_text' => $transcript]);
 
             // 3. Gemini AI 분석
@@ -162,18 +171,24 @@ public function processUploadedFile(AiVoiceRecording $recording, UploadedFile $f
                 $extension
             );
 
-            $gcsUri = $this->googleCloudService->uploadToStorage($fullPath, $objectName);
+            $uploadResult = $this->googleCloudService->uploadToStorage($fullPath, $objectName);
 
-            if (! $gcsUri) {
+            if (! $uploadResult) {
                 @unlink($fullPath);
                 throw new \Exception('오디오 파일 업로드 실패');
             }
 
+            $gcsUri = $uploadResult['uri'];
+            $uploadedSize = $uploadResult['size'] ?? $fileSize;
+
             $recording->update([
                 'audio_file_path' => $objectName,
                 'audio_gcs_uri' => $gcsUri,
             ]);
 
+            // GCS 업로드 토큰 사용량 기록
+            AiTokenHelper::saveGcsStorageUsage('AI음성녹음-GCS저장', $uploadedSize);
+
             // 2. Speech-to-Text 변환
             $transcript = $this->googleCloudService->speechToText($gcsUri);
 
@@ -184,6 +199,9 @@ public function processUploadedFile(AiVoiceRecording $recording, UploadedFile $f
                 throw new \Exception('음성 인식 실패');
             }
 
+            // STT 토큰 사용량 기록
+            AiTokenHelper::saveSttUsage('AI음성녹음-STT변환', $estimatedDuration);
+
             $recording->update(['transcript_text' => $transcript]);
 
             // 3. Gemini AI 분석
diff --git a/app/Services/GoogleCloudService.php b/app/Services/GoogleCloudService.php
index 8d8a792f..d570976f 100644
--- a/app/Services/GoogleCloudService.php
+++ b/app/Services/GoogleCloudService.php
@@ -97,8 +97,9 @@ private function getAccessToken(): ?string
 
     /**
      * GCS에 파일 업로드
+     * @return array|null ['uri' => 'gs://...', 'size' => bytes] or null
      */
-    public function uploadToStorage(string $localPath, string $objectName): ?string
+    public function uploadToStorage(string $localPath, string $objectName): ?array
     {
         $token = $this->getAccessToken();
         if (! $token) {
@@ -114,6 +115,7 @@ public function uploadToStorage(string $localPath, string $objectName): ?string
 
         try {
             $fileContent = file_get_contents($localPath);
+            $fileSize = strlen($fileContent);
             $mimeType = mime_content_type($localPath) ?: 'audio/webm';
 
             $uploadUrl = 'https://storage.googleapis.com/upload/storage/v1/b/'.
@@ -126,7 +128,17 @@ public function uploadToStorage(string $localPath, string $objectName): ?string
                 ->post($uploadUrl);
 
             if ($response->successful()) {
-                return 'gs://'.$bucket.'/'.$objectName;
+                $result = $response->json();
+                Log::info('Google Cloud: Storage 업로드 성공', [
+                    'object' => $objectName,
+                    'size' => $result['size'] ?? $fileSize,
+                    'bucket' => $bucket,
+                ]);
+
+                return [
+                    'uri' => 'gs://'.$bucket.'/'.$objectName,
+                    'size' => (int) ($result['size'] ?? $fileSize),
+                ];
             }
 
             Log::error('Google Cloud: Storage 업로드 실패', ['response' => $response->body()]);
@@ -141,8 +153,9 @@ public function uploadToStorage(string $localPath, string $objectName): ?string
 
     /**
      * Base64 오디오를 GCS에 업로드
+     * @return array|null ['uri' => 'gs://...', 'size' => bytes] or null
      */
-    public function uploadBase64Audio(string $base64Audio, string $objectName): ?string
+    public function uploadBase64Audio(string $base64Audio, string $objectName): ?array
     {
         // Base64 데이터 파싱
         $audioData = $base64Audio;
@@ -161,12 +174,12 @@ public function uploadBase64Audio(string $base64Audio, string $objectName): ?str
         file_put_contents($tempPath, base64_decode($audioData));
 
         // GCS 업로드
-        $gcsUri = $this->uploadToStorage($tempPath, $objectName);
+        $result = $this->uploadToStorage($tempPath, $objectName);
 
         // 임시 파일 삭제
         @unlink($tempPath);
 
-        return $gcsUri;
+        return $result;
     }
 
     /**
diff --git a/app/Services/MeetingLogService.php b/app/Services/MeetingLogService.php
index 780ee80e..ee2131f2 100644
--- a/app/Services/MeetingLogService.php
+++ b/app/Services/MeetingLogService.php
@@ -89,12 +89,14 @@ public function processAudio(MeetingLog $meeting, string $audioBase64, int $dura
                 now()->format('YmdHis')
             );
 
-            $gcsUri = $this->googleCloudService->uploadBase64Audio($audioBase64, $objectName);
+            $uploadResult = $this->googleCloudService->uploadBase64Audio($audioBase64, $objectName);
 
-            if (! $gcsUri) {
+            if (! $uploadResult) {
                 throw new \Exception('오디오 파일 업로드 실패');
             }
 
+            $gcsUri = $uploadResult['uri'];
+
             $meeting->update([
                 'audio_file_path' => $objectName,
                 'audio_gcs_uri' => $gcsUri,
@@ -311,13 +313,15 @@ public function processUploadedFile(MeetingLog $meeting, \Illuminate\Http\Upload
                 $extension
             );
 
-            $gcsUri = $this->googleCloudService->uploadToStorage($fullPath, $objectName);
+            $uploadResult = $this->googleCloudService->uploadToStorage($fullPath, $objectName);
 
-            if (! $gcsUri) {
+            if (! $uploadResult) {
                 @unlink($fullPath);
                 throw new \Exception('오디오 파일 업로드 실패');
             }
 
+            $gcsUri = $uploadResult['uri'];
+
             $meeting->update([
                 'audio_file_path' => $objectName,
                 'audio_gcs_uri' => $gcsUri,

From fa14a9fbec23225a1e140cdc78155bb9331d670d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 13:51:09 +0900
Subject: [PATCH 12/31] =?UTF-8?q?feat:AI=20=EC=9D=8C=EC=84=B1=EB=85=B9?=
 =?UTF-8?q?=EC=9D=8C=20GCS=20=ED=8C=8C=EC=9D=BC=20=EB=8B=A4=EC=9A=B4?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EC=97=94=EB=93=9C=ED=8F=AC=EC=9D=B8?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- GoogleCloudService에 downloadFromStorage 메서드 추가 (GCS REST API 사용)
- AiVoiceRecordingController에 download 메서드 추가 (스트림 응답)
- 다운로드 라우트 추가 (GET /{id}/download)
- 파일명은 제목 기반으로 생성, Content-Disposition 헤더 설정

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../System/AiVoiceRecordingController.php     | 37 +++++++++++++++
 app/Services/GoogleCloudService.php           | 47 +++++++++++++++++++
 routes/web.php                                |  1 +
 3 files changed, 85 insertions(+)

diff --git a/app/Http/Controllers/System/AiVoiceRecordingController.php b/app/Http/Controllers/System/AiVoiceRecordingController.php
index 991ffb07..62bf0b18 100644
--- a/app/Http/Controllers/System/AiVoiceRecordingController.php
+++ b/app/Http/Controllers/System/AiVoiceRecordingController.php
@@ -6,8 +6,10 @@
 use App\Models\AiVoiceRecording;
 use App\Models\Interview\InterviewCategory;
 use App\Services\AiVoiceRecordingService;
+use App\Services\GoogleCloudService;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
+use Illuminate\Support\Str;
 use Illuminate\View\View;
 use Symfony\Component\HttpFoundation\Response;
 
@@ -223,4 +225,39 @@ public function status(int $id): JsonResponse
             ],
         ]);
     }
+
+    /**
+     * GCS 음성파일 다운로드
+     */
+    public function download(int $id): Response|JsonResponse
+    {
+        $recording = AiVoiceRecording::find($id);
+
+        if (! $recording || ! $recording->audio_file_path) {
+            return response()->json([
+                'success' => false,
+                'message' => '파일을 찾을 수 없습니다.',
+            ], 404);
+        }
+
+        $googleCloudService = app(GoogleCloudService::class);
+        $content = $googleCloudService->downloadFromStorage($recording->audio_file_path);
+
+        if (! $content) {
+            return response()->json([
+                'success' => false,
+                'message' => '파일 다운로드에 실패했습니다.',
+            ], 500);
+        }
+
+        // 파일 확장자 추출
+        $extension = pathinfo($recording->audio_file_path, PATHINFO_EXTENSION) ?: 'webm';
+
+        // 파일명 생성 (제목 기반, URL 안전하게)
+        $filename = Str::slug($recording->title ?: 'recording').'.'.  $extension;
+
+        return response($content)
+            ->header('Content-Type', 'audio/'.$extension)
+            ->header('Content-Disposition', 'attachment; filename="'.$filename.'"');
+    }
 }
diff --git a/app/Services/GoogleCloudService.php b/app/Services/GoogleCloudService.php
index d570976f..ed8fd35e 100644
--- a/app/Services/GoogleCloudService.php
+++ b/app/Services/GoogleCloudService.php
@@ -317,6 +317,53 @@ public function deleteFromStorage(string $objectName): bool
         }
     }
 
+    /**
+     * GCS에서 파일 다운로드 (스트림)
+     */
+    public function downloadFromStorage(string $objectName): ?string
+    {
+        $token = $this->getAccessToken();
+        if (! $token) {
+            Log::error('Google Cloud: 다운로드 토큰 획득 실패');
+
+            return null;
+        }
+
+        $bucket = config('services.google.storage_bucket');
+        if (! $bucket) {
+            Log::error('Google Cloud: Storage 버킷 설정 없음');
+
+            return null;
+        }
+
+        try {
+            $url = 'https://storage.googleapis.com/storage/v1/b/'.
+                urlencode($bucket).'/o/'.urlencode($objectName).'?alt=media';
+
+            $response = Http::withToken($token)->get($url);
+
+            if ($response->successful()) {
+                Log::info('Google Cloud: Storage 다운로드 성공', [
+                    'object' => $objectName,
+                    'size' => strlen($response->body()),
+                ]);
+
+                return $response->body();
+            }
+
+            Log::error('Google Cloud: Storage 다운로드 실패', [
+                'status' => $response->status(),
+                'response' => $response->body(),
+            ]);
+
+            return null;
+        } catch (\Exception $e) {
+            Log::error('Google Cloud: Storage 다운로드 예외', ['error' => $e->getMessage()]);
+
+            return null;
+        }
+    }
+
     /**
      * 서비스 사용 가능 여부
      */
diff --git a/routes/web.php b/routes/web.php
index 9c8fd95b..9de04a5f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -423,6 +423,7 @@
         Route::post('/{id}/process', [AiVoiceRecordingController::class, 'processAudio'])->name('process');
         Route::delete('/{id}', [AiVoiceRecordingController::class, 'destroy'])->name('destroy');
         Route::get('/{id}/status', [AiVoiceRecordingController::class, 'status'])->name('status');
+        Route::get('/{id}/download', [AiVoiceRecordingController::class, 'download'])->name('download');
     });
 
     // 명함 OCR API

From e8f07bad633f51e1c3ebbb48524f174413acec49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 13:52:57 +0900
Subject: [PATCH 13/31] =?UTF-8?q?feat:AI=20=EC=9D=8C=EC=84=B1=EB=85=B9?=
 =?UTF-8?q?=EC=9D=8C=20=EC=82=AD=EC=A0=9C=20=ED=99=95=EC=9D=B8=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EB=B0=8F=20=EB=8B=A4=EC=9A=B4=EB=A1=9C=EB=93=9C=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- DeleteConfirmModal 컴포넌트 추가 (confirm 대체)
- RecordingCard에 음성파일 다운로드 버튼 추가
- 삭제 중 로딩 상태 표시

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../system/ai-voice-recording/index.blade.php | 79 +++++++++++++++++--
 1 file changed, 73 insertions(+), 6 deletions(-)

diff --git a/resources/views/system/ai-voice-recording/index.blade.php b/resources/views/system/ai-voice-recording/index.blade.php
index 58d2c453..8d8f037c 100644
--- a/resources/views/system/ai-voice-recording/index.blade.php
+++ b/resources/views/system/ai-voice-recording/index.blade.php
@@ -643,7 +643,7 @@ className="inline-flex items-center gap-1.5 px-4 py-2 bg-blue-600 hover:bg-blue-
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 // RecordingCard - 목록 아이템
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-function RecordingCard({ item, onView, onDelete }) {
+function RecordingCard({ item, onView, onDelete, onDownload }) {
     return (
         <div className="flex items-center gap-4 px-4 py-3 hover:bg-gray-50 transition-colors border-b border-gray-100 last:border-b-0 group">
             {/* 아이콘 */}
@@ -677,8 +677,16 @@ className="px-2.5 py-1 text-xs font-medium text-purple-700 bg-purple-50 hover:bg
                         결과 보기
                     </button>
                 )}
-                <button onClick={()=>onDelete(item.id)}
-                    className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors">
+                {item.audio_file_path && (
+                    <button onClick={()=>onDownload(item.id)}
+                        className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+                        title="음성파일 다운로드">
+                        <Icon name="download" className="w-4 h-4" />
+                    </button>
+                )}
+                <button onClick={()=>onDelete(item)}
+                    className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+                    title="삭제">
                     <Icon name="trash-2" className="w-4 h-4" />
                 </button>
             </div>
@@ -805,6 +813,43 @@ className="px-4 py-1.5 text-sm font-medium text-gray-600 hover:text-gray-800 hov
     );
 }
 
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// DeleteConfirmModal
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+function DeleteConfirmModal({ item, onConfirm, onCancel, deleting }) {
+    if (!item) return null;
+    return (
+        <div className="modal-backdrop fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onCancel}>
+            <div className="bg-white rounded-2xl shadow-2xl w-full max-w-sm fade-in" onClick={e=>e.stopPropagation()}>
+                <div className="px-6 pt-6 pb-2 text-center">
+                    <div className="mx-auto mb-4 w-14 h-14 rounded-full bg-red-100 flex items-center justify-center">
+                        <Icon name="trash-2" className="w-7 h-7 text-red-500" />
+                    </div>
+                    <h3 className="text-lg font-bold text-gray-900 mb-1">녹음 삭제</h3>
+                    <p className="text-sm text-gray-500">
+                        <span className="font-medium text-gray-700">"{item.title}"</span>을(를) 삭제하시겠습니까?
+                    </p>
+                    <p className="text-xs text-gray-400 mt-1">삭제된 녹음과 음성 파일은 복구할 수 없습니다.</p>
+                </div>
+                <div className="px-6 py-4 flex gap-2">
+                    <button onClick={onCancel} disabled={deleting}
+                        className="flex-1 px-4 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 disabled:opacity-50 rounded-lg transition-colors">
+                        취소
+                    </button>
+                    <button onClick={()=>onConfirm(item.id)} disabled={deleting}
+                        className="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-red-500 hover:bg-red-600 disabled:opacity-50 rounded-lg transition-colors inline-flex items-center justify-center gap-1.5">
+                        {deleting ? (
+                            <><Icon name="loader" className="w-4 h-4 animate-spin" /> 삭제 중...</>
+                        ) : (
+                            <><Icon name="trash-2" className="w-4 h-4" /> 삭제</>
+                        )}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 // App
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
@@ -820,6 +865,8 @@ function App() {
     const [detail, setDetail] = useState(null);
     const [toasts, setToasts] = useState([]);
     const [categories, setCategories] = useState([]);
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const [deleting, setDeleting] = useState(false);
     const pollingRef = useRef({});
     const toastId = useRef(0);
 
@@ -902,13 +949,23 @@ function App() {
         } catch { toast('조회 실패','error'); }
     };
 
-    const handleDelete = async id => {
-        if (!confirm('이 녹음을 삭제하시겠습니까?')) return;
+    const handleDeleteClick = (item) => {
+        setDeleteTarget(item);
+    };
+
+    const handleDeleteConfirm = async (id) => {
+        setDeleting(true);
         try {
             await http.del(`${API}/${id}`);
             toast('삭제되었습니다');
+            setDeleteTarget(null);
             fetchList(true);
         } catch { toast('삭제 실패','error'); }
+        setDeleting(false);
+    };
+
+    const handleDownload = (id) => {
+        window.open(`${API}/${id}/download`, '_blank');
     };
 
     const completedCount = items.filter(i => i.status==='COMPLETED').length;
@@ -1008,7 +1065,7 @@ className="text-sm text-purple-600 hover:text-purple-700 font-medium">
                 ) : (
                     <div>
                         {items.map(item => (
-                            <RecordingCard key={item.id} item={item} onView={handleView} onDelete={handleDelete} />
+                            <RecordingCard key={item.id} item={item} onView={handleView} onDelete={handleDeleteClick} onDownload={handleDownload} />
                         ))}
                     </div>
                 )}
@@ -1037,6 +1094,16 @@ className="p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-30 rounded t
 
             {/* 상세 모달 */}
             {detail && <DetailModal data={detail} onClose={()=>setDetail(null)} />}
+
+            {/* 삭제 확인 모달 */}
+            {deleteTarget && (
+                <DeleteConfirmModal
+                    item={deleteTarget}
+                    onConfirm={handleDeleteConfirm}
+                    onCancel={()=>setDeleteTarget(null)}
+                    deleting={deleting}
+                />
+            )}
         </div>
     );
 }

From 6eb60fa22dae5f87ccbf2d0974868bb8c55fc9f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 14:03:47 +0900
Subject: [PATCH 14/31] =?UTF-8?q?fix:Lucide=20=EC=95=84=EC=9D=B4=EC=BD=98?=
 =?UTF-8?q?=20=ED=98=B8=ED=99=98=EC=84=B1=20=EC=88=98=EC=A0=95=20=EB=B0=8F?=
 =?UTF-8?q?=20=EC=95=A1=EC=85=98=EB=B2=84=ED=8A=BC=20=ED=95=AD=EC=83=81=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Lucide 0.563.0 API 변경 대응 (icons 객체 → 개별 PascalCase export)
- 아이콘 이름 변환: kebab-case → PascalCase, 구버전 호환 유지
- 리네임된 아이콘 별칭 처리 (check-circle→CircleCheck 등)
- 액션버튼(결과보기/다운로드/삭제) opacity-0 제거하여 항상 표시

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../system/ai-voice-recording/index.blade.php    | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/resources/views/system/ai-voice-recording/index.blade.php b/resources/views/system/ai-voice-recording/index.blade.php
index 8d8f037c..2a70102a 100644
--- a/resources/views/system/ai-voice-recording/index.blade.php
+++ b/resources/views/system/ai-voice-recording/index.blade.php
@@ -46,12 +46,22 @@
 };
 
 // ─── Lucide icon helper ───
+const kebabToPascal = (s) => s.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join('');
+const iconAliases = {'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert'};
+const getIconDef = (name) => {
+    if (iconAliases[name] && lucide[iconAliases[name]]) return lucide[iconAliases[name]];
+    const p = kebabToPascal(name);
+    if (lucide[p]) return lucide[p];
+    if (lucide.icons && lucide.icons[name]) return lucide.icons[name];
+    return null;
+};
 const Icon = ({ name, className = 'w-5 h-5', ...p }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const def = getIconDef(name);
+        if (ref.current && def) {
             ref.current.innerHTML = '';
-            const s = lucide.createElement(lucide.icons[name]);
+            const s = lucide.createElement(def);
             s.setAttribute('class', className);
             ref.current.appendChild(s);
         }
@@ -670,7 +680,7 @@ className={`w-5 h-5 ${item.status==='COMPLETED'?'text-emerald-600':item.status==
             </div>
 
             {/* 액션 */}
-            <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+            <div className="flex items-center gap-1">
                 {item.status === 'COMPLETED' && (
                     <button onClick={()=>onView(item.id)}
                         className="px-2.5 py-1 text-xs font-medium text-purple-700 bg-purple-50 hover:bg-purple-100 rounded-lg transition-colors">

From 5818c7e93ef408ef2a9e4035c308a967e470e79e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 14:12:40 +0900
Subject: [PATCH 15/31] =?UTF-8?q?fix:=EC=A0=84=EC=B2=B4=20Lucide=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=ED=98=B8=ED=99=98=EC=84=B1=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20(24=EA=B0=9C=20=ED=8C=8C=EC=9D=BC)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Lucide 0.563.0 API 변경 대응: lucide.icons[name] → PascalCase 개별 export
- kebab-case → PascalCase 자동 변환 로직 적용
- 리네임된 아이콘 별칭 매핑 (check-circle→CircleCheck 등)
- 구버전 lucide.icons 객체 폴백 유지
- 적용 범위: finance/*(19), system/*(2), sales/interviews(1), ai-token-usage(1), holidays(1)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 resources/views/finance/account-transactions.blade.php | 5 +++--
 resources/views/finance/card-transactions.blade.php    | 5 +++--
 resources/views/finance/consulting-fee.blade.php       | 5 +++--
 resources/views/finance/corporate-cards.blade.php      | 5 +++--
 resources/views/finance/corporate-vehicles.blade.php   | 5 +++--
 resources/views/finance/customer-settlement.blade.php  | 5 +++--
 resources/views/finance/customers.blade.php            | 5 +++--
 resources/views/finance/expense.blade.php              | 5 +++--
 resources/views/finance/income.blade.php               | 5 +++--
 resources/views/finance/journal-entries.blade.php      | 5 +++--
 resources/views/finance/partners.blade.php             | 5 +++--
 resources/views/finance/payables.blade.php             | 5 +++--
 resources/views/finance/purchase.blade.php             | 5 +++--
 resources/views/finance/receivables.blade.php          | 5 +++--
 resources/views/finance/refunds.blade.php              | 5 +++--
 resources/views/finance/sales-commission.blade.php     | 5 +++--
 resources/views/finance/sales.blade.php                | 5 +++--
 resources/views/finance/subscription.blade.php         | 5 +++--
 resources/views/finance/vat.blade.php                  | 5 +++--
 resources/views/finance/vehicle-logs.blade.php         | 5 +++--
 resources/views/finance/vehicle-maintenance.blade.php  | 5 +++--
 resources/views/sales/interviews/index.blade.php       | 5 +++--
 resources/views/system/ai-token-usage/index.blade.php  | 5 +++--
 resources/views/system/holidays/index.blade.php        | 5 +++--
 24 files changed, 72 insertions(+), 48 deletions(-)

diff --git a/resources/views/finance/account-transactions.blade.php b/resources/views/finance/account-transactions.blade.php
index 771b6680..e5e9bbe5 100644
--- a/resources/views/finance/account-transactions.blade.php
+++ b/resources/views/finance/account-transactions.blade.php
@@ -25,9 +25,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/card-transactions.blade.php b/resources/views/finance/card-transactions.blade.php
index 00484601..aab880a2 100644
--- a/resources/views/finance/card-transactions.blade.php
+++ b/resources/views/finance/card-transactions.blade.php
@@ -25,9 +25,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/consulting-fee.blade.php b/resources/views/finance/consulting-fee.blade.php
index 57995bb3..bd16b7fd 100644
--- a/resources/views/finance/consulting-fee.blade.php
+++ b/resources/views/finance/consulting-fee.blade.php
@@ -25,9 +25,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/corporate-cards.blade.php b/resources/views/finance/corporate-cards.blade.php
index 6bad8f84..c4d25912 100644
--- a/resources/views/finance/corporate-cards.blade.php
+++ b/resources/views/finance/corporate-cards.blade.php
@@ -27,9 +27,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/corporate-vehicles.blade.php b/resources/views/finance/corporate-vehicles.blade.php
index 256cebd0..9176e9d4 100644
--- a/resources/views/finance/corporate-vehicles.blade.php
+++ b/resources/views/finance/corporate-vehicles.blade.php
@@ -24,9 +24,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/customer-settlement.blade.php b/resources/views/finance/customer-settlement.blade.php
index 99d7e2fd..2b85b32a 100644
--- a/resources/views/finance/customer-settlement.blade.php
+++ b/resources/views/finance/customer-settlement.blade.php
@@ -25,9 +25,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/customers.blade.php b/resources/views/finance/customers.blade.php
index c63aa765..d3b57618 100644
--- a/resources/views/finance/customers.blade.php
+++ b/resources/views/finance/customers.blade.php
@@ -25,9 +25,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/expense.blade.php b/resources/views/finance/expense.blade.php
index 0a6ff9f6..c44b854f 100644
--- a/resources/views/finance/expense.blade.php
+++ b/resources/views/finance/expense.blade.php
@@ -25,9 +25,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/income.blade.php b/resources/views/finance/income.blade.php
index 571efbe6..0275bc95 100644
--- a/resources/views/finance/income.blade.php
+++ b/resources/views/finance/income.blade.php
@@ -25,9 +25,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/journal-entries.blade.php b/resources/views/finance/journal-entries.blade.php
index 52009bda..39e9c0ed 100644
--- a/resources/views/finance/journal-entries.blade.php
+++ b/resources/views/finance/journal-entries.blade.php
@@ -25,9 +25,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/partners.blade.php b/resources/views/finance/partners.blade.php
index 8ab8d2dd..4c721c4f 100644
--- a/resources/views/finance/partners.blade.php
+++ b/resources/views/finance/partners.blade.php
@@ -25,9 +25,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/payables.blade.php b/resources/views/finance/payables.blade.php
index ba6b7243..f51421b0 100644
--- a/resources/views/finance/payables.blade.php
+++ b/resources/views/finance/payables.blade.php
@@ -25,9 +25,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/purchase.blade.php b/resources/views/finance/purchase.blade.php
index 796f7c81..2227e0c8 100644
--- a/resources/views/finance/purchase.blade.php
+++ b/resources/views/finance/purchase.blade.php
@@ -25,9 +25,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/receivables.blade.php b/resources/views/finance/receivables.blade.php
index d6d8690a..1863254e 100644
--- a/resources/views/finance/receivables.blade.php
+++ b/resources/views/finance/receivables.blade.php
@@ -25,9 +25,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/refunds.blade.php b/resources/views/finance/refunds.blade.php
index e31aa5a0..0697ff71 100644
--- a/resources/views/finance/refunds.blade.php
+++ b/resources/views/finance/refunds.blade.php
@@ -25,9 +25,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/sales-commission.blade.php b/resources/views/finance/sales-commission.blade.php
index 9e3e2ed3..c11e7f73 100644
--- a/resources/views/finance/sales-commission.blade.php
+++ b/resources/views/finance/sales-commission.blade.php
@@ -24,9 +24,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/sales.blade.php b/resources/views/finance/sales.blade.php
index 7947f406..ff4be720 100644
--- a/resources/views/finance/sales.blade.php
+++ b/resources/views/finance/sales.blade.php
@@ -25,9 +25,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/subscription.blade.php b/resources/views/finance/subscription.blade.php
index e5c2c608..d1d49308 100644
--- a/resources/views/finance/subscription.blade.php
+++ b/resources/views/finance/subscription.blade.php
@@ -25,9 +25,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/vat.blade.php b/resources/views/finance/vat.blade.php
index 3a4051f1..e0fe7c7c 100644
--- a/resources/views/finance/vat.blade.php
+++ b/resources/views/finance/vat.blade.php
@@ -25,9 +25,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/vehicle-logs.blade.php b/resources/views/finance/vehicle-logs.blade.php
index ea5a8507..9918f4aa 100644
--- a/resources/views/finance/vehicle-logs.blade.php
+++ b/resources/views/finance/vehicle-logs.blade.php
@@ -24,9 +24,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/finance/vehicle-maintenance.blade.php b/resources/views/finance/vehicle-maintenance.blade.php
index 883a4a78..e49036c2 100644
--- a/resources/views/finance/vehicle-maintenance.blade.php
+++ b/resources/views/finance/vehicle-maintenance.blade.php
@@ -24,9 +24,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/sales/interviews/index.blade.php b/resources/views/sales/interviews/index.blade.php
index fb8b3031..264ae7a4 100644
--- a/resources/views/sales/interviews/index.blade.php
+++ b/resources/views/sales/interviews/index.blade.php
@@ -73,9 +73,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/system/ai-token-usage/index.blade.php b/resources/views/system/ai-token-usage/index.blade.php
index 54aa779c..64c3158f 100644
--- a/resources/views/system/ai-token-usage/index.blade.php
+++ b/resources/views/system/ai-token-usage/index.blade.php
@@ -118,9 +118,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }
diff --git a/resources/views/system/holidays/index.blade.php b/resources/views/system/holidays/index.blade.php
index fa6f76c1..23503736 100644
--- a/resources/views/system/holidays/index.blade.php
+++ b/resources/views/system/holidays/index.blade.php
@@ -25,9 +25,10 @@
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && lucide.icons[name]) {
+        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+        if (ref.current && _def) {
             ref.current.innerHTML = '';
-            const svg = lucide.createElement(lucide.icons[name]);
+            const svg = lucide.createElement(_def);
             svg.setAttribute('class', className);
             ref.current.appendChild(svg);
         }

From 29a670522ae1147a926f7747a856e012095c6461 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 14:20:57 +0900
Subject: [PATCH 16/31] =?UTF-8?q?fix:=EC=9D=8C=EC=84=B1=ED=8C=8C=EC=9D=BC?=
 =?UTF-8?q?=20=EB=8B=A4=EC=9A=B4=EB=A1=9C=EB=93=9C=20=ED=95=9C=EA=B8=80=20?=
 =?UTF-8?q?=ED=8C=8C=EC=9D=BC=EB=AA=85=20=EB=B0=8F=20=ED=99=95=EC=9E=A5?=
 =?UTF-8?q?=EC=9E=90=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Str::slug()이 한글을 제거하는 문제 수정
- 한글 파일명 그대로 유지 (파일시스템 금지문자만 치환)
- RFC 5987 filename*=UTF-8'' 헤더로 브라우저 호환성 확보
- 다운로드 파일명 예시: 무제 음성녹음.webm

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../Controllers/System/AiVoiceRecordingController.php    | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/Http/Controllers/System/AiVoiceRecordingController.php b/app/Http/Controllers/System/AiVoiceRecordingController.php
index 62bf0b18..0e605222 100644
--- a/app/Http/Controllers/System/AiVoiceRecordingController.php
+++ b/app/Http/Controllers/System/AiVoiceRecordingController.php
@@ -253,11 +253,14 @@ public function download(int $id): Response|JsonResponse
         // 파일 확장자 추출
         $extension = pathinfo($recording->audio_file_path, PATHINFO_EXTENSION) ?: 'webm';
 
-        // 파일명 생성 (제목 기반, URL 안전하게)
-        $filename = Str::slug($recording->title ?: 'recording').'.'.  $extension;
+        // 파일명 생성 (한글 제목 지원)
+        $title = $recording->title ?: 'recording';
+        $safeTitle = preg_replace('/[\/\\\\:*?"<>|]/', '_', $title);
+        $filename = $safeTitle.'.'.$extension;
+        $encodedFilename = rawurlencode($filename);
 
         return response($content)
             ->header('Content-Type', 'audio/'.$extension)
-            ->header('Content-Disposition', 'attachment; filename="'.$filename.'"');
+            ->header('Content-Disposition', "attachment; filename=\"{$encodedFilename}\"; filename*=UTF-8''{$encodedFilename}");
     }
 }

From 6d02cc5e5e2cf5c6569b819f32d7d0465e0e7627 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 14:24:59 +0900
Subject: [PATCH 17/31] =?UTF-8?q?feat:=EC=83=81=EC=84=B8=EB=AA=A8=EB=8B=AC?=
 =?UTF-8?q?=EC=97=90=20=EB=B8=8C=EB=9D=BC=EC=9A=B0=EC=A0=80=20=EB=82=B4?=
 =?UTF-8?q?=EC=9E=A5=20=EC=98=A4=EB=94=94=EC=98=A4=20=ED=94=8C=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=96=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- DetailModal에 <audio> 태그 기반 재생기 추가 (다운로드 없이 바로 재생)
- 다운로드 엔드포인트에 ?inline=1 파라미터 지원 (스트리밍 재생용)
- Content-Length, Accept-Ranges 헤더 추가
- 플레이어 옆 다운로드 버튼 배치

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../System/AiVoiceRecordingController.php       | 11 ++++++++---
 .../system/ai-voice-recording/index.blade.php   | 17 +++++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/app/Http/Controllers/System/AiVoiceRecordingController.php b/app/Http/Controllers/System/AiVoiceRecordingController.php
index 0e605222..2eafcd16 100644
--- a/app/Http/Controllers/System/AiVoiceRecordingController.php
+++ b/app/Http/Controllers/System/AiVoiceRecordingController.php
@@ -229,7 +229,7 @@ public function status(int $id): JsonResponse
     /**
      * GCS 음성파일 다운로드
      */
-    public function download(int $id): Response|JsonResponse
+    public function download(Request $request, int $id): Response|JsonResponse
     {
         $recording = AiVoiceRecording::find($id);
 
@@ -252,6 +252,7 @@ public function download(int $id): Response|JsonResponse
 
         // 파일 확장자 추출
         $extension = pathinfo($recording->audio_file_path, PATHINFO_EXTENSION) ?: 'webm';
+        $mimeType = 'audio/'.$extension;
 
         // 파일명 생성 (한글 제목 지원)
         $title = $recording->title ?: 'recording';
@@ -259,8 +260,12 @@ public function download(int $id): Response|JsonResponse
         $filename = $safeTitle.'.'.$extension;
         $encodedFilename = rawurlencode($filename);
 
+        $disposition = $request->query('inline') ? 'inline' : 'attachment';
+
         return response($content)
-            ->header('Content-Type', 'audio/'.$extension)
-            ->header('Content-Disposition', "attachment; filename=\"{$encodedFilename}\"; filename*=UTF-8''{$encodedFilename}");
+            ->header('Content-Type', $mimeType)
+            ->header('Content-Length', strlen($content))
+            ->header('Accept-Ranges', 'bytes')
+            ->header('Content-Disposition', "{$disposition}; filename=\"{$encodedFilename}\"; filename*=UTF-8''{$encodedFilename}");
     }
 }
diff --git a/resources/views/system/ai-voice-recording/index.blade.php b/resources/views/system/ai-voice-recording/index.blade.php
index 2a70102a..8945b836 100644
--- a/resources/views/system/ai-voice-recording/index.blade.php
+++ b/resources/views/system/ai-voice-recording/index.blade.php
@@ -755,6 +755,23 @@ className={`flex-1 text-xs font-medium py-1.5 rounded-md transition-colors ${tab
                     )}
                 </div>
 
+                {/* 오디오 플레이어 */}
+                {data.audio_file_path && (
+                    <div className="px-6 py-3 bg-gray-50 border-b border-gray-100">
+                        <div className="flex items-center gap-3">
+                            <Icon name="volume-2" className="w-4 h-4 text-purple-500 flex-shrink-0" />
+                            <audio controls className="flex-1 h-9" style={{minWidth:0}}>
+                                <source src={`${API}/${data.id}/download?inline=1`} type="audio/webm" />
+                            </audio>
+                            <a href={`${API}/${data.id}/download`} download
+                                className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-100 rounded-lg transition-colors flex-shrink-0"
+                                title="파일 다운로드">
+                                <Icon name="download" className="w-4 h-4" />
+                            </a>
+                        </div>
+                    </div>
+                )}
+
                 {/* Body */}
                 <div className="flex-1 overflow-y-auto px-6 py-4">
                     {data.status === 'PROCESSING' && (

From 67c605f5ae6b043ad04156f16164bbca0ce5e82e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 14:35:42 +0900
Subject: [PATCH 18/31] =?UTF-8?q?feat:AI=ED=86=A0=ED=81=B0=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=EB=9F=89=20=ED=85=8C=EC=9D=B4=EB=B8=94=EC=97=90=20?=
 =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EC=97=B4=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 호출메뉴 앞에 카테고리 컬럼 추가
- menu_name에서 카테고리 자동 파생 (AI음성녹음, 회의록, 명함OCR, 사업자등록증OCR)
- 주황색 뱃지로 시각 구분

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../views/system/ai-token-usage/index.blade.php      | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/resources/views/system/ai-token-usage/index.blade.php b/resources/views/system/ai-token-usage/index.blade.php
index 64c3158f..1dbfb4ea 100644
--- a/resources/views/system/ai-token-usage/index.blade.php
+++ b/resources/views/system/ai-token-usage/index.blade.php
@@ -91,6 +91,7 @@
     .badge-blue { background: #dbeafe; color: #1d4ed8; }
     .badge-green { background: #dcfce7; color: #16a34a; }
     .badge-purple { background: #f3e8ff; color: #7c3aed; }
+    .badge-orange { background: #ffedd5; color: #c2410c; }
 
     .empty-state {
         text-align: center;
@@ -139,6 +140,15 @@
 const Hash = createIcon('hash');
 const ArrowUpDown = createIcon('arrow-up-down');
 
+const getCategory = (menuName) => {
+    if (!menuName) return '-';
+    if (menuName.startsWith('AI음성녹음')) return 'AI음성녹음';
+    if (menuName.startsWith('회의록')) return '회의록';
+    if (menuName.includes('명함')) return '명함OCR';
+    if (menuName.includes('사업자등록증')) return '사업자등록증OCR';
+    return menuName;
+};
+
 const fmt = (n) => n != null ? Number(n).toLocaleString() : '0';
 const fmtUsd = (n) => n != null ? '$' + Number(n).toFixed(4) : '$0.0000';
 const fmtKrw = (n) => n != null ? Number(n).toLocaleString('ko-KR', { maximumFractionDigits: 0 }) + '원' : '0원';
@@ -305,6 +315,7 @@ className="bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center gap-1"
                                     <tr>
                                         <th>테넌트</th>
                                         <th>사용일시</th>
+                                        <th>카테고리</th>
                                         <th>호출메뉴</th>
                                         <th>모델</th>
                                         <th className="num">입력토큰</th>
@@ -322,6 +333,7 @@ className="bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center gap-1"
                                                 {' '}{r.tenant_name}
                                             </td>
                                             <td>{r.created_at}</td>
+                                            <td><span className="badge badge-orange">{getCategory(r.menu_name)}</span></td>
                                             <td><span className="badge badge-green">{r.menu_name}</span></td>
                                             <td><span className="badge badge-purple">{r.model}</span></td>
                                             <td className="num">{fmt(r.prompt_tokens)}</td>

From 1040f4ecaaf2d91b9a2ca57c62c75079c42907e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 14:46:58 +0900
Subject: [PATCH 19/31] =?UTF-8?q?feat:AI=ED=86=A0=ED=81=B0=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=EB=9F=89=20=ED=85=8C=EC=9D=B4=EB=B8=94=EC=97=90=20?=
 =?UTF-8?q?=EB=85=B9=EC=9D=8C=EC=8B=9C=EA=B0=84=20=EC=97=B4=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 모델 열 뒤에 녹음시간 컬럼 추가
- STT(google-speech-to-text) 항목에서 prompt_tokens(초)를 '분 초' 형식으로 표시
- 다른 항목은 빈칸 표시

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 resources/views/system/ai-token-usage/index.blade.php | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/resources/views/system/ai-token-usage/index.blade.php b/resources/views/system/ai-token-usage/index.blade.php
index 1dbfb4ea..1099a883 100644
--- a/resources/views/system/ai-token-usage/index.blade.php
+++ b/resources/views/system/ai-token-usage/index.blade.php
@@ -149,6 +149,8 @@
     return menuName;
 };
 
+const fmtDuration = (sec) => { if (!sec || sec <= 0) return ''; const m = Math.floor(sec/60); const s = sec%60; return m > 0 ? `${m}분 ${s}초` : `${s}초`; };
+
 const fmt = (n) => n != null ? Number(n).toLocaleString() : '0';
 const fmtUsd = (n) => n != null ? '$' + Number(n).toFixed(4) : '$0.0000';
 const fmtKrw = (n) => n != null ? Number(n).toLocaleString('ko-KR', { maximumFractionDigits: 0 }) + '원' : '0원';
@@ -318,6 +320,7 @@ className="bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center gap-1"
                                         <th>카테고리</th>
                                         <th>호출메뉴</th>
                                         <th>모델</th>
+                                        <th>녹음시간</th>
                                         <th className="num">입력토큰</th>
                                         <th className="num">출력토큰</th>
                                         <th className="num">전체토큰</th>
@@ -336,6 +339,7 @@ className="bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center gap-1"
                                             <td><span className="badge badge-orange">{getCategory(r.menu_name)}</span></td>
                                             <td><span className="badge badge-green">{r.menu_name}</span></td>
                                             <td><span className="badge badge-purple">{r.model}</span></td>
+                                            <td>{r.model === 'google-speech-to-text' ? fmtDuration(r.prompt_tokens) : ''}</td>
                                             <td className="num">{fmt(r.prompt_tokens)}</td>
                                             <td className="num">{fmt(r.completion_tokens)}</td>
                                             <td className="num font-semibold">{fmt(r.total_tokens)}</td>

From 841a0ac652b6d37edb2f1b9ee7feac68ab946e02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 15:06:28 +0900
Subject: [PATCH 20/31] =?UTF-8?q?fix:Web=20Speech=20API=20=EC=8B=A4?=
 =?UTF-8?q?=EC=8B=9C=EA=B0=84=20=EC=9D=8C=EC=84=B1=EC=9D=B8=EC=8B=9D=20?=
 =?UTF-8?q?=ED=92=88=EC=A7=88=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 세션 간 텍스트 누적 보존 (accumulatedTextRef 추가)
- 침묵으로 인한 자동 재시작 시 이전 텍스트 유실 방지
- 일시정지→재개 시 텍스트 보존
- 재시작 300ms 지연으로 급속 루프 방지
- stop() 후 이벤트 핸들러 제거로 중복 처리 방지

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../system/ai-voice-recording/index.blade.php | 47 ++++++++++++++++---
 1 file changed, 41 insertions(+), 6 deletions(-)

diff --git a/resources/views/system/ai-voice-recording/index.blade.php b/resources/views/system/ai-voice-recording/index.blade.php
index 8945b836..f0b0a574 100644
--- a/resources/views/system/ai-voice-recording/index.blade.php
+++ b/resources/views/system/ai-voice-recording/index.blade.php
@@ -133,6 +133,7 @@ function RecorderWidget({ onDone, categories }) {
     const rafRef = useRef(null);
     const recognitionRef = useRef(null);
     const confirmedRef = useRef([]);
+    const accumulatedTextRef = useRef('');
 
     // Canvas 파형 그리기
     const drawWaveform = useCallback(() => {
@@ -174,7 +175,7 @@ function RecorderWidget({ onDone, categories }) {
         rafRef.current = requestAnimationFrame(drawWaveform);
     }, []);
 
-    // Web Speech API - 실시간 음성인식
+    // Web Speech API - 실시간 음성인식 (세션 간 텍스트 누적 보존)
     const startSpeechRecognition = () => {
         const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
         if (!SpeechRecognition) return;
@@ -185,6 +186,7 @@ function RecorderWidget({ onDone, categories }) {
         recognition.interimResults = true;
         recognition.maxAlternatives = 1;
 
+        // 현재 세션의 확정 결과만 리셋 (누적 텍스트는 유지)
         confirmedRef.current = [];
 
         recognition.onresult = (event) => {
@@ -193,23 +195,41 @@ function RecorderWidget({ onDone, categories }) {
                 const result = event.results[i];
                 const text = result[0].transcript;
                 if (result.isFinal) {
-                    if (!confirmedRef.current[i]) confirmedRef.current[i] = text;
+                    confirmedRef.current[i] = text;
                 } else {
                     interim += text;
                 }
             }
-            setTranscript(confirmedRef.current.filter(Boolean).join(' '));
+            // 이전 세션 누적 + 현재 세션 결합
+            const sessionText = confirmedRef.current.filter(Boolean).join(' ');
+            const fullText = accumulatedTextRef.current
+                ? accumulatedTextRef.current + ' ' + sessionText
+                : sessionText;
+            setTranscript(fullText);
             setInterimTranscript(interim);
         };
 
         recognition.onerror = (event) => {
             if (event.error === 'no-speech' || event.error === 'aborted') return;
+            console.warn('Speech recognition error:', event.error);
         };
 
         recognition.onend = () => {
-            // 녹음 중이면 자동 재시작
+            // 녹음 중이면 현재 세션 텍스트 누적 후 자동 재시작
             if (recognitionRef.current) {
-                try { recognitionRef.current.start(); } catch (e) {}
+                const sessionText = confirmedRef.current.filter(Boolean).join(' ');
+                if (sessionText) {
+                    accumulatedTextRef.current = accumulatedTextRef.current
+                        ? accumulatedTextRef.current + ' ' + sessionText
+                        : sessionText;
+                }
+                confirmedRef.current = [];
+                // 재시작 지연으로 급속 재시작 루프 방지
+                setTimeout(() => {
+                    if (recognitionRef.current) {
+                        try { recognitionRef.current.start(); } catch (e) {}
+                    }
+                }, 300);
             }
         };
 
@@ -219,8 +239,21 @@ function RecorderWidget({ onDone, categories }) {
 
     const stopSpeechRecognition = () => {
         if (recognitionRef.current) {
+            // 현재 세션 텍스트를 누적에 저장
+            const sessionText = confirmedRef.current.filter(Boolean).join(' ');
+            if (sessionText) {
+                accumulatedTextRef.current = accumulatedTextRef.current
+                    ? accumulatedTextRef.current + ' ' + sessionText
+                    : sessionText;
+            }
+            confirmedRef.current = [];
+
             const ref = recognitionRef.current;
-            recognitionRef.current = null; // onend에서 재시작 방지
+            recognitionRef.current = null;
+            // stop() 후 발생하는 이벤트로 인한 중복 방지
+            ref.onresult = null;
+            ref.onend = null;
+            ref.onerror = null;
             try { ref.stop(); } catch (e) {}
         }
     };
@@ -251,6 +284,7 @@ function RecorderWidget({ onDone, categories }) {
             setSeconds(0);
             setTranscript('');
             setInterimTranscript('');
+            accumulatedTextRef.current = '';
             timerRef.current = setInterval(() => setSeconds(s => s + 1), 1000);
             drawWaveform();
             startSpeechRecognition();
@@ -354,6 +388,7 @@ function RecorderWidget({ onDone, categories }) {
         setSeconds(0);
         setTranscript('');
         setInterimTranscript('');
+        accumulatedTextRef.current = '';
     };
 
     const cleanup = () => {

From 6b7214bce7336b0d820cb56c74486a3b5bdc864d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 15:09:48 +0900
Subject: [PATCH 21/31] =?UTF-8?q?fix:AI=20=EC=9D=8C=EC=84=B1=EB=85=B9?=
 =?UTF-8?q?=EC=9D=8C=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=A0=84?=
 =?UTF-8?q?=EC=B2=B4=20=EB=84=88=EB=B9=84=EB=A1=9C=20=ED=99=95=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- max-w-4xl mx-auto 제거하여 콘텐츠 영역 전체 너비 사용

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 resources/views/system/ai-voice-recording/index.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/system/ai-voice-recording/index.blade.php b/resources/views/system/ai-voice-recording/index.blade.php
index f0b0a574..e6057316 100644
--- a/resources/views/system/ai-voice-recording/index.blade.php
+++ b/resources/views/system/ai-voice-recording/index.blade.php
@@ -1034,7 +1034,7 @@ function App() {
     const processingCount = items.filter(i => i.status==='PROCESSING').length;
 
     return (
-        <div className="max-w-4xl mx-auto py-2 px-4">
+        <div className="py-2 px-4">
             <ToastContainer items={toasts} onRemove={id => setToasts(ts => ts.filter(t => t.id !== id))} />
 
             {/* 페이지 헤더 */}

From 2d8c29e68741589dd12db783f08cda61b4d7fd58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 15:12:29 +0900
Subject: [PATCH 22/31] =?UTF-8?q?fix:AI=20=EC=9D=8C=EC=84=B1=EB=85=B9?=
 =?UTF-8?q?=EC=9D=8C=20=EB=B2=84=ED=8A=BC/=EA=B2=80=EC=83=89/=ED=95=84?=
 =?UTF-8?q?=ED=84=B0=EB=A5=BC=20=ED=95=9C=20=ED=96=89=EC=97=90=20=EC=A0=95?=
 =?UTF-8?q?=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 헤더, 검색, 필터, 새녹음, 파일업로드 버튼을 한 줄로 통합
- 통계 카운트를 헤더 옆으로 이동

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../system/ai-voice-recording/index.blade.php | 68 +++++++++----------
 1 file changed, 31 insertions(+), 37 deletions(-)

diff --git a/resources/views/system/ai-voice-recording/index.blade.php b/resources/views/system/ai-voice-recording/index.blade.php
index e6057316..9f8a29bd 100644
--- a/resources/views/system/ai-voice-recording/index.blade.php
+++ b/resources/views/system/ai-voice-recording/index.blade.php
@@ -1037,13 +1037,39 @@ function App() {
         <div className="py-2 px-4">
             <ToastContainer items={toasts} onRemove={id => setToasts(ts => ts.filter(t => t.id !== id))} />
 
-            {/* 페이지 헤더 */}
-            <div className="flex items-center justify-between mb-5">
-                <div>
-                    <h1 className="text-xl font-bold text-gray-900">AI 음성녹음</h1>
-                    <p className="text-sm text-gray-500 mt-0.5">음성을 녹음하거나 파일을 업로드하면 AI가 자동으로 분석합니다</p>
+            {/* 페이지 헤더 + 버튼 + 검색 한 행 */}
+            <div className="flex items-center justify-between mb-5 flex-wrap gap-3">
+                <div className="flex items-center gap-4">
+                    <div>
+                        <h1 className="text-xl font-bold text-gray-900">AI 음성녹음</h1>
+                        <p className="text-sm text-gray-500 mt-0.5">음성을 녹음하거나 파일을 업로드하면 AI가 자동으로 분석합니다</p>
+                    </div>
+                    {paging && <span className="text-sm text-gray-500 whitespace-nowrap">전체 <span className="font-semibold text-gray-800">{paging.total}</span>건</span>}
+                    {processingCount > 0 && (
+                        <span className="flex items-center gap-1 text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full whitespace-nowrap">
+                            <Icon name="loader" className="w-3 h-3 animate-spin" /> {processingCount}건 분석중
+                        </span>
+                    )}
                 </div>
                 <div className="flex items-center gap-2">
+                    <div className="relative">
+                        <Icon name="search" className="w-4 h-4 text-gray-400 absolute left-2.5 top-1/2 -translate-y-1/2" />
+                        <input type="text" value={search}
+                            onChange={e=>{setSearch(e.target.value);setPage(1)}}
+                            placeholder="검색..."
+                            className="pl-8 pr-3 py-1.5 text-sm border border-gray-200 rounded-lg w-44 focus:outline-none focus:ring-2 focus:ring-purple-200 focus:border-purple-400 transition" />
+                    </div>
+                    <select value={status} onChange={e=>{setStatus(e.target.value);setPage(1)}}
+                        className="text-sm border border-gray-200 rounded-lg px-2.5 py-1.5 focus:outline-none focus:ring-2 focus:ring-purple-200 text-gray-600 bg-white">
+                        <option value="">전체</option>
+                        <option value="COMPLETED">완료</option>
+                        <option value="PROCESSING">분석중</option>
+                        <option value="PENDING">대기중</option>
+                        <option value="FAILED">실패</option>
+                    </select>
+                    <button onClick={()=>fetchList()} className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+                        <Icon name="refresh-cw" className="w-4 h-4" />
+                    </button>
                     <button onClick={() => setMode(mode==='record'?'list':'record')}
                         className={`inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-all shadow-sm
                             ${mode==='record'
@@ -1075,38 +1101,6 @@ className={`inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-m
                 </div>
             )}
 
-            {/* 통계 + 필터 */}
-            <div className="flex items-center justify-between mb-3">
-                <div className="flex items-center gap-3">
-                    {paging && <span className="text-sm text-gray-500">전체 <span className="font-semibold text-gray-800">{paging.total}</span>건</span>}
-                    {processingCount > 0 && (
-                        <span className="flex items-center gap-1 text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full">
-                            <Icon name="loader" className="w-3 h-3 animate-spin" /> {processingCount}건 분석중
-                        </span>
-                    )}
-                </div>
-                <div className="flex items-center gap-2">
-                    <div className="relative">
-                        <Icon name="search" className="w-4 h-4 text-gray-400 absolute left-2.5 top-1/2 -translate-y-1/2" />
-                        <input type="text" value={search}
-                            onChange={e=>{setSearch(e.target.value);setPage(1)}}
-                            placeholder="검색..."
-                            className="pl-8 pr-3 py-1.5 text-sm border border-gray-200 rounded-lg w-44 focus:outline-none focus:ring-2 focus:ring-purple-200 focus:border-purple-400 transition" />
-                    </div>
-                    <select value={status} onChange={e=>{setStatus(e.target.value);setPage(1)}}
-                        className="text-sm border border-gray-200 rounded-lg px-2.5 py-1.5 focus:outline-none focus:ring-2 focus:ring-purple-200 text-gray-600 bg-white">
-                        <option value="">전체</option>
-                        <option value="COMPLETED">완료</option>
-                        <option value="PROCESSING">분석중</option>
-                        <option value="PENDING">대기중</option>
-                        <option value="FAILED">실패</option>
-                    </select>
-                    <button onClick={()=>fetchList()} className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
-                        <Icon name="refresh-cw" className="w-4 h-4" />
-                    </button>
-                </div>
-            </div>
-
             {/* 목록 */}
             <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
                 {loading ? (

From 3016b73fb8b3d6d0faf5be620b57419ada77fcaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 15:15:51 +0900
Subject: [PATCH 23/31] =?UTF-8?q?fix:AI=20=EC=9D=8C=EC=84=B1=EB=85=B9?=
 =?UTF-8?q?=EC=9D=8C=20=EA=B2=80=EC=83=89=20=EC=95=84=EC=9D=B4=EC=BD=98/pl?=
 =?UTF-8?q?aceholder=20=EC=9C=84=EC=B9=98=20=EC=9A=B0=EC=B8=A1=20=EC=A1=B0?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 resources/views/system/ai-voice-recording/index.blade.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/system/ai-voice-recording/index.blade.php b/resources/views/system/ai-voice-recording/index.blade.php
index 9f8a29bd..88b9e006 100644
--- a/resources/views/system/ai-voice-recording/index.blade.php
+++ b/resources/views/system/ai-voice-recording/index.blade.php
@@ -1053,11 +1053,11 @@ function App() {
                 </div>
                 <div className="flex items-center gap-2">
                     <div className="relative">
-                        <Icon name="search" className="w-4 h-4 text-gray-400 absolute left-2.5 top-1/2 -translate-y-1/2" />
+                        <Icon name="search" className="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
                         <input type="text" value={search}
                             onChange={e=>{setSearch(e.target.value);setPage(1)}}
                             placeholder="검색..."
-                            className="pl-8 pr-3 py-1.5 text-sm border border-gray-200 rounded-lg w-44 focus:outline-none focus:ring-2 focus:ring-purple-200 focus:border-purple-400 transition" />
+                            className="pl-9 pr-3 py-1.5 text-sm border border-gray-200 rounded-lg w-44 focus:outline-none focus:ring-2 focus:ring-purple-200 focus:border-purple-400 transition" />
                     </div>
                     <select value={status} onChange={e=>{setStatus(e.target.value);setPage(1)}}
                         className="text-sm border border-gray-200 rounded-lg px-2.5 py-1.5 focus:outline-none focus:ring-2 focus:ring-purple-200 text-gray-600 bg-white">

From 351aa3b1c9299aa6375f03d0cc164037aeced71b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 15:17:09 +0900
Subject: [PATCH 24/31] =?UTF-8?q?fix:AI=20=EC=9D=8C=EC=84=B1=EB=85=B9?=
 =?UTF-8?q?=EC=9D=8C=20=EA=B2=80=EC=83=89=20=EC=95=84=EC=9D=B4=EC=BD=98/?=
 =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EA=B2=B9=EC=B9=A8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 입력 패딩 pl-9→pl-10, 너비 w-44→w-48로 조정

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 resources/views/system/ai-voice-recording/index.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/system/ai-voice-recording/index.blade.php b/resources/views/system/ai-voice-recording/index.blade.php
index 88b9e006..4c8bf295 100644
--- a/resources/views/system/ai-voice-recording/index.blade.php
+++ b/resources/views/system/ai-voice-recording/index.blade.php
@@ -1057,7 +1057,7 @@ function App() {
                         <input type="text" value={search}
                             onChange={e=>{setSearch(e.target.value);setPage(1)}}
                             placeholder="검색..."
-                            className="pl-9 pr-3 py-1.5 text-sm border border-gray-200 rounded-lg w-44 focus:outline-none focus:ring-2 focus:ring-purple-200 focus:border-purple-400 transition" />
+                            className="pl-10 pr-3 py-1.5 text-sm border border-gray-200 rounded-lg w-48 focus:outline-none focus:ring-2 focus:ring-purple-200 focus:border-purple-400 transition" />
                     </div>
                     <select value={status} onChange={e=>{setStatus(e.target.value);setPage(1)}}
                         className="text-sm border border-gray-200 rounded-lg px-2.5 py-1.5 focus:outline-none focus:ring-2 focus:ring-purple-200 text-gray-600 bg-white">

From 2dd65686806b9ba1ccaa0314f535ae7f73775d54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 15:29:03 +0900
Subject: [PATCH 25/31] =?UTF-8?q?fix:AI=20=EC=9D=8C=EC=84=B1=EB=85=B9?=
 =?UTF-8?q?=EC=9D=8C=20=EC=A0=84=EC=B2=B4=EA=B1=B4=EC=88=98=EB=A5=BC=20?=
 =?UTF-8?q?=EA=B2=80=EC=83=89=EC=9E=85=EB=A0=A5=EC=B0=BD=20=EC=98=86?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../views/system/ai-voice-recording/index.blade.php  | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/resources/views/system/ai-voice-recording/index.blade.php b/resources/views/system/ai-voice-recording/index.blade.php
index 4c8bf295..60f0ddb6 100644
--- a/resources/views/system/ai-voice-recording/index.blade.php
+++ b/resources/views/system/ai-voice-recording/index.blade.php
@@ -1039,19 +1039,17 @@ function App() {
 
             {/* 페이지 헤더 + 버튼 + 검색 한 행 */}
             <div className="flex items-center justify-between mb-5 flex-wrap gap-3">
-                <div className="flex items-center gap-4">
-                    <div>
-                        <h1 className="text-xl font-bold text-gray-900">AI 음성녹음</h1>
-                        <p className="text-sm text-gray-500 mt-0.5">음성을 녹음하거나 파일을 업로드하면 AI가 자동으로 분석합니다</p>
-                    </div>
+                <div>
+                    <h1 className="text-xl font-bold text-gray-900">AI 음성녹음</h1>
+                    <p className="text-sm text-gray-500 mt-0.5">음성을 녹음하거나 파일을 업로드하면 AI가 자동으로 분석합니다</p>
+                </div>
+                <div className="flex items-center gap-2">
                     {paging && <span className="text-sm text-gray-500 whitespace-nowrap">전체 <span className="font-semibold text-gray-800">{paging.total}</span>건</span>}
                     {processingCount > 0 && (
                         <span className="flex items-center gap-1 text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full whitespace-nowrap">
                             <Icon name="loader" className="w-3 h-3 animate-spin" /> {processingCount}건 분석중
                         </span>
                     )}
-                </div>
-                <div className="flex items-center gap-2">
                     <div className="relative">
                         <Icon name="search" className="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
                         <input type="text" value={search}

From 436c97d9426e34929112d3561d24c06bac2199da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 15:39:41 +0900
Subject: [PATCH 26/31] =?UTF-8?q?fix:=EC=9D=BC=EB=B0=98=EC=A0=84=ED=91=9C?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EC=A0=84=EC=B2=B4=20=EB=84=88=EB=B9=84=EB=A1=9C=20=ED=99=95?=
 =?UTF-8?q?=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- max-w-7xl mx-auto 제거

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 resources/views/finance/journal-entries.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/finance/journal-entries.blade.php b/resources/views/finance/journal-entries.blade.php
index 39e9c0ed..9c056e8b 100644
--- a/resources/views/finance/journal-entries.blade.php
+++ b/resources/views/finance/journal-entries.blade.php
@@ -912,7 +912,7 @@ function App() {
     };
 
     return (
-        <div className="max-w-7xl mx-auto">
+        <div>
             {/* 페이지 헤더 */}
             <div className="mb-6">
                 <h1 className="text-2xl font-bold text-stone-800">일반전표입력</h1>

From 965553a75b1e54719b6cb921e9280eed226952af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 15:50:14 +0900
Subject: [PATCH 27/31] =?UTF-8?q?fix:=EC=B9=B4=EB=93=9C=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=EB=82=B4=EC=97=AD=20=EC=B9=B4=EB=93=9C=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EB=B2=84=ED=8A=BC=EC=97=90=EC=84=9C=20=EB=B0=94?=
 =?UTF-8?q?=EB=A1=9C=EB=B9=8C=20ID=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- card.alias (바로빌 ID) 표시 제거, 카드 뒷번호만 표시

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 resources/views/barobill/ecard/index.blade.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resources/views/barobill/ecard/index.blade.php b/resources/views/barobill/ecard/index.blade.php
index 775a1583..859d50db 100644
--- a/resources/views/barobill/ecard/index.blade.php
+++ b/resources/views/barobill/ecard/index.blade.php
@@ -167,7 +167,6 @@ className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                     }`}
                 >
                     {card.cardBrand} {card.cardNum ? '****' + card.cardNum.slice(-4) : ''}
-                    {card.alias && ` (${card.alias})`}
                 </button>
             ))}
         </div>

From ab7c3bd494ffc9d77e0b6bcea3b540d6992b34c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 7 Feb 2026 18:18:47 +0900
Subject: [PATCH 28/31] =?UTF-8?q?fix:=EC=98=81=EC=97=85=EC=88=98=EC=88=98?=
 =?UTF-8?q?=EB=A3=8C=EC=A0=95=EC=82=B0=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=A0=84=EC=B2=B4=20=EB=84=88=EB=B9=84=EB=A1=9C=20?=
 =?UTF-8?q?=ED=99=95=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- container mx-auto 제거

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 resources/views/finance/sales-commission/index.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/finance/sales-commission/index.blade.php b/resources/views/finance/sales-commission/index.blade.php
index 91faae57..1e835d8e 100644
--- a/resources/views/finance/sales-commission/index.blade.php
+++ b/resources/views/finance/sales-commission/index.blade.php
@@ -3,7 +3,7 @@
 @section('title', '영업수수료정산')
 
 @section('content')
-<div class="container mx-auto px-4 py-6">
+<div class="px-4 py-6">
     {{-- 페이지 헤더 --}}
     <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-4 mb-6">
         <div>

From 4ed902e846a66bea0b42f73e299e890e5103ff1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Mon, 9 Feb 2026 09:33:56 +0900
Subject: [PATCH 29/31] =?UTF-8?q?feat:AI=20=ED=86=A0=ED=81=B0=20=EB=8B=A8?=
 =?UTF-8?q?=EA=B0=80=20=EC=84=A4=EC=A0=95=20UI=20=EB=B0=8F=20DB=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AiPricingConfig 모델 추가 (캐시 적용 단가/환율 조회)
- AiTokenUsageController에 pricingList/pricingUpdate 메서드 추가
- AI 토큰 사용량 페이지에 설정 버튼 + 모달 UI 추가
- AiTokenHelper 하드코딩 단가를 DB 조회로 변경
- pricing 라우트 추가 (GET/PUT)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/Helpers/AiTokenHelper.php                 |  29 +-
 .../System/AiTokenUsageController.php         |  54 ++++
 app/Models/System/AiPricingConfig.php         |  67 +++++
 .../system/ai-token-usage/index.blade.php     | 271 ++++++++++++++++++
 routes/web.php                                |   2 +
 5 files changed, 412 insertions(+), 11 deletions(-)
 create mode 100644 app/Models/System/AiPricingConfig.php

diff --git a/app/Helpers/AiTokenHelper.php b/app/Helpers/AiTokenHelper.php
index de6c20d9..195b43fa 100644
--- a/app/Helpers/AiTokenHelper.php
+++ b/app/Helpers/AiTokenHelper.php
@@ -2,6 +2,7 @@
 
 namespace App\Helpers;
 
+use App\Models\System\AiPricingConfig;
 use App\Models\System\AiTokenUsage;
 use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Str;
@@ -23,9 +24,10 @@ public static function saveGeminiUsage(array $apiResult, string $model, string $
             $completionTokens = $usage['candidatesTokenCount'] ?? 0;
             $totalTokens = $usage['totalTokenCount'] ?? 0;
 
-            // Gemini 2.0 Flash 기준 단가
-            $inputPrice = 0.10 / 1_000_000;
-            $outputPrice = 0.40 / 1_000_000;
+            // DB 단가 조회 (fallback: 하드코딩 기본값)
+            $pricing = AiPricingConfig::getActivePricing('gemini');
+            $inputPrice = $pricing ? (float) $pricing->input_price_per_million / 1_000_000 : 0.10 / 1_000_000;
+            $outputPrice = $pricing ? (float) $pricing->output_price_per_million / 1_000_000 : 0.40 / 1_000_000;
 
             self::save($model, $menuName, $promptTokens, $completionTokens, $totalTokens, $inputPrice, $outputPrice);
         } catch (\Exception $e) {
@@ -48,9 +50,10 @@ public static function saveClaudeUsage(array $apiResult, string $model, string $
             $completionTokens = $usage['output_tokens'] ?? 0;
             $totalTokens = $promptTokens + $completionTokens;
 
-            // Claude 3 Haiku 기준 단가
-            $inputPrice = 0.25 / 1_000_000;
-            $outputPrice = 1.25 / 1_000_000;
+            // DB 단가 조회 (fallback: 하드코딩 기본값)
+            $pricing = AiPricingConfig::getActivePricing('claude');
+            $inputPrice = $pricing ? (float) $pricing->input_price_per_million / 1_000_000 : 0.25 / 1_000_000;
+            $outputPrice = $pricing ? (float) $pricing->output_price_per_million / 1_000_000 : 1.25 / 1_000_000;
 
             self::save($model, $menuName, $promptTokens, $completionTokens, $totalTokens, $inputPrice, $outputPrice);
         } catch (\Exception $e) {
@@ -66,8 +69,10 @@ public static function saveGcsStorageUsage(string $menuName, int $fileSizeBytes)
     {
         try {
             $fileSizeMB = $fileSizeBytes / (1024 * 1024);
-            // 업로드 API 호출 비용 ($0.005/1000 operations) + 월 스토리지 비용 ($0.02/GB, 7일 기준)
-            $operationCost = 0.005 / 1000;
+            // DB 단가 조회 (fallback: 하드코딩 기본값)
+            $pricing = AiPricingConfig::getActivePricing('google-gcs');
+            $unitPrice = $pricing ? (float) $pricing->unit_price : 0.005;
+            $operationCost = $unitPrice / 1000;
             $storageCost = ($fileSizeMB / 1024) * 0.02 * (7 / 30); // 7일 보관 기준
             $costUsd = $operationCost + $storageCost;
 
@@ -84,8 +89,10 @@ public static function saveGcsStorageUsage(string $menuName, int $fileSizeBytes)
     public static function saveSttUsage(string $menuName, int $durationSeconds): void
     {
         try {
-            // latest_long 모델: $0.009 per 15 seconds = $0.0006 per second
-            $costUsd = ceil($durationSeconds / 15) * 0.009;
+            // DB 단가 조회 (fallback: 하드코딩 기본값)
+            $pricing = AiPricingConfig::getActivePricing('google-stt');
+            $sttUnitPrice = $pricing ? (float) $pricing->unit_price : 0.009;
+            $costUsd = ceil($durationSeconds / 15) * $sttUnitPrice;
 
             self::save('google-speech-to-text', $menuName, $durationSeconds, 0, $durationSeconds, $costUsd / max($durationSeconds, 1), 0);
         } catch (\Exception $e) {
@@ -106,7 +113,7 @@ private static function save(
         float $outputPricePerToken,
     ): void {
         $costUsd = ($promptTokens * $inputPricePerToken) + ($completionTokens * $outputPricePerToken);
-        $exchangeRate = (float) config('services.gemini.exchange_rate', 1400);
+        $exchangeRate = AiPricingConfig::getExchangeRate();
         $costKrw = $costUsd * $exchangeRate;
 
         $tenantId = session('selected_tenant_id', 1);
diff --git a/app/Http/Controllers/System/AiTokenUsageController.php b/app/Http/Controllers/System/AiTokenUsageController.php
index 8c9dd7d7..94dfacd1 100644
--- a/app/Http/Controllers/System/AiTokenUsageController.php
+++ b/app/Http/Controllers/System/AiTokenUsageController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers\System;
 
 use App\Http\Controllers\Controller;
+use App\Models\System\AiPricingConfig;
 use App\Models\System\AiTokenUsage;
 use App\Models\Tenants\Tenant;
 use Illuminate\Http\JsonResponse;
@@ -120,4 +121,57 @@ public function list(Request $request): JsonResponse
             ],
         ]);
     }
+
+    public function pricingList(): JsonResponse
+    {
+        $configs = AiPricingConfig::orderBy('id')->get();
+
+        return response()->json([
+            'success' => true,
+            'data' => $configs->map(fn ($c) => [
+                'id' => $c->id,
+                'provider' => $c->provider,
+                'model_name' => $c->model_name,
+                'input_price_per_million' => (float) $c->input_price_per_million,
+                'output_price_per_million' => (float) $c->output_price_per_million,
+                'unit_price' => (float) $c->unit_price,
+                'unit_description' => $c->unit_description,
+                'exchange_rate' => (float) $c->exchange_rate,
+                'is_active' => $c->is_active,
+                'description' => $c->description,
+            ]),
+        ]);
+    }
+
+    public function pricingUpdate(Request $request): JsonResponse
+    {
+        $validated = $request->validate([
+            'configs' => 'required|array',
+            'configs.*.id' => 'required|integer|exists:ai_pricing_configs,id',
+            'configs.*.model_name' => 'required|string|max:100',
+            'configs.*.input_price_per_million' => 'required|numeric|min:0',
+            'configs.*.output_price_per_million' => 'required|numeric|min:0',
+            'configs.*.unit_price' => 'required|numeric|min:0',
+            'configs.*.exchange_rate' => 'required|numeric|min:0',
+            'configs.*.description' => 'nullable|string|max:255',
+        ]);
+
+        foreach ($validated['configs'] as $item) {
+            AiPricingConfig::where('id', $item['id'])->update([
+                'model_name' => $item['model_name'],
+                'input_price_per_million' => $item['input_price_per_million'],
+                'output_price_per_million' => $item['output_price_per_million'],
+                'unit_price' => $item['unit_price'],
+                'exchange_rate' => $item['exchange_rate'],
+                'description' => $item['description'] ?? null,
+            ]);
+        }
+
+        AiPricingConfig::clearCache();
+
+        return response()->json([
+            'success' => true,
+            'message' => '단가 설정이 저장되었습니다.',
+        ]);
+    }
 }
diff --git a/app/Models/System/AiPricingConfig.php b/app/Models/System/AiPricingConfig.php
new file mode 100644
index 00000000..fd7f77d2
--- /dev/null
+++ b/app/Models/System/AiPricingConfig.php
@@ -0,0 +1,67 @@
+<?php
+
+namespace App\Models\System;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Facades\Cache;
+
+class AiPricingConfig extends Model
+{
+    protected $table = 'ai_pricing_configs';
+
+    protected $fillable = [
+        'provider',
+        'model_name',
+        'input_price_per_million',
+        'output_price_per_million',
+        'unit_price',
+        'unit_description',
+        'exchange_rate',
+        'is_active',
+        'description',
+    ];
+
+    protected $casts = [
+        'input_price_per_million' => 'decimal:4',
+        'output_price_per_million' => 'decimal:4',
+        'unit_price' => 'decimal:6',
+        'exchange_rate' => 'decimal:2',
+        'is_active' => 'boolean',
+    ];
+
+    /**
+     * 활성 단가 설정 조회 (캐시 적용)
+     */
+    public static function getActivePricing(string $provider): ?self
+    {
+        return Cache::remember("ai_pricing_{$provider}", 3600, function () use ($provider) {
+            return self::where('provider', $provider)
+                ->where('is_active', true)
+                ->first();
+        });
+    }
+
+    /**
+     * 환율 조회 (첫 번째 활성 레코드 기준)
+     */
+    public static function getExchangeRate(): float
+    {
+        return Cache::remember('ai_pricing_exchange_rate', 3600, function () {
+            $config = self::where('is_active', true)->first();
+
+            return $config ? (float) $config->exchange_rate : 1400.0;
+        });
+    }
+
+    /**
+     * 캐시 초기화
+     */
+    public static function clearCache(): void
+    {
+        $providers = ['gemini', 'claude', 'google-stt', 'google-gcs'];
+        foreach ($providers as $provider) {
+            Cache::forget("ai_pricing_{$provider}");
+        }
+        Cache::forget('ai_pricing_exchange_rate');
+    }
+}
diff --git a/resources/views/system/ai-token-usage/index.blade.php b/resources/views/system/ai-token-usage/index.blade.php
index 1099a883..cbeea004 100644
--- a/resources/views/system/ai-token-usage/index.blade.php
+++ b/resources/views/system/ai-token-usage/index.blade.php
@@ -99,6 +99,86 @@
         color: #9ca3af;
     }
     .empty-state svg { margin: 0 auto 12px; }
+
+    .modal-overlay {
+        position: fixed;
+        inset: 0;
+        background: rgba(0,0,0,0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 50;
+    }
+    .modal-content {
+        background: white;
+        border-radius: 16px;
+        width: 90%;
+        max-width: 800px;
+        max-height: 85vh;
+        overflow-y: auto;
+        box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+    }
+    .modal-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px 24px;
+        border-bottom: 1px solid #e5e7eb;
+    }
+    .modal-header h2 { font-size: 18px; font-weight: 700; color: #111827; }
+    .modal-body { padding: 24px; }
+    .modal-footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+        padding: 16px 24px;
+        border-top: 1px solid #e5e7eb;
+    }
+
+    .pricing-table { width: 100%; border-collapse: collapse; }
+    .pricing-table th {
+        font-size: 12px;
+        font-weight: 600;
+        color: #6b7280;
+        padding: 8px 10px;
+        text-align: left;
+        border-bottom: 2px solid #e5e7eb;
+        white-space: nowrap;
+    }
+    .pricing-table td {
+        padding: 8px 10px;
+        border-bottom: 1px solid #f3f4f6;
+        vertical-align: middle;
+    }
+    .pricing-table input[type="text"],
+    .pricing-table input[type="number"] {
+        border: 1px solid #d1d5db;
+        border-radius: 6px;
+        padding: 5px 8px;
+        font-size: 13px;
+        width: 100%;
+        min-width: 80px;
+    }
+    .pricing-table input:focus {
+        outline: none;
+        border-color: #3b82f6;
+        box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
+    }
+
+    .toast {
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        padding: 12px 20px;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        z-index: 60;
+        animation: slideIn 0.3s ease;
+    }
+    .toast-success { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }
+    .toast-error { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
+    @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
 </style>
 @endpush
 
@@ -139,6 +219,9 @@
 const DollarSign = createIcon('dollar-sign');
 const Hash = createIcon('hash');
 const ArrowUpDown = createIcon('arrow-up-down');
+const Settings = createIcon('settings');
+const X = createIcon('x');
+const Save = createIcon('save');
 
 const getCategory = (menuName) => {
     if (!menuName) return '-';
@@ -155,12 +238,174 @@
 const fmtUsd = (n) => n != null ? '$' + Number(n).toFixed(4) : '$0.0000';
 const fmtKrw = (n) => n != null ? Number(n).toLocaleString('ko-KR', { maximumFractionDigits: 0 }) + '원' : '0원';
 
+const PROVIDER_LABELS = {
+    'gemini': { label: 'Gemini', type: 'token' },
+    'claude': { label: 'Claude', type: 'token' },
+    'google-stt': { label: 'Google STT', type: 'unit' },
+    'google-gcs': { label: 'Google GCS', type: 'unit' },
+};
+
+function PricingModal({ show, onClose, onSaved }) {
+    const [configs, setConfigs] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [saving, setSaving] = useState(false);
+
+    useEffect(() => {
+        if (show) {
+            setLoading(true);
+            fetch('/system/ai-token-usage/pricing')
+                .then(r => r.json())
+                .then(json => { if (json.success) setConfigs(json.data); })
+                .catch(err => console.error('단가 조회 실패:', err))
+                .finally(() => setLoading(false));
+        }
+    }, [show]);
+
+    const updateField = (idx, field, value) => {
+        setConfigs(prev => {
+            const next = [...prev];
+            next[idx] = { ...next[idx], [field]: value };
+            return next;
+        });
+    };
+
+    const handleSave = async () => {
+        setSaving(true);
+        try {
+            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+            const res = await fetch('/system/ai-token-usage/pricing', {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
+                body: JSON.stringify({ configs }),
+            });
+            const json = await res.json();
+            if (json.success) {
+                onSaved('단가 설정이 저장되었습니다.');
+                onClose();
+            } else {
+                onSaved(json.message || '저장 실패', true);
+            }
+        } catch (err) {
+            onSaved('저장 중 오류가 발생했습니다.', true);
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    if (!show) return null;
+
+    return (
+        <div className="modal-overlay" onClick={onClose}>
+            <div className="modal-content" onClick={e => e.stopPropagation()}>
+                <div className="modal-header">
+                    <h2 className="flex items-center gap-2">
+                        <Settings className="w-5 h-5" />
+                        AI 토큰 단가 설정
+                    </h2>
+                    <button onClick={onClose} className="p-1 hover:bg-gray-100 rounded-lg transition">
+                        <X className="w-5 h-5" />
+                    </button>
+                </div>
+                <div className="modal-body">
+                    {loading ? (
+                        <div className="text-center py-8 text-gray-400">
+                            <div className="animate-spin inline-block w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full mb-2"></div>
+                            <p>로딩 중...</p>
+                        </div>
+                    ) : (
+                        <>
+                            <div className="overflow-x-auto">
+                                <table className="pricing-table">
+                                    <thead>
+                                        <tr>
+                                            <th>제공자</th>
+                                            <th>모델명</th>
+                                            <th>입력 단가<br/><span style={{fontWeight:400,fontSize:11}}>$/1M tokens</span></th>
+                                            <th>출력 단가<br/><span style={{fontWeight:400,fontSize:11}}>$/1M tokens</span></th>
+                                            <th>단위 가격<br/><span style={{fontWeight:400,fontSize:11}}>$ per unit</span></th>
+                                            <th>환율<br/><span style={{fontWeight:400,fontSize:11}}>USD→KRW</span></th>
+                                            <th>설명</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {configs.map((c, idx) => {
+                                            const info = PROVIDER_LABELS[c.provider] || { label: c.provider, type: 'token' };
+                                            const isUnit = info.type === 'unit';
+                                            return (
+                                                <tr key={c.id}>
+                                                    <td>
+                                                        <span className="badge badge-purple">{info.label}</span>
+                                                    </td>
+                                                    <td>
+                                                        <input type="text" value={c.model_name}
+                                                            onChange={e => updateField(idx, 'model_name', e.target.value)} />
+                                                    </td>
+                                                    <td>
+                                                        <input type="number" step="0.0001" value={c.input_price_per_million}
+                                                            disabled={isUnit}
+                                                            style={isUnit ? {background:'#f3f4f6',color:'#9ca3af'} : {}}
+                                                            onChange={e => updateField(idx, 'input_price_per_million', parseFloat(e.target.value) || 0)} />
+                                                    </td>
+                                                    <td>
+                                                        <input type="number" step="0.0001" value={c.output_price_per_million}
+                                                            disabled={isUnit}
+                                                            style={isUnit ? {background:'#f3f4f6',color:'#9ca3af'} : {}}
+                                                            onChange={e => updateField(idx, 'output_price_per_million', parseFloat(e.target.value) || 0)} />
+                                                    </td>
+                                                    <td>
+                                                        <input type="number" step="0.000001" value={c.unit_price}
+                                                            disabled={!isUnit}
+                                                            style={!isUnit ? {background:'#f3f4f6',color:'#9ca3af'} : {}}
+                                                            onChange={e => updateField(idx, 'unit_price', parseFloat(e.target.value) || 0)} />
+                                                        {isUnit && c.unit_description && (
+                                                            <div style={{fontSize:11,color:'#9ca3af',marginTop:2}}>{c.unit_description}</div>
+                                                        )}
+                                                    </td>
+                                                    <td>
+                                                        <input type="number" step="0.01" value={c.exchange_rate}
+                                                            onChange={e => updateField(idx, 'exchange_rate', parseFloat(e.target.value) || 0)} />
+                                                    </td>
+                                                    <td>
+                                                        <input type="text" value={c.description || ''}
+                                                            onChange={e => updateField(idx, 'description', e.target.value)} />
+                                                    </td>
+                                                </tr>
+                                            );
+                                        })}
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div style={{marginTop:12,padding:'10px 12px',background:'#fffbeb',borderRadius:8,fontSize:12,color:'#92400e'}}>
+                                * 토큰 기반 모델(Gemini, Claude)은 입력/출력 단가를, 단위 기반 서비스(STT, GCS)는 단위 가격을 수정하세요.
+                                <br/>* 환율 변경 시 모든 모델에 동일하게 적용됩니다. 저장 후 새로운 요청부터 변경된 단가가 적용됩니다.
+                            </div>
+                        </>
+                    )}
+                </div>
+                <div className="modal-footer">
+                    <button onClick={onClose}
+                        className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium transition">
+                        취소
+                    </button>
+                    <button onClick={handleSave} disabled={saving || loading}
+                        className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium transition flex items-center gap-1 disabled:opacity-50">
+                        <Save className="w-4 h-4" />
+                        {saving ? '저장 중...' : '저장'}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
 function AiTokenUsageApp() {
     const [records, setRecords] = useState([]);
     const [stats, setStats] = useState({});
     const [filters, setFilters] = useState({ menu_names: [], tenants: [] });
     const [pagination, setPagination] = useState({ current_page: 1, last_page: 1, per_page: 20, total: 0 });
     const [loading, setLoading] = useState(true);
+    const [showPricingModal, setShowPricingModal] = useState(false);
+    const [toast, setToast] = useState(null);
 
     // 필터 상태
     const today = new Date();
@@ -210,14 +455,40 @@ function AiTokenUsageApp() {
     };
     const goPage = (p) => { fetchData(p); };
 
+    const showToast = (message, isError = false) => {
+        setToast({ message, isError });
+        setTimeout(() => setToast(null), 3000);
+    };
+
     return (
         <div className="space-y-4">
+            {/* Toast 알림 */}
+            {toast && (
+                <div className={`toast ${toast.isError ? 'toast-error' : 'toast-success'}`}>
+                    {toast.message}
+                </div>
+            )}
+
+            {/* 단가 설정 모달 */}
+            <PricingModal
+                show={showPricingModal}
+                onClose={() => setShowPricingModal(false)}
+                onSaved={(msg, isError) => showToast(msg, isError)}
+            />
+
             {/* 페이지 헤더 */}
             <div className="flex justify-between items-center">
                 <h1 className="text-2xl font-bold text-gray-800 flex items-center gap-2">
                     <BrainCircuit className="w-7 h-7" />
                     AI 토큰 사용량
                 </h1>
+                <button
+                    onClick={() => setShowPricingModal(true)}
+                    className="flex items-center gap-1.5 px-3 py-2 bg-white border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-400 transition shadow-sm"
+                >
+                    <Settings className="w-4 h-4" />
+                    단가 설정
+                </button>
             </div>
 
             {/* 통계 카드 */}
diff --git a/routes/web.php b/routes/web.php
index 9de04a5f..98bfac94 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -410,6 +410,8 @@
     Route::prefix('system/ai-token-usage')->name('system.ai-token-usage.')->group(function () {
         Route::get('/', [AiTokenUsageController::class, 'index'])->name('index');
         Route::get('/list', [AiTokenUsageController::class, 'list'])->name('list');
+        Route::get('/pricing', [AiTokenUsageController::class, 'pricingList'])->name('pricing.list');
+        Route::put('/pricing', [AiTokenUsageController::class, 'pricingUpdate'])->name('pricing.update');
     });
 
     // AI 음성녹음 관리

From b204e73ada79cc8148542a8441c47a80bd6c9752 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Mon, 9 Feb 2026 09:46:21 +0900
Subject: [PATCH 30/31] =?UTF-8?q?feat:=EB=B6=80=EA=B0=80=EC=84=B8=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EA=B5=AC=EB=B6=84=206=EA=B0=9C=EB=A1=9C?=
 =?UTF-8?q?=20=ED=99=95=EC=9E=A5=20(=EC=A0=84=EC=9E=90/=EC=A2=85=EC=9D=B4?=
 =?UTF-8?q?=EC=84=B8=EA=B8=88=EA=B3=84=EC=82=B0=EC=84=9C=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 매출(세금계산서) → 매출(전자세금계산서) + 매출(종이세금계산서) 분리
- 매입(세금계산서) → 매입(전자세금계산서) + 매입(종이세금계산서) 분리
- 매입(카드) → 매입(신용카드) 명칭 변경
- 요약 테이블 6행으로 확장, 필터 드롭다운 업데이트
- 컨트롤러 stats에 hometaxSales/manualSales/manualPurchase 분리 반환

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../Finance/VatRecordController.php           | 35 ++++++++++---
 resources/views/finance/vat.blade.php         | 52 +++++++++++++------
 2 files changed, 64 insertions(+), 23 deletions(-)

diff --git a/app/Http/Controllers/Finance/VatRecordController.php b/app/Http/Controllers/Finance/VatRecordController.php
index 72e27dd4..4712cccf 100644
--- a/app/Http/Controllers/Finance/VatRecordController.php
+++ b/app/Http/Controllers/Finance/VatRecordController.php
@@ -195,12 +195,12 @@ public function index(Request $request): JsonResponse
             ->concat($manualRecords)
             ->values();
 
-        // 홈택스 매출 (과세 + 영세만, 면세 제외)
+        // 홈택스 매출 전자세금계산서 (과세 + 영세만, 면세 제외)
         $hometaxSalesTaxable = $hometaxSalesRecords->whereIn('taxType', ['taxable', 'zero_rated']);
         $hometaxSalesSupply = $hometaxSalesTaxable->sum('supplyAmount');
         $hometaxSalesVat = $hometaxSalesTaxable->sum('vatAmount');
 
-        // 홈택스 매입 세금계산서 (과세 + 영세만, 면세 제외)
+        // 홈택스 매입 전자세금계산서 (과세 + 영세만, 면세 제외)
         $hometaxPurchaseTaxable = $hometaxPurchaseRecords->whereIn('taxType', ['taxable', 'zero_rated']);
         $hometaxPurchaseSupply = $hometaxPurchaseTaxable->sum('supplyAmount');
         $hometaxPurchaseVat = $hometaxPurchaseTaxable->sum('vatAmount');
@@ -208,23 +208,42 @@ public function index(Request $request): JsonResponse
         // 홈택스 면세 계산서 (매입 + 매출 모두)
         $exemptSalesSupply = $hometaxSalesRecords->where('taxType', 'exempt')->sum('supplyAmount');
         $exemptPurchaseSupply = $hometaxPurchaseRecords->where('taxType', 'exempt')->sum('supplyAmount');
-        $exemptSupply = $exemptSalesSupply + $exemptPurchaseSupply;
 
+        // 카드 매입
         $cardPurchaseSupply = $cardRecords->sum('supplyAmount');
         $cardPurchaseVat = $cardRecords->sum('vatAmount');
-        $manualSalesSupply = $manualRecords->where('type', 'sales')->sum('supplyAmount');
-        $manualSalesVat = $manualRecords->where('type', 'sales')->sum('vatAmount');
-        $manualPurchaseSupply = $manualRecords->where('type', 'purchase')->sum('supplyAmount');
-        $manualPurchaseVat = $manualRecords->where('type', 'purchase')->sum('vatAmount');
+
+        // 수동입력 매출 종이세금계산서 (과세+영세)
+        $manualSalesTaxable = $manualRecords->where('type', 'sales')->whereIn('taxType', ['taxable', 'zero_rated']);
+        $manualSalesSupply = $manualSalesTaxable->sum('supplyAmount');
+        $manualSalesVat = $manualSalesTaxable->sum('vatAmount');
+
+        // 수동입력 매입 종이세금계산서 (과세+영세)
+        $manualPurchaseTaxable = $manualRecords->where('type', 'purchase')->whereIn('taxType', ['taxable', 'zero_rated']);
+        $manualPurchaseSupply = $manualPurchaseTaxable->sum('supplyAmount');
+        $manualPurchaseVat = $manualPurchaseTaxable->sum('vatAmount');
+
+        // 수동입력 면세 계산서
+        $manualExemptSalesSupply = $manualRecords->where('type', 'sales')->where('taxType', 'exempt')->sum('supplyAmount');
+        $manualExemptPurchaseSupply = $manualRecords->where('type', 'purchase')->where('taxType', 'exempt')->sum('supplyAmount');
+
+        // 면세 계산서 합계 (홈택스 + 수동)
+        $exemptSupply = $exemptSalesSupply + $exemptPurchaseSupply + $manualExemptSalesSupply + $manualExemptPurchaseSupply;
 
         $stats = [
             'salesSupply' => $hometaxSalesSupply + $manualSalesSupply,
             'salesVat' => $hometaxSalesVat + $manualSalesVat,
             'purchaseSupply' => $hometaxPurchaseSupply + $cardPurchaseSupply + $manualPurchaseSupply,
             'purchaseVat' => $hometaxPurchaseVat + $cardPurchaseVat + $manualPurchaseVat,
+            'hometaxSalesSupply' => $hometaxSalesSupply,
+            'hometaxSalesVat' => $hometaxSalesVat,
+            'manualSalesSupply' => $manualSalesSupply,
+            'manualSalesVat' => $manualSalesVat,
             'hometaxPurchaseSupply' => $hometaxPurchaseSupply,
             'hometaxPurchaseVat' => $hometaxPurchaseVat,
-            'exemptSupply' => $exemptSupply,  // 면세 계산서 공급가액
+            'manualPurchaseSupply' => $manualPurchaseSupply,
+            'manualPurchaseVat' => $manualPurchaseVat,
+            'exemptSupply' => $exemptSupply,
             'cardPurchaseSupply' => $cardPurchaseSupply,
             'cardPurchaseVat' => $cardPurchaseVat,
             'total' => $allRecords->count(),
diff --git a/resources/views/finance/vat.blade.php b/resources/views/finance/vat.blade.php
index e0fe7c7c..c83d143b 100644
--- a/resources/views/finance/vat.blade.php
+++ b/resources/views/finance/vat.blade.php
@@ -50,7 +50,7 @@
 
 function VatManagement() {
     const [vatRecords, setVatRecords] = useState([]);
-    const [stats, setStats] = useState({ salesSupply: 0, salesVat: 0, purchaseSupply: 0, purchaseVat: 0, hometaxPurchaseSupply: 0, hometaxPurchaseVat: 0, exemptSupply: 0, cardPurchaseSupply: 0, cardPurchaseVat: 0, total: 0 });
+    const [stats, setStats] = useState({ salesSupply: 0, salesVat: 0, purchaseSupply: 0, purchaseVat: 0, hometaxSalesSupply: 0, hometaxSalesVat: 0, manualSalesSupply: 0, manualSalesVat: 0, hometaxPurchaseSupply: 0, hometaxPurchaseVat: 0, manualPurchaseSupply: 0, manualPurchaseVat: 0, exemptSupply: 0, cardPurchaseSupply: 0, cardPurchaseVat: 0, total: 0 });
     const [periods, setPeriods] = useState([]);
     const [loading, setLoading] = useState(true);
     const [saving, setSaving] = useState(false);
@@ -157,8 +157,10 @@ function VatManagement() {
         if (!matchesSearch || !matchesTaxType) return false;
 
         if (filterType === 'all') return true;
-        if (filterType === 'hometax_sales') return item.type === 'sales' && item.taxType !== 'exempt';
-        if (filterType === 'hometax_purchase') return item.source === 'hometax' && item.type === 'purchase' && item.taxType !== 'exempt';
+        if (filterType === 'electronic_sales') return item.source === 'hometax' && item.type === 'sales' && item.taxType !== 'exempt';
+        if (filterType === 'paper_sales') return item.source === 'manual' && item.type === 'sales' && item.taxType !== 'exempt';
+        if (filterType === 'electronic_purchase') return item.source === 'hometax' && item.type === 'purchase' && item.taxType !== 'exempt';
+        if (filterType === 'paper_purchase') return item.source === 'manual' && item.type === 'purchase' && item.taxType !== 'exempt';
         if (filterType === 'exempt_purchase') return item.taxType === 'exempt';
         if (filterType === 'purchase_card') return item.source === 'card';
         return true;
@@ -168,8 +170,14 @@ function VatManagement() {
     const purchaseVat = stats.purchaseVat || 0;
     const salesSupply = stats.salesSupply || 0;
     const purchaseSupply = stats.purchaseSupply || 0;
+    const hometaxSalesSupply = stats.hometaxSalesSupply || 0;
+    const hometaxSalesVat = stats.hometaxSalesVat || 0;
+    const manualSalesSupply = stats.manualSalesSupply || 0;
+    const manualSalesVat = stats.manualSalesVat || 0;
     const hometaxPurchaseSupply = stats.hometaxPurchaseSupply || 0;
     const hometaxPurchaseVat = stats.hometaxPurchaseVat || 0;
+    const manualPurchaseSupply = stats.manualPurchaseSupply || 0;
+    const manualPurchaseVat = stats.manualPurchaseVat || 0;
     const exemptSupply = stats.exemptSupply || 0;
     const cardPurchaseSupply = stats.cardPurchaseSupply || 0;
     const cardPurchaseVat = stats.cardPurchaseVat || 0;
@@ -246,11 +254,11 @@ function VatManagement() {
     };
 
     const getTypeLabel = (type, isCard = false, source = 'manual') => {
-        if (source === 'hometax' && type === 'sales') return '매출';
-        if (source === 'hometax' && type === 'purchase') return '매입';
-        if (source === 'card' || isCard) return '매입(카드)';
+        if (source === 'hometax' && type === 'sales') return '매출(전자)';
+        if (source === 'hometax' && type === 'purchase') return '매입(전자)';
+        if (source === 'card' || isCard) return '매입(신용카드)';
         if (source === 'manual') {
-            return type === 'sales' ? '매출(수동)' : '매입(수동)';
+            return type === 'sales' ? '매출(종이)' : '매입(종이)';
         }
         const labels = { 'sales': '매출', 'purchase': '매입' };
         return labels[type] || type;
@@ -288,6 +296,8 @@ function VatManagement() {
         if (source === 'card' || isCard) return 'bg-purple-100 text-purple-700';
         if (source === 'hometax' && type === 'sales') return 'bg-emerald-100 text-emerald-700';
         if (source === 'hometax' && type === 'purchase') return 'bg-pink-100 text-pink-700';
+        if (source === 'manual' && type === 'sales') return 'bg-emerald-50 text-emerald-600 border border-emerald-200';
+        if (source === 'manual' && type === 'purchase') return 'bg-pink-50 text-pink-600 border border-pink-200';
         const styles = {
             'sales': 'bg-emerald-50 text-emerald-600',
             'purchase': 'bg-pink-50 text-pink-600'
@@ -364,22 +374,32 @@ function VatManagement() {
                     </thead>
                     <tbody>
                         <tr className="border-b border-gray-100">
-                            <td className="px-6 py-3 text-sm">매출(세금계산서)</td>
-                            <td className="px-6 py-3 text-sm text-right">{formatCurrency(salesSupply)}원</td>
-                            <td className="px-6 py-3 text-sm text-right text-emerald-600 font-medium">{formatCurrency(salesVat)}원</td>
+                            <td className="px-6 py-3 text-sm">매출(전자세금계산서)</td>
+                            <td className="px-6 py-3 text-sm text-right">{formatCurrency(hometaxSalesSupply)}원</td>
+                            <td className="px-6 py-3 text-sm text-right text-emerald-600 font-medium">{formatCurrency(hometaxSalesVat)}원</td>
+                        </tr>
+                        <tr className="border-b border-gray-100 bg-emerald-50/30">
+                            <td className="px-6 py-3 text-sm">매출(종이세금계산서)</td>
+                            <td className="px-6 py-3 text-sm text-right">{formatCurrency(manualSalesSupply)}원</td>
+                            <td className="px-6 py-3 text-sm text-right text-emerald-600 font-medium">{formatCurrency(manualSalesVat)}원</td>
                         </tr>
                         <tr className="border-b border-gray-100">
-                            <td className="px-6 py-3 text-sm">매입(세금계산서)</td>
+                            <td className="px-6 py-3 text-sm">매입(전자세금계산서)</td>
                             <td className="px-6 py-3 text-sm text-right">{formatCurrency(hometaxPurchaseSupply)}원</td>
                             <td className="px-6 py-3 text-sm text-right text-pink-600 font-medium">({formatCurrency(hometaxPurchaseVat)}원)</td>
                         </tr>
+                        <tr className="border-b border-gray-100 bg-pink-50/30">
+                            <td className="px-6 py-3 text-sm">매입(종이세금계산서)</td>
+                            <td className="px-6 py-3 text-sm text-right">{formatCurrency(manualPurchaseSupply)}원</td>
+                            <td className="px-6 py-3 text-sm text-right text-pink-600 font-medium">({formatCurrency(manualPurchaseVat)}원)</td>
+                        </tr>
                         <tr className="border-b border-gray-100 bg-gray-50/50">
                             <td className="px-6 py-3 text-sm text-gray-600">매입(계산서)</td>
                             <td className="px-6 py-3 text-sm text-right text-gray-600">{formatCurrency(exemptSupply)}원</td>
                             <td className="px-6 py-3 text-sm text-right text-gray-400">-</td>
                         </tr>
                         <tr className="border-b border-gray-100 bg-purple-50/50">
-                            <td className="px-6 py-3 text-sm text-purple-700">매입(카드)</td>
+                            <td className="px-6 py-3 text-sm text-purple-700">매입(신용카드)</td>
                             <td className="px-6 py-3 text-sm text-right text-purple-600">{formatCurrency(cardPurchaseSupply)}원</td>
                             <td className="px-6 py-3 text-sm text-right text-purple-600 font-medium">({formatCurrency(cardPurchaseVat)}원)</td>
                         </tr>
@@ -400,10 +420,12 @@ function VatManagement() {
                     </div>
                     <select value={filterType} onChange={(e) => setFilterType(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-lg">
                         <option value="all">전체 유형</option>
-                        <option value="hometax_sales">매출(세금계산서)</option>
-                        <option value="hometax_purchase">매입(세금계산서)</option>
+                        <option value="electronic_sales">매출(전자세금계산서)</option>
+                        <option value="paper_sales">매출(종이세금계산서)</option>
+                        <option value="electronic_purchase">매입(전자세금계산서)</option>
+                        <option value="paper_purchase">매입(종이세금계산서)</option>
                         <option value="exempt_purchase">매입(계산서)</option>
-                        <option value="purchase_card">매입(카드)</option>
+                        <option value="purchase_card">매입(신용카드)</option>
                     </select>
                     <select value={filterTaxType} onChange={(e) => setFilterTaxType(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-lg">
                         <option value="all">전체 세금구분</option>

From 89a5c7000d8bfe8921c413fe5c4ffda115f3728c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Mon, 9 Feb 2026 09:55:27 +0900
Subject: [PATCH 31/31] =?UTF-8?q?fix:=EB=B2=95=EC=9D=B8=EC=B0=A8=EB=9F=89?=
 =?UTF-8?q?=20=EC=B4=9D=20=EC=A3=BC=ED=96=89=EA=B1=B0=EB=A6=AC=EC=97=90=20?=
 =?UTF-8?q?=EC=9A=B4=ED=96=89=EA=B8=B0=EB=A1=9D=20=ED=95=A9=EC=82=B0=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 기존: 초기 주행거리(mileage)만 표시
- 변경: 초기 주행거리 + vehicle_logs.distance_km 합계 = total_mileage
- 요약 카드, CSV 다운로드 모두 total_mileage 사용

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../Finance/CorporateVehicleController.php        | 15 +++++++++++++++
 .../views/finance/corporate-vehicles.blade.php    |  4 ++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/Http/Controllers/Finance/CorporateVehicleController.php b/app/Http/Controllers/Finance/CorporateVehicleController.php
index 51eb31e2..7a457ba7 100644
--- a/app/Http/Controllers/Finance/CorporateVehicleController.php
+++ b/app/Http/Controllers/Finance/CorporateVehicleController.php
@@ -4,9 +4,11 @@
 
 use App\Http\Controllers\Controller;
 use App\Models\CorporateVehicle;
+use App\Models\VehicleLog;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
 use Illuminate\Http\Response;
+use Illuminate\Support\Facades\DB;
 use Illuminate\View\View;
 
 class CorporateVehicleController extends Controller
@@ -50,6 +52,19 @@ public function list(Request $request): JsonResponse
 
         $vehicles = $query->orderBy('created_at', 'desc')->get();
 
+        // 각 차량의 운행기록 주행거리 합계 조회
+        $vehicleIds = $vehicles->pluck('id');
+        $logDistances = VehicleLog::whereIn('vehicle_id', $vehicleIds)
+            ->select('vehicle_id', DB::raw('SUM(distance_km) as total_log_distance'))
+            ->groupBy('vehicle_id')
+            ->pluck('total_log_distance', 'vehicle_id');
+
+        // total_mileage = 초기 주행거리 + 운행기록 합계
+        $vehicles->each(function ($vehicle) use ($logDistances) {
+            $vehicle->log_distance = (int) ($logDistances[$vehicle->id] ?? 0);
+            $vehicle->total_mileage = ($vehicle->mileage ?? 0) + $vehicle->log_distance;
+        });
+
         return response()->json([
             'success' => true,
             'data' => $vehicles,
diff --git a/resources/views/finance/corporate-vehicles.blade.php b/resources/views/finance/corporate-vehicles.blade.php
index 9176e9d4..4a0b0827 100644
--- a/resources/views/finance/corporate-vehicles.blade.php
+++ b/resources/views/finance/corporate-vehicles.blade.php
@@ -258,7 +258,7 @@ function CorporateVehiclesManagement() {
                 item.plate_number, item.model, item.vehicle_type, getOwnershipLabel(item.ownership_type), item.year,
                 item.driver,
                 item.ownership_type === 'corporate' ? item.purchase_price : ((item.monthly_rent || 0) + (item.monthly_rent_tax || 0)),
-                getStatusLabel(item.status), item.mileage
+                getStatusLabel(item.status), item.total_mileage || item.mileage
             ])];
         const csvContent = rows.map(row => row.join(',')).join('\n');
         const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
@@ -309,7 +309,7 @@ function CorporateVehiclesManagement() {
                 </div>
                 <div className="bg-white rounded-xl border border-gray-200 p-6">
                     <div className="flex items-center justify-between mb-2"><span className="text-sm text-gray-500">총 주행거리</span><Gauge className="w-5 h-5 text-gray-400" /></div>
-                    <p className="text-2xl font-bold text-gray-900">{formatCurrency(vehicles.reduce((sum, v) => sum + (v.mileage || 0), 0))}km</p>
+                    <p className="text-2xl font-bold text-gray-900">{formatCurrency(vehicles.reduce((sum, v) => sum + (v.total_mileage || v.mileage || 0), 0))}km</p>
                 </div>
             </div>