fix(agent-office): 코드 리뷰 이슈 수정

- 하드코딩된 claude 에이전트 참조 제거 (백엔드 에이전트 기반 동적 렌더링)
- TaskHistory에 rejected 상태 배지 추가

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/api.js

@@ -247,20 +247,33 @@ export function deleteSellHistory(id) {
 }
 
 // ── AI 음악 생성 API ──────────────────────────────────────────────────────────
-// POST /api/music/generate  body: { genre, moods, instruments, duration_sec, bpm, key, scale, prompt }
-// → { task_id: string }
+
+// GET /api/music/providers → { providers: [{ id, name, description, features }] }
+export function getMusicProviders() {
+  return apiGet('/api/music/providers');
+}
+
+// POST /api/music/generate
+// body: { provider, genre, moods, instruments, duration_sec, bpm, key, scale, prompt, lyrics, instrumental }
+// → { task_id: string, provider: string }
 export function generateMusic(payload) {
   return apiPost('/api/music/generate', payload);
 }
 
 // GET /api/music/status/:task_id
-// → { status: "queued"|"processing"|"succeeded"|"failed", progress: 0~100, message, audio_url?, error? }
+// → { status, progress, message, audio_url?, error?, provider?, track? }
 export function getMusicStatus(taskId) {
   return apiGet(`/api/music/status/${encodeURIComponent(taskId)}`);
 }
 
+// POST /api/music/lyrics  body: { prompt }
+// → { id, status, text } (Suno 가사 생성)
+export function generateMusicLyrics(prompt) {
+  return apiPost('/api/music/lyrics', { prompt });
+}
+
 // GET /api/music/library
-// → { tracks: [{ id, title, genre, moods, instruments, duration_id, bpm, key, scale, audio_url, created_at }] }
+// → { tracks: [{ id, title, genre, ..., provider, lyrics, image_url, suno_id }] }
 export function getMusicLibrary() {
   return apiGet('/api/music/library');
 }
@@ -277,6 +290,106 @@ export function deleteMusicTrack(id) {
   return apiDelete(`/api/music/library/${id}`);
 }
 
+// GET /api/music/models → { models: [{ id, name, max_duration, description }] }
+export function getMusicModels() {
+  return apiGet('/api/music/models');
+}
+
+// GET /api/music/credits → { remaining, total, ... }
+export function getMusicCredits() {
+  return apiGet('/api/music/credits');
+}
+
+// POST /api/music/extend  body: { suno_id, continue_at, prompt, style, title, model }
+// → { task_id, provider }
+export function extendMusicTrack(payload) {
+  return apiPost('/api/music/extend', payload);
+}
+
+// POST /api/music/vocal-removal  body: { suno_id, title }
+// → { task_id, provider }
+export function removeVocals(payload) {
+  return apiPost('/api/music/vocal-removal', payload);
+}
+
+// ── 저장된 가사 CRUD ─────────────────────────────────────────────────────────
+
+// GET /api/music/lyrics/library → { lyrics: [{ id, title, text, prompt, created_at, updated_at }] }
+export function getSavedLyrics() {
+  return apiGet('/api/music/lyrics/library');
+}
+
+// POST /api/music/lyrics/library  body: { title, text, prompt }
+export function saveLyrics(data) {
+  return apiPost('/api/music/lyrics/library', data);
+}
+
+// PUT /api/music/lyrics/library/:id  body: { title?, text?, prompt? }
+export function updateLyrics(id, data) {
+  return apiPut(`/api/music/lyrics/library/${id}`, data);
+}
+
+// DELETE /api/music/lyrics/library/:id
+export function deleteLyrics(id) {
+  return apiDelete(`/api/music/lyrics/library/${id}`);
+}
+
+// ── Phase 1: 커버 이미지 ────────────────────────────────────────────────────
+
+// POST /api/music/cover-image  body: { suno_task_id, track_id }
+export function generateCoverImage(payload) {
+  return apiPost('/api/music/cover-image', payload);
+}
+
+// ── Phase 2 API ─────────────────────────────────────────────────────────────
+
+// POST /api/music/wav  body: { suno_task_id, suno_id, track_id }
+export function convertToWav(payload) {
+  return apiPost('/api/music/wav', payload);
+}
+
+// POST /api/music/stem-split  body: { suno_task_id, suno_id, track_id }
+export function splitStems(payload) {
+  return apiPost('/api/music/stem-split', payload);
+}
+
+// GET /api/music/timestamped-lyrics?task_id=...&suno_id=...
+export function getTimestampedLyrics(taskId, sunoId) {
+  return apiGet(`/api/music/timestamped-lyrics?task_id=${encodeURIComponent(taskId)}&suno_id=${encodeURIComponent(sunoId)}`);
+}
+
+// POST /api/music/style-boost  body: { content }
+export function generateStyleBoost(content) {
+  return apiPost('/api/music/style-boost', { content });
+}
+
+// ── Phase 3 API ─────────────────────────────────────────────────────────────
+
+// POST /api/music/upload-cover
+export function uploadAndCover(payload) {
+  return apiPost('/api/music/upload-cover', payload);
+}
+
+// POST /api/music/upload-extend
+export function uploadAndExtend(payload) {
+  return apiPost('/api/music/upload-extend', payload);
+}
+
+// POST /api/music/add-vocals
+export function addVocals(payload) {
+  return apiPost('/api/music/add-vocals', payload);
+}
+
+// POST /api/music/add-instrumental
+export function addInstrumental(payload) {
+  return apiPost('/api/music/add-instrumental', payload);
+}
+
+// POST /api/music/video
+export function generateVideo(payload) {
+  return apiPost('/api/music/video', payload);
+}
+
 // ── 로또 고도화 API ────────────────────────────────────────────────────────────
 
 // GET /api/lotto/stats/performance
@@ -366,3 +479,123 @@ export function deleteBlogPost(id) {
   return apiDelete(`/api/blog/posts/${id}`);
 }
 
+// ── 블로그 마케팅 API ────────────────────────────────────────────────────────
+
+export function getBlogMarketingStatus() {
+  return apiGet('/api/blog-marketing/status');
+}
+
+export function startResearch(keyword) {
+  return apiPost('/api/blog-marketing/research', { keyword });
+}
+
+export function getResearchHistory(limit = 30) {
+  return apiGet(`/api/blog-marketing/research/history?limit=${limit}`);
+}
+
+export function getResearchDetail(id) {
+  return apiGet(`/api/blog-marketing/research/${id}`);
+}
+
+export function deleteResearch(id) {
+  return apiDelete(`/api/blog-marketing/research/${id}`);
+}
+
+export function getBlogMarketingTask(taskId) {
+  return apiGet(`/api/blog-marketing/task/${encodeURIComponent(taskId)}`);
+}
+
+export function startGenerate(keywordId) {
+  return apiPost('/api/blog-marketing/generate', { keyword_id: keywordId });
+}
+
+export function startReview(postId) {
+  return apiPost(`/api/blog-marketing/review/${postId}`);
+}
+
+export function startRegenerate(postId) {
+  return apiPost(`/api/blog-marketing/regenerate/${postId}`);
+}
+
+export function getBlogMarketingPosts(status, limit = 50) {
+  const qs = new URLSearchParams();
+  if (status) qs.set('status', status);
+  if (limit) qs.set('limit', String(limit));
+  const q = qs.toString();
+  return apiGet(`/api/blog-marketing/posts${q ? '?' + q : ''}`);
+}
+
+export function getBlogMarketingPost(id) {
+  return apiGet(`/api/blog-marketing/posts/${id}`);
+}
+
+export function updateBlogMarketingPost(id, data) {
+  return apiPut(`/api/blog-marketing/posts/${id}`, data);
+}
+
+export function deleteBlogMarketingPost(id) {
+  return apiDelete(`/api/blog-marketing/posts/${id}`);
+}
+
+export function publishBlogMarketingPost(id, naverUrl) {
+  return apiPost(`/api/blog-marketing/posts/${id}/publish`, { naver_url: naverUrl || '' });
+}
+
+export function getBlogMarketingCommissions(postId) {
+  const qs = postId ? `?post_id=${postId}` : '';
+  return apiGet(`/api/blog-marketing/commissions${qs}`);
+}
+
+export function addBlogMarketingCommission(data) {
+  return apiPost('/api/blog-marketing/commissions', data);
+}
+
+export function updateBlogMarketingCommission(id, data) {
+  return apiPut(`/api/blog-marketing/commissions/${id}`, data);
+}
+
+export function deleteBlogMarketingCommission(id) {
+  return apiDelete(`/api/blog-marketing/commissions/${id}`);
+}
+
+export function getBlogMarketingDashboard() {
+  return apiGet('/api/blog-marketing/dashboard');
+}
+
+// 마케터 단계
+export function startMarket(postId) {
+  return apiPost(`/api/blog-marketing/market/${postId}`);
+}
+
+// 브랜드커넥트 링크 CRUD
+export function getBrandLinks(params = {}) {
+  const qs = new URLSearchParams();
+  if (params.post_id) qs.set('post_id', String(params.post_id));
+  if (params.keyword_id) qs.set('keyword_id', String(params.keyword_id));
+  const q = qs.toString();
+  return apiGet(`/api/blog-marketing/links${q ? '?' + q : ''}`);
+}
+
+export function createBrandLink(data) {
+  return apiPost('/api/blog-marketing/links', data);
+}
+
+export function updateBrandLink(id, data) {
+  return apiPut(`/api/blog-marketing/links/${id}`, data);
+}
+
+export function deleteBrandLink(id) {
+  return apiDelete(`/api/blog-marketing/links/${id}`);
+}
+
+// ── Agent Office ──────────────────────────────────
+export const getAgents         = ()           => apiGet('/api/agent-office/agents');
+export const getAgentDetail    = (id)         => apiGet(`/api/agent-office/agents/${id}`);
+export const updateAgentConfig = (id, body)   => apiPut(`/api/agent-office/agents/${id}`, body);
+export const getAgentTasks     = (id, limit=20) => apiGet(`/api/agent-office/agents/${id}/tasks?limit=${limit}`);
+export const getAgentLogs      = (id, limit=50) => apiGet(`/api/agent-office/agents/${id}/logs?limit=${limit}`);
+export const getPendingTasks   = ()           => apiGet('/api/agent-office/tasks/pending');
+export const sendAgentCommand  = (agent, action, params={}) => apiPost('/api/agent-office/command', { agent, action, params });
+export const approveAgentTask  = (agent, task_id, approved, feedback='') => apiPost('/api/agent-office/approve', { agent, task_id, approved, feedback });
+export const getAgentStates    = ()           => apiGet('/api/agent-office/states');
+

src/components/Icons.jsx

@@ -51,6 +51,15 @@ export const IconStock = () =>
 export const IconTravel = () =>
     svg(<polygon points="3,11 22,2 13,21 11,13 3,11" />);
 
+export const IconMusic = () =>
+    svg(
+        <>
+            <path d="M9 18V5l12-2v13" />
+            <circle cx="6" cy="18" r="3" />
+            <circle cx="18" cy="16" r="3" />
+        </>
+    );
+
 export const IconLab = () =>
     svg(
         <>
@@ -82,6 +91,17 @@ export const IconSubscription = () =>
         </>
     );
 
+export const IconBlogMarketing = () =>
+    svg(
+        <>
+            <path d="M4 4h16v16H4z" />
+            <path d="M8 8h8" />
+            <path d="M8 12h5" />
+            <circle cx="17" cy="15" r="2.5" fill="currentColor" strokeWidth="0" />
+            <path d="M15.5 13l3 4" />
+        </>
+    );
+
 export const IconBuilding = () =>
     svg(
         <>

src/pages/agent-office/AgentOffice.css

@@ -0,0 +1,331 @@
+.ao-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #0d0d1a;
+  color: #e0e0e0;
+  font-family: 'Courier New', monospace;
+}
+
+.ao-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 20px;
+  background: #1a1a2e;
+  border-bottom: 1px solid #2a2a4a;
+}
+
+.ao-title {
+  font-size: 1.4rem;
+  color: #8b5cf6;
+  margin: 0;
+  letter-spacing: 2px;
+}
+
+.ao-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.85rem;
+  color: #888;
+}
+
+.ao-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+.ao-dot--on { background: #34d399; }
+.ao-dot--off { background: #f87171; }
+
+.ao-workspace {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.ao-canvas-container {
+  width: 100%;
+  height: 100%;
+}
+
+.ao-agent-bar {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+  padding: 6px 12px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 20px;
+  backdrop-filter: blur(8px);
+}
+
+.ao-agent-chip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border: 1px solid #333;
+  border-radius: 12px;
+  background: transparent;
+  color: #ccc;
+  font-size: 0.8rem;
+  cursor: pointer;
+  font-family: inherit;
+}
+.ao-agent-chip:hover { border-color: #8b5cf6; }
+.ao-agent-chip--selected { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.15); }
+.ao-agent-chip--alert { animation: ao-pulse 1s infinite; }
+
+@keyframes ao-pulse {
+  0%, 100% { border-color: #fbbf24; }
+  50% { border-color: #f59e0b; box-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }
+}
+
+.ao-chip-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+.ao-chip-dot--idle { background: #666; }
+.ao-chip-dot--working { background: #818cf8; }
+.ao-chip-dot--waiting { background: #fbbf24; }
+.ao-chip-dot--reporting { background: #34d399; }
+.ao-chip-dot--break { background: #a78bfa; }
+
+.ao-chip-badge {
+  background: #f87171;
+  color: #fff;
+  font-size: 0.65rem;
+  padding: 0 4px;
+  border-radius: 4px;
+  font-weight: bold;
+}
+
+.ao-pending-count {
+  color: #fbbf24;
+  font-size: 0.75rem;
+  align-self: center;
+}
+
+.ao-chat-panel {
+  position: absolute;
+  right: 16px;
+  top: 60px;
+  width: 340px;
+  max-height: calc(100% - 80px);
+  background: rgba(26, 26, 46, 0.95);
+  border: 1px solid #333;
+  border-radius: 12px;
+  overflow-y: auto;
+  backdrop-filter: blur(12px);
+}
+
+.ao-chat-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid #2a2a4a;
+}
+
+.ao-chat-title {
+  flex: 1;
+  font-weight: bold;
+  color: #e0e0e0;
+}
+
+.ao-chat-state {
+  font-size: 0.75rem;
+  padding: 2px 8px;
+  border-radius: 8px;
+  text-transform: uppercase;
+}
+.ao-chat-state--idle { background: #333; }
+.ao-chat-state--working { background: #3730a3; }
+.ao-chat-state--waiting { background: #92400e; }
+.ao-chat-state--break { background: #4c1d95; }
+
+.ao-chat-close {
+  background: none;
+  border: none;
+  color: #888;
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+.ao-chat-close:hover { color: #fff; }
+
+.ao-chat-detail {
+  padding: 8px 16px;
+  color: #aaa;
+  font-size: 0.85rem;
+}
+
+.ao-chat-approval {
+  padding: 12px 16px;
+  background: rgba(251, 191, 36, 0.1);
+  border-top: 1px solid #2a2a4a;
+  border-bottom: 1px solid #2a2a4a;
+}
+.ao-chat-approval p {
+  margin: 0 0 8px;
+  color: #fbbf24;
+  font-size: 0.85rem;
+}
+.ao-chat-approval-btns {
+  display: flex;
+  gap: 8px;
+}
+
+.ao-btn {
+  padding: 6px 16px;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  cursor: pointer;
+  font-family: inherit;
+}
+.ao-btn--approve { background: #065f46; color: #34d399; }
+.ao-btn--approve:hover { background: #047857; }
+.ao-btn--reject { background: #7f1d1d; color: #f87171; }
+.ao-btn--reject:hover { background: #991b1b; }
+.ao-btn--send { background: #4c1d95; color: #c4b5fd; }
+.ao-btn--send:hover { background: #5b21b6; }
+
+.ao-chat-commands {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 12px 16px;
+}
+
+.ao-cmd-btn {
+  padding: 6px 12px;
+  border: 1px solid #333;
+  border-radius: 8px;
+  background: transparent;
+  color: #ccc;
+  font-size: 0.8rem;
+  cursor: pointer;
+  font-family: inherit;
+}
+.ao-cmd-btn:hover { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.1); }
+
+.ao-chat-input-area {
+  display: flex;
+  gap: 8px;
+  padding: 8px 16px 12px;
+}
+.ao-chat-input {
+  flex: 1;
+  padding: 8px 12px;
+  background: #111;
+  border: 1px solid #333;
+  border-radius: 6px;
+  color: #e0e0e0;
+  font-size: 0.85rem;
+  font-family: inherit;
+}
+.ao-chat-input:focus { border-color: #8b5cf6; outline: none; }
+
+.ao-chat-result {
+  padding: 8px 16px;
+  border-top: 1px solid #2a2a4a;
+}
+.ao-chat-result h4 {
+  margin: 0 0 8px;
+  font-size: 0.8rem;
+  color: #888;
+}
+.ao-chat-result pre {
+  font-size: 0.75rem;
+  color: #aaa;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  margin: 0;
+}
+
+.ao-history-panel {
+  position: absolute;
+  left: 16px;
+  top: 60px;
+  width: 340px;
+  max-height: calc(100% - 80px);
+  background: rgba(26, 26, 46, 0.95);
+  border: 1px solid #333;
+  border-radius: 12px;
+  overflow-y: auto;
+  backdrop-filter: blur(12px);
+}
+
+.ao-history-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid #2a2a4a;
+  font-weight: bold;
+}
+
+.ao-history-list { padding: 8px; }
+.ao-history-empty { text-align: center; color: #666; padding: 20px; }
+
+.ao-history-item {
+  padding: 10px 12px;
+  border-bottom: 1px solid #1a1a2e;
+}
+.ao-history-item:last-child { border-bottom: none; }
+
+.ao-history-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.ao-history-type { font-size: 0.85rem; color: #ccc; }
+.ao-history-badge {
+  font-size: 0.7rem;
+  padding: 2px 8px;
+  border-radius: 4px;
+  color: #fff;
+}
+.ao-history-time {
+  font-size: 0.75rem;
+  color: #666;
+  margin-top: 4px;
+}
+.ao-history-detail {
+  margin-top: 6px;
+  font-size: 0.75rem;
+}
+.ao-history-detail summary {
+  cursor: pointer;
+  color: #8b5cf6;
+}
+.ao-history-detail pre {
+  color: #aaa;
+  white-space: pre-wrap;
+  margin: 4px 0 0;
+}
+
+.ao-toolbar {
+  display: flex;
+  gap: 8px;
+  padding: 8px 20px;
+  background: #1a1a2e;
+  border-top: 1px solid #2a2a4a;
+}
+
+.ao-tool-btn {
+  padding: 6px 14px;
+  border: 1px solid #333;
+  border-radius: 6px;
+  background: transparent;
+  color: #aaa;
+  font-size: 0.8rem;
+  cursor: pointer;
+  font-family: inherit;
+}
+.ao-tool-btn:hover { border-color: #8b5cf6; color: #e0e0e0; }

src/pages/agent-office/AgentOffice.jsx

@@ -0,0 +1,85 @@
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import { useAgentManager } from './hooks/useAgentManager';
+import { useOfficeCanvas } from './hooks/useOfficeCanvas';
+import ChatPanel from './components/ChatPanel';
+import TaskHistory from './components/TaskHistory';
+import './AgentOffice.css';
+
+export function Component() {
+  const canvasContainerRef = useRef(null);
+  const [selectedAgent, setSelectedAgent] = useState(null);
+  const [showHistory, setShowHistory] = useState(null);
+
+  const { agents, pendingTasks, connected, sendCommand, sendApproval } = useAgentManager();
+
+  const handleAgentClick = useCallback((agentId) => {
+    setSelectedAgent(prev => prev === agentId ? null : agentId);
+  }, []);
+
+  const { updateAgentState, moveAgent } = useOfficeCanvas(canvasContainerRef, handleAgentClick);
+
+  useEffect(() => {
+    for (const [id, info] of Object.entries(agents)) {
+      updateAgentState(id, info.state, info.detail);
+    }
+  }, [agents, updateAgentState]);
+
+  return (
+    <div className="ao-page">
+      <div className="ao-header">
+        <h1 className="ao-title">Agent Office</h1>
+        <div className="ao-status">
+          <span className={`ao-dot ${connected ? 'ao-dot--on' : 'ao-dot--off'}`} />
+          {connected ? 'Connected' : 'Disconnected'}
+        </div>
+      </div>
+
+      <div className="ao-workspace">
+        <div className="ao-canvas-container" ref={canvasContainerRef} />
+
+        <div className="ao-agent-bar">
+          {Object.entries(agents).map(([id, info]) => (
+            <button
+              key={id}
+              className={`ao-agent-chip ${info.state === 'waiting' ? 'ao-agent-chip--alert' : ''} ${selectedAgent === id ? 'ao-agent-chip--selected' : ''}`}
+              onClick={() => handleAgentClick(id)}
+            >
+              <span className={`ao-chip-dot ao-chip-dot--${info.state}`} />
+              {id}
+              {info.state === 'waiting' && <span className="ao-chip-badge">!</span>}
+            </button>
+          ))}
+          {pendingTasks.length > 0 && (
+            <span className="ao-pending-count">{pendingTasks.length} pending</span>
+          )}
+        </div>
+
+        {selectedAgent && (
+          <ChatPanel
+            agentId={selectedAgent}
+            agentState={agents[selectedAgent]}
+            onCommand={sendCommand}
+            onApproval={sendApproval}
+            onClose={() => setSelectedAgent(null)}
+          />
+        )}
+
+        {showHistory && (
+          <TaskHistory
+            agentId={showHistory}
+            onClose={() => setShowHistory(null)}
+          />
+        )}
+      </div>
+
+      <div className="ao-toolbar">
+        {Object.keys(agents).map(id => (
+          <button key={id} className="ao-tool-btn"
+            onClick={() => setShowHistory(prev => prev === id ? null : id)}>
+            📋 {id} 이력
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

src/pages/agent-office/assets/office-map.json

@@ -0,0 +1,45 @@
+{
+  "tileSize": 32,
+  "cols": 20,
+  "rows": 14,
+  "layers": {
+    "floor": [
+      [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+      [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+      [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+      [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+      [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+      [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+      [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+      [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+      [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+      [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+      [2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+      [2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+      [2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+      [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
+    ]
+  },
+  "furniture": [
+    {"type": "desk", "x": 2, "y": 1, "label": "Stock"},
+    {"type": "desk", "x": 7, "y": 1, "label": "Music"},
+    {"type": "desk", "x": 12, "y": 1, "label": "Claude"},
+    {"type": "desk", "x": 17, "y": 1, "label": "(빈)"},
+    {"type": "table", "x": 8, "y": 6, "w": 4, "h": 2, "label": "회의 테이블"},
+    {"type": "sofa", "x": 1, "y": 10, "label": "휴게실"},
+    {"type": "coffee", "x": 3, "y": 10, "label": "☕"},
+    {"type": "desk", "x": 14, "y": 10, "w": 5, "h": 2, "label": "CEO"}
+  ],
+  "waypoints": {
+    "stock_desk": {"x": 2, "y": 2},
+    "music_desk": {"x": 7, "y": 2},
+    "claude_desk": {"x": 12, "y": 2},
+    "meeting_table": {"x": 9, "y": 7},
+    "break_room": {"x": 2, "y": 11},
+    "ceo_desk": {"x": 16, "y": 11}
+  },
+  "colors": {
+    "1": "#3a3a50",
+    "2": "#4a3a2a"
+  }
+}

src/pages/agent-office/canvas/AgentSprite.js

@@ -0,0 +1,84 @@
+import { drawAgent, getAnimSpeed } from './SpriteSheet';
+
+export class AgentSprite {
+  constructor(agentId, waypoints) {
+    this.agentId = agentId;
+    this.waypoints = waypoints;
+    this.state = 'idle';
+    this.detail = '';
+
+    const deskKey = `${agentId}_desk`;
+    const desk = waypoints[deskKey] || { x: 5, y: 3 };
+    this.x = desk.x;
+    this.y = desk.y;
+    this.targetX = desk.x;
+    this.targetY = desk.y;
+    this.deskPos = { x: desk.x, y: desk.y };
+
+    this.frameIndex = 0;
+    this._lastFrameTime = 0;
+    this._moveSpeed = 0.05;
+  }
+
+  setState(newState, detail = '') {
+    this.state = newState;
+    this.detail = detail;
+    this.frameIndex = 0;
+  }
+
+  moveTo(target) {
+    const wp = this.waypoints[target];
+    if (wp) {
+      this.targetX = wp.x;
+      this.targetY = wp.y;
+    }
+  }
+
+  moveToDesk() {
+    this.targetX = this.deskPos.x;
+    this.targetY = this.deskPos.y;
+  }
+
+  update(now) {
+    const speed = getAnimSpeed(this.state);
+    if (now - this._lastFrameTime > speed) {
+      this.frameIndex++;
+      this._lastFrameTime = now;
+    }
+
+    const dx = this.targetX - this.x;
+    const dy = this.targetY - this.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+
+    if (dist > 0.1) {
+      const step = Math.min(this._moveSpeed, dist);
+      this.x += (dx / dist) * step;
+      this.y += (dy / dist) * step;
+    } else {
+      this.x = this.targetX;
+      this.y = this.targetY;
+    }
+  }
+
+  draw(ctx, renderInfo) {
+    const { scale, offsetX, offsetY, tileSize } = renderInfo;
+    const canvasX = offsetX + this.x * tileSize * scale + (tileSize * scale) / 2;
+    const canvasY = offsetY + this.y * tileSize * scale + (tileSize * scale) / 2;
+
+    const isMoving = Math.abs(this.targetX - this.x) > 0.1 || Math.abs(this.targetY - this.y) > 0.1;
+    const drawState = isMoving ? 'walk' : this.state;
+
+    drawAgent(ctx, this.agentId, canvasX, canvasY, drawState, this.frameIndex, scale * 1.5);
+  }
+
+  hitTest(canvasX, canvasY, renderInfo) {
+    const { scale, offsetX, offsetY, tileSize } = renderInfo;
+    const cx = offsetX + this.x * tileSize * scale + (tileSize * scale) / 2;
+    const cy = offsetY + this.y * tileSize * scale + (tileSize * scale) / 2;
+    const hitW = 20 * scale;
+    const hitH = 30 * scale;
+
+    return canvasX >= cx - hitW && canvasX <= cx + hitW &&
+           canvasY >= cy - hitH && canvasY <= cy + hitH;
+  }
+}

src/pages/agent-office/canvas/OfficeRenderer.js

@@ -0,0 +1,129 @@
+import { drawTileMap } from './TileMap';
+import { AgentSprite } from './AgentSprite';
+import { getCharLabel } from './SpriteSheet';
+
+const STATUS_ICONS = {
+  idle: null,
+  working: null,
+  waiting: '❗',
+  reporting: '📋',
+  break: '☕',
+};
+
+export class OfficeRenderer {
+  constructor(canvas, mapData) {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext('2d');
+    this.mapData = mapData;
+    this.renderInfo = null;
+    this.agents = {};
+    this._animId = null;
+    this._onClick = null;
+
+    const agentIds = ['stock', 'music'];
+    for (const id of agentIds) {
+      this.agents[id] = new AgentSprite(id, mapData.waypoints);
+    }
+  }
+
+  start() {
+    this._loop = this._loop.bind(this);
+    this._animId = requestAnimationFrame(this._loop);
+  }
+
+  stop() {
+    if (this._animId) {
+      cancelAnimationFrame(this._animId);
+      this._animId = null;
+    }
+  }
+
+  resize(width, height) {
+    this.canvas.width = width;
+    this.canvas.height = height;
+  }
+
+  setOnClick(handler) {
+    this._onClick = handler;
+  }
+
+  handleClick(canvasX, canvasY) {
+    if (!this.renderInfo) return null;
+
+    for (const [id, sprite] of Object.entries(this.agents)) {
+      if (sprite.hitTest(canvasX, canvasY, this.renderInfo)) {
+        if (this._onClick) this._onClick(id);
+        return id;
+      }
+    }
+    return null;
+  }
+
+  updateAgentState(agentId, state, detail) {
+    const sprite = this.agents[agentId];
+    if (sprite) {
+      sprite.setState(state, detail);
+      if (state === 'idle' || state === 'working' || state === 'waiting') {
+        sprite.moveToDesk();
+      }
+    }
+  }
+
+  moveAgent(agentId, target) {
+    const sprite = this.agents[agentId];
+    if (sprite) {
+      sprite.moveTo(target);
+    }
+  }
+
+  _loop(timestamp) {
+    const { ctx, canvas, mapData } = this;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = '#1a1a2e';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    this.renderInfo = drawTileMap(ctx, mapData, canvas.width, canvas.height);
+
+    const now = Date.now();
+    for (const sprite of Object.values(this.agents)) {
+      sprite.update(now);
+      sprite.draw(ctx, this.renderInfo);
+    }
+
+    for (const [id, sprite] of Object.entries(this.agents)) {
+      this._drawOverlay(ctx, sprite, id);
+    }
+
+    this._animId = requestAnimationFrame(this._loop);
+  }
+
+  _drawOverlay(ctx, sprite, agentId) {
+    if (!this.renderInfo) return;
+    const { scale, offsetX, offsetY, tileSize } = this.renderInfo;
+    const cx = offsetX + sprite.x * tileSize * scale + (tileSize * scale) / 2;
+    const cy = offsetY + sprite.y * tileSize * scale - 10 * scale;
+
+    const icon = STATUS_ICONS[sprite.state];
+    if (icon) {
+      ctx.font = `${14 * scale}px serif`;
+      ctx.textAlign = 'center';
+      ctx.fillText(icon, cx, cy - 15 * scale);
+    }
+
+    ctx.fillStyle = 'rgba(255,255,255,0.7)';
+    ctx.font = `${8 * scale}px monospace`;
+    ctx.textAlign = 'center';
+    ctx.fillText(getCharLabel(agentId), cx, cy + 30 * scale + 30);
+
+    if (sprite.detail && (sprite.state === 'working' || sprite.state === 'waiting')) {
+      const bubbleY = cy - 25 * scale;
+      ctx.fillStyle = 'rgba(0,0,0,0.7)';
+      const textW = ctx.measureText(sprite.detail).width;
+      ctx.fillRect(cx - textW / 2 - 6, bubbleY - 10, textW + 12, 16);
+      ctx.fillStyle = '#fff';
+      ctx.font = `${7 * scale}px monospace`;
+      ctx.fillText(sprite.detail, cx, bubbleY);
+    }
+  }
+}

src/pages/agent-office/canvas/SpriteSheet.js

@@ -0,0 +1,89 @@
+const PIXEL_CHARS = {
+  stock: { body: '#4488cc', accent: '#cc4444', label: '주식', hair: '#332222' },
+  music: { body: '#44aa88', accent: '#ffaa00', label: '음악', hair: '#443322' },
+  claude: { body: '#8855cc', accent: '#cc88ff', label: 'Claude', hair: '#554466' },
+};
+
+const ANIM_FRAMES = {
+  idle: { frames: 2, speed: 800 },
+  working: { frames: 4, speed: 200 },
+  waiting: { frames: 2, speed: 400 },
+  break: { frames: 2, speed: 1000 },
+  walk: { frames: 4, speed: 150 },
+};
+
+export function drawAgent(ctx, agentId, x, y, state, frameIndex, scale = 2) {
+  const char = PIXEL_CHARS[agentId] || PIXEL_CHARS.claude;
+  const s = scale;
+  const anim = ANIM_FRAMES[state] || ANIM_FRAMES.idle;
+  const frame = frameIndex % anim.frames;
+
+  ctx.save();
+  ctx.translate(x, y);
+
+  // Shadow
+  ctx.fillStyle = 'rgba(0,0,0,0.2)';
+  ctx.fillRect(-4 * s, 14 * s, 8 * s, 2 * s);
+
+  // Body
+  ctx.fillStyle = char.body;
+  ctx.fillRect(-3 * s, 2 * s, 6 * s, 8 * s);
+
+  // Head
+  ctx.fillStyle = '#ffcc99';
+  ctx.fillRect(-3 * s, -4 * s, 6 * s, 6 * s);
+
+  // Hair
+  ctx.fillStyle = char.hair;
+  ctx.fillRect(-3 * s, -5 * s, 6 * s, 2 * s);
+
+  // Eyes
+  ctx.fillStyle = '#222';
+  const eyeOffset = state === 'break' && frame === 1 ? 0 : 1;
+  ctx.fillRect(-2 * s, -1 * s, 1 * s, eyeOffset * s);
+  ctx.fillRect(1 * s, -1 * s, 1 * s, eyeOffset * s);
+
+  // Legs
+  ctx.fillStyle = '#335';
+  const legSpread = state === 'walk' ? (frame % 2 === 0 ? 1 : -1) : 0;
+  ctx.fillRect(-2 * s, 10 * s, 2 * s, 4 * s);
+  ctx.fillRect(0 + legSpread * s, 10 * s, 2 * s, 4 * s);
+
+  // Accent
+  ctx.fillStyle = char.accent;
+  if (agentId === 'stock') {
+    ctx.fillRect(0, 2 * s, 1 * s, 5 * s);
+  } else if (agentId === 'music') {
+    ctx.fillRect(-4 * s, -4 * s, 1 * s, 4 * s);
+    ctx.fillRect(3 * s, -4 * s, 1 * s, 4 * s);
+    ctx.fillRect(-4 * s, -5 * s, 8 * s, 1 * s);
+  } else if (agentId === 'claude') {
+    ctx.globalAlpha = 0.3 + 0.2 * Math.sin(Date.now() / 500);
+    ctx.fillRect(-4 * s, -6 * s, 8 * s, 1 * s);
+    ctx.globalAlpha = 1;
+  }
+
+  // Working: typing hands
+  if (state === 'working') {
+    ctx.fillStyle = '#ffcc99';
+    const handY = 6 * s + (frame % 2) * s;
+    ctx.fillRect(-4 * s, handY, 1 * s, 2 * s);
+    ctx.fillRect(3 * s, handY, 1 * s, 2 * s);
+  }
+
+  // Waiting wobble
+  if (state === 'waiting') {
+    const wobble = Math.sin(Date.now() / 200) * s;
+    ctx.translate(wobble, 0);
+  }
+
+  ctx.restore();
+}
+
+export function getAnimSpeed(state) {
+  return (ANIM_FRAMES[state] || ANIM_FRAMES.idle).speed;
+}
+
+export function getCharLabel(agentId) {
+  return (PIXEL_CHARS[agentId] || {}).label || agentId;
+}

src/pages/agent-office/canvas/TileMap.js

@@ -0,0 +1,90 @@
+const WALL_COLOR = '#2a2a3a';
+const DESK_COLOR = '#6b5b3a';
+const DESK_TOP = '#8b7b5a';
+const TABLE_COLOR = '#5a4a2a';
+const SOFA_COLOR = '#884444';
+const MONITOR_COLOR = '#224466';
+const MONITOR_SCREEN = '#44aacc';
+
+export function drawTileMap(ctx, mapData, width, height) {
+  const { tileSize, cols, rows, layers, furniture, colors } = mapData;
+  const scaleX = width / (cols * tileSize);
+  const scaleY = height / (rows * tileSize);
+  const scale = Math.min(scaleX, scaleY);
+
+  const offsetX = (width - cols * tileSize * scale) / 2;
+  const offsetY = (height - rows * tileSize * scale) / 2;
+
+  ctx.save();
+  ctx.translate(offsetX, offsetY);
+  ctx.scale(scale, scale);
+
+  const floor = layers.floor;
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      const tile = floor[r][c];
+      ctx.fillStyle = colors[String(tile)] || '#3a3a50';
+      ctx.fillRect(c * tileSize, r * tileSize, tileSize, tileSize);
+      ctx.strokeStyle = 'rgba(255,255,255,0.03)';
+      ctx.strokeRect(c * tileSize, r * tileSize, tileSize, tileSize);
+    }
+  }
+
+  ctx.fillStyle = WALL_COLOR;
+  ctx.fillRect(0, 0, cols * tileSize, 4);
+
+  for (const f of furniture) {
+    const fx = f.x * tileSize;
+    const fy = f.y * tileSize;
+    const fw = (f.w || 2) * tileSize;
+    const fh = (f.h || 2) * tileSize;
+
+    if (f.type === 'desk') {
+      ctx.fillStyle = DESK_COLOR;
+      ctx.fillRect(fx, fy, fw, fh);
+      ctx.fillStyle = DESK_TOP;
+      ctx.fillRect(fx + 2, fy + 2, fw - 4, 6);
+      const mx = fx + fw / 2 - 8;
+      ctx.fillStyle = MONITOR_COLOR;
+      ctx.fillRect(mx, fy + 4, 16, 12);
+      ctx.fillStyle = MONITOR_SCREEN;
+      ctx.fillRect(mx + 2, fy + 6, 12, 8);
+      if (f.label) {
+        ctx.fillStyle = 'rgba(255,255,255,0.6)';
+        ctx.font = '8px monospace';
+        ctx.textAlign = 'center';
+        ctx.fillText(f.label, fx + fw / 2, fy + fh + 12);
+      }
+    } else if (f.type === 'table') {
+      ctx.fillStyle = TABLE_COLOR;
+      ctx.fillRect(fx, fy, fw, fh);
+      ctx.fillStyle = '#7a6a4a';
+      ctx.fillRect(fx + 4, fy + 4, fw - 8, fh - 8);
+    } else if (f.type === 'sofa') {
+      ctx.fillStyle = SOFA_COLOR;
+      ctx.fillRect(fx, fy, 48, 32);
+      ctx.fillStyle = '#aa5555';
+      ctx.fillRect(fx + 4, fy + 4, 40, 24);
+    } else if (f.type === 'coffee') {
+      ctx.fillStyle = '#664422';
+      ctx.fillRect(fx + 8, fy + 8, 16, 20);
+      ctx.fillStyle = '#886644';
+      ctx.fillRect(fx + 6, fy + 6, 20, 4);
+    }
+  }
+
+  ctx.restore();
+  return { scale, offsetX, offsetY, tileSize };
+}
+
+export function worldToTile(mapData, renderInfo, canvasX, canvasY) {
+  const { scale, offsetX, offsetY, tileSize } = renderInfo;
+  const wx = (canvasX - offsetX) / scale;
+  const wy = (canvasY - offsetY) / scale;
+  return { col: Math.floor(wx / tileSize), row: Math.floor(wy / tileSize), worldX: wx, worldY: wy };
+}
+
+export function tileToCanvas(mapData, renderInfo, col, row) {
+  const { scale, offsetX, offsetY, tileSize } = renderInfo;
+  return { x: offsetX + col * tileSize * scale + (tileSize * scale) / 2, y: offsetY + row * tileSize * scale + (tileSize * scale) / 2 };
+}

src/pages/agent-office/components/ChatPanel.jsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+
+const AGENT_COMMANDS = {
+  stock: [
+    { action: 'fetch_news', label: '뉴스 수집', icon: '📰' },
+    { action: 'list_alerts', label: '알람 목록', icon: '🔔' },
+  ],
+  music: [
+    { action: 'compose', label: '작곡 시작', icon: '🎵', needsInput: true },
+    { action: 'credits', label: '크레딧 확인', icon: '💳' },
+  ],
+};
+
+const ChatPanel = ({ agentId, agentState, onCommand, onApproval, onClose }) => {
+  const [input, setInput] = useState('');
+  const [activeCommand, setActiveCommand] = useState(null);
+
+  const commands = AGENT_COMMANDS[agentId] || [];
+  const state = agentState || {};
+
+  const handleSend = () => {
+    if (!input.trim() || !activeCommand) return;
+    const params = activeCommand === 'compose'
+      ? { prompt: input }
+      : { message: input };
+    onCommand(agentId, activeCommand, params);
+    setInput('');
+    setActiveCommand(null);
+  };
+
+  const handleQuickAction = (cmd) => {
+    if (cmd.needsInput) {
+      setActiveCommand(cmd.action);
+    } else {
+      onCommand(agentId, cmd.action, {});
+    }
+  };
+
+  return (
+    <div className="ao-chat-panel">
+      <div className="ao-chat-header">
+        <span className="ao-chat-title">
+          {agentId === 'stock' ? '주식 트레이더' :
+           agentId === 'music' ? '음악 프로듀서' : agentId}
+        </span>
+        <span className={`ao-chat-state ao-chat-state--${state.state || 'idle'}`}>
+          {state.state || 'idle'}
+        </span>
+        <button className="ao-chat-close" onClick={onClose}>&times;</button>
+      </div>
+
+      {state.detail && (
+        <div className="ao-chat-detail">{state.detail}</div>
+      )}
+
+      {state.state === 'waiting' && state.taskId && (
+        <div className="ao-chat-approval">
+          <p>승인 대기 중인 작업이 있습니다</p>
+          <div className="ao-chat-approval-btns">
+            <button className="ao-btn ao-btn--approve"
+              onClick={() => onApproval(agentId, state.taskId, true)}>
+              ✅ 승인
+            </button>
+            <button className="ao-btn ao-btn--reject"
+              onClick={() => onApproval(agentId, state.taskId, false)}>
+              ❌ 거절
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div className="ao-chat-commands">
+        {commands.map(cmd => (
+          <button key={cmd.action} className="ao-cmd-btn"
+            onClick={() => handleQuickAction(cmd)}>
+            <span>{cmd.icon}</span> {cmd.label}
+          </button>
+        ))}
+      </div>
+
+      {activeCommand && (
+        <div className="ao-chat-input-area">
+          <input
+            type="text"
+            className="ao-chat-input"
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={e => e.key === 'Enter' && handleSend()}
+            placeholder={activeCommand === 'compose' ? '프롬프트 입력...' : '메시지 입력...'}
+            autoFocus
+          />
+          <button className="ao-btn ao-btn--send" onClick={handleSend}>전송</button>
+        </div>
+      )}
+
+      {state.lastResult && (
+        <div className="ao-chat-result">
+          <h4>최근 결과</h4>
+          <pre>{JSON.stringify(state.lastResult, null, 2)}</pre>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ChatPanel;

src/pages/agent-office/components/TaskHistory.jsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+import { getAgentTasks } from '../../../api';
+
+const STATUS_BADGE = {
+  pending: { label: '대기', color: '#fbbf24' },
+  approved: { label: '승인됨', color: '#60a5fa' },
+  working: { label: '진행중', color: '#818cf8' },
+  succeeded: { label: '완료', color: '#34d399' },
+  failed: { label: '실패', color: '#f87171' },
+  rejected: { label: '거절됨', color: '#fb923c' },
+};
+
+const TaskHistory = ({ agentId, onClose }) => {
+  const [tasks, setTasks] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!agentId) return;
+    setLoading(true);
+    getAgentTasks(agentId, 30)
+      .then(data => setTasks(data.tasks || []))
+      .catch(() => setTasks([]))
+      .finally(() => setLoading(false));
+  }, [agentId]);
+
+  return (
+    <div className="ao-history-panel">
+      <div className="ao-history-header">
+        <span>작업 이력 — {agentId}</span>
+        <button className="ao-chat-close" onClick={onClose}>&times;</button>
+      </div>
+      <div className="ao-history-list">
+        {loading && <p className="ao-history-empty">로딩 중...</p>}
+        {!loading && tasks.length === 0 && <p className="ao-history-empty">이력 없음</p>}
+        {tasks.map(task => {
+          const badge = STATUS_BADGE[task.status] || STATUS_BADGE.pending;
+          return (
+            <div key={task.id} className="ao-history-item">
+              <div className="ao-history-item-header">
+                <span className="ao-history-type">{task.task_type}</span>
+                <span className="ao-history-badge" style={{ background: badge.color }}>
+                  {badge.label}
+                </span>
+              </div>
+              <div className="ao-history-time">
+                {task.created_at?.replace('T', ' ').slice(0, 19)}
+              </div>
+              {task.result_data && (
+                <details className="ao-history-detail">
+                  <summary>결과 보기</summary>
+                  <pre>{JSON.stringify(task.result_data, null, 2)}</pre>
+                </details>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default TaskHistory;

src/pages/agent-office/hooks/useAgentManager.js

@@ -0,0 +1,88 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+export function useAgentManager() {
+  const [agents, setAgents] = useState({});
+  const [pendingTasks, setPendingTasks] = useState([]);
+  const [connected, setConnected] = useState(false);
+  const wsRef = useRef(null);
+  const reconnectTimer = useRef(null);
+
+  const connect = useCallback(() => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}/api/agent-office/ws`;
+
+    const ws = new WebSocket(wsUrl);
+    wsRef.current = ws;
+
+    ws.onopen = () => {
+      setConnected(true);
+      if (reconnectTimer.current) clearTimeout(reconnectTimer.current);
+    };
+
+    ws.onclose = () => {
+      setConnected(false);
+      reconnectTimer.current = setTimeout(connect, 3000);
+    };
+
+    ws.onerror = () => { ws.close(); };
+
+    ws.onmessage = (event) => {
+      const msg = JSON.parse(event.data);
+
+      switch (msg.type) {
+        case 'init': {
+          const agentMap = {};
+          for (const a of msg.agents) {
+            agentMap[a.agent_id] = { state: a.state, detail: a.detail };
+          }
+          setAgents(agentMap);
+          setPendingTasks(msg.pending || []);
+          break;
+        }
+        case 'agent_state':
+          setAgents(prev => ({
+            ...prev,
+            [msg.agent]: { state: msg.state, detail: msg.detail, taskId: msg.task_id },
+          }));
+          break;
+        case 'task_complete':
+          setAgents(prev => ({
+            ...prev,
+            [msg.agent]: { ...prev[msg.agent], lastResult: msg.result },
+          }));
+          setPendingTasks(prev => prev.filter(id => id !== msg.task_id));
+          break;
+        case 'command_result':
+          setAgents(prev => ({
+            ...prev,
+            [msg.agent]: { ...prev[msg.agent], lastCommand: msg.result },
+          }));
+          break;
+        default:
+          break;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    connect();
+    return () => {
+      if (wsRef.current) wsRef.current.close();
+      if (reconnectTimer.current) clearTimeout(reconnectTimer.current);
+    };
+  }, [connect]);
+
+  const sendCommand = useCallback((agent, action, params = {}) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: 'command', agent, action, params }));
+    }
+  }, []);
+
+  const sendApproval = useCallback((agent, taskId, approved) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: 'approval', agent, task_id: taskId, approved }));
+    }
+  }, []);
+
+  return { agents, pendingTasks, connected, sendCommand, sendApproval };
+}

src/pages/agent-office/hooks/useOfficeCanvas.js

@@ -0,0 +1,62 @@
+import { useRef, useEffect, useCallback } from 'react';
+import { OfficeRenderer } from '../canvas/OfficeRenderer';
+import officeMap from '../assets/office-map.json';
+
+export function useOfficeCanvas(containerRef, onAgentClick) {
+  const rendererRef = useRef(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const canvas = document.createElement('canvas');
+    canvas.style.display = 'block';
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    canvas.style.imageRendering = 'pixelated';
+    containerRef.current.appendChild(canvas);
+
+    const renderer = new OfficeRenderer(canvas, officeMap);
+    rendererRef.current = renderer;
+
+    const resize = () => {
+      const rect = containerRef.current.getBoundingClientRect();
+      renderer.resize(rect.width, rect.height);
+    };
+
+    resize();
+    renderer.start();
+
+    renderer.setOnClick((agentId) => {
+      if (onAgentClick) onAgentClick(agentId);
+    });
+
+    const handleClick = (e) => {
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      renderer.handleClick(x, y);
+    };
+
+    canvas.addEventListener('click', handleClick);
+    window.addEventListener('resize', resize);
+
+    return () => {
+      renderer.stop();
+      canvas.removeEventListener('click', handleClick);
+      window.removeEventListener('resize', resize);
+      if (containerRef.current && canvas.parentNode === containerRef.current) {
+        containerRef.current.removeChild(canvas);
+      }
+    };
+  }, [containerRef, onAgentClick]);
+
+  const updateAgentState = useCallback((agentId, state, detail) => {
+    rendererRef.current?.updateAgentState(agentId, state, detail);
+  }, []);
+
+  const moveAgent = useCallback((agentId, target) => {
+    rendererRef.current?.moveAgent(agentId, target);
+  }, []);
+
+  return { updateAgentState, moveAgent };
+}

src/pages/blog-marketing/BlogMarketing.css

@@ -0,0 +1,138 @@
+/* ── Blog Marketing ─────────────────────────────────────────────────────── */
+.bm { max-width: 1100px; margin: 0 auto; padding: 24px 16px 80px; }
+
+/* 헤더 */
+.bm-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
+.bm-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--text-primary, #e4e4e7); margin: 0; }
+.bm-status { display: flex; gap: 8px; margin-left: auto; }
+.bm-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 99px; background: rgba(16,185,129,.15); color: #10b981; }
+.bm-badge--off { background: rgba(239,68,68,.12); color: #ef4444; }
+
+/* 탭 바 */
+.bm-tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 20px; }
+.bm-tab { padding: 8px 16px; font-size: 0.85rem; background: none; border: none; color: rgba(255,255,255,.45); cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s; }
+.bm-tab:hover { color: rgba(255,255,255,.7); }
+.bm-tab--active { color: #10b981; border-bottom-color: #10b981; }
+
+/* ── Dashboard 탭 ─────────────────────────────────────────────────────────── */
+.bm-dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
+.bm-dash-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 16px; }
+.bm-dash-card__label { font-size: 0.75rem; color: rgba(255,255,255,.4); margin-bottom: 4px; }
+.bm-dash-card__value { font-size: 1.4rem; font-weight: 700; color: var(--text-primary, #e4e4e7); }
+.bm-dash-card__value--green { color: #10b981; }
+
+.bm-dash-section { margin-bottom: 24px; }
+.bm-dash-section h3 { font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,.6); margin-bottom: 12px; }
+
+.bm-top-posts { display: flex; flex-direction: column; gap: 8px; }
+.bm-top-post { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: rgba(255,255,255,.03); border-radius: 8px; }
+.bm-top-post__title { font-size: 0.85rem; color: var(--text-primary, #e4e4e7); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bm-top-post__rev { font-size: 0.85rem; font-weight: 600; color: #10b981; margin-left: 12px; white-space: nowrap; }
+
+/* ── Research 탭 ──────────────────────────────────────────────────────────── */
+.bm-research-form { display: flex; gap: 8px; margin-bottom: 20px; }
+.bm-research-input { flex: 1; padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: var(--text-primary, #e4e4e7); font-size: 0.9rem; outline: none; }
+.bm-research-input:focus { border-color: #10b981; }
+.bm-research-input::placeholder { color: rgba(255,255,255,.25); }
+
+.bm-btn { padding: 8px 18px; border-radius: 8px; border: none; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: 6px; }
+.bm-btn--primary { background: #10b981; color: #fff; }
+.bm-btn--primary:hover { background: #059669; }
+.bm-btn--primary:disabled { opacity: .5; cursor: not-allowed; }
+.bm-btn--secondary { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }
+.bm-btn--secondary:hover { background: rgba(255,255,255,.12); }
+.bm-btn--danger { background: rgba(239,68,68,.15); color: #ef4444; }
+.bm-btn--danger:hover { background: rgba(239,68,68,.25); }
+.bm-btn--sm { padding: 4px 10px; font-size: 0.75rem; }
+
+.bm-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: bm-spin .6s linear infinite; display: inline-block; }
+@keyframes bm-spin { to { transform: rotate(360deg); } }
+
+/* 분석 카드 */
+.bm-analyses { display: flex; flex-direction: column; gap: 12px; }
+.bm-analysis-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 16px; }
+.bm-analysis-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
+.bm-analysis-card__keyword { font-size: 1rem; font-weight: 700; color: var(--text-primary, #e4e4e7); }
+.bm-analysis-card__date { font-size: 0.7rem; color: rgba(255,255,255,.3); }
+.bm-analysis-card__scores { display: flex; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
+.bm-score { text-align: center; }
+.bm-score__label { font-size: 0.65rem; color: rgba(255,255,255,.4); display: block; margin-bottom: 2px; }
+.bm-score__value { font-size: 1.1rem; font-weight: 700; }
+.bm-score__value--high { color: #10b981; }
+.bm-score__value--mid { color: #fbbf24; }
+.bm-score__value--low { color: #ef4444; }
+.bm-analysis-card__summary { font-size: 0.8rem; color: rgba(255,255,255,.5); line-height: 1.5; }
+.bm-analysis-card__actions { display: flex; gap: 8px; margin-top: 12px; }
+
+/* ── Write 탭 ─────────────────────────────────────────────────────────────── */
+.bm-write-empty { text-align: center; padding: 60px 20px; color: rgba(255,255,255,.3); }
+.bm-write-empty p { font-size: 0.85rem; margin-top: 8px; }
+
+.bm-progress { margin-bottom: 20px; }
+.bm-progress__bar { height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
+.bm-progress__fill { height: 100%; background: #10b981; border-radius: 2px; transition: width .3s; }
+.bm-progress__text { font-size: 0.75rem; color: rgba(255,255,255,.4); }
+
+.bm-preview { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
+.bm-preview__title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary, #e4e4e7); margin-bottom: 12px; }
+.bm-preview__body { font-size: 0.85rem; color: rgba(255,255,255,.6); line-height: 1.7; max-height: 400px; overflow-y: auto; }
+.bm-preview__body h1, .bm-preview__body h2, .bm-preview__body h3 { color: var(--text-primary, #e4e4e7); margin: 16px 0 8px; }
+.bm-preview__body table { width: 100%; border-collapse: collapse; margin: 12px 0; }
+.bm-preview__body th, .bm-preview__body td { border: 1px solid rgba(255,255,255,.1); padding: 6px 10px; font-size: 0.8rem; }
+.bm-preview__body th { background: rgba(255,255,255,.06); }
+.bm-preview__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
+.bm-tag { font-size: 0.7rem; padding: 2px 8px; border-radius: 4px; background: rgba(16,185,129,.12); color: #10b981; }
+
+.bm-review-box { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
+.bm-review-box h4 { font-size: 0.85rem; font-weight: 600; color: var(--text-primary, #e4e4e7); margin-bottom: 10px; }
+.bm-review-scores { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
+.bm-review-score { text-align: center; min-width: 60px; }
+.bm-review-score__label { font-size: 0.65rem; color: rgba(255,255,255,.4); display: block; }
+.bm-review-score__val { font-size: 1rem; font-weight: 700; }
+.bm-review-total { font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; }
+.bm-review-total--pass { color: #10b981; }
+.bm-review-total--fail { color: #ef4444; }
+.bm-review-feedback { font-size: 0.8rem; color: rgba(255,255,255,.5); line-height: 1.5; }
+
+.bm-write-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+
+/* ── Posts 탭 ─────────────────────────────────────────────────────────────── */
+.bm-posts-filter { display: flex; gap: 4px; margin-bottom: 16px; }
+.bm-filter-btn { padding: 4px 12px; border-radius: 6px; border: none; font-size: 0.75rem; background: rgba(255,255,255,.06); color: rgba(255,255,255,.5); cursor: pointer; transition: all .15s; }
+.bm-filter-btn--active { background: rgba(16,185,129,.15); color: #10b981; }
+
+.bm-posts-list { display: flex; flex-direction: column; gap: 10px; }
+.bm-post-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 14px 16px; }
+.bm-post-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
+.bm-post-card__title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary, #e4e4e7); flex: 1; }
+.bm-post-card__status { font-size: 0.65rem; padding: 2px 8px; border-radius: 4px; font-weight: 600; white-space: nowrap; margin-left: 8px; }
+.bm-post-card__status--draft { background: rgba(255,255,255,.08); color: rgba(255,255,255,.5); }
+.bm-post-card__status--reviewed { background: rgba(96,165,250,.15); color: #60a5fa; }
+.bm-post-card__status--published { background: rgba(16,185,129,.15); color: #10b981; }
+.bm-post-card__excerpt { font-size: 0.8rem; color: rgba(255,255,255,.4); margin-bottom: 8px; line-height: 1.4; }
+.bm-post-card__meta { font-size: 0.7rem; color: rgba(255,255,255,.25); display: flex; gap: 12px; }
+.bm-post-card__actions { display: flex; gap: 6px; margin-top: 10px; }
+
+/* 발행 모달 */
+.bm-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 100; display: flex; align-items: center; justify-content: center; }
+.bm-modal { background: #1e1e24; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 24px; width: 90%; max-width: 440px; }
+.bm-modal h3 { font-size: 1rem; font-weight: 700; color: var(--text-primary, #e4e4e7); margin-bottom: 12px; }
+.bm-modal__input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: var(--text-primary, #e4e4e7); font-size: 0.85rem; outline: none; margin-bottom: 14px; }
+.bm-modal__input:focus { border-color: #10b981; }
+.bm-modal__buttons { display: flex; gap: 8px; justify-content: flex-end; }
+
+/* ── 공통 빈 상태 ─────────────────────────────────────────────────────────── */
+.bm-empty { text-align: center; padding: 48px 20px; color: rgba(255,255,255,.25); font-size: 0.85rem; }
+
+/* ── 모바일 ───────────────────────────────────────────────────────────────── */
+@media (max-width: 640px) {
+  .bm { padding: 16px 10px 60px; }
+  .bm-header h1 { font-size: 1.2rem; }
+  .bm-status { display: none; }
+  .bm-tab { padding: 6px 10px; font-size: 0.8rem; }
+  .bm-dash-cards { grid-template-columns: repeat(2, 1fr); }
+  .bm-research-form { flex-direction: column; }
+  .bm-analysis-card__scores { gap: 10px; }
+  .bm-write-actions { flex-direction: column; }
+  .bm-post-card__actions { flex-wrap: wrap; }
+}

src/pages/blog-marketing/BlogMarketing.jsx

@@ -0,0 +1,696 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import {
+  getBlogMarketingStatus,
+  startResearch,
+  getResearchHistory,
+  getResearchDetail,
+  deleteResearch,
+  getBlogMarketingTask,
+  startGenerate,
+  startReview,
+  startRegenerate,
+  startMarket,
+  getBlogMarketingPosts,
+  getBlogMarketingPost,
+  deleteBlogMarketingPost,
+  publishBlogMarketingPost,
+  getBlogMarketingDashboard,
+  getBlogMarketingCommissions,
+  addBlogMarketingCommission,
+  deleteBlogMarketingCommission,
+  getBrandLinks,
+  createBrandLink,
+  deleteBrandLink,
+} from '../../api';
+import './BlogMarketing.css';
+
+/* ────────────────────── 유틸 ────────────────────── */
+function fmtDate(iso) {
+  if (!iso) return '';
+  return new Date(iso).toLocaleDateString('ko-KR', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+}
+function fmtMoney(n) {
+  if (n == null) return '-';
+  return n.toLocaleString('ko-KR') + '원';
+}
+function copyHtmlToClipboard(html) {
+  const blob = new Blob([html], { type: 'text/html' });
+  const plainBlob = new Blob([html.replace(/<[^>]*>/g, '')], { type: 'text/plain' });
+  navigator.clipboard.write([
+    new ClipboardItem({ 'text/html': blob, 'text/plain': plainBlob }),
+  ]).then(() => alert('본문이 클립보드에 복사되었습니다! (서식 포함)'));
+}
+
+function scoreColor(v, max = 100) {
+  const r = v / max;
+  if (r >= 0.6) return 'bm-score__value--high';
+  if (r >= 0.3) return 'bm-score__value--mid';
+  return 'bm-score__value--low';
+}
+
+/* ────────────────────── 폴링 훅 ────────────────────── */
+function usePollTask(onDone) {
+  const [taskId, setTaskId] = useState(null);
+  const [task, setTask] = useState(null);
+  const timer = useRef(null);
+
+  useEffect(() => {
+    if (!taskId) return;
+    let cancelled = false;
+    const poll = async () => {
+      try {
+        const t = await getBlogMarketingTask(taskId);
+        if (cancelled) return;
+        setTask(t);
+        if (t.status === 'succeeded' || t.status === 'failed') {
+          setTaskId(null);
+          onDone?.(t);
+        } else {
+          timer.current = setTimeout(poll, 1500);
+        }
+      } catch {
+        if (!cancelled) timer.current = setTimeout(poll, 3000);
+      }
+    };
+    poll();
+    return () => { cancelled = true; clearTimeout(timer.current); };
+  }, [taskId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return { taskId, task, start: setTaskId, clear: () => { setTaskId(null); setTask(null); } };
+}
+
+/* ══════════════════════════════════════════════════════════════════════════ */
+export default function BlogMarketing() {
+  const [tab, setTab] = useState('dashboard');
+  const [status, setStatus] = useState(null);
+
+  useEffect(() => {
+    getBlogMarketingStatus().then(setStatus).catch(() => {});
+  }, []);
+
+  const tabs = [
+    { id: 'dashboard', label: 'Dashboard' },
+    { id: 'research', label: 'Research' },
+    { id: 'write', label: 'Write' },
+    { id: 'posts', label: 'Posts' },
+  ];
+
+  return (
+    <div className="bm">
+      <header className="bm-header">
+        <h1>Blog Lab</h1>
+        {status && (
+          <div className="bm-status">
+            <span className={`bm-badge ${status.naver_api ? '' : 'bm-badge--off'}`}>
+              Naver {status.naver_api ? 'ON' : 'OFF'}
+            </span>
+            <span className={`bm-badge ${status.claude_api ? '' : 'bm-badge--off'}`}>
+              Claude {status.claude_api ? 'ON' : 'OFF'}
+            </span>
+          </div>
+        )}
+      </header>
+
+      <nav className="bm-tabs">
+        {tabs.map(t => (
+          <button
+            key={t.id}
+            className={`bm-tab ${tab === t.id ? 'bm-tab--active' : ''}`}
+            onClick={() => setTab(t.id)}
+          >
+            {t.label}
+          </button>
+        ))}
+      </nav>
+
+      {tab === 'dashboard' && <DashboardTab />}
+      {tab === 'research' && <ResearchTab onGenerate={(id) => { setTab('write'); }} />}
+      {tab === 'write' && <WriteTab />}
+      {tab === 'posts' && <PostsTab />}
+    </div>
+  );
+}
+
+/* ══════════════════════ Dashboard 탭 ═════════════════════════════════════ */
+function DashboardTab() {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    getBlogMarketingDashboard().then(setData).catch(() => {});
+  }, []);
+
+  if (!data) return <div className="bm-empty">로딩 중...</div>;
+
+  return (
+    <div>
+      <div className="bm-dash-cards">
+        <DashCard label="총 포스트" value={data.total_posts} />
+        <DashCard label="발행 완료" value={data.published_posts} />
+        <DashCard label="총 클릭" value={data.total_clicks.toLocaleString()} />
+        <DashCard label="총 수익" value={fmtMoney(data.total_revenue)} green />
+      </div>
+
+      {data.top_posts?.length > 0 && (
+        <div className="bm-dash-section">
+          <h3>Top 5 포스트 (수익 기준)</h3>
+          <div className="bm-top-posts">
+            {data.top_posts.map(p => (
+              <div key={p.id} className="bm-top-post">
+                <span className="bm-top-post__title">{p.title || '(제목 없음)'}</span>
+                <span className="bm-top-post__rev">{fmtMoney(p.total_revenue)}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {data.monthly?.length > 0 && (
+        <div className="bm-dash-section">
+          <h3>월별 수익</h3>
+          <div className="bm-top-posts">
+            {data.monthly.map(m => (
+              <div key={m.month} className="bm-top-post">
+                <span className="bm-top-post__title">{m.month}</span>
+                <span style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,.4)', marginRight: 12 }}>
+                  클릭 {m.clicks} / 구매 {m.purchases}
+                </span>
+                <span className="bm-top-post__rev">{fmtMoney(m.revenue)}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function DashCard({ label, value, green }) {
+  return (
+    <div className="bm-dash-card">
+      <div className="bm-dash-card__label">{label}</div>
+      <div className={`bm-dash-card__value ${green ? 'bm-dash-card__value--green' : ''}`}>{value}</div>
+    </div>
+  );
+}
+
+/* ══════════════════════ Research 탭 ══════════════════════════════════════ */
+function ResearchTab() {
+  const [keyword, setKeyword] = useState('');
+  const [analyses, setAnalyses] = useState([]);
+  const [expanded, setExpanded] = useState(null);
+
+  const loadHistory = useCallback(() => {
+    getResearchHistory(30).then(r => setAnalyses(r.analyses || [])).catch(() => {});
+  }, []);
+
+  useEffect(() => { loadHistory(); }, [loadHistory]);
+
+  const poll = usePollTask((t) => {
+    if (t.status === 'succeeded') loadHistory();
+  });
+
+  const handleSearch = async () => {
+    if (!keyword.trim() || poll.taskId) return;
+    try {
+      const { task_id } = await startResearch(keyword.trim());
+      poll.start(task_id);
+    } catch (e) {
+      alert(e.message);
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if (!confirm('이 분석을 삭제할까요?')) return;
+    await deleteResearch(id);
+    setAnalyses(prev => prev.filter(a => a.id !== id));
+  };
+
+  const handleGenerate = async (analysisId) => {
+    try {
+      const { task_id } = await startGenerate(analysisId);
+      alert(`글 생성 시작! (task: ${task_id.slice(0, 8)})\nWrite 탭에서 확인하세요.`);
+    } catch (e) {
+      alert(e.message);
+    }
+  };
+
+  return (
+    <div>
+      <div className="bm-research-form">
+        <input
+          className="bm-research-input"
+          placeholder="분석할 키워드를 입력하세요 (예: 무선 이어폰 추천)"
+          value={keyword}
+          onChange={e => setKeyword(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && handleSearch()}
+          disabled={!!poll.taskId}
+        />
+        <button className="bm-btn bm-btn--primary" onClick={handleSearch} disabled={!!poll.taskId}>
+          {poll.taskId ? <><span className="bm-spinner" /> 분석 중...</> : '분석'}
+        </button>
+      </div>
+
+      {poll.task && poll.task.status !== 'succeeded' && poll.task.status !== 'failed' && (
+        <div className="bm-progress">
+          <div className="bm-progress__bar">
+            <div className="bm-progress__fill" style={{ width: `${poll.task.progress || 0}%` }} />
+          </div>
+          <div className="bm-progress__text">{poll.task.message || '처리 중...'}</div>
+        </div>
+      )}
+
+      <div className="bm-analyses">
+        {analyses.length === 0 && !poll.taskId && (
+          <div className="bm-empty">아직 분석 결과가 없습니다. 키워드를 입력해 첫 분석을 시작하세요!</div>
+        )}
+        {analyses.map(a => (
+          <div key={a.id} className="bm-analysis-card">
+            <div className="bm-analysis-card__header">
+              <span className="bm-analysis-card__keyword">{a.keyword}</span>
+              <span className="bm-analysis-card__date">{fmtDate(a.created_at)}</span>
+            </div>
+            <div className="bm-analysis-card__scores">
+              <div className="bm-score">
+                <span className="bm-score__label">경쟁도</span>
+                <span className={`bm-score__value ${scoreColor(a.competition)}`}>{a.competition}</span>
+              </div>
+              <div className="bm-score">
+                <span className="bm-score__label">기회</span>
+                <span className={`bm-score__value ${scoreColor(a.opportunity)}`}>{a.opportunity}</span>
+              </div>
+              <div className="bm-score">
+                <span className="bm-score__label">블로그</span>
+                <span className="bm-score__value" style={{ color: 'rgba(255,255,255,.6)' }}>
+                  {(a.blog_total || 0).toLocaleString()}
+                </span>
+              </div>
+              <div className="bm-score">
+                <span className="bm-score__label">쇼핑</span>
+                <span className="bm-score__value" style={{ color: 'rgba(255,255,255,.6)' }}>
+                  {(a.shop_total || 0).toLocaleString()}
+                </span>
+              </div>
+              {a.avg_price != null && (
+                <div className="bm-score">
+                  <span className="bm-score__label">평균가</span>
+                  <span className="bm-score__value" style={{ color: 'rgba(255,255,255,.6)' }}>
+                    {fmtMoney(a.avg_price)}
+                  </span>
+                </div>
+              )}
+            </div>
+
+            {expanded === a.id && a.top_products?.length > 0 && (
+              <div className="bm-analysis-card__summary">
+                <strong>상위 상품:</strong>
+                <ul style={{ margin: '4px 0 0 16px', padding: 0 }}>
+                  {a.top_products.map((p, i) => (
+                    <li key={i}>{p.title} — {fmtMoney(p.lprice)} ({p.mallName})</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
+            <div className="bm-analysis-card__actions">
+              <button className="bm-btn bm-btn--primary bm-btn--sm" onClick={() => handleGenerate(a.id)}>
+                글 생성
+              </button>
+              <button
+                className="bm-btn bm-btn--secondary bm-btn--sm"
+                onClick={() => setExpanded(expanded === a.id ? null : a.id)}
+              >
+                {expanded === a.id ? '접기' : '상세'}
+              </button>
+              <button className="bm-btn bm-btn--danger bm-btn--sm" onClick={() => handleDelete(a.id)}>
+                삭제
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════ Write 탭 ═════════════════════════════════════════ */
+function WriteTab() {
+  const [posts, setPosts] = useState([]);
+  const [selected, setSelected] = useState(null);
+  const [post, setPost] = useState(null);
+
+  // 브랜드 링크 상태
+  const [links, setLinks] = useState([]);
+  const [showLinkForm, setShowLinkForm] = useState(false);
+  const [linkForm, setLinkForm] = useState({ url: '', product_name: '', description: '', placement_hint: '' });
+
+  const loadPosts = useCallback(() => {
+    Promise.all([
+      getBlogMarketingPosts('draft', 20),
+      getBlogMarketingPosts('marketed', 20),
+    ]).then(([draftRes, marketedRes]) => {
+      const all = [...(draftRes.posts || []), ...(marketedRes.posts || [])];
+      all.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+      setPosts(all);
+      if (all.length > 0 && !selected) setSelected(all[0].id);
+    }).catch(() => {});
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => { loadPosts(); }, [loadPosts]);
+
+  useEffect(() => {
+    if (!selected) { setPost(null); setLinks([]); return; }
+    getBlogMarketingPost(selected).then(setPost).catch(() => {});
+    getBrandLinks({ post_id: selected }).then(r => setLinks(r.links || [])).catch(() => setLinks([]));
+  }, [selected]);
+
+  const reviewPoll = usePollTask((t) => {
+    if (t.status === 'succeeded' && t.result_id) {
+      getBlogMarketingPost(t.result_id).then(setPost).catch(() => {});
+    }
+  });
+
+  const regenPoll = usePollTask((t) => {
+    if (t.status === 'succeeded' && t.result_id) {
+      getBlogMarketingPost(t.result_id).then(setPost).catch(() => {});
+    }
+  });
+
+  const marketPoll = usePollTask((t) => {
+    if (t.status === 'succeeded' && t.result_id) {
+      getBlogMarketingPost(t.result_id).then(setPost).catch(() => {});
+      loadPosts();
+    }
+  });
+
+  const handleReview = async () => {
+    if (!post) return;
+    try {
+      const { task_id } = await startReview(post.id);
+      reviewPoll.start(task_id);
+    } catch (e) { alert(e.message); }
+  };
+
+  const handleRegenerate = async () => {
+    if (!post) return;
+    try {
+      const { task_id } = await startRegenerate(post.id);
+      regenPoll.start(task_id);
+    } catch (e) { alert(e.message); }
+  };
+
+  const handleMarket = async () => {
+    if (!post) return;
+    if (links.length === 0) {
+      alert('마케터 실행 전 브랜드커넥트 링크를 먼저 추가하세요.');
+      return;
+    }
+    try {
+      const { task_id } = await startMarket(post.id);
+      marketPoll.start(task_id);
+    } catch (e) { alert(e.message); }
+  };
+
+  const handleCopy = () => {
+    if (!post) return;
+    copyHtmlToClipboard(post.body);
+  };
+
+  const handleAddLink = async () => {
+    if (!linkForm.url.trim() || !linkForm.product_name.trim()) {
+      alert('URL과 상품명은 필수입니다.');
+      return;
+    }
+    try {
+      await createBrandLink({ ...linkForm, post_id: selected });
+      setLinkForm({ url: '', product_name: '', description: '', placement_hint: '' });
+      setShowLinkForm(false);
+      getBrandLinks({ post_id: selected }).then(r => setLinks(r.links || [])).catch(() => {});
+    } catch (e) { alert(e.message); }
+  };
+
+  const handleDeleteLink = async (linkId) => {
+    if (!confirm('이 링크를 삭제할까요?')) return;
+    await deleteBrandLink(linkId);
+    setLinks(prev => prev.filter(l => l.id !== linkId));
+  };
+
+  const activePoll = reviewPoll.task || regenPoll.task || marketPoll.task;
+  const isProcessing = activePoll && activePoll.status !== 'succeeded' && activePoll.status !== 'failed';
+
+  if (posts.length === 0 && !post) {
+    return (
+      <div className="bm-write-empty">
+        <div style={{ fontSize: '2rem', marginBottom: 8 }}>&#9997;</div>
+        <p>아직 작성 중인 글이 없습니다.<br />Research 탭에서 키워드를 분석하고 글 생성을 시작하세요.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {posts.length > 1 && (
+        <div style={{ display: 'flex', gap: 6, marginBottom: 16, flexWrap: 'wrap' }}>
+          {posts.map(p => (
+            <button
+              key={p.id}
+              className={`bm-filter-btn ${selected === p.id ? 'bm-filter-btn--active' : ''}`}
+              onClick={() => setSelected(p.id)}
+            >
+              {p.title?.slice(0, 20) || `${p.status === 'marketed' ? 'Marketed' : 'Draft'} #${p.id}`}
+              {p.status === 'marketed' && <span style={{ marginLeft: 4, fontSize: '0.7rem', color: '#f59e0b' }}>[M]</span>}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {isProcessing && activePoll && (
+        <div className="bm-progress">
+          <div className="bm-progress__bar">
+            <div className="bm-progress__fill" style={{ width: `${activePoll.progress || 0}%` }} />
+          </div>
+          <div className="bm-progress__text">{activePoll.message || '처리 중...'}</div>
+        </div>
+      )}
+
+      {post && (
+        <>
+          {/* 브랜드커넥트 링크 섹션 */}
+          <div className="bm-links-section" style={{ marginBottom: 16, padding: 12, background: 'rgba(255,255,255,0.04)', borderRadius: 8 }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
+              <h4 style={{ margin: 0, fontSize: '0.9rem' }}>브랜드커넥트 링크 ({links.length})</h4>
+              <button className="bm-btn bm-btn--secondary bm-btn--sm" onClick={() => setShowLinkForm(!showLinkForm)}>
+                {showLinkForm ? '취소' : '+ 링크 추가'}
+              </button>
+            </div>
+
+            {showLinkForm && (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 12, padding: 12, background: 'rgba(0,0,0,0.2)', borderRadius: 6 }}>
+                <input
+                  className="bm-research-input"
+                  placeholder="제휴 링크 URL (필수)"
+                  value={linkForm.url}
+                  onChange={e => setLinkForm(p => ({ ...p, url: e.target.value }))}
+                  style={{ fontSize: '0.85rem' }}
+                />
+                <input
+                  className="bm-research-input"
+                  placeholder="상품명 (필수)"
+                  value={linkForm.product_name}
+                  onChange={e => setLinkForm(p => ({ ...p, product_name: e.target.value }))}
+                  style={{ fontSize: '0.85rem' }}
+                />
+                <input
+                  className="bm-research-input"
+                  placeholder="상품 설명 (선택)"
+                  value={linkForm.description}
+                  onChange={e => setLinkForm(p => ({ ...p, description: e.target.value }))}
+                  style={{ fontSize: '0.85rem' }}
+                />
+                <input
+                  className="bm-research-input"
+                  placeholder="배치 힌트 (선택, 예: 본문 중간 자연스럽게)"
+                  value={linkForm.placement_hint}
+                  onChange={e => setLinkForm(p => ({ ...p, placement_hint: e.target.value }))}
+                  style={{ fontSize: '0.85rem' }}
+                />
+                <button className="bm-btn bm-btn--primary bm-btn--sm" onClick={handleAddLink}>등록</button>
+              </div>
+            )}
+
+            {links.length > 0 && (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                {links.map(l => (
+                  <div key={l.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '6px 8px', background: 'rgba(255,255,255,0.03)', borderRadius: 4, fontSize: '0.8rem' }}>
+                    <div style={{ flex: 1 }}>
+                      <strong>{l.product_name}</strong>
+                      {l.description && <span style={{ marginLeft: 8, color: 'rgba(255,255,255,.4)' }}>{l.description}</span>}
+                    </div>
+                    <button className="bm-btn bm-btn--danger bm-btn--sm" onClick={() => handleDeleteLink(l.id)} style={{ fontSize: '0.7rem', padding: '2px 6px' }}>삭제</button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div className="bm-preview">
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <div className="bm-preview__title">{post.title || '(제목 없음)'}</div>
+              <span className={`bm-post-card__status bm-post-card__status--${post.status}`} style={{ fontSize: '0.75rem' }}>
+                {post.status}
+              </span>
+            </div>
+            <div className="bm-preview__body" dangerouslySetInnerHTML={{ __html: post.body }} />
+            {post.tags?.length > 0 && (
+              <div className="bm-preview__tags">
+                {post.tags.map((t, i) => <span key={i} className="bm-tag">#{t}</span>)}
+              </div>
+            )}
+          </div>
+
+          {post.review_detail && post.review_score != null && (
+            <div className="bm-review-box">
+              <h4>품질 리뷰 결과</h4>
+              <div className="bm-review-scores">
+                {Object.entries(post.review_detail.scores || {}).map(([k, v]) => (
+                  <div key={k} className="bm-review-score">
+                    <span className="bm-review-score__label">{k}</span>
+                    <span className={`bm-review-score__val ${scoreColor(v, 10)}`}>{v}</span>
+                  </div>
+                ))}
+              </div>
+              <div className={`bm-review-total ${post.review_detail.pass ? 'bm-review-total--pass' : 'bm-review-total--fail'}`}>
+                총점: {post.review_score}/60 {post.review_detail.pass ? '(통과)' : '(미달)'}
+              </div>
+              {post.review_detail.feedback && (
+                <div className="bm-review-feedback">{post.review_detail.feedback}</div>
+              )}
+            </div>
+          )}
+
+          <div className="bm-write-actions">
+            {post.status === 'draft' && (
+              <button className="bm-btn bm-btn--primary" onClick={handleMarket} disabled={isProcessing} title={links.length === 0 ? '브랜드 링크를 먼저 추가하세요' : ''}>
+                {marketPoll.taskId ? <><span className="bm-spinner" /> 마케팅 중...</> : '마케터 실행'}
+              </button>
+            )}
+            <button className="bm-btn bm-btn--primary" onClick={handleReview} disabled={isProcessing}>
+              {reviewPoll.taskId ? <><span className="bm-spinner" /> 리뷰 중...</> : '품질 리뷰'}
+            </button>
+            <button className="bm-btn bm-btn--secondary" onClick={handleRegenerate} disabled={isProcessing}>
+              {regenPoll.taskId ? <><span className="bm-spinner" /> 재생성 중...</> : '재생성'}
+            </button>
+            <button className="bm-btn bm-btn--secondary" onClick={handleCopy}>
+              본문 복사
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+/* ══════════════════════ Posts 탭 ═════════════════════════════════════════ */
+function PostsTab() {
+  const [filter, setFilter] = useState('');
+  const [posts, setPosts] = useState([]);
+  const [publishModal, setPublishModal] = useState(null);
+  const [naverUrl, setNaverUrl] = useState('');
+
+  const load = useCallback(() => {
+    getBlogMarketingPosts(filter || undefined).then(r => setPosts(r.posts || [])).catch(() => {});
+  }, [filter]);
+
+  useEffect(() => { load(); }, [load]);
+
+  const handleDelete = async (id) => {
+    if (!confirm('이 포스트를 삭제할까요?')) return;
+    await deleteBlogMarketingPost(id);
+    setPosts(prev => prev.filter(p => p.id !== id));
+  };
+
+  const handlePublish = async () => {
+    if (!publishModal) return;
+    await publishBlogMarketingPost(publishModal, naverUrl);
+    setPublishModal(null);
+    setNaverUrl('');
+    load();
+  };
+
+  const handleCopy = (body) => {
+    copyHtmlToClipboard(body);
+  };
+
+  const filters = [
+    { id: '', label: '전체' },
+    { id: 'draft', label: 'Draft' },
+    { id: 'marketed', label: 'Marketed' },
+    { id: 'reviewed', label: 'Reviewed' },
+    { id: 'published', label: 'Published' },
+  ];
+
+  return (
+    <div>
+      <div className="bm-posts-filter">
+        {filters.map(f => (
+          <button
+            key={f.id}
+            className={`bm-filter-btn ${filter === f.id ? 'bm-filter-btn--active' : ''}`}
+            onClick={() => setFilter(f.id)}
+          >
+            {f.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="bm-posts-list">
+        {posts.length === 0 && <div className="bm-empty">포스트가 없습니다.</div>}
+        {posts.map(p => (
+          <div key={p.id} className="bm-post-card">
+            <div className="bm-post-card__top">
+              <span className="bm-post-card__title">{p.title || '(제목 없음)'}</span>
+              <span className={`bm-post-card__status bm-post-card__status--${p.status}`}>
+                {p.status}
+              </span>
+            </div>
+            {p.excerpt && <div className="bm-post-card__excerpt">{p.excerpt}</div>}
+            <div className="bm-post-card__meta">
+              {p.review_score != null && <span>리뷰: {p.review_score}/60</span>}
+              {p.naver_url && <a href={p.naver_url} target="_blank" rel="noreferrer" style={{ color: '#10b981' }}>네이버 링크</a>}
+              <span>{fmtDate(p.created_at)}</span>
+            </div>
+            <div className="bm-post-card__actions">
+              <button className="bm-btn bm-btn--secondary bm-btn--sm" onClick={() => handleCopy(p.body)}>복사</button>
+              {p.status !== 'published' && (
+                <button className="bm-btn bm-btn--primary bm-btn--sm" onClick={() => { setPublishModal(p.id); setNaverUrl(''); }}>
+                  발행
+                </button>
+              )}
+              <button className="bm-btn bm-btn--danger bm-btn--sm" onClick={() => handleDelete(p.id)}>삭제</button>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {publishModal && (
+        <div className="bm-modal-overlay" onClick={() => setPublishModal(null)}>
+          <div className="bm-modal" onClick={e => e.stopPropagation()}>
+            <h3>네이버 블로그 발행</h3>
+            <p style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,.4)', marginBottom: 12 }}>
+              본문을 네이버 블로그에 붙여넣기한 후, 발행된 URL을 입력하세요.
+            </p>
+            <input
+              className="bm-modal__input"
+              placeholder="https://blog.naver.com/..."
+              value={naverUrl}
+              onChange={e => setNaverUrl(e.target.value)}
+            />
+            <div className="bm-modal__buttons">
+              <button className="bm-btn bm-btn--secondary" onClick={() => setPublishModal(null)}>취소</button>
+              <button className="bm-btn bm-btn--primary" onClick={handlePublish}>발행 완료</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/effect-lab/EffectLab.jsx

@@ -26,14 +26,14 @@ const LAB_ITEMS = [
         status: 'live',
     },
     {
-        id: 'music',
-        path: '/lab/music',
-        title: 'Sonic Forge',
-        category: 'AI · 음악 제작',
-        desc: 'AI가 장르·분위기·악기를 조합해 완성된 트랙을 만들어줍니다. 유튜브 수익화를 위한 음악 제작 스튜디오.',
-        tags: ['AI 음악', '생성', 'YouTube'],
-        accent: '#f5a623',
-        icon: '🎵',
+        id: 'agent-office',
+        path: '/agent-office',
+        title: 'Agent Office',
+        category: 'AI · 자동화',
+        desc: 'AI 에이전트들이 사무실에서 자동으로 작업하는 가상 오피스',
+        tags: ['Canvas 2D', 'WebSocket', 'AI Agent', 'Telegram'],
+        accent: '#8b5cf6',
+        icon: '🏢',
         status: 'wip',
     },
 ];

src/pages/lotto/components/CombinedRecommendPanel.jsx

@@ -0,0 +1,157 @@
+import React, { useState } from 'react';
+import { ballClass, NumberRow, METHOD_META, METHOD_ORDER, SCORE_META, fmtKST } from '../lottoUtils';
+
+const CombinedRecommendPanel = ({ combined, history, loading, histLoading, onRun, onCopy }) => {
+    const [histExpand, setHistExpand] = useState(false);
+
+    return (
+        <section className="lotto-panel lotto-panel--wide lotto-combined">
+            <div className="lotto-panel__head">
+                <div>
+                    <p className="lotto-panel__eyebrow">AI · 종합 추론</p>
+                    <h3>종합 추론 번호 추천</h3>
+                    <p className="lotto-panel__sub">
+                        5가지 통계 기법(빈도·지문·갭·공동출현·다양성)을 가중 투표로 합산해
+                        최적 6개 번호를 도출합니다.
+                    </p>
+                </div>
+                <div className="lotto-panel__actions">
+                    {loading && <span className="lotto-chip">분석 중…</span>}
+                    <button className="button primary small" onClick={onRun} disabled={loading}>
+                        {loading ? '추론 중…' : '🔮 종합 추론 실행'}
+                    </button>
+                    {history.length > 0 && (
+                        <button className="button ghost small" onClick={() => setHistExpand(p => !p)}>
+                            이력 {history.length}건 {histExpand ? '▲' : '▼'}
+                        </button>
+                    )}
+                </div>
+            </div>
+
+            {!combined && !loading && (
+                <p className="lotto-empty">버튼을 눌러 종합 추론을 실행하세요.</p>
+            )}
+
+            {combined && (
+                <>
+                    {/* 기법별 추천 번호 */}
+                    <div className="lotto-combined__methods">
+                        {METHOD_ORDER.map((key) => {
+                            const meta = METHOD_META[key];
+                            const m = combined.methods?.[key];
+                            if (!m) return null;
+                            return (
+                                <div key={key} className="lotto-combined__method">
+                                    <div className="lotto-combined__method-head">
+                                        <span className="lotto-combined__method-icon">{meta.icon}</span>
+                                        <div>
+                                            <p className="lotto-combined__method-name" style={{ color: meta.color }}>
+                                                {meta.label}
+                                                <span className="lotto-combined__method-weight"> ({m.weight_pct}%)</span>
+                                            </p>
+                                            <p className="lotto-combined__method-desc">{meta.desc}</p>
+                                        </div>
+                                    </div>
+                                    <div className="lotto-combined__method-nums">
+                                        {m.numbers.map((n) => {
+                                            const inFinal = combined.final_numbers.includes(n);
+                                            return (
+                                                <span
+                                                    key={n}
+                                                    className={`lotto-ball ${ballClass(n).replace('lotto-ball ', '')} ${inFinal ? 'is-final' : 'is-dim'}`}
+                                                >
+                                                    {n}
+                                                </span>
+                                            );
+                                        })}
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+
+                    {/* 최종 추론 결과 */}
+                    <div className="lotto-combined__final">
+                        <div className="lotto-combined__final-head">
+                            <span className="lotto-combined__final-badge">종합 추론 결과</span>
+                            {combined.deduped && (
+                                <span className="lotto-chip lotto-chip--muted">중복 (이미 저장됨)</span>
+                            )}
+                            <button className="button ghost small" onClick={() => onCopy(combined.final_numbers)}>
+                                복사
+                            </button>
+                        </div>
+                        <div className="lotto-combined__final-balls">
+                            {combined.final_numbers.map((n) => {
+                                const votes = combined.vote_counts?.[String(n)] ?? 0;
+                                return (
+                                    <div key={n} className="lotto-combined__final-ball-wrap">
+                                        <span className={ballClass(n)}>{n}</span>
+                                        <span className="lotto-combined__vote-dots">
+                                            {Array.from({ length: 5 }).map((_, i) => (
+                                                <span key={i} className={`lotto-combined__vote-dot ${i < votes ? 'is-on' : ''}`} />
+                                            ))}
+                                        </span>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                        <p className="lotto-combined__final-sub">
+                            ● 점은 해당 번호가 채택된 기법 수 (최대 5개)
+                        </p>
+                    </div>
+
+                    {/* 점수 바 */}
+                    <div className="lotto-combined__scores">
+                        <p className="lotto-combined__scores-title">조합 품질 점수</p>
+                        {SCORE_META.map(({ key, label, color, weight }) => {
+                            const val = combined.scores?.[key] ?? 0;
+                            const pct = Math.round(val * 100);
+                            return (
+                                <div key={key} className="lotto-combined__score-row">
+                                    <span className="lotto-combined__score-label">{label}</span>
+                                    <span className="lotto-combined__score-weight">{weight}%</span>
+                                    <div className="lotto-combined__score-bar-wrap">
+                                        <div
+                                            className="lotto-combined__score-bar"
+                                            style={{ width: `${pct}%`, background: color }}
+                                        />
+                                    </div>
+                                    <span className="lotto-combined__score-val">{pct}</span>
+                                </div>
+                            );
+                        })}
+                        <div className="lotto-combined__score-total">
+                            종합 점수 <strong>{Math.round((combined.scores?.score_total ?? 0) * 100)}</strong> / 100
+                        </div>
+                    </div>
+
+                    <p className="lotto-combined__disclaimer">
+                        ※ 이 추천은 역대 통계 패턴 기반 참고 자료이며, 당첨을 보장하지 않습니다.
+                    </p>
+                </>
+            )}
+
+            {/* 추천 이력 */}
+            {histExpand && (
+                <div className="lotto-combined__history">
+                    <p className="lotto-combined__history-title">종합 추론 이력</p>
+                    {histLoading && <p className="lotto-empty">로딩 중…</p>}
+                    {history.map((item) => (
+                        <div key={item.id} className="lotto-combined__history-item">
+                            <div className="lotto-combined__history-meta">
+                                <span>#{item.id}</span>
+                                <span>{fmtKST(item.created_at)}</span>
+                                <span>기준 {item.based_on_draw ?? '-'}회</span>
+                            </div>
+                            <NumberRow nums={item.numbers} />
+                            <button className="button ghost small" onClick={() => onCopy(item.numbers)}>복사</button>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </section>
+    );
+};
+
+export default CombinedRecommendPanel;

src/pages/lotto/components/ConfidenceRing.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const ConfidenceRing = ({ score }) => {
+    const r = 28, c = 2 * Math.PI * r;
+    const fill = (score / 100) * c;
+    const color = score >= 80 ? '#97c9aa' : score >= 60 ? '#fdd4b1' : '#f7a8a5';
+    return (
+        <svg width="72" height="72" viewBox="0 0 72 72" className="lotto-confidence-ring" aria-hidden>
+            <circle cx="36" cy="36" r={r} stroke="rgba(255,255,255,0.08)" strokeWidth="6" fill="none" />
+            <circle
+                cx="36" cy="36" r={r}
+                stroke={color} strokeWidth="6" fill="none"
+                strokeDasharray={`${fill} ${c - fill}`}
+                strokeLinecap="round"
+                transform="rotate(-90 36 36)"
+            />
+            <text x="36" y="41" textAnchor="middle" fill={color} fontSize="16" fontWeight="600"
+                style={{ fontFamily: 'inherit' }}>
+                {score}
+            </text>
+        </svg>
+    );
+};
+
+export default ConfidenceRing;

src/pages/lotto/components/FrequencyChart.jsx

@@ -0,0 +1,39 @@
+import React, { useMemo } from 'react';
+import { buildFrequencySeries } from '../lottoUtils';
+
+const FrequencyChart = ({ stats }) => {
+    const { series, max } = useMemo(() => buildFrequencySeries(stats?.frequency), [stats]);
+    const ticks = useMemo(() => [max, Math.round(max * 0.5), 0], [max]);
+    if (!stats) return null;
+
+    return (
+        <div className="lotto-chart">
+            <div className="lotto-chart__y">
+                <span>횟수</span>
+                <div className="lotto-chart__ticks">
+                    {ticks.map((value) => <span key={value}>{value}</span>)}
+                </div>
+            </div>
+            <div className="lotto-chart__plot" role="list">
+                {series.map((item) => {
+                    const showLabel = item.number === 1 || item.number % 5 === 0;
+                    return (
+                        <div key={item.number} className="lotto-chart__col" role="listitem">
+                            <span
+                                className="lotto-chart__bar"
+                                style={{ height: `${(item.count / max) * 100}%` }}
+                                title={`${item.number}번: ${item.count}회`}
+                                aria-label={`${item.number}번 ${item.count}회`}
+                            />
+                            <span className="lotto-chart__x" aria-hidden={!showLabel}>
+                                {showLabel ? item.number : ''}
+                            </span>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
+export default FrequencyChart;

src/pages/lotto/components/MetricBlock.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { toBucketEntries } from '../lottoUtils';
+
+const MetricBlock = ({ title, metrics }) => {
+    if (!metrics) return null;
+    const buckets = toBucketEntries(metrics);
+    const maxBucket = buckets.length ? Math.max(...buckets.map(([, v]) => Number(v) || 0), 1) : 1;
+    const odd = Number(metrics.odd) || 0;
+    const even = Number(metrics.even) || 0;
+    const totalOE = odd + even || 1;
+    const oddPct = (odd / totalOE) * 100;
+
+    return (
+        <div className="lotto-metrics">
+            <div className="lotto-metrics__head">
+                <p className="lotto-metrics__title">{title}</p>
+                <span className="lotto-metrics__sum">총 출현 횟수 {metrics.sum ?? '-'}</span>
+            </div>
+            <div className="lotto-metric-cards">
+                <div className="lotto-metric-card">
+                    <p className="lotto-metric-card__label">최소 출현</p>
+                    <p className="lotto-metric-card__value">{metrics.min ?? '-'}</p>
+                </div>
+                <div className="lotto-metric-card">
+                    <p className="lotto-metric-card__label">최대 출현</p>
+                    <p className="lotto-metric-card__value">{metrics.max ?? '-'}</p>
+                </div>
+                <div className="lotto-metric-card">
+                    <p className="lotto-metric-card__label">출현 편차</p>
+                    <p className="lotto-metric-card__value">{metrics.range ?? '-'}</p>
+                </div>
+            </div>
+            <div className="lotto-odd-even">
+                <div className="lotto-odd-even__labels">
+                    <span>홀 {odd}</span><span>짝 {even}</span>
+                </div>
+                <div className="lotto-odd-even__bar" aria-hidden>
+                    <span className="lotto-odd-even__odd" style={{ width: `${oddPct}%` }} />
+                    <span className="lotto-odd-even__even" style={{ width: `${100 - oddPct}%` }} />
+                </div>
+            </div>
+            {buckets.length ? (
+                <div className="lotto-buckets">
+                    {buckets.map(([label, value]) => (
+                        <div key={label} className="lotto-bucket">
+                            <span className="lotto-bucket__label">{label}</span>
+                            <div className="lotto-bucket__bar" aria-hidden>
+                                <span style={{ width: `${((Number(value) || 0) / maxBucket) * 100}%` }} />
+                            </div>
+                            <span className="lotto-bucket__value">{value}</span>
+                        </div>
+                    ))}
+                </div>
+            ) : null}
+        </div>
+    );
+};
+
+export default MetricBlock;

src/pages/lotto/components/PerformanceBanner.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+const PerformanceBanner = ({ perf }) => {
+    if (!perf || perf.total_checked === 0) return null;
+    const imp = perf.vs_random?.improvement_pct ?? 0;
+    const prizeHits = (perf.by_rank?.rank_3 ?? 0) + (perf.by_rank?.rank_4 ?? 0) + (perf.by_rank?.rank_5 ?? 0);
+    return (
+        <div className="lotto-perf-banner">
+            <span className="lotto-perf-banner__label">신뢰도 지표</span>
+            <div className="lotto-perf-banner__items">
+                <div className="lotto-perf-banner__item">
+                    <span className="lotto-perf-banner__val">{perf.total_checked}</span>
+                    <span className="lotto-perf-banner__lbl">검증 회차</span>
+                </div>
+                <div className="lotto-perf-banner__divider" />
+                <div className="lotto-perf-banner__item">
+                    <span className="lotto-perf-banner__val">{(perf.avg_correct ?? 0).toFixed(1)}</span>
+                    <span className="lotto-perf-banner__lbl">평균 일치수</span>
+                </div>
+                <div className="lotto-perf-banner__divider" />
+                <div className="lotto-perf-banner__item">
+                    <span className={`lotto-perf-banner__val ${imp > 0 ? 'is-pos' : ''}`}>
+                        {imp > 0 ? '+' : ''}{imp.toFixed(1)}%
+                    </span>
+                    <span className="lotto-perf-banner__lbl">무작위 대비</span>
+                </div>
+                <div className="lotto-perf-banner__divider" />
+                <div className="lotto-perf-banner__item">
+                    <span className="lotto-perf-banner__val">
+                        {((perf.rate_3plus ?? 0) * 100).toFixed(1)}%
+                    </span>
+                    <span className="lotto-perf-banner__lbl">3개↑ 일치율</span>
+                </div>
+                {prizeHits > 0 && (
+                    <>
+                        <div className="lotto-perf-banner__divider" />
+                        <div className="lotto-perf-banner__item">
+                            <span className="lotto-perf-banner__val is-prize">{prizeHits}건</span>
+                            <span className="lotto-perf-banner__lbl">3~5등 당첨</span>
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default PerformanceBanner;

src/pages/lotto/components/PersonalAnalysisPanel.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { NumberRow } from '../lottoUtils';
+
+const PersonalAnalysisPanel = ({ data, loading }) => {
+    const zones = Object.entries(data?.pattern?.zone_avg ?? {});
+    const maxZone = zones.length ? Math.max(...zones.map(([, v]) => Number(v) || 0), 1) : 1;
+
+    return (
+        <section className="lotto-panel lotto-panel--wide">
+            <div className="lotto-panel__head">
+                <div>
+                    <p className="lotto-panel__eyebrow">My Pattern</p>
+                    <h3>내 번호 패턴</h3>
+                    {data && data.total_analyzed > 0 && (
+                        <p className="lotto-panel__sub">총 {data.total_analyzed}회 추천 기반 분석</p>
+                    )}
+                </div>
+            </div>
+
+            {(loading || !data || data.total_analyzed === 0) ? (
+                <p className="lotto-empty">
+                    {loading ? '불러오는 중...' : '추천 이력이 없습니다.'}
+                </p>
+            ) : (
+                <div className="lotto-analysis">
+                    <div className="lotto-analysis__row">
+                        <div className="lotto-analysis__group">
+                            <p className="lotto-analysis__label">
+                                내가 자주 선택한 번호 <span>TOP 10</span>
+                            </p>
+                            <NumberRow nums={data.top_picks ?? []} />
+                        </div>
+
+                        <div className="lotto-analysis__group">
+                            <p className="lotto-analysis__label">선택 성향</p>
+                            <div className="lotto-personal-tendency">
+                                {data.vs_draw_avg?.odd_tendency && (
+                                    <span className="lotto-personal-tendency__badge">
+                                        {data.vs_draw_avg.odd_tendency}
+                                    </span>
+                                )}
+                                {data.vs_draw_avg?.sum_tendency && (
+                                    <span className="lotto-personal-tendency__badge">
+                                        {data.vs_draw_avg.sum_tendency}
+                                    </span>
+                                )}
+                            </div>
+                            <div className="lotto-analysis__stats">
+                                <span>홀수 평균 <strong>{data.pattern?.avg_odd_count?.toFixed(1)}</strong></span>
+                                <span>합계 평균 <strong>{data.pattern?.avg_sum?.toFixed(1)}</strong></span>
+                                <span>
+                                    연속번호 포함률{' '}
+                                    <strong>
+                                        {((data.pattern?.consecutive_rate ?? 0) * 100).toFixed(0)}%
+                                    </strong>
+                                </span>
+                            </div>
+                        </div>
+
+                        {zones.length > 0 && (
+                            <div className="lotto-analysis__group">
+                                <p className="lotto-analysis__label">구간별 선택 비율</p>
+                                <div className="lotto-buckets">
+                                    {zones.map(([zone, avg]) => (
+                                        <div key={zone} className="lotto-bucket">
+                                            <span className="lotto-bucket__label">{zone}</span>
+                                            <div className="lotto-bucket__bar" aria-hidden>
+                                                <span style={{ width: `${((Number(avg) || 0) / maxZone) * 100}%` }} />
+                                            </div>
+                                            <span className="lotto-bucket__value">{Number(avg).toFixed(1)}</span>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
+        </section>
+    );
+};
+
+export default PersonalAnalysisPanel;

src/pages/lotto/components/PurchasePanel.jsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { fmtWon } from '../lottoUtils';
+
+const PurchasePanel = ({
+    records, stats, loading,
+    formOpen, form, formSaving, formError, editId,
+    onFormOpen, onFormClose, onFormChange, onFormSubmit,
+    onEditStart, onDelete,
+}) => {
+    const winRate = stats?.total_records > 0
+        ? ((stats.prize_count / stats.total_records) * 100).toFixed(1)
+        : '0.0';
+    const netColor = (stats?.net ?? 0) >= 0 ? 'is-pos' : 'is-neg';
+
+    return (
+        <section className="lotto-panel lotto-panel--wide">
+            <div className="lotto-panel__head">
+                <div>
+                    <p className="lotto-panel__eyebrow">Purchase Tracker</p>
+                    <h3>구매 기록</h3>
+                    <p className="lotto-panel__sub">구매 내역 기록 및 수익률 추적</p>
+                </div>
+                <div className="lotto-panel__actions">
+                    {loading && <span className="lotto-chip">로딩 중</span>}
+                    <button className="button small" onClick={onFormOpen} disabled={formOpen}>
+                        + 추가
+                    </button>
+                </div>
+            </div>
+
+            {/* 통계 바 */}
+            {stats && stats.total_records > 0 && (
+                <div className="lotto-purchase-stats">
+                    <div className="lotto-purchase-stat">
+                        <span className="lotto-purchase-stat__val">{fmtWon(stats.total_invested)}</span>
+                        <span className="lotto-purchase-stat__lbl">총 투자</span>
+                    </div>
+                    <div className="lotto-purchase-stat">
+                        <span className="lotto-purchase-stat__val">{fmtWon(stats.total_prize)}</span>
+                        <span className="lotto-purchase-stat__lbl">총 당첨금</span>
+                    </div>
+                    <div className="lotto-purchase-stat">
+                        <span className={`lotto-purchase-stat__val ${netColor}`}>
+                            {(stats.net ?? 0) >= 0 ? '+' : ''}{fmtWon(stats.net)}
+                        </span>
+                        <span className="lotto-purchase-stat__lbl">순손익</span>
+                    </div>
+                    <div className="lotto-purchase-stat">
+                        <span className="lotto-purchase-stat__val">{stats.return_rate?.toFixed(1)}%</span>
+                        <span className="lotto-purchase-stat__lbl">회수율</span>
+                    </div>
+                    <div className="lotto-purchase-stat">
+                        <span className="lotto-purchase-stat__val">{winRate}%</span>
+                        <span className="lotto-purchase-stat__lbl">당첨률</span>
+                    </div>
+                    {stats.max_prize > 0 && (
+                        <div className="lotto-purchase-stat">
+                            <span className="lotto-purchase-stat__val is-prize">{fmtWon(stats.max_prize)}</span>
+                            <span className="lotto-purchase-stat__lbl">최대 당첨금</span>
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {/* 입력 폼 */}
+            {formOpen && (
+                <form className="lotto-purchase-form" onSubmit={onFormSubmit}>
+                    <p className="lotto-purchase-form__title">
+                        {editId != null ? '기록 수정' : '구매 기록 추가'}
+                    </p>
+                    <div className="lotto-purchase-form__grid">
+                        <label className="lotto-field">
+                            회차
+                            <input
+                                type="number" min={1}
+                                value={form.draw_no}
+                                onChange={(e) => onFormChange('draw_no', e.target.value)}
+                                placeholder="예: 1181"
+                                required
+                            />
+                        </label>
+                        <label className="lotto-field">
+                            구매금액
+                            <input
+                                type="number" step={1000} min={1000}
+                                value={form.amount}
+                                onChange={(e) => onFormChange('amount', Number(e.target.value))}
+                            />
+                        </label>
+                        <label className="lotto-field">
+                            세트 수
+                            <input
+                                type="number" min={1} max={20}
+                                value={form.sets}
+                                onChange={(e) => onFormChange('sets', Number(e.target.value))}
+                            />
+                        </label>
+                        <label className="lotto-field">
+                            당첨금
+                            <input
+                                type="number" min={0}
+                                value={form.prize}
+                                onChange={(e) => onFormChange('prize', Number(e.target.value))}
+                            />
+                        </label>
+                        <label className="lotto-field lotto-purchase-form__note">
+                            메모
+                            <input
+                                type="text"
+                                value={form.note}
+                                onChange={(e) => onFormChange('note', e.target.value)}
+                                placeholder="예: 5등 1개"
+                            />
+                        </label>
+                    </div>
+                    {formError && (
+                        <p className="lotto-empty" style={{ color: '#f9b6b1' }}>{formError}</p>
+                    )}
+                    <div className="lotto-purchase-form__actions">
+                        <button type="button" className="button ghost small" onClick={onFormClose}>
+                            취소
+                        </button>
+                        <button type="submit" className="button primary small" disabled={formSaving}>
+                            {formSaving ? '저장 중...' : editId != null ? '수정 완료' : '추가'}
+                        </button>
+                    </div>
+                </form>
+            )}
+
+            {/* 기록 목록 */}
+            {records.length === 0 ? (
+                <p className="lotto-empty">구매 기록이 없습니다.</p>
+            ) : (
+                <div className="lotto-purchase-list">
+                    <div className="lotto-purchase-list__head">
+                        <span>회차</span>
+                        <span>투자금</span>
+                        <span>당첨금</span>
+                        <span>손익</span>
+                        <span>메모</span>
+                        <span />
+                    </div>
+                    {records.map((rec) => {
+                        const net = (rec.prize ?? 0) - (rec.amount ?? 0);
+                        return (
+                            <div key={rec.id} className="lotto-purchase-row">
+                                <span className="lotto-purchase-row__drw">{rec.draw_no}회</span>
+                                <span>{fmtWon(rec.amount)}</span>
+                                <span className={(rec.prize ?? 0) > 0 ? 'is-prize' : ''}>
+                                    {fmtWon(rec.prize)}
+                                </span>
+                                <span className={net >= 0 ? 'is-pos' : 'is-neg'}>
+                                    {net >= 0 ? '+' : ''}{fmtWon(net)}
+                                </span>
+                                <span className="lotto-purchase-row__note">{rec.note || '-'}</span>
+                                <div className="lotto-purchase-row__actions">
+                                    <button className="button ghost small" onClick={() => onEditStart(rec)}>
+                                        수정
+                                    </button>
+                                    <button className="button danger small" onClick={() => onDelete(rec.id)}>
+                                        삭제
+                                    </button>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+        </section>
+    );
+};
+
+export default PurchasePanel;

src/pages/lotto/components/ReportPanel.jsx

@@ -0,0 +1,142 @@
+import React, { useState } from 'react';
+import { NumberRow } from '../lottoUtils';
+import ConfidenceRing from './ConfidenceRing';
+
+const ReportPanel = ({ report, history, loading, onRefresh, onSelectDrw }) => {
+    const [histExpand, setHistExpand] = useState(false);
+
+    return (
+        <section className="lotto-panel lotto-panel--wide">
+            <div className="lotto-panel__head">
+                <div>
+                    <p className="lotto-panel__eyebrow">Weekly Report</p>
+                    <h3>이번 주 공략 리포트</h3>
+                    {report && (
+                        <p className="lotto-panel__sub">
+                            {report.target_drw_no}회 대상 · {report.based_on_draw}회 기준
+                        </p>
+                    )}
+                </div>
+                <div className="lotto-panel__actions">
+                    {loading && <span className="lotto-chip">로딩 중</span>}
+                    <button className="button ghost small" onClick={onRefresh} disabled={loading}>
+                        새로고침
+                    </button>
+                    {history?.length > 0 && (
+                        <button className="button ghost small" onClick={() => setHistExpand((p) => !p)}>
+                            지난 리포트 {histExpand ? '▲' : '▼'}
+                        </button>
+                    )}
+                </div>
+            </div>
+
+            {/* 지난 리포트 목록 */}
+            {histExpand && history?.length > 0 && (
+                <div className="lotto-report-history">
+                    {history.map((h) => (
+                        <button
+                            key={h.drw_no}
+                            className="button ghost small"
+                            onClick={() => { onSelectDrw(h.drw_no); setHistExpand(false); }}
+                        >
+                            {h.drw_no}회
+                        </button>
+                    ))}
+                </div>
+            )}
+
+            {!report && !loading && (
+                <p className="lotto-empty">리포트 데이터가 없습니다.</p>
+            )}
+            {loading && !report && (
+                <p className="lotto-empty">불러오는 중...</p>
+            )}
+
+            {report && (
+                <>
+                    {/* 신뢰도 + 패턴 요약 */}
+                    <div className="lotto-report-top">
+                        <div className="lotto-report-confidence">
+                            <ConfidenceRing score={report.confidence_score ?? 0} />
+                            <div>
+                                <p className="lotto-report-confidence__title">신뢰도 점수</p>
+                                <div className="lotto-report-confidence__factors">
+                                    {Object.entries(report.confidence_factors ?? {}).map(([k, v]) => (
+                                        <div key={k} className="lotto-report-confidence__factor">
+                                            <span className="lotto-report-confidence__factor-lbl">
+                                                {k === 'data_volume' ? '데이터 충분도'
+                                                    : k === 'pattern_consistency' ? '패턴 안정성'
+                                                    : k === 'recent_trend' ? '최근 트렌드' : k}
+                                            </span>
+                                            <div className="lotto-pick__bar">
+                                                <span style={{ width: `${v}%` }} />
+                                            </div>
+                                            <span className="lotto-report-confidence__factor-val">{v}</span>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="lotto-report-pattern">
+                            <p className="lotto-report-pattern__title">최근 패턴</p>
+                            <div className="lotto-report-pattern__stats">
+                                <div className="lotto-report-pattern__stat">
+                                    <span>합계 평균</span>
+                                    <strong>{report.recent_pattern?.recent_sum_avg?.toFixed(1) ?? '-'}</strong>
+                                </div>
+                                <div className="lotto-report-pattern__stat">
+                                    <span>홀수 평균</span>
+                                    <strong>{report.recent_pattern?.recent_odd_avg?.toFixed(1) ?? '-'}</strong>
+                                </div>
+                                {(report.recent_pattern?.triple_appear ?? []).length > 0 && (
+                                    <div className="lotto-report-pattern__stat">
+                                        <span>3회 연속 출현</span>
+                                        <NumberRow nums={report.recent_pattern.triple_appear} />
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* 핫 / 콜드 / 오버듀 */}
+                    <div className="lotto-analysis__row">
+                        <div className="lotto-analysis__group">
+                            <p className="lotto-analysis__label">
+                                🔥 핫 번호 <span>최근 10회 과출현</span>
+                            </p>
+                            <NumberRow nums={report.hot_numbers ?? []} />
+                        </div>
+                        <div className="lotto-analysis__group">
+                            <p className="lotto-analysis__label">
+                                🧊 콜드 번호 <span>역대 저빈도 10개</span>
+                            </p>
+                            <NumberRow nums={report.cold_numbers ?? []} />
+                        </div>
+                        <div className="lotto-analysis__group">
+                            <p className="lotto-analysis__label">
+                                ⏰ 오버듀 <span>가장 오래 미출현</span>
+                            </p>
+                            <NumberRow nums={report.overdue_numbers ?? []} />
+                        </div>
+                    </div>
+
+                    {/* 전략 추천 세트 */}
+                    {(report.recommended_sets ?? []).length > 0 && (
+                        <div className="lotto-strategy-cards">
+                            {report.recommended_sets.map((set, i) => (
+                                <div key={i} className="lotto-strategy-card">
+                                    <p className="lotto-strategy-card__name">{set.strategy}</p>
+                                    <NumberRow nums={set.numbers} />
+                                    <p className="lotto-strategy-card__desc">{set.description}</p>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </>
+            )}
+        </section>
+    );
+};
+
+export default ReportPanel;

src/pages/lotto/hooks/useLottoData.js

@@ -0,0 +1,162 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+    getLatest, getStats, getBestPicks, getAnalysis,
+    getPerformanceStats, getLatestReport, getReportHistory, getReport,
+    getPersonalAnalysis, getCombinedRecommend, getCombinedHistory,
+} from '../../../api';
+import { readStatsCache, writeStatsCache } from '../lottoUtils';
+
+export default function useLottoData() {
+    const [latest, setLatest] = useState(null);
+    const [stats, setStats] = useState(() => readStatsCache());
+    const [statsLoading, setStatsLoading] = useState(false);
+    const [statsError, setStatsError] = useState('');
+    const [loading, setLoading] = useState({
+        latest: false, bestPicks: false, analysis: false,
+    });
+    const [error, setError] = useState('');
+    const [bestPicks, setBestPicks] = useState([]);
+    const [bestPicksExpanded, setBestPicksExpanded] = useState(false);
+    const [analysis, setAnalysis] = useState(null);
+    const [simulating, setSimulating] = useState(false);
+    const [simResult, setSimResult] = useState(null);
+
+    // 종합 추론
+    const [combined, setCombined] = useState(null);
+    const [combinedLoading, setCombinedLoading] = useState(false);
+    const [combinedHistory, setCombinedHistory] = useState([]);
+    const [combinedHistLoading, setCombinedHistLoading] = useState(false);
+
+    // 신뢰도·리포트·개인분석
+    const [perfStats, setPerfStats] = useState(null);
+    const [report, setReport] = useState(null);
+    const [reportHistory, setReportHistory] = useState([]);
+    const [reportLoading, setReportLoading] = useState(false);
+    const [personalAnalysis, setPersonalAnalysis] = useState(null);
+    const [personalLoading, setPersonalLoading] = useState(false);
+
+    const refreshLatest = useCallback(async () => {
+        setLoading((s) => ({ ...s, latest: true }));
+        setError('');
+        try { setLatest(await getLatest()); }
+        catch (e) { setError(e?.message ?? String(e)); }
+        finally { setLoading((s) => ({ ...s, latest: false })); }
+    }, []);
+
+    const refreshStats = useCallback(async () => {
+        setStatsLoading(true); setStatsError('');
+        try {
+            const cached = readStatsCache();
+            if (cached && !stats) setStats(cached);
+            const data = await getStats();
+            if (!cached || cached.total_draws !== data?.total_draws) {
+                setStats(data); writeStatsCache(data);
+            }
+        } catch (e) { setStatsError(e?.message ?? String(e)); }
+        finally { setStatsLoading(false); }
+    }, [stats]);
+
+    const refreshBestPicks = useCallback(async () => {
+        setLoading((s) => ({ ...s, bestPicks: true }));
+        try { setBestPicks((await getBestPicks(20)).items ?? []); }
+        catch {}
+        finally { setLoading((s) => ({ ...s, bestPicks: false })); }
+    }, []);
+
+    const refreshAnalysis = useCallback(async () => {
+        setLoading((s) => ({ ...s, analysis: true }));
+        try { setAnalysis(await getAnalysis()); }
+        catch {}
+        finally { setLoading((s) => ({ ...s, analysis: false })); }
+    }, []);
+
+    const refreshPerfStats = useCallback(async () => {
+        try { setPerfStats(await getPerformanceStats()); } catch {}
+    }, []);
+
+    const refreshReport = useCallback(async () => {
+        setReportLoading(true);
+        try {
+            const [rep, hist] = await Promise.all([
+                getLatestReport(),
+                getReportHistory(10),
+            ]);
+            setReport(rep);
+            setReportHistory(hist?.reports ?? []);
+        } catch {}
+        finally { setReportLoading(false); }
+    }, []);
+
+    const loadSpecificReport = useCallback(async (drwNo) => {
+        setReportLoading(true);
+        try { setReport(await getReport(drwNo)); }
+        catch {}
+        finally { setReportLoading(false); }
+    }, []);
+
+    const runCombinedRecommend = useCallback(async () => {
+        setCombinedLoading(true);
+        try {
+            const data = await getCombinedRecommend();
+            setCombined(data);
+            const hist = await getCombinedHistory(30);
+            setCombinedHistory(hist?.items ?? []);
+        } catch (e) { setError(e?.message ?? String(e)); }
+        finally { setCombinedLoading(false); }
+    }, []);
+
+    const loadCombinedHistory = useCallback(async () => {
+        setCombinedHistLoading(true);
+        try {
+            const hist = await getCombinedHistory(30);
+            setCombinedHistory(hist?.items ?? []);
+        } catch {}
+        finally { setCombinedHistLoading(false); }
+    }, []);
+
+    const refreshPersonalAnalysis = useCallback(async () => {
+        setPersonalLoading(true);
+        try { setPersonalAnalysis(await getPersonalAnalysis()); }
+        catch {}
+        finally { setPersonalLoading(false); }
+    }, []);
+
+    const onSimulate = useCallback(async () => {
+        const ok = confirm('시뮬레이션을 즉시 실행할까요?\n20,000개 후보를 분석합니다. (약 1~3분 소요)');
+        if (!ok) return;
+        setSimulating(true); setSimResult(null); setError('');
+        try {
+            const { triggerSimulate } = await import('../../../api');
+            const data = await triggerSimulate();
+            setSimResult(data);
+            await refreshBestPicks();
+        } catch (e) { setError(e?.message ?? String(e)); }
+        finally { setSimulating(false); }
+    }, [refreshBestPicks]);
+
+    // 초기 로드
+    useEffect(() => {
+        refreshLatest();
+        refreshStats();
+        refreshBestPicks();
+        refreshAnalysis();
+        refreshPerfStats();
+        refreshReport();
+        refreshPersonalAnalysis();
+        loadCombinedHistory();
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    return {
+        latest, loading, error, setError,
+        stats, statsLoading, statsError, refreshStats,
+        refreshLatest,
+        bestPicks, bestPicksExpanded, setBestPicksExpanded, refreshBestPicks,
+        analysis, refreshAnalysis,
+        simulating, simResult, onSimulate,
+        combined, combinedLoading, combinedHistory, combinedHistLoading,
+        runCombinedRecommend,
+        perfStats,
+        report, reportHistory, reportLoading, refreshReport, loadSpecificReport,
+        personalAnalysis, personalLoading,
+    };
+}

src/pages/lotto/hooks/useManualRecommend.js

@@ -0,0 +1,75 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { deleteHistory, getHistory, recommend } from '../../../api';
+import { buildMetricsFromHistory } from '../lottoUtils';
+
+export default function useManualRecommend() {
+    const [params, setParams] = useState({
+        recent_window: 200, recent_weight: 2.0, avoid_recent_k: 5,
+    });
+    const presets = useMemo(() => [
+        { name: '기본', recent_window: 200, recent_weight: 2.0, avoid_recent_k: 5 },
+        { name: '최근 가중치↑', recent_window: 100, recent_weight: 3.0, avoid_recent_k: 10 },
+        { name: '안전(분산)', recent_window: 300, recent_weight: 1.6, avoid_recent_k: 8 },
+        { name: '공격(최근)', recent_window: 80, recent_weight: 3.5, avoid_recent_k: 12 },
+    ], []);
+    const [result, setResult] = useState(null);
+    const [history, setHistory] = useState([]);
+    const [historyExpanded, setHistoryExpanded] = useState(false);
+    const historyEndRef = useRef(null);
+    const prevHistoryExpandedRef = useRef(false);
+    const [loading, setLoading] = useState({ recommend: false, history: false });
+    const [error, setError] = useState('');
+
+    const historyMetrics = useMemo(() => buildMetricsFromHistory(history), [history]);
+    const visibleHistory = historyExpanded ? history : history.slice(0, 5);
+
+    const refreshHistory = useCallback(async () => {
+        setLoading((s) => ({ ...s, history: true }));
+        setError('');
+        try {
+            const limit = 100; let offset = 0; const allItems = [];
+            while (true) {
+                const data = await getHistory(limit, offset);
+                const items = data.items ?? [];
+                allItems.push(...items);
+                if (items.length < limit) break;
+                offset += limit;
+            }
+            setHistory(allItems);
+        } catch (e) { setError(e?.message ?? String(e)); }
+        finally { setLoading((s) => ({ ...s, history: false })); }
+    }, []);
+
+    const onRecommend = useCallback(async () => {
+        setLoading((s) => ({ ...s, recommend: true })); setError('');
+        try { const data = await recommend(params); setResult(data); await refreshHistory(); }
+        catch (e) { setError(e?.message ?? String(e)); }
+        finally { setLoading((s) => ({ ...s, recommend: false })); }
+    }, [params, refreshHistory]);
+
+    const onDelete = useCallback(async (id) => {
+        if (!confirm(`히스토리 #${id}를 삭제할까요?`)) return;
+        setError('');
+        try { await deleteHistory(id); setHistory((prev) => prev.filter((item) => item.id !== id)); }
+        catch (e) { setError(e?.message ?? String(e)); }
+    }, []);
+
+    useEffect(() => {
+        if (historyExpanded && !prevHistoryExpandedRef.current) {
+            requestAnimationFrame(() => {
+                historyEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+            });
+        }
+        prevHistoryExpandedRef.current = historyExpanded;
+    }, [historyExpanded, visibleHistory.length]);
+
+    useEffect(() => { refreshHistory(); }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    return {
+        params, setParams, presets,
+        result, history, historyExpanded, setHistoryExpanded,
+        historyEndRef, loading, error, setError,
+        historyMetrics, visibleHistory,
+        refreshHistory, onRecommend, onDelete,
+    };
+}

src/pages/lotto/hooks/usePurchases.js

@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+    getPurchases, getPurchaseStats, addPurchase, updatePurchase, deletePurchase,
+} from '../../../api';
+import { emptyPurchaseForm } from '../lottoUtils';
+
+export default function usePurchases() {
+    const [purchases, setPurchases] = useState([]);
+    const [purchaseStats, setPurchaseStats] = useState(null);
+    const [purchaseLoading, setPurchaseLoading] = useState(false);
+
+    // 폼 상태
+    const [purchaseFormOpen, setPurchaseFormOpen] = useState(false);
+    const [purchaseForm, setPurchaseForm] = useState(emptyPurchaseForm);
+    const [purchaseFormSaving, setPurchaseFormSaving] = useState(false);
+    const [purchaseFormError, setPurchaseFormError] = useState('');
+    const [purchaseEditId, setPurchaseEditId] = useState(null);
+
+    const refreshPurchases = useCallback(async () => {
+        setPurchaseLoading(true);
+        try {
+            const [recs, st] = await Promise.all([getPurchases(), getPurchaseStats()]);
+            setPurchases(recs?.records ?? []);
+            setPurchaseStats(st);
+        } catch {}
+        finally { setPurchaseLoading(false); }
+    }, []);
+
+    const handlePurchaseFormOpen = useCallback(() => {
+        setPurchaseEditId(null);
+        setPurchaseForm(emptyPurchaseForm());
+        setPurchaseFormError('');
+        setPurchaseFormOpen(true);
+    }, []);
+
+    const handlePurchaseFormClose = useCallback(() => {
+        setPurchaseFormOpen(false);
+        setPurchaseEditId(null);
+        setPurchaseFormError('');
+    }, []);
+
+    const handlePurchaseFormChange = useCallback((field, value) => {
+        setPurchaseForm((prev) => ({ ...prev, [field]: value }));
+    }, []);
+
+    const handlePurchaseEditStart = useCallback((rec) => {
+        setPurchaseEditId(rec.id);
+        setPurchaseForm({
+            draw_no: String(rec.draw_no ?? ''),
+            amount: rec.amount ?? 5000,
+            sets: rec.sets ?? 5,
+            prize: rec.prize ?? 0,
+            note: rec.note ?? '',
+        });
+        setPurchaseFormError('');
+        setPurchaseFormOpen(true);
+    }, []);
+
+    const handlePurchaseFormSubmit = useCallback(async (e) => {
+        e.preventDefault();
+        setPurchaseFormSaving(true); setPurchaseFormError('');
+        const payload = {
+            draw_no: Number(purchaseForm.draw_no),
+            amount: Number(purchaseForm.amount),
+            sets: Number(purchaseForm.sets),
+            prize: Number(purchaseForm.prize),
+            note: purchaseForm.note.trim(),
+        };
+        try {
+            if (purchaseEditId != null) {
+                const updated = await updatePurchase(purchaseEditId, payload);
+                setPurchases((prev) =>
+                    prev.map((r) => r.id === purchaseEditId ? (updated ?? { ...payload, id: purchaseEditId }) : r)
+                );
+            } else {
+                const saved = await addPurchase(payload);
+                setPurchases((prev) => [saved ?? { ...payload, id: Date.now() }, ...prev]);
+            }
+            try { setPurchaseStats(await getPurchaseStats()); } catch {}
+            handlePurchaseFormClose();
+        } catch (err) {
+            setPurchaseFormError(err?.message ?? String(err));
+        } finally {
+            setPurchaseFormSaving(false);
+        }
+    }, [purchaseForm, purchaseEditId, handlePurchaseFormClose]);
+
+    const handlePurchaseDelete = useCallback(async (id) => {
+        if (!confirm('이 구매 기록을 삭제할까요?')) return;
+        setPurchases((prev) => prev.filter((r) => r.id !== id));
+        try {
+            await deletePurchase(id);
+            try { setPurchaseStats(await getPurchaseStats()); } catch {}
+        } catch { refreshPurchases(); }
+    }, [refreshPurchases]);
+
+    useEffect(() => { refreshPurchases(); }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    return {
+        purchases, purchaseStats, purchaseLoading,
+        purchaseFormOpen, purchaseForm, purchaseFormSaving, purchaseFormError, purchaseEditId,
+        handlePurchaseFormOpen, handlePurchaseFormClose, handlePurchaseFormChange,
+        handlePurchaseFormSubmit, handlePurchaseEditStart, handlePurchaseDelete,
+    };
+}

src/pages/lotto/lottoUtils.jsx

@@ -0,0 +1,141 @@
+/* ─────────────────────────────────────────────
+   로또 공통 유틸리티
+───────────────────────────────────────────── */
+import React from 'react';
+
+export const fmtKST = (value) => value?.replace('T', ' ') ?? '';
+
+export const fmtWon = (n) => {
+    if (n == null || isNaN(Number(n))) return '-';
+    return new Intl.NumberFormat('ko-KR').format(Math.round(Number(n))) + '원';
+};
+
+export const ballClass = (n) => {
+    if (n <= 10) return 'lotto-ball range-a';
+    if (n <= 20) return 'lotto-ball range-b';
+    if (n <= 30) return 'lotto-ball range-c';
+    if (n <= 40) return 'lotto-ball range-d';
+    return 'lotto-ball range-e';
+};
+
+export const Ball = ({ n }) => <span className={ballClass(n)}>{n}</span>;
+
+export const NumberRow = ({ nums }) => (
+    <div className="lotto-row">
+        {nums.map((n) => <Ball key={n} n={n} />)}
+    </div>
+);
+
+/* ─────────────────────────────────────────────
+   통계 헬퍼
+───────────────────────────────────────────── */
+export const bucketOrder = ['1-10', '11-20', '21-30', '31-40', '41-45'];
+export const STATS_CACHE_KEY = 'lotto_stats_v1';
+export const BEST_PICKS_DEFAULT_SHOW = 5;
+
+export const readStatsCache = () => {
+    if (typeof window === 'undefined') return null;
+    try {
+        const raw = localStorage.getItem(STATS_CACHE_KEY);
+        if (!raw) return null;
+        const parsed = JSON.parse(raw);
+        if (!parsed || !Array.isArray(parsed.frequency)) return null;
+        return parsed;
+    } catch { return null; }
+};
+
+export const writeStatsCache = (data) => {
+    if (typeof window === 'undefined') return;
+    try { localStorage.setItem(STATS_CACHE_KEY, JSON.stringify(data)); } catch {}
+};
+
+export const buildFrequencySeries = (frequency) => {
+    const map = new Map();
+    (frequency ?? []).forEach((item) => {
+        const number = Number(item?.number);
+        const count = Number(item?.count) || 0;
+        if (Number.isFinite(number) && number >= 1 && number <= 45) map.set(number, count);
+    });
+    const series = Array.from({ length: 45 }, (_, idx) => ({
+        number: idx + 1, count: map.get(idx + 1) ?? 0,
+    }));
+    const max = Math.max(1, ...series.map((item) => item.count));
+    return { series, max };
+};
+
+export const buildMetricsFromCounts = (counts) => {
+    if (!counts?.length) return null;
+    const total = counts.reduce((acc, v) => acc + v, 0);
+    if (!total) return null;
+    const min = Math.min(...counts), max = Math.max(...counts);
+    const odd = counts.reduce((acc, v, idx) => (idx % 2 === 0 ? acc + v : acc), 0);
+    const even = total - odd;
+    const buckets = {
+        '1-10': counts.slice(0, 10).reduce((a, b) => a + b, 0),
+        '11-20': counts.slice(10, 20).reduce((a, b) => a + b, 0),
+        '21-30': counts.slice(20, 30).reduce((a, b) => a + b, 0),
+        '31-40': counts.slice(30, 40).reduce((a, b) => a + b, 0),
+        '41-45': counts.slice(40, 45).reduce((a, b) => a + b, 0),
+    };
+    return { sum: total, min, max, range: max - min, odd, even, buckets };
+};
+
+export const buildMetricsFromFrequency = (frequency) => {
+    if (!frequency?.length) return null;
+    const counts = Array.from({ length: 45 }, () => 0);
+    frequency.forEach((item) => {
+        const number = Number(item?.number), count = Number(item?.count) || 0;
+        if (number >= 1 && number <= 45) counts[number - 1] = count;
+    });
+    return buildMetricsFromCounts(counts);
+};
+
+export const buildMetricsFromHistory = (items) => {
+    if (!items?.length) return null;
+    const counts = Array.from({ length: 45 }, () => 0);
+    items.forEach((item) => {
+        (item?.numbers ?? []).forEach((value) => {
+            const number = Number(value);
+            if (number >= 1 && number <= 45) counts[number - 1] += 1;
+        });
+    });
+    return buildMetricsFromCounts(counts);
+};
+
+export const toBucketEntries = (metrics) => {
+    if (!metrics?.buckets) return [];
+    const ordered = bucketOrder
+        .filter((key) => Object.prototype.hasOwnProperty.call(metrics.buckets, key))
+        .map((key) => [key, metrics.buckets[key]]);
+    const rest = Object.entries(metrics.buckets)
+        .filter(([key]) => !bucketOrder.includes(key))
+        .sort((a, b) => Number(a[0].split('-')[0]) - Number(b[0].split('-')[0]));
+    return [...ordered, ...rest];
+};
+
+export const emptyPurchaseForm = () => ({ draw_no: '', amount: 5000, sets: 5, prize: 0, note: '' });
+
+export const copyNumbers = async (nums) => {
+    const text = nums.join(', ');
+    try { await navigator.clipboard.writeText(text); alert(`복사 완료: ${text}`); }
+    catch { prompt('복사해서 사용하세요:', text); }
+};
+
+/* 종합 추론 상수 */
+export const METHOD_META = {
+    frequency:   { label: '빈도 Z-score',  desc: '역대 출현 빈도가 기댓값보다 높은 번호', color: '#818cf8', icon: '📊' },
+    fingerprint: { label: '조합 지문',     desc: '역대 당첨 조합의 합계·홀짝·구간 분포에 맞는 번호', color: '#fbbf24', icon: '🔏' },
+    gap:         { label: '갭 분석',       desc: '가장 오래 등장하지 않은 오버듀 번호', color: '#34d399', icon: '⏳' },
+    cooccur:     { label: '공동 출현',     desc: '역대에 함께 출현한 빈도가 높은 번호', color: '#f472b6', icon: '🔗' },
+    diversity:   { label: '다양성',        desc: '구간 커버리지와 번호 범위를 극대화한 번호', color: '#fb923c', icon: '🌈' },
+};
+
+export const METHOD_ORDER = ['fingerprint', 'frequency', 'gap', 'cooccur', 'diversity'];
+
+export const SCORE_META = [
+    { key: 'score_fingerprint', label: '조합 지문',  color: '#fbbf24', weight: 30 },
+    { key: 'score_frequency',   label: '빈도 Z',     color: '#818cf8', weight: 25 },
+    { key: 'score_gap',         label: '갭 분석',    color: '#34d399', weight: 20 },
+    { key: 'score_cooccur',     label: '공동 출현',  color: '#f472b6', weight: 15 },
+    { key: 'score_diversity',   label: '다양성',     color: '#fb923c', weight: 10 },
+];

src/pages/music/MusicStudio.css

@@ -74,6 +74,7 @@
 }
 
 .ms-header__right {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1597,17 +1598,18 @@
 .ms-library__grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    align-items: start;
     gap: 14px;
 }
 
 /* ── Library Card ─────────────────────────────────── */
 .ms-lib-card {
-    padding: 16px;
+    padding: 14px;
     border-radius: 16px;
     border: 1px solid var(--ms-line);
     background: var(--ms-surface);
     display: grid;
-    gap: 12px;
+    gap: 10px;
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
@@ -1620,48 +1622,63 @@
     border-color: color-mix(in srgb, var(--lib-accent, var(--ms-accent)) 60%, transparent);
 }
 
-.ms-lib-card__top {
+.ms-lib-card__header {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
+    min-width: 0;
 }
 
 .ms-lib-card__icon {
-    font-size: 22px;
+    font-size: 20px;
     flex-shrink: 0;
     filter: drop-shadow(0 0 6px var(--lib-accent, var(--ms-accent)));
 }
 
-.ms-lib-card__info {
+.ms-lib-card__title {
     flex: 1;
     min-width: 0;
-}
-
-.ms-lib-card__title {
     font-family: var(--ms-ff-disp);
-    font-size: 15px;
+    font-size: 16px;
+    font-weight: 600;
     letter-spacing: 0.04em;
     color: var(--ms-text);
-    margin: 0 0 3px;
+    margin: 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
+.ms-lib-card__controls {
+    display: flex;
+    gap: 4px;
+    flex-shrink: 0;
+}
+
+.ms-lib-card__sub {
+    padding-left: 28px;
+}
+
+.ms-lib-card__filename {
+    font-family: var(--ms-ff-mono);
+    font-size: 10px;
+    color: var(--ms-dim);
+    margin: 0 0 2px;
+    letter-spacing: 0.02em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    opacity: 0.7;
+}
+
 .ms-lib-card__meta {
     font-family: var(--ms-ff-mono);
     font-size: 10px;
-    color: var(--ms-muted);
+    color: var(--ms-dim);
     margin: 0;
     letter-spacing: 0.06em;
 }
 
-.ms-lib-card__controls {
-    display: flex;
-    gap: 6px;
-    flex-shrink: 0;
-}
-
 .ms-lib-card__tags {
     display: flex;
     flex-wrap: wrap;
@@ -1699,6 +1716,703 @@
     .ms-bpm-presets {
         flex-wrap: wrap;
     }
+
+    /* 크레딧 뱃지 */
+    .ms-credits {
+        position: static;
+        margin-bottom: 8px;
+        justify-content: center;
+    }
+
+    /* 모델 바 */
+    .ms-model-bar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .ms-model-bar__options {
+        justify-content: center;
+    }
+
+    /* 프로바이더 바 */
+    .ms-provider-bar {
+        flex-direction: column;
+    }
+
+    .ms-provider-btn__desc {
+        display: none;
+    }
+
+    /* 라이브러리 그리드 1열 */
+    .ms-library__grid {
+        grid-template-columns: 1fr;
+    }
+
+    /* 카드 액션 버튼 */
+    .ms-lib-card__actions {
+        justify-content: center;
+    }
+}
+
+/* ═══════════════════════════════════════════════════
+   PROVIDER BAR
+═══════════════════════════════════════════════════ */
+.ms-provider-bar {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 20px;
+}
+
+.ms-provider-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    background: rgba(255,255,255,0.03);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.2s;
+    text-align: left;
+}
+
+.ms-provider-btn:hover {
+    background: rgba(255,255,255,0.06);
+    border-color: rgba(255,255,255,0.15);
+}
+
+.ms-provider-btn.is-active {
+    background: rgba(var(--ms-accent-rgb, 245,166,35), 0.12);
+    border-color: var(--ms-accent, #f5a623);
+    box-shadow: 0 0 12px rgba(var(--ms-accent-rgb, 245,166,35), 0.15);
+}
+
+.ms-provider-btn__icon {
+    font-size: 20px;
+    flex-shrink: 0;
+}
+
+.ms-provider-btn__name {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 15px;
+    letter-spacing: 0.04em;
+    color: #f0f0f0;
+}
+
+.ms-provider-btn__desc {
+    font-size: 10px;
+    color: rgba(255,255,255,0.4);
+    margin-left: auto;
+}
+
+/* ═══════════════════════════════════════════════════
+   VOCALS & LYRICS (SUNO)
+═══════════════════════════════════════════════════ */
+.ms-vocal-toggle {
+    display: flex;
+    gap: 6px;
+    margin-bottom: 16px;
+}
+
+.ms-vocal-btn {
+    flex: 1;
+    padding: 10px 12px;
+    background: rgba(255,255,255,0.03);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 8px;
+    color: rgba(255,255,255,0.6);
+    cursor: pointer;
+    font-size: 13px;
+    transition: all 0.2s;
+}
+
+.ms-vocal-btn:hover {
+    background: rgba(255,255,255,0.06);
+}
+
+.ms-vocal-btn.is-active {
+    background: rgba(var(--ms-accent-rgb, 245,166,35), 0.12);
+    border-color: var(--ms-accent, #f5a623);
+    color: #f0f0f0;
+}
+
+.ms-lyrics-wrap {
+    margin-top: 4px;
+}
+
+.ms-lyrics-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 6px;
+}
+
+.ms-lyrics {
+    width: 100%;
+    min-height: 160px;
+    padding: 12px;
+    background: rgba(0,0,0,0.3);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 8px;
+    color: #e0e0e0;
+    font-family: 'Courier Prime', monospace;
+    font-size: 13px;
+    line-height: 1.6;
+    resize: vertical;
+}
+
+.ms-lyrics:focus {
+    outline: none;
+    border-color: var(--ms-accent, #f5a623);
+}
+
+.ms-lyrics-hint {
+    margin-top: 6px;
+    font-size: 11px;
+    color: rgba(255,255,255,0.35);
+}
+
+.ms-btn--sm {
+    font-size: 11px;
+    padding: 4px 10px;
+}
+
+/* ═══════════════════════════════════════════════════
+   PROVIDER TAG
+═══════════════════════════════════════════════════ */
+.ms-result__tag--provider {
+    font-weight: 600;
+    letter-spacing: 0.02em;
+}
+
+.ms-result__tag--provider.is-suno {
+    background: rgba(168, 85, 247, 0.15);
+    border-color: rgba(168, 85, 247, 0.3);
+    color: #c084fc;
+}
+
+.ms-result__tag--provider.is-local {
+    background: rgba(96, 165, 250, 0.15);
+    border-color: rgba(96, 165, 250, 0.3);
+    color: #60a5fa;
+}
+
+/* ═══════════════════════════════════════════════════
+   LYRICS IN RESULT
+═══════════════════════════════════════════════════ */
+.ms-result__lyrics {
+    margin-top: 12px;
+    border: 1px solid rgba(255,255,255,0.06);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.ms-result__lyrics summary {
+    padding: 8px 12px;
+    cursor: pointer;
+    font-size: 13px;
+    color: rgba(255,255,255,0.6);
+    background: rgba(255,255,255,0.02);
+}
+
+.ms-result__lyrics summary:hover {
+    color: #f0f0f0;
+}
+
+.ms-result__lyrics-text {
+    padding: 12px;
+    margin: 0;
+    font-family: 'Courier Prime', monospace;
+    font-size: 12px;
+    line-height: 1.7;
+    color: rgba(255,255,255,0.7);
+    white-space: pre-wrap;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+/* ═══════════════════════════════════════════════════
+   ERROR BANNER
+═══════════════════════════════════════════════════ */
+.ms-error-banner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 10px 14px;
+    border-radius: 8px;
+    border: 1px solid rgba(232, 92, 58, 0.3);
+    background: rgba(232, 92, 58, 0.08);
+    color: #e85c3a;
+    font-size: 12px;
+    font-family: var(--ms-ff-mono);
+}
+
+/* ═══════════════════════════════════════════════════
+   SKELETON LOADING
+═══════════════════════════════════════════════════ */
+.ms-lib-card--skeleton {
+    pointer-events: none;
+}
+
+.ms-skel {
+    display: block;
+    border-radius: 4px;
+    background: linear-gradient(90deg, var(--ms-surface2) 25%, rgba(255,255,255,0.06) 50%, var(--ms-surface2) 75%);
+    background-size: 200% 100%;
+    animation: ms-shimmer 1.5s ease-in-out infinite;
+}
+
+.ms-skel--icon {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.ms-skel--title {
+    flex: 1;
+    height: 16px;
+}
+
+.ms-skel--btn {
+    width: 48px;
+    height: 20px;
+    flex-shrink: 0;
+}
+
+.ms-skel--filename {
+    width: 70%;
+    height: 10px;
+    margin-bottom: 4px;
+}
+
+.ms-skel--meta {
+    width: 45%;
+    height: 10px;
+}
+
+.ms-skel--tag {
+    width: 52px;
+    height: 18px;
+    border-radius: 999px;
+}
+
+@keyframes ms-shimmer {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+
+/* ═══════════════════════════════════════════════════
+   CREDITS BADGE (header)
+═══════════════════════════════════════════════════ */
+.ms-credits {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    border: 1px solid var(--ms-line);
+    border-radius: 6px;
+    background: var(--ms-surface);
+    font-size: 11px;
+    color: var(--ms-muted);
+    z-index: 2;
+}
+
+.ms-credits__label {
+    font-family: var(--ms-ff-mono);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    font-size: 9px;
+}
+
+.ms-credits__value {
+    font-weight: 700;
+    color: var(--ms-accent);
+    font-size: 13px;
+}
+
+/* ═══════════════════════════════════════════════════
+   MODEL SELECTOR BAR
+═══════════════════════════════════════════════════ */
+.ms-model-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: var(--ms-surface);
+    border: 1px solid var(--ms-line);
+    border-radius: 8px;
+}
+
+.ms-model-bar__label {
+    font-family: var(--ms-ff-mono);
+    font-size: 10px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--ms-muted);
+    flex-shrink: 0;
+}
+
+.ms-model-bar__options {
+    display: flex;
+    gap: 4px;
+    flex-wrap: wrap;
+}
+
+.ms-model-btn {
+    padding: 4px 10px;
+    font-size: 11px;
+    font-family: var(--ms-ff-mono);
+    background: transparent;
+    border: 1px solid var(--ms-line);
+    border-radius: 4px;
+    color: var(--ms-muted);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.ms-model-btn:hover {
+    border-color: var(--ms-accent);
+    color: var(--ms-text);
+}
+
+.ms-model-btn.is-active {
+    background: var(--ms-accent);
+    border-color: var(--ms-accent);
+    color: #0c0b09;
+    font-weight: 600;
+}
+
+/* ═══════════════════════════════════════════════════
+   LIBRARY CARD — ACTION BUTTONS
+═══════════════════════════════════════════════════ */
+.ms-lib-card__actions {
+    display: flex;
+    gap: 6px;
+    padding: 6px 0 0;
+    border-top: 1px solid var(--ms-line-2);
+    margin-top: 6px;
+    flex-wrap: wrap;
+}
+
+.ms-lib-card__actions .ms-btn--sm {
+    font-size: 10px;
+    padding: 3px 8px;
+}
+
+.ms-lib-card__actions .ms-btn--sm:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+/* ═══════════════════════════════════════════════════
+   LYRICS TAB
+═══════════════════════════════════════════════════ */
+.ms-lyrics-tab {
+    display: grid;
+    gap: 24px;
+}
+
+.ms-lyrics-tab__head {
+    margin-bottom: 4px;
+}
+
+.ms-lyrics-tab__title {
+    font-family: var(--ms-ff-disp);
+    font-size: 28px;
+    letter-spacing: 0.06em;
+    margin: 0 0 8px;
+    color: var(--ms-text);
+}
+
+.ms-lyrics-tab__desc {
+    font-size: 12px;
+    color: var(--ms-muted);
+    margin: 0;
+    line-height: 1.6;
+}
+
+/* ── Input area ── */
+.ms-lyrics-tab__form {
+    display: grid;
+    gap: 14px;
+}
+
+.ms-lyrics-tab__input-wrap {
+    display: grid;
+    gap: 8px;
+    background: var(--ms-surface);
+    border: 1px solid var(--ms-line);
+    border-radius: 12px;
+    padding: 14px;
+    transition: border-color 0.2s;
+}
+
+.ms-lyrics-tab__input-wrap:focus-within {
+    border-color: var(--ms-accent);
+}
+
+.ms-lyrics-tab__input {
+    width: 100%;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--ms-text);
+    font-family: var(--ms-ff-body);
+    font-size: 14px;
+    line-height: 1.6;
+    resize: vertical;
+    min-height: 60px;
+}
+
+.ms-lyrics-tab__input::placeholder {
+    color: var(--ms-dim);
+}
+
+.ms-lyrics-tab__input-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.ms-lyrics-tab__count {
+    font-family: var(--ms-ff-mono);
+    font-size: 10px;
+    color: var(--ms-dim);
+    letter-spacing: 0.06em;
+}
+
+/* ── Accent button ── */
+.ms-btn--accent {
+    padding: 8px 20px;
+    font-size: 13px;
+    font-family: var(--ms-ff-body);
+    font-weight: 600;
+    background: var(--ms-accent);
+    color: #0c0b09;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: opacity 0.2s, transform 0.15s;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.ms-btn--accent:hover:not(:disabled) {
+    opacity: 0.9;
+    transform: translateY(-1px);
+}
+
+.ms-btn--accent:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.ms-btn--accent.is-loading {
+    pointer-events: none;
+}
+
+.ms-btn__spinner {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    border: 2px solid rgba(12,11,9,0.2);
+    border-top-color: #0c0b09;
+    border-radius: 50%;
+    animation: ms-spin 0.7s linear infinite;
+}
+
+@keyframes ms-spin {
+    to { transform: rotate(360deg); }
+}
+
+/* ── Empty state ── */
+.ms-lyrics-tab__empty {
+    text-align: center;
+    padding: 48px 20px;
+    border: 1px dashed var(--ms-line);
+    border-radius: 16px;
+    background: var(--ms-surface);
+}
+
+.ms-lyrics-tab__empty-icon {
+    font-size: 40px;
+    display: block;
+    margin-bottom: 12px;
+    opacity: 0.4;
+}
+
+.ms-lyrics-tab__empty p {
+    color: var(--ms-muted);
+    font-size: 13px;
+    margin: 0 0 6px;
+}
+
+.ms-lyrics-tab__empty-hint {
+    font-family: var(--ms-ff-mono);
+    font-size: 10px !important;
+    color: var(--ms-dim) !important;
+    letter-spacing: 0.04em;
+}
+
+/* ── Loading state ── */
+.ms-lyrics-tab__loading {
+    text-align: center;
+    padding: 32px 20px;
+    border: 1px solid var(--ms-line);
+    border-radius: 16px;
+    background: var(--ms-surface);
+}
+
+.ms-lyrics-tab__loading p {
+    color: var(--ms-muted);
+    font-size: 12px;
+    font-family: var(--ms-ff-mono);
+    margin: 12px 0 0;
+    letter-spacing: 0.04em;
+}
+
+.ms-lyrics-tab__loading-bar {
+    height: 3px;
+    width: 60%;
+    margin: 0 auto;
+    border-radius: 2px;
+    background: linear-gradient(90deg, transparent, var(--ms-accent), transparent);
+    background-size: 200% 100%;
+    animation: ms-shimmer 1.2s ease-in-out infinite;
+}
+
+/* ── Results list ── */
+.ms-lyrics-tab__results {
+    display: grid;
+    gap: 16px;
+}
+
+/* ── Lyrics Card ── */
+.ms-lyrics-card {
+    background: var(--ms-surface);
+    border: 1px solid var(--ms-line);
+    border-radius: 14px;
+    overflow: hidden;
+    transition: border-color 0.2s;
+}
+
+.ms-lyrics-card:hover {
+    border-color: color-mix(in srgb, var(--ms-accent) 50%, transparent);
+}
+
+.ms-lyrics-card__header {
+    padding: 14px 16px 10px;
+    border-bottom: 1px solid var(--ms-line-2);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 8px;
+}
+
+.ms-lyrics-card__title {
+    font-family: var(--ms-ff-disp);
+    font-size: 18px;
+    letter-spacing: 0.04em;
+    color: var(--ms-text);
+    margin: 0 0 4px;
+}
+
+.ms-lyrics-card__prompt {
+    font-family: var(--ms-ff-mono);
+    font-size: 10px;
+    color: var(--ms-dim);
+    letter-spacing: 0.04em;
+}
+
+.ms-lyrics-card__text {
+    padding: 14px 16px;
+    margin: 0;
+    font-family: var(--ms-ff-mono);
+    font-size: 12px;
+    line-height: 1.8;
+    color: rgba(255,255,255,0.75);
+    white-space: pre-wrap;
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.ms-lyrics-card__date {
+    font-family: var(--ms-ff-mono);
+    font-size: 9px;
+    color: var(--ms-dim);
+    letter-spacing: 0.04em;
+    margin-left: auto;
+    flex-shrink: 0;
+}
+
+.ms-lyrics-card__actions {
+    display: flex;
+    gap: 6px;
+    padding: 8px 16px 12px;
+    border-top: 1px solid var(--ms-line-2);
+    flex-wrap: wrap;
+}
+
+/* ── 수정 모드 ── */
+.ms-lyrics-card.is-editing {
+    border-color: var(--ms-accent);
+    box-shadow: 0 0 16px rgba(245, 166, 35, 0.08);
+}
+
+.ms-lyrics-card__title-input {
+    width: 100%;
+    background: var(--ms-surface2);
+    border: 1px solid var(--ms-line);
+    border-radius: 6px;
+    padding: 6px 10px;
+    font-family: var(--ms-ff-disp);
+    font-size: 16px;
+    letter-spacing: 0.04em;
+    color: var(--ms-text);
+    outline: none;
+    margin-bottom: 4px;
+}
+
+.ms-lyrics-card__title-input:focus {
+    border-color: var(--ms-accent);
+}
+
+.ms-lyrics-card__text-input {
+    width: 100%;
+    background: var(--ms-surface2);
+    border: none;
+    border-top: 1px solid var(--ms-line-2);
+    border-bottom: 1px solid var(--ms-line-2);
+    padding: 14px 16px;
+    font-family: var(--ms-ff-mono);
+    font-size: 12px;
+    line-height: 1.8;
+    color: rgba(255,255,255,0.85);
+    resize: vertical;
+    min-height: 200px;
+    outline: none;
+}
+
+.ms-btn--danger-text {
+    color: #e85c3a !important;
+    opacity: 0.7;
+}
+
+.ms-btn--danger-text:hover {
+    opacity: 1;
+}
+
+.ms-btn--accent.ms-btn--sm {
+    padding: 3px 10px;
+    font-size: 11px;
 }
 
 /* ═══════════════════════════════════════════════════
@@ -1712,3 +2426,173 @@
         animation: none !important;
     }
 }
+
+/* ── Phase 1: Credits Badge ─────────────────────────────── */
+.ms-credits-badge {
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 6px 14px; border-radius: 20px;
+    background: rgba(245, 166, 35, 0.1);
+    border: 1px solid rgba(245, 166, 35, 0.25);
+    font-family: 'Courier Prime', monospace;
+    font-size: 0.85rem; color: var(--ms-accent);
+}
+.ms-credits-badge__icon { font-size: 1rem; }
+.ms-credits-badge__value { font-weight: 700; font-size: 1.1rem; }
+.ms-credits-badge__label { color: var(--ms-muted); font-size: 0.75rem; text-transform: uppercase; }
+.ms-credits-badge.is-low {
+    background: rgba(231, 76, 60, 0.15);
+    border-color: rgba(231, 76, 60, 0.4);
+    color: #e74c3c;
+    animation: pulse-badge 1.5s ease-in-out infinite;
+}
+@keyframes pulse-badge {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+}
+
+/* ── Phase 1: Vocal Gender Toggle ───────────────────────── */
+.ms-gender-toggle { display: flex; gap: 6px; }
+.ms-gender-btn {
+    flex: 1; padding: 8px 12px; border-radius: 8px;
+    background: var(--ms-surface); border: 1px solid var(--ms-line);
+    color: var(--ms-muted); font-family: 'Syne', sans-serif;
+    font-size: 0.82rem; cursor: pointer; transition: all 0.2s;
+    display: flex; align-items: center; gap: 6px; justify-content: center;
+}
+.ms-gender-btn:hover { border-color: var(--ms-accent); color: var(--ms-text); }
+.ms-gender-btn.is-active { background: rgba(245, 166, 35, 0.12); border-color: var(--ms-accent); color: var(--ms-text); }
+.ms-gender-btn.is-active.is-male { background: rgba(74, 158, 255, 0.12); border-color: #4a9eff; color: #4a9eff; }
+.ms-gender-btn.is-active.is-female { background: rgba(255, 107, 157, 0.12); border-color: #ff6b9d; color: #ff6b9d; }
+.ms-gender-btn__icon { font-size: 1.1rem; }
+
+/* ── Phase 1: Negative Tags ─────────────────────────────── */
+.ms-negative-tags { display: flex; flex-direction: column; gap: 8px; }
+.ms-negative-tags__presets { display: flex; flex-wrap: wrap; gap: 6px; }
+.ms-neg-chip {
+    padding: 4px 12px; border-radius: 14px;
+    background: var(--ms-surface); border: 1px solid var(--ms-line);
+    color: var(--ms-muted); font-size: 0.78rem; cursor: pointer;
+    font-family: 'Syne', sans-serif; transition: all 0.2s;
+}
+.ms-neg-chip:hover { border-color: #e74c3c; color: var(--ms-text); }
+.ms-neg-chip.is-active {
+    background: rgba(231, 76, 60, 0.12); border-color: #e74c3c; color: #e74c3c;
+    text-decoration: line-through;
+}
+.ms-negative-tags__input {
+    padding: 8px 12px; border-radius: 8px;
+    background: var(--ms-surface); border: 1px solid var(--ms-line);
+    color: var(--ms-text); font-family: 'Syne', sans-serif; font-size: 0.82rem;
+}
+.ms-negative-tags__input::placeholder { color: var(--ms-dim); }
+.ms-param-hint--inline {
+    font-size: 0.72rem; color: var(--ms-dim); margin: 0 0 4px;
+    font-family: 'Courier Prime', monospace;
+}
+
+/* ── More Menu ──────────────────────────────────────────── */
+.ms-more-menu { position: relative; }
+.ms-more-menu__dropdown {
+    position: absolute; bottom: 100%; right: 0;
+    background: var(--ms-surface2); border: 1px solid var(--ms-line);
+    border-radius: 8px; padding: 4px; min-width: 160px; z-index: 20;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+}
+.ms-more-menu__dropdown button {
+    display: block; width: 100%; padding: 8px 12px; border: none;
+    background: none; color: var(--ms-text); font-size: 0.82rem;
+    font-family: 'Syne', sans-serif; cursor: pointer; text-align: left;
+    border-radius: 6px;
+}
+.ms-more-menu__dropdown button:hover { background: rgba(245,166,35,0.1); }
+.ms-more-menu__dropdown button:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* ── Modal ──────────────────────────────────────────────── */
+.ms-modal-overlay {
+    position: fixed; inset: 0; background: rgba(0,0,0,0.7);
+    display: flex; align-items: center; justify-content: center; z-index: 100;
+}
+.ms-modal {
+    background: var(--ms-surface); border: 1px solid var(--ms-line);
+    border-radius: 16px; padding: 24px; max-width: 520px; width: 90%;
+    max-height: 90vh; overflow-y: auto;
+}
+.ms-modal__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+.ms-modal__title { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; color: var(--ms-text); }
+.ms-modal__close { background: none; border: none; color: var(--ms-muted); font-size: 1.2rem; cursor: pointer; }
+.ms-modal__actions { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; }
+
+/* ── Cover Art Grid ─────────────────────────────────────── */
+.ms-cover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.ms-cover-option {
+    border: 2px solid var(--ms-line); border-radius: 12px; overflow: hidden;
+    cursor: pointer; background: none; padding: 0; transition: border-color 0.2s;
+}
+.ms-cover-option:hover { border-color: var(--ms-accent); }
+.ms-cover-option.is-selected { border-color: var(--ms-accent); box-shadow: 0 0 12px rgba(245,166,35,0.3); }
+.ms-cover-option__img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
+.ms-cover-option__label {
+    display: block; padding: 8px; text-align: center;
+    font-family: 'Courier Prime', monospace; font-size: 0.78rem; color: var(--ms-muted);
+}
+
+/* ── Stem Modal ─────────────────────────────────────────── */
+.ms-modal--wide { max-width: 680px; }
+.ms-modal__subtitle { font-size: 0.78rem; color: var(--ms-muted); font-family: 'Courier Prime', monospace; }
+.ms-stem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
+.ms-stem-card {
+    display: flex; flex-direction: column; align-items: center; gap: 6px;
+    padding: 12px 8px; border-radius: 10px;
+    background: var(--ms-surface2); border: 1px solid var(--ms-line);
+    transition: border-color 0.2s;
+}
+.ms-stem-card.is-playing { border-color: var(--ms-accent); background: rgba(245,166,35,0.08); }
+.ms-stem-card__icon { font-size: 1.4rem; }
+.ms-stem-card__name {
+    font-family: 'Courier Prime', monospace; font-size: 0.72rem;
+    color: var(--ms-muted); text-transform: capitalize;
+}
+.ms-stem-card__actions { display: flex; gap: 6px; }
+
+/* ── Synced Lyrics Player ───────────────────────────────── */
+.ms-synced-player {
+    background: var(--ms-surface); border: 1px solid var(--ms-line);
+    border-radius: 12px; padding: 16px; margin-top: 12px;
+}
+.ms-synced-player__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+.ms-synced-player__title { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; color: var(--ms-text); }
+.ms-synced-player__audio { width: 100%; margin-bottom: 12px; }
+.ms-synced-player__lyrics { line-height: 1.8; font-family: 'Syne', sans-serif; font-size: 0.95rem; }
+.ms-synced-word { color: var(--ms-dim); transition: color 0.15s; }
+.ms-synced-word.is-active { color: var(--synced-accent, var(--ms-accent)); font-weight: 600; }
+.ms-synced-word.is-past { color: var(--ms-muted); }
+
+/* ── Style Boost Button ─────────────────────────────────── */
+.ms-style-boost-btn { margin-left: auto; }
+.ms-style-boost-btn.is-loading { opacity: 0.6; }
+
+/* ── Remix Tab ──────────────────────────────────────────── */
+.ms-remix-tab { display: flex; flex-direction: column; gap: 20px; }
+.ms-remix-tab__header { }
+.ms-remix-tab__title { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; color: var(--ms-text); }
+.ms-remix-tab__desc { font-size: 0.85rem; color: var(--ms-muted); }
+
+.ms-remix-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.ms-remix-card {
+    display: flex; flex-direction: column; align-items: center; gap: 6px;
+    padding: 20px 12px; border-radius: 12px; cursor: pointer;
+    background: var(--ms-surface); border: 1px solid var(--ms-line);
+    transition: all 0.2s; text-align: center;
+}
+.ms-remix-card:hover { border-color: var(--ms-accent); background: var(--ms-surface2); }
+.ms-remix-card.is-active { border-color: var(--ms-accent); background: rgba(245,166,35,0.08); }
+.ms-remix-card__icon { font-size: 2rem; }
+.ms-remix-card__label { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; color: var(--ms-text); }
+.ms-remix-card__desc { font-size: 0.72rem; color: var(--ms-muted); font-family: 'Courier Prime', monospace; }
+
+.ms-remix-params {
+    display: flex; flex-direction: column; gap: 12px;
+    padding: 16px; border-radius: 12px;
+    background: var(--ms-surface); border: 1px solid var(--ms-line);
+}
+.ms-remix-submit { align-self: flex-start; margin-top: 8px; }

src/pages/music/components/AudioPlayer.jsx

@@ -0,0 +1,128 @@
+import React, { useRef, useState, useEffect } from 'react';
+
+/* ─────────────────────────────────────────────
+   유틸
+───────────────────────────────────────────── */
+const pad = (n) => String(Math.floor(n)).padStart(2, '0');
+export const fmtTime = (s) => `${pad(s / 60)}:${pad(s % 60)}`;
+
+/* ─────────────────────────────────────────────
+   Audio Player (실제 <audio> 기반)
+───────────────────────────────────────────── */
+const AudioPlayer = ({ audioUrl, totalSec, accentColor }) => {
+    const audioRef   = useRef(null);
+    const [playing, setPlaying]   = useState(false);
+    const [elapsed, setElapsed]   = useState(0);
+    const [duration, setDuration] = useState(totalSec ?? 0);
+    const [volume, setVolume]     = useState(1);
+
+    /* 실제 오디오가 없으면 가짜 타이머로 폴백 */
+    const isFake = !audioUrl;
+    const timerRef = useRef(null);
+
+    const total = duration || totalSec || 60;
+
+    const togglePlay = () => {
+        if (isFake) {
+            if (playing) {
+                clearInterval(timerRef.current);
+                setPlaying(false);
+            } else {
+                setPlaying(true);
+                timerRef.current = setInterval(() => {
+                    setElapsed((e) => {
+                        if (e >= total - 1) {
+                            clearInterval(timerRef.current);
+                            setPlaying(false);
+                            return 0;
+                        }
+                        return e + 1;
+                    });
+                }, 1000);
+            }
+            return;
+        }
+        const el = audioRef.current;
+        if (!el) return;
+        playing ? el.pause() : el.play();
+    };
+
+    const handleSeek = (e) => {
+        const rect  = e.currentTarget.getBoundingClientRect();
+        const ratio = (e.clientX - rect.left) / rect.width;
+        const newTime = ratio * total;
+        if (!isFake && audioRef.current) {
+            audioRef.current.currentTime = newTime;
+        }
+        setElapsed(newTime);
+    };
+
+    const handleVolumeChange = (e) => {
+        const v = Number(e.target.value);
+        setVolume(v);
+        if (!isFake && audioRef.current) audioRef.current.volume = v;
+    };
+
+    useEffect(() => () => clearInterval(timerRef.current), []);
+
+    const progress = (elapsed / total) * 100;
+
+    return (
+        <div className="ms-audio-player" style={{ '--player-accent': accentColor }}>
+            {!isFake && (
+                <audio
+                    ref={audioRef}
+                    src={audioUrl}
+                    onLoadedMetadata={(e) => setDuration(e.target.duration)}
+                    onTimeUpdate={(e) => setElapsed(e.target.currentTime)}
+                    onPlay={() => setPlaying(true)}
+                    onPause={() => setPlaying(false)}
+                    onEnded={() => { setPlaying(false); setElapsed(0); }}
+                />
+            )}
+            <button
+                type="button"
+                className={`ms-player__play ${playing ? 'is-playing' : ''}`}
+                onClick={togglePlay}
+                aria-label={playing ? '일시정지' : '재생'}
+            >
+                {playing ? (
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                        <rect x="3" y="2" width="4" height="12" rx="1" />
+                        <rect x="9" y="2" width="4" height="12" rx="1" />
+                    </svg>
+                ) : (
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                        <path d="M4 2l10 6-10 6V2z" />
+                    </svg>
+                )}
+            </button>
+
+            <div className="ms-player__timeline">
+                <div className="ms-player__bar" onClick={handleSeek} role="slider"
+                     aria-label="재생 위치" aria-valuenow={Math.round(elapsed)} aria-valuemin={0} aria-valuemax={Math.round(total)}>
+                    <div className="ms-player__fill" style={{ width: `${progress}%` }} />
+                    <div className="ms-player__thumb" style={{ left: `${progress}%` }} />
+                </div>
+                <div className="ms-player__times">
+                    <span>{fmtTime(elapsed)}</span>
+                    <span>{fmtTime(total)}</span>
+                </div>
+            </div>
+
+            <div className="ms-volume">
+                <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" aria-hidden>
+                    <path d="M2 5h2.5l3-3v10l-3-3H2V5zm8.5-1.5a4.5 4.5 0 010 7" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
+                </svg>
+                <input
+                    type="range" min={0} max={1} step={0.02} value={volume}
+                    onChange={handleVolumeChange}
+                    className="ms-volume__slider"
+                    aria-label="볼륨"
+                />
+            </div>
+        </div>
+    );
+};
+
+export default AudioPlayer;

src/pages/music/components/CoverArtModal.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+
+const CoverArtModal = ({ images, onSelect, onClose }) => {
+    const [selected, setSelected] = useState(null);
+
+    if (!images || images.length === 0) return null;
+
+    return (
+        <div className="ms-modal-overlay" onClick={onClose}>
+            <div className="ms-modal" onClick={(e) => e.stopPropagation()}>
+                <div className="ms-modal__header">
+                    <h3 className="ms-modal__title">Cover Art 선택</h3>
+                    <button type="button" className="ms-modal__close" onClick={onClose}>✕</button>
+                </div>
+                <div className="ms-cover-grid">
+                    {images.map((url, idx) => (
+                        <button
+                            key={idx}
+                            type="button"
+                            className={`ms-cover-option ${selected === idx ? 'is-selected' : ''}`}
+                            onClick={() => setSelected(idx)}
+                        >
+                            <img src={url} alt={`Cover option ${idx + 1}`} className="ms-cover-option__img" />
+                            <span className="ms-cover-option__label">Option {idx + 1}</span>
+                        </button>
+                    ))}
+                </div>
+                <div className="ms-modal__actions">
+                    <button type="button" className="ms-btn ms-btn--accent" disabled={selected === null}
+                        onClick={() => { if (selected !== null) onSelect(images[selected]); }}>
+                        이 이미지 사용
+                    </button>
+                    <button type="button" className="ms-btn ms-btn--ghost" onClick={onClose}>취소</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CoverArtModal;

src/pages/music/components/CreditsBadge.jsx

@@ -0,0 +1,36 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { getMusicCredits } from '../../../api';
+
+const CreditsBadge = () => {
+    const [credits, setCredits] = useState(null);
+
+    const fetchCredits = useCallback(async () => {
+        try {
+            const data = await getMusicCredits();
+            setCredits(data);
+        } catch {}
+    }, []);
+
+    useEffect(() => {
+        fetchCredits();
+        const interval = setInterval(fetchCredits, 30000);
+        return () => clearInterval(interval);
+    }, [fetchCredits]);
+
+    if (!credits) return null;
+
+    const remaining = credits.credits_left ?? credits.remaining ?? credits.data ?? null;
+    if (remaining == null) return null;
+
+    const isLow = remaining <= 10;
+
+    return (
+        <div className={`ms-credits-badge ${isLow ? 'is-low' : ''}`}>
+            <span className="ms-credits-badge__icon">⚡</span>
+            <span className="ms-credits-badge__value">{remaining}</span>
+            <span className="ms-credits-badge__label">credits</span>
+        </div>
+    );
+};
+
+export default CreditsBadge;

src/pages/music/components/LyricsTab.jsx

@@ -0,0 +1,245 @@
+import React, { useEffect, useState } from 'react';
+import {
+    generateMusicLyrics,
+    getSavedLyrics,
+    saveLyrics,
+    updateLyrics,
+    deleteLyrics,
+} from '../../../api';
+
+/* ─────────────────────────────────────────────
+   Lyrics Tab
+───────────────────────────────────────────── */
+const LyricsTab = ({ onUseInCreate }) => {
+    const [lyrPrompt, setLyrPrompt]     = useState('');
+    const [lyrLoading, setLyrLoading]   = useState(false);
+    const [lyrError, setLyrError]       = useState(null);
+    const [copied, setCopied]           = useState(null);  // id
+    const [saved, setSaved]             = useState([]);     // DB에 저장된 가사
+    const [loadingSaved, setLoadingSaved] = useState(true);
+    const [editingId, setEditingId]     = useState(null);
+    const [editTitle, setEditTitle]     = useState('');
+    const [editText, setEditText]       = useState('');
+
+    /* ── 저장된 가사 로드 ── */
+    useEffect(() => {
+        setLoadingSaved(true);
+        getSavedLyrics()
+            .then((data) => setSaved(data.lyrics ?? []))
+            .catch(() => {})
+            .finally(() => setLoadingSaved(false));
+    }, []);
+
+    /* ── AI 생성 → 즉시 저장 ── */
+    const handleGenerate = async () => {
+        if (!lyrPrompt.trim() || lyrLoading) return;
+        setLyrLoading(true);
+        setLyrError(null);
+        try {
+            const res = await generateMusicLyrics(lyrPrompt.trim());
+            if (res?.text) {
+                const record = await saveLyrics({
+                    title: res.title || '',
+                    text: res.text,
+                    prompt: lyrPrompt.trim(),
+                });
+                setSaved((prev) => [record, ...prev]);
+            } else {
+                setLyrError('가사 생성 결과가 없습니다');
+            }
+        } catch (e) {
+            setLyrError(e.message || '가사 생성에 실패했습니다');
+        } finally {
+            setLyrLoading(false);
+        }
+    };
+
+    /* ── 복사 ── */
+    const handleCopy = (text, id) => {
+        navigator.clipboard.writeText(text).then(() => {
+            setCopied(id);
+            setTimeout(() => setCopied(null), 2000);
+        });
+    };
+
+    /* ── 삭제 ── */
+    const handleDelete = async (id) => {
+        try {
+            await deleteLyrics(id);
+            setSaved((prev) => prev.filter((l) => l.id !== id));
+        } catch {}
+    };
+
+    /* ── 수정 시작 ── */
+    const startEdit = (item) => {
+        setEditingId(item.id);
+        setEditTitle(item.title);
+        setEditText(item.text);
+    };
+
+    /* ── 수정 저장 ── */
+    const handleSaveEdit = async () => {
+        if (editingId == null) return;
+        try {
+            const updated = await updateLyrics(editingId, { title: editTitle, text: editText });
+            setSaved((prev) => prev.map((l) => l.id === editingId ? updated : l));
+            setEditingId(null);
+        } catch {}
+    };
+
+    /* ── 수정 취소 ── */
+    const cancelEdit = () => setEditingId(null);
+
+    return (
+        <div className="ms-lyrics-tab">
+            <div className="ms-lyrics-tab__form">
+                <div className="ms-lyrics-tab__head">
+                    <h2 className="ms-lyrics-tab__title">AI Lyrics Generator</h2>
+                    <p className="ms-lyrics-tab__desc">
+                        원하는 분위기, 주제, 스타일을 설명하면 AI가 가사를 작성합니다.
+                    </p>
+                </div>
+
+                <div className="ms-lyrics-tab__input-wrap">
+                    <textarea
+                        className="ms-lyrics-tab__input"
+                        placeholder="예: 비 오는 밤, 혼자 걷는 도시의 거리를 배경으로 한 감성적인 발라드 가사"
+                        value={lyrPrompt}
+                        onChange={(e) => setLyrPrompt(e.target.value)}
+                        rows={3}
+                        maxLength={200}
+                        onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleGenerate(); } }}
+                    />
+                    <div className="ms-lyrics-tab__input-footer">
+                        <span className="ms-lyrics-tab__count">{lyrPrompt.length}/200</span>
+                        <button
+                            type="button"
+                            className={`ms-btn ms-btn--accent ${lyrLoading ? 'is-loading' : ''}`}
+                            onClick={handleGenerate}
+                            disabled={!lyrPrompt.trim() || lyrLoading}
+                        >
+                            {lyrLoading ? (
+                                <><span className="ms-btn__spinner" /> 생성 중...</>
+                            ) : (
+                                '✨ 가사 생성'
+                            )}
+                        </button>
+                    </div>
+                </div>
+
+                {lyrError && (
+                    <div className="ms-error-banner">
+                        <span>⚠ {lyrError}</span>
+                    </div>
+                )}
+            </div>
+
+            {lyrLoading && (
+                <div className="ms-lyrics-tab__loading">
+                    <div className="ms-lyrics-tab__loading-bar" />
+                    <p>AI가 가사를 작성하고 있습니다...</p>
+                </div>
+            )}
+
+            {/* 저장된 가사 목록 */}
+            {loadingSaved && (
+                <div className="ms-lyrics-tab__loading">
+                    <div className="ms-lyrics-tab__loading-bar" />
+                    <p>저장된 가사를 불러오는 중...</p>
+                </div>
+            )}
+
+            {!loadingSaved && saved.length === 0 && !lyrLoading && (
+                <div className="ms-lyrics-tab__empty">
+                    <span className="ms-lyrics-tab__empty-icon">🎤</span>
+                    <p>저장된 가사가 없습니다</p>
+                    <p className="ms-lyrics-tab__empty-hint">
+                        프롬프트를 입력하면 AI가 [Verse], [Chorus] 등 섹션이 포함된 가사를 작성합니다
+                    </p>
+                </div>
+            )}
+
+            <div className="ms-lyrics-tab__results">
+                {saved.map((item) => (
+                    <div key={item.id} className={`ms-lyrics-card ${editingId === item.id ? 'is-editing' : ''}`}>
+                        <div className="ms-lyrics-card__header">
+                            {editingId === item.id ? (
+                                <input
+                                    className="ms-lyrics-card__title-input"
+                                    value={editTitle}
+                                    onChange={(e) => setEditTitle(e.target.value)}
+                                    placeholder="제목"
+                                />
+                            ) : (
+                                <>
+                                    {item.title && <h3 className="ms-lyrics-card__title">{item.title}</h3>}
+                                    <span className="ms-lyrics-card__prompt">{item.prompt}</span>
+                                </>
+                            )}
+                            <span className="ms-lyrics-card__date">
+                                {item.created_at ? new Date(item.created_at).toLocaleDateString('ko-KR') : ''}
+                            </span>
+                        </div>
+
+                        {editingId === item.id ? (
+                            <textarea
+                                className="ms-lyrics-card__text-input"
+                                value={editText}
+                                onChange={(e) => setEditText(e.target.value)}
+                                rows={12}
+                            />
+                        ) : (
+                            <pre className="ms-lyrics-card__text">{item.text}</pre>
+                        )}
+
+                        <div className="ms-lyrics-card__actions">
+                            {editingId === item.id ? (
+                                <>
+                                    <button type="button" className="ms-btn ms-btn--accent ms-btn--sm" onClick={handleSaveEdit}>
+                                        ✓ 저장
+                                    </button>
+                                    <button type="button" className="ms-btn ms-btn--ghost ms-btn--sm" onClick={cancelEdit}>
+                                        취소
+                                    </button>
+                                </>
+                            ) : (
+                                <>
+                                    <button
+                                        type="button"
+                                        className="ms-btn ms-btn--ghost ms-btn--sm"
+                                        onClick={() => handleCopy(item.text, item.id)}
+                                    >
+                                        {copied === item.id ? '✓ 복사됨' : '📋 복사'}
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="ms-btn ms-btn--ghost ms-btn--sm"
+                                        onClick={() => onUseInCreate(item.text)}
+                                    >
+                                        🎵 Create에서 사용
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="ms-btn ms-btn--ghost ms-btn--sm"
+                                        onClick={() => startEdit(item)}
+                                    >
+                                        ✏️ 수정
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="ms-btn ms-btn--ghost ms-btn--sm ms-btn--danger-text"
+                                        onClick={() => handleDelete(item.id)}
+                                    >
+                                        🗑 삭제
+                                    </button>
+                                </>
+                            )}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default LyricsTab;

src/pages/music/components/RemixTab.jsx

@@ -0,0 +1,193 @@
+import React, { useState } from 'react';
+import { uploadAndCover, uploadAndExtend, addVocals, addInstrumental } from '../../../api';
+
+const REMIX_ACTIONS = [
+    { id: 'cover', label: 'AI Cover', icon: '🎨', desc: '외부 음원을 Suno AI 스타일로 리메이크' },
+    { id: 'extend', label: 'Extend', icon: '⏩', desc: '외부 음원을 이어서 확장' },
+    { id: 'add-vocals', label: 'Add Vocals', icon: '🎤', desc: '인스트루멘탈에 AI 보컬 입히기' },
+    { id: 'add-instrumental', label: 'Add Instrumental', icon: '🎹', desc: '보컬에 AI 반주 입히기' },
+];
+
+const RemixTab = ({ onTaskStarted, model, isGenerating }) => {
+    const [uploadUrl, setUploadUrl] = useState('');
+    const [activeAction, setActiveAction] = useState(null);
+
+    // 각 액션별 파라미터
+    const [title, setTitle] = useState('');
+    const [style, setStyle] = useState('');
+    const [prompt, setPrompt] = useState('');
+    const [tags, setTags] = useState('');
+    const [negativeTags, setNegativeTags] = useState('');
+    const [vocalGender, setVocalGender] = useState(null);
+    const [continueAt, setContinueAt] = useState(0);
+    const [instrumental, setInstrumental] = useState(false);
+
+    const handleSubmit = async () => {
+        if (!uploadUrl || !activeAction || isGenerating) return;
+
+        let apiCall;
+        let payload = {};
+
+        switch (activeAction) {
+            case 'cover':
+                apiCall = uploadAndCover;
+                payload = {
+                    upload_url: uploadUrl, model, custom_mode: true,
+                    instrumental, prompt, style, title,
+                    vocal_gender: vocalGender || undefined,
+                    negative_tags: negativeTags || undefined,
+                };
+                break;
+            case 'extend':
+                apiCall = uploadAndExtend;
+                payload = {
+                    upload_url: uploadUrl, model,
+                    default_param_flag: !prompt,
+                    continue_at: continueAt || undefined,
+                    prompt, style, title, instrumental,
+                    vocal_gender: vocalGender || undefined,
+                    negative_tags: negativeTags || undefined,
+                };
+                break;
+            case 'add-vocals':
+                apiCall = addVocals;
+                payload = {
+                    upload_url: uploadUrl, prompt, title, style,
+                    negative_tags: negativeTags,
+                    vocal_gender: vocalGender || undefined,
+                    model: 'V4_5PLUS',
+                };
+                break;
+            case 'add-instrumental':
+                apiCall = addInstrumental;
+                payload = {
+                    upload_url: uploadUrl, title, tags,
+                    negative_tags: negativeTags,
+                    vocal_gender: vocalGender || undefined,
+                    model: 'V4_5PLUS',
+                };
+                break;
+            default:
+                return;
+        }
+
+        try {
+            const res = await apiCall(payload);
+            if (res?.task_id) {
+                onTaskStarted(res.task_id, `Remix: ${REMIX_ACTIONS.find(a => a.id === activeAction)?.label}`);
+            }
+        } catch (e) {
+            // 에러는 부모 컴포넌트에서 처리
+        }
+    };
+
+    return (
+        <div className="ms-remix-tab">
+            <div className="ms-remix-tab__header">
+                <h2 className="ms-remix-tab__title">Remix Studio</h2>
+                <p className="ms-remix-tab__desc">외부 음원을 AI로 리메이크, 확장, 보컬/반주 추가</p>
+            </div>
+
+            <div className="ms-param-group">
+                <label className="ms-param-label">Audio URL</label>
+                <input
+                    type="url"
+                    className="ms-negative-tags__input"
+                    placeholder="리믹스할 오디오 파일 URL (예: /media/music/track.mp3)"
+                    value={uploadUrl}
+                    onChange={(e) => setUploadUrl(e.target.value)}
+                    style={{ width: '100%' }}
+                />
+            </div>
+
+            <div className="ms-remix-actions">
+                {REMIX_ACTIONS.map((action) => (
+                    <button
+                        key={action.id}
+                        type="button"
+                        className={`ms-remix-card ${activeAction === action.id ? 'is-active' : ''}`}
+                        onClick={() => setActiveAction(activeAction === action.id ? null : action.id)}
+                    >
+                        <span className="ms-remix-card__icon">{action.icon}</span>
+                        <span className="ms-remix-card__label">{action.label}</span>
+                        <span className="ms-remix-card__desc">{action.desc}</span>
+                    </button>
+                ))}
+            </div>
+
+            {activeAction && (
+                <div className="ms-remix-params">
+                    {/* 공통 파라미터 */}
+                    <div className="ms-param-group">
+                        <label className="ms-param-label">Title</label>
+                        <input type="text" className="ms-negative-tags__input" value={title}
+                            onChange={(e) => setTitle(e.target.value)} placeholder="곡 제목" style={{ width: '100%' }} />
+                    </div>
+
+                    {(activeAction === 'cover' || activeAction === 'extend' || activeAction === 'add-vocals') && (
+                        <div className="ms-param-group">
+                            <label className="ms-param-label">Prompt / Lyrics</label>
+                            <textarea className="ms-prompt" value={prompt}
+                                onChange={(e) => setPrompt(e.target.value)} rows={3}
+                                placeholder="가사 또는 스타일 설명" />
+                        </div>
+                    )}
+
+                    {(activeAction === 'cover' || activeAction === 'extend' || activeAction === 'add-vocals') && (
+                        <div className="ms-param-group">
+                            <label className="ms-param-label">Style</label>
+                            <input type="text" className="ms-negative-tags__input" value={style}
+                                onChange={(e) => setStyle(e.target.value)} placeholder="예: Pop, Energetic, Piano" style={{ width: '100%' }} />
+                        </div>
+                    )}
+
+                    {activeAction === 'add-instrumental' && (
+                        <div className="ms-param-group">
+                            <label className="ms-param-label">Tags (스타일/특성)</label>
+                            <input type="text" className="ms-negative-tags__input" value={tags}
+                                onChange={(e) => setTags(e.target.value)} placeholder="예: acoustic, warm, dreamy" style={{ width: '100%' }} />
+                        </div>
+                    )}
+
+                    {activeAction === 'extend' && (
+                        <div className="ms-param-group">
+                            <label className="ms-param-label">Continue At (초)</label>
+                            <input type="number" className="ms-negative-tags__input" value={continueAt}
+                                onChange={(e) => setContinueAt(Number(e.target.value))} min={0} style={{ width: '120px' }} />
+                        </div>
+                    )}
+
+                    <div className="ms-param-group">
+                        <label className="ms-param-label">Exclude Styles</label>
+                        <input type="text" className="ms-negative-tags__input" value={negativeTags}
+                            onChange={(e) => setNegativeTags(e.target.value)} placeholder="제외할 스타일" style={{ width: '100%' }} />
+                    </div>
+
+                    <div className="ms-param-group">
+                        <label className="ms-param-label">Vocal Gender</label>
+                        <div className="ms-gender-toggle">
+                            {[{ value: null, label: 'Auto' }, { value: 'm', label: 'Male' }, { value: 'f', label: 'Female' }].map((opt) => (
+                                <button key={opt.label} type="button"
+                                    className={`ms-gender-btn ${vocalGender === opt.value ? 'is-active' : ''}`}
+                                    onClick={() => setVocalGender(opt.value)}>
+                                    {opt.label}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    <button
+                        type="button"
+                        className="ms-btn ms-btn--accent ms-remix-submit"
+                        disabled={!uploadUrl || isGenerating}
+                        onClick={handleSubmit}
+                    >
+                        {isGenerating ? 'Processing...' : `Start ${REMIX_ACTIONS.find(a => a.id === activeAction)?.label}`}
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default RemixTab;

src/pages/music/components/StemModal.jsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+
+const STEM_ICONS = {
+    vocal: '🎤', backing_vocals: '🎶', drums: '🥁', bass: '🎸',
+    guitar: '🎸', keyboard: '🎹', strings: '🎻', brass: '🎺',
+    woodwinds: '🪈', percussion: '🪘', synth: '🎛', fx: '✨',
+};
+
+const StemModal = ({ stems, onClose }) => {
+    const [playingStem, setPlayingStem] = useState(null);
+
+    if (!stems || Object.keys(stems).length === 0) return null;
+
+    return (
+        <div className="ms-modal-overlay" onClick={onClose}>
+            <div className="ms-modal ms-modal--wide" onClick={(e) => e.stopPropagation()}>
+                <div className="ms-modal__header">
+                    <h3 className="ms-modal__title">12 Stems</h3>
+                    <span className="ms-modal__subtitle">각 스템을 개별 재생 및 다운로드할 수 있습니다</span>
+                    <button type="button" className="ms-modal__close" onClick={onClose}>✕</button>
+                </div>
+                <div className="ms-stem-grid">
+                    {Object.entries(stems).map(([name, url]) => {
+                        if (!url) return null;
+                        const isPlaying = playingStem === name;
+                        return (
+                            <div key={name} className={`ms-stem-card ${isPlaying ? 'is-playing' : ''}`}>
+                                <span className="ms-stem-card__icon">{STEM_ICONS[name] || '🎵'}</span>
+                                <span className="ms-stem-card__name">{name.replace(/_/g, ' ')}</span>
+                                <div className="ms-stem-card__actions">
+                                    <button
+                                        type="button"
+                                        className="ms-btn--icon"
+                                        onClick={() => setPlayingStem(isPlaying ? null : name)}
+                                    >
+                                        {isPlaying ? '■' : '▶'}
+                                    </button>
+                                    <a href={url} download className="ms-btn--icon" aria-label="다운로드">↓</a>
+                                </div>
+                                {isPlaying && (
+                                    <audio src={url} autoPlay onEnded={() => setPlayingStem(null)} />
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+                <div className="ms-modal__actions">
+                    <button type="button" className="ms-btn ms-btn--ghost" onClick={onClose}>닫기</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default StemModal;

src/pages/music/components/SyncedLyricsPlayer.jsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+const SyncedLyricsPlayer = ({ audioUrl, alignedWords, onClose, accentColor }) => {
+    const audioRef = useRef(null);
+    const [playing, setPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+
+    useEffect(() => {
+        const el = audioRef.current;
+        if (!el) return;
+        const handler = () => setCurrentTime(el.currentTime);
+        el.addEventListener('timeupdate', handler);
+        return () => el.removeEventListener('timeupdate', handler);
+    }, []);
+
+    if (!alignedWords || alignedWords.length === 0) return null;
+
+    return (
+        <div className="ms-synced-player" style={{ '--synced-accent': accentColor }}>
+            <div className="ms-synced-player__header">
+                <h4 className="ms-synced-player__title">Synced Lyrics</h4>
+                <button type="button" className="ms-modal__close" onClick={onClose}>✕</button>
+            </div>
+            <audio
+                ref={audioRef}
+                src={audioUrl}
+                onPlay={() => setPlaying(true)}
+                onPause={() => setPlaying(false)}
+                onEnded={() => setPlaying(false)}
+                controls
+                className="ms-synced-player__audio"
+            />
+            <div className="ms-synced-player__lyrics">
+                {alignedWords.map((word, idx) => {
+                    const isActive = currentTime >= word.startS && currentTime < word.endS;
+                    const isPast = currentTime >= word.endS;
+                    return (
+                        <span
+                            key={idx}
+                            className={`ms-synced-word ${isActive ? 'is-active' : ''} ${isPast ? 'is-past' : ''}`}
+                        >
+                            {word.word}{' '}
+                        </span>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
+export default SyncedLyricsPlayer;

src/pages/stock/components/AdvisorTab.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import Loading from '../../../components/Loading';
+import { formatNumber } from '../stockUtils';
+
+const AdvisorTab = ({ pf, advisor }) => (
+    <section className="stock-panel stock-panel--wide advisor-panel">
+        <div className="advisor-panel__head">
+            <div className="advisor-panel__title-block">
+                <span className="advisor-panel__badge">AI 어드바이저</span>
+                <h3 className="advisor-panel__title">포트폴리오 분석 프롬프트</h3>
+                <p className="advisor-panel__sub">
+                    보유 종목 정보를 담은 전문가용 프롬프트를 생성합니다.
+                    복사 후 Gemini, ChatGPT 등에 붙여넣어 분석을 받아보세요.
+                </p>
+            </div>
+            <div className="advisor-panel__actions">
+                <a
+                    href="https://gemini.google.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="button ghost small"
+                >
+                    Gemini 열기 ↗
+                </a>
+                <a
+                    href="https://chatgpt.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="button ghost small"
+                >
+                    ChatGPT 열기 ↗
+                </a>
+            </div>
+        </div>
+
+        {pf.portfolioLoading && (
+            <div style={{ display: 'flex', justifyContent: 'center', padding: 24 }}>
+                <Loading type="spinner" message="포트폴리오 로딩 중..." />
+            </div>
+        )}
+
+        {!pf.portfolioLoading && pf.portfolioHoldings.length === 0 && (
+            <div className="advisor-panel__empty">
+                <span className="advisor-panel__empty-icon">📋</span>
+                <p>포트폴리오 탭에서 보유 종목을 먼저 등록해주세요.</p>
+            </div>
+        )}
+
+        {!pf.portfolioLoading && pf.portfolioHoldings.length > 0 && (
+            <div className="advisor-panel__body">
+                <div className="advisor-prompt__toolbar">
+                    <span className="advisor-prompt__info">
+                        종목 {pf.portfolioHoldings.length}개 · 총 자산 {pf.totalAssets != null ? formatNumber(pf.totalAssets) + '원' : '미집계'}
+                    </span>
+                    <button
+                        className={`button primary small ${advisor.advisorCopied ? 'is-copied' : ''}`}
+                        onClick={advisor.handleCopyPrompt}
+                    >
+                        {advisor.advisorCopied ? '✅ 복사됨' : '📋 프롬프트 복사'}
+                    </button>
+                </div>
+                <pre className="advisor-prompt__preview">{advisor.buildAdvisorPrompt()}</pre>
+                <p className="advisor-panel__disclaimer">
+                    ※ 이 프롬프트를 AI에 붙여넣으면 전문가 관점의 매매 조언을 받을 수 있습니다.
+                    투자 결정은 최종적으로 본인의 판단과 책임 하에 이루어져야 합니다.
+                </p>
+            </div>
+        )}
+    </section>
+);
+
+export default AdvisorTab;

src/pages/stock/components/AiTradeTab.jsx

@@ -0,0 +1,220 @@
+import React from 'react';
+import {
+    formatNumber, formatPercent,
+    getQty, getBuyPrice, getCurrentPrice, getProfitRate, getProfitLoss,
+    toNumeric, profitColorClass,
+} from '../stockUtils';
+
+const AiTradeTab = ({ aib }) => (
+    <>
+        {aib.balanceError ? <p className="stock-error">{aib.balanceError}</p> : null}
+
+        {/* AI Balance section */}
+        <section className="stock-panel stock-panel--wide">
+            <div className="stock-panel__head">
+                <div>
+                    <p className="stock-panel__eyebrow">AI 모의투자</p>
+                    <h3>보유 현황</h3>
+                    <p className="stock-panel__sub">
+                        AI가 운용 중인 모의투자 계좌의 잔고와 보유 종목을 확인합니다.
+                    </p>
+                </div>
+                <div className="stock-panel__actions">
+                    {aib.balanceLoading ? (
+                        <span className="stock-chip">조회 중</span>
+                    ) : null}
+                    <button
+                        className="button ghost small"
+                        onClick={aib.loadBalance}
+                        disabled={aib.balanceLoading}
+                    >
+                        새로고침
+                    </button>
+                </div>
+            </div>
+            <div className="stock-balance">
+                <div className="stock-balance__summary">
+                    {[
+                        { label: '총 평가', value: aib.totalEval },
+                        { label: '예수금', value: aib.deposit },
+                    ].map((item) => (
+                        <div key={item.label} className="stock-balance__card">
+                            <span>{item.label}</span>
+                            <strong>{formatNumber(item.value)}</strong>
+                        </div>
+                    ))}
+                </div>
+                {aib.holdings.length ? (
+                    <div className="stock-holdings">
+                        {aib.holdings.map((item, idx) => {
+                            const profitLoss = getProfitLoss(item);
+                            const profitLossNumeric = toNumeric(profitLoss);
+                            const profitClass = profitColorClass(profitLossNumeric);
+                            const profitRate = getProfitRate(item);
+                            const profitRateNumeric = toNumeric(profitRate);
+                            const profitRateClass = profitColorClass(profitRateNumeric);
+                            return (
+                                <div
+                                    key={item.code ?? `${item.name}-${idx}`}
+                                    className="stock-holdings__item"
+                                >
+                                    <div>
+                                        <p className="stock-holdings__name">
+                                            {item.name ?? item.code ?? 'N/A'}
+                                        </p>
+                                        <span className="stock-holdings__code">
+                                            {item.code ?? ''}
+                                        </span>
+                                    </div>
+                                    <div className="stock-holdings__metric">
+                                        <span>수량</span>
+                                        <strong>{formatNumber(getQty(item))}</strong>
+                                    </div>
+                                    <div className="stock-holdings__metric">
+                                        <span>매입가</span>
+                                        <strong>{formatNumber(getBuyPrice(item))}</strong>
+                                    </div>
+                                    <div className="stock-holdings__metric">
+                                        <span>현재가</span>
+                                        <strong>{formatNumber(getCurrentPrice(item))}</strong>
+                                    </div>
+                                    <div className="stock-holdings__metric">
+                                        <span>평가금액</span>
+                                        <strong>
+                                            {getCurrentPrice(item) != null && getQty(item) != null
+                                                ? formatNumber(toNumeric(getCurrentPrice(item)) * toNumeric(getQty(item)))
+                                                : '-'}
+                                        </strong>
+                                    </div>
+                                    <div className="stock-holdings__metric">
+                                        <span>수익률</span>
+                                        <strong className={`stock-profit ${profitRateClass}`}>
+                                            {formatPercent(profitRate)}
+                                        </strong>
+                                    </div>
+                                    <div className="stock-holdings__metric">
+                                        <span>평가손익</span>
+                                        <strong className={`stock-profit ${profitClass}`}>
+                                            {formatNumber(profitLoss)}
+                                        </strong>
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+                ) : (
+                    <p className="stock-empty">보유 종목이 없습니다.</p>
+                )}
+            </div>
+        </section>
+
+        {/* Manual order section */}
+        <section className="stock-panel stock-panel--wide">
+            <div className="stock-panel__head">
+                <div>
+                    <p className="stock-panel__eyebrow">수동 주문</p>
+                    <h3>직접 매수/매도</h3>
+                    <p className="stock-panel__sub">
+                        종목명 또는 종목코드를 입력하고 매수/매도 주문을 요청합니다.
+                    </p>
+                </div>
+            </div>
+            <form className="stock-order" onSubmit={aib.submitManualOrder}>
+                <label>
+                    종목명/코드
+                    <input
+                        type="text"
+                        value={aib.manualForm.code}
+                        onChange={(e) =>
+                            aib.setManualForm((prev) => ({ ...prev, code: e.target.value }))
+                        }
+                        placeholder="005930 또는 삼성전자"
+                        required
+                    />
+                </label>
+                <label>
+                    매수/매도
+                    <select
+                        value={aib.manualForm.type}
+                        onChange={(e) =>
+                            aib.setManualForm((prev) => ({ ...prev, type: e.target.value }))
+                        }
+                    >
+                        <option value="buy">매수</option>
+                        <option value="sell">매도</option>
+                    </select>
+                </label>
+                <label>
+                    수량
+                    <input
+                        type="number"
+                        min={1}
+                        step={1}
+                        value={aib.manualForm.qty}
+                        onChange={(e) =>
+                            aib.setManualForm((prev) => ({ ...prev, qty: Number(e.target.value) }))
+                        }
+                        required
+                    />
+                </label>
+                <label>
+                    금액(원)
+                    <input
+                        type="number"
+                        min={0}
+                        step={1}
+                        value={aib.manualForm.price}
+                        onChange={(e) =>
+                            aib.setManualForm((prev) => ({ ...prev, price: Number(e.target.value) }))
+                        }
+                    />
+                </label>
+                <button
+                    className="button primary"
+                    type="submit"
+                    disabled={aib.manualLoading}
+                >
+                    {aib.manualLoading ? '요청 중...' : '주문 요청'}
+                </button>
+                {aib.manualError ? (
+                    <p className="stock-error">{aib.manualError}</p>
+                ) : null}
+                {aib.manualResult ? (
+                    <div className="stock-result">
+                        <p className="stock-result__title">요청 결과</p>
+                        <pre>
+                            {typeof aib.manualResult === 'string'
+                                ? aib.manualResult
+                                : JSON.stringify(aib.manualResult, null, 2)}
+                        </pre>
+                    </div>
+                ) : null}
+            </form>
+        </section>
+
+        {/* KIS modal */}
+        {aib.kisModal ? (
+            <div className="stock-modal" role="dialog" aria-modal="true">
+                <div
+                    className="stock-modal__backdrop"
+                    onClick={() => aib.setKisModal('')}
+                />
+                <div className="stock-modal__card">
+                    <div className="stock-modal__head">
+                        <h4>주문 결과</h4>
+                        <button
+                            type="button"
+                            className="button ghost small"
+                            onClick={() => aib.setKisModal('')}
+                        >
+                            닫기
+                        </button>
+                    </div>
+                    <pre>{aib.kisModal}</pre>
+                </div>
+            </div>
+        ) : null}
+    </>
+);
+
+export default AiTradeTab;

src/pages/stock/components/PortfolioTab.jsx

@@ -0,0 +1,609 @@
+import React from 'react';
+import Loading from '../../../components/Loading';
+import {
+    ResponsiveContainer, AreaChart, Area, XAxis, YAxis,
+    Tooltip as ChartTooltip,
+} from 'recharts';
+import { formatNumber, formatPercent, toNumeric, profitColorClass } from '../stockUtils';
+
+const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
+    <>
+        {pf.portfolioError ? (
+            <p className="stock-error">{pf.portfolioError}</p>
+        ) : null}
+
+        {/* 포트폴리오 관리 헤더 + 추가 폼 */}
+        <section className="stock-panel stock-panel--wide pf-section">
+            <div className="stock-panel__head">
+                <div>
+                    <p className="stock-panel__eyebrow">포트폴리오</p>
+                    <h3>수동 입력 종목 관리</h3>
+                    <p className="stock-panel__sub">
+                        증권사별 보유 종목을 수동 등록하면 현재가를 자동 조회합니다. (3분 캐시)
+                    </p>
+                </div>
+                <div className="stock-panel__actions">
+                    {pf.portfolioLoading ? (
+                        <Loading type="spinner" message="" />
+                    ) : null}
+                    <button
+                        className="button ghost small"
+                        onClick={pf.loadPortfolio}
+                        disabled={pf.portfolioLoading}
+                    >
+                        새로고침
+                    </button>
+                    <button
+                        className="button primary small"
+                        onClick={() => pf.setAddFormOpen((v) => !v)}
+                    >
+                        {pf.addFormOpen ? '취소' : '+ 종목 추가'}
+                    </button>
+                </div>
+            </div>
+
+            {/* Add form */}
+            {pf.addFormOpen && (
+                <form className="pf-add-form" onSubmit={pf.handleAddSubmit}>
+                    <label>
+                        증권사
+                        <input
+                            type="text"
+                            value={pf.addForm.broker}
+                            onChange={(e) =>
+                                pf.setAddForm((p) => ({ ...p, broker: e.target.value }))
+                            }
+                            placeholder="KB증권"
+                            required
+                        />
+                    </label>
+                    <label>
+                        종목코드
+                        <input
+                            type="text"
+                            value={pf.addForm.ticker}
+                            onChange={(e) =>
+                                pf.setAddForm((p) => ({ ...p, ticker: e.target.value }))
+                            }
+                            placeholder="005930"
+                            required
+                            maxLength={6}
+                        />
+                    </label>
+                    <label>
+                        종목명
+                        <input
+                            type="text"
+                            value={pf.addForm.name}
+                            onChange={(e) =>
+                                pf.setAddForm((p) => ({ ...p, name: e.target.value }))
+                            }
+                            placeholder="삼성전자"
+                            required
+                        />
+                    </label>
+                    <label>
+                        수량
+                        <input
+                            type="number"
+                            min={1}
+                            step={1}
+                            value={pf.addForm.quantity}
+                            onChange={(e) =>
+                                pf.setAddForm((p) => ({ ...p, quantity: e.target.value }))
+                            }
+                            required
+                        />
+                    </label>
+                    <label>
+                        평균 매입가 (원)
+                        <input
+                            type="number"
+                            min={0}
+                            step={1}
+                            value={pf.addForm.avg_price}
+                            onChange={(e) =>
+                                pf.setAddForm((p) => ({ ...p, avg_price: e.target.value }))
+                            }
+                            required
+                        />
+                    </label>
+                    <button
+                        className="button primary"
+                        type="submit"
+                        disabled={pf.addLoading}
+                    >
+                        {pf.addLoading ? '등록 중...' : '종목 등록'}
+                    </button>
+                    {pf.addError && <p className="stock-error">{pf.addError}</p>}
+                </form>
+            )}
+
+            {/* Portfolio total summary */}
+            {pf.portfolioHoldings.length > 0 && (
+                <div className="pf-total-summary">
+                    {[
+                        { label: '총 매입', value: pf.portfolioSummary.total_buy },
+                        { label: '총 평가', value: pf.portfolioSummary.total_eval },
+                        { label: '총 손익', value: pf.portfolioSummary.total_profit, isProfit: true },
+                        { label: '수익률', value: pf.portfolioSummary.total_profit_rate, isRate: true },
+                    ].map((s) => (
+                        <div key={s.label} className="pf-total-summary__card">
+                            <span>{s.label}</span>
+                            <strong
+                                className={
+                                    s.isProfit || s.isRate
+                                        ? `stock-profit ${profitColorClass(toNumeric(s.value))}`
+                                        : ''
+                                }
+                            >
+                                {s.isRate ? formatPercent(s.value) : formatNumber(s.value)}
+                            </strong>
+                        </div>
+                    ))}
+                    {pf.totalCash != null && (
+                        <div className="pf-total-summary__card is-cash">
+                            <span>예수금 합계</span>
+                            <strong>{formatNumber(pf.totalCash)}원</strong>
+                        </div>
+                    )}
+                    {pf.totalAssets != null && (
+                        <div className="pf-total-summary__card is-assets">
+                            <span>총 자산</span>
+                            <strong>{formatNumber(pf.totalAssets)}원</strong>
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {/* 자산 추이 차트 */}
+            <div className="pf-asset-history">
+                <div className="pf-asset-history__head">
+                    <p className="pf-asset-history__title">총 자산 추이</p>
+                    <div className="pf-asset-history__controls">
+                        {[
+                            { label: '7일', value: 7 },
+                            { label: '30일', value: 30 },
+                            { label: '90일', value: 90 },
+                            { label: '전체', value: 0 },
+                        ].map(({ label, value }) => (
+                            <button
+                                key={value}
+                                type="button"
+                                className={`pf-asset-period-btn ${asset.assetHistoryDays === value ? 'is-active' : ''}`}
+                                onClick={() => asset.setAssetHistoryDays(value)}
+                            >
+                                {label}
+                            </button>
+                        ))}
+                        <button
+                            type="button"
+                            className="button ghost small"
+                            onClick={handleSaveSnapshot}
+                            disabled={asset.snapshotSaving || pf.totalAssets == null}
+                            title="현재 총 자산을 오늘 날짜로 저장"
+                        >
+                            {asset.snapshotSaving ? '저장 중...' : '📸 스냅샷'}
+                        </button>
+                    </div>
+                </div>
+
+                {asset.assetHistoryLoading ? (
+                    <div className="pf-asset-history__empty">
+                        <Loading type="spinner" message="" />
+                    </div>
+                ) : Array.isArray(asset.assetHistory) && asset.assetHistory.length >= 1 ? (
+                    <ResponsiveContainer width="100%" height={180}>
+                        <AreaChart
+                            data={asset.assetHistory}
+                            margin={{ top: 8, right: 12, left: 0, bottom: 0 }}
+                        >
+                            <defs>
+                                <linearGradient id="assetGrad" x1="0" y1="0" x2="0" y2="1">
+                                    <stop offset="5%" stopColor="#38bdf8" stopOpacity={0.25} />
+                                    <stop offset="95%" stopColor="#38bdf8" stopOpacity={0} />
+                                </linearGradient>
+                            </defs>
+                            <XAxis
+                                dataKey="date"
+                                tick={{ fill: 'var(--text-muted)', fontSize: 10 }}
+                                tickFormatter={(v) => v?.slice(5)}
+                                tickLine={false}
+                                axisLine={false}
+                                interval="preserveStartEnd"
+                            />
+                            <YAxis hide domain={['auto', 'auto']} />
+                            <ChartTooltip
+                                contentStyle={{
+                                    background: 'var(--surface)',
+                                    border: '1px solid var(--line)',
+                                    borderRadius: 8,
+                                    fontSize: 12,
+                                }}
+                                labelStyle={{ color: 'var(--text-dim)', marginBottom: 4 }}
+                                formatter={(v) => [`${new Intl.NumberFormat('ko-KR').format(v)}원`, '총 자산']}
+                            />
+                            <Area
+                                type="monotone"
+                                dataKey="total_assets"
+                                stroke="#38bdf8"
+                                strokeWidth={2}
+                                fill="url(#assetGrad)"
+                                dot={false}
+                                activeDot={{ r: 4, fill: '#38bdf8' }}
+                            />
+                        </AreaChart>
+                    </ResponsiveContainer>
+                ) : (
+                    <div className="pf-asset-history__empty">
+                        저장된 자산 추이 데이터가 없습니다. 📸 스냅샷 버튼으로 오늘 자산을 기록하세요.
+                    </div>
+                )}
+            </div>
+        </section>
+
+        {/* 예수금 패널 */}
+        <section className="stock-panel stock-panel--wide">
+            <div className="stock-panel__head">
+                <div>
+                    <p className="stock-panel__eyebrow">예수금 관리</p>
+                    <h3>증권사별 예수금</h3>
+                    <p className="stock-panel__sub">
+                        증권사별 예수금을 입력하면 총 자산에 자동 반영됩니다.
+                    </p>
+                </div>
+            </div>
+
+            {pf.cashList.length > 0 && (
+                <div className="pf-cash-table">
+                    {pf.cashList.map((item) => {
+                        const isEditing = pf.cashEditingBroker === item.broker;
+                        return (
+                            <div key={item.id ?? item.broker} className="pf-cash-row">
+                                <span className="pf-cash-broker">{item.broker}</span>
+                                {isEditing ? (
+                                    <input
+                                        className="pf-cash-edit-input"
+                                        type="number"
+                                        min={0}
+                                        step={1}
+                                        value={pf.cashEditingValue}
+                                        onChange={(e) => pf.setCashEditingValue(e.target.value)}
+                                        onKeyDown={(e) => {
+                                            if (e.key === 'Enter') pf.handleCashInlineSave(item.broker);
+                                            if (e.key === 'Escape') pf.handleCashInlineCancel();
+                                        }}
+                                        autoFocus
+                                    />
+                                ) : (
+                                    <strong className="pf-cash-amount">
+                                        {formatNumber(item.cash)}원
+                                    </strong>
+                                )}
+                                <span className="pf-cash-date">
+                                    {item.updated_at
+                                        ? new Date(item.updated_at).toLocaleDateString('ko-KR')
+                                        : ''}
+                                </span>
+                                {isEditing ? (
+                                    <>
+                                        <button
+                                            className="button primary small"
+                                            onClick={() => pf.handleCashInlineSave(item.broker)}
+                                            disabled={pf.cashEditSaving}
+                                        >
+                                            {pf.cashEditSaving ? '저장 중' : '저장'}
+                                        </button>
+                                        <button
+                                            className="button ghost small"
+                                            onClick={pf.handleCashInlineCancel}
+                                            disabled={pf.cashEditSaving}
+                                        >
+                                            취소
+                                        </button>
+                                    </>
+                                ) : (
+                                    <>
+                                        <button
+                                            className="button ghost small"
+                                            onClick={() => pf.handleCashInlineEdit(item)}
+                                            title="수정"
+                                        >
+                                            ✏️
+                                        </button>
+                                        <button
+                                            className="button ghost small pf-btn-danger"
+                                            onClick={() => pf.handleCashDelete(item.broker)}
+                                            title="삭제"
+                                        >
+                                            🗑️
+                                        </button>
+                                    </>
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+            {pf.cashList.length === 0 && (
+                <p className="stock-empty" style={{ fontSize: 13 }}>
+                    등록된 예수금이 없습니다.
+                </p>
+            )}
+
+            <form className="pf-cash-form" onSubmit={pf.handleCashSave}>
+                <label>
+                    증권사명
+                    <input
+                        type="text"
+                        value={pf.cashForm.broker}
+                        onChange={(e) =>
+                            pf.setCashForm((p) => ({ ...p, broker: e.target.value }))
+                        }
+                        placeholder="KB증권"
+                        required
+                    />
+                </label>
+                <label>
+                    예수금 (원)
+                    <input
+                        type="number"
+                        min={0}
+                        step={1}
+                        value={pf.cashForm.cash}
+                        onChange={(e) =>
+                            pf.setCashForm((p) => ({ ...p, cash: e.target.value }))
+                        }
+                        placeholder="1500000"
+                        required
+                    />
+                </label>
+                <button
+                    className="button primary"
+                    type="submit"
+                    disabled={pf.cashSaving}
+                >
+                    {pf.cashSaving ? '저장 중...' : '저장'}
+                </button>
+                {pf.cashError && <p className="stock-error">{pf.cashError}</p>}
+            </form>
+        </section>
+
+        {/* Broker cards stacked */}
+        {pf.brokerGroups.map(([broker, items]) => {
+            const bSummary = pf.getBrokerSummary(items);
+            const color = pf.brokerColors[broker];
+            return (
+                <section
+                    key={broker}
+                    className="stock-panel stock-panel--wide pf-broker-section"
+                    style={{ borderColor: color?.border, background: color?.bg }}
+                >
+                    <div className="stock-panel__head">
+                        <div>
+                            <p className="stock-panel__eyebrow" style={{ color: color?.border }}>
+                                {broker}
+                            </p>
+                            <h3>{broker} 보유 현황</h3>
+                            <p className="stock-panel__sub">
+                                {items.length}종목 · 평가{' '}
+                                {formatNumber(bSummary.totalEval)} · 손익{' '}
+                                <span className={`stock-profit ${profitColorClass(bSummary.totalProfit)}`}>
+                                    {formatNumber(bSummary.totalProfit)} (
+                                    {formatPercent(bSummary.totalProfitRate)})
+                                </span>
+                                {(() => {
+                                    const bc = pf.cashList.find((c) => c.broker === broker);
+                                    return bc ? (
+                                        <span className="pf-cash-badge">
+                                            예수금 {formatNumber(bc.cash)}원
+                                        </span>
+                                    ) : null;
+                                })()}
+                            </p>
+                        </div>
+                    </div>
+                    <div className="stock-holdings">
+                        {items.map((item) => {
+                            const profitAmt = item.profit_amount;
+                            const profitRate = item.profit_rate;
+                            const profitAmtN = toNumeric(profitAmt);
+                            const profitRateN = toNumeric(profitRate);
+                            const isEditing = pf.editingId === item.id;
+                            const isDeleting = pf.deleteConfirmId === item.id;
+                            const isSelling = pf.sellConfirmId === item.id;
+                            const sellPrice = item.current_price ?? item.avg_price;
+                            const saleAmount = sellPrice != null ? sellPrice * (item.quantity ?? 0) : null;
+
+                            return (
+                                <div key={item.id} className="stock-holdings__item pf-item">
+                                    {isEditing ? (
+                                        <div className="pf-edit-row">
+                                            <div className="pf-edit-fields">
+                                                <label>
+                                                    수량
+                                                    <input
+                                                        type="number"
+                                                        min={1}
+                                                        value={pf.editForm.quantity ?? ''}
+                                                        onChange={(e) =>
+                                                            pf.setEditForm((p) => ({
+                                                                ...p,
+                                                                quantity: Number(e.target.value),
+                                                            }))
+                                                        }
+                                                    />
+                                                </label>
+                                                <label>
+                                                    평균매입가
+                                                    <input
+                                                        type="number"
+                                                        min={0}
+                                                        value={pf.editForm.avg_price ?? ''}
+                                                        onChange={(e) =>
+                                                            pf.setEditForm((p) => ({
+                                                                ...p,
+                                                                avg_price: Number(e.target.value),
+                                                            }))
+                                                        }
+                                                    />
+                                                </label>
+                                            </div>
+                                            <div className="pf-edit-actions">
+                                                <button
+                                                    className="button primary small"
+                                                    onClick={() => pf.handleEditSave(item.id)}
+                                                    disabled={pf.editLoading}
+                                                >
+                                                    {pf.editLoading ? '저장 중...' : '저장'}
+                                                </button>
+                                                <button
+                                                    className="button ghost small"
+                                                    onClick={() => pf.setEditingId(null)}
+                                                >
+                                                    취소
+                                                </button>
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <>
+                                            <div>
+                                                <p className="stock-holdings__name">
+                                                    {item.name ?? item.ticker ?? 'N/A'}
+                                                </p>
+                                                <span className="stock-holdings__code">
+                                                    {item.ticker ?? ''}
+                                                </span>
+                                            </div>
+                                            <div className="stock-holdings__metric">
+                                                <span>수량</span>
+                                                <strong>{formatNumber(item.quantity)}</strong>
+                                            </div>
+                                            <div className="stock-holdings__metric">
+                                                <span>매입가</span>
+                                                <strong>{formatNumber(item.avg_price)}</strong>
+                                            </div>
+                                            <div className="stock-holdings__metric">
+                                                <span>현재가</span>
+                                                <strong className={item.current_price == null ? 'pf-null-price' : ''}>
+                                                    {item.current_price != null
+                                                        ? formatNumber(item.current_price)
+                                                        : '조회 실패'}
+                                                </strong>
+                                            </div>
+                                            <div className="stock-holdings__metric">
+                                                <span>평가금액</span>
+                                                <strong>
+                                                    {item.current_price != null && item.quantity != null
+                                                        ? formatNumber(item.current_price * item.quantity)
+                                                        : '-'}
+                                                </strong>
+                                            </div>
+                                            <div className="stock-holdings__metric">
+                                                <span>수익률</span>
+                                                <strong className={`stock-profit ${profitColorClass(profitRateN)}`}>
+                                                    {profitRate != null ? formatPercent(profitRate) : '-'}
+                                                </strong>
+                                            </div>
+                                            <div className="stock-holdings__metric">
+                                                <span>평가손익</span>
+                                                <strong className={`stock-profit ${profitColorClass(profitAmtN)}`}>
+                                                    {profitAmt != null ? formatNumber(profitAmt) : '-'}
+                                                </strong>
+                                            </div>
+                                            <div className="pf-item-actions">
+                                                {!isSelling && !isDeleting && (
+                                                    <button
+                                                        className="button ghost small"
+                                                        onClick={() => pf.handleEditStart(item)}
+                                                        title="수정"
+                                                    >
+                                                        ✏️
+                                                    </button>
+                                                )}
+                                                {isSelling ? (
+                                                    <div className="pf-sell-confirm">
+                                                        <span className="pf-sell-confirm__msg">
+                                                            {item.current_price == null && (
+                                                                <small className="pf-sell-confirm__warn">현재가 미조회 — 매입가 기준</small>
+                                                            )}
+                                                            {saleAmount != null
+                                                                ? `${formatNumber(saleAmount)}원 매도 후 예수금 반영`
+                                                                : '매도 처리'}
+                                                        </span>
+                                                        <button
+                                                            className="button small pf-btn-sell"
+                                                            onClick={() => handleSell(item)}
+                                                            disabled={pf.sellLoading}
+                                                        >
+                                                            {pf.sellLoading ? '처리 중...' : '매도 확인'}
+                                                        </button>
+                                                        <button
+                                                            className="button ghost small"
+                                                            onClick={() => pf.setSellConfirmId(null)}
+                                                            disabled={pf.sellLoading}
+                                                        >
+                                                            취소
+                                                        </button>
+                                                    </div>
+                                                ) : isDeleting ? (
+                                                    <>
+                                                        <button
+                                                            className="button ghost small pf-btn-danger"
+                                                            onClick={() => pf.handleDelete(item.id)}
+                                                        >
+                                                            확인
+                                                        </button>
+                                                        <button
+                                                            className="button ghost small"
+                                                            onClick={() => pf.setDeleteConfirmId(null)}
+                                                        >
+                                                            취소
+                                                        </button>
+                                                    </>
+                                                ) : (
+                                                    <>
+                                                        <button
+                                                            className="button ghost small pf-btn-sell"
+                                                            onClick={() => {
+                                                                pf.setSellConfirmId(item.id);
+                                                                pf.setDeleteConfirmId(null);
+                                                            }}
+                                                            title="매도"
+                                                        >
+                                                            매도
+                                                        </button>
+                                                        <button
+                                                            className="button ghost small"
+                                                            onClick={() => {
+                                                                pf.setDeleteConfirmId(item.id);
+                                                                pf.setSellConfirmId(null);
+                                                            }}
+                                                            title="삭제"
+                                                        >
+                                                            🗑️
+                                                        </button>
+                                                    </>
+                                                )}
+                                            </div>
+                                        </>
+                                    )}
+                                </div>
+                            );
+                        })}
+                    </div>
+                </section>
+            );
+        })}
+
+        {pf.portfolioLoaded && pf.portfolioHoldings.length === 0 && !pf.portfolioError && (
+            <section className="stock-panel stock-panel--wide">
+                <p className="stock-empty" style={{ textAlign: 'center', padding: 24 }}>
+                    등록된 종목이 없습니다. 상단의 <strong>+ 종목 추가</strong> 버튼으로 보유 종목을 등록하세요.
+                </p>
+            </section>
+        )}
+    </>
+);
+
+export default PortfolioTab;

src/pages/stock/components/ReportTab.jsx

@@ -0,0 +1,384 @@
+import React from 'react';
+import Loading from '../../../components/Loading';
+import {
+    PieChart, Pie, Cell,
+    BarChart, Bar, XAxis, YAxis, CartesianGrid,
+    Tooltip as ChartTooltip, Legend, ResponsiveContainer,
+} from 'recharts';
+import {
+    formatNumber, formatPercent, toNumeric,
+    CHART_COLORS, profitColorClass, getVixLabel, getFgLabel,
+} from '../stockUtils';
+
+const ReportTab = ({ pf, report, ai, marketCtx }) => (
+    <>
+        {pf.portfolioLoading && (
+            <div style={{ display: 'flex', justifyContent: 'center', padding: 24 }}>
+                <Loading type="spinner" message="포트폴리오 로딩 중..." />
+            </div>
+        )}
+        {pf.portfolioError && <p className="stock-error">{pf.portfolioError}</p>}
+
+        {/* 자산 배분 + 수익률 차트 */}
+        {pf.portfolioHoldings.length > 0 && (
+            <section className="stock-panel stock-panel--wide">
+                <div className="stock-panel__head">
+                    <div>
+                        <p className="stock-panel__eyebrow">포트폴리오 분석</p>
+                        <h3>자산 배분 현황</h3>
+                    </div>
+                </div>
+                <div className="report-charts-row">
+                    <div className="report-chart-box">
+                        <p className="report-chart-title">증권사별 자산 배분</p>
+                        <ResponsiveContainer width="100%" height={220}>
+                            <PieChart>
+                                <Pie
+                                    data={report.brokerPieData}
+                                    cx="50%"
+                                    cy="50%"
+                                    innerRadius={52}
+                                    outerRadius={84}
+                                    dataKey="value"
+                                    paddingAngle={2}
+                                >
+                                    {report.brokerPieData.map((_, i) => (
+                                        <Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />
+                                    ))}
+                                </Pie>
+                                <ChartTooltip
+                                    formatter={(v) => [formatNumber(v) + '원', '평가금액']}
+                                    contentStyle={{ background: '#1e293b', border: 'none', borderRadius: 8, fontSize: 12 }}
+                                />
+                                <Legend
+                                    iconType="circle"
+                                    iconSize={8}
+                                    formatter={(v) => <span style={{ color: '#9ca3af', fontSize: 12 }}>{v}</span>}
+                                />
+                            </PieChart>
+                        </ResponsiveContainer>
+                    </div>
+                    <div className="report-chart-box">
+                        <p className="report-chart-title">종목별 수익률 (%)</p>
+                        <ResponsiveContainer width="100%" height={220}>
+                            <BarChart data={report.profitBarData} margin={{ top: 0, right: 8, left: -16, bottom: 48 }}>
+                                <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
+                                <XAxis
+                                    dataKey="name"
+                                    tick={{ fill: '#9ca3af', fontSize: 10 }}
+                                    angle={-40}
+                                    textAnchor="end"
+                                    interval={0}
+                                />
+                                <YAxis
+                                    tick={{ fill: '#9ca3af', fontSize: 10 }}
+                                    tickFormatter={(v) => `${v}%`}
+                                />
+                                <ChartTooltip
+                                    formatter={(v, _n, props) => [`${v.toFixed(2)}%`, props.payload.fullName]}
+                                    contentStyle={{ background: '#1e293b', border: 'none', borderRadius: 8, fontSize: 12 }}
+                                />
+                                <Bar dataKey="rate" radius={[4, 4, 0, 0]}>
+                                    {report.profitBarData.map((entry, i) => (
+                                        <Cell key={i} fill={entry.rate >= 0 ? '#34d399' : '#f87171'} />
+                                    ))}
+                                </Bar>
+                            </BarChart>
+                        </ResponsiveContainer>
+                    </div>
+                </div>
+            </section>
+        )}
+
+        {/* 리스크 분산 분석 */}
+        {pf.portfolioHoldings.length > 0 && pf.portfolioSummary.total_eval != null && (
+            <section className="stock-panel stock-panel--wide">
+                <div className="stock-panel__head">
+                    <div>
+                        <p className="stock-panel__eyebrow">리스크 관리</p>
+                        <h3>분산 분석</h3>
+                        <p className="stock-panel__sub">증권사·종목 집중도를 확인합니다. 단일 비중 40% 초과 시 주의.</p>
+                    </div>
+                </div>
+                <div className="risk-grid">
+                    <div className="risk-card">
+                        <p className="risk-card__title">증권사별 집중도</p>
+                        {report.brokerConcentration.length === 0 ? (
+                            <p className="stock-empty" style={{ fontSize: 13 }}>평가금액 데이터 없음</p>
+                        ) : (
+                            <>
+                                {report.brokerConcentration.some((b) => b.ratio > 40) && (
+                                    <div className="risk-warning">
+                                        ⚠️ 단일 증권사 집중도가 40%를 초과합니다
+                                    </div>
+                                )}
+                                {report.brokerConcentration.map(({ broker, eval: evalAmt, ratio }) => {
+                                    const level = ratio >= 60 ? 'is-danger' : ratio >= 40 ? 'is-warn' : 'is-ok';
+                                    return (
+                                        <div key={broker} className="risk-item">
+                                            <div className="risk-item__head">
+                                                <span className="risk-item__name">{broker}</span>
+                                                <span className={`risk-item__ratio ${level}`}>{ratio.toFixed(1)}%</span>
+                                            </div>
+                                            <div className="risk-bar">
+                                                <div className={`risk-bar__fill ${level}`} style={{ width: `${Math.min(ratio, 100)}%` }} />
+                                            </div>
+                                            <span style={{ fontSize: 11, color: 'var(--muted)' }}>{formatNumber(evalAmt)}원</span>
+                                        </div>
+                                    );
+                                })}
+                            </>
+                        )}
+                    </div>
+                    <div className="risk-card">
+                        <p className="risk-card__title">상위 5 종목 집중도</p>
+                        {report.stockConcentration.length === 0 ? (
+                            <p className="stock-empty" style={{ fontSize: 13 }}>현재가 데이터 없음</p>
+                        ) : (
+                            <>
+                                {report.stockConcentration.some((s) => s.ratio > 40) && (
+                                    <div className="risk-warning">
+                                        ⚠️ 단일 종목 집중도가 40%를 초과합니다
+                                    </div>
+                                )}
+                                {report.stockConcentration.map(({ name, ticker, eval: evalAmt, ratio }) => {
+                                    const level = ratio >= 60 ? 'is-danger' : ratio >= 40 ? 'is-warn' : 'is-ok';
+                                    return (
+                                        <div key={ticker || name} className="risk-item">
+                                            <div className="risk-item__head">
+                                                <span className="risk-item__name">{name}</span>
+                                                <span className={`risk-item__ratio ${level}`}>{ratio.toFixed(1)}%</span>
+                                            </div>
+                                            <div className="risk-bar">
+                                                <div className={`risk-bar__fill ${level}`} style={{ width: `${Math.min(ratio, 100)}%` }} />
+                                            </div>
+                                            <span style={{ fontSize: 11, color: 'var(--muted)' }}>
+                                                {ticker && <span style={{ marginRight: 6 }}>{ticker}</span>}
+                                                {formatNumber(evalAmt)}원
+                                            </span>
+                                        </div>
+                                    );
+                                })}
+                            </>
+                        )}
+                    </div>
+                </div>
+            </section>
+        )}
+
+        {/* 수익률 랭킹 테이블 */}
+        {pf.portfolioHoldings.length > 0 && (
+            <section className="stock-panel stock-panel--wide">
+                <div className="stock-panel__head">
+                    <div>
+                        <p className="stock-panel__eyebrow">수익률 랭킹</p>
+                        <h3>종목별 상세 현황</h3>
+                        <p className="stock-panel__sub">헤더 클릭으로 정렬 · 비중은 총 평가금액 대비</p>
+                    </div>
+                </div>
+                <div className="report-table-wrapper">
+                    <table className="report-table">
+                        <thead>
+                            <tr>
+                                {[
+                                    { key: 'name', label: '종목명' },
+                                    { key: 'broker', label: '증권사' },
+                                    { key: 'profit_rate', label: '수익률' },
+                                    { key: 'profit_amount', label: '평가손익' },
+                                    { key: 'eval_amount', label: '평가금액' },
+                                ].map(({ key, label }) => (
+                                    <th key={key} onClick={() => report.handleReportSort(key)}>
+                                        {label}{' '}
+                                        <span className="report-sort-icon">
+                                            {report.reportSortField === key
+                                                ? report.reportSortDir === 'asc' ? '↑' : '↓'
+                                                : '↕'}
+                                        </span>
+                                    </th>
+                                ))}
+                                <th style={{ cursor: 'default' }}>비중</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {report.sortedHoldings.map((item) => {
+                                const rateN = toNumeric(item.profit_rate);
+                                const pnlN = toNumeric(item.profit_amount);
+                                const evalAmt = item.eval_amount != null
+                                    ? item.eval_amount
+                                    : item.current_price != null
+                                        ? item.current_price * item.quantity
+                                        : null;
+                                const totalEvalVal = toNumeric(pf.portfolioSummary.total_eval);
+                                const weight = evalAmt != null && totalEvalVal
+                                    ? Math.round((evalAmt / totalEvalVal) * 1000) / 10
+                                    : null;
+                                return (
+                                    <tr key={item.id}>
+                                        <td>
+                                            <p className="report-table-name">{item.name ?? item.ticker ?? 'N/A'}</p>
+                                            <span className="report-table-code">{item.ticker ?? ''}</span>
+                                        </td>
+                                        <td className="report-td-muted">{item.broker ?? '-'}</td>
+                                        <td className={`stock-profit ${profitColorClass(rateN)}`}>
+                                            <div className="report-rate-cell">
+                                                <span>{item.profit_rate != null ? formatPercent(item.profit_rate) : '-'}</span>
+                                                {rateN != null && (
+                                                    <div className="report-rate-bar">
+                                                        <div
+                                                            className={`report-rate-bar__fill ${rateN >= 0 ? 'is-up' : 'is-down'}`}
+                                                            style={{ width: `${report.maxAbsRate > 0 ? Math.abs(rateN) / report.maxAbsRate * 100 : 0}%` }}
+                                                        />
+                                                    </div>
+                                                )}
+                                            </div>
+                                        </td>
+                                        <td className={`stock-profit ${profitColorClass(pnlN)}`}>
+                                            {item.profit_amount != null ? formatNumber(item.profit_amount) : '-'}
+                                        </td>
+                                        <td className="report-td-muted">
+                                            {evalAmt != null ? formatNumber(evalAmt) : '-'}
+                                        </td>
+                                        <td className="report-td-muted">
+                                            {weight != null ? `${weight.toFixed(1)}%` : '-'}
+                                        </td>
+                                    </tr>
+                                );
+                            })}
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+        )}
+
+        {pf.portfolioLoaded && pf.portfolioHoldings.length === 0 && !pf.portfolioError && (
+            <section className="stock-panel stock-panel--wide">
+                <p className="stock-empty" style={{ textAlign: 'center', padding: 24 }}>
+                    등록된 종목이 없습니다. <strong>쟁승토리 계좌</strong> 탭에서 종목을 먼저 등록하세요.
+                </p>
+            </section>
+        )}
+
+        {/* AI 투자 코치 */}
+        <section className="stock-panel stock-panel--wide">
+            <div className="stock-panel__head">
+                <div>
+                    <p className="stock-panel__eyebrow">AI 투자 코치</p>
+                    <h3>오늘의 투자 평가</h3>
+                    <p className="stock-panel__sub">
+                        포트폴리오를 AI가 분석하여 성취도 등급과 내일을 위한 투자 조언을 드립니다.
+                    </p>
+                </div>
+            </div>
+
+            {/* 시장 컨텍스트 미니 패널 */}
+            {marketCtx && (
+                <div className="ai-market-ctx">
+                    <span className="ai-market-ctx__label">시장 환경</span>
+                    <div className="ai-market-ctx__chips">
+                        {marketCtx.vix != null && (
+                            <span className="ai-market-chip">
+                                VIX&nbsp;<strong>{marketCtx.vix}</strong>
+                                <em>{getVixLabel(marketCtx.vix)}</em>
+                            </span>
+                        )}
+                        {marketCtx.fg != null && (
+                            <span className="ai-market-chip">
+                                F&amp;G&nbsp;<strong>{marketCtx.fg}</strong>
+                                <em>{getFgLabel(marketCtx.fg)}</em>
+                            </span>
+                        )}
+                        {marketCtx.treasury != null && (
+                            <span className="ai-market-chip">
+                                10년물&nbsp;<strong>{marketCtx.treasury}%</strong>
+                            </span>
+                        )}
+                        {marketCtx.wti != null && (
+                            <span className="ai-market-chip">
+                                WTI&nbsp;<strong>${marketCtx.wti}</strong>
+                            </span>
+                        )}
+                    </div>
+                </div>
+            )}
+
+            {/* 모델 선택 */}
+            <div className="ai-coach-settings">
+                <label>
+                    AI 모델
+                    <select
+                        value={ai.aiModel}
+                        onChange={(e) => {
+                            ai.setAiModel(e.target.value);
+                            localStorage.setItem('ai_coach_model', e.target.value);
+                        }}
+                    >
+                        <option value="claude-haiku-4-5-20251001">Claude Haiku (빠름·저렴)</option>
+                        <option value="claude-sonnet-4-6">Claude Sonnet (고성능)</option>
+                    </select>
+                </label>
+            </div>
+
+            <div className="ai-coach-actions">
+                <button
+                    className="button primary"
+                    type="button"
+                    onClick={ai.handleAiCoach}
+                    disabled={ai.aiLoading || pf.portfolioHoldings.length === 0}
+                >
+                    {ai.aiLoading ? 'AI 분석 중...' : '오늘 투자 평가 받기'}
+                </button>
+                {pf.portfolioHoldings.length === 0 && (
+                    <span className="ai-coach-note">종목 등록 후 이용 가능합니다.</span>
+                )}
+                {ai.aiResult?.generated_at && (
+                    <span className="ai-coach-note">
+                        {ai.aiResult.cached ? '오늘 캐시 결과 · ' : ''}
+                        {new Date(ai.aiResult.generated_at).toLocaleTimeString('ko-KR')} 생성
+                    </span>
+                )}
+            </div>
+
+            {ai.aiError && <p className="stock-error" style={{ marginTop: 8 }}>{ai.aiError}</p>}
+
+            {ai.aiResult && !ai.aiLoading && (
+                <div className="ai-coach-result">
+                    <div className="ai-coach-header">
+                        <div className={`ai-grade-badge grade-${(ai.aiResult.grade ?? 'c').toLowerCase()}`}>
+                            {ai.aiResult.grade ?? '?'}
+                        </div>
+                        <div className="ai-score-wrap">
+                            <span className="ai-score-num">{ai.aiResult.score ?? 0}</span>
+                            <span className="ai-score-unit">/ 100</span>
+                        </div>
+                        <p className="ai-summary-text">{ai.aiResult.summary}</p>
+                    </div>
+                    <p className="ai-evaluation-text">{ai.aiResult.evaluation}</p>
+                    {ai.aiResult.advice?.length > 0 && (
+                        <div className="ai-advice-list">
+                            {ai.aiResult.advice.map((a, i) => (
+                                <div key={i} className="ai-advice-card">
+                                    <p className="ai-advice-title">{a.title}</p>
+                                    <p className="ai-advice-body">{a.body}</p>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                    <button
+                        className="button ghost small"
+                        type="button"
+                        style={{ marginTop: 16, fontSize: 11 }}
+                        onClick={() => {
+                            const today = new Date().toISOString().slice(0, 10);
+                            localStorage.removeItem(`ai_coach_${today}`);
+                            ai.setAiResult(null);
+                        }}
+                    >
+                        다시 평가받기 (캐시 삭제)
+                    </button>
+                </div>
+            )}
+        </section>
+    </>
+);
+
+export default ReportTab;

src/pages/stock/components/SellHistoryDrawer.jsx

@@ -0,0 +1,354 @@
+import React from 'react';
+import Loading from '../../../components/Loading';
+import { formatNumber, formatPercent, profitColorClass } from '../stockUtils';
+
+const SellHistoryDrawer = ({
+    sell, sellHistoryBrokers, filteredSellHistory, sellHistorySummary,
+}) => (
+    <>
+        {/* Floating 토글 버튼 */}
+        {!sell.sellDrawerOpen && (
+            <button
+                type="button"
+                className="sh-floating-toggle"
+                onClick={() => {
+                    sell.setSellDrawerOpen(true);
+                    sell.loadSellHistory();
+                }}
+                title="실현손익 내역"
+            >
+                <span className="sh-floating-toggle__icon">💹</span>
+                <span className="sh-floating-toggle__label">실현손익</span>
+                {sell.sellHistory.length > 0 && (
+                    <span className="sh-floating-toggle__badge">{sell.sellHistory.length}</span>
+                )}
+            </button>
+        )}
+
+        {/* Backdrop */}
+        {sell.sellDrawerOpen && (
+            <div
+                className="sh-backdrop"
+                onClick={() => { sell.setSellDrawerOpen(false); sell.handleSellFormClose(); }}
+            />
+        )}
+
+        {/* Drawer */}
+        <aside className={`sh-drawer ${sell.sellDrawerOpen ? 'is-open' : ''}`}>
+            <div className="sh-drawer__header">
+                <div>
+                    <p className="sh-drawer__eyebrow">실현손익</p>
+                    <h3 className="sh-drawer__title">매도 거래 내역</h3>
+                </div>
+                <div className="sh-drawer__header-actions">
+                    {sell.sellHistoryLoading && <Loading type="spinner" message="" />}
+                    <button
+                        className="button ghost small"
+                        onClick={sell.loadSellHistory}
+                        disabled={sell.sellHistoryLoading}
+                    >
+                        새로고침
+                    </button>
+                    <button
+                        className="button primary small"
+                        onClick={sell.sellFormOpen && sell.sellEditId == null ? sell.handleSellFormClose : sell.handleSellFormOpen}
+                    >
+                        {sell.sellFormOpen && sell.sellEditId == null ? '취소' : '+ 추가'}
+                    </button>
+                    <button
+                        className="sh-drawer__close"
+                        type="button"
+                        onClick={() => { sell.setSellDrawerOpen(false); sell.handleSellFormClose(); }}
+                        aria-label="닫기"
+                    >
+                        ✕
+                    </button>
+                </div>
+            </div>
+
+            {/* 수동 추가 / 수정 폼 */}
+            {sell.sellFormOpen && (
+                <form className="sh-form" onSubmit={sell.handleSellFormSubmit}>
+                    <div className="sh-form__title">
+                        {sell.sellEditId != null ? '거래 내역 수정' : '매도 내역 수동 추가'}
+                    </div>
+                    <div className="sh-form__grid">
+                        <label>
+                            증권사
+                            <input
+                                type="text"
+                                value={sell.sellForm.broker}
+                                onChange={(e) => sell.setSellForm((p) => ({ ...p, broker: e.target.value }))}
+                                placeholder="KB증권"
+                                required
+                            />
+                        </label>
+                        <label>
+                            종목코드
+                            <input
+                                type="text"
+                                value={sell.sellForm.ticker}
+                                onChange={(e) => sell.setSellForm((p) => ({ ...p, ticker: e.target.value }))}
+                                placeholder="005930"
+                            />
+                        </label>
+                        <label>
+                            종목명
+                            <input
+                                type="text"
+                                value={sell.sellForm.name}
+                                onChange={(e) => sell.setSellForm((p) => ({ ...p, name: e.target.value }))}
+                                placeholder="삼성전자"
+                                required
+                            />
+                        </label>
+                        <label>
+                            수량
+                            <input
+                                type="number"
+                                min={1}
+                                step={1}
+                                value={sell.sellForm.quantity}
+                                onChange={(e) => sell.setSellForm((p) => ({ ...p, quantity: e.target.value }))}
+                                placeholder="10"
+                                required
+                            />
+                        </label>
+                        <label>
+                            평균 매입가 (원)
+                            <input
+                                type="number"
+                                min={0}
+                                step={1}
+                                value={sell.sellForm.avg_price}
+                                onChange={(e) => sell.setSellForm((p) => ({ ...p, avg_price: e.target.value }))}
+                                placeholder="58000"
+                                required
+                            />
+                        </label>
+                        <label>
+                            매도가 (원)
+                            <input
+                                type="number"
+                                min={0}
+                                step={1}
+                                value={sell.sellForm.sell_price}
+                                onChange={(e) => sell.setSellForm((p) => ({ ...p, sell_price: e.target.value }))}
+                                placeholder="62000"
+                                required
+                            />
+                        </label>
+                        <label>
+                            수수료 & 세금 (원)
+                            <input
+                                type="number"
+                                min={0}
+                                step={1}
+                                value={sell.sellForm.commission}
+                                onChange={(e) => sell.setSellForm((p) => ({ ...p, commission: e.target.value }))}
+                                placeholder="0"
+                            />
+                        </label>
+                        <label className="sh-form__datetime">
+                            매도 일시
+                            <input
+                                type="datetime-local"
+                                value={sell.sellForm.sold_at}
+                                onChange={(e) => sell.setSellForm((p) => ({ ...p, sold_at: e.target.value }))}
+                                required
+                            />
+                        </label>
+                    </div>
+                    {sell.sellForm.quantity && sell.sellForm.avg_price && sell.sellForm.sell_price && (() => {
+                        const qty = Number(sell.sellForm.quantity);
+                        const buy = Number(sell.sellForm.avg_price) * qty;
+                        const sellAmt = Number(sell.sellForm.sell_price) * qty;
+                        const commission = Number(sell.sellForm.commission) || 0;
+                        const profit = sellAmt - buy - commission;
+                        const rate = buy > 0 ? (profit / buy) * 100 : 0;
+                        return (
+                            <div className="sh-form__preview">
+                                <span>매도금액 <strong>{formatNumber(Math.round(sellAmt))}원</strong></span>
+                                {commission > 0 && (
+                                    <span>수수료 & 세금 <strong className="stock-profit is-negative">-{formatNumber(Math.round(commission))}원</strong></span>
+                                )}
+                                <span>실현손익 <strong className={`stock-profit ${profitColorClass(profit)}`}>{formatNumber(Math.round(profit))}원</strong></span>
+                                <span>수익률 <strong className={`stock-profit ${profitColorClass(rate)}`}>{formatPercent(rate)}</strong></span>
+                            </div>
+                        );
+                    })()}
+                    <div className="sh-form__actions">
+                        <button className="button primary" type="submit" disabled={sell.sellFormSaving}>
+                            {sell.sellFormSaving ? '저장 중...' : (sell.sellEditId != null ? '수정 저장' : '추가')}
+                        </button>
+                        <button className="button ghost" type="button" onClick={sell.handleSellFormClose} disabled={sell.sellFormSaving}>
+                            취소
+                        </button>
+                        {sell.sellFormError && <p className="stock-error">{sell.sellFormError}</p>}
+                    </div>
+                </form>
+            )}
+
+            {/* 필터 바 */}
+            <div className="sell-history__filters">
+                <div className="sell-history__filter-group">
+                    <span className="sell-history__filter-label">계좌</span>
+                    {sellHistoryBrokers.map((b) => (
+                        <button
+                            key={b}
+                            type="button"
+                            className={`sell-history__filter-btn ${sell.sellHistoryBroker === b ? 'is-active' : ''}`}
+                            onClick={() => sell.setSellHistoryBroker(b)}
+                        >
+                            {b === 'ALL' ? '전체' : b}
+                        </button>
+                    ))}
+                </div>
+                <div className="sell-history__filter-group">
+                    <span className="sell-history__filter-label">기간</span>
+                    {[
+                        { label: '1개월', value: '1M' },
+                        { label: '3개월', value: '3M' },
+                        { label: '6개월', value: '6M' },
+                        { label: '1년', value: '1Y' },
+                        { label: '전체', value: 'ALL' },
+                    ].map(({ label, value }) => (
+                        <button
+                            key={value}
+                            type="button"
+                            className={`sell-history__filter-btn ${sell.sellHistoryPeriod === value ? 'is-active' : ''}`}
+                            onClick={() => sell.setSellHistoryPeriod(value)}
+                        >
+                            {label}
+                        </button>
+                    ))}
+                </div>
+            </div>
+
+            {/* 요약 카드 */}
+            {filteredSellHistory.length > 0 && (
+                <div className="sell-history__summary">
+                    <div className="sell-history__summary-card">
+                        <span>거래 횟수</span>
+                        <strong>{sellHistorySummary.count}건</strong>
+                    </div>
+                    <div className="sell-history__summary-card">
+                        <span>총 매도금액</span>
+                        <strong>{formatNumber(sellHistorySummary.totalSell)}원</strong>
+                    </div>
+                    <div className="sell-history__summary-card">
+                        <span>총 수수료 & 세금</span>
+                        <strong className="stock-profit is-negative">
+                            -{formatNumber(Math.round(sellHistorySummary.totalCommission))}원
+                        </strong>
+                    </div>
+                    <div className="sell-history__summary-card">
+                        <span>실현손익 합계</span>
+                        <strong className={`stock-profit ${profitColorClass(sellHistorySummary.totalProfit)}`}>
+                            {formatNumber(Math.round(sellHistorySummary.totalProfit))}원
+                        </strong>
+                    </div>
+                    <div className="sell-history__summary-card">
+                        <span>평균 수익률</span>
+                        <strong className={`stock-profit ${profitColorClass(sellHistorySummary.rate)}`}>
+                            {formatPercent(sellHistorySummary.rate)}
+                        </strong>
+                    </div>
+                </div>
+            )}
+
+            {/* 거래 내역 목록 */}
+            {filteredSellHistory.length > 0 ? (
+                <div className="sh-drawer__list">
+                    {filteredSellHistory.map((r) => {
+                        const profitN = r.realized_profit ?? 0;
+                        const rateN = r.realized_rate ?? 0;
+                        return (
+                            <div key={r.id} className="sh-drawer__item">
+                                <div className="sh-drawer__item-top">
+                                    <div className="sh-drawer__item-name">
+                                        <span>{r.name}</span>
+                                        {r.ticker && <code>{r.ticker}</code>}
+                                    </div>
+                                    <div className="sh-drawer__item-actions">
+                                        <button
+                                            type="button"
+                                            className="button ghost small"
+                                            onClick={() => sell.handleSellEditStart(r)}
+                                            title="수정"
+                                        >
+                                            ✏️
+                                        </button>
+                                        <button
+                                            type="button"
+                                            className="button ghost small pf-btn-danger"
+                                            onClick={() => sell.handleDeleteSellRecord(r.id)}
+                                            title="삭제"
+                                        >
+                                            🗑️
+                                        </button>
+                                    </div>
+                                </div>
+                                <div className="sh-drawer__item-meta">
+                                    <span className="sell-history__broker">{r.broker}</span>
+                                    <span className="sell-history__date">
+                                        {new Date(r.sold_at).toLocaleString('ko-KR', {
+                                            year: 'numeric', month: '2-digit', day: '2-digit',
+                                            hour: '2-digit', minute: '2-digit',
+                                        })}
+                                    </span>
+                                </div>
+                                <div className="sh-drawer__item-metrics">
+                                    <div>
+                                        <span>수량</span>
+                                        <strong>{formatNumber(r.quantity)}</strong>
+                                    </div>
+                                    <div>
+                                        <span>매입가</span>
+                                        <strong>{formatNumber(r.avg_price)}</strong>
+                                    </div>
+                                    <div>
+                                        <span>매도가</span>
+                                        <strong>{formatNumber(r.sell_price)}</strong>
+                                    </div>
+                                    <div>
+                                        <span>매도금액</span>
+                                        <strong>{formatNumber(Math.round(r.sell_amount))}</strong>
+                                    </div>
+                                    {(r.commission > 0) && (
+                                        <div>
+                                            <span>수수료 & 세금</span>
+                                            <strong className="stock-profit is-negative">
+                                                -{formatNumber(Math.round(r.commission))}
+                                            </strong>
+                                        </div>
+                                    )}
+                                    <div>
+                                        <span>실현손익</span>
+                                        <strong className={`stock-profit ${profitColorClass(profitN)}`}>
+                                            {formatNumber(Math.round(profitN))}
+                                        </strong>
+                                    </div>
+                                    <div>
+                                        <span>수익률</span>
+                                        <strong className={`stock-profit ${profitColorClass(rateN)}`}>
+                                            {formatPercent(rateN)}
+                                        </strong>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            ) : (
+                <p className="stock-empty sh-drawer__empty">
+                    {sell.sellHistory.length === 0
+                        ? '아직 매도 기록이 없습니다.'
+                        : '필터 조건에 맞는 기록이 없습니다.'}
+                </p>
+            )}
+        </aside>
+    </>
+);
+
+export default SellHistoryDrawer;

src/pages/stock/hooks/useAdvisor.js

@@ -0,0 +1,108 @@
+import { useState, useCallback } from 'react';
+import { formatNumber, formatPercent, getVixLabel, getFgLabel } from '../stockUtils';
+
+export default function useAdvisor({ portfolioHoldings, portfolioSummary, cashList, totalCash, totalAssets, marketCtx }) {
+    const [advisorCopied, setAdvisorCopied] = useState(false);
+
+    const buildAdvisorPrompt = useCallback(() => {
+        const today = new Date().toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric' });
+
+        const holdingsLines = portfolioHoldings.map((h) => {
+            const cp = h.current_price != null ? `${formatNumber(h.current_price)}원` : '시세 미조회';
+            const rate = h.profit_rate != null ? formatPercent(h.profit_rate) : '미조회';
+            const profit = h.profit_amount != null ? `(${h.profit_amount >= 0 ? '+' : ''}${formatNumber(h.profit_amount)}원)` : '';
+            return `- **${h.name ?? h.ticker}** (${h.ticker ?? ''}) | 계좌: ${h.broker ?? '-'}
+  수량 ${h.quantity}주 | 평균매입가 ${formatNumber(h.avg_price)}원 | 현재가 ${cp} | 손익 ${rate} ${profit}`;
+        }).join('\n');
+
+        const cashLines = cashList.map((c) => `- ${c.broker}: ${formatNumber(c.cash)}원`).join('\n') || '- 없음';
+
+        const marketLines = marketCtx
+            ? [
+                `VIX: ${marketCtx.vix != null ? `${marketCtx.vix} (${getVixLabel(marketCtx.vix)})` : '데이터 없음'}`,
+                `공포탐욕지수: ${marketCtx.fg != null ? `${marketCtx.fg}점 (${getFgLabel(marketCtx.fg)})` : '데이터 없음'}`,
+                `미 10년물 국채: ${marketCtx.treasury != null ? `${marketCtx.treasury}%` : '데이터 없음'}`,
+                `WTI 유가: ${marketCtx.wti != null ? `$${marketCtx.wti}` : '데이터 없음'}`,
+            ].join('\n')
+            : '시장 데이터 미로드';
+
+        return `당신은 15년 이상 경력의 한국 주식시장 전문 애널리스트입니다.
+오늘은 ${today}입니다. 아래 포트폴리오 정보와 시장 환경을 바탕으로 전문가 분석을 제공해주세요.
+
+---
+
+## 📊 현재 시장 환경
+
+${marketLines}
+
+---
+
+## 💼 보유 포트폴리오
+
+### 보유 종목 (${portfolioHoldings.length}개)
+
+${holdingsLines || '보유 종목 없음'}
+
+### 포트폴리오 요약
+
+- 총 매입금액: ${formatNumber(portfolioSummary.total_buy)}원
+- 총 평가금액: ${formatNumber(portfolioSummary.total_eval)}원
+- 총 손익: ${formatNumber(portfolioSummary.total_profit)}원 (수익률: ${formatPercent(portfolioSummary.total_profit_rate)})
+- 예수금 합계: ${totalCash != null ? formatNumber(totalCash) + '원' : '미입력'}
+- 총 자산: ${totalAssets != null ? formatNumber(totalAssets) + '원' : '미집계'}
+
+### 예수금 현황
+
+${cashLines}
+
+---
+
+## 🔍 분석 요청
+
+다음 형식으로 명확하게 작성해주세요:
+
+### 📈 오늘의 시장 환경
+시장 환경 데이터를 바탕으로 오늘 한국 주식시장의 전반적인 분위기와 주요 이슈를 2-3문장으로 요약하세요.
+
+### 🔍 종목별 분석 및 행동 지침
+각 보유 종목에 대해 아래 형식으로 작성하세요:
+
+**[종목명 (티커)]**
+- 현황: 현재 손익 상태와 포지션 평가
+- 분석: 업황·섹터 동향, 주요 리스크/기회
+- 🎯 행동 지침: **[매도 / 보유 / 추가매수 / 분할매도]** — 구체적 이유와 목표 참고 가격대
+
+### 💼 포트폴리오 종합 의견
+전체 포트폴리오의 섹터 편중, 리밸런싱 필요 여부, 현금 비중 조언을 작성하세요.
+
+### ⚠️ 오늘 주의해야 할 리스크
+매크로·섹터·개별 종목 측면에서 오늘 특히 주의할 리스크를 2-3가지 나열하세요.
+
+### 🚀 추가 매수 유망 섹터 추천
+현재 시장 환경과 포트폴리오 구성을 고려하여 추가 매수를 검토할 만한 유망 섹터를 추천해주세요.
+아래 형식으로 작성하세요:
+
+**[섹터명]**
+- 추천 이유: 현재 시장 환경에서 이 섹터가 유망한 근거 (매크로 환경, 정책, 업황 사이클 등)
+- 대표 종목 예시: 국내 대표 종목 2-3개 (현재 포트폴리오와 중복 여부 언급)
+- 주의사항: 이 섹터 투자 시 고려해야 할 리스크
+
+(현재 포트폴리오에 없거나 비중이 낮은 섹터를 우선 추천하고, 2-3개 섹터를 제시해주세요.)
+
+---
+분석은 반드시 한국어로, 구체적인 수치와 근거를 들어 전문적으로 작성해주세요.
+투자 결정은 최종적으로 투자자 본인이 판단함을 명시하세요.`;
+    }, [portfolioHoldings, portfolioSummary, cashList, totalCash, totalAssets, marketCtx]);
+
+    const handleCopyPrompt = async () => {
+        try {
+            await navigator.clipboard.writeText(buildAdvisorPrompt());
+            setAdvisorCopied(true);
+            setTimeout(() => setAdvisorCopied(false), 2500);
+        } catch {
+            alert('클립보드 복사에 실패했습니다. 텍스트를 직접 선택해 복사하세요.');
+        }
+    };
+
+    return { advisorCopied, buildAdvisorPrompt, handleCopyPrompt };
+}

src/pages/stock/hooks/useAiBalance.js

@@ -0,0 +1,84 @@
+import { useState, useCallback, useMemo } from 'react';
+import { getTradeBalance, createTradeOrder } from '../../../api';
+import { getQty, getBuyPrice, getCurrentPrice, getProfitRate, getProfitLoss } from '../stockUtils';
+
+export default function useAiBalance() {
+    const [balance, setBalance] = useState(null);
+    const [balanceLoading, setBalanceLoading] = useState(false);
+    const [balanceError, setBalanceError] = useState('');
+    const [balanceLoaded, setBalanceLoaded] = useState(false);
+
+    const [manualForm, setManualForm] = useState({
+        code: '',
+        qty: 1,
+        price: 0,
+        type: 'buy',
+    });
+    const [manualLoading, setManualLoading] = useState(false);
+    const [manualError, setManualError] = useState('');
+    const [manualResult, setManualResult] = useState(null);
+    const [kisModal, setKisModal] = useState('');
+
+    const loadBalance = useCallback(async () => {
+        setBalanceLoading(true);
+        setBalanceError('');
+        try {
+            const data = await getTradeBalance();
+            setBalance(data);
+            setBalanceLoaded(true);
+        } catch (err) {
+            setBalanceError(err?.message ?? String(err));
+        } finally {
+            setBalanceLoading(false);
+        }
+    }, []);
+
+    const submitManualOrder = async (event) => {
+        event.preventDefault();
+        setManualLoading(true);
+        setManualError('');
+        setManualResult(null);
+        try {
+            const payload = {
+                ticker: manualForm.code.trim(),
+                action: manualForm.type === 'sell' ? 'SELL' : 'BUY',
+                quantity: Number(manualForm.qty),
+                price: Number(manualForm.price),
+            };
+            const result = await createTradeOrder(payload);
+            setManualResult(result ?? { ok: true });
+            if (result?.kis_result !== undefined) {
+                const message =
+                    typeof result.kis_result === 'string'
+                        ? result.kis_result
+                        : JSON.stringify(result.kis_result, null, 2);
+                setKisModal(message);
+            }
+            await loadBalance();
+        } catch (err) {
+            setManualError(err?.message ?? String(err));
+        } finally {
+            setManualLoading(false);
+        }
+    };
+
+    /* derived */
+    const holdings = useMemo(() => {
+        if (!balance) return [];
+        if (Array.isArray(balance.holdings)) return balance.holdings;
+        if (Array.isArray(balance.positions)) return balance.positions;
+        if (Array.isArray(balance.items)) return balance.items;
+        return [];
+    }, [balance]);
+
+    const summary = balance?.summary ?? {};
+    const totalEval = summary.total_eval ?? balance?.total_eval ?? balance?.total_value;
+    const deposit = summary.deposit ?? balance?.deposit ?? balance?.available_cash;
+
+    return {
+        balance, balanceLoading, balanceError, balanceLoaded, loadBalance,
+        holdings, summary, totalEval, deposit,
+        manualForm, setManualForm, manualLoading, manualError, manualResult,
+        kisModal, setKisModal, submitManualOrder,
+    };
+}

src/pages/stock/hooks/useAiCoach.js

@@ -0,0 +1,92 @@
+import { useState, useEffect } from 'react';
+import { formatNumber, formatPercent, getVixLabel, getFgLabel } from '../stockUtils';
+
+export default function useAiCoach({ portfolioHoldings, portfolioSummary, totalCash, totalAssets, marketCtx }) {
+    const [aiModel, setAiModel] = useState(() => localStorage.getItem('ai_coach_model') ?? 'claude-haiku-4-5-20251001');
+    const [aiResult, setAiResult] = useState(null);
+    const [aiLoading, setAiLoading] = useState(false);
+    const [aiError, setAiError] = useState('');
+
+    useEffect(() => {
+        const today = new Date().toISOString().slice(0, 10);
+        const cached = localStorage.getItem(`ai_coach_${today}`);
+        if (cached) {
+            try { setAiResult({ ...JSON.parse(cached), cached: true }); } catch { /* ignore */ }
+        }
+    }, []);
+
+    const handleAiCoach = async () => {
+        if (portfolioHoldings.length === 0) return;
+
+        const today = new Date().toISOString().slice(0, 10);
+        const cacheKey = `ai_coach_${today}`;
+        const cached = localStorage.getItem(cacheKey);
+        if (cached) {
+            try { setAiResult({ ...JSON.parse(cached), cached: true }); return; } catch { /* invalid */ }
+        }
+
+        setAiLoading(true);
+        setAiError('');
+
+        const holdingsText = portfolioHoldings
+            .map((item) =>
+                `- ${item.name ?? item.ticker}(${item.ticker ?? ''}): ${item.quantity}주, 매입가 ${formatNumber(item.avg_price)}원, 현재가 ${item.current_price != null ? formatNumber(item.current_price) + '원' : '미조회'}, 수익률 ${item.profit_rate != null ? formatPercent(item.profit_rate) : '미조회'}`
+            )
+            .join('\n');
+
+        const marketText = marketCtx
+            ? `\n[현재 시장 환경]\nVIX: ${marketCtx.vix != null ? `${marketCtx.vix} (${getVixLabel(marketCtx.vix)})` : '데이터 없음'}\nFear & Greed: ${marketCtx.fg != null ? `${marketCtx.fg}점 (${getFgLabel(marketCtx.fg)})` : '데이터 없음'}\n미국 10년물 국채: ${marketCtx.treasury != null ? `${marketCtx.treasury}%` : '데이터 없음'}\nWTI 유가: ${marketCtx.wti != null ? `$${marketCtx.wti}` : '데이터 없음'}`
+            : '';
+
+        const prompt = `당신은 한국 주식 전문 투자 코치입니다. 아래 포트폴리오와 시장 환경을 종합 분석하여 JSON으로만 답하세요.
+
+분석 일자: ${today}
+총 매입금액: ${formatNumber(portfolioSummary.total_buy)}원
+총 평가금액: ${formatNumber(portfolioSummary.total_eval)}원
+총 손익: ${formatNumber(portfolioSummary.total_profit)}원 (수익률: ${formatPercent(portfolioSummary.total_profit_rate)})
+예수금 합계: ${totalCash != null ? formatNumber(totalCash) + '원' : '미입력'}
+총 자산: ${totalAssets != null ? formatNumber(totalAssets) + '원' : '미집계'}
+보유 종목 수: ${portfolioHoldings.length}개
+보유 종목:
+${holdingsText}${marketText}
+
+반드시 아래 JSON 형식으로만 응답하세요 (코드블록 없이, 모든 텍스트는 한국어로):
+{
+  "score": 85,
+  "grade": "A",
+  "summary": "30자 이내 한줄 평가",
+  "evaluation": "200자 이내 상세 평가",
+  "advice": [
+    { "title": "조언 제목", "body": "50자 이내 조언 내용" },
+    { "title": "조언 제목", "body": "50자 이내 조언 내용" },
+    { "title": "조언 제목", "body": "50자 이내 조언 내용" }
+  ]
+}`;
+
+        try {
+            const res = await fetch('/api/stock/ai-coach', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ model: aiModel, prompt, max_tokens: 1024 }),
+            });
+            if (!res.ok) {
+                const errData = await res.json().catch(() => ({}));
+                throw new Error(errData.error || `AI Coach 오류 (${res.status})`);
+            }
+            const data = await res.json();
+            const text = data.content?.[0]?.text ?? '';
+            const jsonMatch = text.match(/\{[\s\S]*\}/);
+            if (!jsonMatch) throw new Error('AI 응답에서 JSON을 파싱할 수 없습니다.');
+            const result = JSON.parse(jsonMatch[0]);
+            const final = { ...result, generated_at: new Date().toISOString(), cached: false };
+            localStorage.setItem(cacheKey, JSON.stringify(final));
+            setAiResult(final);
+        } catch (err) {
+            setAiError(err?.message ?? String(err));
+        } finally {
+            setAiLoading(false);
+        }
+    };
+
+    return { aiModel, setAiModel, aiResult, setAiResult, aiLoading, aiError, handleAiCoach };
+}

src/pages/stock/hooks/useAssetHistory.js

@@ -0,0 +1,66 @@
+import { useState, useCallback } from 'react';
+import { getAssetHistory, saveAssetSnapshot } from '../../../api';
+
+export default function useAssetHistory() {
+    const [assetHistory, setAssetHistory] = useState(null);
+    const [assetHistoryLoading, setAssetHistoryLoading] = useState(false);
+    const [assetHistoryDays, setAssetHistoryDays] = useState(30);
+    const [snapshotSaving, setSnapshotSaving] = useState(false);
+
+    const loadAssetHistory = useCallback(async (days) => {
+        setAssetHistoryLoading(true);
+        try {
+            const data = await getAssetHistory(days);
+            const raw = data?.snapshots ?? data?.history ?? (Array.isArray(data) ? data : []);
+            const byDate = {};
+            for (const item of raw) byDate[item.date] = item.total_assets ?? 0;
+
+            const toLocalDate = (d) => {
+                const y = d.getFullYear();
+                const m = String(d.getMonth() + 1).padStart(2, '0');
+                const day = String(d.getDate()).padStart(2, '0');
+                return `${y}-${m}-${day}`;
+            };
+
+            let filled;
+            if (days > 0) {
+                const today = new Date();
+                filled = Array.from({ length: days }, (_, i) => {
+                    const d = new Date(today);
+                    d.setDate(today.getDate() - (days - 1 - i));
+                    const dateStr = toLocalDate(d);
+                    const val = byDate[dateStr];
+                    return val > 0 ? { date: dateStr, total_assets: val } : null;
+                }).filter(Boolean);
+            } else {
+                filled = Object.entries(byDate)
+                    .filter(([, v]) => v > 0)
+                    .map(([date, total_assets]) => ({ date, total_assets }))
+                    .sort((a, b) => a.date.localeCompare(b.date));
+            }
+            setAssetHistory(filled);
+        } catch {
+            setAssetHistory([]);
+        } finally {
+            setAssetHistoryLoading(false);
+        }
+    }, []);
+
+    const handleSaveSnapshot = async (totalAssets, days) => {
+        setSnapshotSaving(true);
+        try {
+            await saveAssetSnapshot(totalAssets != null ? Number(totalAssets) : undefined);
+            await loadAssetHistory(days);
+        } catch (err) {
+            alert('스냅샷 저장 실패: ' + (err?.message ?? String(err)));
+        } finally {
+            setSnapshotSaving(false);
+        }
+    };
+
+    return {
+        assetHistory, assetHistoryLoading,
+        assetHistoryDays, setAssetHistoryDays,
+        snapshotSaving, loadAssetHistory, handleSaveSnapshot,
+    };
+}

src/pages/stock/hooks/useMarketContext.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+import { getFearAndGreed, getVix, getTreasury10Y, getWTI } from '../../../api';
+
+export default function useMarketContext(shouldLoad) {
+    const [marketCtx, setMarketCtx] = useState(null);
+
+    useEffect(() => {
+        if (!shouldLoad || marketCtx !== null) return;
+        Promise.allSettled([getFearAndGreed(), getVix(), getTreasury10Y(), getWTI()])
+            .then(([fg, vix, t, w]) => {
+                const fgRaw = fg.status === 'fulfilled' ? fg.value : null;
+                const fgScore = fgRaw?.fear_and_greed?.score ?? fgRaw?.score;
+                setMarketCtx({
+                    fg: fgScore != null ? Math.round(Number(fgScore)) : null,
+                    vix: vix.status === 'fulfilled' ? (vix.value?.value ?? null) : null,
+                    treasury: t.status === 'fulfilled' ? (t.value?.value ?? null) : null,
+                    wti: w.status === 'fulfilled' ? (w.value?.value ?? null) : null,
+                });
+            });
+    }, [shouldLoad, marketCtx]);
+
+    return marketCtx;
+}

src/pages/stock/hooks/usePortfolio.js

@@ -0,0 +1,269 @@
+import { useState, useCallback, useRef, useMemo } from 'react';
+import {
+    getPortfolio, addPortfolio, updatePortfolio, deletePortfolio,
+    upsertCash, deleteCash,
+} from '../../../api';
+import { emptyPortfolioForm } from '../stockUtils';
+
+export default function usePortfolio() {
+    const [portfolio, setPortfolio] = useState(null);
+    const [portfolioLoading, setPortfolioLoading] = useState(false);
+    const [portfolioError, setPortfolioError] = useState('');
+    const [portfolioLoaded, setPortfolioLoaded] = useState(false);
+
+    /* add form */
+    const [addForm, setAddForm] = useState({ ...emptyPortfolioForm });
+    const [addFormOpen, setAddFormOpen] = useState(false);
+    const [addLoading, setAddLoading] = useState(false);
+    const [addError, setAddError] = useState('');
+
+    /* edit */
+    const [editingId, setEditingId] = useState(null);
+    const [editForm, setEditForm] = useState({});
+    const [editLoading, setEditLoading] = useState(false);
+    const editOrigRef = useRef({});
+
+    /* delete / sell confirm */
+    const [deleteConfirmId, setDeleteConfirmId] = useState(null);
+    const [sellConfirmId, setSellConfirmId] = useState(null);
+    const [sellLoading, setSellLoading] = useState(false);
+
+    /* cash */
+    const [cashForm, setCashForm] = useState({ broker: '', cash: '' });
+    const [cashSaving, setCashSaving] = useState(false);
+    const [cashError, setCashError] = useState('');
+    const [cashEditingBroker, setCashEditingBroker] = useState(null);
+    const [cashEditingValue, setCashEditingValue] = useState('');
+    const [cashEditSaving, setCashEditSaving] = useState(false);
+
+    /* derived */
+    const portfolioHoldings = portfolio?.holdings ?? [];
+    const portfolioSummary = portfolio?.summary ?? {};
+    const cashList = portfolio?.cash ?? [];
+    const totalCash = portfolioSummary.total_cash ?? null;
+    const totalAssets = portfolioSummary.total_assets ?? null;
+
+    const brokerGroups = useMemo(() => {
+        const map = {};
+        for (const item of portfolioHoldings) {
+            const broker = item.broker || '기타';
+            if (!map[broker]) map[broker] = [];
+            map[broker].push(item);
+        }
+        return Object.entries(map).sort(([a], [b]) => a.localeCompare(b));
+    }, [portfolioHoldings]);
+
+    const brokerColors = useMemo(() => {
+        const palette = [
+            { border: 'rgba(129,140,248,0.5)', bg: 'rgba(129,140,248,0.06)' },
+            { border: 'rgba(251,191,36,0.5)', bg: 'rgba(251,191,36,0.06)' },
+            { border: 'rgba(52,211,153,0.5)', bg: 'rgba(52,211,153,0.06)' },
+            { border: 'rgba(244,114,182,0.5)', bg: 'rgba(244,114,182,0.06)' },
+            { border: 'rgba(251,146,60,0.5)', bg: 'rgba(251,146,60,0.06)' },
+            { border: 'rgba(139,92,246,0.5)', bg: 'rgba(139,92,246,0.06)' },
+        ];
+        const map = {};
+        brokerGroups.forEach(([broker], i) => {
+            map[broker] = palette[i % palette.length];
+        });
+        return map;
+    }, [brokerGroups]);
+
+    const getBrokerSummary = (items) => {
+        let totalBuy = 0, totalEvalAmt = 0, hasNullPrice = false;
+        for (const item of items) {
+            totalBuy += (item.avg_price ?? 0) * (item.quantity ?? 0);
+            if (item.eval_amount != null) totalEvalAmt += item.eval_amount;
+            else hasNullPrice = true;
+        }
+        const totalProfit = totalEvalAmt - totalBuy;
+        const totalProfitRate = totalBuy > 0 ? (totalProfit / totalBuy) * 100 : 0;
+        return { totalBuy, totalEval: totalEvalAmt, totalProfit, totalProfitRate, hasNullPrice };
+    };
+
+    /* loaders */
+    const loadPortfolio = useCallback(async () => {
+        setPortfolioLoading(true);
+        setPortfolioError('');
+        try {
+            const data = await getPortfolio();
+            setPortfolio(data);
+            setPortfolioLoaded(true);
+        } catch (err) {
+            setPortfolioError(err?.message ?? String(err));
+        } finally {
+            setPortfolioLoading(false);
+        }
+    }, []);
+
+    /* actions */
+    const handleAddSubmit = async (e) => {
+        e.preventDefault();
+        setAddLoading(true);
+        setAddError('');
+        try {
+            await addPortfolio({
+                broker: addForm.broker.trim(),
+                ticker: addForm.ticker.trim(),
+                name: addForm.name.trim(),
+                quantity: Number(addForm.quantity),
+                avg_price: Number(addForm.avg_price),
+            });
+            setAddForm({ ...emptyPortfolioForm });
+            setAddFormOpen(false);
+            await loadPortfolio();
+        } catch (err) {
+            setAddError(err?.message ?? String(err));
+        } finally {
+            setAddLoading(false);
+        }
+    };
+
+    const handleEditStart = (item) => {
+        setEditingId(item.id);
+        const data = { quantity: item.quantity, avg_price: item.avg_price, broker: item.broker, name: item.name };
+        setEditForm(data);
+        editOrigRef.current = { ...data };
+    };
+
+    const handleEditSave = async (id) => {
+        setEditLoading(true);
+        try {
+            const orig = editOrigRef.current ?? {};
+            const diff = {};
+            for (const key of Object.keys(editForm)) {
+                if (editForm[key] !== orig[key]) diff[key] = editForm[key];
+            }
+            if (Object.keys(diff).length === 0) { setEditingId(null); return; }
+            await updatePortfolio(id, diff);
+            setEditingId(null);
+            await loadPortfolio();
+        } catch (err) {
+            const msg = err?.message ?? String(err);
+            if (msg.includes('404') || msg.includes('not found')) {
+                alert('해당 종목을 찾을 수 없습니다. 이미 삭제되었을 수 있습니다.');
+                await loadPortfolio();
+            } else {
+                alert('수정 실패: ' + msg);
+            }
+        } finally {
+            setEditLoading(false);
+        }
+    };
+
+    const handleDelete = async (id) => {
+        try {
+            await deletePortfolio(id);
+            setDeleteConfirmId(null);
+            await loadPortfolio();
+        } catch (err) {
+            const msg = err?.message ?? String(err);
+            if (msg.includes('404') || msg.includes('not found')) {
+                alert('해당 종목을 찾을 수 없습니다. 이미 삭제되었을 수 있습니다.');
+                setDeleteConfirmId(null);
+                await loadPortfolio();
+            } else {
+                alert('삭제 실패: ' + msg);
+            }
+        }
+    };
+
+    /* cash actions */
+    const handleCashSave = async (e) => {
+        e.preventDefault();
+        if (!cashForm.broker.trim() || cashForm.cash === '') return;
+        setCashSaving(true);
+        setCashError('');
+        try {
+            await upsertCash(cashForm.broker.trim(), Number(cashForm.cash));
+            setCashForm({ broker: '', cash: '' });
+            await loadPortfolio();
+        } catch (err) {
+            setCashError(err?.message ?? String(err));
+        } finally {
+            setCashSaving(false);
+        }
+    };
+
+    const handleCashDelete = async (broker) => {
+        try {
+            await deleteCash(broker);
+            await loadPortfolio();
+        } catch (err) {
+            alert('예수금 삭제 실패: ' + (err?.message ?? String(err)));
+        }
+    };
+
+    const handleCashInlineEdit = (item) => {
+        setCashEditingBroker(item.broker);
+        setCashEditingValue(String(item.cash ?? ''));
+    };
+
+    const handleCashInlineSave = async (broker) => {
+        if (cashEditingValue === '') return;
+        setCashEditSaving(true);
+        try {
+            await upsertCash(broker, Number(cashEditingValue));
+            setCashEditingBroker(null);
+            setCashEditingValue('');
+            await loadPortfolio();
+        } catch (err) {
+            alert('예수금 수정 실패: ' + (err?.message ?? String(err)));
+        } finally {
+            setCashEditSaving(false);
+        }
+    };
+
+    const handleCashInlineCancel = () => {
+        setCashEditingBroker(null);
+        setCashEditingValue('');
+    };
+
+    /* sell (현재가 매도) */
+    const handleSell = async (item, { cashList: cl, loadSellHistoryAfter }) => {
+        const sellPrice = item.current_price ?? item.avg_price;
+        const avgPrice = item.avg_price ?? 0;
+        const qty = item.quantity ?? 0;
+        const saleAmount = sellPrice * qty;
+        const buyAmount = avgPrice * qty;
+        const realizedProfit = saleAmount - buyAmount;
+        const realizedRate = buyAmount > 0 ? (realizedProfit / buyAmount) * 100 : 0;
+        const broker = item.broker ?? '';
+
+        setSellLoading(true);
+        try {
+            const existing = cl.find((c) => c.broker === broker);
+            const newCash = (existing?.cash ?? 0) + saleAmount;
+            await upsertCash(broker, newCash);
+            await deletePortfolio(item.id);
+            setSellConfirmId(null);
+            await loadPortfolio();
+            if (loadSellHistoryAfter) {
+                await loadSellHistoryAfter({
+                    broker, ticker: item.ticker ?? '', name: item.name ?? item.ticker ?? 'N/A',
+                    quantity: qty, avg_price: avgPrice, sell_price: sellPrice,
+                    buy_amount: buyAmount, sell_amount: saleAmount,
+                    realized_profit: realizedProfit, realized_rate: realizedRate,
+                    sold_at: new Date().toISOString(),
+                });
+            }
+        } catch (err) {
+            alert('매도 처리 실패: ' + (err?.message ?? String(err)));
+        } finally {
+            setSellLoading(false);
+        }
+    };
+
+    return {
+        portfolio, portfolioLoading, portfolioError, portfolioLoaded, loadPortfolio,
+        portfolioHoldings, portfolioSummary, cashList, totalCash, totalAssets,
+        addForm, setAddForm, addFormOpen, setAddFormOpen, addLoading, addError, handleAddSubmit,
+        editingId, setEditingId, editForm, setEditForm, editLoading, handleEditStart, handleEditSave,
+        deleteConfirmId, setDeleteConfirmId, handleDelete,
+        sellConfirmId, setSellConfirmId, sellLoading, handleSell,
+        cashForm, setCashForm, cashSaving, cashError, handleCashSave, handleCashDelete,
+        cashEditingBroker, cashEditingValue, setCashEditingValue, cashEditSaving,
+        handleCashInlineEdit, handleCashInlineSave, handleCashInlineCancel,
+        brokerGroups, brokerColors, getBrokerSummary,
+    };
+}

src/pages/stock/hooks/useReportData.js

@@ -0,0 +1,111 @@
+import { useState, useMemo } from 'react';
+import { toNumeric } from '../stockUtils';
+
+export default function useReportData({ portfolioHoldings, portfolioSummary, brokerGroups, getBrokerSummary }) {
+    const [reportSortField, setReportSortField] = useState('profit_rate');
+    const [reportSortDir, setReportSortDir] = useState('desc');
+
+    const handleReportSort = (field) => {
+        if (reportSortField === field) {
+            setReportSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+        } else {
+            setReportSortField(field);
+            setReportSortDir('desc');
+        }
+    };
+
+    const brokerPieData = useMemo(() =>
+        brokerGroups
+            .map(([broker, items]) => ({ name: broker, value: getBrokerSummary(items).totalEval }))
+            .filter((d) => d.value > 0),
+        [brokerGroups, getBrokerSummary]
+    );
+
+    const profitBarData = useMemo(() =>
+        portfolioHoldings
+            .filter((item) => item.profit_rate != null)
+            .map((item) => ({
+                name: item.ticker ?? (item.name ?? 'N/A').slice(0, 5),
+                fullName: item.name ?? item.ticker ?? 'N/A',
+                rate: toNumeric(item.profit_rate) ?? 0,
+            }))
+            .sort((a, b) => b.rate - a.rate),
+        [portfolioHoldings]
+    );
+
+    const maxAbsRate = useMemo(() =>
+        Math.max(1, ...portfolioHoldings.map((h) => Math.abs(toNumeric(h.profit_rate) ?? 0))),
+        [portfolioHoldings]
+    );
+
+    const brokerConcentration = useMemo(() => {
+        const totalEval = toNumeric(portfolioSummary.total_eval);
+        if (!totalEval || totalEval === 0) return [];
+        return brokerGroups
+            .map(([broker, items]) => {
+                const { totalEval: brokerEval } = getBrokerSummary(items);
+                const ratio = Math.round((brokerEval / totalEval) * 1000) / 10;
+                return { broker, eval: brokerEval, ratio };
+            })
+            .sort((a, b) => b.ratio - a.ratio);
+    }, [brokerGroups, portfolioSummary.total_eval, getBrokerSummary]);
+
+    const stockConcentration = useMemo(() => {
+        const totalEval = toNumeric(portfolioSummary.total_eval);
+        if (!totalEval || totalEval === 0) return [];
+        return portfolioHoldings
+            .map((item) => {
+                const evalAmt = item.eval_amount != null
+                    ? toNumeric(item.eval_amount)
+                    : (item.current_price != null && item.quantity != null)
+                        ? toNumeric(item.current_price) * toNumeric(item.quantity)
+                        : null;
+                if (!evalAmt) return null;
+                return {
+                    name: item.name ?? item.ticker ?? 'N/A',
+                    ticker: item.ticker ?? '',
+                    eval: evalAmt,
+                    ratio: Math.round((evalAmt / totalEval) * 1000) / 10,
+                };
+            })
+            .filter(Boolean)
+            .sort((a, b) => b.ratio - a.ratio)
+            .slice(0, 5);
+    }, [portfolioHoldings, portfolioSummary.total_eval]);
+
+    const sortedHoldings = useMemo(() => {
+        const getVal = (item) => {
+            switch (reportSortField) {
+                case 'profit_rate': return toNumeric(item.profit_rate) ?? -Infinity;
+                case 'profit_amount': return toNumeric(item.profit_amount) ?? -Infinity;
+                case 'eval_amount': {
+                    const ea = toNumeric(item.eval_amount);
+                    if (ea != null) return ea;
+                    const cp = toNumeric(item.current_price);
+                    const qty = toNumeric(item.quantity);
+                    return cp != null && qty != null ? cp * qty : -Infinity;
+                }
+                default: return 0;
+            }
+        };
+        return [...portfolioHoldings].sort((a, b) => {
+            if (reportSortField === 'name')
+                return reportSortDir === 'asc'
+                    ? (a.name ?? '').localeCompare(b.name ?? '')
+                    : (b.name ?? '').localeCompare(a.name ?? '');
+            if (reportSortField === 'broker')
+                return reportSortDir === 'asc'
+                    ? (a.broker ?? '').localeCompare(b.broker ?? '')
+                    : (b.broker ?? '').localeCompare(a.broker ?? '');
+            const av = getVal(a);
+            const bv = getVal(b);
+            return reportSortDir === 'asc' ? av - bv : bv - av;
+        });
+    }, [portfolioHoldings, reportSortField, reportSortDir]);
+
+    return {
+        reportSortField, reportSortDir, handleReportSort,
+        brokerPieData, profitBarData, maxAbsRate,
+        brokerConcentration, stockConcentration, sortedHoldings,
+    };
+}

src/pages/stock/hooks/useSellHistory.js

@@ -0,0 +1,131 @@
+import { useState, useCallback } from 'react';
+import { getSellHistory, addSellHistory, updateSellHistory, deleteSellHistory } from '../../../api';
+import { emptySellForm, toLocalDatetimeValue } from '../stockUtils';
+
+export default function useSellHistory() {
+    const [sellHistory, setSellHistory] = useState([]);
+    const [sellHistoryLoading, setSellHistoryLoading] = useState(false);
+    const [sellHistoryBroker, setSellHistoryBroker] = useState('ALL');
+    const [sellHistoryPeriod, setSellHistoryPeriod] = useState('3M');
+
+    const [sellDrawerOpen, setSellDrawerOpen] = useState(false);
+
+    const [sellFormOpen, setSellFormOpen] = useState(false);
+    const [sellEditId, setSellEditId] = useState(null);
+    const [sellForm, setSellForm] = useState(emptySellForm());
+    const [sellFormSaving, setSellFormSaving] = useState(false);
+    const [sellFormError, setSellFormError] = useState('');
+
+    const loadSellHistory = useCallback(async () => {
+        setSellHistoryLoading(true);
+        try {
+            const data = await getSellHistory();
+            setSellHistory(data?.records ?? (Array.isArray(data) ? data : []));
+        } catch {
+            /* 백엔드 미구현 시 빈 배열 유지 */
+        } finally {
+            setSellHistoryLoading(false);
+        }
+    }, []);
+
+    /** 매도 후 실현손익 기록 추가 (usePortfolio.handleSell에서 호출) */
+    const addSellRecord = async (record) => {
+        try {
+            const saved = await addSellHistory(record);
+            setSellHistory((prev) => [saved ?? record, ...prev]);
+        } catch {
+            setSellHistory((prev) => [{ ...record, id: Date.now() }, ...prev]);
+        }
+    };
+
+    const handleDeleteSellRecord = async (id) => {
+        setSellHistory((prev) => prev.filter((r) => r.id !== id));
+        try {
+            await deleteSellHistory(id);
+        } catch {
+            loadSellHistory();
+        }
+    };
+
+    const handleSellFormOpen = () => {
+        setSellEditId(null);
+        setSellForm(emptySellForm());
+        setSellFormError('');
+        setSellFormOpen(true);
+    };
+
+    const handleSellEditStart = (record) => {
+        setSellEditId(record.id);
+        setSellForm({
+            broker: record.broker ?? '',
+            ticker: record.ticker ?? '',
+            name: record.name ?? '',
+            quantity: String(record.quantity ?? ''),
+            avg_price: String(record.avg_price ?? ''),
+            sell_price: String(record.sell_price ?? ''),
+            commission: String(record.commission ?? ''),
+            sold_at: toLocalDatetimeValue(record.sold_at),
+        });
+        setSellFormError('');
+        setSellFormOpen(true);
+    };
+
+    const handleSellFormClose = () => {
+        setSellFormOpen(false);
+        setSellEditId(null);
+        setSellFormError('');
+    };
+
+    const handleSellFormSubmit = async (e) => {
+        e.preventDefault();
+        setSellFormSaving(true);
+        setSellFormError('');
+
+        const qty = Number(sellForm.quantity);
+        const avgPrice = Number(sellForm.avg_price);
+        const sellPrice = Number(sellForm.sell_price);
+        const commission = Number(sellForm.commission) || 0;
+        const buyAmount = avgPrice * qty;
+        const sellAmount = sellPrice * qty;
+        const realizedProfit = sellAmount - buyAmount - commission;
+        const realizedRate = buyAmount > 0 ? (realizedProfit / buyAmount) * 100 : 0;
+
+        const payload = {
+            broker: sellForm.broker.trim(),
+            ticker: sellForm.ticker.trim(),
+            name: sellForm.name.trim(),
+            quantity: qty, avg_price: avgPrice, sell_price: sellPrice, commission,
+            buy_amount: buyAmount, sell_amount: sellAmount,
+            realized_profit: realizedProfit, realized_rate: realizedRate,
+            sold_at: sellForm.sold_at ? new Date(sellForm.sold_at).toISOString() : new Date().toISOString(),
+        };
+
+        try {
+            if (sellEditId != null) {
+                const updated = await updateSellHistory(sellEditId, payload);
+                setSellHistory((prev) =>
+                    prev.map((r) => (r.id === sellEditId ? (updated ?? { ...payload, id: sellEditId }) : r))
+                );
+            } else {
+                const saved = await addSellHistory(payload);
+                setSellHistory((prev) => [saved ?? { ...payload, id: Date.now() }, ...prev]);
+            }
+            handleSellFormClose();
+        } catch (err) {
+            setSellFormError(err?.message ?? String(err));
+        } finally {
+            setSellFormSaving(false);
+        }
+    };
+
+    return {
+        sellHistory, sellHistoryLoading, loadSellHistory, addSellRecord,
+        sellHistoryBroker, setSellHistoryBroker,
+        sellHistoryPeriod, setSellHistoryPeriod,
+        sellDrawerOpen, setSellDrawerOpen,
+        sellFormOpen, sellEditId, sellForm, setSellForm,
+        sellFormSaving, sellFormError,
+        handleDeleteSellRecord,
+        handleSellFormOpen, handleSellEditStart, handleSellFormClose, handleSellFormSubmit,
+    };
+}

src/pages/stock/stockUtils.js

@@ -0,0 +1,125 @@
+/* ── helpers ─────────────────────────────────────────────────────── */
+
+export const formatNumber = (value) => {
+    if (value === null || value === undefined || value === '') return '-';
+    const numeric = Number(value);
+    if (Number.isNaN(numeric)) return value;
+    return new Intl.NumberFormat('ko-KR').format(numeric);
+};
+
+export const formatPercent = (value) => {
+    if (value === null || value === undefined || value === '') return '-';
+    if (typeof value === 'string' && value.includes('%')) return value;
+    const numeric = Number(value);
+    if (Number.isNaN(numeric)) return value;
+    return `${numeric >= 0 ? '+' : ''}${numeric.toFixed(2)}%`;
+};
+
+export const pickFirst = (...values) =>
+    values.find((value) => value !== undefined && value !== null && value !== '');
+
+export const getQty = (item) =>
+    pickFirst(item?.qty, item?.quantity, item?.holding, item?.hold_qty);
+
+export const getBuyPrice = (item) =>
+    pickFirst(
+        item?.buy_price,
+        item?.avg_price,
+        item?.avg,
+        item?.purchase_price,
+        item?.buyPrice,
+        item?.price
+    );
+
+export const getCurrentPrice = (item) =>
+    pickFirst(
+        item?.current_price,
+        item?.current,
+        item?.cur_price,
+        item?.now_price,
+        item?.market_price
+    );
+
+export const getProfitRate = (item) =>
+    pickFirst(
+        item?.profit_rate,
+        item?.profitRate,
+        item?.profit_pct,
+        item?.profitPercent,
+        item?.pnl_rate,
+        item?.return_rate,
+        item?.yield
+    );
+
+export const getProfitLoss = (item) =>
+    pickFirst(item?.profit_loss, item?.pnl, item?.profitLoss);
+
+export const toNumeric = (value) => {
+    if (value === null || value === undefined || value === '') return null;
+    const numeric = Number(String(value).replace(/[^0-9.-]/g, ''));
+    return Number.isNaN(numeric) ? null : numeric;
+};
+
+/* ── Chart colors ──────────────────────────────────────────────── */
+
+export const CHART_COLORS = ['#818cf8', '#fbbf24', '#34d399', '#f472b6', '#fb923c', '#a78bfa', '#38bdf8', '#4ade80'];
+
+export const profitColorClass = (numericValue) => {
+    if (numericValue > 0) return 'is-up';
+    if (numericValue < 0) return 'is-down';
+    if (numericValue === 0) return 'is-flat';
+    return '';
+};
+
+export const getVixLabel = (vix) => {
+    if (vix < 12) return '극히 낮음 (안일 주의)';
+    if (vix < 20) return '정상 (안정적)';
+    if (vix < 30) return '주의 (불확실성 증가)';
+    if (vix < 40) return '높음 (극도의 공포)';
+    return '극단 (패닉)';
+};
+
+export const getFgLabel = (score) => {
+    if (score <= 25) return '극단적 공포';
+    if (score <= 45) return '공포';
+    if (score <= 55) return '중립';
+    if (score <= 75) return '탐욕';
+    return '극단적 탐욕';
+};
+
+/* ── empty portfolio form ────────────────────────────────────────── */
+
+export const emptyPortfolioForm = {
+    broker: '',
+    ticker: '',
+    name: '',
+    quantity: '',
+    avg_price: '',
+};
+
+/* ── empty sell-history form ─────────────────────────────────────── */
+
+export const toLocalDatetimeValue = (isoStr) => {
+    if (!isoStr) return '';
+    const d = new Date(isoStr);
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+};
+
+export const emptySellForm = () => ({
+    broker: '',
+    ticker: '',
+    name: '',
+    quantity: '',
+    avg_price: '',
+    sell_price: '',
+    commission: '',
+    sold_at: toLocalDatetimeValue(new Date().toISOString()),
+});
+
+/* ── TAB IDs ─────────────────────────────────────────────────────── */
+
+export const TAB_PORTFOLIO = 'portfolio';
+export const TAB_AI = 'ai';
+export const TAB_REPORT = 'report';
+export const TAB_ADVISOR = 'advisor';

src/routes.jsx

@@ -6,8 +6,10 @@ import {
     IconStock,
     IconBuilding,
     IconTravel,
+    IconMusic,
     IconLab,
     IconTodo,
+    IconBlogMarketing,
 } from './components/Icons';
 
 const Home = lazy(() => import('./pages/home/Home'));
@@ -16,13 +18,13 @@ const Lotto = lazy(() => import('./pages/lotto/Lotto'));
 const Travel = lazy(() => import('./pages/travel/Travel'));
 const Stock = lazy(() => import('./pages/stock/Stock'));
 const StockTrade = lazy(() => import('./pages/stock/StockTrade'));
-const RealEstate = lazy(() => import('./pages/realestate/RealEstate'));
 const Subscription = lazy(() => import('./pages/subscription/Subscription'));
 const EffectLab = lazy(() => import('./pages/effect-lab/EffectLab'));
 const SwordStream = lazy(() => import('./pages/effect-lab/SwordStream'));
 const DayCalc = lazy(() => import('./pages/effect-lab/DayCalc'));
 const Todo = lazy(() => import('./pages/todo/Todo'));
 const MusicStudio = lazy(() => import('./pages/music/MusicStudio'));
+const BlogMarketing = lazy(() => import('./pages/blog-marketing/BlogMarketing'));
 
 export const navLinks = [
     {
@@ -66,7 +68,7 @@ export const navLinks = [
         label: 'Realestate',
         path: '/realestate',
         subtitle: '부동산',
-        description: '청약 자격 비교, 일정 관리, 관심 단지 정보를 관리하는 공간',
+        description: '청약 공고 자동 수집, 매칭, 프로필 기반 자격 분석',
         icon: <IconBuilding />,
         accent: '#f43f5e',
     },
@@ -79,6 +81,24 @@ export const navLinks = [
         icon: <IconTravel />,
         accent: '#fb923c',
     },
+    {
+        id: 'music',
+        label: 'Music',
+        path: '/music',
+        subtitle: 'SONIC FORGE',
+        description: 'AI로 세상에 하나뿐인 음악을 만드는 스튜디오',
+        icon: <IconMusic />,
+        accent: '#f5a623',
+    },
+    {
+        id: 'blog-lab',
+        label: 'Blog Lab',
+        path: '/blog-lab',
+        subtitle: 'MONETIZE',
+        description: 'AI 블로그 마케팅으로 수익을 만드는 연구소',
+        icon: <IconBlogMarketing />,
+        accent: '#10b981',
+    },
     {
         id: 'lab',
         label: 'Lab',
@@ -97,6 +117,15 @@ export const navLinks = [
         icon: <IconTodo />,
         accent: '#f472b6',
     },
+    {
+        id: 'agent-office',
+        label: 'Agent Office',
+        path: '/agent-office',
+        subtitle: 'AI LAB',
+        description: 'AI 에이전트 사무실',
+        icon: <span style={{fontSize:'1.2em'}}>🏢</span>,
+        accent: '#8b5cf6',
+    },
 ];
 
 export const appRoutes = [
@@ -124,10 +153,6 @@ export const appRoutes = [
         path: 'realestate',
         element: <Subscription />,
     },
-    {
-        path: 'realestate/property',
-        element: <RealEstate />,
-    },
     {
         path: 'travel',
         element: <Travel />,
@@ -145,11 +170,19 @@ export const appRoutes = [
         element: <DayCalc />,
     },
     {
-        path: 'lab/music',
+        path: 'music',
         element: <MusicStudio />,
     },
+    {
+        path: 'blog-lab',
+        element: <BlogMarketing />,
+    },
     {
         path: 'todo',
         element: <Todo />,
     },
+    {
+        path: 'agent-office',
+        lazy: () => import('./pages/agent-office/AgentOffice'),
+    },
 ];