ERP-node/frontend/lib/registry/layouts/index.ts

109 lines
3.3 KiB
TypeScript

"use client";
import { LayoutRegistry } from "../LayoutRegistry";
import { discoverLayouts } from "../utils/autoDiscovery";
// 기존 레이아웃들 (호환성을 위해 유지)
import { TabsLayout } from "./TabsLayoutRenderer";
// 새 구조 레이아웃들 (자동 등록)
import "./grid/GridLayoutRenderer";
import "./flexbox/FlexboxLayoutRenderer";
import "./accordion/AccordionLayoutRenderer";
import "./split/SplitLayoutRenderer";
import "./card-layout/CardLayoutRenderer";
import "./hero-section/HeroSectionLayoutRenderer";
// 레이아웃 초기화 함수 (새 구조 + 기존 구조 하이브리드)
export async function initializeLayouts() {
console.log("🚀 레이아웃 시스템 초기화 시작...");
try {
// 1. 자동 디스커버리 실행 (새 구조)
const discoveryResult = await discoverLayouts({
pattern: "./**/*LayoutRenderer.tsx",
verbose: true,
continueOnError: true,
});
console.log(`✅ 자동 디스커버리 완료: ${discoveryResult.successfullyLoaded}개 레이아웃 로드`);
// 2. 기존 구조 레이아웃들 수동 등록 (마이그레이션 완료 시까지)
await initializeLegacyLayouts();
const totalLayouts = LayoutRegistry.getAllLayouts().length;
console.log(`🎉 레이아웃 시스템 초기화 완료: 총 ${totalLayouts}개 레이아웃 등록`);
return {
success: true,
autoDiscovered: discoveryResult.successfullyLoaded,
legacy: totalLayouts - discoveryResult.successfullyLoaded,
total: totalLayouts,
};
} catch (error) {
console.error("❌ 레이아웃 시스템 초기화 실패:", error);
throw error;
}
}
// 기존 구조 레이아웃들 등록 (임시)
async function initializeLegacyLayouts() {
console.log("🔄 기존 구조 레이아웃 로드 중...");
// 플렉스박스 레이아웃 (새 구조로 마이그레이션됨 - 스킵)
// 분할 레이아웃 (새 구조로 마이그레이션됨 - 스킵)
// 탭 레이아웃 (기존 구조 - 임시)
LayoutRegistry.registerLayout({
id: "tabs",
name: "탭 레이아웃",
nameEng: "Tabs Layout",
description: "탭으로 구성된 다중 패널 레이아웃입니다.",
category: "navigation",
icon: "tabs",
component: TabsLayout,
defaultConfig: {
tabs: {
position: "top",
variant: "default",
size: "md",
closable: false,
defaultTab: "tab1",
},
},
defaultZones: [
{
id: "tab1",
name: "탭 1",
position: {},
size: { width: "100%", height: "100%" },
},
{
id: "tab2",
name: "탭 2",
position: {},
size: { width: "100%", height: "100%" },
},
{
id: "tab3",
name: "탭 3",
position: {},
size: { width: "100%", height: "100%" },
},
],
tags: ["tabs", "navigation", "multi-panel"],
isActive: true,
});
console.log("✅ 기존 구조 레이아웃 로드 완료");
}
// 레지스트리에서 레이아웃 조회하는 헬퍼 함수들
export const getLayoutComponent = (layoutType: string) => LayoutRegistry.getLayout(layoutType)?.component;
export const getAllLayoutDefinitions = () => LayoutRegistry.getAllLayouts();
// 앱 시작 시 자동 실행
console.log("📦 레이아웃 모듈 로드됨");