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(null); + // ===== 행 클릭 → 플로팅 액션 메뉴 ===== + const [actionMenu, setActionMenu] = useState<{ item: StockItem; x: number; y: number } | null>(null); const [usageModalItem, setUsageModalItem] = useState(null); const [usageData, setUsageData] = useState(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 ) => { return ( - <> handleRowClick(item)} + className={`cursor-pointer hover:bg-muted/50 ${handlers.isSelected ? 'bg-blue-50' : ''}`} + onClick={(e) => handleRowClick(item, e)} > e.stopPropagation()}> - {actionMenuItemId === item.id && ( - - -
- - -
-
-
- )} - ); }; @@ -571,6 +559,33 @@ export function StockStatusList() { onSearchChange={setSearchTerm} /> + {/* 플로팅 액션 메뉴 */} + {actionMenu && ( +
e.stopPropagation()} + > + + +
+ )} + {/* 사용현황 모달 */} { if (!open) { setUsageModalItem(null); setUsageData(null); } }}>