424 lines
14 KiB
TypeScript
424 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useMemo } 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, TabInlineComponent, ComponentData } from "@/types/screen-management";
|
|
import { cn } from "@/lib/utils";
|
|
import { useActiveTab } from "@/contexts/ActiveTabContext";
|
|
import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
|
|
import { screenApi } from "@/lib/api/screen";
|
|
|
|
// 확장된 TabItem 타입 (screenId 지원)
|
|
interface ExtendedTabItem extends TabItem {
|
|
screenId?: number;
|
|
screenName?: string;
|
|
}
|
|
|
|
interface TabsWidgetProps {
|
|
component: TabsComponent;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
menuObjid?: number;
|
|
formData?: Record<string, any>;
|
|
onFormDataChange?: (fieldName: string, value: any) => void;
|
|
isDesignMode?: boolean;
|
|
onComponentSelect?: (tabId: string, componentId: string) => void;
|
|
selectedComponentId?: string;
|
|
}
|
|
|
|
export function TabsWidget({
|
|
component,
|
|
className,
|
|
style,
|
|
menuObjid,
|
|
formData = {},
|
|
onFormDataChange,
|
|
isDesignMode = false,
|
|
onComponentSelect,
|
|
selectedComponentId,
|
|
}: TabsWidgetProps) {
|
|
const { setActiveTab, removeTabsComponent } = useActiveTab();
|
|
const {
|
|
tabs = [],
|
|
defaultTab,
|
|
orientation = "horizontal",
|
|
variant = "default",
|
|
allowCloseable = false,
|
|
persistSelection = false,
|
|
} = 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<ExtendedTabItem[]>(tabs as ExtendedTabItem[]);
|
|
const [mountedTabs, setMountedTabs] = useState<Set<string>>(() => new Set([getInitialTab()]));
|
|
|
|
// 🆕 화면 진입 시 첫 번째 탭 자동 선택 및 마운트
|
|
useEffect(() => {
|
|
// 현재 선택된 탭이 유효하지 않거나 비어있으면 첫 번째 탭 선택
|
|
const validTabs = (tabs as ExtendedTabItem[]).filter((tab) => !tab.disabled);
|
|
const firstValidTabId = validTabs[0]?.id;
|
|
|
|
if (firstValidTabId) {
|
|
// 선택된 탭이 없거나 유효하지 않으면 첫 번째 탭으로 설정
|
|
setSelectedTab((currentSelected) => {
|
|
if (!currentSelected || !validTabs.some((t) => t.id === currentSelected)) {
|
|
return firstValidTabId;
|
|
}
|
|
return currentSelected;
|
|
});
|
|
|
|
// 첫 번째 탭이 mountedTabs에 없으면 추가
|
|
setMountedTabs((prev) => {
|
|
const newSet = new Set(prev);
|
|
// 첫 번째 탭 추가
|
|
if (firstValidTabId && !newSet.has(firstValidTabId)) {
|
|
newSet.add(firstValidTabId);
|
|
}
|
|
return newSet;
|
|
});
|
|
}
|
|
}, [tabs]); // tabs가 변경될 때마다 실행
|
|
|
|
// screenId 기반 화면 로드 상태
|
|
const [screenLayouts, setScreenLayouts] = useState<Record<string, ComponentData[]>>({});
|
|
const [screenLoadingStates, setScreenLoadingStates] = useState<Record<string, boolean>>({});
|
|
const [screenErrors, setScreenErrors] = useState<Record<string, string>>({});
|
|
|
|
// 컴포넌트 탭 목록 변경 시 동기화
|
|
useEffect(() => {
|
|
setVisibleTabs((tabs as ExtendedTabItem[]).filter((tab) => !tab.disabled));
|
|
}, [tabs]);
|
|
|
|
// screenId가 있는 탭의 화면 레이아웃 로드
|
|
useEffect(() => {
|
|
const loadScreenLayouts = async () => {
|
|
for (const tab of visibleTabs) {
|
|
const extTab = tab as ExtendedTabItem;
|
|
// screenId가 있고, 아직 로드하지 않았으며, 인라인 컴포넌트가 없는 경우만 로드
|
|
if (extTab.screenId && !screenLayouts[tab.id] && !screenLoadingStates[tab.id] && (!extTab.components || extTab.components.length === 0)) {
|
|
setScreenLoadingStates(prev => ({ ...prev, [tab.id]: true }));
|
|
try {
|
|
const layoutData = await screenApi.getLayout(extTab.screenId);
|
|
if (layoutData && layoutData.components) {
|
|
setScreenLayouts(prev => ({ ...prev, [tab.id]: layoutData.components }));
|
|
}
|
|
} catch (error) {
|
|
console.error(`탭 "${tab.label}" 화면 로드 실패:`, error);
|
|
setScreenErrors(prev => ({ ...prev, [tab.id]: "화면을 불러올 수 없습니다." }));
|
|
} finally {
|
|
setScreenLoadingStates(prev => ({ ...prev, [tab.id]: false }));
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
loadScreenLayouts();
|
|
}, [visibleTabs, screenLayouts, screenLoadingStates]);
|
|
|
|
// 선택된 탭 변경 시 localStorage에 저장 + ActiveTab Context 업데이트
|
|
useEffect(() => {
|
|
if (persistSelection && typeof window !== "undefined") {
|
|
localStorage.setItem(storageKey, selectedTab);
|
|
}
|
|
|
|
const currentTabInfo = visibleTabs.find((t) => t.id === selectedTab);
|
|
if (currentTabInfo) {
|
|
setActiveTab(component.id, {
|
|
tabId: selectedTab,
|
|
tabsComponentId: component.id,
|
|
label: currentTabInfo.label,
|
|
});
|
|
}
|
|
}, [selectedTab, persistSelection, storageKey, component.id, visibleTabs, setActiveTab]);
|
|
|
|
// 컴포넌트 언마운트 시 ActiveTab Context에서 제거
|
|
useEffect(() => {
|
|
return () => {
|
|
removeTabsComponent(component.id);
|
|
};
|
|
}, [component.id, removeTabsComponent]);
|
|
|
|
// 탭 변경 핸들러
|
|
const handleTabChange = (tabId: string) => {
|
|
setSelectedTab(tabId);
|
|
|
|
setMountedTabs((prev) => {
|
|
if (prev.has(tabId)) return prev;
|
|
const newSet = new Set(prev);
|
|
newSet.add(tabId);
|
|
return newSet;
|
|
});
|
|
};
|
|
|
|
// 탭 닫기 핸들러
|
|
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}`;
|
|
};
|
|
|
|
// 탭 컨텐츠 렌더링 (screenId 또는 인라인 컴포넌트)
|
|
const renderTabContent = (tab: ExtendedTabItem) => {
|
|
const extTab = tab as ExtendedTabItem;
|
|
const inlineComponents = tab.components || [];
|
|
|
|
// 1. screenId가 있고 인라인 컴포넌트가 없는 경우 -> 화면 로드 방식
|
|
if (extTab.screenId && inlineComponents.length === 0) {
|
|
// 로딩 중
|
|
if (screenLoadingStates[tab.id]) {
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center">
|
|
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
<span className="ml-2 text-muted-foreground">화면을 불러오는 중...</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 에러 발생
|
|
if (screenErrors[tab.id]) {
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-destructive/50 bg-destructive/5">
|
|
<p className="text-destructive text-sm">{screenErrors[tab.id]}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 화면 레이아웃이 로드된 경우
|
|
const loadedComponents = screenLayouts[tab.id];
|
|
if (loadedComponents && loadedComponents.length > 0) {
|
|
return renderScreenComponents(loadedComponents);
|
|
}
|
|
|
|
// 아직 로드되지 않은 경우
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center">
|
|
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 2. 인라인 컴포넌트가 있는 경우 -> 기존 v2 방식
|
|
if (inlineComponents.length > 0) {
|
|
return renderInlineComponents(tab, inlineComponents);
|
|
}
|
|
|
|
// 3. 둘 다 없는 경우
|
|
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">
|
|
{isDesignMode ? "컴포넌트를 드래그하여 추가하세요" : "컴포넌트가 없습니다"}
|
|
</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// screenId로 로드한 화면 컴포넌트 렌더링
|
|
const renderScreenComponents = (components: ComponentData[]) => {
|
|
// InteractiveScreenViewerDynamic 동적 로드
|
|
const InteractiveScreenViewerDynamic = require("@/components/screen/InteractiveScreenViewerDynamic").InteractiveScreenViewerDynamic;
|
|
|
|
// 컴포넌트들의 최대 위치를 계산하여 스크롤 가능한 영역 확보
|
|
const maxBottom = Math.max(
|
|
...components.map((c) => (c.position?.y || 0) + (c.size?.height || 100)),
|
|
300
|
|
);
|
|
const maxRight = Math.max(
|
|
...components.map((c) => (c.position?.x || 0) + (c.size?.width || 200)),
|
|
400
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className="relative h-full w-full overflow-auto"
|
|
style={{
|
|
minHeight: maxBottom + 20,
|
|
minWidth: maxRight + 20,
|
|
}}
|
|
>
|
|
{components.map((comp) => (
|
|
<div
|
|
key={comp.id}
|
|
className="absolute"
|
|
style={{
|
|
left: comp.position?.x || 0,
|
|
top: comp.position?.y || 0,
|
|
width: comp.size?.width || "auto",
|
|
height: comp.size?.height || "auto",
|
|
}}
|
|
>
|
|
<InteractiveScreenViewerDynamic
|
|
component={comp}
|
|
allComponents={components}
|
|
formData={formData}
|
|
onFormDataChange={onFormDataChange}
|
|
menuObjid={menuObjid}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 인라인 컴포넌트 렌더링 (v2 방식)
|
|
const renderInlineComponents = (tab: TabItem, components: TabInlineComponent[]) => {
|
|
// 컴포넌트들의 최대 위치를 계산하여 스크롤 가능한 영역 확보
|
|
const maxBottom = Math.max(
|
|
...components.map((c) => (c.position?.y || 0) + (c.size?.height || 100)),
|
|
300 // 최소 높이
|
|
);
|
|
const maxRight = Math.max(
|
|
...components.map((c) => (c.position?.x || 0) + (c.size?.width || 200)),
|
|
400 // 최소 너비
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className="relative"
|
|
style={{
|
|
minHeight: maxBottom + 20,
|
|
minWidth: maxRight + 20,
|
|
}}
|
|
>
|
|
{components.map((comp: TabInlineComponent) => {
|
|
const isSelected = selectedComponentId === comp.id;
|
|
|
|
return (
|
|
<div
|
|
key={comp.id}
|
|
className={cn(
|
|
"absolute",
|
|
isDesignMode && "cursor-move",
|
|
isDesignMode && isSelected && "ring-2 ring-primary ring-offset-2"
|
|
)}
|
|
style={{
|
|
left: comp.position?.x || 0,
|
|
top: comp.position?.y || 0,
|
|
width: comp.size?.width || 200,
|
|
height: comp.size?.height || 100,
|
|
}}
|
|
onClick={(e) => {
|
|
if (isDesignMode && onComponentSelect) {
|
|
e.stopPropagation();
|
|
onComponentSelect(tab.id, comp.id);
|
|
}
|
|
}}
|
|
>
|
|
<DynamicComponentRenderer
|
|
component={{
|
|
id: comp.id,
|
|
componentType: comp.componentType,
|
|
label: comp.label,
|
|
position: comp.position,
|
|
size: comp.size,
|
|
componentConfig: comp.componentConfig || {},
|
|
style: comp.style,
|
|
}}
|
|
formData={formData}
|
|
onFormDataChange={onFormDataChange}
|
|
menuObjid={menuObjid}
|
|
isDesignMode={isDesignMode}
|
|
isInteractive={!isDesignMode}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
if (visibleTabs.length === 0) {
|
|
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>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={cn("flex h-full w-full flex-col pt-4", className)} 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}
|
|
{tab.components && tab.components.length > 0 && (
|
|
<span className="ml-1 text-xs text-muted-foreground">
|
|
({tab.components.length})
|
|
</span>
|
|
)}
|
|
</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-auto">
|
|
{visibleTabs.map((tab) => {
|
|
const shouldRender = mountedTabs.has(tab.id);
|
|
const isActive = selectedTab === tab.id;
|
|
|
|
return (
|
|
<TabsContent
|
|
key={tab.id}
|
|
value={tab.id}
|
|
forceMount
|
|
className={cn("h-full overflow-auto", !isActive && "hidden")}
|
|
>
|
|
{shouldRender && renderTabContent(tab)}
|
|
</TabsContent>
|
|
);
|
|
})}
|
|
</div>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
}
|