From 28a80b5bd7e4a9bf8a7882b38ff555c24cbf0085 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Thu, 23 Apr 2026 14:55:40 +0900
Subject: [PATCH] =?UTF-8?q?feat(agent-office):=20=EB=AA=A8=EB=B0=94?=
 =?UTF-8?q?=EC=9D=BC=20=EB=B0=98=EC=9D=91=ED=98=95=20=E2=80=94=20=EB=B0=94?=
 =?UTF-8?q?=ED=85=80=EC=8B=9C=ED=8A=B8=20=EC=97=90=EC=9D=B4=EC=A0=84?=
 =?UTF-8?q?=ED=8A=B8=20=EC=83=81=EC=84=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/agent-office/AgentOffice.css | 12 +++++++++++
 src/pages/agent-office/AgentOffice.jsx | 28 +++++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)

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() {
       <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>
   );
 }