Compare commits
24 Commits
b7ee9fe3fd
...
bebd55874c
| Author | SHA1 | Date | |
|---|---|---|---|
| bebd55874c | |||
| 6cbdf95596 | |||
| 3e4f2e0934 | |||
| 31fc2dfb0d | |||
| 403046c4d0 | |||
| b03f438935 | |||
| 22a37cf6d9 | |||
| 6bd6cbd635 | |||
| 4c930c2cf8 | |||
| efeecadbef | |||
| a712a2f43b | |||
| ce245609f9 | |||
| 43904d033a | |||
| 379ad41e32 | |||
| f3de315272 | |||
| 71fe91cc85 | |||
| 7dd2cc9793 | |||
| f01a432329 | |||
| d4279f2e3b | |||
| 8207205418 | |||
| 95b3f2b37c | |||
| eab8ef295b | |||
| f11f9c529e | |||
| d24c04f9fa |
@@ -108,7 +108,7 @@
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 20px;
|
||||
padding-bottom: calc(16px + var(--safe-area-bottom));
|
||||
padding-bottom: calc(20px + var(--safe-area-bottom));
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
|
||||
@@ -46,6 +46,18 @@
|
||||
.swipeable-view__tab.is-active {
|
||||
background: var(--surface-raised);
|
||||
color: var(--neon-cyan);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swipeable-view__tab.is-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
height: 2px;
|
||||
background: var(--neon-cyan);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* Sliding track */
|
||||
@@ -67,6 +79,15 @@
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Mobile touch targets */
|
||||
@media (max-width: 768px) {
|
||||
.swipeable-view__tab {
|
||||
min-height: 44px;
|
||||
font-size: 14px;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.swipeable-view__track {
|
||||
|
||||
@@ -1,400 +1,477 @@
|
||||
.ao-page {
|
||||
/* src/pages/agent-office/AgentOffice.css */
|
||||
|
||||
/* ===== Root Layout ===== */
|
||||
.ao-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: #0d0d1a;
|
||||
color: #e0e0e0;
|
||||
color: #ffffff;
|
||||
font-family: 'Courier New', monospace;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ao-header {
|
||||
/* ===== Top Bar ===== */
|
||||
.ao-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 20px;
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
background: #1a1a2e;
|
||||
border-bottom: 1px solid #2a2a4a;
|
||||
border-bottom: 1px solid #333;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ao-title {
|
||||
font-size: 1.2rem;
|
||||
color: #8b5cf6;
|
||||
margin: 0;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.ao-status {
|
||||
.ao-topbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.8rem;
|
||||
gap: 12px;
|
||||
}
|
||||
.ao-topbar-title {
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
color: #8b5cf6;
|
||||
}
|
||||
.ao-topbar-status {
|
||||
font-size: 11px;
|
||||
}
|
||||
.ao-topbar-status.connected { color: #22c55e; }
|
||||
.ao-topbar-status.disconnected { color: #ef4444; }
|
||||
.ao-topbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.ao-topbar-select {
|
||||
background: #2a2a3e;
|
||||
color: #aaa;
|
||||
border: 1px solid #444;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
}
|
||||
.ao-topbar-zoom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.ao-topbar-zoom button {
|
||||
background: #2a2a3e;
|
||||
color: #aaa;
|
||||
border: 1px solid #444;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
.ao-topbar-zoom button:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
.ao-topbar-zoom span {
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
min-width: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ao-dot {
|
||||
/* ===== Main Area ===== */
|
||||
.ao-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ao-canvas {
|
||||
flex: 1;
|
||||
cursor: grab;
|
||||
display: block;
|
||||
}
|
||||
.ao-canvas:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* ===== Side Panel ===== */
|
||||
.ao-sidepanel {
|
||||
width: 320px;
|
||||
background: #111;
|
||||
border-left: 1px solid #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
animation: slideIn 0.2s ease-out;
|
||||
}
|
||||
@keyframes slideIn {
|
||||
from { transform: translateX(100%); }
|
||||
to { transform: translateX(0); }
|
||||
}
|
||||
.ao-sidepanel-header {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.ao-sidepanel-agent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.ao-sidepanel-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
.ao-sidepanel-name {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
.ao-sidepanel-state {
|
||||
font-size: 11px;
|
||||
color: #22c55e;
|
||||
}
|
||||
.ao-sidepanel-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #666;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.ao-sidepanel-close:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.ao-sidepanel-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
.ao-sidepanel-tab {
|
||||
flex: 1;
|
||||
padding: 8px 4px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ao-sidepanel-tab.active {
|
||||
color: #8b5cf6;
|
||||
border-bottom-color: #8b5cf6;
|
||||
font-weight: bold;
|
||||
}
|
||||
.ao-sidepanel-tab:hover {
|
||||
color: #aaa;
|
||||
}
|
||||
.ao-sidepanel-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* ===== Command Tab ===== */
|
||||
.ao-command-tab { display: flex; flex-direction: column; gap: 12px; }
|
||||
.ao-section { margin-bottom: 4px; }
|
||||
.ao-section-label {
|
||||
color: #888;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.ao-quick-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
.ao-btn-quick {
|
||||
background: #2a2a4e;
|
||||
color: #8b5cf6;
|
||||
border: 1px solid #4c1d95;
|
||||
padding: 5px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ao-btn-quick:hover { background: #3a3a5e; }
|
||||
.ao-btn-quick:disabled { opacity: 0.4; }
|
||||
|
||||
.ao-param-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.ao-input {
|
||||
flex: 1;
|
||||
background: #1a1a2e;
|
||||
border: 1px solid #333;
|
||||
color: #fff;
|
||||
padding: 7px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
}
|
||||
.ao-input::placeholder { color: #555; }
|
||||
.ao-btn-send {
|
||||
background: #4c1d95;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 7px 14px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ao-btn-send:hover { background: #5b21b6; }
|
||||
.ao-btn-send:disabled { opacity: 0.4; }
|
||||
|
||||
/* Approval */
|
||||
.ao-approval-card {
|
||||
background: rgba(146,64,14,0.15);
|
||||
border: 1px solid #92400e;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
.ao-approval-title {
|
||||
color: #fbbf24;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.ao-approval-desc {
|
||||
color: #ddd;
|
||||
font-size: 11px;
|
||||
margin-bottom: 8px;
|
||||
word-break: break-all;
|
||||
}
|
||||
.ao-approval-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.ao-btn-approve {
|
||||
flex: 1;
|
||||
background: #065f46;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 7px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ao-btn-reject {
|
||||
flex: 1;
|
||||
background: #7f1d1d;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 7px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ===== Task Tab ===== */
|
||||
.ao-task-tab { display: flex; flex-direction: column; gap: 4px; }
|
||||
.ao-task-item {
|
||||
background: #1a1a2e;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ao-task-item:hover { background: #222240; }
|
||||
.ao-task-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.ao-task-type { color: #ccc; font-weight: bold; flex: 1; }
|
||||
.ao-task-badge {
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.ao-task-time { color: #666; font-size: 10px; }
|
||||
.ao-task-result {
|
||||
margin-top: 6px;
|
||||
background: #0d0d1a;
|
||||
padding: 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
color: #aaa;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* ===== Token Tab ===== */
|
||||
.ao-token-tab { display: flex; flex-direction: column; gap: 12px; }
|
||||
.ao-token-period {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
.ao-btn-period {
|
||||
flex: 1;
|
||||
background: #1a1a2e;
|
||||
color: #888;
|
||||
border: 1px solid #333;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ao-btn-period.active {
|
||||
background: #4c1d95;
|
||||
color: #fff;
|
||||
border-color: #4c1d95;
|
||||
}
|
||||
.ao-token-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
.ao-token-card {
|
||||
background: #1a1a2e;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.ao-token-label {
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.ao-token-value {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
.ao-token-bar { margin-top: 4px; }
|
||||
.ao-token-bar-label { font-size: 10px; color: #888; margin-bottom: 4px; }
|
||||
.ao-token-bar-track {
|
||||
display: flex;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: #1a1a2e;
|
||||
}
|
||||
.ao-token-bar-fill.input { background: #3b82f6; }
|
||||
.ao-token-bar-fill.output { background: #8b5cf6; }
|
||||
.ao-token-bar-legend {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.ao-token-bar-legend .dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.ao-dot--on { background: #34d399; }
|
||||
.ao-dot--off { background: #f87171; }
|
||||
|
||||
/* Dashboard */
|
||||
.ao-dashboard {
|
||||
display: flex;
|
||||
gap: 1px;
|
||||
background: #2a2a4a;
|
||||
flex: 1;
|
||||
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 {
|
||||
.ao-token-bar-legend .dot.input { background: #3b82f6; }
|
||||
.ao-token-bar-legend .dot.output { background: #8b5cf6; }
|
||||
.ao-token-detail {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.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;
|
||||
/* ===== Log Tab ===== */
|
||||
.ao-log-tab {
|
||||
max-height: 100%;
|
||||
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;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.ao-cmd-row {
|
||||
.ao-log-item {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
padding: 3px 0;
|
||||
border-bottom: 1px solid #1a1a2e;
|
||||
}
|
||||
.ao-log-time { color: #555; min-width: 60px; }
|
||||
.ao-log-level { min-width: 48px; font-weight: bold; }
|
||||
.ao-log-msg { color: #ccc; word-break: break-all; }
|
||||
|
||||
/* ===== Common ===== */
|
||||
.ao-empty {
|
||||
color: #555;
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
/* Shared */
|
||||
.ao-btn {
|
||||
padding: 4px 12px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
.ao-btn--approve { background: #065f46; color: #34d399; }
|
||||
.ao-btn--approve:hover { background: #047857; }
|
||||
.ao-btn--reject { background: #7f1d1d; color: #f87171; }
|
||||
.ao-btn--reject:hover { background: #991b1b; }
|
||||
.ao-btn--send { background: #4c1d95; color: #c4b5fd; }
|
||||
.ao-btn--send:hover { background: #5b21b6; }
|
||||
|
||||
.ao-cmd-btn {
|
||||
padding: 4px 10px;
|
||||
border: 1px solid #333;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #ccc;
|
||||
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 {
|
||||
flex: 1;
|
||||
padding: 6px 10px;
|
||||
background: #111;
|
||||
border: 1px solid #333;
|
||||
border-radius: 6px;
|
||||
color: #e0e0e0;
|
||||
font-size: 0.8rem;
|
||||
font-family: inherit;
|
||||
min-width: 0;
|
||||
}
|
||||
.ao-chat-input:focus { border-color: #8b5cf6; outline: none; }
|
||||
|
||||
.ao-doc-tg-status {
|
||||
font-size: 0.7rem;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* Mobile: vertical stack + accordion */
|
||||
/* ===== Mobile (< 768px) ===== */
|
||||
@media (max-width: 768px) {
|
||||
.ao-page {
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.ao-topbar-right { gap: 6px; }
|
||||
.ao-topbar-select { font-size: 11px; padding: 2px 6px; }
|
||||
|
||||
.ao-dashboard {
|
||||
.ao-main {
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
overflow: visible;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.ao-col {
|
||||
flex: none;
|
||||
overflow: visible;
|
||||
.ao-canvas {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.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-cmd-form {
|
||||
/* Side panel → bottom sheet */
|
||||
.ao-sidepanel {
|
||||
position: fixed;
|
||||
bottom: calc(var(--bottom-nav-h, 64px) + var(--safe-area-bottom, 0px));
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 8px 16px;
|
||||
background: var(--bg-secondary, #12122a);
|
||||
border-top: 1px solid #2a2a4a;
|
||||
z-index: 200;
|
||||
width: 100%;
|
||||
max-height: 55vh;
|
||||
border-left: none;
|
||||
border-top: 1px solid #333;
|
||||
border-radius: 16px 16px 0 0;
|
||||
animation: slideUp 0.25s ease-out;
|
||||
z-index: 100;
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
|
||||
.ao-sidepanel-header {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.ao-sidepanel-header::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 4px;
|
||||
background: #555;
|
||||
border-radius: 2px;
|
||||
margin: 0 auto 8px;
|
||||
}
|
||||
|
||||
.ao-sidepanel-tab {
|
||||
font-size: 11px;
|
||||
padding: 6px 2px;
|
||||
}
|
||||
|
||||
.ao-sidepanel-content {
|
||||
padding: 8px 12px;
|
||||
padding-bottom: env(safe-area-inset-bottom, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,110 +1,101 @@
|
||||
import React, { useRef, useState, useCallback, useEffect } from 'react';
|
||||
import { useAgentManager } from './hooks/useAgentManager';
|
||||
import { useOfficeCanvas } from './hooks/useOfficeCanvas';
|
||||
import AgentColumn from './components/AgentColumn';
|
||||
import CommandColumn from './components/CommandColumn';
|
||||
import { useIsMobile } from '../../hooks/useIsMobile';
|
||||
import MobileSheet from '../../components/MobileSheet';
|
||||
// src/pages/agent-office/AgentOffice.jsx
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useAgentManager } from './hooks/useAgentManager.js';
|
||||
import { useOfficeCanvas } from './hooks/useOfficeCanvas.js';
|
||||
import TopBar from './components/TopBar.jsx';
|
||||
import SidePanel from './components/SidePanel.jsx';
|
||||
import './AgentOffice.css';
|
||||
|
||||
const AGENT_META = {
|
||||
stock: { name: '주식 트레이더', color: '#4488cc' },
|
||||
music: { name: '음악 프로듀서', color: '#44aa88' },
|
||||
blog: { name: '블로그 마케터', color: '#d97706' },
|
||||
realestate: { name: '청약 애널리스트', color: '#c026d3' },
|
||||
};
|
||||
export default function AgentOffice() {
|
||||
const {
|
||||
agents, pendingTasks, notifications, connected,
|
||||
refreshTrigger, clearNotifications
|
||||
} = useAgentManager();
|
||||
|
||||
const AGENT_IDS = ['stock', 'music', 'blog', 'realestate'];
|
||||
const {
|
||||
canvasRef, updateAgentState, setAgentNotification,
|
||||
setTheme, setZoom, hitTest, getZoom, wasDragging
|
||||
} = useOfficeCanvas();
|
||||
|
||||
export function Component() {
|
||||
const canvasContainerRef = useRef(null);
|
||||
const isMobile = useIsMobile();
|
||||
const [agentDetailSheet, setAgentDetailSheet] = useState(null); // agentId or null
|
||||
|
||||
const { agents, pendingTasks, connected, notifications, sendCommand, sendApproval, clearNotifications } = useAgentManager();
|
||||
|
||||
const handleAgentClick = useCallback((agentId) => {
|
||||
clearNotifications(agentId);
|
||||
if (isMobile) {
|
||||
setAgentDetailSheet(agentId);
|
||||
}
|
||||
}, [clearNotifications, isMobile]);
|
||||
|
||||
const handleCeoClick = useCallback(() => {}, []);
|
||||
|
||||
const { updateAgentState, setAgentNotification, setCeoDocBadge } = useOfficeCanvas(canvasContainerRef, handleAgentClick, handleCeoClick);
|
||||
const [selectedAgent, setSelectedAgent] = useState(null);
|
||||
const [theme, setThemeState] = useState(localStorage.getItem('agent-office-theme') || 'modern');
|
||||
const [zoom, setZoomState] = useState(2);
|
||||
|
||||
// WebSocket 상태 → 캔버스 동기화
|
||||
useEffect(() => {
|
||||
for (const [id, info] of Object.entries(agents)) {
|
||||
updateAgentState(id, info.state, info.detail);
|
||||
for (const [id, agentState] of Object.entries(agents)) {
|
||||
updateAgentState(id, agentState.state, agentState.detail);
|
||||
}
|
||||
}, [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]);
|
||||
}, [notifications, setAgentNotification]);
|
||||
|
||||
useEffect(() => {
|
||||
const total = Object.values(notifications).reduce((s, n) => s + n, 0);
|
||||
setCeoDocBadge(total);
|
||||
}, [notifications, setCeoDocBadge]);
|
||||
// 캔버스 클릭 핸들러
|
||||
const handleCanvasClick = useCallback((e) => {
|
||||
if (wasDragging()) return; // 드래그 후 발생하는 클릭 무시
|
||||
const result = hitTest(e.clientX, e.clientY);
|
||||
if (result.type === 'agent') {
|
||||
setSelectedAgent(result.id);
|
||||
clearNotifications(result.id);
|
||||
setAgentNotification(result.id, 0);
|
||||
} else {
|
||||
setSelectedAgent(null);
|
||||
}
|
||||
}, [hitTest, clearNotifications, setAgentNotification, wasDragging]);
|
||||
|
||||
// 테마 변경
|
||||
const handleThemeChange = useCallback((name) => {
|
||||
setThemeState(name);
|
||||
setTheme(name);
|
||||
}, [setTheme]);
|
||||
|
||||
// 줌 변경
|
||||
const handleZoomChange = useCallback((level) => {
|
||||
setZoomState(level);
|
||||
setZoom(level);
|
||||
}, [setZoom]);
|
||||
|
||||
// 선택된 에이전트의 pending task
|
||||
const pendingTask = selectedAgent
|
||||
? pendingTasks.find(t => t.agent_id === selectedAgent)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="ao-page">
|
||||
<div className="ao-header">
|
||||
<h1 className="ao-title">Agent Office</h1>
|
||||
<div className="ao-status">
|
||||
<span className={`ao-dot ${connected ? 'ao-dot--on' : 'ao-dot--off'}`} />
|
||||
{connected ? 'Connected' : 'Disconnected'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="ao-root">
|
||||
<TopBar
|
||||
connected={connected}
|
||||
theme={theme}
|
||||
onThemeChange={handleThemeChange}
|
||||
zoom={zoom}
|
||||
onZoomChange={handleZoomChange}
|
||||
/>
|
||||
|
||||
<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}
|
||||
onClearNotification={() => clearNotifications(id)}
|
||||
/>
|
||||
))}
|
||||
<CommandColumn
|
||||
agents={agents}
|
||||
onCommand={sendCommand}
|
||||
<div className="ao-main">
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="ao-canvas"
|
||||
onClick={handleCanvasClick}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="ao-office-section">
|
||||
<div className="ao-canvas-container" ref={canvasContainerRef} />
|
||||
</div>
|
||||
|
||||
{/* 모바일: 에이전트 상세 바텀시트 */}
|
||||
<MobileSheet
|
||||
open={!!agentDetailSheet}
|
||||
onClose={() => setAgentDetailSheet(null)}
|
||||
title={agentDetailSheet ? (AGENT_META[agentDetailSheet]?.name ?? agentDetailSheet) : ''}
|
||||
>
|
||||
{agentDetailSheet && (
|
||||
<AgentColumn
|
||||
agentId={agentDetailSheet}
|
||||
meta={AGENT_META[agentDetailSheet]}
|
||||
agentState={agents[agentDetailSheet]}
|
||||
notification={notifications[agentDetailSheet] || 0}
|
||||
onCommand={sendCommand}
|
||||
onApproval={sendApproval}
|
||||
onClearNotification={() => clearNotifications(agentDetailSheet)}
|
||||
{selectedAgent && (
|
||||
<SidePanel
|
||||
agentId={selectedAgent}
|
||||
agentState={agents[selectedAgent]}
|
||||
pendingTask={pendingTask}
|
||||
onClose={() => setSelectedAgent(null)}
|
||||
refreshTrigger={refreshTrigger}
|
||||
/>
|
||||
)}
|
||||
</MobileSheet>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Component() {
|
||||
return <AgentOffice />;
|
||||
}
|
||||
|
||||
@@ -1,46 +1,72 @@
|
||||
{
|
||||
"cols": 32,
|
||||
"rows": 20,
|
||||
"tileSize": 32,
|
||||
"cols": 20,
|
||||
"rows": 14,
|
||||
"layers": {
|
||||
"floor": [
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
|
||||
]
|
||||
},
|
||||
"floor": [
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
|
||||
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
|
||||
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
|
||||
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
|
||||
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
|
||||
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
|
||||
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
|
||||
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
|
||||
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
|
||||
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
|
||||
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
|
||||
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
|
||||
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
|
||||
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
|
||||
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
|
||||
[0,2,2,2,2,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
|
||||
[0,2,2,2,2,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
|
||||
[0,2,2,2,2,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
|
||||
],
|
||||
"furniture": [
|
||||
{"type": "desk", "x": 2, "y": 1, "label": "Stock"},
|
||||
{"type": "desk", "x": 7, "y": 1, "label": "Music"},
|
||||
{"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": "☕"},
|
||||
{"type": "desk", "x": 14, "y": 10, "w": 5, "h": 2, "label": "CEO"}
|
||||
{"type": "desk_monitor", "col": 3, "row": 3, "agent": "stock", "monitors": 3},
|
||||
{"type": "desk_monitor", "col": 10, "row": 3, "agent": "music", "monitors": 1, "accent": "instrument"},
|
||||
{"type": "desk_monitor", "col": 17, "row": 3, "agent": "blog", "monitors": 2, "accent": "papers"},
|
||||
{"type": "desk_monitor", "col": 24, "row": 3, "agent": "realestate", "monitors": 2, "accent": "briefcase"},
|
||||
{"type": "desk_monitor", "col": 14, "row": 7, "agent": "lotto", "monitors": 1, "accent": "dice"},
|
||||
{"type": "meeting_table","col": 13, "row": 11,"width": 6, "height": 2},
|
||||
{"type": "sofa", "col": 2, "row": 17},
|
||||
{"type": "coffee_machine","col": 5, "row": 16},
|
||||
{"type": "bookshelf", "col": 27, "row": 16, "height": 3},
|
||||
{"type": "plant", "col": 1, "row": 1},
|
||||
{"type": "plant", "col": 30, "row": 1},
|
||||
{"type": "plant", "col": 1, "row": 14},
|
||||
{"type": "plant", "col": 30, "row": 14},
|
||||
{"type": "water_cooler", "col": 8, "row": 17}
|
||||
],
|
||||
"waypoints": {
|
||||
"stock_desk": {"x": 2, "y": 2},
|
||||
"music_desk": {"x": 7, "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}
|
||||
"desk_stock": {"col": 3, "row": 4},
|
||||
"desk_music": {"col": 10, "row": 4},
|
||||
"desk_blog": {"col": 17, "row": 4},
|
||||
"desk_realestate": {"col": 24, "row": 4},
|
||||
"desk_lotto": {"col": 14, "row": 8},
|
||||
"meeting": {"col": 16, "row": 13},
|
||||
"break_room": {"col": 4, "row": 17},
|
||||
"coffee": {"col": 6, "row": 17},
|
||||
"water_cooler": {"col": 8, "row": 18}
|
||||
},
|
||||
"colors": {
|
||||
"1": "#3a3a50",
|
||||
"2": "#4a3a2a"
|
||||
"blocked": [
|
||||
[3,3],[4,3],[5,3],
|
||||
[10,3],[11,3],
|
||||
[17,3],[18,3],[19,3],
|
||||
[24,3],[25,3],[26,3],
|
||||
[14,7],[15,7],
|
||||
[13,11],[14,11],[15,11],[16,11],[17,11],[18,11],
|
||||
[13,12],[14,12],[15,12],[16,12],[17,12],[18,12],
|
||||
[2,17],[3,17],
|
||||
[5,16],[6,16],
|
||||
[27,16],[27,17],[27,18],
|
||||
[8,17]
|
||||
],
|
||||
"tileTypes": {
|
||||
"0": "wall",
|
||||
"1": "floor",
|
||||
"2": "floor_break"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,89 +1,261 @@
|
||||
import { drawAgent, getAnimSpeed } from './SpriteSheet';
|
||||
// src/pages/agent-office/canvas/AgentSprite.js
|
||||
|
||||
import { ProceduralSprite } from './ProceduralSprite.js';
|
||||
|
||||
const WALK_SPEED = 3; // tiles per second
|
||||
const WANDER_DELAY_MIN = 3;
|
||||
const WANDER_DELAY_MAX = 8;
|
||||
const WANDER_LIMIT_MIN = 3;
|
||||
const WANDER_LIMIT_MAX = 6;
|
||||
const REST_DELAY_MIN = 2;
|
||||
const REST_DELAY_MAX = 20;
|
||||
|
||||
export class AgentSprite {
|
||||
constructor(agentId, waypoints) {
|
||||
this.agentId = agentId;
|
||||
this.waypoints = waypoints;
|
||||
this.state = 'idle';
|
||||
constructor(id, meta, col, row, pathfinder) {
|
||||
this.id = id;
|
||||
this.meta = meta;
|
||||
this.pathfinder = pathfinder;
|
||||
|
||||
// 위치 (타일 좌표, 실수)
|
||||
this.x = col;
|
||||
this.y = row;
|
||||
this.deskCol = col;
|
||||
this.deskRow = row;
|
||||
|
||||
// 상태
|
||||
this.state = 'idle'; // FSM 상태 (from backend)
|
||||
this.detail = '';
|
||||
this.notificationCount = 0;
|
||||
|
||||
const deskKey = `${agentId}_desk`;
|
||||
const desk = waypoints[deskKey] || { x: 5, y: 3 };
|
||||
this.x = desk.x;
|
||||
this.y = desk.y;
|
||||
this.targetX = desk.x;
|
||||
this.targetY = desk.y;
|
||||
this.deskPos = { x: desk.x, y: desk.y };
|
||||
// 애니메이션
|
||||
this.animState = 'idle'; // 렌더링용 상태
|
||||
this.direction = 'down';
|
||||
this.animFrame = 0;
|
||||
this.animTimer = 0;
|
||||
|
||||
this.frameIndex = 0;
|
||||
this._lastFrameTime = 0;
|
||||
this._moveSpeed = 0.05;
|
||||
// 이동
|
||||
this.path = []; // BFS 경로 [{col, row}, ...]
|
||||
this.moveProgress = 0; // 0~1 현재 타일 → 다음 타일
|
||||
this.moveFrom = { col, row };
|
||||
this.moveTo_target = null;
|
||||
|
||||
// 배회
|
||||
this._wandering = false;
|
||||
this._wanderTimer = 0;
|
||||
this._wanderCount = 0;
|
||||
this._wanderLimit = 0;
|
||||
this._restTimer = 0;
|
||||
this._isResting = false;
|
||||
this._isAtDesk = true;
|
||||
}
|
||||
|
||||
setNotification(count) {
|
||||
this.notificationCount = count;
|
||||
}
|
||||
|
||||
setState(newState, detail = '') {
|
||||
this.state = newState;
|
||||
this.detail = detail;
|
||||
this.frameIndex = 0;
|
||||
}
|
||||
|
||||
moveTo(target) {
|
||||
const wp = this.waypoints[target];
|
||||
if (wp) {
|
||||
this.targetX = wp.x;
|
||||
this.targetY = wp.y;
|
||||
}
|
||||
}
|
||||
|
||||
moveToDesk() {
|
||||
this.targetX = this.deskPos.x;
|
||||
this.targetY = this.deskPos.y;
|
||||
}
|
||||
|
||||
update(now) {
|
||||
const speed = getAnimSpeed(this.state);
|
||||
if (now - this._lastFrameTime > speed) {
|
||||
this.frameIndex++;
|
||||
this._lastFrameTime = now;
|
||||
/** 매 프레임 호출 */
|
||||
update(dt) {
|
||||
// 이동 처리
|
||||
if (this.path.length > 0) {
|
||||
this._updateMovement(dt);
|
||||
} else if (this._wandering) {
|
||||
this._updateWander(dt);
|
||||
}
|
||||
|
||||
const dx = this.targetX - this.x;
|
||||
const dy = this.targetY - this.y;
|
||||
const dist = Math.sqrt(dx * dx + dy * dy);
|
||||
// 애니메이션 프레임 업데이트
|
||||
this._updateAnimation(dt);
|
||||
}
|
||||
|
||||
if (dist > 0.1) {
|
||||
const step = Math.min(this._moveSpeed, dist);
|
||||
this.x += (dx / dist) * step;
|
||||
this.y += (dy / dist) * step;
|
||||
_updateMovement(dt) {
|
||||
this.animState = 'walk';
|
||||
this.moveProgress += WALK_SPEED * dt;
|
||||
|
||||
if (this.moveProgress >= 1) {
|
||||
// 현재 구간 완료
|
||||
const arrived = this.path.shift();
|
||||
this.x = arrived.col;
|
||||
this.y = arrived.row;
|
||||
this.moveFrom = { col: arrived.col, row: arrived.row };
|
||||
this.moveProgress = 0;
|
||||
|
||||
if (this.path.length === 0) {
|
||||
// 최종 목적지 도착
|
||||
this._onArrival();
|
||||
} else {
|
||||
// 다음 구간의 방향 설정
|
||||
this._updateDirection(this.path[0]);
|
||||
}
|
||||
} else {
|
||||
this.x = this.targetX;
|
||||
this.y = this.targetY;
|
||||
// 보간
|
||||
const next = this.path[0];
|
||||
this.x = this.moveFrom.col + (next.col - this.moveFrom.col) * this.moveProgress;
|
||||
this.y = this.moveFrom.row + (next.row - this.moveFrom.row) * this.moveProgress;
|
||||
}
|
||||
}
|
||||
|
||||
draw(ctx, renderInfo) {
|
||||
const { scale, offsetX, offsetY, tileSize } = renderInfo;
|
||||
const canvasX = offsetX + this.x * tileSize * scale + (tileSize * scale) / 2;
|
||||
const canvasY = offsetY + this.y * tileSize * scale + (tileSize * scale) / 2;
|
||||
_onArrival() {
|
||||
const atDesk = Math.abs(this.x - this.deskCol) < 0.5 && Math.abs(this.y - this.deskRow) < 0.5;
|
||||
this._isAtDesk = atDesk;
|
||||
|
||||
const isMoving = Math.abs(this.targetX - this.x) > 0.1 || Math.abs(this.targetY - this.y) > 0.1;
|
||||
const drawState = isMoving ? 'walk' : this.state;
|
||||
|
||||
drawAgent(ctx, this.agentId, canvasX, canvasY, drawState, this.frameIndex, scale * 1.5);
|
||||
if (this.state === 'working' || this.state === 'reporting') {
|
||||
this.animState = 'type';
|
||||
this.direction = 'up'; // 모니터를 바라봄
|
||||
} else if (this.state === 'waiting') {
|
||||
this.animState = 'wait';
|
||||
} else if (this.state === 'break') {
|
||||
this.animState = 'break_anim';
|
||||
} else {
|
||||
// idle 도착 — 배회 계속 또는 자리에서 쉬기
|
||||
if (this._wandering && this._wanderCount < this._wanderLimit) {
|
||||
// 다음 배회 타이머 설정
|
||||
this._wanderTimer = WANDER_DELAY_MIN + Math.random() * (WANDER_DELAY_MAX - WANDER_DELAY_MIN);
|
||||
} else if (this._wandering) {
|
||||
// 배회 끝, 휴식
|
||||
this._wandering = false;
|
||||
this._isResting = true;
|
||||
this._restTimer = REST_DELAY_MIN + Math.random() * (REST_DELAY_MAX - REST_DELAY_MIN);
|
||||
}
|
||||
this.animState = 'idle';
|
||||
}
|
||||
}
|
||||
|
||||
hitTest(canvasX, canvasY, renderInfo) {
|
||||
const { scale, offsetX, offsetY, tileSize } = renderInfo;
|
||||
const cx = offsetX + this.x * tileSize * scale + (tileSize * scale) / 2;
|
||||
const cy = offsetY + this.y * tileSize * scale + (tileSize * scale) / 2;
|
||||
const hitW = 20 * scale;
|
||||
const hitH = 30 * scale;
|
||||
_updateWander(dt) {
|
||||
if (this._isResting) {
|
||||
this._restTimer -= dt;
|
||||
if (this._restTimer <= 0) {
|
||||
this._isResting = false;
|
||||
this._startWandering();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
return canvasX >= cx - hitW && canvasX <= cx + hitW &&
|
||||
canvasY >= cy - hitH && canvasY <= cy + hitH;
|
||||
this._wanderTimer -= dt;
|
||||
if (this._wanderTimer <= 0) {
|
||||
// 랜덤 인접 타일로 이동
|
||||
const target = this.pathfinder.getRandomNearbyFloor(
|
||||
Math.round(this.x), Math.round(this.y), 4
|
||||
);
|
||||
if (target) {
|
||||
const path = this.pathfinder.findPath(
|
||||
Math.round(this.x), Math.round(this.y), target.col, target.row
|
||||
);
|
||||
if (path.length > 0 && path.length <= 6) {
|
||||
this.path = path;
|
||||
this.moveFrom = { col: Math.round(this.x), row: Math.round(this.y) };
|
||||
this.moveProgress = 0;
|
||||
this._updateDirection(path[0]);
|
||||
this._wanderCount++;
|
||||
}
|
||||
}
|
||||
// 실패해도 타이머 리셋
|
||||
this._wanderTimer = WANDER_DELAY_MIN + Math.random() * (WANDER_DELAY_MAX - WANDER_DELAY_MIN);
|
||||
}
|
||||
}
|
||||
|
||||
_updateDirection(nextTile) {
|
||||
const dx = nextTile.col - Math.round(this.x);
|
||||
const dy = nextTile.row - Math.round(this.y);
|
||||
if (Math.abs(dx) > Math.abs(dy)) {
|
||||
this.direction = dx > 0 ? 'right' : 'left';
|
||||
} else {
|
||||
this.direction = dy > 0 ? 'down' : 'up';
|
||||
}
|
||||
}
|
||||
|
||||
_updateAnimation(dt) {
|
||||
const config = ProceduralSprite.getAnimConfig(
|
||||
this.animState === 'walk' ? 'walk' : this.state
|
||||
);
|
||||
this.animTimer += dt;
|
||||
if (this.animTimer >= config.speed) {
|
||||
this.animTimer = 0;
|
||||
this.animFrame = (this.animFrame + 1) % config.frames;
|
||||
}
|
||||
}
|
||||
|
||||
/** 백엔드 상태 변경 시 호출 */
|
||||
onStateChange(newState, detail, waypoints) {
|
||||
const prevState = this.state;
|
||||
this.state = newState;
|
||||
this.detail = detail || '';
|
||||
|
||||
// 배회 중단
|
||||
this._wandering = false;
|
||||
this._isResting = false;
|
||||
|
||||
switch (newState) {
|
||||
case 'working':
|
||||
case 'reporting':
|
||||
case 'waiting':
|
||||
// 자리에 없으면 자리로 이동
|
||||
if (!this._isAtDesk) {
|
||||
this._moveToDesk();
|
||||
} else {
|
||||
this.animState = newState === 'waiting' ? 'wait' : 'type';
|
||||
this.direction = 'up';
|
||||
}
|
||||
break;
|
||||
|
||||
case 'break': {
|
||||
// 휴게실로 이동
|
||||
const breakWp = waypoints.break_room || waypoints.coffee;
|
||||
if (breakWp) {
|
||||
this._navigateTo(breakWp.col, breakWp.row);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'idle':
|
||||
if (prevState === 'break') {
|
||||
// 휴게실에서 자리로 복귀
|
||||
this._moveToDesk();
|
||||
}
|
||||
// 복귀 후 배회 시작 (도착 콜백에서 처리)
|
||||
this._startWanderingAfterDelay(3);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
_moveToDesk() {
|
||||
this._navigateTo(this.deskCol, this.deskRow);
|
||||
}
|
||||
|
||||
_navigateTo(goalCol, goalRow) {
|
||||
const startCol = Math.round(this.x);
|
||||
const startRow = Math.round(this.y);
|
||||
const path = this.pathfinder.findPath(startCol, startRow, goalCol, goalRow);
|
||||
if (path.length > 0) {
|
||||
this.path = path;
|
||||
this.moveFrom = { col: startCol, row: startRow };
|
||||
this.moveProgress = 0;
|
||||
this._updateDirection(path[0]);
|
||||
}
|
||||
}
|
||||
|
||||
_startWanderingAfterDelay(delay) {
|
||||
this._wandering = true;
|
||||
this._wanderCount = 0;
|
||||
this._wanderLimit = WANDER_LIMIT_MIN + Math.floor(Math.random() * (WANDER_LIMIT_MAX - WANDER_LIMIT_MIN));
|
||||
this._wanderTimer = delay;
|
||||
this._isResting = false;
|
||||
}
|
||||
|
||||
_startWandering() {
|
||||
this._startWanderingAfterDelay(WANDER_DELAY_MIN + Math.random() * (WANDER_DELAY_MAX - WANDER_DELAY_MIN));
|
||||
}
|
||||
|
||||
isAtDesk() {
|
||||
return this._isAtDesk;
|
||||
}
|
||||
|
||||
/** 렌더링 */
|
||||
draw(ctx, zoom, panX, panY, tileSize) {
|
||||
const ts = tileSize * zoom;
|
||||
const screenX = this.x * ts + panX + ts / 2;
|
||||
const screenY = this.y * ts + panY + ts;
|
||||
const spriteScale = zoom * 1.5; // 캐릭터 약간 크게
|
||||
|
||||
ProceduralSprite.draw(
|
||||
ctx, this.id,
|
||||
this.animState === 'walk' ? 'walk' : this.state,
|
||||
this.direction, this.animFrame,
|
||||
screenX, screenY, spriteScale
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
209
src/pages/agent-office/canvas/FurnitureRenderer.js
Normal file
209
src/pages/agent-office/canvas/FurnitureRenderer.js
Normal file
@@ -0,0 +1,209 @@
|
||||
// src/pages/agent-office/canvas/FurnitureRenderer.js
|
||||
|
||||
/**
|
||||
* 가구 프로시저럴 렌더러 — 테마 팔레트 기반
|
||||
* 각 가구 타입별 draw 함수, Y-sort를 위한 zY 반환
|
||||
*/
|
||||
export class FurnitureRenderer {
|
||||
constructor(furnitureList, tileSize) {
|
||||
this.furnitureList = furnitureList;
|
||||
this.tileSize = tileSize;
|
||||
}
|
||||
|
||||
/**
|
||||
* 모든 가구를 Y-sort 순서로 반환 (에이전트와 함께 정렬하기 위함)
|
||||
* @returns {Array<{type, col, row, zY, draw: Function}>}
|
||||
*/
|
||||
getRenderables(theme, scale, offsetX, offsetY) {
|
||||
const ts = this.tileSize * scale;
|
||||
return this.furnitureList.map(f => ({
|
||||
...f,
|
||||
zY: f.row,
|
||||
draw: (ctx) => this._drawFurniture(ctx, f, theme, ts, offsetX, offsetY)
|
||||
}));
|
||||
}
|
||||
|
||||
_drawFurniture(ctx, f, theme, ts, ox, oy) {
|
||||
const x = f.col * ts + ox;
|
||||
const y = f.row * ts + oy;
|
||||
|
||||
switch (f.type) {
|
||||
case 'desk_monitor': this._drawDesk(ctx, f, theme, ts, x, y); break;
|
||||
case 'meeting_table': this._drawMeetingTable(ctx, f, theme, ts, x, y); break;
|
||||
case 'sofa': this._drawSofa(ctx, theme, ts, x, y); break;
|
||||
case 'coffee_machine':this._drawCoffeeMachine(ctx, theme, ts, x, y); break;
|
||||
case 'bookshelf': this._drawBookshelf(ctx, f, theme, ts, x, y); break;
|
||||
case 'plant': this._drawPlant(ctx, theme, ts, x, y); break;
|
||||
case 'water_cooler': this._drawWaterCooler(ctx, theme, ts, x, y); break;
|
||||
}
|
||||
}
|
||||
|
||||
_drawDesk(ctx, f, theme, ts, x, y) {
|
||||
// 책상 상판
|
||||
const dw = ts * 2;
|
||||
const dh = ts * 0.6;
|
||||
ctx.fillStyle = theme.furniture.desk;
|
||||
ctx.fillRect(x, y + ts * 0.2, dw, dh);
|
||||
// 책상 다리
|
||||
ctx.fillStyle = theme.wall.border;
|
||||
ctx.fillRect(x + ts * 0.1, y + dh + ts * 0.2, ts * 0.15, ts * 0.3);
|
||||
ctx.fillRect(x + dw - ts * 0.25, y + dh + ts * 0.2, ts * 0.15, ts * 0.3);
|
||||
|
||||
// 모니터들
|
||||
const monCount = f.monitors || 1;
|
||||
const monW = ts * 0.5;
|
||||
const monH = ts * 0.4;
|
||||
const totalW = monCount * monW + (monCount - 1) * ts * 0.1;
|
||||
let monX = x + (dw - totalW) / 2;
|
||||
|
||||
for (let i = 0; i < monCount; i++) {
|
||||
// 모니터 프레임
|
||||
ctx.fillStyle = theme.furniture.monitor;
|
||||
ctx.fillRect(monX, y - monH + ts * 0.2, monW, monH);
|
||||
// 화면
|
||||
ctx.fillStyle = theme.furniture.monitorScreen;
|
||||
ctx.fillRect(monX + ts * 0.05, y - monH + ts * 0.25, monW - ts * 0.1, monH - ts * 0.1);
|
||||
// 모니터 받침대
|
||||
ctx.fillStyle = theme.furniture.monitor;
|
||||
ctx.fillRect(monX + monW * 0.35, y + ts * 0.2 - ts * 0.05, monW * 0.3, ts * 0.08);
|
||||
monX += monW + ts * 0.1;
|
||||
}
|
||||
|
||||
// 의자 (책상 아래)
|
||||
ctx.fillStyle = theme.furniture.chair;
|
||||
ctx.fillRect(x + dw * 0.35, y + ts, dw * 0.3, ts * 0.5);
|
||||
ctx.fillRect(x + dw * 0.3, y + ts * 0.8, dw * 0.4, ts * 0.25);
|
||||
|
||||
// 에이전트별 악센트 소품
|
||||
if (f.accent === 'instrument') {
|
||||
// 음표 모양
|
||||
ctx.fillStyle = theme.ui.accent;
|
||||
ctx.fillRect(x + dw + ts * 0.2, y + ts * 0.3, ts * 0.1, ts * 0.5);
|
||||
ctx.beginPath();
|
||||
ctx.arc(x + dw + ts * 0.2, y + ts * 0.8, ts * 0.15, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
} else if (f.accent === 'papers') {
|
||||
// 서류 더미
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.fillRect(x + dw + ts * 0.1, y + ts * 0.3, ts * 0.35, ts * 0.45);
|
||||
ctx.fillStyle = theme.text.label;
|
||||
for (let i = 0; i < 3; i++) {
|
||||
ctx.fillRect(x + dw + ts * 0.15, y + ts * 0.38 + i * ts * 0.1, ts * 0.25, ts * 0.02);
|
||||
}
|
||||
} else if (f.accent === 'briefcase') {
|
||||
ctx.fillStyle = '#8B4513';
|
||||
ctx.fillRect(x + dw + ts * 0.1, y + ts * 0.5, ts * 0.4, ts * 0.3);
|
||||
ctx.fillStyle = '#D4A06A';
|
||||
ctx.fillRect(x + dw + ts * 0.2, y + ts * 0.45, ts * 0.2, ts * 0.08);
|
||||
} else if (f.accent === 'dice') {
|
||||
ctx.fillStyle = '#ef4444';
|
||||
ctx.fillRect(x + dw + ts * 0.15, y + ts * 0.4, ts * 0.3, ts * 0.3);
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.beginPath();
|
||||
ctx.arc(x + dw + ts * 0.3, y + ts * 0.55, ts * 0.05, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
_drawMeetingTable(ctx, f, theme, ts, x, y) {
|
||||
const w = (f.width || 4) * ts;
|
||||
const h = (f.height || 2) * ts;
|
||||
// 테이블 상판
|
||||
ctx.fillStyle = theme.furniture.table;
|
||||
ctx.fillRect(x + ts * 0.1, y + ts * 0.1, w - ts * 0.2, h - ts * 0.2);
|
||||
// 테이블 그림자
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.15)';
|
||||
ctx.fillRect(x + ts * 0.15, y + h - ts * 0.1, w - ts * 0.25, ts * 0.1);
|
||||
// 의자들 (상하 4개씩)
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const cx = x + ts * 0.5 + i * (w - ts) / 3;
|
||||
ctx.fillStyle = theme.furniture.chair;
|
||||
ctx.fillRect(cx, y - ts * 0.3, ts * 0.4, ts * 0.35);
|
||||
ctx.fillRect(cx, y + h - ts * 0.05, ts * 0.4, ts * 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
_drawSofa(ctx, theme, ts, x, y) {
|
||||
ctx.fillStyle = theme.furniture.sofa;
|
||||
ctx.fillRect(x, y, ts * 2, ts * 0.8);
|
||||
// 등받이
|
||||
ctx.fillStyle = theme.furniture.sofa;
|
||||
ctx.fillRect(x, y - ts * 0.3, ts * 2, ts * 0.35);
|
||||
// 쿠션 구분선
|
||||
ctx.strokeStyle = theme.wall.border;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + ts, y);
|
||||
ctx.lineTo(x + ts, y + ts * 0.8);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
_drawCoffeeMachine(ctx, theme, ts, x, y) {
|
||||
ctx.fillStyle = theme.furniture.coffee;
|
||||
ctx.fillRect(x + ts * 0.15, y, ts * 0.7, ts * 0.8);
|
||||
// 디스펜서
|
||||
ctx.fillStyle = theme.furniture.monitor;
|
||||
ctx.fillRect(x + ts * 0.25, y + ts * 0.15, ts * 0.5, ts * 0.3);
|
||||
// 커피 잔
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.fillRect(x + ts * 0.3, y + ts * 0.55, ts * 0.2, ts * 0.15);
|
||||
// 스팀
|
||||
ctx.strokeStyle = 'rgba(255,255,255,0.3)';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + ts * 0.4, y + ts * 0.5);
|
||||
ctx.quadraticCurveTo(x + ts * 0.45, y + ts * 0.35, x + ts * 0.4, y + ts * 0.2);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
_drawBookshelf(ctx, f, theme, ts, x, y) {
|
||||
const h = (f.height || 3) * ts;
|
||||
ctx.fillStyle = theme.furniture.shelf;
|
||||
ctx.fillRect(x, y, ts * 0.9, h);
|
||||
// 선반 및 책
|
||||
const bookColors = ['#aa4444', '#4444aa', '#44aa44', '#aaaa44', '#aa44aa', '#44aaaa'];
|
||||
const shelfCount = f.height || 3;
|
||||
for (let i = 0; i < shelfCount; i++) {
|
||||
const sy = y + i * ts + ts * 0.1;
|
||||
// 선반 판
|
||||
ctx.fillStyle = theme.furniture.shelf;
|
||||
ctx.fillRect(x, sy + ts * 0.7, ts * 0.9, ts * 0.05);
|
||||
// 책들
|
||||
for (let b = 0; b < 4; b++) {
|
||||
ctx.fillStyle = bookColors[(i * 4 + b) % bookColors.length];
|
||||
ctx.fillRect(x + ts * 0.05 + b * ts * 0.2, sy + ts * 0.1, ts * 0.15, ts * 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_drawPlant(ctx, theme, ts, x, y) {
|
||||
// 화분
|
||||
ctx.fillStyle = theme.decor.pot;
|
||||
ctx.fillRect(x + ts * 0.25, y + ts * 0.6, ts * 0.5, ts * 0.35);
|
||||
ctx.fillRect(x + ts * 0.2, y + ts * 0.55, ts * 0.6, ts * 0.1);
|
||||
// 잎
|
||||
ctx.fillStyle = theme.decor.plant;
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(x + ts * 0.5, y + ts * 0.35, ts * 0.3, ts * 0.25, 0, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(x + ts * 0.35, y + ts * 0.25, ts * 0.15, ts * 0.2, -0.3, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(x + ts * 0.65, y + ts * 0.25, ts * 0.15, ts * 0.2, 0.3, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
_drawWaterCooler(ctx, theme, ts, x, y) {
|
||||
// 본체
|
||||
ctx.fillStyle = theme.furniture.shelf;
|
||||
ctx.fillRect(x + ts * 0.2, y + ts * 0.3, ts * 0.6, ts * 0.6);
|
||||
// 물통
|
||||
ctx.fillStyle = 'rgba(100,180,255,0.5)';
|
||||
ctx.fillRect(x + ts * 0.3, y, ts * 0.4, ts * 0.35);
|
||||
ctx.fillStyle = 'rgba(100,180,255,0.3)';
|
||||
ctx.beginPath();
|
||||
ctx.arc(x + ts * 0.5, y, ts * 0.2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
@@ -1,38 +1,229 @@
|
||||
import { drawTileMap } from './TileMap';
|
||||
import { AgentSprite } from './AgentSprite';
|
||||
import { getCharLabel, drawNotificationBadge } from './SpriteSheet';
|
||||
// src/pages/agent-office/canvas/OfficeRenderer.js
|
||||
|
||||
const STATUS_ICONS = {
|
||||
idle: null,
|
||||
working: null,
|
||||
waiting: '❗',
|
||||
reporting: '📋',
|
||||
break: '☕',
|
||||
import mapData from '../assets/office-map.json';
|
||||
import { TileMap } from './TileMap.js';
|
||||
import { FurnitureRenderer } from './FurnitureRenderer.js';
|
||||
import { Pathfinder } from './Pathfinder.js';
|
||||
import { AgentSprite } from './AgentSprite.js';
|
||||
import { OverlayRenderer } from './OverlayRenderer.js';
|
||||
import { getTheme } from './themes.js';
|
||||
|
||||
const AGENT_META = {
|
||||
stock: { displayName: '주식 트레이더', emoji: '📈', color: '#4488cc' },
|
||||
music: { displayName: '음악 프로듀서', emoji: '🎵', color: '#44aa88' },
|
||||
blog: { displayName: '블로그 마케터', emoji: '✍️', color: '#d97706' },
|
||||
realestate: { displayName: '청약 애널리스트', emoji: '🏢', color: '#c026d3' },
|
||||
lotto: { displayName: '로또 큐레이터', emoji: '🎱', color: '#ef4444' }
|
||||
};
|
||||
|
||||
export class OfficeRenderer {
|
||||
constructor(canvas, mapData) {
|
||||
constructor(canvas) {
|
||||
this.canvas = canvas;
|
||||
this.ctx = canvas.getContext('2d');
|
||||
this.mapData = mapData;
|
||||
this.renderInfo = null;
|
||||
this.agents = {};
|
||||
this._animId = null;
|
||||
this._onClick = null;
|
||||
this._onCeoClick = null;
|
||||
this._ceoDocBadge = 0;
|
||||
|
||||
const agentIds = ['stock', 'music', 'blog', 'realestate'];
|
||||
for (const id of agentIds) {
|
||||
this.agents[id] = new AgentSprite(id, mapData.waypoints);
|
||||
// 맵 & 렌더러
|
||||
this.tileMap = new TileMap(mapData);
|
||||
this.furnitureRenderer = new FurnitureRenderer(mapData.furniture, mapData.tileSize);
|
||||
this.pathfinder = new Pathfinder(mapData.cols, mapData.rows);
|
||||
this.overlayRenderer = new OverlayRenderer();
|
||||
|
||||
// blocked 타일 설정
|
||||
this.pathfinder.setWalls(mapData.floor);
|
||||
this.pathfinder.setBlocked(mapData.blocked);
|
||||
|
||||
// 테마 & 뷰포트
|
||||
this.theme = getTheme(
|
||||
(typeof localStorage !== 'undefined' && localStorage.getItem('agent-office-theme')) || 'modern'
|
||||
);
|
||||
this.zoom = 2;
|
||||
this.panX = 0;
|
||||
this.panY = 0;
|
||||
this._isPanning = false;
|
||||
this._panStart = { x: 0, y: 0 };
|
||||
|
||||
// 에이전트
|
||||
this.agents = new Map();
|
||||
this._initAgents();
|
||||
|
||||
// 게임 루프
|
||||
this._lastTime = 0;
|
||||
this._animId = null;
|
||||
this._lastDpr = window.devicePixelRatio || 1;
|
||||
|
||||
// 드래그 감지
|
||||
this._mouseDownPos = { x: 0, y: 0 };
|
||||
this._wasDragging = false;
|
||||
|
||||
// 이벤트
|
||||
this._setupInputHandlers();
|
||||
}
|
||||
|
||||
_initAgents() {
|
||||
for (const [id, meta] of Object.entries(AGENT_META)) {
|
||||
const waypoint = mapData.waypoints[`desk_${id}`];
|
||||
if (!waypoint) continue;
|
||||
const sprite = new AgentSprite(id, meta, waypoint.col, waypoint.row, this.pathfinder);
|
||||
sprite.deskCol = waypoint.col;
|
||||
sprite.deskRow = waypoint.row;
|
||||
this.agents.set(id, sprite);
|
||||
}
|
||||
}
|
||||
|
||||
start() {
|
||||
this._loop = this._loop.bind(this);
|
||||
this._animId = requestAnimationFrame(this._loop);
|
||||
/** 줌/팬/클릭 이벤트 핸들러 */
|
||||
_setupInputHandlers() {
|
||||
// 마우스 휠 줌
|
||||
this.canvas.addEventListener('wheel', (e) => {
|
||||
e.preventDefault();
|
||||
const oldZoom = this.zoom;
|
||||
if (e.deltaY < 0) {
|
||||
this.zoom = Math.min(this.zoom + 0.5, 4);
|
||||
} else {
|
||||
this.zoom = Math.max(this.zoom - 0.5, 1);
|
||||
}
|
||||
// 마우스 위치 기준 줌
|
||||
if (this.zoom !== oldZoom) {
|
||||
const rect = this.canvas.getBoundingClientRect();
|
||||
const mx = e.clientX - rect.left;
|
||||
const my = e.clientY - rect.top;
|
||||
const ratio = this.zoom / oldZoom;
|
||||
this.panX = mx - (mx - this.panX) * ratio;
|
||||
this.panY = my - (my - this.panY) * ratio;
|
||||
}
|
||||
}, { passive: false });
|
||||
|
||||
// 마우스 드래그 패닝
|
||||
this.canvas.addEventListener('mousedown', (e) => {
|
||||
if (e.button === 0) {
|
||||
this._isPanning = true;
|
||||
this._panStart = { x: e.clientX - this.panX, y: e.clientY - this.panY };
|
||||
this._mouseDownPos = { x: e.clientX, y: e.clientY };
|
||||
this._wasDragging = false;
|
||||
}
|
||||
});
|
||||
this._onMouseMove = (e) => {
|
||||
if (this._isPanning) {
|
||||
this.panX = e.clientX - this._panStart.x;
|
||||
this.panY = e.clientY - this._panStart.y;
|
||||
const dx = e.clientX - this._mouseDownPos.x;
|
||||
const dy = e.clientY - this._mouseDownPos.y;
|
||||
if (Math.abs(dx) > 5 || Math.abs(dy) > 5) this._wasDragging = true;
|
||||
}
|
||||
};
|
||||
this._onMouseUp = () => {
|
||||
this._isPanning = false;
|
||||
};
|
||||
window.addEventListener('mousemove', this._onMouseMove);
|
||||
window.addEventListener('mouseup', this._onMouseUp);
|
||||
|
||||
// 터치 (모바일)
|
||||
let lastTouchDist = 0;
|
||||
let lastTouchCenter = { x: 0, y: 0 };
|
||||
this.canvas.addEventListener('touchstart', (e) => {
|
||||
if (e.touches.length === 1) {
|
||||
this._isPanning = true;
|
||||
this._panStart = { x: e.touches[0].clientX - this.panX, y: e.touches[0].clientY - this.panY };
|
||||
} else if (e.touches.length === 2) {
|
||||
this._isPanning = false;
|
||||
const dx = e.touches[0].clientX - e.touches[1].clientX;
|
||||
const dy = e.touches[0].clientY - e.touches[1].clientY;
|
||||
lastTouchDist = Math.hypot(dx, dy);
|
||||
lastTouchCenter = {
|
||||
x: (e.touches[0].clientX + e.touches[1].clientX) / 2,
|
||||
y: (e.touches[0].clientY + e.touches[1].clientY) / 2
|
||||
};
|
||||
}
|
||||
}, { passive: false });
|
||||
this.canvas.addEventListener('touchmove', (e) => {
|
||||
e.preventDefault();
|
||||
if (e.touches.length === 1 && this._isPanning) {
|
||||
this.panX = e.touches[0].clientX - this._panStart.x;
|
||||
this.panY = e.touches[0].clientY - this._panStart.y;
|
||||
} else if (e.touches.length === 2) {
|
||||
const dx = e.touches[0].clientX - e.touches[1].clientX;
|
||||
const dy = e.touches[0].clientY - e.touches[1].clientY;
|
||||
const dist = Math.hypot(dx, dy);
|
||||
const oldZoom = this.zoom;
|
||||
this.zoom = Math.min(4, Math.max(1, this.zoom * (dist / lastTouchDist)));
|
||||
lastTouchDist = dist;
|
||||
const rect = this.canvas.getBoundingClientRect();
|
||||
const cx = lastTouchCenter.x - rect.left;
|
||||
const cy = lastTouchCenter.y - rect.top;
|
||||
const ratio = this.zoom / oldZoom;
|
||||
this.panX = cx - (cx - this.panX) * ratio;
|
||||
this.panY = cy - (cy - this.panY) * ratio;
|
||||
}
|
||||
}, { passive: false });
|
||||
this.canvas.addEventListener('touchend', () => {
|
||||
this._isPanning = false;
|
||||
});
|
||||
}
|
||||
|
||||
/** 클릭 히트 테스트 — AgentOffice에서 호출 */
|
||||
hitTest(clientX, clientY) {
|
||||
const rect = this.canvas.getBoundingClientRect();
|
||||
const screenX = clientX - rect.left;
|
||||
const screenY = clientY - rect.top;
|
||||
const { col, row } = this.tileMap.screenToTile(screenX, screenY, this.zoom, this.panX, this.panY);
|
||||
|
||||
// 에이전트 히트 (역순, 최상위 우선)
|
||||
for (const [id, sprite] of [...this.agents.entries()].reverse()) {
|
||||
const dx = Math.abs(sprite.x - col);
|
||||
const dy = Math.abs(sprite.y - row);
|
||||
if (dx < 1.2 && dy < 1.5) {
|
||||
return { type: 'agent', id };
|
||||
}
|
||||
}
|
||||
return { type: 'empty' };
|
||||
}
|
||||
|
||||
/** 에이전트 상태 업데이트 (WebSocket에서 호출) */
|
||||
updateAgentState(agentId, state, detail) {
|
||||
const sprite = this.agents.get(agentId);
|
||||
if (!sprite) return;
|
||||
sprite.onStateChange(state, detail, mapData.waypoints);
|
||||
}
|
||||
|
||||
/** 에이전트 알림 배지 설정 */
|
||||
setAgentNotification(agentId, count) {
|
||||
const sprite = this.agents.get(agentId);
|
||||
if (sprite) sprite.notificationCount = count;
|
||||
}
|
||||
|
||||
/** 테마 변경 */
|
||||
setTheme(themeName) {
|
||||
this.theme = getTheme(themeName);
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
localStorage.setItem('agent-office-theme', themeName);
|
||||
}
|
||||
}
|
||||
|
||||
/** 줌 레벨 설정 */
|
||||
setZoom(level) {
|
||||
const cx = this.canvas.width / 2;
|
||||
const cy = this.canvas.height / 2;
|
||||
const oldZoom = this.zoom;
|
||||
this.zoom = Math.min(4, Math.max(1, level));
|
||||
const ratio = this.zoom / oldZoom;
|
||||
this.panX = cx - (cx - this.panX) * ratio;
|
||||
this.panY = cy - (cy - this.panY) * ratio;
|
||||
}
|
||||
|
||||
/** 카메라를 맵 중앙에 맞추기 */
|
||||
centerCamera() {
|
||||
const mapW = mapData.cols * mapData.tileSize * this.zoom;
|
||||
const mapH = mapData.rows * mapData.tileSize * this.zoom;
|
||||
this.panX = (this.canvas.clientWidth - mapW) / 2;
|
||||
this.panY = (this.canvas.clientHeight - mapH) / 2;
|
||||
}
|
||||
|
||||
/** 게임 루프 시작 */
|
||||
start() {
|
||||
this.centerCamera();
|
||||
this._lastTime = performance.now();
|
||||
this._loop(this._lastTime);
|
||||
}
|
||||
|
||||
/** 게임 루프 중지 */
|
||||
stop() {
|
||||
if (this._animId) {
|
||||
cancelAnimationFrame(this._animId);
|
||||
@@ -40,172 +231,86 @@ export class OfficeRenderer {
|
||||
}
|
||||
}
|
||||
|
||||
resize(width, height) {
|
||||
this.canvas.width = width;
|
||||
this.canvas.height = height;
|
||||
}
|
||||
|
||||
setOnClick(handler) {
|
||||
this._onClick = handler;
|
||||
}
|
||||
|
||||
handleClick(canvasX, canvasY) {
|
||||
if (!this.renderInfo) return null;
|
||||
|
||||
for (const [id, sprite] of Object.entries(this.agents)) {
|
||||
if (sprite.hitTest(canvasX, canvasY, this.renderInfo)) {
|
||||
if (this._onClick) this._onClick(id);
|
||||
return id;
|
||||
}
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
|
||||
updateAgentState(agentId, state, detail) {
|
||||
const sprite = this.agents[agentId];
|
||||
if (sprite) {
|
||||
sprite.setState(state, detail);
|
||||
if (state === 'idle' || state === 'working' || state === 'waiting') {
|
||||
sprite.moveToDesk();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
moveAgent(agentId, target) {
|
||||
const sprite = this.agents[agentId];
|
||||
if (sprite) {
|
||||
sprite.moveTo(target);
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
const dt = Math.min((timestamp - this._lastTime) / 1000, 0.1); // cap dt to avoid spiral
|
||||
this._lastTime = timestamp;
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = '#1a1a2e';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
this._update(dt);
|
||||
this._render();
|
||||
|
||||
this.renderInfo = drawTileMap(ctx, mapData, canvas.width, canvas.height);
|
||||
|
||||
const now = Date.now();
|
||||
for (const sprite of Object.values(this.agents)) {
|
||||
sprite.update(now);
|
||||
sprite.draw(ctx, this.renderInfo);
|
||||
}
|
||||
|
||||
for (const [id, sprite] of Object.entries(this.agents)) {
|
||||
this._drawOverlay(ctx, sprite, id);
|
||||
}
|
||||
|
||||
// CEO desk document icon
|
||||
this._drawCeoDoc(ctx);
|
||||
|
||||
this._animId = requestAnimationFrame(this._loop);
|
||||
this._animId = requestAnimationFrame((t) => this._loop(t));
|
||||
}
|
||||
|
||||
_drawOverlay(ctx, sprite, agentId) {
|
||||
if (!this.renderInfo) return;
|
||||
const { scale, offsetX, offsetY, tileSize } = this.renderInfo;
|
||||
const cx = offsetX + sprite.x * tileSize * scale + (tileSize * scale) / 2;
|
||||
const cy = offsetY + sprite.y * tileSize * scale - 10 * scale;
|
||||
|
||||
const icon = STATUS_ICONS[sprite.state];
|
||||
if (icon) {
|
||||
ctx.font = `${14 * scale}px serif`;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(icon, cx, cy - 15 * scale);
|
||||
}
|
||||
|
||||
// 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';
|
||||
ctx.fillText(getCharLabel(agentId), cx, cy + 30 * scale + 30);
|
||||
|
||||
if (sprite.detail && (sprite.state === 'working' || sprite.state === 'waiting')) {
|
||||
const bubbleY = cy - 25 * scale;
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.7)';
|
||||
const textW = ctx.measureText(sprite.detail).width;
|
||||
ctx.fillRect(cx - textW / 2 - 6, bubbleY - 10, textW + 12, 16);
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.font = `${7 * scale}px monospace`;
|
||||
ctx.fillText(sprite.detail, cx, bubbleY);
|
||||
_update(dt) {
|
||||
for (const sprite of this.agents.values()) {
|
||||
sprite.update(dt);
|
||||
}
|
||||
}
|
||||
|
||||
_drawCeoDoc(ctx) {
|
||||
if (!this.renderInfo) return;
|
||||
const ceo = this.mapData.waypoints.ceo_desk;
|
||||
if (!ceo) return;
|
||||
_render() {
|
||||
const ctx = this.ctx;
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
|
||||
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);
|
||||
// 캔버스 크기 조정
|
||||
const displayW = this.canvas.clientWidth;
|
||||
const displayH = this.canvas.clientHeight;
|
||||
if (this.canvas.width !== displayW * dpr || this.canvas.height !== displayH * dpr || this._lastDpr !== dpr) {
|
||||
this.canvas.width = displayW * dpr;
|
||||
this.canvas.height = displayH * dpr;
|
||||
this._lastDpr = dpr;
|
||||
}
|
||||
// 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();
|
||||
// setTransform 방식으로 누적 없이 항상 올바른 변환 적용
|
||||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
|
||||
// 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);
|
||||
ctx.imageSmoothingEnabled = false;
|
||||
ctx.clearRect(0, 0, displayW, displayH);
|
||||
|
||||
// 배경
|
||||
ctx.fillStyle = this.theme.wall.color;
|
||||
ctx.fillRect(0, 0, displayW, displayH);
|
||||
|
||||
// 1. 타일맵 (바닥 + 벽)
|
||||
this.tileMap.render(ctx, this.theme, this.zoom, this.panX, this.panY);
|
||||
|
||||
// 2. Y-sorted: 가구 + 에이전트
|
||||
const renderables = [];
|
||||
|
||||
// 가구
|
||||
const furnitureItems = this.furnitureRenderer.getRenderables(this.theme, this.zoom, this.panX, this.panY);
|
||||
renderables.push(...furnitureItems);
|
||||
|
||||
// 에이전트
|
||||
for (const sprite of this.agents.values()) {
|
||||
renderables.push({
|
||||
zY: sprite.y,
|
||||
draw: (ctx2) => sprite.draw(ctx2, this.zoom, this.panX, this.panY, mapData.tileSize)
|
||||
});
|
||||
}
|
||||
|
||||
// Y좌표 정렬
|
||||
renderables.sort((a, b) => a.zY - b.zY);
|
||||
for (const item of renderables) {
|
||||
item.draw(ctx);
|
||||
}
|
||||
|
||||
// 3. 오버레이 (항상 최상위)
|
||||
for (const sprite of this.agents.values()) {
|
||||
this.overlayRenderer.draw(ctx, sprite, this.theme, this.zoom, this.panX, this.panY, mapData.tileSize);
|
||||
}
|
||||
}
|
||||
|
||||
/** 드래그 여부 반환 (클릭 이벤트 필터링용) */
|
||||
wasDragging() { return this._wasDragging; }
|
||||
|
||||
/** 리사이즈 처리 */
|
||||
resize() {
|
||||
// 다음 프레임에서 자동 조정됨 (_render에서 크기 체크)
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.stop();
|
||||
// window 이벤트 리스너 정리
|
||||
if (this._onMouseMove) window.removeEventListener('mousemove', this._onMouseMove);
|
||||
if (this._onMouseUp) window.removeEventListener('mouseup', this._onMouseUp);
|
||||
}
|
||||
}
|
||||
|
||||
122
src/pages/agent-office/canvas/OverlayRenderer.js
Normal file
122
src/pages/agent-office/canvas/OverlayRenderer.js
Normal file
@@ -0,0 +1,122 @@
|
||||
// src/pages/agent-office/canvas/OverlayRenderer.js
|
||||
|
||||
/**
|
||||
* 캔버스 위 오버레이 렌더링:
|
||||
* - 이름 라벨 (항상)
|
||||
* - 상태 배지 (항상)
|
||||
* - 말풍선 (waiting 상태에서만)
|
||||
* - 알림 배지 (notification > 0 일 때)
|
||||
*/
|
||||
|
||||
const STATE_BADGE = {
|
||||
idle: { text: 'idle', bg: '#374151', fg: '#9ca3af' },
|
||||
working: { text: 'working', bg: '#1e3a5f', fg: '#60a5fa' },
|
||||
waiting: { text: 'waiting', bg: '#92400e', fg: '#fbbf24' },
|
||||
reporting: { text: 'reporting', bg: '#1e3a5f', fg: '#60a5fa' },
|
||||
break: { text: 'break', bg: '#065f46', fg: '#34d399' }
|
||||
};
|
||||
|
||||
export class OverlayRenderer {
|
||||
constructor() {
|
||||
this._bubbleAlpha = new Map(); // agentId → alpha (fade in/out)
|
||||
}
|
||||
|
||||
draw(ctx, sprite, theme, zoom, panX, panY, tileSize) {
|
||||
const ts = tileSize * zoom;
|
||||
const centerX = sprite.x * ts + panX + ts / 2;
|
||||
const topY = sprite.y * ts + panY - ts * 0.3;
|
||||
|
||||
const fontSize = Math.max(10, 11 * zoom / 2);
|
||||
const smallFontSize = Math.max(8, 9 * zoom / 2);
|
||||
|
||||
// 1. 이름 라벨
|
||||
ctx.font = `bold ${fontSize}px 'Courier New', monospace`;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillStyle = sprite.meta.color;
|
||||
ctx.fillText(sprite.meta.displayName, centerX, topY + ts * 1.85);
|
||||
|
||||
// 2. 상태 배지
|
||||
const badge = STATE_BADGE[sprite.state] || STATE_BADGE.idle;
|
||||
const badgeText = badge.text;
|
||||
ctx.font = `${smallFontSize}px 'Courier New', monospace`;
|
||||
const badgeW = ctx.measureText(badgeText).width + 8;
|
||||
const badgeH = smallFontSize + 4;
|
||||
const badgeX = centerX - badgeW / 2;
|
||||
const badgeY = topY + ts * 1.9;
|
||||
|
||||
ctx.fillStyle = badge.bg;
|
||||
this._roundRect(ctx, badgeX, badgeY, badgeW, badgeH, 3);
|
||||
ctx.fill();
|
||||
ctx.fillStyle = badge.fg;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(badgeText, centerX, badgeY + badgeH - 3);
|
||||
|
||||
// 3. 말풍선 (waiting 상태에서만)
|
||||
if (sprite.state === 'waiting') {
|
||||
this._drawBubble(ctx, sprite, centerX, topY - ts * 0.2, zoom);
|
||||
}
|
||||
|
||||
// 4. 알림 배지
|
||||
if (sprite.notificationCount > 0) {
|
||||
this._drawNotificationBadge(ctx, centerX + ts * 0.5, topY + ts * 0.2, sprite.notificationCount, zoom);
|
||||
}
|
||||
}
|
||||
|
||||
_drawBubble(ctx, sprite, x, y, zoom) {
|
||||
const text = '승인 대기!';
|
||||
const fontSize = Math.max(10, 11 * zoom / 2);
|
||||
ctx.font = `bold ${fontSize}px 'Courier New', monospace`;
|
||||
const tw = ctx.measureText(text).width;
|
||||
const pw = tw + 16;
|
||||
const ph = fontSize + 12;
|
||||
const px = x - pw / 2;
|
||||
const py = y - ph;
|
||||
|
||||
// 말풍선 배경
|
||||
ctx.fillStyle = '#fbbf24';
|
||||
this._roundRect(ctx, px, py, pw, ph, 6);
|
||||
ctx.fill();
|
||||
|
||||
// 꼬리 삼각형
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x - 5, py + ph);
|
||||
ctx.lineTo(x + 5, py + ph);
|
||||
ctx.lineTo(x, py + ph + 6);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
|
||||
// 텍스트
|
||||
ctx.fillStyle = '#000000';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(text, x, py + ph - 5);
|
||||
}
|
||||
|
||||
_drawNotificationBadge(ctx, x, y, count, zoom) {
|
||||
const r = Math.max(7, 8 * zoom / 2);
|
||||
ctx.fillStyle = '#ef4444';
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, r, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.font = `bold ${r}px sans-serif`;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText(count > 9 ? '9+' : String(count), x, y);
|
||||
ctx.textBaseline = 'alphabetic';
|
||||
}
|
||||
|
||||
_roundRect(ctx, x, y, w, h, r) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + r, y);
|
||||
ctx.lineTo(x + w - r, y);
|
||||
ctx.quadraticCurveTo(x + w, y, x + w, y + r);
|
||||
ctx.lineTo(x + w, y + h - r);
|
||||
ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
|
||||
ctx.lineTo(x + r, y + h);
|
||||
ctx.quadraticCurveTo(x, y + h, x, y + h - r);
|
||||
ctx.lineTo(x, y + r);
|
||||
ctx.quadraticCurveTo(x, y, x + r, y);
|
||||
ctx.closePath();
|
||||
}
|
||||
}
|
||||
112
src/pages/agent-office/canvas/Pathfinder.js
Normal file
112
src/pages/agent-office/canvas/Pathfinder.js
Normal file
@@ -0,0 +1,112 @@
|
||||
// src/pages/agent-office/canvas/Pathfinder.js
|
||||
|
||||
/**
|
||||
* BFS 4방향 경로 탐색 (대각선 없음)
|
||||
* blocked 타일과 벽 타일을 회피하여 최단 경로 반환
|
||||
*/
|
||||
export class Pathfinder {
|
||||
constructor(cols, rows) {
|
||||
this.cols = cols;
|
||||
this.rows = rows;
|
||||
this.blocked = new Set();
|
||||
}
|
||||
|
||||
/** blocked 타일 세팅 (wall + furniture footprint) */
|
||||
setBlocked(blockedList) {
|
||||
// Do NOT clear — setWalls already added wall tiles
|
||||
for (const [col, row] of blockedList) {
|
||||
this.blocked.add(`${col},${row}`);
|
||||
}
|
||||
}
|
||||
|
||||
/** wall 타일도 blocked로 추가 (floor 배열에서 0인 셀) */
|
||||
setWalls(floorGrid) {
|
||||
for (let r = 0; r < this.rows; r++) {
|
||||
for (let c = 0; c < this.cols; c++) {
|
||||
if (floorGrid[r][c] === 0) {
|
||||
this.blocked.add(`${c},${r}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isBlocked(col, row) {
|
||||
if (col < 0 || col >= this.cols || row < 0 || row >= this.rows) return true;
|
||||
return this.blocked.has(`${col},${row}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* BFS 최단 경로
|
||||
* @returns {Array<{col, row}>} 시작점 제외, 도착점 포함 경로. 경로 없으면 빈 배열.
|
||||
*/
|
||||
findPath(startCol, startRow, goalCol, goalRow) {
|
||||
if (startCol === goalCol && startRow === goalRow) return [];
|
||||
|
||||
const key = (c, r) => `${c},${r}`;
|
||||
const startKey = key(startCol, startRow);
|
||||
const goalKey = key(goalCol, goalRow);
|
||||
|
||||
const queue = [{ col: startCol, row: startRow }];
|
||||
const visited = new Set([startKey]);
|
||||
const parent = new Map();
|
||||
|
||||
const dirs = [
|
||||
{ dc: 0, dr: -1 }, // up
|
||||
{ dc: 0, dr: 1 }, // down
|
||||
{ dc: -1, dr: 0 }, // left
|
||||
{ dc: 1, dr: 0 } // right
|
||||
];
|
||||
|
||||
while (queue.length > 0) {
|
||||
const current = queue.shift();
|
||||
|
||||
for (const { dc, dr } of dirs) {
|
||||
const nc = current.col + dc;
|
||||
const nr = current.row + dr;
|
||||
const nk = key(nc, nr);
|
||||
|
||||
if (visited.has(nk)) continue;
|
||||
// 골 지점은 blocked여도 이동 가능 (에이전트가 자기 자리에 앉으려면)
|
||||
if (nk !== goalKey && this.isBlocked(nc, nr)) continue;
|
||||
|
||||
visited.add(nk);
|
||||
parent.set(nk, key(current.col, current.row));
|
||||
queue.push({ col: nc, row: nr });
|
||||
|
||||
if (nc === goalCol && nr === goalRow) {
|
||||
return this._reconstructPath(parent, startKey, goalKey);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return []; // 경로 없음
|
||||
}
|
||||
|
||||
_reconstructPath(parent, startKey, goalKey) {
|
||||
const path = [];
|
||||
let current = goalKey;
|
||||
while (current !== startKey) {
|
||||
const [c, r] = current.split(',').map(Number);
|
||||
path.unshift({ col: c, row: r });
|
||||
current = parent.get(current);
|
||||
}
|
||||
return path;
|
||||
}
|
||||
|
||||
/** idle 배회용: start 주변 반경 내 랜덤 walkable 타일 */
|
||||
getRandomNearbyFloor(col, row, radius = 4) {
|
||||
const candidates = [];
|
||||
for (let dr = -radius; dr <= radius; dr++) {
|
||||
for (let dc = -radius; dc <= radius; dc++) {
|
||||
const nc = col + dc;
|
||||
const nr = row + dr;
|
||||
if (nc === col && nr === row) continue;
|
||||
if (!this.isBlocked(nc, nr)) {
|
||||
candidates.push({ col: nc, row: nr });
|
||||
}
|
||||
}
|
||||
}
|
||||
if (candidates.length === 0) return null;
|
||||
return candidates[Math.floor(Math.random() * candidates.length)];
|
||||
}
|
||||
}
|
||||
164
src/pages/agent-office/canvas/ProceduralSprite.js
Normal file
164
src/pages/agent-office/canvas/ProceduralSprite.js
Normal file
@@ -0,0 +1,164 @@
|
||||
// src/pages/agent-office/canvas/ProceduralSprite.js
|
||||
|
||||
/**
|
||||
* 프로시저럴 픽셀 캐릭터 렌더러 (16×32px 기본 해상도)
|
||||
* Phase 1: 코드로 캐릭터를 그림
|
||||
* Phase 2: SpriteLoader가 PNG 스프라이트로 대체
|
||||
*/
|
||||
|
||||
const AGENT_COLORS = {
|
||||
stock: { body: '#4488cc', hair: '#2255aa', accent: '#66aaee' },
|
||||
music: { body: '#44aa88', hair: '#228866', accent: '#66ccaa' },
|
||||
blog: { body: '#d97706', hair: '#b45e04', accent: '#f59e0b' },
|
||||
realestate: { body: '#c026d3', hair: '#9b1dab', accent: '#e044f0' },
|
||||
lotto: { body: '#ef4444', hair: '#cc2222', accent: '#ff6666' }
|
||||
};
|
||||
|
||||
/** 애니메이션 프레임 설정 */
|
||||
const ANIM_CONFIG = {
|
||||
idle: { frames: 2, speed: 0.8 },
|
||||
walk: { frames: 4, speed: 0.15, cycle: [0, 1, 2, 1] },
|
||||
type: { frames: 2, speed: 0.3 },
|
||||
wait: { frames: 2, speed: 0.5 },
|
||||
break_anim:{ frames: 2, speed: 1.0 }
|
||||
};
|
||||
|
||||
export class ProceduralSprite {
|
||||
/**
|
||||
* 캐릭터 1프레임 렌더링
|
||||
* @param {CanvasRenderingContext2D} ctx
|
||||
* @param {string} agentId
|
||||
* @param {string} state - idle|walk|type|wait|break_anim
|
||||
* @param {string} direction - down|up|right|left
|
||||
* @param {number} frame - 현재 애니메이션 프레임 인덱스
|
||||
* @param {number} x - 캔버스 X 좌표 (캐릭터 중앙 하단)
|
||||
* @param {number} y - 캔버스 Y 좌표 (캐릭터 중앙 하단)
|
||||
* @param {number} scale - 렌더링 스케일
|
||||
*/
|
||||
static draw(ctx, agentId, state, direction, frame, x, y, scale) {
|
||||
const colors = AGENT_COLORS[agentId] || AGENT_COLORS.stock;
|
||||
const px = scale; // 1 pixel = scale 크기
|
||||
const w = 16 * px;
|
||||
const h = 32 * px;
|
||||
const bx = x - w / 2; // 좌상단 기준
|
||||
const by = y - h;
|
||||
|
||||
ctx.save();
|
||||
|
||||
// 좌우 반전 (left = right 플립)
|
||||
if (direction === 'left') {
|
||||
ctx.translate(x, 0);
|
||||
ctx.scale(-1, 1);
|
||||
ctx.translate(-x, 0);
|
||||
}
|
||||
|
||||
// 그림자
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.2)';
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(x, y, w * 0.35, px * 2, 0, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
// 상태별 오프셋
|
||||
let bodyOffsetY = 0;
|
||||
let legSpread = 0;
|
||||
let armAngle = 0;
|
||||
|
||||
if (state === 'walk') {
|
||||
const walkFrame = ANIM_CONFIG.walk.cycle[frame % 4];
|
||||
legSpread = (walkFrame - 1) * px * 2;
|
||||
bodyOffsetY = walkFrame === 1 ? -px : 0;
|
||||
} else if (state === 'type') {
|
||||
armAngle = frame % 2 === 0 ? 1 : -1;
|
||||
bodyOffsetY = frame % 2 === 0 ? 0 : -px * 0.5;
|
||||
} else if (state === 'wait') {
|
||||
bodyOffsetY = Math.sin(frame * Math.PI) * px;
|
||||
} else if (state === 'idle') {
|
||||
bodyOffsetY = frame % 2 === 0 ? 0 : -px * 0.5;
|
||||
} else if (state === 'break_anim') {
|
||||
bodyOffsetY = frame % 2 === 0 ? 0 : px * 0.5; // 졸기
|
||||
}
|
||||
|
||||
const by2 = by + bodyOffsetY;
|
||||
|
||||
// 다리
|
||||
ctx.fillStyle = '#2a2a3e';
|
||||
// 왼쪽 다리
|
||||
ctx.fillRect(bx + px * 4 - legSpread, by2 + px * 24, px * 3, px * 8);
|
||||
// 오른쪽 다리
|
||||
ctx.fillRect(bx + px * 9 + legSpread, by2 + px * 24, px * 3, px * 8);
|
||||
// 신발
|
||||
ctx.fillStyle = '#333';
|
||||
ctx.fillRect(bx + px * 3 - legSpread, by2 + px * 30, px * 5, px * 2);
|
||||
ctx.fillRect(bx + px * 8 + legSpread, by2 + px * 30, px * 5, px * 2);
|
||||
|
||||
// 몸통
|
||||
ctx.fillStyle = colors.body;
|
||||
ctx.fillRect(bx + px * 3, by2 + px * 12, px * 10, px * 13);
|
||||
|
||||
// 팔
|
||||
if (state === 'type') {
|
||||
// 타이핑: 팔 앞으로 뻗음
|
||||
ctx.fillStyle = colors.body;
|
||||
ctx.fillRect(bx + px * 1, by2 + px * 13, px * 3, px * 8 + armAngle * px);
|
||||
ctx.fillRect(bx + px * 12, by2 + px * 13, px * 3, px * 8 - armAngle * px);
|
||||
// 손
|
||||
ctx.fillStyle = '#ffcc99';
|
||||
ctx.fillRect(bx + px * 1, by2 + px * 20 + armAngle * px, px * 3, px * 3);
|
||||
ctx.fillRect(bx + px * 12, by2 + px * 20 - armAngle * px, px * 3, px * 3);
|
||||
} else {
|
||||
// 기본 팔
|
||||
ctx.fillStyle = colors.body;
|
||||
ctx.fillRect(bx + px * 1, by2 + px * 13, px * 3, px * 10);
|
||||
ctx.fillRect(bx + px * 12, by2 + px * 13, px * 3, px * 10);
|
||||
// 손
|
||||
ctx.fillStyle = '#ffcc99';
|
||||
ctx.fillRect(bx + px * 1, by2 + px * 22, px * 3, px * 3);
|
||||
ctx.fillRect(bx + px * 12, by2 + px * 22, px * 3, px * 3);
|
||||
}
|
||||
|
||||
// 머리
|
||||
ctx.fillStyle = '#ffcc99'; // 피부색
|
||||
ctx.fillRect(bx + px * 4, by2 + px * 2, px * 8, px * 10);
|
||||
|
||||
// 머리카락
|
||||
ctx.fillStyle = colors.hair;
|
||||
ctx.fillRect(bx + px * 3, by2 + px * 1, px * 10, px * 4);
|
||||
if (direction === 'down' || direction === 'left' || direction === 'right') {
|
||||
// 앞머리
|
||||
ctx.fillRect(bx + px * 4, by2 + px * 3, px * 2, px * 2);
|
||||
}
|
||||
|
||||
// 눈
|
||||
if (direction !== 'up') {
|
||||
ctx.fillStyle = '#222';
|
||||
if (state === 'break_anim' && frame % 2 === 1) {
|
||||
// 졸기: 눈 감음
|
||||
ctx.fillRect(bx + px * 5, by2 + px * 6, px * 2, px);
|
||||
ctx.fillRect(bx + px * 9, by2 + px * 6, px * 2, px);
|
||||
} else {
|
||||
ctx.fillRect(bx + px * 5, by2 + px * 5, px * 2, px * 2);
|
||||
ctx.fillRect(bx + px * 9, by2 + px * 5, px * 2, px * 2);
|
||||
}
|
||||
}
|
||||
|
||||
// break 소품: 커피잔
|
||||
if (state === 'break_anim') {
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.fillRect(bx + px * 14, by2 + px * 16, px * 3, px * 4);
|
||||
ctx.fillStyle = '#8B4513';
|
||||
ctx.fillRect(bx + px * 14.5, by2 + px * 16.5, px * 2, px * 2);
|
||||
}
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
static getAnimConfig(state) {
|
||||
const mapped = state === 'working' ? 'type'
|
||||
: state === 'waiting' ? 'wait'
|
||||
: state === 'reporting' ? 'type'
|
||||
: state === 'break' ? 'break_anim'
|
||||
: state === 'walk' ? 'walk'
|
||||
: 'idle';
|
||||
return { ...(ANIM_CONFIG[mapped] || ANIM_CONFIG.idle), mapped };
|
||||
}
|
||||
}
|
||||
77
src/pages/agent-office/canvas/SpriteLoader.js
Normal file
77
src/pages/agent-office/canvas/SpriteLoader.js
Normal file
@@ -0,0 +1,77 @@
|
||||
// src/pages/agent-office/canvas/SpriteLoader.js
|
||||
|
||||
import { ProceduralSprite } from './ProceduralSprite.js';
|
||||
|
||||
/**
|
||||
* 스프라이트 로더 — PNG 스프라이트시트가 있으면 사용, 없으면 프로시저럴 폴백
|
||||
*
|
||||
* 스프라이트시트 규격 (Phase 2):
|
||||
* - 프레임 크기: 16×32px
|
||||
* - 행: 방향 (0=down, 1=up, 2=right)
|
||||
* - 열: 상태별 프레임 (idle 2 | walk 4 | type 2 | wait 2 | break 2 = 12열)
|
||||
*/
|
||||
export class SpriteLoader {
|
||||
constructor() {
|
||||
this.sprites = new Map(); // agentId → { image: Image, loaded: boolean }
|
||||
}
|
||||
|
||||
/** PNG 스프라이트시트 로드 시도 */
|
||||
async tryLoad(agentId, url) {
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
this.sprites.set(agentId, { image: img, loaded: true });
|
||||
resolve(true);
|
||||
};
|
||||
img.onerror = () => {
|
||||
resolve(false); // 폴백 사용
|
||||
};
|
||||
img.src = url;
|
||||
});
|
||||
}
|
||||
|
||||
hasSprite(agentId) {
|
||||
return this.sprites.has(agentId) && this.sprites.get(agentId).loaded;
|
||||
}
|
||||
|
||||
/**
|
||||
* 에이전트 1프레임 그리기 (스프라이트 또는 프로시저럴)
|
||||
*/
|
||||
draw(ctx, agentId, state, direction, frame, x, y, scale) {
|
||||
if (this.hasSprite(agentId)) {
|
||||
this._drawFromSheet(ctx, agentId, state, direction, frame, x, y, scale);
|
||||
} else {
|
||||
ProceduralSprite.draw(ctx, agentId, state, direction, frame, x, y, scale);
|
||||
}
|
||||
}
|
||||
|
||||
_drawFromSheet(ctx, agentId, state, direction, frame, x, y, scale) {
|
||||
const { image } = this.sprites.get(agentId);
|
||||
const frameW = 16;
|
||||
const frameH = 32;
|
||||
|
||||
// 방향 → 행
|
||||
const dirRow = direction === 'up' ? 1 : direction === 'right' || direction === 'left' ? 2 : 0;
|
||||
|
||||
// 상태 → 열 오프셋
|
||||
const stateOffsets = { idle: 0, walk: 2, type: 6, wait: 8, break_anim: 10 };
|
||||
const mappedState = state === 'working' ? 'type' : state === 'waiting' ? 'wait'
|
||||
: state === 'reporting' ? 'type' : state === 'break' ? 'break_anim'
|
||||
: state === 'walk' ? 'walk' : 'idle';
|
||||
const colOffset = stateOffsets[mappedState] || 0;
|
||||
|
||||
const srcX = (colOffset + frame) * frameW;
|
||||
const srcY = dirRow * frameH;
|
||||
const destW = frameW * scale;
|
||||
const destH = frameH * scale;
|
||||
|
||||
ctx.save();
|
||||
if (direction === 'left') {
|
||||
ctx.translate(x, 0);
|
||||
ctx.scale(-1, 1);
|
||||
ctx.translate(-x, 0);
|
||||
}
|
||||
ctx.drawImage(image, srcX, srcY, frameW, frameH, x - destW / 2, y - destH, destW, destH);
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
@@ -1,121 +0,0 @@
|
||||
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' },
|
||||
};
|
||||
|
||||
const ANIM_FRAMES = {
|
||||
idle: { frames: 2, speed: 800 },
|
||||
working: { frames: 4, speed: 200 },
|
||||
waiting: { frames: 2, speed: 400 },
|
||||
break: { frames: 2, speed: 1000 },
|
||||
walk: { frames: 4, speed: 150 },
|
||||
};
|
||||
|
||||
export function drawAgent(ctx, agentId, x, y, state, frameIndex, scale = 2) {
|
||||
const char = PIXEL_CHARS[agentId] || PIXEL_CHARS.claude;
|
||||
const s = scale;
|
||||
const anim = ANIM_FRAMES[state] || ANIM_FRAMES.idle;
|
||||
const frame = frameIndex % anim.frames;
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
|
||||
// Shadow
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.2)';
|
||||
ctx.fillRect(-4 * s, 14 * s, 8 * s, 2 * s);
|
||||
|
||||
// Body
|
||||
ctx.fillStyle = char.body;
|
||||
ctx.fillRect(-3 * s, 2 * s, 6 * s, 8 * s);
|
||||
|
||||
// Head
|
||||
ctx.fillStyle = '#ffcc99';
|
||||
ctx.fillRect(-3 * s, -4 * s, 6 * s, 6 * s);
|
||||
|
||||
// Hair
|
||||
ctx.fillStyle = char.hair;
|
||||
ctx.fillRect(-3 * s, -5 * s, 6 * s, 2 * s);
|
||||
|
||||
// Eyes
|
||||
ctx.fillStyle = '#222';
|
||||
const eyeOffset = state === 'break' && frame === 1 ? 0 : 1;
|
||||
ctx.fillRect(-2 * s, -1 * s, 1 * s, eyeOffset * s);
|
||||
ctx.fillRect(1 * s, -1 * s, 1 * s, eyeOffset * s);
|
||||
|
||||
// Legs
|
||||
ctx.fillStyle = '#335';
|
||||
const legSpread = state === 'walk' ? (frame % 2 === 0 ? 1 : -1) : 0;
|
||||
ctx.fillRect(-2 * s, 10 * s, 2 * s, 4 * s);
|
||||
ctx.fillRect(0 + legSpread * s, 10 * s, 2 * s, 4 * s);
|
||||
|
||||
// Accent
|
||||
ctx.fillStyle = char.accent;
|
||||
if (agentId === 'stock') {
|
||||
ctx.fillRect(0, 2 * s, 1 * s, 5 * s);
|
||||
} else if (agentId === 'music') {
|
||||
ctx.fillRect(-4 * s, -4 * s, 1 * s, 4 * s);
|
||||
ctx.fillRect(3 * s, -4 * s, 1 * s, 4 * s);
|
||||
ctx.fillRect(-4 * s, -5 * s, 8 * s, 1 * s);
|
||||
} else if (agentId === '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);
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
|
||||
// Working: typing hands
|
||||
if (state === 'working') {
|
||||
ctx.fillStyle = '#ffcc99';
|
||||
const handY = 6 * s + (frame % 2) * s;
|
||||
ctx.fillRect(-4 * s, handY, 1 * s, 2 * s);
|
||||
ctx.fillRect(3 * s, handY, 1 * s, 2 * s);
|
||||
}
|
||||
|
||||
// Waiting wobble
|
||||
if (state === 'waiting') {
|
||||
const wobble = Math.sin(Date.now() / 200) * s;
|
||||
ctx.translate(wobble, 0);
|
||||
}
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
export function getAnimSpeed(state) {
|
||||
return (ANIM_FRAMES[state] || ANIM_FRAMES.idle).speed;
|
||||
}
|
||||
|
||||
export function getCharLabel(agentId) {
|
||||
return (PIXEL_CHARS[agentId] || {}).label || agentId;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
@@ -1,90 +1,80 @@
|
||||
const WALL_COLOR = '#2a2a3a';
|
||||
const DESK_COLOR = '#6b5b3a';
|
||||
const DESK_TOP = '#8b7b5a';
|
||||
const TABLE_COLOR = '#5a4a2a';
|
||||
const SOFA_COLOR = '#884444';
|
||||
const MONITOR_COLOR = '#224466';
|
||||
const MONITOR_SCREEN = '#44aacc';
|
||||
// src/pages/agent-office/canvas/TileMap.js
|
||||
|
||||
export function drawTileMap(ctx, mapData, width, height) {
|
||||
const { tileSize, cols, rows, layers, furniture, colors } = mapData;
|
||||
const scaleX = width / (cols * tileSize);
|
||||
const scaleY = height / (rows * tileSize);
|
||||
const scale = Math.min(scaleX, scaleY);
|
||||
|
||||
const offsetX = (width - cols * tileSize * scale) / 2;
|
||||
const offsetY = (height - rows * tileSize * scale) / 2;
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(offsetX, offsetY);
|
||||
ctx.scale(scale, scale);
|
||||
|
||||
const floor = layers.floor;
|
||||
for (let r = 0; r < rows; r++) {
|
||||
for (let c = 0; c < cols; c++) {
|
||||
const tile = floor[r][c];
|
||||
ctx.fillStyle = colors[String(tile)] || '#3a3a50';
|
||||
ctx.fillRect(c * tileSize, r * tileSize, tileSize, tileSize);
|
||||
ctx.strokeStyle = 'rgba(255,255,255,0.03)';
|
||||
ctx.strokeRect(c * tileSize, r * tileSize, tileSize, tileSize);
|
||||
}
|
||||
/**
|
||||
* 타일맵 렌더러 — 바닥, 벽, 그리드를 테마 팔레트로 렌더링
|
||||
* 가구는 FurnitureRenderer가 별도 처리
|
||||
*/
|
||||
export class TileMap {
|
||||
constructor(mapData) {
|
||||
this.cols = mapData.cols;
|
||||
this.rows = mapData.rows;
|
||||
this.tileSize = mapData.tileSize;
|
||||
this.floor = mapData.floor;
|
||||
this.tileTypes = mapData.tileTypes;
|
||||
}
|
||||
|
||||
ctx.fillStyle = WALL_COLOR;
|
||||
ctx.fillRect(0, 0, cols * tileSize, 4);
|
||||
/**
|
||||
* 바닥 + 벽 렌더링
|
||||
* @param {CanvasRenderingContext2D} ctx
|
||||
* @param {object} theme - themes.js 에서 가져온 테마 객체
|
||||
* @param {number} scale - 줌 레벨
|
||||
* @param {number} offsetX - 패닝 X 오프셋
|
||||
* @param {number} offsetY - 패닝 Y 오프셋
|
||||
*/
|
||||
render(ctx, theme, scale, offsetX, offsetY) {
|
||||
const ts = this.tileSize * scale;
|
||||
|
||||
for (const f of furniture) {
|
||||
const fx = f.x * tileSize;
|
||||
const fy = f.y * tileSize;
|
||||
const fw = (f.w || 2) * tileSize;
|
||||
const fh = (f.h || 2) * tileSize;
|
||||
for (let r = 0; r < this.rows; r++) {
|
||||
for (let c = 0; c < this.cols; c++) {
|
||||
const tileType = this.floor[r][c];
|
||||
const x = c * ts + offsetX;
|
||||
const y = r * ts + offsetY;
|
||||
|
||||
if (f.type === 'desk') {
|
||||
ctx.fillStyle = DESK_COLOR;
|
||||
ctx.fillRect(fx, fy, fw, fh);
|
||||
ctx.fillStyle = DESK_TOP;
|
||||
ctx.fillRect(fx + 2, fy + 2, fw - 4, 6);
|
||||
const mx = fx + fw / 2 - 8;
|
||||
ctx.fillStyle = MONITOR_COLOR;
|
||||
ctx.fillRect(mx, fy + 4, 16, 12);
|
||||
ctx.fillStyle = MONITOR_SCREEN;
|
||||
ctx.fillRect(mx + 2, fy + 6, 12, 8);
|
||||
if (f.label) {
|
||||
ctx.fillStyle = 'rgba(255,255,255,0.6)';
|
||||
ctx.font = '8px monospace';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(f.label, fx + fw / 2, fy + fh + 12);
|
||||
// 화면 밖이면 스킵 (CSS 공간 기준 — DPR 변환 적용된 좌표계)
|
||||
if (x + ts < 0 || y + ts < 0 || x > ctx.canvas.clientWidth || y > ctx.canvas.clientHeight) continue;
|
||||
|
||||
if (tileType === 0) {
|
||||
// 벽
|
||||
ctx.fillStyle = theme.wall.color;
|
||||
ctx.fillRect(x, y, ts, ts);
|
||||
// 벽 하단 경계선
|
||||
ctx.fillStyle = theme.wall.border;
|
||||
ctx.fillRect(x, y + ts - scale, ts, scale);
|
||||
} else {
|
||||
// 바닥
|
||||
const isBreak = this.tileTypes[String(tileType)] === 'floor_break';
|
||||
ctx.fillStyle = isBreak ? theme.floor.color2 : theme.floor.color1;
|
||||
ctx.fillRect(x, y, ts, ts);
|
||||
|
||||
// 체커보드 패턴
|
||||
if ((r + c) % 2 === 0) {
|
||||
ctx.fillStyle = theme.floor.grid;
|
||||
ctx.fillRect(x, y, ts, ts);
|
||||
}
|
||||
|
||||
// 그리드 선
|
||||
ctx.strokeStyle = theme.floor.grid;
|
||||
ctx.lineWidth = scale * 0.5;
|
||||
ctx.strokeRect(x, y, ts, ts);
|
||||
}
|
||||
}
|
||||
} else if (f.type === 'table') {
|
||||
ctx.fillStyle = TABLE_COLOR;
|
||||
ctx.fillRect(fx, fy, fw, fh);
|
||||
ctx.fillStyle = '#7a6a4a';
|
||||
ctx.fillRect(fx + 4, fy + 4, fw - 8, fh - 8);
|
||||
} else if (f.type === 'sofa') {
|
||||
ctx.fillStyle = SOFA_COLOR;
|
||||
ctx.fillRect(fx, fy, 48, 32);
|
||||
ctx.fillStyle = '#aa5555';
|
||||
ctx.fillRect(fx + 4, fy + 4, 40, 24);
|
||||
} else if (f.type === 'coffee') {
|
||||
ctx.fillStyle = '#664422';
|
||||
ctx.fillRect(fx + 8, fy + 8, 16, 20);
|
||||
ctx.fillStyle = '#886644';
|
||||
ctx.fillRect(fx + 6, fy + 6, 20, 4);
|
||||
}
|
||||
}
|
||||
|
||||
ctx.restore();
|
||||
return { scale, offsetX, offsetY, tileSize };
|
||||
}
|
||||
/** 화면 좌표 → 타일 좌표 변환 */
|
||||
screenToTile(screenX, screenY, scale, offsetX, offsetY) {
|
||||
const ts = this.tileSize * scale;
|
||||
const col = Math.floor((screenX - offsetX) / ts);
|
||||
const row = Math.floor((screenY - offsetY) / ts);
|
||||
return { col, row };
|
||||
}
|
||||
|
||||
export function worldToTile(mapData, renderInfo, canvasX, canvasY) {
|
||||
const { scale, offsetX, offsetY, tileSize } = renderInfo;
|
||||
const wx = (canvasX - offsetX) / scale;
|
||||
const wy = (canvasY - offsetY) / scale;
|
||||
return { col: Math.floor(wx / tileSize), row: Math.floor(wy / tileSize), worldX: wx, worldY: wy };
|
||||
}
|
||||
|
||||
export function tileToCanvas(mapData, renderInfo, col, row) {
|
||||
const { scale, offsetX, offsetY, tileSize } = renderInfo;
|
||||
return { x: offsetX + col * tileSize * scale + (tileSize * scale) / 2, y: offsetY + row * tileSize * scale + (tileSize * scale) / 2 };
|
||||
/** 타일 좌표 → 화면 좌표 (타일 중앙) */
|
||||
tileToScreen(col, row, scale, offsetX, offsetY) {
|
||||
const ts = this.tileSize * scale;
|
||||
return {
|
||||
x: col * ts + offsetX + ts / 2,
|
||||
y: row * ts + offsetY + ts / 2
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
42
src/pages/agent-office/canvas/themes.js
Normal file
42
src/pages/agent-office/canvas/themes.js
Normal file
@@ -0,0 +1,42 @@
|
||||
// src/pages/agent-office/canvas/themes.js
|
||||
|
||||
export const THEMES = {
|
||||
modern: {
|
||||
name: 'Modern',
|
||||
wall: { color: '#1a1a2e', border: '#333', accent: '#8b5cf6' },
|
||||
floor: { color1: '#2a2a3e', color2: '#323248', grid: 'rgba(255,255,255,0.03)' },
|
||||
furniture: { desk: '#3a3a5a', chair: '#4c1d95', monitor: '#5555aa', monitorScreen: '#1a3a5a', shelf: '#2a2a4e', table: '#3a3a5a', sofa: '#2a2a4e', coffee: '#3a3a2a' },
|
||||
decor: { plant: '#22c55e', pot: '#4a3a2a', lamp: '#fbbf24', ledStrip: '#8b5cf6' },
|
||||
lighting: { ambient: 'rgba(139,92,246,0.05)', glow: 'rgba(139,92,246,0.15)' },
|
||||
text: { primary: '#ffffff', secondary: '#aaaaaa', label: '#888888' },
|
||||
ui: { panelBg: '#111111', headerBg: '#1a1a2e', border: '#333333', accent: '#8b5cf6' }
|
||||
},
|
||||
retro: {
|
||||
name: 'Retro',
|
||||
wall: { color: '#2a1a0a', border: '#6a4a2a', accent: '#cc8844' },
|
||||
floor: { color1: '#4a3a1a', color2: '#3a2a10', grid: 'rgba(255,255,255,0.02)' },
|
||||
furniture: { desk: '#6a4a1a', chair: '#8a5a2a', monitor: '#555555', monitorScreen: '#1a3a1a', shelf: '#5a3a1a', table: '#5a4a2a', sofa: '#5a3a2a', coffee: '#4a3a1a' },
|
||||
decor: { plant: '#44aa44', pot: '#6a4a2a', lamp: '#ffcc66', brick: '#8a5a2a' },
|
||||
lighting: { ambient: 'rgba(255,200,100,0.05)', glow: 'rgba(255,200,100,0.2)' },
|
||||
text: { primary: '#ffe0b0', secondary: '#aa8866', label: '#887766' },
|
||||
ui: { panelBg: '#1a1008', headerBg: '#2a1a0a', border: '#4a3a2a', accent: '#cc8844' }
|
||||
},
|
||||
minimal: {
|
||||
name: 'Minimal',
|
||||
wall: { color: '#fafafa', border: '#dddddd', accent: '#3b82f6' },
|
||||
floor: { color1: '#e8e8e8', color2: '#f0f0f0', grid: 'rgba(0,0,0,0.04)' },
|
||||
furniture: { desk: '#ffffff', chair: '#e0e0e0', monitor: '#333333', monitorScreen: '#e0e8f0', shelf: '#f5f5f5', table: '#ffffff', sofa: '#e8e8e8', coffee: '#f0f0f0' },
|
||||
decor: { plant: '#86efac', pot: '#ffffff', lamp: '#fbbf24', window: '#e0f0ff' },
|
||||
lighting: { ambient: 'rgba(59,130,246,0.03)', glow: 'rgba(255,255,255,0.1)' },
|
||||
text: { primary: '#1a1a1a', secondary: '#666666', label: '#999999' },
|
||||
ui: { panelBg: '#ffffff', headerBg: '#fafafa', border: '#e0e0e0', accent: '#3b82f6' }
|
||||
}
|
||||
};
|
||||
|
||||
export function getTheme(name) {
|
||||
return THEMES[name] || THEMES.modern;
|
||||
}
|
||||
|
||||
export function getThemeNames() {
|
||||
return Object.entries(THEMES).map(([key, val]) => ({ key, name: val.name }));
|
||||
}
|
||||
@@ -1,203 +0,0 @@
|
||||
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;
|
||||
@@ -1,125 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
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 }) => {
|
||||
const [input, setInput] = useState('');
|
||||
const [activeCommand, setActiveCommand] = useState(null);
|
||||
|
||||
const commands = AGENT_COMMANDS[agentId] || [];
|
||||
const state = agentState || {};
|
||||
|
||||
const handleSend = () => {
|
||||
if (!input.trim() || !activeCommand) return;
|
||||
const params = activeCommand === 'compose' ? { prompt: input }
|
||||
: activeCommand === 'research' ? { keyword: input }
|
||||
: { message: input };
|
||||
onCommand(agentId, activeCommand, params);
|
||||
setInput('');
|
||||
setActiveCommand(null);
|
||||
};
|
||||
|
||||
const handleQuickAction = (cmd) => {
|
||||
if (cmd.needsInput) {
|
||||
setActiveCommand(cmd.action);
|
||||
} else {
|
||||
onCommand(agentId, cmd.action, {});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ao-chat-panel">
|
||||
<div className="ao-chat-header">
|
||||
<span className="ao-chat-title">
|
||||
{AGENT_NAMES[agentId] || agentId}
|
||||
</span>
|
||||
<span className={`ao-chat-state ao-chat-state--${state.state || 'idle'}`}>
|
||||
{state.state || 'idle'}
|
||||
</span>
|
||||
<button className="ao-chat-close" onClick={onClose}>×</button>
|
||||
</div>
|
||||
|
||||
{state.detail && (
|
||||
<div className="ao-chat-detail">{state.detail}</div>
|
||||
)}
|
||||
|
||||
{state.state === 'waiting' && state.taskId && (
|
||||
<div className="ao-chat-approval">
|
||||
<p>승인 대기 중인 작업이 있습니다</p>
|
||||
<div className="ao-chat-approval-btns">
|
||||
<button className="ao-btn ao-btn--approve"
|
||||
onClick={() => onApproval(agentId, state.taskId, true)}>
|
||||
✅ 승인
|
||||
</button>
|
||||
<button className="ao-btn ao-btn--reject"
|
||||
onClick={() => onApproval(agentId, state.taskId, false)}>
|
||||
❌ 거절
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="ao-chat-commands">
|
||||
{commands.map(cmd => (
|
||||
<button key={cmd.action} className="ao-cmd-btn"
|
||||
onClick={() => handleQuickAction(cmd)}>
|
||||
<span>{cmd.icon}</span> {cmd.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{activeCommand && (
|
||||
<div className="ao-chat-input-area">
|
||||
<input
|
||||
type="text"
|
||||
className="ao-chat-input"
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && handleSend()}
|
||||
placeholder={
|
||||
activeCommand === 'compose' ? '프롬프트 입력...'
|
||||
: activeCommand === 'research' ? '키워드 입력...'
|
||||
: '메시지 입력...'
|
||||
}
|
||||
autoFocus
|
||||
/>
|
||||
<button className="ao-btn ao-btn--send" onClick={handleSend}>전송</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{state.lastResult && (
|
||||
<div className="ao-chat-result">
|
||||
<h4>최근 결과</h4>
|
||||
<pre>{JSON.stringify(state.lastResult, null, 2)}</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatPanel;
|
||||
@@ -1,115 +0,0 @@
|
||||
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;
|
||||
164
src/pages/agent-office/components/CommandTab.jsx
Normal file
164
src/pages/agent-office/components/CommandTab.jsx
Normal file
@@ -0,0 +1,164 @@
|
||||
// src/pages/agent-office/components/CommandTab.jsx
|
||||
import { useState } from 'react';
|
||||
import { sendAgentCommand, approveAgentTask } from '../../../api';
|
||||
|
||||
const QUICK_ACTIONS = {
|
||||
stock: [{ action: 'fetch_news', label: 'Fetch News' }, { action: 'test_telegram', label: 'Test Telegram' }],
|
||||
music: [{ action: 'credits', label: 'Check Credits' }],
|
||||
blog: [{ action: 'list_trend_keywords', label: 'List Keywords' }],
|
||||
realestate: [{ action: 'dashboard', label: 'Dashboard' }],
|
||||
lotto: [{ action: 'status', label: 'Status' }, { action: 'curate_now', label: 'Curate Now' }]
|
||||
};
|
||||
|
||||
const PARAM_ACTIONS = {
|
||||
stock: { action: 'add_alert', label: 'Add Alert', placeholder: '{"symbol":"005930","target_price":70000,"direction":"above"}' },
|
||||
music: { action: 'compose', label: 'Compose', placeholder: 'jazzy lo-fi piano beat' },
|
||||
blog: { action: 'research', label: 'Research', placeholder: 'keyword to research' },
|
||||
realestate: { action: 'fetch_matches', label: 'Fetch Matches', placeholder: '' },
|
||||
lotto: null
|
||||
};
|
||||
|
||||
export default function CommandTab({ agentId, agentState, pendingTask, onCommandResult }) {
|
||||
const [customAction, setCustomAction] = useState('');
|
||||
const [customParams, setCustomParams] = useState('');
|
||||
const [paramInput, setParamInput] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const quickActions = QUICK_ACTIONS[agentId] || [];
|
||||
const paramAction = PARAM_ACTIONS[agentId];
|
||||
|
||||
const handleQuickAction = async (action) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await sendAgentCommand(agentId, action, {});
|
||||
onCommandResult?.(result);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleParamAction = async () => {
|
||||
if (!paramAction || !paramInput.trim()) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
let params = {};
|
||||
if (paramAction.action === 'compose') {
|
||||
params = { prompt: paramInput };
|
||||
} else if (paramAction.action === 'research') {
|
||||
params = { keyword: paramInput };
|
||||
} else {
|
||||
try { params = JSON.parse(paramInput); } catch { params = { value: paramInput }; }
|
||||
}
|
||||
const result = await sendAgentCommand(agentId, paramAction.action, params);
|
||||
onCommandResult?.(result);
|
||||
setParamInput('');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCustomCommand = async () => {
|
||||
if (!customAction.trim()) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
let params = {};
|
||||
if (customParams.trim()) {
|
||||
try { params = JSON.parse(customParams); } catch { params = { value: customParams }; }
|
||||
}
|
||||
const result = await sendAgentCommand(agentId, customAction, params);
|
||||
onCommandResult?.(result);
|
||||
setCustomAction('');
|
||||
setCustomParams('');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleApproval = async (approved) => {
|
||||
if (!pendingTask) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
await approveAgentTask(agentId, pendingTask.id, approved);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ao-command-tab">
|
||||
{/* 승인 대기 UI */}
|
||||
{agentState === 'waiting' && pendingTask && (
|
||||
<div className="ao-approval-card">
|
||||
<div className="ao-approval-title">Awaiting Approval</div>
|
||||
<div className="ao-approval-desc">{pendingTask.task_type}: {pendingTask.detail || JSON.stringify(pendingTask.input_data)}</div>
|
||||
<div className="ao-approval-actions">
|
||||
<button className="ao-btn-approve" onClick={() => handleApproval(true)} disabled={loading}>Approve</button>
|
||||
<button className="ao-btn-reject" onClick={() => handleApproval(false)} disabled={loading}>Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="ao-section">
|
||||
<div className="ao-section-label">Quick Actions</div>
|
||||
<div className="ao-quick-actions">
|
||||
{quickActions.map(qa => (
|
||||
<button
|
||||
key={qa.action}
|
||||
className="ao-btn-quick"
|
||||
onClick={() => handleQuickAction(qa.action)}
|
||||
disabled={loading}
|
||||
>
|
||||
{qa.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Parameterized Action */}
|
||||
{paramAction && (
|
||||
<div className="ao-section">
|
||||
<div className="ao-section-label">{paramAction.label}</div>
|
||||
<div className="ao-param-row">
|
||||
<input
|
||||
className="ao-input"
|
||||
value={paramInput}
|
||||
onChange={e => setParamInput(e.target.value)}
|
||||
placeholder={paramAction.placeholder}
|
||||
onKeyDown={e => e.key === 'Enter' && handleParamAction()}
|
||||
/>
|
||||
<button className="ao-btn-send" onClick={handleParamAction} disabled={loading || !paramInput.trim()}>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Custom Command */}
|
||||
<div className="ao-section">
|
||||
<div className="ao-section-label">Custom Command</div>
|
||||
<input
|
||||
className="ao-input"
|
||||
value={customAction}
|
||||
onChange={e => setCustomAction(e.target.value)}
|
||||
placeholder="Action name"
|
||||
/>
|
||||
<input
|
||||
className="ao-input"
|
||||
value={customParams}
|
||||
onChange={e => setCustomParams(e.target.value)}
|
||||
placeholder='Parameters (JSON)'
|
||||
style={{ marginTop: 4 }}
|
||||
/>
|
||||
<button
|
||||
className="ao-btn-send"
|
||||
onClick={handleCustomCommand}
|
||||
disabled={loading || !customAction.trim()}
|
||||
style={{ marginTop: 4, width: '100%' }}
|
||||
>
|
||||
Send Command
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,195 +0,0 @@
|
||||
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;
|
||||
45
src/pages/agent-office/components/LogTab.jsx
Normal file
45
src/pages/agent-office/components/LogTab.jsx
Normal file
@@ -0,0 +1,45 @@
|
||||
// src/pages/agent-office/components/LogTab.jsx
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { getAgentLogs } from '../../../api';
|
||||
|
||||
const LEVEL_STYLE = {
|
||||
info: { color: '#60a5fa' },
|
||||
warning: { color: '#fbbf24' },
|
||||
error: { color: '#ef4444' }
|
||||
};
|
||||
|
||||
export default function LogTab({ agentId, refreshTrigger }) {
|
||||
const [logs, setLogs] = useState([]);
|
||||
const scrollRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
getAgentLogs(agentId, 50).then(data => {
|
||||
if (!cancelled) setLogs(data || []);
|
||||
});
|
||||
return () => { cancelled = true; };
|
||||
}, [agentId, refreshTrigger]);
|
||||
|
||||
useEffect(() => {
|
||||
if (scrollRef.current) {
|
||||
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
||||
}
|
||||
}, [logs]);
|
||||
|
||||
return (
|
||||
<div className="ao-log-tab" ref={scrollRef}>
|
||||
{logs.length === 0 && <div className="ao-empty">No logs yet</div>}
|
||||
{logs.map((log, i) => {
|
||||
const style = LEVEL_STYLE[log.level] || LEVEL_STYLE.info;
|
||||
const time = new Date(log.created_at).toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
||||
return (
|
||||
<div key={log.id || i} className="ao-log-item">
|
||||
<span className="ao-log-time">{time}</span>
|
||||
<span className="ao-log-level" style={style}>[{log.level}]</span>
|
||||
<span className="ao-log-msg">{log.message}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
73
src/pages/agent-office/components/SidePanel.jsx
Normal file
73
src/pages/agent-office/components/SidePanel.jsx
Normal file
@@ -0,0 +1,73 @@
|
||||
// src/pages/agent-office/components/SidePanel.jsx
|
||||
import { useState } from 'react';
|
||||
import CommandTab from './CommandTab.jsx';
|
||||
import TaskTab from './TaskTab.jsx';
|
||||
import TokenTab from './TokenTab.jsx';
|
||||
import LogTab from './LogTab.jsx';
|
||||
|
||||
const AGENT_META = {
|
||||
stock: { displayName: '주식 트레이더', emoji: '📈', color: '#4488cc' },
|
||||
music: { displayName: '음악 프로듀서', emoji: '🎵', color: '#44aa88' },
|
||||
blog: { displayName: '블로그 마케터', emoji: '✍️', color: '#d97706' },
|
||||
realestate: { displayName: '청약 애널리스트', emoji: '🏢', color: '#c026d3' },
|
||||
lotto: { displayName: '로또 큐레이터', emoji: '🎱', color: '#ef4444' }
|
||||
};
|
||||
|
||||
const TABS = ['Commands', 'Tasks', 'Tokens', 'Logs'];
|
||||
|
||||
export default function SidePanel({ agentId, agentState, pendingTask, onClose, refreshTrigger }) {
|
||||
const [activeTab, setActiveTab] = useState('Commands');
|
||||
const meta = AGENT_META[agentId];
|
||||
if (!meta) return null;
|
||||
|
||||
const stateText = agentState?.detail
|
||||
? `${agentState.state} - ${agentState.detail}`
|
||||
: agentState?.state || 'unknown';
|
||||
|
||||
return (
|
||||
<div className="ao-sidepanel">
|
||||
{/* Header */}
|
||||
<div className="ao-sidepanel-header">
|
||||
<div className="ao-sidepanel-agent">
|
||||
<div className="ao-sidepanel-icon" style={{ background: meta.color }}>
|
||||
{meta.emoji}
|
||||
</div>
|
||||
<div className="ao-sidepanel-info">
|
||||
<div className="ao-sidepanel-name">{meta.displayName}</div>
|
||||
<div className="ao-sidepanel-state">● {stateText}</div>
|
||||
</div>
|
||||
</div>
|
||||
<button className="ao-sidepanel-close" onClick={onClose}>×</button>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="ao-sidepanel-tabs">
|
||||
{TABS.map(tab => (
|
||||
<button
|
||||
key={tab}
|
||||
className={`ao-sidepanel-tab ${activeTab === tab ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
>
|
||||
{tab}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
<div className="ao-sidepanel-content">
|
||||
{activeTab === 'Commands' && (
|
||||
<CommandTab agentId={agentId} agentState={agentState?.state} pendingTask={pendingTask} />
|
||||
)}
|
||||
{activeTab === 'Tasks' && (
|
||||
<TaskTab agentId={agentId} refreshTrigger={refreshTrigger} />
|
||||
)}
|
||||
{activeTab === 'Tokens' && (
|
||||
<TokenTab agentId={agentId} />
|
||||
)}
|
||||
{activeTab === 'Logs' && (
|
||||
<LogTab agentId={agentId} refreshTrigger={refreshTrigger} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
60
src/pages/agent-office/components/TaskTab.jsx
Normal file
60
src/pages/agent-office/components/TaskTab.jsx
Normal file
@@ -0,0 +1,60 @@
|
||||
// src/pages/agent-office/components/TaskTab.jsx
|
||||
import { useState, useEffect } from 'react';
|
||||
import { getAgentTasks } from '../../../api';
|
||||
|
||||
const STATUS_STYLE = {
|
||||
succeeded: { bg: '#065f46', fg: '#34d399' },
|
||||
failed: { bg: '#7f1d1d', fg: '#fca5a5' },
|
||||
working: { bg: '#1e3a5f', fg: '#60a5fa' },
|
||||
pending: { bg: '#92400e', fg: '#fbbf24' },
|
||||
approved: { bg: '#065f46', fg: '#34d399' },
|
||||
rejected: { bg: '#7f1d1d', fg: '#fca5a5' }
|
||||
};
|
||||
|
||||
function formatTime(ts) {
|
||||
if (!ts) return '';
|
||||
const d = new Date(ts);
|
||||
const now = new Date();
|
||||
const isToday = d.toDateString() === now.toDateString();
|
||||
const time = d.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' });
|
||||
return isToday ? time : `${d.getMonth() + 1}/${d.getDate()} ${time}`;
|
||||
}
|
||||
|
||||
export default function TaskTab({ agentId, refreshTrigger }) {
|
||||
const [tasks, setTasks] = useState([]);
|
||||
const [expanded, setExpanded] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
getAgentTasks(agentId, 20).then(data => {
|
||||
if (!cancelled) setTasks(data || []);
|
||||
});
|
||||
return () => { cancelled = true; };
|
||||
}, [agentId, refreshTrigger]);
|
||||
|
||||
return (
|
||||
<div className="ao-task-tab">
|
||||
{tasks.length === 0 && <div className="ao-empty">No tasks yet</div>}
|
||||
{tasks.map(task => {
|
||||
const style = STATUS_STYLE[task.status] || STATUS_STYLE.pending;
|
||||
return (
|
||||
<div key={task.id} className="ao-task-item" onClick={() => setExpanded(expanded === task.id ? null : task.id)}>
|
||||
<div className="ao-task-header">
|
||||
<span className="ao-task-type">{task.task_type}</span>
|
||||
<span className="ao-task-badge" style={{ background: style.bg, color: style.fg }}>{task.status}</span>
|
||||
<span className="ao-task-time">{formatTime(task.created_at)}</span>
|
||||
</div>
|
||||
{expanded === task.id && task.result_data && (
|
||||
<pre className="ao-task-result">
|
||||
{(() => {
|
||||
try { return JSON.stringify(JSON.parse(task.result_data), null, 2); }
|
||||
catch { return task.result_data; }
|
||||
})()}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
86
src/pages/agent-office/components/TokenTab.jsx
Normal file
86
src/pages/agent-office/components/TokenTab.jsx
Normal file
@@ -0,0 +1,86 @@
|
||||
// src/pages/agent-office/components/TokenTab.jsx
|
||||
import { useState, useEffect } from 'react';
|
||||
import { getAgentTokenUsage } from '../../../api';
|
||||
|
||||
export default function TokenTab({ agentId }) {
|
||||
const [usage, setUsage] = useState(null);
|
||||
const [days, setDays] = useState(1);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
getAgentTokenUsage(agentId, days).then(data => {
|
||||
if (!cancelled) setUsage(data);
|
||||
});
|
||||
return () => { cancelled = true; };
|
||||
}, [agentId, days]);
|
||||
|
||||
if (!usage) return <div className="ao-empty">Loading...</div>;
|
||||
|
||||
const inputTokens = usage.input_tokens || 0;
|
||||
const outputTokens = usage.output_tokens || 0;
|
||||
const cacheRead = usage.cache_read || 0;
|
||||
const cacheWrite = usage.cache_write || 0;
|
||||
const total = inputTokens + outputTokens;
|
||||
const cacheHitRate = inputTokens > 0 ? Math.round((cacheRead / inputTokens) * 100) : 0;
|
||||
|
||||
return (
|
||||
<div className="ao-token-tab">
|
||||
<div className="ao-token-period">
|
||||
{[1, 7, 30].map(d => (
|
||||
<button
|
||||
key={d}
|
||||
className={`ao-btn-period ${days === d ? 'active' : ''}`}
|
||||
onClick={() => setDays(d)}
|
||||
>
|
||||
{d === 1 ? 'Today' : d === 7 ? '7 Days' : '30 Days'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="ao-token-grid">
|
||||
<div className="ao-token-card">
|
||||
<div className="ao-token-label">Input Tokens</div>
|
||||
<div className="ao-token-value">{inputTokens.toLocaleString()}</div>
|
||||
</div>
|
||||
<div className="ao-token-card">
|
||||
<div className="ao-token-label">Output Tokens</div>
|
||||
<div className="ao-token-value">{outputTokens.toLocaleString()}</div>
|
||||
</div>
|
||||
<div className="ao-token-card">
|
||||
<div className="ao-token-label">Total</div>
|
||||
<div className="ao-token-value">{total.toLocaleString()}</div>
|
||||
</div>
|
||||
<div className="ao-token-card">
|
||||
<div className="ao-token-label">Cache Hit Rate</div>
|
||||
<div className="ao-token-value">{cacheHitRate}%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Simple bar chart */}
|
||||
<div className="ao-token-bar">
|
||||
<div className="ao-token-bar-label">Input vs Output</div>
|
||||
<div className="ao-token-bar-track">
|
||||
<div
|
||||
className="ao-token-bar-fill input"
|
||||
style={{ width: total > 0 ? `${(inputTokens / total) * 100}%` : '0%' }}
|
||||
/>
|
||||
<div
|
||||
className="ao-token-bar-fill output"
|
||||
style={{ width: total > 0 ? `${(outputTokens / total) * 100}%` : '0%' }}
|
||||
/>
|
||||
</div>
|
||||
<div className="ao-token-bar-legend">
|
||||
<span><span className="dot input" />Input</span>
|
||||
<span><span className="dot output" />Output</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{cacheRead > 0 && (
|
||||
<div className="ao-token-detail">
|
||||
<span>Cache Read: {cacheRead.toLocaleString()}</span>
|
||||
<span>Cache Write: {cacheWrite.toLocaleString()}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
33
src/pages/agent-office/components/TopBar.jsx
Normal file
33
src/pages/agent-office/components/TopBar.jsx
Normal file
@@ -0,0 +1,33 @@
|
||||
// src/pages/agent-office/components/TopBar.jsx
|
||||
import { getThemeNames } from '../canvas/themes.js';
|
||||
|
||||
export default function TopBar({ connected, theme, onThemeChange, zoom, onZoomChange }) {
|
||||
const themes = getThemeNames();
|
||||
|
||||
return (
|
||||
<div className="ao-topbar">
|
||||
<div className="ao-topbar-left">
|
||||
<span className="ao-topbar-title">Agent Office</span>
|
||||
<span className={`ao-topbar-status ${connected ? 'connected' : 'disconnected'}`}>
|
||||
● {connected ? 'Connected' : 'Disconnected'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="ao-topbar-right">
|
||||
<select
|
||||
className="ao-topbar-select"
|
||||
value={theme}
|
||||
onChange={(e) => onThemeChange(e.target.value)}
|
||||
>
|
||||
{themes.map(t => (
|
||||
<option key={t.key} value={t.key}>{t.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="ao-topbar-zoom">
|
||||
<button onClick={() => onZoomChange(Math.max(1, zoom - 0.5))} disabled={zoom <= 1}>-</button>
|
||||
<span>{zoom}x</span>
|
||||
<button onClick={() => onZoomChange(Math.min(4, zoom + 0.5))} disabled={zoom >= 4}>+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,81 +1,84 @@
|
||||
// src/pages/agent-office/hooks/useAgentManager.js
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
|
||||
const WS_RECONNECT_DELAY = 3000;
|
||||
|
||||
export function useAgentManager() {
|
||||
const [agents, setAgents] = useState({});
|
||||
const [pendingTasks, setPendingTasks] = useState([]);
|
||||
const [agents, setAgents] = useState({}); // { agentId: { state, detail, task_id } }
|
||||
const [pendingTasks, setPendingTasks] = useState([]); // [{id, agent_id, task_type, input_data}]
|
||||
const [notifications, setNotifications] = useState({}); // { agentId: count }
|
||||
const [connected, setConnected] = useState(false);
|
||||
const [notifications, setNotifications] = useState({});
|
||||
const [refreshTrigger, setRefreshTrigger] = useState(0); // 탭 데이터 리프레시용
|
||||
|
||||
const wsRef = useRef(null);
|
||||
const reconnectTimer = useRef(null);
|
||||
const reconnectRef = useRef(null);
|
||||
|
||||
const connect = useCallback(() => {
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsUrl = `${protocol}//${window.location.host}/api/agent-office/ws`;
|
||||
|
||||
const ws = new WebSocket(wsUrl);
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
|
||||
const ws = new WebSocket(`${protocol}://${window.location.host}/api/agent-office/ws`);
|
||||
wsRef.current = ws;
|
||||
|
||||
ws.onopen = () => {
|
||||
setConnected(true);
|
||||
if (reconnectTimer.current) clearTimeout(reconnectTimer.current);
|
||||
};
|
||||
ws.onopen = () => setConnected(true);
|
||||
|
||||
ws.onclose = () => {
|
||||
setConnected(false);
|
||||
reconnectTimer.current = setTimeout(connect, 3000);
|
||||
};
|
||||
|
||||
ws.onerror = () => { ws.close(); };
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
const msg = JSON.parse(event.data);
|
||||
ws.onmessage = (e) => {
|
||||
const msg = JSON.parse(e.data);
|
||||
|
||||
switch (msg.type) {
|
||||
case 'init': {
|
||||
// 에이전트 초기 상태 세팅
|
||||
const agentMap = {};
|
||||
for (const a of msg.agents) {
|
||||
agentMap[a.agent_id] = { state: a.state, detail: a.detail };
|
||||
agentMap[a.agent_id] = { state: a.state, detail: a.detail || '', task_id: a.task_id };
|
||||
}
|
||||
setAgents(agentMap);
|
||||
setPendingTasks(msg.pending || []);
|
||||
break;
|
||||
}
|
||||
|
||||
case 'agent_state':
|
||||
setAgents(prev => ({
|
||||
...prev,
|
||||
[msg.agent]: { state: msg.state, detail: msg.detail, taskId: msg.task_id },
|
||||
[msg.agent]: { state: msg.state, detail: msg.detail || '', task_id: msg.task_id }
|
||||
}));
|
||||
// idle 전환 시 데이터 리프레시
|
||||
if (msg.state === 'idle') {
|
||||
setRefreshTrigger(n => n + 1);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'task_complete':
|
||||
setAgents(prev => ({
|
||||
...prev,
|
||||
[msg.agent]: { ...prev[msg.agent], lastResult: msg.result },
|
||||
}));
|
||||
setPendingTasks(prev => prev.filter(id => id !== msg.task_id));
|
||||
break;
|
||||
case 'command_result':
|
||||
setAgents(prev => ({
|
||||
...prev,
|
||||
[msg.agent]: { ...prev[msg.agent], lastCommand: msg.result },
|
||||
}));
|
||||
setRefreshTrigger(n => n + 1);
|
||||
break;
|
||||
|
||||
case 'notification':
|
||||
setNotifications(prev => ({
|
||||
...prev,
|
||||
[msg.agent]: (prev[msg.agent] || 0) + 1,
|
||||
[msg.agent]: (prev[msg.agent] || 0) + 1
|
||||
}));
|
||||
break;
|
||||
|
||||
case 'command_result':
|
||||
// 사이드 패널에서 처리
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
setConnected(false);
|
||||
reconnectRef.current = setTimeout(connect, WS_RECONNECT_DELAY);
|
||||
};
|
||||
|
||||
ws.onerror = () => ws.close();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
connect();
|
||||
return () => {
|
||||
if (wsRef.current) wsRef.current.close();
|
||||
if (reconnectTimer.current) clearTimeout(reconnectTimer.current);
|
||||
if (reconnectRef.current) clearTimeout(reconnectRef.current);
|
||||
};
|
||||
}, [connect]);
|
||||
|
||||
@@ -92,12 +95,17 @@ export function useAgentManager() {
|
||||
}, []);
|
||||
|
||||
const clearNotifications = useCallback((agentId) => {
|
||||
setNotifications(prev => {
|
||||
const next = { ...prev };
|
||||
delete next[agentId];
|
||||
return next;
|
||||
});
|
||||
setNotifications(prev => ({ ...prev, [agentId]: 0 }));
|
||||
}, []);
|
||||
|
||||
return { agents, pendingTasks, connected, notifications, sendCommand, sendApproval, clearNotifications };
|
||||
return {
|
||||
agents,
|
||||
pendingTasks,
|
||||
notifications,
|
||||
connected,
|
||||
refreshTrigger,
|
||||
sendCommand,
|
||||
sendApproval,
|
||||
clearNotifications
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,74 +1,64 @@
|
||||
// src/pages/agent-office/hooks/useOfficeCanvas.js
|
||||
import { useRef, useEffect, useCallback } from 'react';
|
||||
import { OfficeRenderer } from '../canvas/OfficeRenderer';
|
||||
import officeMap from '../assets/office-map.json';
|
||||
import { OfficeRenderer } from '../canvas/OfficeRenderer.js';
|
||||
|
||||
export function useOfficeCanvas(containerRef, onAgentClick, onCeoClick) {
|
||||
export function useOfficeCanvas() {
|
||||
const canvasRef = useRef(null);
|
||||
const rendererRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
if (!canvasRef.current) return;
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.style.display = 'block';
|
||||
canvas.style.width = '100%';
|
||||
canvas.style.height = '100%';
|
||||
canvas.style.imageRendering = 'pixelated';
|
||||
containerRef.current.appendChild(canvas);
|
||||
|
||||
const renderer = new OfficeRenderer(canvas, officeMap);
|
||||
const renderer = new OfficeRenderer(canvasRef.current);
|
||||
rendererRef.current = renderer;
|
||||
|
||||
const resize = () => {
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
renderer.resize(rect.width, rect.height);
|
||||
};
|
||||
|
||||
resize();
|
||||
renderer.start();
|
||||
|
||||
renderer.setOnClick((agentId) => {
|
||||
if (onAgentClick) onAgentClick(agentId);
|
||||
});
|
||||
|
||||
renderer.setOnCeoClick(() => {
|
||||
if (onCeoClick) onCeoClick();
|
||||
});
|
||||
|
||||
const handleClick = (e) => {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
renderer.handleClick(x, y);
|
||||
};
|
||||
|
||||
canvas.addEventListener('click', handleClick);
|
||||
window.addEventListener('resize', resize);
|
||||
const handleResize = () => renderer.resize();
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
return () => {
|
||||
renderer.stop();
|
||||
canvas.removeEventListener('click', handleClick);
|
||||
window.removeEventListener('resize', resize);
|
||||
if (containerRef.current && canvas.parentNode === containerRef.current) {
|
||||
containerRef.current.removeChild(canvas);
|
||||
}
|
||||
window.removeEventListener('resize', handleResize);
|
||||
renderer.destroy();
|
||||
rendererRef.current = null;
|
||||
};
|
||||
}, [containerRef, onAgentClick, onCeoClick]);
|
||||
}, []);
|
||||
|
||||
const updateAgentState = useCallback((agentId, state, detail) => {
|
||||
rendererRef.current?.updateAgentState(agentId, state, detail);
|
||||
}, []);
|
||||
|
||||
const moveAgent = useCallback((agentId, target) => {
|
||||
rendererRef.current?.moveAgent(agentId, target);
|
||||
}, []);
|
||||
|
||||
const setAgentNotification = useCallback((agentId, count) => {
|
||||
rendererRef.current?.setAgentNotification(agentId, count);
|
||||
}, []);
|
||||
|
||||
const setCeoDocBadge = useCallback((count) => {
|
||||
rendererRef.current?.setCeoDocBadge(count);
|
||||
const setTheme = useCallback((themeName) => {
|
||||
rendererRef.current?.setTheme(themeName);
|
||||
}, []);
|
||||
|
||||
return { updateAgentState, moveAgent, setAgentNotification, setCeoDocBadge };
|
||||
const setZoom = useCallback((level) => {
|
||||
rendererRef.current?.setZoom(level);
|
||||
}, []);
|
||||
|
||||
const hitTest = useCallback((clientX, clientY) => {
|
||||
return rendererRef.current?.hitTest(clientX, clientY) || { type: 'empty' };
|
||||
}, []);
|
||||
|
||||
const getZoom = useCallback(() => {
|
||||
return rendererRef.current?.zoom || 2;
|
||||
}, []);
|
||||
|
||||
const wasDragging = useCallback(() => {
|
||||
return rendererRef.current?.wasDragging?.() || false;
|
||||
}, []);
|
||||
|
||||
return {
|
||||
canvasRef,
|
||||
updateAgentState,
|
||||
setAgentNotification,
|
||||
setTheme,
|
||||
setZoom,
|
||||
hitTest,
|
||||
getZoom,
|
||||
wasDragging
|
||||
};
|
||||
}
|
||||
|
||||
@@ -233,6 +233,7 @@
|
||||
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.todo-card__btn:hover {
|
||||
@@ -288,6 +289,24 @@
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.todo-done-panel__clear-btn {
|
||||
font-size: 11px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
color: #ef4444;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: background 0.15s ease;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.todo-done-panel__clear-btn:active {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
/* ── 날짜 필터 ────────────────────────────────────────────────────────── */
|
||||
|
||||
.todo-done-panel__filter {
|
||||
@@ -311,6 +330,7 @@
|
||||
white-space: nowrap;
|
||||
font-family: inherit;
|
||||
line-height: 1.6;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.todo-date-btn:hover {
|
||||
@@ -387,23 +407,166 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.todo-toolbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todo-col {
|
||||
min-height: 120px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
|
||||
.todo-col__head {
|
||||
padding: 10px 4px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.todo-col__body {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
/* 카드 버튼 44px 터치 타겟 */
|
||||
.todo-card__btn {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
font-size: 14px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.todo-card__actions {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.todo-card__title {
|
||||
font-size: 15px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 날짜 필터 버튼 44px 터치 타겟 */
|
||||
.todo-date-btn {
|
||||
font-size: 12px;
|
||||
padding: 8px 14px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.todo-date-input {
|
||||
font-size: 13px;
|
||||
padding: 8px 12px;
|
||||
height: 36px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.todo-done-panel {
|
||||
border: none;
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
|
||||
.todo-done-panel__head {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 10px 4px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.todo-done-panel__filter {
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.todo-done-panel__body {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
/* 폼 라벨 가독성 */
|
||||
.todo-form__field {
|
||||
font-size: 14px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.todo-form__field input,
|
||||
.todo-form__field textarea {
|
||||
font-size: 16px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.todo-form__actions .button {
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* 빈 상태 메시지 */
|
||||
.todo-col__empty {
|
||||
font-size: 13px;
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
/* 라벨 버튼 (모바일) */
|
||||
.todo-card__btn--labeled {
|
||||
width: auto;
|
||||
height: 38px;
|
||||
padding: 0 12px;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.todo-card__btn-label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.todo-card__actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 확인 시트 (모바일) ─────────────────────────────────────────────── */
|
||||
|
||||
.todo-confirm-sheet {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.todo-confirm-sheet__msg {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.todo-confirm-sheet__actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.todo-confirm-sheet__actions .button {
|
||||
flex: 1;
|
||||
min-height: 48px;
|
||||
font-size: 15px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.button.danger {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
border: 1px solid rgba(239, 68, 68, 0.4);
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.button.danger:hover {
|
||||
background: rgba(239, 68, 68, 0.25);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
@@ -35,6 +35,7 @@ const Todo = () => {
|
||||
const [dragging, setDragging] = useState(null);
|
||||
const [dragOver, setDragOver] = useState(null);
|
||||
const [doneDate, setDoneDate] = useState(''); // '' = 전체
|
||||
const [confirmClear, setConfirmClear] = useState(false);
|
||||
const dragItem = useRef(null);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
@@ -93,6 +94,7 @@ const Todo = () => {
|
||||
};
|
||||
|
||||
const handleClear = async () => {
|
||||
setConfirmClear(false);
|
||||
try {
|
||||
await clearTodos();
|
||||
setTodos((prev) => prev.filter((t) => t.status !== 'done'));
|
||||
@@ -172,20 +174,22 @@ const Todo = () => {
|
||||
<button
|
||||
key={c.id}
|
||||
type="button"
|
||||
className="todo-card__btn"
|
||||
className={`todo-card__btn${isMobile ? ' todo-card__btn--labeled' : ''}`}
|
||||
title={`${c.label}으로 이동`}
|
||||
onClick={() => handleMove(todo.id, c.id)}
|
||||
>
|
||||
{c.id === 'todo' ? '↩' : c.id === 'in_progress' ? '▶' : '✓'}
|
||||
<span className="todo-card__btn-icon">{c.id === 'todo' ? '↩' : c.id === 'in_progress' ? '▶' : '✓'}</span>
|
||||
{isMobile && <span className="todo-card__btn-label">{c.label}</span>}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
className="todo-card__btn todo-card__btn--danger"
|
||||
className={`todo-card__btn todo-card__btn--danger${isMobile ? ' todo-card__btn--labeled' : ''}`}
|
||||
title="삭제"
|
||||
onClick={() => handleDelete(todo.id)}
|
||||
>
|
||||
✕
|
||||
<span className="todo-card__btn-icon">✕</span>
|
||||
{isMobile && <span className="todo-card__btn-label">삭제</span>}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -208,7 +212,9 @@ const Todo = () => {
|
||||
</div>
|
||||
<div className="todo-col__body">
|
||||
{items.length === 0 && (
|
||||
<p className="todo-col__empty">드래그하여 이동</p>
|
||||
<p className="todo-col__empty">
|
||||
{isMobile ? '아직 항목이 없습니다' : '드래그하여 이동'}
|
||||
</p>
|
||||
)}
|
||||
{items.map((todo) => renderCard(todo, col.id))}
|
||||
</div>
|
||||
@@ -265,7 +271,11 @@ const Todo = () => {
|
||||
<button
|
||||
type="button"
|
||||
className="button ghost"
|
||||
onClick={handleClear}
|
||||
onClick={() => {
|
||||
const doneCount = todos.filter(t => t.status === 'done').length;
|
||||
if (doneCount === 0) return;
|
||||
if (isMobile) { setConfirmClear(true); } else { handleClear(); }
|
||||
}}
|
||||
>
|
||||
완료 비우기
|
||||
</button>
|
||||
@@ -285,15 +295,20 @@ const Todo = () => {
|
||||
{ key: 'todo', label: '할 일', content: renderColumn({ id: 'todo', label: '할 일' }) },
|
||||
{ key: 'in_progress', label: '진행 중', content: renderColumn({ id: 'in_progress', label: '진행 중' }) },
|
||||
{ key: 'done', label: '완료', content: (
|
||||
<div
|
||||
className={`todo-done-panel${dragOver === 'done' ? ' is-drag-over' : ''}`}
|
||||
onDragOver={(e) => onDragOver(e, 'done')}
|
||||
onDrop={(e) => onDrop(e, 'done')}
|
||||
>
|
||||
<div className="todo-done-panel">
|
||||
<div className="todo-done-panel__head">
|
||||
<div className="todo-done-panel__title-row">
|
||||
<span className="todo-col__title">완료</span>
|
||||
<span className="todo-col__count">{doneTodos.length}</span>
|
||||
{doneTodos.length > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
className="todo-done-panel__clear-btn"
|
||||
onClick={() => setConfirmClear(true)}
|
||||
>
|
||||
비우기
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="todo-done-panel__filter">
|
||||
<button type="button" className={`todo-date-btn${doneDate === '' ? ' is-active' : ''}`} onClick={() => setDoneDate('')}>전체</button>
|
||||
@@ -306,7 +321,7 @@ const Todo = () => {
|
||||
</div>
|
||||
<div className="todo-done-panel__body">
|
||||
{doneTodos.length === 0 ? (
|
||||
<p className="todo-col__empty">{doneDate ? '해당 날짜에 완료된 항목이 없습니다' : '드래그하여 이동'}</p>
|
||||
<p className="todo-col__empty">{doneDate ? '해당 날짜에 완료된 항목이 없습니다' : '완료된 항목이 없습니다'}</p>
|
||||
) : (
|
||||
doneTodos.map((todo) => renderCard(todo, 'done'))
|
||||
)}
|
||||
@@ -369,7 +384,7 @@ const Todo = () => {
|
||||
<div className="todo-done-panel__body">
|
||||
{doneTodos.length === 0 ? (
|
||||
<p className="todo-col__empty">
|
||||
{doneDate ? '해당 날짜에 완료된 항목이 없습니다' : '드래그하여 이동'}
|
||||
{doneDate ? '해당 날짜에 완료된 항목이 없습니다' : (isMobile ? '완료된 항목이 없습니다' : '드래그하여 이동')}
|
||||
</p>
|
||||
) : (
|
||||
doneTodos.map((todo) => renderCard(todo, 'done'))
|
||||
@@ -388,6 +403,24 @@ const Todo = () => {
|
||||
{addForm}
|
||||
</MobileSheet>
|
||||
|
||||
{/* 모바일: 완료 비우기 확인 시트 */}
|
||||
<MobileSheet
|
||||
open={confirmClear}
|
||||
onClose={() => setConfirmClear(false)}
|
||||
title="완료 항목 비우기"
|
||||
snap="half"
|
||||
>
|
||||
<div className="todo-confirm-sheet">
|
||||
<p className="todo-confirm-sheet__msg">
|
||||
완료된 항목 {todos.filter(t => t.status === 'done').length}건을 모두 삭제합니다.
|
||||
</p>
|
||||
<div className="todo-confirm-sheet__actions">
|
||||
<button type="button" className="button ghost" onClick={() => setConfirmClear(false)}>취소</button>
|
||||
<button type="button" className="button danger" onClick={handleClear}>삭제</button>
|
||||
</div>
|
||||
</div>
|
||||
</MobileSheet>
|
||||
|
||||
<FAB onClick={() => setAddSheetOpen(true)} label="할일 추가" />
|
||||
</div>
|
||||
</PullToRefresh>
|
||||
|
||||
Reference in New Issue
Block a user