From f1651f31e870d08496ada4534f0b0d508d666885 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sun, 22 Mar 2026 11:52:52 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20[=EC=9E=AC=EA=B3=A0=EB=AA=A9=EB=A1=9D]?=
 =?UTF-8?q?=20=ED=96=89=20=ED=81=B4=EB=A6=AD=20=EB=A9=94=EB=89=B4=EB=A5=BC?=
 =?UTF-8?q?=20=ED=94=8C=EB=A1=9C=ED=8C=85=20=ED=8C=9D=EC=98=A4=EB=B2=84?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20(=EC=95=84=EC=BD=94=EB=94=94?=
 =?UTF-8?q?=EC=96=B8=E2=86=92float)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../material/StockStatus/StockStatusList.tsx  | 81 +++++++++++--------
 1 file changed, 48 insertions(+), 33 deletions(-)

diff --git a/src/components/material/StockStatus/StockStatusList.tsx b/src/components/material/StockStatus/StockStatusList.tsx
index 9d407023..0b330c3c 100644
--- a/src/components/material/StockStatus/StockStatusList.tsx
+++ b/src/components/material/StockStatus/StockStatusList.tsx
@@ -154,18 +154,32 @@ export function StockStatusList() {
     return true;
   });
 
-  // ===== 행 클릭 → 액션 메뉴 =====
-  const [actionMenuItemId, setActionMenuItemId] = useState<string | null>(null);
+  // ===== 행 클릭 → 플로팅 액션 메뉴 =====
+  const [actionMenu, setActionMenu] = useState<{ item: StockItem; x: number; y: number } | null>(null);
   const [usageModalItem, setUsageModalItem] = useState<StockItem | null>(null);
   const [usageData, setUsageData] = useState<StockUsageData | null>(null);
   const [usageLoading, setUsageLoading] = useState(false);
 
-  const handleRowClick = (item: StockItem) => {
-    setActionMenuItemId(prev => prev === item.id ? null : item.id);
+  const handleRowClick = (item: StockItem, e?: React.MouseEvent) => {
+    if (actionMenu?.item.id === item.id) {
+      setActionMenu(null);
+      return;
+    }
+    const x = e?.clientX ?? 200;
+    const y = e?.clientY ?? 200;
+    setActionMenu({ item, x, y });
   };
 
+  // 외부 클릭 시 닫기
+  useEffect(() => {
+    if (!actionMenu) return;
+    const close = () => setActionMenu(null);
+    window.addEventListener('click', close, { once: true });
+    return () => window.removeEventListener('click', close);
+  }, [actionMenu]);
+
   const handleViewUsage = async (item: StockItem) => {
-    setActionMenuItemId(null);
+    setActionMenu(null);
     setUsageModalItem(item);
     setUsageLoading(true);
     const result = await getStockTransactions(item.id);
@@ -323,11 +337,10 @@ export function StockStatusList() {
     handlers: SelectionHandlers & RowClickHandlers<StockItem>
   ) => {
     return (
-      <>
       <TableRow
         key={item.id}
-        className={`cursor-pointer hover:bg-muted/50 ${handlers.isSelected ? 'bg-blue-50' : ''} ${actionMenuItemId === item.id ? 'bg-blue-50' : ''}`}
-        onClick={() => handleRowClick(item)}
+        className={`cursor-pointer hover:bg-muted/50 ${handlers.isSelected ? 'bg-blue-50' : ''}`}
+        onClick={(e) => handleRowClick(item, e)}
       >
         <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
           <Checkbox
@@ -351,31 +364,6 @@ export function StockStatusList() {
           </span>
         </TableCell>
       </TableRow>
-      {actionMenuItemId === item.id && (
-        <TableRow key={`action-${item.id}`}>
-          <TableCell colSpan={12} className="p-0">
-            <div className="flex items-center gap-2 px-4 py-2 bg-blue-50 border-y border-blue-100">
-              <Button
-                size="sm" variant="outline"
-                className="h-8 text-xs gap-1.5 border-blue-300 text-blue-700 hover:bg-blue-100"
-                onClick={(e) => { e.stopPropagation(); handleViewUsage(item); }}
-              >
-                <History className="h-3.5 w-3.5" />
-                사용현황 보기
-              </Button>
-              <Button
-                size="sm" variant="outline"
-                className="h-8 text-xs gap-1.5"
-                onClick={(e) => { e.stopPropagation(); setActionMenuItemId(null); router.push(`/ko/material/stock-status/${item.id}?mode=view`); }}
-              >
-                <ExternalLink className="h-3.5 w-3.5" />
-                상세보기
-              </Button>
-            </div>
-          </TableCell>
-        </TableRow>
-      )}
-      </>
     );
   };
 
@@ -571,6 +559,33 @@ export function StockStatusList() {
         onSearchChange={setSearchTerm}
       />
 
+      {/* 플로팅 액션 메뉴 */}
+      {actionMenu && (
+        <div
+          className="fixed z-50 bg-white rounded-lg shadow-xl border border-gray-200 py-1 min-w-[160px]"
+          style={{
+            left: Math.min(actionMenu.x, window.innerWidth - 180),
+            top: Math.min(actionMenu.y, window.innerHeight - 100),
+          }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <button
+            className="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors"
+            onClick={() => handleViewUsage(actionMenu.item)}
+          >
+            <History className="h-4 w-4" />
+            사용현황 보기
+          </button>
+          <button
+            className="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
+            onClick={() => { setActionMenu(null); router.push(`/ko/material/stock-status/${actionMenu.item.id}?mode=view`); }}
+          >
+            <ExternalLink className="h-4 w-4" />
+            상세보기
+          </button>
+        </div>
+      )}
+
       {/* 사용현황 모달 */}
       <Dialog open={!!usageModalItem} onOpenChange={(open) => { if (!open) { setUsageModalItem(null); setUsageData(null); } }}>
         <DialogContent className="!max-w-2xl max-h-[80vh] flex flex-col p-0 gap-0">