feat(agent-office): 모바일 반응형 — 바텀시트 에이전트 상세

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

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;
+  }
 }

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() {
       <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)}
+          />
+        )}
+      </MobileSheet>
     </div>
   );
 }