265 lines
9.6 KiB
TypeScript
265 lines
9.6 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
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;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
menuObjid?: number; // 🆕 부모 화면의 메뉴 OBJID
|
|
}
|
|
|
|
export function TabsWidget({ component, className, style, menuObjid }: TabsWidgetProps) {
|
|
const {
|
|
tabs = [],
|
|
defaultTab,
|
|
orientation = "horizontal",
|
|
variant = "default",
|
|
allowCloseable = false,
|
|
persistSelection = false,
|
|
} = component;
|
|
|
|
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 [screenLayouts, setScreenLayouts] = useState<Record<number, any>>({});
|
|
|
|
// 컴포넌트 탭 목록 변경 시 동기화
|
|
useEffect(() => {
|
|
setVisibleTabs(tabs.filter((tab) => !tab.disabled));
|
|
}, [tabs]);
|
|
|
|
// 선택된 탭 변경 시 localStorage에 저장
|
|
useEffect(() => {
|
|
if (persistSelection && typeof window !== "undefined") {
|
|
localStorage.setItem(storageKey, selectedTab);
|
|
}
|
|
}, [selectedTab, persistSelection, storageKey]);
|
|
|
|
// 초기 로드 시 선택된 탭의 화면 불러오기
|
|
useEffect(() => {
|
|
const currentTab = visibleTabs.find((t) => t.id === selectedTab);
|
|
console.log("🔄 초기 탭 로드:", {
|
|
selectedTab,
|
|
currentTab,
|
|
hasScreenId: !!currentTab?.screenId,
|
|
screenId: currentTab?.screenId,
|
|
});
|
|
|
|
if (currentTab && currentTab.screenId && !screenLayouts[currentTab.screenId]) {
|
|
console.log("📥 초기 화면 로딩 시작:", currentTab.screenId);
|
|
loadScreenLayout(currentTab.screenId);
|
|
}
|
|
}, [selectedTab, visibleTabs]);
|
|
|
|
// 화면 레이아웃 로드
|
|
const loadScreenLayout = async (screenId: number) => {
|
|
if (screenLayouts[screenId]) {
|
|
console.log("✅ 이미 로드된 화면:", screenId);
|
|
return; // 이미 로드됨
|
|
}
|
|
|
|
console.log("📥 화면 레이아웃 로딩 시작:", screenId);
|
|
setLoadingScreens((prev) => ({ ...prev, [screenId]: true }));
|
|
|
|
try {
|
|
const { apiClient } = await import("@/lib/api/client");
|
|
const response = await apiClient.get(`/screen-management/screens/${screenId}/layout`);
|
|
console.log("📦 API 응답:", { screenId, success: response.data.success, hasData: !!response.data.data });
|
|
|
|
if (response.data.success && response.data.data) {
|
|
console.log("✅ 화면 레이아웃 로드 완료:", screenId);
|
|
setScreenLayouts((prev) => ({ ...prev, [screenId]: response.data.data }));
|
|
} else {
|
|
console.error("❌ 화면 레이아웃 로드 실패 - success false");
|
|
}
|
|
} catch (error) {
|
|
console.error(`❌ 화면 레이아웃 로드 실패 ${screenId}:`, error);
|
|
} finally {
|
|
setLoadingScreens((prev) => ({ ...prev, [screenId]: false }));
|
|
}
|
|
};
|
|
|
|
// 탭 변경 핸들러
|
|
const handleTabChange = (tabId: string) => {
|
|
console.log("🔄 탭 변경:", tabId);
|
|
setSelectedTab(tabId);
|
|
|
|
// 해당 탭의 화면 로드
|
|
const tab = visibleTabs.find((t) => t.id === tabId);
|
|
console.log("🔍 선택된 탭 정보:", { tab, hasScreenId: !!tab?.screenId, screenId: tab?.screenId });
|
|
|
|
if (tab && tab.screenId && !screenLayouts[tab.screenId]) {
|
|
console.log("📥 탭 변경 시 화면 로딩:", tab.screenId);
|
|
loadScreenLayout(tab.screenId);
|
|
}
|
|
};
|
|
|
|
// 탭 닫기 핸들러
|
|
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);
|
|
}
|
|
};
|
|
|
|
// 탭 스타일 클래스
|
|
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) {
|
|
console.log("⚠️ 보이는 탭이 없음");
|
|
return (
|
|
<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>
|
|
);
|
|
}
|
|
|
|
console.log("🎨 TabsWidget 최종 렌더링:", {
|
|
visibleTabsCount: visibleTabs.length,
|
|
selectedTab,
|
|
screenLayoutsKeys: Object.keys(screenLayouts),
|
|
loadingScreensKeys: Object.keys(loadingScreens),
|
|
});
|
|
|
|
return (
|
|
<div className="flex h-full w-full flex-col pt-4" style={style}>
|
|
<Tabs
|
|
value={selectedTab}
|
|
onValueChange={handleTabChange}
|
|
orientation={orientation}
|
|
className="flex h-full w-full flex-col"
|
|
>
|
|
<div className="relative z-10">
|
|
<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>
|
|
{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>
|
|
))}
|
|
</TabsList>
|
|
</div>
|
|
|
|
<div className="relative flex-1 overflow-hidden">
|
|
{visibleTabs.map((tab) => (
|
|
<TabsContent key={tab.id} value={tab.id} className="h-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] ? (
|
|
(() => {
|
|
const layoutData = screenLayouts[tab.screenId];
|
|
const { components = [], screenResolution } = layoutData;
|
|
|
|
console.log("🎯 렌더링할 화면 데이터:", {
|
|
screenId: tab.screenId,
|
|
componentsCount: components.length,
|
|
screenResolution,
|
|
});
|
|
|
|
const designWidth = screenResolution?.width || 1920;
|
|
const designHeight = screenResolution?.height || 1080;
|
|
|
|
return (
|
|
<div
|
|
className="relative h-full w-full overflow-auto bg-background"
|
|
style={{
|
|
minHeight: `${designHeight}px`,
|
|
}}
|
|
>
|
|
<div
|
|
className="relative"
|
|
style={{
|
|
width: `${designWidth}px`,
|
|
height: `${designHeight}px`,
|
|
margin: "0 auto",
|
|
}}
|
|
>
|
|
{components.map((component: any) => (
|
|
<InteractiveScreenViewerDynamic
|
|
key={component.id}
|
|
component={component}
|
|
allComponents={components}
|
|
screenInfo={{
|
|
id: tab.screenId,
|
|
tableName: layoutData.tableName,
|
|
}}
|
|
menuObjid={menuObjid} // 🆕 부모의 menuObjid 전달
|
|
/>
|
|
))}
|
|
</div>
|
|
</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>
|
|
))}
|
|
</div>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
}
|