[st] - 검토단 작업 완료 및 입력6-1, 10-1 운영데이터업데이트 기능 추가, 텝 영역 우클릭 후 텝 닫기 기능 추가

apps/st/src/shared/ui/tab-bar.tsx

@@ -1,10 +1,57 @@
 "use client";
 
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
 import { useTabStore } from "@/store/tab-store";
 import { Tabs, TabsList, TabsTrigger } from "@common/components";
 
+type TabContextMenuState = {
+    x: number;
+    y: number;
+    tabId: string;
+};
+
 const TabBar = () => {
-    const { tabs, activeTabId, setActiveTab, removeTab } = useTabStore();
+    const {
+        tabs,
+        activeTabId,
+        setActiveTab,
+        removeTab,
+        closeAllTabs,
+        closeOtherTabs,
+        closeTabsToLeft,
+        closeTabsToRight,
+    } = useTabStore();
+    const [contextMenu, setContextMenu] = useState<TabContextMenuState | null>(null);
+    const contextMenuRef = useRef<HTMLDivElement | null>(null);
+
+    const closeContextMenu = useCallback(() => {
+        setContextMenu(null);
+    }, []);
+
+    useEffect(() => {
+        if (!contextMenu) return;
+
+        const onPointerDown = (event: PointerEvent) => {
+            if (contextMenuRef.current?.contains(event.target as Node)) return;
+            closeContextMenu();
+        };
+        const onKeyDown = (event: KeyboardEvent) => {
+            if (event.key === "Escape") closeContextMenu();
+        };
+        const onScroll = () => closeContextMenu();
+
+        window.addEventListener("pointerdown", onPointerDown);
+        window.addEventListener("keydown", onKeyDown);
+        window.addEventListener("scroll", onScroll, true);
+
+        return () => {
+            window.removeEventListener("pointerdown", onPointerDown);
+            window.removeEventListener("keydown", onKeyDown);
+            window.removeEventListener("scroll", onScroll, true);
+        };
+    }, [closeContextMenu, contextMenu]);
 
     if (tabs.length === 0) {
         return null;
@@ -18,36 +65,128 @@ const TabBar = () => {
         removeTab(tabId);
     };
 
+    const handleTabContextMenu = (
+        e: React.MouseEvent<HTMLButtonElement>,
+        tabId: string,
+    ) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setContextMenu({ x: e.clientX, y: e.clientY, tabId });
+    };
+
+    const handleCloseOtherTabs = () => {
+        if (!contextMenu || tabs.length <= 1) return;
+        closeOtherTabs(contextMenu.tabId);
+        closeContextMenu();
+    };
+
+    const handleCloseAllTabs = () => {
+        closeAllTabs();
+        closeContextMenu();
+    };
+
+    const contextTabIndex = contextMenu
+        ? tabs.findIndex((tab) => tab.id === contextMenu.tabId)
+        : -1;
+    const canCloseTabsToLeft = contextTabIndex > 0;
+    const canCloseTabsToRight =
+        contextTabIndex >= 0 && contextTabIndex < tabs.length - 1;
+    const canCloseOtherTabs = tabs.length > 1;
+
+    const handleCloseTabsToLeft = () => {
+        if (!contextMenu || !canCloseTabsToLeft) return;
+        closeTabsToLeft(contextMenu.tabId);
+        closeContextMenu();
+    };
+
+    const handleCloseTabsToRight = () => {
+        if (!contextMenu || !canCloseTabsToRight) return;
+        closeTabsToRight(contextMenu.tabId);
+        closeContextMenu();
+    };
+
     return (
-        <Tabs
-            value={activeTabId || undefined}
-            onValueChange={setActiveTab}
-            className="w-full border-b border-border"
-            variant="outline"
-        >
-            <TabsList className="w-full !justify-start !p-4 !pb-0">
-                {tabs.map((tab) => (
-                    <TabsTrigger
-                        key={tab.id}
-                        value={tab.id}
-                        className="!flex !w-[140px] !items-center !justify-start !gap-2 !px-4 [&::after]:hidden"
-                        title={tab.label}
-                    >
-                        <span className="flex-1 truncate text-xl leading-none">
-                            {tab.label}
-                        </span>
-                        <span
-                            role="button"
-                            onClick={(e) => handleCloseTab(e, tab.id)}
-                            aria-label={`${tab.label} 탭 닫기`}
-                            className="flex flex-shrink-0 items-center justify-center leading-none hover:text-[#2094fa]"
+        <>
+            <Tabs
+                value={activeTabId || undefined}
+                onValueChange={setActiveTab}
+                className="w-full border-b border-border"
+                variant="outline"
+            >
+                <TabsList className="w-full !justify-start !p-4 !pb-0">
+                    {tabs.map((tab) => (
+                        <TabsTrigger
+                            key={tab.id}
+                            value={tab.id}
+                            className="!flex !w-[140px] !items-center !justify-start !gap-2 !px-4 [&::after]:hidden"
+                            title={tab.label}
+                            onContextMenu={(e) => handleTabContextMenu(e, tab.id)}
                         >
-                            <i className="ri-close-line" />
-                        </span>
-                    </TabsTrigger>
-                ))}
-            </TabsList>
-        </Tabs>
+                            <span className="flex-1 truncate text-xl leading-none">
+                                {tab.label}
+                            </span>
+                            <span
+                                role="button"
+                                onClick={(e) => handleCloseTab(e, tab.id)}
+                                aria-label={`${tab.label} 탭 닫기`}
+                                className="flex flex-shrink-0 items-center justify-center leading-none hover:text-[#2094fa]"
+                            >
+                                <i className="ri-close-line" />
+                            </span>
+                        </TabsTrigger>
+                    ))}
+                </TabsList>
+            </Tabs>
+
+            {contextMenu &&
+                typeof document !== "undefined" &&
+                createPortal(
+                    <div
+                        ref={contextMenuRef}
+                        role="menu"
+                        className="fixed z-[100] min-w-[20rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md"
+                        style={{ left: contextMenu.x, top: contextMenu.y }}
+                        onContextMenu={(e) => e.preventDefault()}
+                    >
+                        <button
+                            type="button"
+                            role="menuitem"
+                            disabled={!canCloseTabsToLeft}
+                            className="flex w-full cursor-default select-none items-center rounded-sm px-4 py-3 text-left text-[1.2rem] outline-none transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+                            onClick={handleCloseTabsToLeft}
+                        >
+                            왼쪽 탭 모두 닫기
+                        </button>
+                        <button
+                            type="button"
+                            role="menuitem"
+                            disabled={!canCloseTabsToRight}
+                            className="flex w-full cursor-default select-none items-center rounded-sm px-4 py-3 text-left text-[1.2rem] outline-none transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+                            onClick={handleCloseTabsToRight}
+                        >
+                            오른쪽 탭 모두 닫기
+                        </button>
+                        <button
+                            type="button"
+                            role="menuitem"
+                            disabled={!canCloseOtherTabs}
+                            className="flex w-full cursor-default select-none items-center rounded-sm px-4 py-3 text-left text-[1.2rem] outline-none transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+                            onClick={handleCloseOtherTabs}
+                        >
+                            해당 탭 제외 모두 닫기
+                        </button>
+                        <button
+                            type="button"
+                            role="menuitem"
+                            className="flex w-full cursor-default select-none items-center rounded-sm px-4 py-3 text-left text-[1.2rem] outline-none transition-colors hover:bg-accent hover:text-accent-foreground"
+                            onClick={handleCloseAllTabs}
+                        >
+                            모든 탭 닫기
+                        </button>
+                    </div>,
+                    document.body,
+                )}
+        </>
     );
 };