레이아웃 컴포넌트 단순화

2025-09-11 16:21:00 +09:00
parent 4da06b2a56
commit 77a6b50761
14 changed files with 312 additions and 106 deletions
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@@ -16,6 +16,8 @@ export interface ComponentRenderer {
    onDragStart?: (e: React.DragEvent) => void;
    onDragEnd?: () => void;
    children?: React.ReactNode;
+    onZoneComponentDrop?: (e: React.DragEvent, zoneId: string, layoutId: string) => void;
+    onZoneClick?: (zoneId: string) => void;
    [key: string]: any;
  }): React.ReactElement;
 }
@@ -89,6 +91,8 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
        onDragStart={onDragStart}
        onDragEnd={onDragEnd}
        onUpdateLayout={props.onUpdateLayout}
+        // onComponentDrop 제거 - 일반 캔버스 드롭만 사용
+        onZoneClick={props.onZoneClick}
        {...props}
      />
    );
--- a/frontend/lib/registry/DynamicLayoutRenderer.tsx
+++ b/frontend/lib/registry/DynamicLayoutRenderer.tsx
@@ -10,13 +10,14 @@ export interface DynamicLayoutRendererProps {
  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;
+  onZoneClick?: (zoneId: string) => void;
+  onComponentDrop?: (e: React.DragEvent, zoneId: string, layoutId: string) => void;
  onDragStart?: (e: React.DragEvent) => void;
  onDragEnd?: (e: React.DragEvent) => void;
  onUpdateLayout?: (updatedLayout: LayoutComponent) => void; // 레이아웃 업데이트 콜백
  className?: string;
  style?: React.CSSProperties;
+  [key: string]: any; // 추가 props 허용
 }

 export const DynamicLayoutRenderer: React.FC<DynamicLayoutRendererProps> = ({
@@ -77,7 +78,7 @@ export const DynamicLayoutRenderer: React.FC<DynamicLayoutRendererProps> = ({
        isSelected={isSelected}
        onClick={onClick}
        onZoneClick={onZoneClick}
-        onComponentDrop={onComponentDrop}
+        // onComponentDrop 제거
        onDragStart={onDragStart}
        onDragEnd={onDragEnd}
        onUpdateLayout={onUpdateLayout}
--- a/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx
+++ b/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx
@@ -17,6 +17,8 @@ export const AccordionLayout: React.FC<AccordionLayoutProps> = ({
  onClick,
  className = "",
  renderer,
+  onZoneComponentDrop,
+  onZoneClick,
  ...props
 }) => {
  if (!layout.layoutConfig.accordion) {
@@ -57,7 +59,6 @@ export const AccordionLayout: React.FC<AccordionLayoutProps> = ({
    onSelectComponent,
    isDesignMode: _isDesignMode,
    allComponents,
-    onZoneClick,
    onComponentDrop,
    onDragStart,
    onDragEnd,
@@ -205,7 +206,7 @@ const AccordionSection: React.FC<{
          e.preventDefault();
          e.stopPropagation();
          if (onComponentDrop) {
-            onComponentDrop(e, zone.id); // 존 ID와 함께 드롭 이벤트 전달
+            onComponentDrop(e, zone.id, layout.id); // 존 ID와 레이아웃 ID를 함께 전달
          }
        }}
        onClick={(e) => {
--- a/frontend/lib/registry/layouts/card-layout/CardLayoutLayout.tsx
+++ b/frontend/lib/registry/layouts/card-layout/CardLayoutLayout.tsx
@@ -169,7 +169,7 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({
                  className="hover:border-blue-500 hover:shadow-md"
                >
                  {/* 존 라벨 */}
-                  <div className="absolute left-2 top-2 z-10">
+                  <div className="absolute top-2 left-2 z-10">
                    <div className="rounded bg-blue-500 px-2 py-1 text-xs text-white">{zone.name}</div>
                  </div>

@@ -247,7 +247,7 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({

                      return (
                        <div key={idx} className="flex justify-between text-xs">
-                          <span className="capitalize text-gray-500">{getColumnLabel(columnName)}:</span>
+                          <span className="text-gray-500 capitalize">{getColumnLabel(columnName)}:</span>
                          <span className="font-medium text-gray-700">{value}</span>
                        </div>
                      );
--- a/frontend/lib/registry/layouts/card-layout/index.ts
+++ b/frontend/lib/registry/layouts/card-layout/index.ts
@@ -24,6 +24,7 @@ export const CardLayoutDefinition = createLayoutDefinition({
  category: "dashboard",
  icon: "grid-3x3",
  component: CardLayoutWrapper,
+  defaultSize: { width: 800, height: 400 },
  defaultConfig: {
    cardLayout: {
      columns: 3,
--- a/frontend/lib/registry/layouts/flexbox/FlexboxLayout.tsx
+++ b/frontend/lib/registry/layouts/flexbox/FlexboxLayout.tsx
@@ -17,6 +17,8 @@ export const FlexboxLayout: React.FC<FlexboxLayoutProps> = ({
  onClick,
  className = "",
  renderer,
+  onZoneComponentDrop,
+  onZoneClick,
  ...props
 }) => {
  if (!layout.layoutConfig.flexbox) {
@@ -98,7 +100,6 @@ export const FlexboxLayout: React.FC<FlexboxLayoutProps> = ({
    onSelectComponent,
    isDesignMode: _isDesignMode,
    allComponents,
-    onZoneClick,
    onComponentDrop,
    onDragStart,
    onDragEnd,
@@ -200,17 +201,7 @@ export const FlexboxLayout: React.FC<FlexboxLayoutProps> = ({
                e.currentTarget.style.borderColor = "#e5e7eb";
                e.currentTarget.style.boxShadow = "0 1px 3px 0 rgba(0, 0, 0, 0.1)";
              }}
-              onDragOver={(e) => {
-                e.preventDefault();
-                e.dataTransfer.dropEffect = "copy";
-              }}
-              onDrop={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                if (onComponentDrop) {
-                  onComponentDrop(e, zone.id); // 존 ID와 함께 드롭 이벤트 전달
-                }
-              }}
+              // 드롭 이벤트 제거 - 일반 캔버스 드롭만 사용
              onClick={(e) => {
                e.stopPropagation();
                if (onZoneClick) {
--- a/frontend/lib/registry/layouts/grid/GridLayout.tsx
+++ b/frontend/lib/registry/layouts/grid/GridLayout.tsx
@@ -17,6 +17,8 @@ export const GridLayout: React.FC<GridLayoutProps> = ({
  onClick,
  className = "",
  renderer,
+  onZoneComponentDrop,
+  onZoneClick,
  ...props
 }) => {
  if (!layout.layoutConfig.grid) {
@@ -66,7 +68,6 @@ export const GridLayout: React.FC<GridLayoutProps> = ({
    onSelectComponent,
    isDesignMode: _isDesignMode,
    allComponents,
-    onZoneClick,
    onComponentDrop,
    onDragStart,
    onDragEnd,
@@ -158,17 +159,7 @@ export const GridLayout: React.FC<GridLayoutProps> = ({
                e.currentTarget.style.borderColor = "#e5e7eb";
                e.currentTarget.style.boxShadow = "0 1px 3px 0 rgba(0, 0, 0, 0.1)";
              }}
-              onDragOver={(e) => {
-                e.preventDefault();
-                e.dataTransfer.dropEffect = "copy";
-              }}
-              onDrop={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                if (onComponentDrop) {
-                  onComponentDrop(e, zone.id); // 존 ID와 함께 드롭 이벤트 전달
-                }
-              }}
+              // 드롭 이벤트 제거 - 일반 캔버스 드롭만 사용
              onClick={(e) => {
                e.stopPropagation();
                if (onZoneClick) {
--- a/frontend/lib/registry/layouts/hero-section/HeroSectionLayout.tsx
+++ b/frontend/lib/registry/layouts/hero-section/HeroSectionLayout.tsx
@@ -17,6 +17,8 @@ export const HeroSectionLayout: React.FC<HeroSectionLayoutProps> = ({
  onClick,
  className = "",
  renderer,
+  onZoneComponentDrop,
+  onZoneClick,
  ...props
 }) => {
  if (!layout.layoutConfig.heroSection) {
@@ -56,7 +58,6 @@ export const HeroSectionLayout: React.FC<HeroSectionLayoutProps> = ({
    onSelectComponent,
    isDesignMode: _isDesignMode,
    allComponents,
-    onZoneClick,
    onComponentDrop,
    onDragStart,
    onDragEnd,
--- a/frontend/lib/registry/layouts/split/SplitLayout.tsx
+++ b/frontend/lib/registry/layouts/split/SplitLayout.tsx
@@ -17,6 +17,8 @@ export const SplitLayout: React.FC<SplitLayoutProps> = ({
  onClick,
  className = "",
  renderer,
+  onZoneComponentDrop,
+  onZoneClick,
  ...props
 }) => {
  if (!layout.layoutConfig.split) {
@@ -57,7 +59,6 @@ export const SplitLayout: React.FC<SplitLayoutProps> = ({
    onSelectComponent,
    isDesignMode: _isDesignMode,
    allComponents,
-    onZoneClick,
    onComponentDrop,
    onDragStart,
    onDragEnd,