368 lines
11 KiB
TypeScript
368 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { BaseLayoutRenderer, LayoutRendererProps } from "./BaseLayoutRenderer";
|
|
import { LayoutDefinition } from "@/types/layout";
|
|
import { LayoutRegistry } from "../LayoutRegistry";
|
|
import { ComponentData, LayoutComponent } from "@/types/screen";
|
|
import { LayoutZone } from "@/types/layout";
|
|
import React from "react";
|
|
import { DynamicComponentRenderer } from "../DynamicComponentRenderer";
|
|
|
|
/**
|
|
* 자동 등록 기능을 제공하는 베이스 레이아웃 렌더러
|
|
*
|
|
* 사용 방법:
|
|
* 1. 이 클래스를 상속받습니다
|
|
* 2. static layoutDefinition을 정의합니다
|
|
* 3. 파일을 import하면 자동으로 등록됩니다
|
|
*/
|
|
export class AutoRegisteringLayoutRenderer {
|
|
protected props: LayoutRendererProps;
|
|
|
|
constructor(props: LayoutRendererProps) {
|
|
this.props = props;
|
|
}
|
|
|
|
/**
|
|
* 레이아웃 정의 - 각 구현 클래스에서 반드시 정의해야 함
|
|
*/
|
|
static readonly layoutDefinition: LayoutDefinition;
|
|
|
|
/**
|
|
* 렌더링 메서드 - 각 구현 클래스에서 오버라이드해야 함
|
|
*/
|
|
render(): React.ReactElement {
|
|
throw new Error("render() method must be implemented by subclass");
|
|
}
|
|
|
|
/**
|
|
* 레이아웃 컨테이너 스타일을 계산합니다.
|
|
*/
|
|
getLayoutContainerStyle(): React.CSSProperties {
|
|
const { layout, style: propStyle } = this.props;
|
|
|
|
const style: React.CSSProperties = {
|
|
width: layout.size.width,
|
|
height: layout.size.height,
|
|
position: "relative",
|
|
overflow: "hidden",
|
|
...propStyle,
|
|
};
|
|
|
|
// 레이아웃 커스텀 스타일 적용
|
|
if (layout.style) {
|
|
Object.assign(style, this.convertComponentStyleToCSS(layout.style));
|
|
}
|
|
|
|
return style;
|
|
}
|
|
|
|
/**
|
|
* 컴포넌트 스타일을 CSS 스타일로 변환합니다.
|
|
*/
|
|
protected convertComponentStyleToCSS(componentStyle: any): React.CSSProperties {
|
|
const cssStyle: React.CSSProperties = {};
|
|
|
|
if (componentStyle.backgroundColor) {
|
|
cssStyle.backgroundColor = componentStyle.backgroundColor;
|
|
}
|
|
if (componentStyle.borderColor) {
|
|
cssStyle.borderColor = componentStyle.borderColor;
|
|
}
|
|
if (componentStyle.borderWidth) {
|
|
cssStyle.borderWidth = `${componentStyle.borderWidth}px`;
|
|
}
|
|
if (componentStyle.borderStyle) {
|
|
cssStyle.borderStyle = componentStyle.borderStyle;
|
|
}
|
|
if (componentStyle.borderRadius) {
|
|
cssStyle.borderRadius = `${componentStyle.borderRadius}px`;
|
|
}
|
|
|
|
return cssStyle;
|
|
}
|
|
|
|
/**
|
|
* 존별 자식 컴포넌트들을 분류합니다.
|
|
*/
|
|
getZoneChildren(zoneId: string): ComponentData[] {
|
|
return this.props.allComponents.filter((comp) => comp.parentId === this.props.layout.id && comp.zoneId === zoneId);
|
|
}
|
|
|
|
/**
|
|
* 레이아웃 존을 렌더링합니다.
|
|
*/
|
|
renderZone(
|
|
zone: LayoutZone,
|
|
zoneChildren: ComponentData[] = [],
|
|
additionalProps: Record<string, any> = {},
|
|
): React.ReactElement {
|
|
const { isDesignMode, onZoneClick, onComponentDrop } = this.props;
|
|
|
|
// 존 스타일 계산 - 항상 구역 경계 표시
|
|
const zoneStyle: React.CSSProperties = {
|
|
position: "relative",
|
|
// 구역 경계 시각화 - 항상 표시
|
|
border: "1px solid #e2e8f0",
|
|
borderRadius: "6px",
|
|
backgroundColor: "rgba(248, 250, 252, 0.5)",
|
|
transition: "all 0.2s ease",
|
|
...this.getZoneStyle(zone),
|
|
...additionalProps.style,
|
|
};
|
|
|
|
// 디자인 모드일 때 더 강조된 스타일
|
|
if (isDesignMode) {
|
|
zoneStyle.border = "2px dashed #cbd5e1";
|
|
zoneStyle.backgroundColor = "rgba(241, 245, 249, 0.8)";
|
|
}
|
|
|
|
// 호버 효과를 위한 추가 스타일
|
|
const dropZoneStyle: React.CSSProperties = {
|
|
minHeight: isDesignMode ? "60px" : "40px",
|
|
borderRadius: "4px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: zoneChildren.length === 0 ? "center" : "stretch",
|
|
justifyContent: zoneChildren.length === 0 ? "flex-start" : "flex-start",
|
|
color: "#64748b",
|
|
fontSize: "12px",
|
|
transition: "all 0.2s ease",
|
|
padding: "8px",
|
|
position: "relative",
|
|
};
|
|
|
|
return (
|
|
<div
|
|
key={zone.id}
|
|
className={`layout-zone ${additionalProps.className || ""}`}
|
|
style={zoneStyle}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onZoneClick?.(zone.id, e);
|
|
}}
|
|
onDragOver={(e) => {
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = "copy";
|
|
}}
|
|
onDrop={(e) => {
|
|
e.preventDefault();
|
|
const componentData = e.dataTransfer.getData("application/json");
|
|
if (componentData) {
|
|
try {
|
|
const component = JSON.parse(componentData);
|
|
onComponentDrop?.(zone.id, component, e);
|
|
} catch (error) {
|
|
console.error("컴포넌트 드롭 데이터 파싱 오류:", error);
|
|
}
|
|
}
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.borderColor = "#3b82f6";
|
|
e.currentTarget.style.backgroundColor = "rgba(59, 130, 246, 0.05)";
|
|
e.currentTarget.style.boxShadow = "0 0 0 2px rgba(59, 130, 246, 0.1)";
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.borderColor = isDesignMode ? "#cbd5e1" : "#e2e8f0";
|
|
e.currentTarget.style.backgroundColor = isDesignMode
|
|
? "rgba(241, 245, 249, 0.8)"
|
|
: "rgba(248, 250, 252, 0.5)";
|
|
e.currentTarget.style.boxShadow = "none";
|
|
}}
|
|
{...additionalProps}
|
|
>
|
|
{/* 존 라벨 */}
|
|
<div
|
|
className="zone-label"
|
|
style={{
|
|
position: "absolute",
|
|
top: "-2px",
|
|
left: "8px",
|
|
backgroundColor: isDesignMode ? "#3b82f6" : "#64748b",
|
|
color: "white",
|
|
fontSize: "10px",
|
|
padding: "2px 6px",
|
|
borderRadius: "0 0 4px 4px",
|
|
fontWeight: "500",
|
|
zIndex: 10,
|
|
opacity: isDesignMode ? 1 : 0.7,
|
|
}}
|
|
>
|
|
{zone.name || zone.id}
|
|
</div>
|
|
|
|
{/* 드롭존 */}
|
|
<div className="drop-zone" style={dropZoneStyle}>
|
|
{zoneChildren.length > 0 ? (
|
|
zoneChildren.map((child) => (
|
|
<DynamicComponentRenderer
|
|
key={child.id}
|
|
component={child}
|
|
allComponents={this.props.allComponents}
|
|
isDesignMode={isDesignMode}
|
|
/>
|
|
))
|
|
) : (
|
|
<div className="empty-zone-indicator" style={{ textAlign: "center", opacity: 0.6 }}>
|
|
{isDesignMode ? "컴포넌트를 드래그하여 추가하세요" : ""}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 존의 스타일을 계산합니다.
|
|
*/
|
|
protected getZoneStyle(zone: LayoutZone): React.CSSProperties {
|
|
const style: React.CSSProperties = {};
|
|
|
|
if (zone.size) {
|
|
if (zone.size.width) {
|
|
style.width = typeof zone.size.width === "number" ? `${zone.size.width}px` : zone.size.width;
|
|
}
|
|
if (zone.size.height) {
|
|
style.height = typeof zone.size.height === "number" ? `${zone.size.height}px` : zone.size.height;
|
|
}
|
|
if (zone.size.minWidth) {
|
|
style.minWidth = typeof zone.size.minWidth === "number" ? `${zone.size.minWidth}px` : zone.size.minWidth;
|
|
}
|
|
if (zone.size.minHeight) {
|
|
style.minHeight = typeof zone.size.minHeight === "number" ? `${zone.size.minHeight}px` : zone.size.minHeight;
|
|
}
|
|
}
|
|
|
|
return style;
|
|
}
|
|
|
|
/**
|
|
* 자동 등록 상태 추적
|
|
*/
|
|
private static registeredLayouts = new Set<string>();
|
|
|
|
/**
|
|
* 클래스가 정의될 때 자동으로 레지스트리에 등록
|
|
*/
|
|
static registerSelf(): void {
|
|
const definition = this.layoutDefinition;
|
|
|
|
if (!definition) {
|
|
console.error(`❌ ${this.name}: layoutDefinition이 정의되지 않았습니다.`);
|
|
return;
|
|
}
|
|
|
|
if (this.registeredLayouts.has(definition.id)) {
|
|
console.warn(`⚠️ ${definition.id} 레이아웃이 이미 등록되어 있습니다.`);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// 레지스트리에 등록
|
|
LayoutRegistry.registerLayout(definition);
|
|
this.registeredLayouts.add(definition.id);
|
|
|
|
console.log(`✅ 자동 등록 완료: ${definition.id} (${definition.name})`);
|
|
|
|
// 개발 모드에서 추가 정보 출력
|
|
if (process.env.NODE_ENV === "development") {
|
|
console.log(`📦 ${definition.id}:`, {
|
|
name: definition.name,
|
|
category: definition.category,
|
|
zones: definition.defaultZones?.length || 0,
|
|
tags: definition.tags?.join(", ") || "none",
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error(`❌ ${definition.id} 레이아웃 등록 실패:`, error);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 레이아웃 등록 해제 (개발 모드에서 Hot Reload용)
|
|
*/
|
|
static unregisterSelf(): void {
|
|
const definition = this.layoutDefinition;
|
|
|
|
if (definition && this.registeredLayouts.has(definition.id)) {
|
|
LayoutRegistry.unregisterLayout(definition.id);
|
|
this.registeredLayouts.delete(definition.id);
|
|
console.log(`🗑️ 등록 해제: ${definition.id}`);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Hot Reload 지원 (개발 모드)
|
|
*/
|
|
static reloadSelf(): void {
|
|
if (process.env.NODE_ENV === "development") {
|
|
this.unregisterSelf();
|
|
this.registerSelf();
|
|
console.log(`🔄 Hot Reload: ${this.layoutDefinition?.id}`);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 등록된 레이아웃 목록 조회
|
|
*/
|
|
static getRegisteredLayouts(): string[] {
|
|
return Array.from(this.registeredLayouts);
|
|
}
|
|
|
|
/**
|
|
* 레이아웃 정의 유효성 검사
|
|
*/
|
|
static validateDefinition(): { isValid: boolean; errors: string[]; warnings: string[] } {
|
|
const definition = this.layoutDefinition;
|
|
|
|
if (!definition) {
|
|
return {
|
|
isValid: false,
|
|
errors: ["layoutDefinition이 정의되지 않았습니다."],
|
|
warnings: [],
|
|
};
|
|
}
|
|
|
|
const errors: string[] = [];
|
|
const warnings: string[] = [];
|
|
|
|
// 필수 필드 검사
|
|
if (!definition.id) errors.push("ID가 필요합니다.");
|
|
if (!definition.name) errors.push("이름이 필요합니다.");
|
|
if (!definition.component) errors.push("컴포넌트가 필요합니다.");
|
|
if (!definition.category) errors.push("카테고리가 필요합니다.");
|
|
|
|
// 권장사항 검사
|
|
if (!definition.description || definition.description.length < 10) {
|
|
warnings.push("설명은 10자 이상 권장됩니다.");
|
|
}
|
|
if (!definition.defaultZones || definition.defaultZones.length === 0) {
|
|
warnings.push("기본 존 정의가 권장됩니다.");
|
|
}
|
|
|
|
return {
|
|
isValid: errors.length === 0,
|
|
errors,
|
|
warnings,
|
|
};
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 개발 모드에서 Hot Module Replacement 지원
|
|
*/
|
|
if (process.env.NODE_ENV === "development" && typeof window !== "undefined") {
|
|
// HMR API가 있는 경우 등록
|
|
if ((module as any).hot) {
|
|
(module as any).hot.accept();
|
|
|
|
// 글로벌 Hot Reload 함수 등록
|
|
(window as any).__reloadLayout__ = (layoutId: string) => {
|
|
const layouts = AutoRegisteringLayoutRenderer.getRegisteredLayouts();
|
|
console.log(`🔄 Available layouts for reload:`, layouts);
|
|
|
|
// TODO: 특정 레이아웃만 리로드하는 로직 구현
|
|
};
|
|
}
|
|
}
|