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] =?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 />);
 })();