Compare commits
15 Commits
feat/agent
...
188a714372
| Author | SHA1 | Date | |
|---|---|---|---|
| 188a714372 | |||
| 064c983ca1 | |||
| bf1c23e66a | |||
| a922dd12c0 | |||
| 1344967118 | |||
| 2840ad7df6 | |||
| ad0a123d0f | |||
| 18d2cd5a51 | |||
| 104a34912f | |||
| be46da0a1f | |||
| 6728b2269e | |||
| cfc45fc43f | |||
| a165d6271f | |||
| deb285695a | |||
| 25715a2198 |
27
CLAUDE.md
27
CLAUDE.md
@@ -222,7 +222,32 @@ handleGenerate()
|
||||
|
||||
## Lotto 고도화 (`/lotto`)
|
||||
|
||||
`src/pages/lotto/Functions.jsx`에 4개 신규 섹션 추가:
|
||||
`src/pages/lotto/Functions.jsx`는 3탭 구조 (`브리핑 / 분석·통계 / 구매·성과`)로 리팩토링되었습니다.
|
||||
|
||||
| 탭 | 파일 | 설명 |
|
||||
|----|------|------|
|
||||
| 이번 주 브리핑 | `tabs/BriefingTab.jsx` | AI 큐레이터 브리핑 표시 (`components/briefing/` 하위 컴포넌트) |
|
||||
| 분석·통계 | `tabs/AnalysisTab.jsx` | 시뮬레이션 추천·통계·ReportPanel·수동 추천 |
|
||||
| 구매·성과 | `tabs/PurchaseTab.jsx` | 구매 내역 CRUD + 성과 통계 |
|
||||
|
||||
### 브리핑 전용 컴포넌트 (`components/briefing/`)
|
||||
|
||||
| 컴포넌트 | 설명 |
|
||||
|----------|------|
|
||||
| `BriefingTab.jsx` | 탭 루트, 브리핑 로드 + 트리거 |
|
||||
| `BriefingHeader.jsx` | 회차·생성일시 헤더 |
|
||||
| `BriefingSummary.jsx` | 내러티브 요약 표시 |
|
||||
| `PickSetCard.jsx` | 번호 세트 1장 카드 |
|
||||
| `BriefingEmpty.jsx` | 브리핑 없을 때 빈 상태 |
|
||||
| `CuratorUsageFooter.jsx` | 토큰·비용 집계 푸터 |
|
||||
|
||||
### 신규 api.js 헬퍼
|
||||
|
||||
- `getLatestBriefing()` — `GET /api/lotto/briefing/latest`
|
||||
- `getCuratorUsage(days)` — `GET /api/lotto/curator/usage?days=N`
|
||||
- `triggerLottoCurate()` — `POST /api/agent-office/command` (lotto_agent curate 명령)
|
||||
|
||||
### 기존 섹션 (AnalysisTab 내)
|
||||
|
||||
| 섹션 | API | 설명 |
|
||||
|------|-----|------|
|
||||
|
||||
27
src/api.js
27
src/api.js
@@ -598,4 +598,31 @@ export const getPendingTasks = () => apiGet('/api/agent-office/tasks
|
||||
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');
|
||||
export const getActivityFeed = (limit=50, offset=0) => apiGet(`/api/agent-office/activity?limit=${limit}&offset=${offset}`);
|
||||
export const getAgentTokenUsage = (id, days=1) => apiGet(`/api/agent-office/agents/${id}/token-usage?days=${days}`);
|
||||
|
||||
// --- Lotto Briefing ---
|
||||
|
||||
export async function getLatestBriefing() {
|
||||
const r = await fetch('/api/lotto/briefing/latest');
|
||||
if (r.status === 404) return null;
|
||||
if (!r.ok) throw new Error(`briefing fetch failed: ${r.status}`);
|
||||
return r.json();
|
||||
}
|
||||
|
||||
export async function getCuratorUsage(days = 30) {
|
||||
const r = await fetch(`/api/lotto/curator/usage?days=${days}`);
|
||||
if (!r.ok) throw new Error(`usage fetch failed: ${r.status}`);
|
||||
return r.json();
|
||||
}
|
||||
|
||||
export async function triggerLottoCurate() {
|
||||
const r = await fetch('/api/agent-office/command', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ agent: 'lotto', action: 'curate_now', params: {} }),
|
||||
});
|
||||
if (!r.ok) throw new Error(`curate trigger failed: ${r.status}`);
|
||||
return r.json();
|
||||
}
|
||||
|
||||
|
||||
@@ -11,13 +11,14 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 20px;
|
||||
padding: 8px 20px;
|
||||
background: #1a1a2e;
|
||||
border-bottom: 1px solid #2a2a4a;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ao-title {
|
||||
font-size: 1.4rem;
|
||||
font-size: 1.2rem;
|
||||
color: #8b5cf6;
|
||||
margin: 0;
|
||||
letter-spacing: 2px;
|
||||
@@ -27,7 +28,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
@@ -39,152 +40,245 @@
|
||||
.ao-dot--on { background: #34d399; }
|
||||
.ao-dot--off { background: #f87171; }
|
||||
|
||||
.ao-workspace {
|
||||
/* Dashboard */
|
||||
.ao-dashboard {
|
||||
display: flex;
|
||||
gap: 1px;
|
||||
background: #2a2a4a;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Agent Column */
|
||||
.ao-col {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #0d0d1a;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ao-col-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border-top: 3px solid;
|
||||
background: #1a1a2e;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ao-col-chevron {
|
||||
display: none;
|
||||
color: #666;
|
||||
font-size: 0.8rem;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.ao-col-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ao-col-name {
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.ao-col-state {
|
||||
font-size: 0.7rem;
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
text-transform: uppercase;
|
||||
margin-left: auto;
|
||||
}
|
||||
.ao-col-state--idle { background: #333; color: #888; }
|
||||
.ao-col-state--working { background: #3730a3; color: #a5b4fc; }
|
||||
.ao-col-state--waiting { background: #92400e; color: #fbbf24; }
|
||||
.ao-col-state--reporting { background: #065f46; color: #34d399; }
|
||||
.ao-col-state--break { background: #4c1d95; color: #c4b5fd; }
|
||||
.ao-col-state--offline { background: #1f1f1f; color: #555; }
|
||||
|
||||
.ao-col-tokens {
|
||||
font-size: 0.7rem;
|
||||
color: #8b5cf6;
|
||||
background: rgba(139, 92, 246, 0.12);
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
margin-left: 6px;
|
||||
cursor: help;
|
||||
font-family: 'Courier New', monospace;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ao-col-badge {
|
||||
background: #f43f5e;
|
||||
color: #fff;
|
||||
font-size: 0.65rem;
|
||||
padding: 1px 5px;
|
||||
border-radius: 6px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ao-col-detail {
|
||||
padding: 6px 12px;
|
||||
font-size: 0.8rem;
|
||||
color: #a78bfa;
|
||||
background: rgba(139, 92, 246, 0.05);
|
||||
border-bottom: 1px solid #2a2a4a;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ao-col-approval {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(251, 191, 36, 0.08);
|
||||
border-bottom: 1px solid #2a2a4a;
|
||||
font-size: 0.8rem;
|
||||
color: #fbbf24;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ao-col-commands {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #1a1a2e;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ao-col-input {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border-bottom: 1px solid #1a1a2e;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ao-col-tasks {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.ao-col-tasks-title {
|
||||
padding: 4px 12px;
|
||||
font-size: 0.7rem;
|
||||
color: #555;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.ao-col-empty {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
color: #444;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.ao-col-task {
|
||||
padding: 6px 12px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.03);
|
||||
}
|
||||
|
||||
.ao-col-task-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ao-col-task-type {
|
||||
font-size: 0.8rem;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.ao-col-task-badge {
|
||||
font-size: 0.65rem;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ao-col-task-time {
|
||||
font-size: 0.7rem;
|
||||
color: #555;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.ao-col-task-detail {
|
||||
margin-top: 4px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.ao-col-task-detail summary {
|
||||
cursor: pointer;
|
||||
color: #8b5cf6;
|
||||
}
|
||||
.ao-col-task-detail pre {
|
||||
color: #888;
|
||||
white-space: pre-wrap;
|
||||
margin: 4px 0 0;
|
||||
max-height: 120px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Command Column */
|
||||
.ao-cmd-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #1a1a2e;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ao-cmd-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.ao-cmd-select {
|
||||
flex: 1;
|
||||
padding: 6px 8px;
|
||||
background: #111;
|
||||
border: 1px solid #333;
|
||||
border-radius: 6px;
|
||||
color: #e0e0e0;
|
||||
font-size: 0.8rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
.ao-cmd-select:focus { border-color: #8b5cf6; outline: none; }
|
||||
|
||||
.ao-cmd-send {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Office Section */
|
||||
.ao-office-section {
|
||||
height: 280px;
|
||||
flex-shrink: 0;
|
||||
border-top: 2px solid #2a2a4a;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Shared */
|
||||
.ao-btn {
|
||||
padding: 6px 16px;
|
||||
padding: 4px 12px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
@@ -195,137 +289,100 @@
|
||||
.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;
|
||||
padding: 4px 10px;
|
||||
border: 1px solid #333;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #ccc;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.75rem;
|
||||
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;
|
||||
padding: 6px 10px;
|
||||
background: #111;
|
||||
border: 1px solid #333;
|
||||
border-radius: 6px;
|
||||
color: #e0e0e0;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.8rem;
|
||||
font-family: inherit;
|
||||
min-width: 0;
|
||||
}
|
||||
.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 {
|
||||
.ao-doc-tg-status {
|
||||
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;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.ao-toolbar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px 20px;
|
||||
background: #1a1a2e;
|
||||
border-top: 1px solid #2a2a4a;
|
||||
}
|
||||
/* Mobile: vertical stack + accordion */
|
||||
@media (max-width: 768px) {
|
||||
.ao-page {
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.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-dashboard {
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
overflow: visible;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.ao-col {
|
||||
flex: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.ao-col-header {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.ao-col-chevron {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.ao-col--collapsed .ao-col-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ao-col--attention {
|
||||
box-shadow: inset 3px 0 0 #fbbf24;
|
||||
}
|
||||
|
||||
.ao-col-tasks {
|
||||
max-height: 260px;
|
||||
}
|
||||
|
||||
.ao-office-section {
|
||||
height: 140px;
|
||||
order: -1;
|
||||
border-top: none;
|
||||
border-bottom: 2px solid #2a2a4a;
|
||||
}
|
||||
|
||||
.ao-title {
|
||||
font-size: 1rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.ao-header {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.ao-col-commands {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.ao-cmd-btn,
|
||||
.ao-btn {
|
||||
padding: 6px 12px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
.ao-tool-btn:hover { border-color: #8b5cf6; color: #e0e0e0; }
|
||||
|
||||
@@ -1,22 +1,31 @@
|
||||
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 AgentColumn from './components/AgentColumn';
|
||||
import CommandColumn from './components/CommandColumn';
|
||||
import './AgentOffice.css';
|
||||
|
||||
const AGENT_META = {
|
||||
stock: { name: '주식 트레이더', color: '#4488cc' },
|
||||
music: { name: '음악 프로듀서', color: '#44aa88' },
|
||||
blog: { name: '블로그 마케터', color: '#d97706' },
|
||||
realestate: { name: '청약 애널리스트', color: '#c026d3' },
|
||||
};
|
||||
|
||||
const AGENT_IDS = ['stock', 'music', 'blog', 'realestate'];
|
||||
|
||||
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 { agents, pendingTasks, connected, notifications, sendCommand, sendApproval, clearNotifications } = useAgentManager();
|
||||
|
||||
const handleAgentClick = useCallback((agentId) => {
|
||||
setSelectedAgent(prev => prev === agentId ? null : agentId);
|
||||
}, []);
|
||||
clearNotifications(agentId);
|
||||
}, [clearNotifications]);
|
||||
|
||||
const { updateAgentState, moveAgent } = useOfficeCanvas(canvasContainerRef, handleAgentClick);
|
||||
const handleCeoClick = useCallback(() => {}, []);
|
||||
|
||||
const { updateAgentState, setAgentNotification, setCeoDocBadge } = useOfficeCanvas(canvasContainerRef, handleAgentClick, handleCeoClick);
|
||||
|
||||
useEffect(() => {
|
||||
for (const [id, info] of Object.entries(agents)) {
|
||||
@@ -24,6 +33,20 @@ export function Component() {
|
||||
}
|
||||
}, [agents, updateAgentState]);
|
||||
|
||||
useEffect(() => {
|
||||
for (const [id, count] of Object.entries(notifications)) {
|
||||
setAgentNotification(id, count);
|
||||
}
|
||||
for (const id of Object.keys(agents)) {
|
||||
if (!notifications[id]) setAgentNotification(id, 0);
|
||||
}
|
||||
}, [notifications, agents, setAgentNotification]);
|
||||
|
||||
useEffect(() => {
|
||||
const total = Object.values(notifications).reduce((s, n) => s + n, 0);
|
||||
setCeoDocBadge(total);
|
||||
}, [notifications, setCeoDocBadge]);
|
||||
|
||||
return (
|
||||
<div className="ao-page">
|
||||
<div className="ao-header">
|
||||
@@ -34,51 +57,27 @@ export function Component() {
|
||||
</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]}
|
||||
<div className="ao-dashboard">
|
||||
{AGENT_IDS.map(id => (
|
||||
<AgentColumn
|
||||
key={id}
|
||||
agentId={id}
|
||||
meta={AGENT_META[id]}
|
||||
agentState={agents[id]}
|
||||
notification={notifications[id] || 0}
|
||||
onCommand={sendCommand}
|
||||
onApproval={sendApproval}
|
||||
onClose={() => setSelectedAgent(null)}
|
||||
onClearNotification={() => clearNotifications(id)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showHistory && (
|
||||
<TaskHistory
|
||||
agentId={showHistory}
|
||||
onClose={() => setShowHistory(null)}
|
||||
/>
|
||||
)}
|
||||
))}
|
||||
<CommandColumn
|
||||
agents={agents}
|
||||
onCommand={sendCommand}
|
||||
/>
|
||||
</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 className="ao-office-section">
|
||||
<div className="ao-canvas-container" ref={canvasContainerRef} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -23,8 +23,8 @@
|
||||
"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": "desk", "x": 12, "y": 1, "label": "Blog"},
|
||||
{"type": "desk", "x": 17, "y": 1, "label": "Realestate"},
|
||||
{"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": "☕"},
|
||||
@@ -33,7 +33,8 @@
|
||||
"waypoints": {
|
||||
"stock_desk": {"x": 2, "y": 2},
|
||||
"music_desk": {"x": 7, "y": 2},
|
||||
"claude_desk": {"x": 12, "y": 2},
|
||||
"blog_desk": {"x": 12, "y": 2},
|
||||
"realestate_desk": {"x": 17, "y": 2},
|
||||
"meeting_table": {"x": 9, "y": 7},
|
||||
"break_room": {"x": 2, "y": 11},
|
||||
"ceo_desk": {"x": 16, "y": 11}
|
||||
|
||||
@@ -6,6 +6,7 @@ export class AgentSprite {
|
||||
this.waypoints = waypoints;
|
||||
this.state = 'idle';
|
||||
this.detail = '';
|
||||
this.notificationCount = 0;
|
||||
|
||||
const deskKey = `${agentId}_desk`;
|
||||
const desk = waypoints[deskKey] || { x: 5, y: 3 };
|
||||
@@ -20,6 +21,10 @@ export class AgentSprite {
|
||||
this._moveSpeed = 0.05;
|
||||
}
|
||||
|
||||
setNotification(count) {
|
||||
this.notificationCount = count;
|
||||
}
|
||||
|
||||
setState(newState, detail = '') {
|
||||
this.state = newState;
|
||||
this.detail = detail;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { drawTileMap } from './TileMap';
|
||||
import { AgentSprite } from './AgentSprite';
|
||||
import { getCharLabel } from './SpriteSheet';
|
||||
import { getCharLabel, drawNotificationBadge } from './SpriteSheet';
|
||||
|
||||
const STATUS_ICONS = {
|
||||
idle: null,
|
||||
@@ -19,8 +19,10 @@ export class OfficeRenderer {
|
||||
this.agents = {};
|
||||
this._animId = null;
|
||||
this._onClick = null;
|
||||
this._onCeoClick = null;
|
||||
this._ceoDocBadge = 0;
|
||||
|
||||
const agentIds = ['stock', 'music'];
|
||||
const agentIds = ['stock', 'music', 'blog', 'realestate'];
|
||||
for (const id of agentIds) {
|
||||
this.agents[id] = new AgentSprite(id, mapData.waypoints);
|
||||
}
|
||||
@@ -56,6 +58,21 @@ export class OfficeRenderer {
|
||||
return id;
|
||||
}
|
||||
}
|
||||
// CEO desk click detection
|
||||
const ceo = this.mapData.waypoints.ceo_desk;
|
||||
if (ceo) {
|
||||
const { scale, offsetX, offsetY, tileSize } = this.renderInfo;
|
||||
const cx = offsetX + ceo.x * tileSize * scale;
|
||||
const cy = offsetY + ceo.y * tileSize * scale;
|
||||
const hitW = 5 * tileSize * scale;
|
||||
const hitH = 2 * tileSize * scale;
|
||||
if (canvasX >= cx - tileSize * scale && canvasY >= cy - tileSize * scale &&
|
||||
canvasX <= cx + hitW && canvasY <= cy + hitH) {
|
||||
if (this._onCeoClick) this._onCeoClick();
|
||||
return 'ceo_desk';
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -76,6 +93,19 @@ export class OfficeRenderer {
|
||||
}
|
||||
}
|
||||
|
||||
setOnCeoClick(handler) {
|
||||
this._onCeoClick = handler;
|
||||
}
|
||||
|
||||
setCeoDocBadge(count) {
|
||||
this._ceoDocBadge = count;
|
||||
}
|
||||
|
||||
setAgentNotification(agentId, count) {
|
||||
const sprite = this.agents[agentId];
|
||||
if (sprite) sprite.setNotification(count);
|
||||
}
|
||||
|
||||
_loop(timestamp) {
|
||||
const { ctx, canvas, mapData } = this;
|
||||
|
||||
@@ -95,6 +125,9 @@ export class OfficeRenderer {
|
||||
this._drawOverlay(ctx, sprite, id);
|
||||
}
|
||||
|
||||
// CEO desk document icon
|
||||
this._drawCeoDoc(ctx);
|
||||
|
||||
this._animId = requestAnimationFrame(this._loop);
|
||||
}
|
||||
|
||||
@@ -111,6 +144,11 @@ export class OfficeRenderer {
|
||||
ctx.fillText(icon, cx, cy - 15 * scale);
|
||||
}
|
||||
|
||||
// Notification badge (separate from status icon)
|
||||
if (sprite.notificationCount > 0) {
|
||||
drawNotificationBadge(ctx, cx, cy - 15 * scale, sprite.notificationCount, scale * 1.5);
|
||||
}
|
||||
|
||||
ctx.fillStyle = 'rgba(255,255,255,0.7)';
|
||||
ctx.font = `${8 * scale}px monospace`;
|
||||
ctx.textAlign = 'center';
|
||||
@@ -126,4 +164,48 @@ export class OfficeRenderer {
|
||||
ctx.fillText(sprite.detail, cx, bubbleY);
|
||||
}
|
||||
}
|
||||
|
||||
_drawCeoDoc(ctx) {
|
||||
if (!this.renderInfo) return;
|
||||
const ceo = this.mapData.waypoints.ceo_desk;
|
||||
if (!ceo) return;
|
||||
|
||||
const { scale, offsetX, offsetY, tileSize } = this.renderInfo;
|
||||
const dx = offsetX + (ceo.x - 1) * tileSize * scale;
|
||||
const dy = offsetY + (ceo.y - 1) * tileSize * scale;
|
||||
const docW = 12 * scale;
|
||||
const docH = 16 * scale;
|
||||
|
||||
// Paper
|
||||
ctx.fillStyle = '#e8e0d0';
|
||||
ctx.fillRect(dx, dy, docW, docH);
|
||||
// Lines on paper
|
||||
ctx.fillStyle = '#bbb';
|
||||
for (let i = 0; i < 4; i++) {
|
||||
ctx.fillRect(dx + 2 * scale, dy + (3 + i * 3) * scale, 8 * scale, 1);
|
||||
}
|
||||
// Folded corner
|
||||
ctx.fillStyle = '#d0c8b8';
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(dx + docW - 3 * scale, dy);
|
||||
ctx.lineTo(dx + docW, dy + 3 * scale);
|
||||
ctx.lineTo(dx + docW - 3 * scale, dy + 3 * scale);
|
||||
ctx.fill();
|
||||
|
||||
// Badge on document
|
||||
if (this._ceoDocBadge > 0) {
|
||||
const bx = dx + docW;
|
||||
const by = dy;
|
||||
const r = 4 * scale;
|
||||
ctx.beginPath();
|
||||
ctx.arc(bx, by, r, 0, Math.PI * 2);
|
||||
ctx.fillStyle = '#f43f5e';
|
||||
ctx.fill();
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.font = `bold ${5 * scale}px monospace`;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText(this._ceoDocBadge > 9 ? '9+' : String(this._ceoDocBadge), bx, by);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
const PIXEL_CHARS = {
|
||||
stock: { body: '#4488cc', accent: '#cc4444', label: '주식', hair: '#332222' },
|
||||
music: { body: '#44aa88', accent: '#ffaa00', label: '음악', hair: '#443322' },
|
||||
blog: { body: '#d97706', accent: '#fde68a', label: '블로그', hair: '#3b2a1a' },
|
||||
realestate: { body: '#c026d3', accent: '#86efac', label: '청약', hair: '#2a2a3a' },
|
||||
claude: { body: '#8855cc', accent: '#cc88ff', label: 'Claude', hair: '#554466' },
|
||||
};
|
||||
|
||||
@@ -57,6 +59,14 @@ export function drawAgent(ctx, agentId, x, y, state, frameIndex, scale = 2) {
|
||||
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 === 'blog') {
|
||||
// 노트북 액센트 (무릎 위)
|
||||
ctx.fillRect(-3 * s, 6 * s, 6 * s, 1 * s);
|
||||
ctx.fillRect(-3 * s, 7 * s, 6 * s, 2 * s);
|
||||
} else if (agentId === 'realestate') {
|
||||
// 서류 가방 액센트 (손 옆)
|
||||
ctx.fillRect(3 * s, 4 * s, 2 * s, 3 * s);
|
||||
ctx.fillRect(3 * s, 3 * s, 2 * 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);
|
||||
@@ -87,3 +97,25 @@ export function getAnimSpeed(state) {
|
||||
export function getCharLabel(agentId) {
|
||||
return (PIXEL_CHARS[agentId] || {}).label || agentId;
|
||||
}
|
||||
|
||||
export function drawNotificationBadge(ctx, x, y, count, scale = 2) {
|
||||
const s = scale;
|
||||
const badgeX = x + 5 * s;
|
||||
const badgeY = y - 8 * s;
|
||||
const radius = 5 * s;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(badgeX, badgeY, radius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = '#f43f5e';
|
||||
ctx.fill();
|
||||
|
||||
ctx.strokeStyle = '#fff';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.stroke();
|
||||
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.font = `bold ${7 * s}px monospace`;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText('!', badgeX, badgeY);
|
||||
}
|
||||
|
||||
203
src/pages/agent-office/components/AgentColumn.jsx
Normal file
203
src/pages/agent-office/components/AgentColumn.jsx
Normal file
@@ -0,0 +1,203 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { getAgentTasks, getAgentTokenUsage } from '../../../api';
|
||||
|
||||
const STATUS_BADGE = {
|
||||
pending: { label: '대기', bg: '#92400e' },
|
||||
approved: { label: '승인됨', bg: '#1e40af' },
|
||||
working: { label: '진행중', bg: '#3730a3' },
|
||||
succeeded: { label: '완료', bg: '#065f46' },
|
||||
failed: { label: '실패', bg: '#7f1d1d' },
|
||||
rejected: { label: '거절됨', bg: '#9a3412' },
|
||||
};
|
||||
|
||||
const AGENT_COMMANDS = {
|
||||
stock: [
|
||||
{ action: 'fetch_news', label: '뉴스 수집', icon: '📰' },
|
||||
{ action: 'list_alerts', label: '알람 목록', icon: '🔔' },
|
||||
{ action: 'test_telegram', label: 'TG 테스트', icon: '📨' },
|
||||
],
|
||||
music: [
|
||||
{ action: 'compose', label: '작곡 시작', icon: '🎵', needsInput: true },
|
||||
{ action: 'credits', label: '크레딧', icon: '💳' },
|
||||
],
|
||||
blog: [
|
||||
{ action: 'research', label: '키워드 리서치', icon: '🔍', needsInput: true },
|
||||
{ action: 'list_trend_keywords', label: '트렌드 목록', icon: '📋' },
|
||||
],
|
||||
realestate: [
|
||||
{ action: 'fetch_matches', label: '매칭 리포트', icon: '🏢' },
|
||||
{ action: 'dashboard', label: '대시보드', icon: '📊' },
|
||||
],
|
||||
};
|
||||
|
||||
const AgentColumn = ({ agentId, meta, agentState, notification, onCommand, onApproval, onClearNotification }) => {
|
||||
const [tasks, setTasks] = useState([]);
|
||||
const [input, setInput] = useState('');
|
||||
const [activeCommand, setActiveCommand] = useState(null);
|
||||
const [tokenUsage, setTokenUsage] = useState(null);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const state = agentState || { state: 'offline' };
|
||||
const commands = AGENT_COMMANDS[agentId] || [];
|
||||
const needsAttention = state.state === 'waiting' || notification > 0;
|
||||
const isOpen = expanded || needsAttention;
|
||||
|
||||
useEffect(() => {
|
||||
getAgentTasks(agentId, 10)
|
||||
.then(d => setTasks(d.tasks || []))
|
||||
.catch(() => setTasks([]));
|
||||
}, [agentId]);
|
||||
|
||||
// Refresh tasks when state changes to idle (task likely completed)
|
||||
useEffect(() => {
|
||||
if (state.state === 'idle' && state.detail) {
|
||||
getAgentTasks(agentId, 10)
|
||||
.then(d => setTasks(d.tasks || []))
|
||||
.catch(() => {});
|
||||
}
|
||||
}, [agentId, state.state, state.detail]);
|
||||
|
||||
// 오늘자 AI 토큰 사용량 폴링 (30초 간격 + 작업 완료 시 즉시 갱신)
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
const fetchUsage = () => {
|
||||
getAgentTokenUsage(agentId, 1)
|
||||
.then(d => { if (!cancelled) setTokenUsage(d); })
|
||||
.catch(() => {});
|
||||
};
|
||||
fetchUsage();
|
||||
const interval = setInterval(fetchUsage, 30000);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
clearInterval(interval);
|
||||
};
|
||||
}, [agentId, state.state, state.detail]);
|
||||
|
||||
const handleQuickAction = (cmd) => {
|
||||
if (cmd.needsInput) {
|
||||
setActiveCommand(cmd.action);
|
||||
} else {
|
||||
onCommand(agentId, cmd.action, {});
|
||||
}
|
||||
onClearNotification();
|
||||
};
|
||||
|
||||
const handleSend = () => {
|
||||
if (!input.trim() || !activeCommand) return;
|
||||
const params = activeCommand === 'compose' ? { prompt: input }
|
||||
: activeCommand === 'research' ? { keyword: input }
|
||||
: { message: input };
|
||||
onCommand(agentId, activeCommand, params);
|
||||
setInput('');
|
||||
setActiveCommand(null);
|
||||
};
|
||||
|
||||
const formatTaskTime = (task) => {
|
||||
const iso = task.completed_at || task.created_at;
|
||||
if (!iso) return '';
|
||||
const d = new Date(iso);
|
||||
if (isNaN(d.getTime())) return '';
|
||||
const now = new Date();
|
||||
const pad = (n) => String(n).padStart(2, '0');
|
||||
const hm = `${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||
const sameDay = d.toDateString() === now.toDateString();
|
||||
const yesterday = new Date(now); yesterday.setDate(now.getDate() - 1);
|
||||
const isYesterday = d.toDateString() === yesterday.toDateString();
|
||||
if (sameDay) return `오늘 ${hm}`;
|
||||
if (isYesterday) return `어제 ${hm}`;
|
||||
return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`;
|
||||
};
|
||||
|
||||
const handleHeaderClick = (e) => {
|
||||
e.stopPropagation();
|
||||
setExpanded(v => !v);
|
||||
onClearNotification();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`ao-col ${isOpen ? 'ao-col--open' : 'ao-col--collapsed'} ${needsAttention ? 'ao-col--attention' : ''}`} onClick={onClearNotification}>
|
||||
<div className="ao-col-header" style={{ borderColor: meta.color }} onClick={handleHeaderClick}>
|
||||
<span className="ao-col-name" style={{ color: meta.color }}>{meta.name}</span>
|
||||
{tokenUsage && tokenUsage.total_tokens > 0 && (
|
||||
<span
|
||||
className="ao-col-tokens"
|
||||
title={`오늘 ${tokenUsage.task_count}건 작업 · ${tokenUsage.total_tokens.toLocaleString()} 토큰`}
|
||||
>
|
||||
🧮 {tokenUsage.total_tokens.toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
<span className={`ao-col-state ao-col-state--${state.state}`}>{state.state}</span>
|
||||
{notification > 0 && <span className="ao-col-badge">{notification}</span>}
|
||||
<span className="ao-col-chevron" aria-hidden="true">{isOpen ? '▾' : '▸'}</span>
|
||||
</div>
|
||||
|
||||
<div className="ao-col-body">
|
||||
|
||||
|
||||
{state.detail && (
|
||||
<div className="ao-col-detail">{state.detail}</div>
|
||||
)}
|
||||
|
||||
{state.state === 'waiting' && state.taskId && (
|
||||
<div className="ao-col-approval">
|
||||
<span>승인 대기</span>
|
||||
<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 className="ao-col-commands">
|
||||
{commands.map(cmd => (
|
||||
<button key={cmd.action} className="ao-cmd-btn" onClick={() => handleQuickAction(cmd)}>
|
||||
{cmd.icon} {cmd.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{activeCommand && (
|
||||
<div className="ao-col-input">
|
||||
<input
|
||||
className="ao-chat-input"
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && handleSend()}
|
||||
placeholder="입력..."
|
||||
autoFocus
|
||||
/>
|
||||
<button className="ao-btn ao-btn--send" onClick={handleSend}>전송</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="ao-col-tasks">
|
||||
<div className="ao-col-tasks-title">최근 작업</div>
|
||||
{tasks.length === 0 && <div className="ao-col-empty">이력 없음</div>}
|
||||
{tasks.map(task => {
|
||||
const badge = STATUS_BADGE[task.status] || STATUS_BADGE.pending;
|
||||
return (
|
||||
<div key={task.id} className="ao-col-task">
|
||||
<div className="ao-col-task-row">
|
||||
<span className="ao-col-task-type">{task.task_type}</span>
|
||||
<span className="ao-col-task-badge" style={{ background: badge.bg }}>{badge.label}</span>
|
||||
</div>
|
||||
<div className="ao-col-task-time">
|
||||
{formatTaskTime(task)}
|
||||
{task.result_data?.telegram_sent !== undefined && (
|
||||
<span className="ao-doc-tg-status">{task.result_data.telegram_sent ? ' TG OK' : ' TG Fail'}</span>
|
||||
)}
|
||||
</div>
|
||||
{task.result_data && (
|
||||
<details className="ao-col-task-detail">
|
||||
<summary>결과</summary>
|
||||
<pre>{JSON.stringify(task.result_data, null, 2)}</pre>
|
||||
</details>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AgentColumn;
|
||||
@@ -4,11 +4,27 @@ const AGENT_COMMANDS = {
|
||||
stock: [
|
||||
{ action: 'fetch_news', label: '뉴스 수집', icon: '📰' },
|
||||
{ action: 'list_alerts', label: '알람 목록', icon: '🔔' },
|
||||
{ action: 'test_telegram', label: '텔레그램 테스트', icon: '📨' },
|
||||
],
|
||||
music: [
|
||||
{ action: 'compose', label: '작곡 시작', icon: '🎵', needsInput: true },
|
||||
{ action: 'credits', label: '크레딧 확인', icon: '💳' },
|
||||
],
|
||||
blog: [
|
||||
{ action: 'research', label: '키워드 리서치', icon: '🔍', needsInput: true },
|
||||
{ action: 'list_trend_keywords', label: '트렌드 목록', icon: '📋' },
|
||||
],
|
||||
realestate: [
|
||||
{ action: 'fetch_matches', label: '매칭 리포트', icon: '🏢' },
|
||||
{ action: 'dashboard', label: '대시보드', icon: '📊' },
|
||||
],
|
||||
};
|
||||
|
||||
const AGENT_NAMES = {
|
||||
stock: '주식 트레이더',
|
||||
music: '음악 프로듀서',
|
||||
blog: '블로그 마케터',
|
||||
realestate: '청약 애널리스트',
|
||||
};
|
||||
|
||||
const ChatPanel = ({ agentId, agentState, onCommand, onApproval, onClose }) => {
|
||||
@@ -20,8 +36,8 @@ const ChatPanel = ({ agentId, agentState, onCommand, onApproval, onClose }) => {
|
||||
|
||||
const handleSend = () => {
|
||||
if (!input.trim() || !activeCommand) return;
|
||||
const params = activeCommand === 'compose'
|
||||
? { prompt: input }
|
||||
const params = activeCommand === 'compose' ? { prompt: input }
|
||||
: activeCommand === 'research' ? { keyword: input }
|
||||
: { message: input };
|
||||
onCommand(agentId, activeCommand, params);
|
||||
setInput('');
|
||||
@@ -40,8 +56,7 @@ const ChatPanel = ({ agentId, agentState, onCommand, onApproval, onClose }) => {
|
||||
<div className="ao-chat-panel">
|
||||
<div className="ao-chat-header">
|
||||
<span className="ao-chat-title">
|
||||
{agentId === 'stock' ? '주식 트레이더' :
|
||||
agentId === 'music' ? '음악 프로듀서' : agentId}
|
||||
{AGENT_NAMES[agentId] || agentId}
|
||||
</span>
|
||||
<span className={`ao-chat-state ao-chat-state--${state.state || 'idle'}`}>
|
||||
{state.state || 'idle'}
|
||||
@@ -86,7 +101,11 @@ const ChatPanel = ({ agentId, agentState, onCommand, onApproval, onClose }) => {
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && handleSend()}
|
||||
placeholder={activeCommand === 'compose' ? '프롬프트 입력...' : '메시지 입력...'}
|
||||
placeholder={
|
||||
activeCommand === 'compose' ? '프롬프트 입력...'
|
||||
: activeCommand === 'research' ? '키워드 입력...'
|
||||
: '메시지 입력...'
|
||||
}
|
||||
autoFocus
|
||||
/>
|
||||
<button className="ao-btn ao-btn--send" onClick={handleSend}>전송</button>
|
||||
|
||||
115
src/pages/agent-office/components/CommandColumn.jsx
Normal file
115
src/pages/agent-office/components/CommandColumn.jsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const TARGETS = [
|
||||
{ id: 'stock', name: '주식 트레이더' },
|
||||
{ id: 'music', name: '음악 프로듀서' },
|
||||
{ id: 'blog', name: '블로그 마케터' },
|
||||
{ id: 'realestate', name: '청약 애널리스트' },
|
||||
];
|
||||
|
||||
const TARGET_ICONS = {
|
||||
stock: '📈',
|
||||
music: '🎵',
|
||||
blog: '✍️',
|
||||
realestate: '🏢',
|
||||
};
|
||||
|
||||
const QUICK_COMMANDS = [
|
||||
{ target: 'stock', action: 'fetch_news', label: '뉴스 수집' },
|
||||
{ target: 'stock', action: 'test_telegram', label: 'TG 테스트' },
|
||||
{ target: 'music', action: 'credits', label: '크레딧 확인' },
|
||||
{ target: 'blog', action: 'list_trend_keywords', label: '트렌드 목록' },
|
||||
{ target: 'realestate', action: 'fetch_matches', label: '매칭 리포트' },
|
||||
{ target: 'realestate', action: 'dashboard', label: '청약 대시보드' },
|
||||
];
|
||||
|
||||
const CommandColumn = ({ agents, onCommand }) => {
|
||||
const [target, setTarget] = useState('stock');
|
||||
const [action, setAction] = useState('');
|
||||
const [params, setParams] = useState('');
|
||||
const [history, setHistory] = useState([]);
|
||||
|
||||
const handleSend = () => {
|
||||
if (!action.trim()) return;
|
||||
let parsedParams = {};
|
||||
if (params.trim()) {
|
||||
try { parsedParams = JSON.parse(params); }
|
||||
catch { parsedParams = { message: params }; }
|
||||
}
|
||||
onCommand(target, action, parsedParams);
|
||||
setHistory(prev => [{
|
||||
time: new Date().toLocaleTimeString(),
|
||||
target,
|
||||
action,
|
||||
params: parsedParams,
|
||||
}, ...prev].slice(0, 20));
|
||||
setAction('');
|
||||
setParams('');
|
||||
};
|
||||
|
||||
const handleQuick = (cmd) => {
|
||||
onCommand(cmd.target, cmd.action, {});
|
||||
setHistory(prev => [{
|
||||
time: new Date().toLocaleTimeString(),
|
||||
target: cmd.target,
|
||||
action: cmd.action,
|
||||
params: {},
|
||||
}, ...prev].slice(0, 20));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ao-col ao-col--command">
|
||||
<div className="ao-col-header" style={{ borderColor: '#8b5cf6' }}>
|
||||
<span className="ao-col-name" style={{ color: '#8b5cf6' }}>CEO 명령</span>
|
||||
</div>
|
||||
|
||||
<div className="ao-cmd-form">
|
||||
<div className="ao-cmd-row">
|
||||
<select className="ao-cmd-select" value={target} onChange={e => setTarget(e.target.value)}>
|
||||
{TARGETS.map(t => (
|
||||
<option key={t.id} value={t.id}>{t.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<input
|
||||
className="ao-chat-input"
|
||||
value={action}
|
||||
onChange={e => setAction(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && handleSend()}
|
||||
placeholder="명령어 (fetch_news, compose...)"
|
||||
/>
|
||||
<input
|
||||
className="ao-chat-input"
|
||||
value={params}
|
||||
onChange={e => setParams(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && handleSend()}
|
||||
placeholder="파라미터 (JSON 또는 텍스트)"
|
||||
/>
|
||||
<button className="ao-btn ao-btn--send ao-cmd-send" onClick={handleSend}>전송</button>
|
||||
</div>
|
||||
|
||||
<div className="ao-col-commands">
|
||||
{QUICK_COMMANDS.map((cmd, i) => (
|
||||
<button key={i} className="ao-cmd-btn" onClick={() => handleQuick(cmd)}>
|
||||
{TARGET_ICONS[cmd.target] || '🤖'} {cmd.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="ao-col-tasks">
|
||||
<div className="ao-col-tasks-title">명령 이력</div>
|
||||
{history.length === 0 && <div className="ao-col-empty">이력 없음</div>}
|
||||
{history.map((h, i) => (
|
||||
<div key={i} className="ao-col-task">
|
||||
<div className="ao-col-task-row">
|
||||
<span className="ao-col-task-type">{h.target}.{h.action}</span>
|
||||
<span className="ao-col-task-time">{h.time}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommandColumn;
|
||||
195
src/pages/agent-office/components/DocumentPanel.jsx
Normal file
195
src/pages/agent-office/components/DocumentPanel.jsx
Normal file
@@ -0,0 +1,195 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { getActivityFeed, getAgentTasks, getAgentLogs } 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 LOG_LEVEL_COLOR = {
|
||||
info: '#60a5fa',
|
||||
warning: '#fbbf24',
|
||||
error: '#f87171',
|
||||
};
|
||||
|
||||
const DocumentPanel = ({ onClose }) => {
|
||||
const [tab, setTab] = useState('feed');
|
||||
const [feed, setFeed] = useState([]);
|
||||
const [feedLoading, setFeedLoading] = useState(false);
|
||||
|
||||
const [selectedAgent, setSelectedAgent] = useState('stock');
|
||||
const [detailTab, setDetailTab] = useState('tasks');
|
||||
const [tasks, setTasks] = useState([]);
|
||||
const [logs, setLogs] = useState([]);
|
||||
const [detailLoading, setDetailLoading] = useState(false);
|
||||
|
||||
const loadFeed = useCallback(() => {
|
||||
setFeedLoading(true);
|
||||
getActivityFeed(80)
|
||||
.then(data => setFeed(data.items || []))
|
||||
.catch(() => setFeed([]))
|
||||
.finally(() => setFeedLoading(false));
|
||||
}, []);
|
||||
|
||||
const loadDetail = useCallback(() => {
|
||||
setDetailLoading(true);
|
||||
Promise.all([
|
||||
getAgentTasks(selectedAgent, 30).then(d => d.tasks || []).catch(() => []),
|
||||
getAgentLogs(selectedAgent, 50).then(d => d.logs || []).catch(() => []),
|
||||
]).then(([t, l]) => {
|
||||
setTasks(t);
|
||||
setLogs(l);
|
||||
}).finally(() => setDetailLoading(false));
|
||||
}, [selectedAgent]);
|
||||
|
||||
useEffect(() => {
|
||||
if (tab === 'feed') loadFeed();
|
||||
else loadDetail();
|
||||
}, [tab, loadFeed, loadDetail]);
|
||||
|
||||
const formatTime = (t) => t ? t.replace('T', ' ').slice(0, 19) : '';
|
||||
|
||||
return (
|
||||
<div className="ao-doc-panel">
|
||||
<div className="ao-doc-header">
|
||||
<span className="ao-doc-title">CEO 보고서</span>
|
||||
<button className="ao-chat-close" onClick={onClose}>×</button>
|
||||
</div>
|
||||
|
||||
<div className="ao-doc-tabs">
|
||||
<button
|
||||
className={`ao-doc-tab ${tab === 'feed' ? 'ao-doc-tab--active' : ''}`}
|
||||
onClick={() => setTab('feed')}
|
||||
>활동 피드</button>
|
||||
<button
|
||||
className={`ao-doc-tab ${tab === 'detail' ? 'ao-doc-tab--active' : ''}`}
|
||||
onClick={() => setTab('detail')}
|
||||
>에이전트별</button>
|
||||
</div>
|
||||
|
||||
{tab === 'feed' && (
|
||||
<div className="ao-doc-feed">
|
||||
<div className="ao-doc-feed-toolbar">
|
||||
<button className="ao-cmd-btn" onClick={loadFeed}>새로고침</button>
|
||||
</div>
|
||||
{feedLoading && <p className="ao-history-empty">로딩 중...</p>}
|
||||
{!feedLoading && feed.length === 0 && <p className="ao-history-empty">활동 없음</p>}
|
||||
{feed.map((item, i) => (
|
||||
<div key={i} className="ao-doc-feed-item">
|
||||
<div className="ao-doc-feed-row">
|
||||
<span className={`ao-doc-agent-tag ao-doc-agent-tag--${item.agent_id}`}>
|
||||
{item.agent_id}
|
||||
</span>
|
||||
{item.type === 'task' ? (
|
||||
<span className="ao-history-badge" style={{ background: (STATUS_BADGE[item.status] || STATUS_BADGE.pending).color }}>
|
||||
{(STATUS_BADGE[item.status] || STATUS_BADGE.pending).label}
|
||||
</span>
|
||||
) : (
|
||||
<span className="ao-doc-log-level" style={{ color: LOG_LEVEL_COLOR[item.level] || '#888' }}>
|
||||
[{item.level}]
|
||||
</span>
|
||||
)}
|
||||
{item.telegram_sent !== undefined && (
|
||||
<span className="ao-doc-tg-status">{item.telegram_sent ? 'TG OK' : 'TG Fail'}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="ao-doc-feed-msg">{item.message}</div>
|
||||
<div className="ao-doc-feed-time">
|
||||
{formatTime(item.created_at)}
|
||||
{item.duration_seconds != null && ` · ${item.duration_seconds}s`}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === 'detail' && (
|
||||
<div className="ao-doc-detail">
|
||||
<div className="ao-doc-agent-select">
|
||||
{[
|
||||
{ id: 'stock', name: '주식 트레이더' },
|
||||
{ id: 'music', name: '음악 프로듀서' },
|
||||
{ id: 'blog', name: '블로그 마케터' },
|
||||
{ id: 'realestate', name: '청약 애널리스트' },
|
||||
].map(a => (
|
||||
<button key={a.id}
|
||||
className={`ao-doc-tab ${selectedAgent === a.id ? 'ao-doc-tab--active' : ''}`}
|
||||
onClick={() => setSelectedAgent(a.id)}
|
||||
>{a.name}</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="ao-doc-detail-tabs">
|
||||
<button
|
||||
className={`ao-doc-tab ${detailTab === 'tasks' ? 'ao-doc-tab--active' : ''}`}
|
||||
onClick={() => setDetailTab('tasks')}
|
||||
>작업 ({tasks.length})</button>
|
||||
<button
|
||||
className={`ao-doc-tab ${detailTab === 'logs' ? 'ao-doc-tab--active' : ''}`}
|
||||
onClick={() => setDetailTab('logs')}
|
||||
>로그 ({logs.length})</button>
|
||||
<button className="ao-cmd-btn" onClick={loadDetail} style={{marginLeft:'auto'}}>새로고침</button>
|
||||
</div>
|
||||
|
||||
{detailLoading && <p className="ao-history-empty">로딩 중...</p>}
|
||||
|
||||
{!detailLoading && detailTab === 'tasks' && (
|
||||
<div className="ao-history-list">
|
||||
{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">
|
||||
{formatTime(task.created_at)}
|
||||
{task.completed_at && ` → ${formatTime(task.completed_at)}`}
|
||||
</div>
|
||||
{task.result_data && (
|
||||
<details className="ao-history-detail">
|
||||
<summary>
|
||||
결과 보기
|
||||
{task.result_data.telegram_sent !== undefined && (
|
||||
<span className="ao-doc-tg-status">
|
||||
{task.result_data.telegram_sent ? ' TG OK' : ' TG Fail'}
|
||||
</span>
|
||||
)}
|
||||
</summary>
|
||||
<pre>{JSON.stringify(task.result_data, null, 2)}</pre>
|
||||
</details>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!detailLoading && detailTab === 'logs' && (
|
||||
<div className="ao-history-list">
|
||||
{logs.length === 0 && <p className="ao-history-empty">로그 없음</p>}
|
||||
{logs.map(log => (
|
||||
<div key={log.id} className="ao-doc-log-item">
|
||||
<span className="ao-doc-log-level" style={{ color: LOG_LEVEL_COLOR[log.level] || '#888' }}>
|
||||
[{log.level}]
|
||||
</span>
|
||||
<span className="ao-doc-log-msg">{log.message}</span>
|
||||
<span className="ao-doc-feed-time">{formatTime(log.created_at)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocumentPanel;
|
||||
@@ -1,62 +0,0 @@
|
||||
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}>×</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;
|
||||
@@ -4,6 +4,7 @@ export function useAgentManager() {
|
||||
const [agents, setAgents] = useState({});
|
||||
const [pendingTasks, setPendingTasks] = useState([]);
|
||||
const [connected, setConnected] = useState(false);
|
||||
const [notifications, setNotifications] = useState({});
|
||||
const wsRef = useRef(null);
|
||||
const reconnectTimer = useRef(null);
|
||||
|
||||
@@ -58,6 +59,12 @@ export function useAgentManager() {
|
||||
[msg.agent]: { ...prev[msg.agent], lastCommand: msg.result },
|
||||
}));
|
||||
break;
|
||||
case 'notification':
|
||||
setNotifications(prev => ({
|
||||
...prev,
|
||||
[msg.agent]: (prev[msg.agent] || 0) + 1,
|
||||
}));
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
@@ -84,5 +91,13 @@ export function useAgentManager() {
|
||||
}
|
||||
}, []);
|
||||
|
||||
return { agents, pendingTasks, connected, sendCommand, sendApproval };
|
||||
const clearNotifications = useCallback((agentId) => {
|
||||
setNotifications(prev => {
|
||||
const next = { ...prev };
|
||||
delete next[agentId];
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
return { agents, pendingTasks, connected, notifications, sendCommand, sendApproval, clearNotifications };
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useRef, useEffect, useCallback } from 'react';
|
||||
import { OfficeRenderer } from '../canvas/OfficeRenderer';
|
||||
import officeMap from '../assets/office-map.json';
|
||||
|
||||
export function useOfficeCanvas(containerRef, onAgentClick) {
|
||||
export function useOfficeCanvas(containerRef, onAgentClick, onCeoClick) {
|
||||
const rendererRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -30,6 +30,10 @@ export function useOfficeCanvas(containerRef, onAgentClick) {
|
||||
if (onAgentClick) onAgentClick(agentId);
|
||||
});
|
||||
|
||||
renderer.setOnCeoClick(() => {
|
||||
if (onCeoClick) onCeoClick();
|
||||
});
|
||||
|
||||
const handleClick = (e) => {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
@@ -48,7 +52,7 @@ export function useOfficeCanvas(containerRef, onAgentClick) {
|
||||
containerRef.current.removeChild(canvas);
|
||||
}
|
||||
};
|
||||
}, [containerRef, onAgentClick]);
|
||||
}, [containerRef, onAgentClick, onCeoClick]);
|
||||
|
||||
const updateAgentState = useCallback((agentId, state, detail) => {
|
||||
rendererRef.current?.updateAgentState(agentId, state, detail);
|
||||
@@ -58,5 +62,13 @@ export function useOfficeCanvas(containerRef, onAgentClick) {
|
||||
rendererRef.current?.moveAgent(agentId, target);
|
||||
}, []);
|
||||
|
||||
return { updateAgentState, moveAgent };
|
||||
const setAgentNotification = useCallback((agentId, count) => {
|
||||
rendererRef.current?.setAgentNotification(agentId, count);
|
||||
}, []);
|
||||
|
||||
const setCeoDocBadge = useCallback((count) => {
|
||||
rendererRef.current?.setCeoDocBadge(count);
|
||||
}, []);
|
||||
|
||||
return { updateAgentState, moveAgent, setAgentNotification, setCeoDocBadge };
|
||||
}
|
||||
|
||||
@@ -1,460 +1,32 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import {
|
||||
fmtKST, Ball, NumberRow, copyNumbers,
|
||||
buildMetricsFromFrequency, BEST_PICKS_DEFAULT_SHOW,
|
||||
} from './lottoUtils';
|
||||
import { useState } from 'react';
|
||||
import BriefingTab from './tabs/BriefingTab';
|
||||
import AnalysisTab from './tabs/AnalysisTab';
|
||||
import PurchaseTab from './tabs/PurchaseTab';
|
||||
|
||||
/* ── hooks ──────────────────────────────────────────────────────── */
|
||||
import useLottoData from './hooks/useLottoData';
|
||||
import usePurchases from './hooks/usePurchases';
|
||||
import useManualRecommend from './hooks/useManualRecommend';
|
||||
const TABS = [
|
||||
{ id: 'briefing', label: '🗓 이번 주 브리핑' },
|
||||
{ id: 'analysis', label: '📊 분석·통계' },
|
||||
{ id: 'purchase', label: '💰 구매·성과' },
|
||||
];
|
||||
|
||||
/* ── components ─────────────────────────────────────────────────── */
|
||||
import MetricBlock from './components/MetricBlock';
|
||||
import FrequencyChart from './components/FrequencyChart';
|
||||
import PerformanceBanner from './components/PerformanceBanner';
|
||||
import CombinedRecommendPanel from './components/CombinedRecommendPanel';
|
||||
import ReportPanel from './components/ReportPanel';
|
||||
import PersonalAnalysisPanel from './components/PersonalAnalysisPanel';
|
||||
import PurchasePanel from './components/PurchasePanel';
|
||||
|
||||
/* ── component ──────────────────────────────────────────────────── */
|
||||
export default function Functions() {
|
||||
const ld = useLottoData();
|
||||
const pur = usePurchases();
|
||||
const mr = useManualRecommend();
|
||||
|
||||
/* ── derived ────────────────────────────────────────────────── */
|
||||
const overallMetrics = useMemo(() => buildMetricsFromFrequency(ld.stats?.frequency), [ld.stats]);
|
||||
const visibleBestPicks = ld.bestPicksExpanded ? ld.bestPicks : ld.bestPicks.slice(0, BEST_PICKS_DEFAULT_SHOW);
|
||||
|
||||
/* ── merged error ───────────────────────────────────────────── */
|
||||
const error = ld.error || mr.error;
|
||||
const clearError = () => { ld.setError(''); mr.setError(''); };
|
||||
|
||||
/* ── render ──────────────────────────────────────────────────── */
|
||||
const [tab, setTab] = useState('briefing');
|
||||
return (
|
||||
<div className="lotto-functions">
|
||||
{error ? (
|
||||
<div className="lotto-alert">
|
||||
<div>
|
||||
<p className="lotto-alert__title">오류</p>
|
||||
<p className="lotto-alert__message">{error}</p>
|
||||
</div>
|
||||
<button className="button ghost small" onClick={clearError}>닫기</button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* ── 신뢰도 배너 ── */}
|
||||
<PerformanceBanner perf={ld.perfStats} />
|
||||
|
||||
{/* ── 종합 추론 번호 추천 ── */}
|
||||
<CombinedRecommendPanel
|
||||
combined={ld.combined}
|
||||
history={ld.combinedHistory}
|
||||
loading={ld.combinedLoading}
|
||||
histLoading={ld.combinedHistLoading}
|
||||
onRun={ld.runCombinedRecommend}
|
||||
onCopy={copyNumbers}
|
||||
/>
|
||||
|
||||
{/* ── 최신 회차 + 시뮬레이션 추천 ── */}
|
||||
<div className="lotto-grid">
|
||||
{/* Latest Draw */}
|
||||
<section className="lotto-panel">
|
||||
<div className="lotto-panel__head">
|
||||
<div>
|
||||
<p className="lotto-panel__eyebrow">Latest Draw</p>
|
||||
<h3>최신 회차</h3>
|
||||
<p className="lotto-panel__sub">최신 회차와 번호를 빠르게 확인할 수 있습니다.</p>
|
||||
</div>
|
||||
<div className="lotto-panel__actions">
|
||||
{ld.loading.latest ? <span className="lotto-chip">로딩 중</span> : null}
|
||||
<button className="button ghost small" onClick={ld.refreshLatest} disabled={ld.loading.latest}>
|
||||
새로고침
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{ld.latest ? (
|
||||
<>
|
||||
<div className="lotto-meta">
|
||||
<div>
|
||||
<p className="lotto-meta__title">{ld.latest.drawNo}회</p>
|
||||
<p className="lotto-meta__date">{ld.latest.date}</p>
|
||||
</div>
|
||||
<button className="button small" onClick={() => copyNumbers(ld.latest.numbers)}>
|
||||
번호 복사
|
||||
</button>
|
||||
</div>
|
||||
<NumberRow nums={ld.latest.numbers} />
|
||||
<p className="lotto-bonus">보너스 <strong>{ld.latest.bonus}</strong></p>
|
||||
{overallMetrics && (
|
||||
<MetricBlock title="당첨 통계 (전체 회차)" metrics={overallMetrics} />
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="lotto-empty">최신 회차 데이터가 없습니다.</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Simulation Picks */}
|
||||
<section className="lotto-panel">
|
||||
<div className="lotto-panel__head">
|
||||
<div>
|
||||
<p className="lotto-panel__eyebrow">Simulation Picks</p>
|
||||
<h3>시뮬레이션 추천</h3>
|
||||
<p className="lotto-panel__sub">
|
||||
하루 6회 몬테카를로 시뮬레이션으로 선별된 최적 번호입니다.
|
||||
</p>
|
||||
</div>
|
||||
<div className="lotto-panel__actions">
|
||||
{ld.loading.bestPicks ? <span className="lotto-chip">로딩 중</span> : null}
|
||||
{ld.simulating ? <span className="lotto-chip lotto-chip--active">분석 중</span> : null}
|
||||
<button className="button ghost small" onClick={ld.refreshBestPicks}
|
||||
disabled={ld.loading.bestPicks || ld.simulating}>
|
||||
새로고침
|
||||
</button>
|
||||
<button className="button small" onClick={ld.onSimulate}
|
||||
disabled={ld.simulating || ld.loading.bestPicks}>
|
||||
{ld.simulating ? '실행 중...' : '지금 실행'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ld.simResult && (
|
||||
<div className="lotto-sim-result">
|
||||
<p>완료: {ld.simResult.total_generated?.toLocaleString()}개 후보 → 상위 {ld.simResult.best_n_saved}개 저장</p>
|
||||
<p>최고 점수 {((ld.simResult.best_score ?? 0) * 100).toFixed(1)}% / 평균 {((ld.simResult.avg_score ?? 0) * 100).toFixed(1)}%</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{ld.bestPicks.length === 0 ? (
|
||||
<p className="lotto-empty">
|
||||
{ld.loading.bestPicks ? '불러오는 중...' : "시뮬레이션 결과가 없습니다. '지금 실행'으로 시작하세요."}
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<div className="lotto-picks">
|
||||
{visibleBestPicks.map((pick) => (
|
||||
<div key={pick.id} className="lotto-pick">
|
||||
<span className="lotto-pick__rank">#{pick.rank}</span>
|
||||
<div className="lotto-pick__content">
|
||||
<NumberRow nums={pick.numbers} />
|
||||
<div className="lotto-pick__score">
|
||||
<span className="lotto-pick__score-label">
|
||||
{((pick.score_total ?? 0) * 100).toFixed(1)}%
|
||||
</span>
|
||||
<div className="lotto-pick__bar">
|
||||
<span style={{ width: `${(pick.score_total ?? 0) * 100}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button className="button ghost small" onClick={() => copyNumbers(pick.numbers)}>
|
||||
복사
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{ld.bestPicks.length > BEST_PICKS_DEFAULT_SHOW && (
|
||||
<button
|
||||
className="button ghost small lotto-history-toggle"
|
||||
onClick={() => ld.setBestPicksExpanded((p) => !p)}
|
||||
aria-expanded={ld.bestPicksExpanded}
|
||||
>
|
||||
{ld.bestPicksExpanded ? '접기' : `모두 보기 (${ld.bestPicks.length}개)`}
|
||||
<span className={`lotto-history-toggle__icon ${ld.bestPicksExpanded ? 'is-open' : ''}`} aria-hidden>▼</span>
|
||||
</button>
|
||||
)}
|
||||
<p className="lotto-panel__sub">
|
||||
갱신: {fmtKST(ld.bestPicks[0]?.created_at) || '-'}
|
||||
{ld.bestPicks[0]?.based_on_draw ? ` · ${ld.bestPicks[0].based_on_draw}회 기준` : ''}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
<nav className="lotto-tabs">
|
||||
{TABS.map(t => (
|
||||
<button
|
||||
key={t.id}
|
||||
className={tab === t.id ? 'active' : ''}
|
||||
onClick={() => setTab(t.id)}
|
||||
>{t.label}</button>
|
||||
))}
|
||||
</nav>
|
||||
<div className="lotto-tab-body">
|
||||
{tab === 'briefing' && <BriefingTab />}
|
||||
{tab === 'analysis' && <AnalysisTab />}
|
||||
{tab === 'purchase' && <PurchaseTab />}
|
||||
</div>
|
||||
|
||||
{/* ── 이번 주 공략 리포트 ── */}
|
||||
<ReportPanel
|
||||
report={ld.report}
|
||||
history={ld.reportHistory}
|
||||
loading={ld.reportLoading}
|
||||
onRefresh={ld.refreshReport}
|
||||
onSelectDrw={ld.loadSpecificReport}
|
||||
/>
|
||||
|
||||
{/* ── 통계 분석 ── */}
|
||||
<section className="lotto-panel lotto-panel--wide">
|
||||
<div className="lotto-panel__head">
|
||||
<div>
|
||||
<p className="lotto-panel__eyebrow">Analysis</p>
|
||||
<h3>통계 분석</h3>
|
||||
<p className="lotto-panel__sub">빈도, Z-score, 갭 분석으로 번호를 분류합니다.</p>
|
||||
</div>
|
||||
<div className="lotto-panel__actions">
|
||||
{ld.loading.analysis ? <span className="lotto-chip">로딩 중</span> : null}
|
||||
<button className="button ghost small" onClick={ld.refreshAnalysis} disabled={ld.loading.analysis}>
|
||||
새로고침
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{ld.analysis ? (
|
||||
<div className="lotto-analysis">
|
||||
<div className="lotto-analysis__row">
|
||||
<div className="lotto-analysis__group">
|
||||
<p className="lotto-analysis__label">🔥 핫 번호 <span>출현 빈도 상위 10</span></p>
|
||||
<div className="lotto-row">
|
||||
{(ld.analysis.hot_numbers ?? []).map((n) => <Ball key={n} n={n} />)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="lotto-analysis__group">
|
||||
<p className="lotto-analysis__label">🧊 콜드 번호 <span>출현 빈도 하위 10</span></p>
|
||||
<div className="lotto-row">
|
||||
{(ld.analysis.cold_numbers ?? []).map((n) => <Ball key={n} n={n} />)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="lotto-analysis__group">
|
||||
<p className="lotto-analysis__label">⏰ 오버듀 번호 <span>오래 안 나온 번호 (회차 수)</span></p>
|
||||
<div className="lotto-row">
|
||||
{(ld.analysis.overdue_numbers ?? []).map((n) => {
|
||||
const stat = (ld.analysis.number_stats ?? []).find((s) => s.number === n);
|
||||
return (
|
||||
<div key={n} className="lotto-overdue">
|
||||
<Ball n={n} />
|
||||
<span className="lotto-overdue__gap">{stat?.gap ?? '-'}회</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lotto-analysis__stats">
|
||||
<span>역대 합계 평균 <strong>{ld.analysis.mean_sum}</strong></span>
|
||||
<span>표준편차 <strong>±{ld.analysis.std_sum}</strong></span>
|
||||
<span>분석 회차 <strong>{ld.analysis.total_draws?.toLocaleString()}</strong></span>
|
||||
<span>
|
||||
홀수 3:짝수 3 확률{' '}
|
||||
<strong>
|
||||
{ld.analysis.odd_distribution?.['3'] ? `${ld.analysis.odd_distribution['3']}%` : '-'}
|
||||
</strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="lotto-empty">
|
||||
{ld.loading.analysis ? '불러오는 중...' : '통계 분석 데이터가 없습니다.'}
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* ── 전체 번호 분포 ── */}
|
||||
<section className="lotto-panel lotto-panel--wide">
|
||||
<div className="lotto-panel__head">
|
||||
<div>
|
||||
<p className="lotto-panel__eyebrow">Distribution</p>
|
||||
<h3>전체 회차 번호 분포</h3>
|
||||
<p className="lotto-panel__sub">1~45번 번호가 등장한 횟수를 기준으로 분포를 표시합니다.</p>
|
||||
</div>
|
||||
<div className="lotto-panel__actions">
|
||||
{ld.statsLoading ? <span className="lotto-chip">로딩 중</span> : null}
|
||||
{ld.stats?.total_draws ? (
|
||||
<span className="lotto-chip">{ld.stats.total_draws}회차</span>
|
||||
) : null}
|
||||
<button className="button ghost small" onClick={ld.refreshStats} disabled={ld.statsLoading}>
|
||||
새로고침
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{ld.statsError ? <p className="lotto-empty">{ld.statsError}</p> : null}
|
||||
{ld.stats ? (
|
||||
<FrequencyChart stats={ld.stats} />
|
||||
) : (
|
||||
<p className="lotto-empty">통계 데이터를 불러오지 못했습니다.</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* ── 내 번호 패턴 ── */}
|
||||
<PersonalAnalysisPanel data={ld.personalAnalysis} loading={ld.personalLoading} />
|
||||
|
||||
{/* ── 구매 기록 ── */}
|
||||
<PurchasePanel
|
||||
records={pur.purchases}
|
||||
stats={pur.purchaseStats}
|
||||
loading={pur.purchaseLoading}
|
||||
formOpen={pur.purchaseFormOpen}
|
||||
form={pur.purchaseForm}
|
||||
formSaving={pur.purchaseFormSaving}
|
||||
formError={pur.purchaseFormError}
|
||||
editId={pur.purchaseEditId}
|
||||
onFormOpen={pur.handlePurchaseFormOpen}
|
||||
onFormClose={pur.handlePurchaseFormClose}
|
||||
onFormChange={pur.handlePurchaseFormChange}
|
||||
onFormSubmit={pur.handlePurchaseFormSubmit}
|
||||
onEditStart={pur.handlePurchaseEditStart}
|
||||
onDelete={pur.handlePurchaseDelete}
|
||||
/>
|
||||
|
||||
{/* ── 수동 추천 ── */}
|
||||
<section className="lotto-panel">
|
||||
<div className="lotto-panel__head">
|
||||
<div>
|
||||
<p className="lotto-panel__eyebrow">Manual Recommendation</p>
|
||||
<h3>수동 추천</h3>
|
||||
<p className="lotto-panel__sub">파라미터를 직접 조정해 번호를 추천받을 수 있습니다.</p>
|
||||
</div>
|
||||
<div className="lotto-panel__actions">
|
||||
{mr.loading.recommend ? <span className="lotto-chip">계산 중</span> : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lotto-presets">
|
||||
{mr.presets.map((preset) => (
|
||||
<button key={preset.name} className="button ghost small"
|
||||
onClick={() => mr.setParams({
|
||||
recent_window: preset.recent_window,
|
||||
recent_weight: preset.recent_weight,
|
||||
avoid_recent_k: preset.avoid_recent_k,
|
||||
})}>
|
||||
{preset.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="lotto-form">
|
||||
<label className="lotto-field">
|
||||
recent_window <span>최근 N회차 가중치 범위</span>
|
||||
<input type="number" min={20} max={1000} value={mr.params.recent_window}
|
||||
onChange={(e) => mr.setParams((s) => ({ ...s, recent_window: Number(e.target.value) }))} />
|
||||
</label>
|
||||
<label className="lotto-field">
|
||||
recent_weight <span>최근 회차 가중치</span>
|
||||
<input type="number" step="0.1" min={0.5} max={10} value={mr.params.recent_weight}
|
||||
onChange={(e) => mr.setParams((s) => ({ ...s, recent_weight: Number(e.target.value) }))} />
|
||||
</label>
|
||||
<label className="lotto-field">
|
||||
avoid_recent_k <span>최근 K회차 중복 회피</span>
|
||||
<input type="number" min={0} max={50} value={mr.params.avoid_recent_k}
|
||||
onChange={(e) => mr.setParams((s) => ({ ...s, avoid_recent_k: Number(e.target.value) }))} />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button className="button primary" onClick={mr.onRecommend} disabled={mr.loading.recommend}>
|
||||
추천 받기
|
||||
</button>
|
||||
|
||||
{mr.result ? (
|
||||
<div className="lotto-result">
|
||||
<div className="lotto-result__meta">
|
||||
<div>
|
||||
<p className="lotto-result__id">추천 ID #{mr.result.id}</p>
|
||||
<p className="lotto-result__based">기준 회차 {mr.result.based_on_latest_draw ?? '-'}</p>
|
||||
</div>
|
||||
<button className="button small" onClick={() => copyNumbers(mr.result.numbers)}>
|
||||
번호 복사
|
||||
</button>
|
||||
</div>
|
||||
{mr.result.numbers && <NumberRow nums={mr.result.numbers} />}
|
||||
{mr.historyMetrics && (
|
||||
<div className="lotto-compare">
|
||||
<MetricBlock title="추천 통계 (히스토리)" metrics={mr.historyMetrics} />
|
||||
</div>
|
||||
)}
|
||||
{Array.isArray(mr.result.items) && mr.result.items.length ? (
|
||||
<details className="lotto-details">
|
||||
<summary>추천 후보 보기</summary>
|
||||
<div className="lotto-batch">
|
||||
{mr.result.items.map((item, idx) => (
|
||||
<div key={item.id ?? `candidate-${idx}`} className="lotto-batch__item">
|
||||
<div className="lotto-batch__meta">
|
||||
<div>
|
||||
<p className="lotto-batch__title">후보 #{item.id ?? idx + 1}</p>
|
||||
<p className="lotto-batch__sub">기준 회차 {item.based_on_draw ?? '-'}</p>
|
||||
</div>
|
||||
<button className="button ghost small" onClick={() => copyNumbers(item.numbers)}>
|
||||
복사
|
||||
</button>
|
||||
</div>
|
||||
<NumberRow nums={item.numbers} />
|
||||
{item.metrics && <MetricBlock title="후보 통계" metrics={item.metrics} />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</details>
|
||||
) : null}
|
||||
{mr.result.explain && (
|
||||
<details className="lotto-details">
|
||||
<summary>설명 보기</summary>
|
||||
<pre>{JSON.stringify(mr.result.explain, null, 2)}</pre>
|
||||
</details>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="lotto-empty">아직 추천 결과가 없습니다.</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* ── 추천 히스토리 ── */}
|
||||
<section className="lotto-panel">
|
||||
<div className="lotto-panel__head">
|
||||
<div>
|
||||
<p className="lotto-panel__eyebrow">History</p>
|
||||
<h3>추천 히스토리</h3>
|
||||
<p className="lotto-panel__sub">수동 추천 결과를 모아서 확인할 수 있습니다.</p>
|
||||
</div>
|
||||
<div className="lotto-panel__actions">
|
||||
<span className="lotto-chip">{mr.history.length}건</span>
|
||||
{mr.history.length > 5 && (
|
||||
<button className="button ghost small lotto-history-toggle"
|
||||
onClick={() => mr.setHistoryExpanded((p) => !p)}
|
||||
aria-expanded={mr.historyExpanded}>
|
||||
{mr.historyExpanded ? '접기' : '더보기'}
|
||||
<span className={`lotto-history-toggle__icon ${mr.historyExpanded ? 'is-open' : ''}`} aria-hidden>▼</span>
|
||||
</button>
|
||||
)}
|
||||
<button className="button ghost small" onClick={mr.refreshHistory} disabled={mr.loading.history}>
|
||||
새로고침
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{mr.loading.history ? <p className="lotto-empty">불러오는 중...</p> : null}
|
||||
{mr.history.length === 0 ? (
|
||||
<p className="lotto-empty">저장된 히스토리가 없습니다.</p>
|
||||
) : (
|
||||
<div className="lotto-history">
|
||||
{mr.visibleHistory.map((item) => (
|
||||
<div key={item.id} className="lotto-history__item">
|
||||
<div className="lotto-history__meta">
|
||||
<p>#{item.id}</p>
|
||||
<p>{fmtKST(item.created_at)}</p>
|
||||
<p>기준 회차 {item.based_on_draw ?? '-'}</p>
|
||||
</div>
|
||||
<div className="lotto-history__body">
|
||||
<NumberRow nums={item.numbers} />
|
||||
<p className="lotto-history__params">
|
||||
window={item.params?.recent_window}, weight={item.params?.recent_weight},
|
||||
avoid_k={item.params?.avoid_recent_k}
|
||||
</p>
|
||||
</div>
|
||||
<div className="lotto-history__actions">
|
||||
<button className="button ghost small" onClick={() => copyNumbers(item.numbers)}>
|
||||
복사
|
||||
</button>
|
||||
<button className="button danger small" onClick={() => mr.onDelete(item.id)}>
|
||||
삭제
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<span ref={mr.historyEndRef} />
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<footer className="lotto-foot">
|
||||
backend: FastAPI / nginx proxy / DB: sqlite ·{' '}
|
||||
<a className="lotto-foot__link" href="/lotto-api.md" download>API 스펙 다운로드</a>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1475,3 +1475,47 @@
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Briefing UI ──────────────────────────────────────────────────────────── */
|
||||
.briefing-header { padding: 16px; border-radius: 12px; background: rgba(129,140,248,0.08); margin-bottom: 16px; }
|
||||
.briefing-header-row { display: flex; justify-content: space-between; align-items: center; }
|
||||
.briefing-meta { display: flex; gap: 12px; color: #94a3b8; font-size: 0.85rem; margin-top: 4px; flex-wrap: wrap; }
|
||||
.briefing-confidence strong { color: #e2e8f0; }
|
||||
.briefing-tokens { font-family: monospace; }
|
||||
.briefing-confidence-bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; margin-top: 8px; overflow: hidden; }
|
||||
.briefing-confidence-bar > div { height: 100%; background: linear-gradient(90deg, #818cf8, #34d399); transition: width .3s; }
|
||||
.briefing-summary { padding: 12px 16px; background: rgba(0,0,0,0.2); border-radius: 10px; margin-bottom: 16px; }
|
||||
.briefing-summary h3 { margin: 0 0 8px; }
|
||||
.briefing-3lines { margin: 0; padding-left: 20px; }
|
||||
.briefing-hotcold { color: #fbbf24; margin-top: 8px; }
|
||||
.briefing-warning { color: #f87171; margin-top: 8px; }
|
||||
.pick-card { padding: 12px; border-radius: 10px; background: rgba(255,255,255,0.04); border-left: 3px solid #64748b; margin-bottom: 8px; }
|
||||
.pick-card--안정 { border-left-color: #34d399; }
|
||||
.pick-card--균형 { border-left-color: #fbbf24; }
|
||||
.pick-card--공격 { border-left-color: #f87171; }
|
||||
.pick-card-header { display: flex; justify-content: space-between; font-size: 0.85rem; color: #94a3b8; margin-bottom: 6px; }
|
||||
.pick-card-balls { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
|
||||
.ball { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; color: #fff; }
|
||||
.ball--1 { background: #fbbf24; } .ball--2 { background: #60a5fa; } .ball--3 { background: #f87171; }
|
||||
.ball--4 { background: #94a3b8; } .ball--5 { background: #34d399; }
|
||||
.pick-card-reason { margin: 0; font-size: 0.85rem; color: #cbd5e1; }
|
||||
.briefing-empty { text-align: center; padding: 40px 20px; color: #94a3b8; }
|
||||
.briefing-empty button { margin-top: 12px; padding: 8px 20px; }
|
||||
.briefing-empty-hint { font-size: 0.85rem; }
|
||||
.briefing-error { color: #f87171; margin-top: 8px; }
|
||||
.curator-usage-footer { display: flex; gap: 12px; padding: 10px 14px; background: rgba(0,0,0,0.25); border-radius: 8px; font-size: 0.8rem; color: #94a3b8; margin-top: 24px; flex-wrap: wrap; font-family: monospace; }
|
||||
@media (max-width: 768px) {
|
||||
.briefing-meta { font-size: 0.75rem; }
|
||||
.briefing-tokens { width: 100%; }
|
||||
.pick-card-balls { justify-content: center; }
|
||||
}
|
||||
|
||||
/* ── Tab navigation ───────────────────────────────────────────────────────── */
|
||||
.lotto-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
|
||||
.lotto-tabs button { padding: 8px 16px; background: transparent; border: none; color: #94a3b8; cursor: pointer; border-bottom: 2px solid transparent; }
|
||||
.lotto-tabs button.active { color: #e2e8f0; border-bottom-color: #818cf8; }
|
||||
.lotto-tab-body { padding-top: 8px; }
|
||||
@media (max-width: 768px) {
|
||||
.lotto-tabs { overflow-x: auto; }
|
||||
.lotto-tabs button { white-space: nowrap; }
|
||||
}
|
||||
|
||||
12
src/pages/lotto/components/briefing/BriefingEmpty.jsx
Normal file
12
src/pages/lotto/components/briefing/BriefingEmpty.jsx
Normal file
@@ -0,0 +1,12 @@
|
||||
export default function BriefingEmpty({ regenerating, onRegenerate, error }) {
|
||||
return (
|
||||
<div className="briefing-empty">
|
||||
<p>아직 이번 주 브리핑이 없습니다.</p>
|
||||
<p className="briefing-empty-hint">매주 월요일 07:00에 자동 생성됩니다.</p>
|
||||
<button onClick={onRegenerate} disabled={regenerating}>
|
||||
{regenerating ? '⏳ 생성 중...' : '지금 생성'}
|
||||
</button>
|
||||
{error && <p className="briefing-error">⚠️ {error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
28
src/pages/lotto/components/briefing/BriefingHeader.jsx
Normal file
28
src/pages/lotto/components/briefing/BriefingHeader.jsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import { estimateCost, fmtUsd, fmtTokens } from './pricing';
|
||||
|
||||
export default function BriefingHeader({ briefing, regenerating, onRegenerate }) {
|
||||
const cost = estimateCost(briefing);
|
||||
const genDate = new Date(briefing.generated_at).toLocaleString('ko-KR');
|
||||
return (
|
||||
<div className="briefing-header">
|
||||
<div className="briefing-header-row">
|
||||
<h2>🗓 #{briefing.draw_no}회 브리핑</h2>
|
||||
<button onClick={onRegenerate} disabled={regenerating}>
|
||||
{regenerating ? '⏳ 생성 중...' : '🔄 다시 생성'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="briefing-meta">
|
||||
<span>{genDate}</span>
|
||||
<span className="briefing-confidence">
|
||||
신뢰도 <strong>{briefing.confidence}</strong>/100
|
||||
</span>
|
||||
<span className="briefing-tokens">
|
||||
{fmtTokens(briefing.tokens_input)} in · {fmtTokens(briefing.tokens_output)} out · {fmtUsd(cost)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="briefing-confidence-bar">
|
||||
<div style={{ width: `${briefing.confidence}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
16
src/pages/lotto/components/briefing/BriefingSummary.jsx
Normal file
16
src/pages/lotto/components/briefing/BriefingSummary.jsx
Normal file
@@ -0,0 +1,16 @@
|
||||
export default function BriefingSummary({ narrative }) {
|
||||
return (
|
||||
<div className="briefing-summary">
|
||||
<h3>{narrative.headline}</h3>
|
||||
<ul className="briefing-3lines">
|
||||
{narrative.summary_3lines.map((line, i) => <li key={i}>{line}</li>)}
|
||||
</ul>
|
||||
{narrative.hot_cold_comment && (
|
||||
<p className="briefing-hotcold">🔥❄️ {narrative.hot_cold_comment}</p>
|
||||
)}
|
||||
{narrative.warnings && (
|
||||
<p className="briefing-warning">⚠️ {narrative.warnings}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
17
src/pages/lotto/components/briefing/CuratorUsageFooter.jsx
Normal file
17
src/pages/lotto/components/briefing/CuratorUsageFooter.jsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import useCuratorUsage from '../../hooks/useCuratorUsage';
|
||||
import { estimateCost, fmtUsd, fmtTokens } from './pricing';
|
||||
|
||||
export default function CuratorUsageFooter() {
|
||||
const { usage } = useCuratorUsage(30);
|
||||
if (!usage) return null;
|
||||
const cost = estimateCost(usage);
|
||||
return (
|
||||
<div className="curator-usage-footer">
|
||||
<span>최근 30일 큐레이터:</span>
|
||||
<span>{usage.calls}회 호출</span>
|
||||
<span>{fmtTokens(usage.tokens_input + usage.tokens_output)} tokens</span>
|
||||
<span>{fmtUsd(cost)}</span>
|
||||
<span>캐시 {(usage.cache_hit_rate * 100).toFixed(0)}%</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
18
src/pages/lotto/components/briefing/PickSetCard.jsx
Normal file
18
src/pages/lotto/components/briefing/PickSetCard.jsx
Normal file
@@ -0,0 +1,18 @@
|
||||
const RISK_BADGE = { '안정': '🟢', '균형': '🟡', '공격': '🔴' };
|
||||
|
||||
export default function PickSetCard({ pick, index }) {
|
||||
return (
|
||||
<div className={`pick-card pick-card--${pick.risk_tag}`}>
|
||||
<div className="pick-card-header">
|
||||
<span className="pick-card-index">Set {index + 1}</span>
|
||||
<span className="pick-card-risk">{RISK_BADGE[pick.risk_tag] || '⚪'} {pick.risk_tag}</span>
|
||||
</div>
|
||||
<div className="pick-card-balls">
|
||||
{pick.numbers.map(n => (
|
||||
<span key={n} className={`ball ball--${Math.ceil(n / 10)}`}>{n}</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="pick-card-reason">{pick.reason}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
23
src/pages/lotto/components/briefing/pricing.js
Normal file
23
src/pages/lotto/components/briefing/pricing.js
Normal file
@@ -0,0 +1,23 @@
|
||||
const IN_PER_M = 3.00;
|
||||
const OUT_PER_M = 15.00;
|
||||
const CACHE_READ_PER_M = 0.30;
|
||||
const CACHE_WRITE_PER_M = 3.75;
|
||||
|
||||
export function estimateCost({ tokens_input = 0, tokens_output = 0, cache_read = 0, cache_write = 0 }) {
|
||||
const usd =
|
||||
(tokens_input / 1_000_000) * IN_PER_M +
|
||||
(tokens_output / 1_000_000) * OUT_PER_M +
|
||||
(cache_read / 1_000_000) * CACHE_READ_PER_M +
|
||||
(cache_write / 1_000_000) * CACHE_WRITE_PER_M;
|
||||
return usd;
|
||||
}
|
||||
|
||||
export function fmtUsd(usd) {
|
||||
if (usd < 0.01) return `$${usd.toFixed(4)}`;
|
||||
return `$${usd.toFixed(3)}`;
|
||||
}
|
||||
|
||||
export function fmtTokens(n) {
|
||||
if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
|
||||
return String(n);
|
||||
}
|
||||
56
src/pages/lotto/hooks/useBriefing.js
Normal file
56
src/pages/lotto/hooks/useBriefing.js
Normal file
@@ -0,0 +1,56 @@
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { getLatestBriefing, triggerLottoCurate } from '../../../api';
|
||||
|
||||
export default function useBriefing() {
|
||||
const [briefing, setBriefing] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [regenerating, setRegenerating] = useState(false);
|
||||
const pollingRef = useRef(null);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true); setError('');
|
||||
try {
|
||||
const data = await getLatestBriefing();
|
||||
setBriefing(data);
|
||||
} catch (e) {
|
||||
setError(e.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const regenerate = useCallback(async () => {
|
||||
setRegenerating(true); setError('');
|
||||
try {
|
||||
const prevGen = briefing?.generated_at;
|
||||
await triggerLottoCurate();
|
||||
let attempts = 0;
|
||||
pollingRef.current = setInterval(async () => {
|
||||
attempts += 1;
|
||||
try {
|
||||
const data = await getLatestBriefing();
|
||||
if (data && data.generated_at !== prevGen) {
|
||||
setBriefing(data);
|
||||
setRegenerating(false);
|
||||
clearInterval(pollingRef.current);
|
||||
}
|
||||
} catch {}
|
||||
if (attempts >= 40) {
|
||||
clearInterval(pollingRef.current);
|
||||
setRegenerating(false);
|
||||
setError('재생성 타임아웃 (2분)');
|
||||
}
|
||||
}, 3000);
|
||||
} catch (e) {
|
||||
setError(e.message);
|
||||
setRegenerating(false);
|
||||
}
|
||||
}, [briefing?.generated_at]);
|
||||
|
||||
useEffect(() => () => { if (pollingRef.current) clearInterval(pollingRef.current); }, []);
|
||||
|
||||
return { briefing, loading, error, regenerating, reload: load, regenerate };
|
||||
}
|
||||
17
src/pages/lotto/hooks/useCuratorUsage.js
Normal file
17
src/pages/lotto/hooks/useCuratorUsage.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { getCuratorUsage } from '../../../api';
|
||||
|
||||
export default function useCuratorUsage(days = 30) {
|
||||
const [usage, setUsage] = useState(null);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
getCuratorUsage(days)
|
||||
.then(d => { if (alive) setUsage(d); })
|
||||
.catch(e => { if (alive) setError(e.message); });
|
||||
return () => { alive = false; };
|
||||
}, [days]);
|
||||
|
||||
return { usage, error };
|
||||
}
|
||||
428
src/pages/lotto/tabs/AnalysisTab.jsx
Normal file
428
src/pages/lotto/tabs/AnalysisTab.jsx
Normal file
@@ -0,0 +1,428 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import {
|
||||
fmtKST, Ball, NumberRow, copyNumbers,
|
||||
buildMetricsFromFrequency, BEST_PICKS_DEFAULT_SHOW,
|
||||
} from '../lottoUtils';
|
||||
|
||||
import useLottoData from '../hooks/useLottoData';
|
||||
import useManualRecommend from '../hooks/useManualRecommend';
|
||||
|
||||
import MetricBlock from '../components/MetricBlock';
|
||||
import FrequencyChart from '../components/FrequencyChart';
|
||||
import PerformanceBanner from '../components/PerformanceBanner';
|
||||
import CombinedRecommendPanel from '../components/CombinedRecommendPanel';
|
||||
import ReportPanel from '../components/ReportPanel';
|
||||
import PersonalAnalysisPanel from '../components/PersonalAnalysisPanel';
|
||||
|
||||
export default function AnalysisTab() {
|
||||
const ld = useLottoData();
|
||||
const mr = useManualRecommend();
|
||||
|
||||
const overallMetrics = useMemo(() => buildMetricsFromFrequency(ld.stats?.frequency), [ld.stats]);
|
||||
const visibleBestPicks = ld.bestPicksExpanded ? ld.bestPicks : ld.bestPicks.slice(0, BEST_PICKS_DEFAULT_SHOW);
|
||||
|
||||
const error = ld.error || mr.error;
|
||||
const clearError = () => { ld.setError(''); mr.setError(''); };
|
||||
|
||||
return (
|
||||
<>
|
||||
{error ? (
|
||||
<div className="lotto-alert">
|
||||
<div>
|
||||
<p className="lotto-alert__title">오류</p>
|
||||
<p className="lotto-alert__message">{error}</p>
|
||||
</div>
|
||||
<button className="button ghost small" onClick={clearError}>닫기</button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* 신뢰도 배너 */}
|
||||
<PerformanceBanner perf={ld.perfStats} />
|
||||
|
||||
{/* 종합 추론 번호 추천 */}
|
||||
<CombinedRecommendPanel
|
||||
combined={ld.combined}
|
||||
history={ld.combinedHistory}
|
||||
loading={ld.combinedLoading}
|
||||
histLoading={ld.combinedHistLoading}
|
||||
onRun={ld.runCombinedRecommend}
|
||||
onCopy={copyNumbers}
|
||||
/>
|
||||
|
||||
{/* 최신 회차 + 시뮬레이션 추천 */}
|
||||
<div className="lotto-grid">
|
||||
{/* Latest Draw */}
|
||||
<section className="lotto-panel">
|
||||
<div className="lotto-panel__head">
|
||||
<div>
|
||||
<p className="lotto-panel__eyebrow">Latest Draw</p>
|
||||
<h3>최신 회차</h3>
|
||||
<p className="lotto-panel__sub">최신 회차와 번호를 빠르게 확인할 수 있습니다.</p>
|
||||
</div>
|
||||
<div className="lotto-panel__actions">
|
||||
{ld.loading.latest ? <span className="lotto-chip">로딩 중</span> : null}
|
||||
<button className="button ghost small" onClick={ld.refreshLatest} disabled={ld.loading.latest}>
|
||||
새로고침
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{ld.latest ? (
|
||||
<>
|
||||
<div className="lotto-meta">
|
||||
<div>
|
||||
<p className="lotto-meta__title">{ld.latest.drawNo}회</p>
|
||||
<p className="lotto-meta__date">{ld.latest.date}</p>
|
||||
</div>
|
||||
<button className="button small" onClick={() => copyNumbers(ld.latest.numbers)}>
|
||||
번호 복사
|
||||
</button>
|
||||
</div>
|
||||
<NumberRow nums={ld.latest.numbers} />
|
||||
<p className="lotto-bonus">보너스 <strong>{ld.latest.bonus}</strong></p>
|
||||
{overallMetrics && (
|
||||
<MetricBlock title="당첨 통계 (전체 회차)" metrics={overallMetrics} />
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="lotto-empty">최신 회차 데이터가 없습니다.</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Simulation Picks */}
|
||||
<section className="lotto-panel">
|
||||
<div className="lotto-panel__head">
|
||||
<div>
|
||||
<p className="lotto-panel__eyebrow">Simulation Picks</p>
|
||||
<h3>시뮬레이션 추천</h3>
|
||||
<p className="lotto-panel__sub">
|
||||
하루 6회 몬테카를로 시뮬레이션으로 선별된 최적 번호입니다.
|
||||
</p>
|
||||
</div>
|
||||
<div className="lotto-panel__actions">
|
||||
{ld.loading.bestPicks ? <span className="lotto-chip">로딩 중</span> : null}
|
||||
{ld.simulating ? <span className="lotto-chip lotto-chip--active">분석 중</span> : null}
|
||||
<button className="button ghost small" onClick={ld.refreshBestPicks}
|
||||
disabled={ld.loading.bestPicks || ld.simulating}>
|
||||
새로고침
|
||||
</button>
|
||||
<button className="button small" onClick={ld.onSimulate}
|
||||
disabled={ld.simulating || ld.loading.bestPicks}>
|
||||
{ld.simulating ? '실행 중...' : '지금 실행'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ld.simResult && (
|
||||
<div className="lotto-sim-result">
|
||||
<p>완료: {ld.simResult.total_generated?.toLocaleString()}개 후보 → 상위 {ld.simResult.best_n_saved}개 저장</p>
|
||||
<p>최고 점수 {((ld.simResult.best_score ?? 0) * 100).toFixed(1)}% / 평균 {((ld.simResult.avg_score ?? 0) * 100).toFixed(1)}%</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{ld.bestPicks.length === 0 ? (
|
||||
<p className="lotto-empty">
|
||||
{ld.loading.bestPicks ? '불러오는 중...' : "시뮬레이션 결과가 없습니다. '지금 실행'으로 시작하세요."}
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<div className="lotto-picks">
|
||||
{visibleBestPicks.map((pick) => (
|
||||
<div key={pick.id} className="lotto-pick">
|
||||
<span className="lotto-pick__rank">#{pick.rank}</span>
|
||||
<div className="lotto-pick__content">
|
||||
<NumberRow nums={pick.numbers} />
|
||||
<div className="lotto-pick__score">
|
||||
<span className="lotto-pick__score-label">
|
||||
{((pick.score_total ?? 0) * 100).toFixed(1)}%
|
||||
</span>
|
||||
<div className="lotto-pick__bar">
|
||||
<span style={{ width: `${(pick.score_total ?? 0) * 100}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button className="button ghost small" onClick={() => copyNumbers(pick.numbers)}>
|
||||
복사
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{ld.bestPicks.length > BEST_PICKS_DEFAULT_SHOW && (
|
||||
<button
|
||||
className="button ghost small lotto-history-toggle"
|
||||
onClick={() => ld.setBestPicksExpanded((p) => !p)}
|
||||
aria-expanded={ld.bestPicksExpanded}
|
||||
>
|
||||
{ld.bestPicksExpanded ? '접기' : `모두 보기 (${ld.bestPicks.length}개)`}
|
||||
<span className={`lotto-history-toggle__icon ${ld.bestPicksExpanded ? 'is-open' : ''}`} aria-hidden>▼</span>
|
||||
</button>
|
||||
)}
|
||||
<p className="lotto-panel__sub">
|
||||
갱신: {fmtKST(ld.bestPicks[0]?.created_at) || '-'}
|
||||
{ld.bestPicks[0]?.based_on_draw ? ` · ${ld.bestPicks[0].based_on_draw}회 기준` : ''}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* 이번 주 공략 리포트 */}
|
||||
<ReportPanel
|
||||
report={ld.report}
|
||||
history={ld.reportHistory}
|
||||
loading={ld.reportLoading}
|
||||
onRefresh={ld.refreshReport}
|
||||
onSelectDrw={ld.loadSpecificReport}
|
||||
/>
|
||||
|
||||
{/* 통계 분석 */}
|
||||
<section className="lotto-panel lotto-panel--wide">
|
||||
<div className="lotto-panel__head">
|
||||
<div>
|
||||
<p className="lotto-panel__eyebrow">Analysis</p>
|
||||
<h3>통계 분석</h3>
|
||||
<p className="lotto-panel__sub">빈도, Z-score, 갭 분석으로 번호를 분류합니다.</p>
|
||||
</div>
|
||||
<div className="lotto-panel__actions">
|
||||
{ld.loading.analysis ? <span className="lotto-chip">로딩 중</span> : null}
|
||||
<button className="button ghost small" onClick={ld.refreshAnalysis} disabled={ld.loading.analysis}>
|
||||
새로고침
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{ld.analysis ? (
|
||||
<div className="lotto-analysis">
|
||||
<div className="lotto-analysis__row">
|
||||
<div className="lotto-analysis__group">
|
||||
<p className="lotto-analysis__label">🔥 핫 번호 <span>출현 빈도 상위 10</span></p>
|
||||
<div className="lotto-row">
|
||||
{(ld.analysis.hot_numbers ?? []).map((n) => <Ball key={n} n={n} />)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="lotto-analysis__group">
|
||||
<p className="lotto-analysis__label">🧊 콜드 번호 <span>출현 빈도 하위 10</span></p>
|
||||
<div className="lotto-row">
|
||||
{(ld.analysis.cold_numbers ?? []).map((n) => <Ball key={n} n={n} />)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="lotto-analysis__group">
|
||||
<p className="lotto-analysis__label">⏰ 오버듀 번호 <span>오래 안 나온 번호 (회차 수)</span></p>
|
||||
<div className="lotto-row">
|
||||
{(ld.analysis.overdue_numbers ?? []).map((n) => {
|
||||
const stat = (ld.analysis.number_stats ?? []).find((s) => s.number === n);
|
||||
return (
|
||||
<div key={n} className="lotto-overdue">
|
||||
<Ball n={n} />
|
||||
<span className="lotto-overdue__gap">{stat?.gap ?? '-'}회</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lotto-analysis__stats">
|
||||
<span>역대 합계 평균 <strong>{ld.analysis.mean_sum}</strong></span>
|
||||
<span>표준편차 <strong>±{ld.analysis.std_sum}</strong></span>
|
||||
<span>분석 회차 <strong>{ld.analysis.total_draws?.toLocaleString()}</strong></span>
|
||||
<span>
|
||||
홀수 3:짝수 3 확률{' '}
|
||||
<strong>
|
||||
{ld.analysis.odd_distribution?.['3'] ? `${ld.analysis.odd_distribution['3']}%` : '-'}
|
||||
</strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="lotto-empty">
|
||||
{ld.loading.analysis ? '불러오는 중...' : '통계 분석 데이터가 없습니다.'}
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* 전체 번호 분포 */}
|
||||
<section className="lotto-panel lotto-panel--wide">
|
||||
<div className="lotto-panel__head">
|
||||
<div>
|
||||
<p className="lotto-panel__eyebrow">Distribution</p>
|
||||
<h3>전체 회차 번호 분포</h3>
|
||||
<p className="lotto-panel__sub">1~45번 번호가 등장한 횟수를 기준으로 분포를 표시합니다.</p>
|
||||
</div>
|
||||
<div className="lotto-panel__actions">
|
||||
{ld.statsLoading ? <span className="lotto-chip">로딩 중</span> : null}
|
||||
{ld.stats?.total_draws ? (
|
||||
<span className="lotto-chip">{ld.stats.total_draws}회차</span>
|
||||
) : null}
|
||||
<button className="button ghost small" onClick={ld.refreshStats} disabled={ld.statsLoading}>
|
||||
새로고침
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{ld.statsError ? <p className="lotto-empty">{ld.statsError}</p> : null}
|
||||
{ld.stats ? (
|
||||
<FrequencyChart stats={ld.stats} />
|
||||
) : (
|
||||
<p className="lotto-empty">통계 데이터를 불러오지 못했습니다.</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* 내 번호 패턴 */}
|
||||
<PersonalAnalysisPanel data={ld.personalAnalysis} loading={ld.personalLoading} />
|
||||
|
||||
{/* 수동 추천 */}
|
||||
<section className="lotto-panel">
|
||||
<div className="lotto-panel__head">
|
||||
<div>
|
||||
<p className="lotto-panel__eyebrow">Manual Recommendation</p>
|
||||
<h3>수동 추천</h3>
|
||||
<p className="lotto-panel__sub">파라미터를 직접 조정해 번호를 추천받을 수 있습니다.</p>
|
||||
</div>
|
||||
<div className="lotto-panel__actions">
|
||||
{mr.loading.recommend ? <span className="lotto-chip">계산 중</span> : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lotto-presets">
|
||||
{mr.presets.map((preset) => (
|
||||
<button key={preset.name} className="button ghost small"
|
||||
onClick={() => mr.setParams({
|
||||
recent_window: preset.recent_window,
|
||||
recent_weight: preset.recent_weight,
|
||||
avoid_recent_k: preset.avoid_recent_k,
|
||||
})}>
|
||||
{preset.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="lotto-form">
|
||||
<label className="lotto-field">
|
||||
recent_window <span>최근 N회차 가중치 범위</span>
|
||||
<input type="number" min={20} max={1000} value={mr.params.recent_window}
|
||||
onChange={(e) => mr.setParams((s) => ({ ...s, recent_window: Number(e.target.value) }))} />
|
||||
</label>
|
||||
<label className="lotto-field">
|
||||
recent_weight <span>최근 회차 가중치</span>
|
||||
<input type="number" step="0.1" min={0.5} max={10} value={mr.params.recent_weight}
|
||||
onChange={(e) => mr.setParams((s) => ({ ...s, recent_weight: Number(e.target.value) }))} />
|
||||
</label>
|
||||
<label className="lotto-field">
|
||||
avoid_recent_k <span>최근 K회차 중복 회피</span>
|
||||
<input type="number" min={0} max={50} value={mr.params.avoid_recent_k}
|
||||
onChange={(e) => mr.setParams((s) => ({ ...s, avoid_recent_k: Number(e.target.value) }))} />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button className="button primary" onClick={mr.onRecommend} disabled={mr.loading.recommend}>
|
||||
추천 받기
|
||||
</button>
|
||||
|
||||
{mr.result ? (
|
||||
<div className="lotto-result">
|
||||
<div className="lotto-result__meta">
|
||||
<div>
|
||||
<p className="lotto-result__id">추천 ID #{mr.result.id}</p>
|
||||
<p className="lotto-result__based">기준 회차 {mr.result.based_on_latest_draw ?? '-'}</p>
|
||||
</div>
|
||||
<button className="button small" onClick={() => copyNumbers(mr.result.numbers)}>
|
||||
번호 복사
|
||||
</button>
|
||||
</div>
|
||||
{mr.result.numbers && <NumberRow nums={mr.result.numbers} />}
|
||||
{mr.historyMetrics && (
|
||||
<div className="lotto-compare">
|
||||
<MetricBlock title="추천 통계 (히스토리)" metrics={mr.historyMetrics} />
|
||||
</div>
|
||||
)}
|
||||
{Array.isArray(mr.result.items) && mr.result.items.length ? (
|
||||
<details className="lotto-details">
|
||||
<summary>추천 후보 보기</summary>
|
||||
<div className="lotto-batch">
|
||||
{mr.result.items.map((item, idx) => (
|
||||
<div key={item.id ?? `candidate-${idx}`} className="lotto-batch__item">
|
||||
<div className="lotto-batch__meta">
|
||||
<div>
|
||||
<p className="lotto-batch__title">후보 #{item.id ?? idx + 1}</p>
|
||||
<p className="lotto-batch__sub">기준 회차 {item.based_on_draw ?? '-'}</p>
|
||||
</div>
|
||||
<button className="button ghost small" onClick={() => copyNumbers(item.numbers)}>
|
||||
복사
|
||||
</button>
|
||||
</div>
|
||||
<NumberRow nums={item.numbers} />
|
||||
{item.metrics && <MetricBlock title="후보 통계" metrics={item.metrics} />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</details>
|
||||
) : null}
|
||||
{mr.result.explain && (
|
||||
<details className="lotto-details">
|
||||
<summary>설명 보기</summary>
|
||||
<pre>{JSON.stringify(mr.result.explain, null, 2)}</pre>
|
||||
</details>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="lotto-empty">아직 추천 결과가 없습니다.</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* 추천 히스토리 */}
|
||||
<section className="lotto-panel">
|
||||
<div className="lotto-panel__head">
|
||||
<div>
|
||||
<p className="lotto-panel__eyebrow">History</p>
|
||||
<h3>추천 히스토리</h3>
|
||||
<p className="lotto-panel__sub">수동 추천 결과를 모아서 확인할 수 있습니다.</p>
|
||||
</div>
|
||||
<div className="lotto-panel__actions">
|
||||
<span className="lotto-chip">{mr.history.length}건</span>
|
||||
{mr.history.length > 5 && (
|
||||
<button className="button ghost small lotto-history-toggle"
|
||||
onClick={() => mr.setHistoryExpanded((p) => !p)}
|
||||
aria-expanded={mr.historyExpanded}>
|
||||
{mr.historyExpanded ? '접기' : '더보기'}
|
||||
<span className={`lotto-history-toggle__icon ${mr.historyExpanded ? 'is-open' : ''}`} aria-hidden>▼</span>
|
||||
</button>
|
||||
)}
|
||||
<button className="button ghost small" onClick={mr.refreshHistory} disabled={mr.loading.history}>
|
||||
새로고침
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{mr.loading.history ? <p className="lotto-empty">불러오는 중...</p> : null}
|
||||
{mr.history.length === 0 ? (
|
||||
<p className="lotto-empty">저장된 히스토리가 없습니다.</p>
|
||||
) : (
|
||||
<div className="lotto-history">
|
||||
{mr.visibleHistory.map((item) => (
|
||||
<div key={item.id} className="lotto-history__item">
|
||||
<div className="lotto-history__meta">
|
||||
<p>#{item.id}</p>
|
||||
<p>{fmtKST(item.created_at)}</p>
|
||||
<p>기준 회차 {item.based_on_draw ?? '-'}</p>
|
||||
</div>
|
||||
<div className="lotto-history__body">
|
||||
<NumberRow nums={item.numbers} />
|
||||
<p className="lotto-history__params">
|
||||
window={item.params?.recent_window}, weight={item.params?.recent_weight},
|
||||
avoid_k={item.params?.avoid_recent_k}
|
||||
</p>
|
||||
</div>
|
||||
<div className="lotto-history__actions">
|
||||
<button className="button ghost small" onClick={() => copyNumbers(item.numbers)}>
|
||||
복사
|
||||
</button>
|
||||
<button className="button danger small" onClick={() => mr.onDelete(item.id)}>
|
||||
삭제
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<span ref={mr.historyEndRef} />
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
25
src/pages/lotto/tabs/BriefingTab.jsx
Normal file
25
src/pages/lotto/tabs/BriefingTab.jsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import useBriefing from '../hooks/useBriefing';
|
||||
import BriefingHeader from '../components/briefing/BriefingHeader';
|
||||
import BriefingSummary from '../components/briefing/BriefingSummary';
|
||||
import PickSetCard from '../components/briefing/PickSetCard';
|
||||
import BriefingEmpty from '../components/briefing/BriefingEmpty';
|
||||
import CuratorUsageFooter from '../components/briefing/CuratorUsageFooter';
|
||||
|
||||
export default function BriefingTab() {
|
||||
const { briefing, loading, error, regenerating, regenerate } = useBriefing();
|
||||
|
||||
if (loading) return <div className="briefing-empty"><p>로딩 중...</p></div>;
|
||||
if (!briefing) return <BriefingEmpty regenerating={regenerating} onRegenerate={regenerate} error={error} />;
|
||||
|
||||
return (
|
||||
<div className="briefing-tab">
|
||||
<BriefingHeader briefing={briefing} regenerating={regenerating} onRegenerate={regenerate} />
|
||||
<BriefingSummary narrative={briefing.narrative} />
|
||||
<div className="briefing-picks">
|
||||
<h3>이번 주 5세트</h3>
|
||||
{briefing.picks.map((p, i) => <PickSetCard key={i} pick={p} index={i} />)}
|
||||
</div>
|
||||
<CuratorUsageFooter />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
25
src/pages/lotto/tabs/PurchaseTab.jsx
Normal file
25
src/pages/lotto/tabs/PurchaseTab.jsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import usePurchases from '../hooks/usePurchases';
|
||||
import PurchasePanel from '../components/PurchasePanel';
|
||||
|
||||
export default function PurchaseTab() {
|
||||
const pur = usePurchases();
|
||||
|
||||
return (
|
||||
<PurchasePanel
|
||||
records={pur.purchases}
|
||||
stats={pur.purchaseStats}
|
||||
loading={pur.purchaseLoading}
|
||||
formOpen={pur.purchaseFormOpen}
|
||||
form={pur.purchaseForm}
|
||||
formSaving={pur.purchaseFormSaving}
|
||||
formError={pur.purchaseFormError}
|
||||
editId={pur.purchaseEditId}
|
||||
onFormOpen={pur.handlePurchaseFormOpen}
|
||||
onFormClose={pur.handlePurchaseFormClose}
|
||||
onFormChange={pur.handlePurchaseFormChange}
|
||||
onFormSubmit={pur.handlePurchaseFormSubmit}
|
||||
onEditStart={pur.handlePurchaseEditStart}
|
||||
onDelete={pur.handlePurchaseDelete}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -96,7 +96,7 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
평균 매입가 (원)
|
||||
평균단가 (원)
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
@@ -108,6 +108,19 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
매입가 (원)
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
step={1}
|
||||
value={pf.addForm.purchase_price}
|
||||
onChange={(e) =>
|
||||
pf.setAddForm((p) => ({ ...p, purchase_price: e.target.value }))
|
||||
}
|
||||
placeholder="미입력 시 평균단가로 자동 설정"
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
className="button primary"
|
||||
type="submit"
|
||||
@@ -386,7 +399,8 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
|
||||
</p>
|
||||
<h3>{broker} 보유 현황</h3>
|
||||
<p className="stock-panel__sub">
|
||||
{items.length}종목 · 평가{' '}
|
||||
{items.length}종목 · 총 매입{' '}
|
||||
{formatNumber(bSummary.totalBuy)} · 평가{' '}
|
||||
{formatNumber(bSummary.totalEval)} · 손익{' '}
|
||||
<span className={`stock-profit ${profitColorClass(bSummary.totalProfit)}`}>
|
||||
{formatNumber(bSummary.totalProfit)} (
|
||||
@@ -435,7 +449,7 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
평균매입가
|
||||
평균단가
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
@@ -448,6 +462,20 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
매입가
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
value={pf.editForm.purchase_price ?? ''}
|
||||
onChange={(e) =>
|
||||
pf.setEditForm((p) => ({
|
||||
...p,
|
||||
purchase_price: Number(e.target.value),
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="pf-edit-actions">
|
||||
<button
|
||||
@@ -480,9 +508,13 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
|
||||
<strong>{formatNumber(item.quantity)}</strong>
|
||||
</div>
|
||||
<div className="stock-holdings__metric">
|
||||
<span>매입가</span>
|
||||
<span>평균단가</span>
|
||||
<strong>{formatNumber(item.avg_price)}</strong>
|
||||
</div>
|
||||
<div className="stock-holdings__metric">
|
||||
<span>매입가</span>
|
||||
<strong>{formatNumber(item.purchase_price ?? item.avg_price)}</strong>
|
||||
</div>
|
||||
<div className="stock-holdings__metric">
|
||||
<span>현재가</span>
|
||||
<strong className={item.current_price == null ? 'pf-null-price' : ''}>
|
||||
|
||||
@@ -70,14 +70,20 @@ export default function usePortfolio() {
|
||||
}, [brokerGroups]);
|
||||
|
||||
const getBrokerSummary = (items) => {
|
||||
let totalBuy = 0, totalEvalAmt = 0, hasNullPrice = false;
|
||||
// totalBuy: 요약 표시용 (매입가 purchase_price 기준)
|
||||
// totalCostBasis: 손익 계산용 (평균단가 avg_price 기준)
|
||||
let totalBuy = 0, totalCostBasis = 0, totalEvalAmt = 0, hasNullPrice = false;
|
||||
for (const item of items) {
|
||||
totalBuy += (item.avg_price ?? 0) * (item.quantity ?? 0);
|
||||
const qty = item.quantity ?? 0;
|
||||
const purchase = item.purchase_price ?? item.avg_price ?? 0;
|
||||
// 총 매입 = 종목별 매입가의 단순 합 (수량 미곱산)
|
||||
totalBuy += purchase;
|
||||
totalCostBasis += (item.avg_price ?? 0) * qty;
|
||||
if (item.eval_amount != null) totalEvalAmt += item.eval_amount;
|
||||
else hasNullPrice = true;
|
||||
}
|
||||
const totalProfit = totalEvalAmt - totalBuy;
|
||||
const totalProfitRate = totalBuy > 0 ? (totalProfit / totalBuy) * 100 : 0;
|
||||
const totalProfit = totalEvalAmt - totalCostBasis;
|
||||
const totalProfitRate = totalCostBasis > 0 ? (totalProfit / totalCostBasis) * 100 : 0;
|
||||
return { totalBuy, totalEval: totalEvalAmt, totalProfit, totalProfitRate, hasNullPrice };
|
||||
};
|
||||
|
||||
@@ -108,6 +114,9 @@ export default function usePortfolio() {
|
||||
name: addForm.name.trim(),
|
||||
quantity: Number(addForm.quantity),
|
||||
avg_price: Number(addForm.avg_price),
|
||||
purchase_price: addForm.purchase_price === '' || addForm.purchase_price == null
|
||||
? Number(addForm.avg_price)
|
||||
: Number(addForm.purchase_price),
|
||||
});
|
||||
setAddForm({ ...emptyPortfolioForm });
|
||||
setAddFormOpen(false);
|
||||
@@ -121,7 +130,13 @@ export default function usePortfolio() {
|
||||
|
||||
const handleEditStart = (item) => {
|
||||
setEditingId(item.id);
|
||||
const data = { quantity: item.quantity, avg_price: item.avg_price, broker: item.broker, name: item.name };
|
||||
const data = {
|
||||
quantity: item.quantity,
|
||||
avg_price: item.avg_price,
|
||||
purchase_price: item.purchase_price ?? item.avg_price,
|
||||
broker: item.broker,
|
||||
name: item.name,
|
||||
};
|
||||
setEditForm(data);
|
||||
editOrigRef.current = { ...data };
|
||||
};
|
||||
|
||||
@@ -95,6 +95,7 @@ export const emptyPortfolioForm = {
|
||||
name: '',
|
||||
quantity: '',
|
||||
avg_price: '',
|
||||
purchase_price: '',
|
||||
};
|
||||
|
||||
/* ── empty sell-history form ─────────────────────────────────────── */
|
||||
|
||||
@@ -636,6 +636,19 @@ function AnnouncementsTab() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteClosed = async () => {
|
||||
if (!confirm('종료된(완료) 청약 공고를 모두 삭제할까요?')) return;
|
||||
try {
|
||||
const res = await apiDelete('/api/realestate/announcements/closed');
|
||||
alert(`${res.deleted || 0}건 삭제되었습니다.`);
|
||||
setPage(1);
|
||||
load();
|
||||
} catch (e) {
|
||||
console.error('Delete closed error:', e);
|
||||
alert('삭제 실패');
|
||||
}
|
||||
};
|
||||
|
||||
const handleBookmark = async (id) => {
|
||||
try {
|
||||
const updated = await apiPatch(`/api/realestate/announcements/${id}/bookmark`);
|
||||
@@ -680,6 +693,14 @@ function AnnouncementsTab() {
|
||||
onChange={(e) => { setRegionFilter(e.target.value); setPage(1); }}
|
||||
style={{ width: 160, padding: '6px 12px', fontSize: 12 }}
|
||||
/>
|
||||
<button
|
||||
className="sub-filter-btn"
|
||||
onClick={handleDeleteClosed}
|
||||
style={{ fontSize: 12, color: '#f87171' }}
|
||||
title="status='완료' 공고 일괄 삭제"
|
||||
>
|
||||
🗑 종료 청약 삭제
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user