diff --git a/src/pages/agent-office/AgentOffice.css b/src/pages/agent-office/AgentOffice.css index 4e790ba..fb7d82f 100644 --- a/src/pages/agent-office/AgentOffice.css +++ b/src/pages/agent-office/AgentOffice.css @@ -385,4 +385,16 @@ padding: 6px 12px; font-size: 0.8rem; } + + /* 명령 입력 하단 고정 */ + .ao-cmd-form { + position: fixed; + bottom: calc(var(--bottom-nav-h, 64px) + var(--safe-area-bottom, 0px)); + left: 0; + right: 0; + padding: 8px 16px; + background: var(--bg-secondary, #12122a); + border-top: 1px solid #2a2a4a; + z-index: 200; + } } diff --git a/src/pages/agent-office/AgentOffice.jsx b/src/pages/agent-office/AgentOffice.jsx index edce480..d803b3c 100644 --- a/src/pages/agent-office/AgentOffice.jsx +++ b/src/pages/agent-office/AgentOffice.jsx @@ -3,6 +3,8 @@ 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'; import './AgentOffice.css'; const AGENT_META = { @@ -16,12 +18,17 @@ const AGENT_IDS = ['stock', 'music', 'blog', 'realestate']; 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); - }, [clearNotifications]); + if (isMobile) { + setAgentDetailSheet(agentId); + } + }, [clearNotifications, isMobile]); const handleCeoClick = useCallback(() => {}, []); @@ -79,6 +86,25 @@ export function Component() {
+ + {/* 모바일: 에이전트 상세 바텀시트 */} + setAgentDetailSheet(null)} + title={agentDetailSheet ? (AGENT_META[agentDetailSheet]?.name ?? agentDetailSheet) : ''} + > + {agentDetailSheet && ( + clearNotifications(agentDetailSheet)} + /> + )} +
); }