탭기능 중간커밋

frontend/components/screen/widgets/TabsWidget.tsx

@@ -1,210 +1,187 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import { TabsComponent, TabItem, ScreenDefinition } from "@/types";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Card } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Loader2, FileQuestion } from "lucide-react";
-import { screenApi } from "@/lib/api/screen";
+import { Button } from "@/components/ui/button";
+import { X, Loader2 } from "lucide-react";
+import type { TabsComponent, TabItem } from "@/types/screen-management";
 import { InteractiveScreenViewerDynamic } from "@/components/screen/InteractiveScreenViewerDynamic";
 
 interface TabsWidgetProps {
   component: TabsComponent;
-  isPreview?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
-/**
- * 탭 위젯 컴포넌트
- * 각 탭에 다른 화면을 표시할 수 있습니다
- */
-export const TabsWidget: React.FC<TabsWidgetProps> = ({ component, isPreview = false }) => {
-  // componentConfig에서 설정 읽기 (새 컴포넌트 시스템)
-  const config = (component as any).componentConfig || component;
-  const { tabs = [], defaultTab, orientation = "horizontal", variant = "default" } = config;
-  
-  // console.log("🔍 TabsWidget 렌더링:", {
-  //   component,
-  //   componentConfig: (component as any).componentConfig,
-  //   tabs,
-  //   tabsLength: tabs.length
-  // });
+export function TabsWidget({ component, className, style }: TabsWidgetProps) {
+  const {
+    tabs = [],
+    defaultTab,
+    orientation = "horizontal",
+    variant = "default",
+    allowCloseable = false,
+    persistSelection = false,
+  } = component;
 
-  const [activeTab, setActiveTab] = useState<string>(defaultTab || tabs[0]?.id || "");
-  const [loadedScreens, setLoadedScreens] = useState<Record<string, any>>({});
+  console.log("🎨 TabsWidget 렌더링:", {
+    componentId: component.id,
+    tabs,
+    tabsLength: tabs.length,
+    component,
+  });
+
+  const storageKey = `tabs-${component.id}-selected`;
+
+  // 초기 선택 탭 결정
+  const getInitialTab = () => {
+    if (persistSelection && typeof window !== "undefined") {
+      const saved = localStorage.getItem(storageKey);
+      if (saved && tabs.some((t) => t.id === saved)) {
+        return saved;
+      }
+    }
+    return defaultTab || tabs[0]?.id || "";
+  };
+
+  const [selectedTab, setSelectedTab] = useState<string>(getInitialTab());
+  const [visibleTabs, setVisibleTabs] = useState<TabItem[]>(tabs);
   const [loadingScreens, setLoadingScreens] = useState<Record<string, boolean>>({});
-  const [screenErrors, setScreenErrors] = useState<Record<string, string>>({});
+  const [screenLayouts, setScreenLayouts] = useState<Record<number, any>>({});
 
-  // 탭 변경 시 화면 로드
+  // 컴포넌트 탭 목록 변경 시 동기화
   useEffect(() => {
-    if (!activeTab) return;
+    setVisibleTabs(tabs.filter((tab) => !tab.disabled));
+  }, [tabs]);
 
-    const currentTab = tabs.find((tab) => tab.id === activeTab);
-    if (!currentTab || !currentTab.screenId) return;
+  // 선택된 탭 변경 시 localStorage에 저장
+  useEffect(() => {
+    if (persistSelection && typeof window !== "undefined") {
+      localStorage.setItem(storageKey, selectedTab);
+    }
+  }, [selectedTab, persistSelection, storageKey]);
 
-    // 이미 로드된 화면이면 스킵
-    if (loadedScreens[activeTab]) return;
+  // 화면 레이아웃 로드
+  const loadScreenLayout = async (screenId: number) => {
+    if (screenLayouts[screenId]) {
+      return; // 이미 로드됨
+    }
 
-    // 이미 로딩 중이면 스킵
-    if (loadingScreens[activeTab]) return;
-
-    // 화면 로드 시작
-    loadScreen(activeTab, currentTab.screenId);
-  }, [activeTab, tabs]);
-
-  const loadScreen = async (tabId: string, screenId: number) => {
-    setLoadingScreens((prev) => ({ ...prev, [tabId]: true }));
-    setScreenErrors((prev) => ({ ...prev, [tabId]: "" }));
+    setLoadingScreens((prev) => ({ ...prev, [screenId]: true }));
 
     try {
-      const layoutData = await screenApi.getLayout(screenId);
-
-      if (layoutData) {
-        setLoadedScreens((prev) => ({
-          ...prev,
-          [tabId]: {
-            screenId,
-            layout: layoutData,
-          },
-        }));
-      } else {
-        setScreenErrors((prev) => ({
-          ...prev,
-          [tabId]: "화면을 불러올 수 없습니다",
-        }));
+      const response = await fetch(`/api/screen-management/screens/${screenId}/layout`);
+      if (response.ok) {
+        const data = await response.json();
+        if (data.success && data.data) {
+          setScreenLayouts((prev) => ({ ...prev, [screenId]: data.data }));
+        }
       }
-    } catch (error: any) {
-      setScreenErrors((prev) => ({
-        ...prev,
-        [tabId]: error.message || "화면 로드 중 오류가 발생했습니다",
-      }));
+    } catch (error) {
+      console.error(`Failed to load screen layout ${screenId}:`, error);
     } finally {
-      setLoadingScreens((prev) => ({ ...prev, [tabId]: false }));
+      setLoadingScreens((prev) => ({ ...prev, [screenId]: false }));
     }
   };
 
-  // 탭 콘텐츠 렌더링
-  const renderTabContent = (tab: TabItem) => {
-    const isLoading = loadingScreens[tab.id];
-    const error = screenErrors[tab.id];
-    const screenData = loadedScreens[tab.id];
+  // 탭 변경 핸들러
+  const handleTabChange = (tabId: string) => {
+    setSelectedTab(tabId);
 
-    // 로딩 중
-    if (isLoading) {
-      return (
-        <div className="flex h-full flex-col items-center justify-center space-y-4">
-          <Loader2 className="h-8 w-8 animate-spin text-primary" />
-          <p className="text-muted-foreground text-sm">화면을 불러오는 중...</p>
-        </div>
-      );
+    // 해당 탭의 화면 로드
+    const tab = visibleTabs.find((t) => t.id === tabId);
+    if (tab && tab.screenId && !screenLayouts[tab.screenId]) {
+      loadScreenLayout(tab.screenId);
     }
+  };
 
-    // 에러 발생
-    if (error) {
-      return (
-        <div className="flex h-full flex-col items-center justify-center space-y-4">
-          <FileQuestion className="h-12 w-12 text-destructive" />
-          <div className="text-center">
-            <p className="mb-2 font-medium text-destructive">화면 로드 실패</p>
-            <p className="text-muted-foreground text-sm">{error}</p>
-          </div>
-        </div>
-      );
+  // 탭 닫기 핸들러
+  const handleCloseTab = (tabId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    const updatedTabs = visibleTabs.filter((tab) => tab.id !== tabId);
+    setVisibleTabs(updatedTabs);
+
+    // 닫은 탭이 선택된 탭이었다면 다음 탭 선택
+    if (selectedTab === tabId && updatedTabs.length > 0) {
+      setSelectedTab(updatedTabs[0].id);
     }
+  };
 
-    // 화면 ID가 없는 경우
-    if (!tab.screenId) {
-      return (
-        <div className="flex h-full flex-col items-center justify-center space-y-4">
-          <FileQuestion className="text-muted-foreground h-12 w-12" />
-          <div className="text-center">
-            <p className="text-muted-foreground mb-2 text-sm">화면이 할당되지 않았습니다</p>
-            <p className="text-xs text-gray-400">상세설정에서 화면을 선택하세요</p>
-          </div>
-        </div>
-      );
-    }
-
-    // 화면 렌더링 - 원본 화면의 모든 컴포넌트를 그대로 렌더링
-    if (screenData && screenData.layout && screenData.layout.components) {
-      const components = screenData.layout.components;
-      const screenResolution = screenData.layout.screenResolution || { width: 1920, height: 1080 };
-      
-      return (
-        <div className="bg-white" style={{ width: `${screenResolution.width}px`, height: '100%' }}>
-          <div className="relative h-full">
-            {components.map((comp) => (
-              <InteractiveScreenViewerDynamic
-                key={comp.id}
-                component={comp}
-                allComponents={components}
-                screenInfo={{ id: tab.screenId }}
-              />
-            ))}
-          </div>
-        </div>
-      );
-    }
+  // 탭 스타일 클래스
+  const getTabsListClass = () => {
+    const baseClass = orientation === "vertical" ? "flex-col" : "";
+    const variantClass =
+      variant === "pills"
+        ? "bg-muted p-1 rounded-lg"
+        : variant === "underline"
+          ? "border-b"
+          : "bg-muted p-1";
+    return `${baseClass} ${variantClass}`;
+  };
 
+  if (visibleTabs.length === 0) {
     return (
-      <div className="flex h-full flex-col items-center justify-center space-y-4">
-        <FileQuestion className="text-muted-foreground h-12 w-12" />
-        <div className="text-center">
-          <p className="text-muted-foreground text-sm">화면 데이터를 불러올 수 없습니다</p>
-        </div>
+      <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
+        <p className="text-muted-foreground text-sm">탭이 없습니다</p>
       </div>
     );
-  };
-
-  // 빈 탭 목록
-  if (tabs.length === 0) {
-    return (
-      <Card className="flex h-full w-full items-center justify-center">
-        <div className="text-center">
-          <p className="text-muted-foreground text-sm">탭이 없습니다</p>
-          <p className="text-xs text-gray-400">상세설정에서 탭을 추가하세요</p>
-        </div>
-      </Card>
-    );
   }
 
   return (
-    <div className="h-full w-full overflow-auto">
-      <Tabs
-        value={activeTab}
-        onValueChange={setActiveTab}
-        orientation={orientation}
-        className="flex h-full w-full flex-col"
-      >
-        <TabsList className={orientation === "horizontal" ? "justify-start shrink-0" : "flex-col shrink-0"}>
-          {tabs.map((tab) => (
-            <TabsTrigger
-              key={tab.id}
-              value={tab.id}
-              disabled={tab.disabled}
-              className={orientation === "horizontal" ? "" : "w-full justify-start"}
-            >
-              <span>{tab.label}</span>
-              {tab.screenName && (
-                <Badge variant="secondary" className="ml-2 text-[10px]">
-                  {tab.screenName}
-                </Badge>
-              )}
+    <Tabs
+      value={selectedTab}
+      onValueChange={handleTabChange}
+      orientation={orientation}
+      className={className}
+      style={style}
+    >
+      <TabsList className={getTabsListClass()}>
+        {visibleTabs.map((tab) => (
+          <div key={tab.id} className="relative">
+            <TabsTrigger value={tab.id} disabled={tab.disabled} className="relative pr-8">
+              {tab.label}
             </TabsTrigger>
-          ))}
-        </TabsList>
-
-        {tabs.map((tab) => (
-          <TabsContent 
-            key={tab.id} 
-            value={tab.id} 
-            className="flex-1 mt-0 data-[state=inactive]:hidden"
-          >
-            {renderTabContent(tab)}
-          </TabsContent>
+            {allowCloseable && (
+              <Button
+                onClick={(e) => handleCloseTab(tab.id, e)}
+                variant="ghost"
+                size="sm"
+                className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 p-0 hover:bg-destructive/10"
+              >
+                <X className="h-3 w-3" />
+              </Button>
+            )}
+          </div>
         ))}
-      </Tabs>
-    </div>
-  );
-};
+      </TabsList>
 
+      {visibleTabs.map((tab) => (
+        <TabsContent key={tab.id} value={tab.id} className="h-full w-full">
+          {tab.screenId ? (
+            loadingScreens[tab.screenId] ? (
+              <div className="flex h-full w-full items-center justify-center">
+                <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                <span className="text-muted-foreground ml-2">화면 로딩 중...</span>
+              </div>
+            ) : screenLayouts[tab.screenId] ? (
+              <div className="h-full w-full overflow-auto">
+                <InteractiveScreenViewerDynamic
+                  component={screenLayouts[tab.screenId].components[0]}
+                  allComponents={screenLayouts[tab.screenId].components}
+                />
+              </div>
+            ) : (
+              <div className="flex h-full w-full items-center justify-center">
+                <p className="text-muted-foreground text-sm">화면을 불러올 수 없습니다</p>
+              </div>
+            )
+          ) : (
+            <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
+              <p className="text-muted-foreground text-sm">연결된 화면이 없습니다</p>
+            </div>
+          )}
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+}