99 lines
2.6 KiB
TypeScript
99 lines
2.6 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { LayoutRendererProps } from "../BaseLayoutRenderer";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* split 컴포넌트
|
||
|
|
*/
|
||
|
|
export interface SplitLayoutProps extends LayoutRendererProps {
|
||
|
|
renderer: any; // SplitLayoutRenderer 타입
|
||
|
|
}
|
||
|
|
|
||
|
|
export const SplitLayout: React.FC<SplitLayoutProps> = ({
|
||
|
|
layout,
|
||
|
|
isDesignMode = false,
|
||
|
|
isSelected = false,
|
||
|
|
onClick,
|
||
|
|
className = "",
|
||
|
|
renderer,
|
||
|
|
...props
|
||
|
|
}) => {
|
||
|
|
if (!layout.layoutConfig.split) {
|
||
|
|
return (
|
||
|
|
<div className="error-layout flex items-center justify-center p-4 border-2 border-red-300 bg-red-50 rounded">
|
||
|
|
<div className="text-center text-red-600">
|
||
|
|
<div className="font-medium">split 설정이 없습니다.</div>
|
||
|
|
<div className="text-sm mt-1">layoutConfig.split가 필요합니다.</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const splitConfig = layout.layoutConfig.split;
|
||
|
|
const containerStyle = renderer.getLayoutContainerStyle();
|
||
|
|
|
||
|
|
// split 컨테이너 스타일
|
||
|
|
const splitStyle: React.CSSProperties = {
|
||
|
|
...containerStyle,
|
||
|
|
// TODO: 레이아웃 전용 스타일 정의
|
||
|
|
height: "100%",
|
||
|
|
width: "100%",
|
||
|
|
};
|
||
|
|
|
||
|
|
// 디자인 모드 스타일
|
||
|
|
if (isDesignMode) {
|
||
|
|
splitStyle.border = isSelected ? "2px solid #3b82f6" : "1px solid #e2e8f0";
|
||
|
|
splitStyle.borderRadius = "8px";
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={`split-layout ${isDesignMode ? "design-mode" : ""} ${className}`}
|
||
|
|
style={splitStyle}
|
||
|
|
onClick={onClick}
|
||
|
|
draggable={isDesignMode}
|
||
|
|
onDragStart={props.onDragStart}
|
||
|
|
onDragEnd={props.onDragEnd}
|
||
|
|
{...props}
|
||
|
|
>
|
||
|
|
{layout.zones.map((zone: any) => {
|
||
|
|
const zoneChildren = renderer.getZoneChildren(zone.id);
|
||
|
|
|
||
|
|
// TODO: 존별 스타일 정의
|
||
|
|
const zoneStyle: React.CSSProperties = {
|
||
|
|
// 레이아웃별 존 스타일 구현
|
||
|
|
};
|
||
|
|
|
||
|
|
return renderer.renderZone(zone, zoneChildren, {
|
||
|
|
style: zoneStyle,
|
||
|
|
className: "split-zone",
|
||
|
|
});
|
||
|
|
})}
|
||
|
|
|
||
|
|
{/* 디자인 모드에서 빈 영역 표시 */}
|
||
|
|
{isDesignMode && layout.zones.length === 0 && (
|
||
|
|
<div
|
||
|
|
className="empty-split-container"
|
||
|
|
style={{
|
||
|
|
flex: 1,
|
||
|
|
border: "2px dashed #cbd5e1",
|
||
|
|
borderRadius: "8px",
|
||
|
|
backgroundColor: "rgba(148, 163, 184, 0.05)",
|
||
|
|
display: "flex",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "center",
|
||
|
|
fontSize: "14px",
|
||
|
|
color: "#64748b",
|
||
|
|
minHeight: "100px",
|
||
|
|
padding: "20px",
|
||
|
|
textAlign: "center",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
split에 존을 추가하세요
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|