99 lines
2.8 KiB
TypeScript
99 lines
2.8 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { LayoutRendererProps } from "../BaseLayoutRenderer";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* heroSection 컴포넌트
|
||
|
|
*/
|
||
|
|
export interface HeroSectionLayoutProps extends LayoutRendererProps {
|
||
|
|
renderer: any; // HeroSectionLayoutRenderer 타입
|
||
|
|
}
|
||
|
|
|
||
|
|
export const HeroSectionLayout: React.FC<HeroSectionLayoutProps> = ({
|
||
|
|
layout,
|
||
|
|
isDesignMode = false,
|
||
|
|
isSelected = false,
|
||
|
|
onClick,
|
||
|
|
className = "",
|
||
|
|
renderer,
|
||
|
|
...props
|
||
|
|
}) => {
|
||
|
|
if (!layout.layoutConfig.heroSection) {
|
||
|
|
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">heroSection 설정이 없습니다.</div>
|
||
|
|
<div className="text-sm mt-1">layoutConfig.heroSection가 필요합니다.</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const heroSectionConfig = layout.layoutConfig.heroSection;
|
||
|
|
const containerStyle = renderer.getLayoutContainerStyle();
|
||
|
|
|
||
|
|
// heroSection 컨테이너 스타일
|
||
|
|
const heroSectionStyle: React.CSSProperties = {
|
||
|
|
...containerStyle,
|
||
|
|
// TODO: 레이아웃 전용 스타일 정의
|
||
|
|
height: "100%",
|
||
|
|
width: "100%",
|
||
|
|
};
|
||
|
|
|
||
|
|
// 디자인 모드 스타일
|
||
|
|
if (isDesignMode) {
|
||
|
|
heroSectionStyle.border = isSelected ? "2px solid #3b82f6" : "1px solid #e2e8f0";
|
||
|
|
heroSectionStyle.borderRadius = "8px";
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={`hero-section-layout ${isDesignMode ? "design-mode" : ""} ${className}`}
|
||
|
|
style={heroSectionStyle}
|
||
|
|
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: "hero-section-zone",
|
||
|
|
});
|
||
|
|
})}
|
||
|
|
|
||
|
|
{/* 디자인 모드에서 빈 영역 표시 */}
|
||
|
|
{isDesignMode && layout.zones.length === 0 && (
|
||
|
|
<div
|
||
|
|
className="empty-hero-section-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",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
heroSection에 존을 추가하세요
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|