340 lines
11 KiB
TypeScript
340 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ComponentData, LayoutComponent } from "@/types/screen";
|
|
import { LayoutZone } from "@/types/layout";
|
|
import { DynamicComponentRenderer } from "../DynamicComponentRenderer";
|
|
|
|
export interface LayoutRendererProps {
|
|
layout: LayoutComponent;
|
|
allComponents: ComponentData[];
|
|
isDesignMode?: boolean;
|
|
isSelected?: boolean;
|
|
onClick?: (e: React.MouseEvent) => void;
|
|
onZoneClick?: (zoneId: string, e: React.MouseEvent) => void;
|
|
onComponentDrop?: (zoneId: string, component: ComponentData, e: React.DragEvent) => void;
|
|
onDragStart?: (e: React.DragEvent) => void;
|
|
onDragEnd?: (e: React.DragEvent) => void;
|
|
onUpdateLayout?: (updatedLayout: LayoutComponent) => void; // 레이아웃 업데이트 콜백
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
// 추가된 props들 (레이아웃에서 사용되지 않지만 필터링 시 필요)
|
|
formData?: Record<string, any>;
|
|
onFormDataChange?: (fieldName: string, value: any) => void;
|
|
isInteractive?: boolean;
|
|
screenId?: number;
|
|
tableName?: string;
|
|
onRefresh?: () => void;
|
|
onClose?: () => void;
|
|
mode?: "view" | "edit";
|
|
isInModal?: boolean;
|
|
originalData?: Record<string, any>;
|
|
[key: string]: any; // 기타 props 허용
|
|
}
|
|
|
|
export abstract class BaseLayoutRenderer extends React.Component<LayoutRendererProps> {
|
|
abstract render(): React.ReactElement;
|
|
|
|
/**
|
|
* 레이아웃 존을 렌더링합니다.
|
|
*/
|
|
protected 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 rgba(226, 232, 240, 0.6)",
|
|
borderRadius: "12px",
|
|
backgroundColor: "rgba(248, 250, 252, 0.3)",
|
|
boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
|
|
transition: "all 0.2s ease",
|
|
...this.getZoneStyle(zone),
|
|
...additionalProps.style,
|
|
};
|
|
|
|
// 디자인 모드일 때 더 강조된 스타일
|
|
if (isDesignMode) {
|
|
// 🎯 컴포넌트가 있는 존은 테두리 제거 (컴포넌트 자체 테두리와 충돌 방지)
|
|
if (zoneChildren.length === 0) {
|
|
zoneStyle.border = "2px dashed rgba(203, 213, 225, 0.6)";
|
|
zoneStyle.backgroundColor = "rgba(241, 245, 249, 0.5)";
|
|
zoneStyle.borderRadius = "12px";
|
|
} else {
|
|
// 컴포넌트가 있는 존은 미묘한 배경만
|
|
zoneStyle.border = "1px solid rgba(226, 232, 240, 0.3)";
|
|
zoneStyle.backgroundColor = "rgba(248, 250, 252, 0.2)";
|
|
zoneStyle.borderRadius = "12px";
|
|
}
|
|
}
|
|
|
|
// 호버 효과를 위한 추가 스타일
|
|
const dropZoneStyle: React.CSSProperties = {
|
|
minHeight: isDesignMode ? "80px" : "50px",
|
|
borderRadius: "12px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: zoneChildren.length === 0 ? "center" : "stretch",
|
|
justifyContent: zoneChildren.length === 0 ? "center" : "flex-start",
|
|
color: "#64748b",
|
|
fontSize: "12px",
|
|
transition: "all 0.2s ease",
|
|
padding: "8px",
|
|
position: "relative",
|
|
};
|
|
|
|
return (
|
|
<div
|
|
key={zone.id}
|
|
className={`layout-zone ${isDesignMode ? "design-mode" : ""} ${additionalProps.className || ""}`}
|
|
data-zone-id={zone.id}
|
|
style={zoneStyle}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onZoneClick?.(zone.id, e);
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
const element = e.currentTarget;
|
|
// 🎯 컴포넌트가 있는 존은 호버 효과 최소화
|
|
if (zoneChildren.length > 0) {
|
|
element.style.backgroundColor = "rgba(59, 130, 246, 0.01)";
|
|
} else {
|
|
element.style.borderColor = "#3b82f6";
|
|
element.style.backgroundColor = "rgba(59, 130, 246, 0.02)";
|
|
element.style.boxShadow = "0 1px 3px rgba(0, 0, 0, 0.1)";
|
|
}
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
const element = e.currentTarget;
|
|
if (zoneChildren.length > 0) {
|
|
// 컴포넌트가 있는 존 복원
|
|
element.style.borderColor = "transparent";
|
|
element.style.backgroundColor = isDesignMode ? "rgba(248, 250, 252, 0.3)" : "rgba(248, 250, 252, 0.5)";
|
|
} else {
|
|
// 빈 존 복원
|
|
element.style.borderColor = isDesignMode ? "#cbd5e1" : "#e2e8f0";
|
|
element.style.backgroundColor = isDesignMode ? "rgba(241, 245, 249, 0.8)" : "rgba(248, 250, 252, 0.5)";
|
|
}
|
|
element.style.boxShadow = "none";
|
|
}}
|
|
onDrop={this.handleDrop(zone.id)}
|
|
onDragOver={this.handleDragOver}
|
|
onDragEnter={this.handleDragEnter}
|
|
onDragLeave={this.handleDragLeave}
|
|
>
|
|
{/* 구역 라벨 - 항상 표시 */}
|
|
<div
|
|
className="zone-label"
|
|
style={{
|
|
position: "absolute",
|
|
top: "-12px",
|
|
left: "8px",
|
|
backgroundColor: "#ffffff",
|
|
border: "1px solid #e2e8f0",
|
|
borderRadius: "12px",
|
|
padding: "2px 8px",
|
|
fontSize: "10px",
|
|
fontWeight: "500",
|
|
color: "#6b7280",
|
|
zIndex: 10,
|
|
boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
|
|
}}
|
|
>
|
|
{zone.name || zone.id}
|
|
</div>
|
|
|
|
<div className="zone-content" style={dropZoneStyle}>
|
|
{zoneChildren.length === 0 && isDesignMode ? (
|
|
<div className="drop-placeholder">{zone.name}에 컴포넌트를 드롭하세요</div>
|
|
) : zoneChildren.length === 0 ? (
|
|
<div
|
|
className="empty-zone-indicator"
|
|
style={{
|
|
color: "#9ca3af",
|
|
fontSize: "11px",
|
|
textAlign: "center",
|
|
fontStyle: "italic",
|
|
}}
|
|
>
|
|
빈 구역
|
|
</div>
|
|
) : (
|
|
zoneChildren.map((child) => (
|
|
<DynamicComponentRenderer
|
|
key={child.id}
|
|
component={child}
|
|
allComponents={this.props.allComponents}
|
|
isDesignMode={isDesignMode}
|
|
/>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 존 스타일을 계산합니다.
|
|
*/
|
|
protected getZoneStyle(zone: LayoutZone): React.CSSProperties {
|
|
const style: React.CSSProperties = {};
|
|
|
|
// 크기 설정
|
|
if (typeof zone.size.width === "number") {
|
|
style.width = `${zone.size.width}px`;
|
|
} else {
|
|
style.width = zone.size.width;
|
|
}
|
|
|
|
if (typeof zone.size.height === "number") {
|
|
style.height = `${zone.size.height}px`;
|
|
} else {
|
|
style.height = zone.size.height;
|
|
}
|
|
|
|
// 최소/최대 크기
|
|
if (zone.size.minWidth) style.minWidth = `${zone.size.minWidth}px`;
|
|
if (zone.size.minHeight) style.minHeight = `${zone.size.minHeight}px`;
|
|
if (zone.size.maxWidth) style.maxWidth = `${zone.size.maxWidth}px`;
|
|
if (zone.size.maxHeight) style.maxHeight = `${zone.size.maxHeight}px`;
|
|
|
|
// 커스텀 스타일 적용
|
|
if (zone.style) {
|
|
Object.assign(style, this.convertComponentStyleToCSS(zone.style));
|
|
}
|
|
|
|
return style;
|
|
}
|
|
|
|
/**
|
|
* ComponentStyle을 CSS 스타일로 변환합니다.
|
|
*/
|
|
protected convertComponentStyleToCSS(componentStyle: any): React.CSSProperties {
|
|
const cssStyle: React.CSSProperties = {};
|
|
|
|
// 여백
|
|
if (componentStyle.margin) cssStyle.margin = componentStyle.margin;
|
|
if (componentStyle.padding) cssStyle.padding = componentStyle.padding;
|
|
|
|
// 테두리
|
|
if (componentStyle.borderWidth) cssStyle.borderWidth = `${componentStyle.borderWidth}px`;
|
|
if (componentStyle.borderColor) cssStyle.borderColor = componentStyle.borderColor;
|
|
if (componentStyle.borderStyle) cssStyle.borderStyle = componentStyle.borderStyle;
|
|
if (componentStyle.borderRadius) cssStyle.borderRadius = `${componentStyle.borderRadius}px`;
|
|
|
|
// 배경
|
|
if (componentStyle.backgroundColor) cssStyle.backgroundColor = componentStyle.backgroundColor;
|
|
|
|
// 텍스트
|
|
if (componentStyle.color) cssStyle.color = componentStyle.color;
|
|
if (componentStyle.fontSize) cssStyle.fontSize = `${componentStyle.fontSize}px`;
|
|
if (componentStyle.fontWeight) cssStyle.fontWeight = componentStyle.fontWeight;
|
|
if (componentStyle.textAlign) cssStyle.textAlign = componentStyle.textAlign;
|
|
|
|
return cssStyle;
|
|
}
|
|
|
|
/**
|
|
* 레이아웃 컨테이너 스타일을 계산합니다.
|
|
*/
|
|
protected 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;
|
|
}
|
|
|
|
/**
|
|
* 존별 자식 컴포넌트들을 분류합니다.
|
|
*/
|
|
protected getZoneChildren(zoneId: string): ComponentData[] {
|
|
return this.props.allComponents.filter(
|
|
(component) => component.parentId === this.props.layout.id && (component as any).zoneId === zoneId,
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 드래그 드롭 핸들러
|
|
*/
|
|
private handleDrop = (zoneId: string) => (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
// 드롭존 하이라이트 제거
|
|
this.removeDragHighlight(e.currentTarget as HTMLElement);
|
|
|
|
try {
|
|
const componentData = e.dataTransfer.getData("application/json");
|
|
if (componentData) {
|
|
const component = JSON.parse(componentData);
|
|
this.props.onComponentDrop?.(zoneId, component, e);
|
|
}
|
|
} catch (error) {
|
|
console.error("드롭 데이터 파싱 오류:", error);
|
|
}
|
|
};
|
|
|
|
private handleDragOver = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
// 드롭존 하이라이트 추가
|
|
this.addDragHighlight(e.currentTarget as HTMLElement);
|
|
};
|
|
|
|
private handleDragEnter = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
};
|
|
|
|
private handleDragLeave = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
// 실제로 존을 벗어났는지 확인
|
|
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
|
const x = e.clientX;
|
|
const y = e.clientY;
|
|
|
|
if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
|
|
this.removeDragHighlight(e.currentTarget as HTMLElement);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 드래그 하이라이트 추가
|
|
*/
|
|
private addDragHighlight(element: HTMLElement) {
|
|
element.classList.add("drag-over");
|
|
element.style.borderColor = "#3b82f6";
|
|
element.style.backgroundColor = "rgba(59, 130, 246, 0.05)";
|
|
}
|
|
|
|
/**
|
|
* 드래그 하이라이트 제거
|
|
*/
|
|
private removeDragHighlight(element: HTMLElement) {
|
|
element.classList.remove("drag-over");
|
|
element.style.borderColor = "";
|
|
element.style.backgroundColor = "";
|
|
}
|
|
}
|