110 lines
2.6 KiB
TypeScript
110 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { AutoRegisteringLayoutRenderer } from "../AutoRegisteringLayoutRenderer";
|
|
import { CardLayoutDefinition } from "./index";
|
|
import { CardLayoutLayout } from "./CardLayoutLayout";
|
|
import React from "react";
|
|
|
|
/**
|
|
* 카드 레이아웃 렌더러
|
|
* AutoRegisteringLayoutRenderer를 상속받아 자동 등록 기능 제공
|
|
*/
|
|
export class CardLayoutRenderer extends AutoRegisteringLayoutRenderer {
|
|
/**
|
|
* 레이아웃 정의 (자동 등록용)
|
|
*/
|
|
static layoutDefinition = CardLayoutDefinition;
|
|
|
|
/**
|
|
* 카드 레이아웃 렌더링
|
|
*/
|
|
render(): React.ReactElement {
|
|
const { layout, children, onUpdateLayout, onSelectComponent, isDesignMode } = this.props;
|
|
|
|
return (
|
|
<CardLayoutLayout
|
|
layout={layout}
|
|
children={children}
|
|
onUpdateLayout={onUpdateLayout}
|
|
onSelectComponent={onSelectComponent}
|
|
isDesignMode={isDesignMode}
|
|
/>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 카드 컨테이너 스타일 계산
|
|
*/
|
|
getCardContainerStyle(): React.CSSProperties {
|
|
const cardConfig = this.props.layout.layoutConfig?.cardLayout || {
|
|
columns: 3,
|
|
gap: 16,
|
|
};
|
|
|
|
return {
|
|
display: "grid",
|
|
gridTemplateColumns: `repeat(${cardConfig.columns}, 1fr)`,
|
|
gridTemplateRows: "repeat(2, 300px)",
|
|
gap: `${cardConfig.gap}px`,
|
|
padding: "16px",
|
|
width: "100%",
|
|
height: "100%",
|
|
};
|
|
}
|
|
|
|
/**
|
|
* 개별 카드 스타일 계산
|
|
*/
|
|
getCardStyle(zoneId: string): React.CSSProperties {
|
|
const baseStyle: React.CSSProperties = {
|
|
backgroundColor: "white",
|
|
border: "1px solid #e5e7eb",
|
|
borderRadius: "8px",
|
|
padding: "16px",
|
|
boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
|
|
transition: "all 0.2s ease-in-out",
|
|
overflow: "hidden",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
position: "relative",
|
|
minHeight: "200px",
|
|
};
|
|
|
|
// 디자인 모드에서 추가 스타일
|
|
if (this.props.isDesignMode) {
|
|
return {
|
|
...baseStyle,
|
|
cursor: "pointer",
|
|
borderColor: "#d1d5db",
|
|
};
|
|
}
|
|
|
|
return baseStyle;
|
|
}
|
|
|
|
/**
|
|
* 카드 호버 효과 계산
|
|
*/
|
|
getCardHoverStyle(): React.CSSProperties {
|
|
return {
|
|
borderColor: "#3b82f6",
|
|
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
|
|
transform: "translateY(-1px)",
|
|
};
|
|
}
|
|
|
|
/**
|
|
* 그리드 위치 계산
|
|
*/
|
|
getGridPosition(index: number): { row: number; column: number } {
|
|
const columns = this.props.layout.layoutConfig?.cardLayout?.columns || 3;
|
|
return {
|
|
row: Math.floor(index / columns),
|
|
column: index % columns,
|
|
};
|
|
}
|
|
}
|
|
|
|
// 자동 등록 실행
|
|
CardLayoutRenderer.registerSelf();
|