화면관리 삭제기능구현

frontend/components/screen/panels/TemplatesPanel.tsx

@@ -23,6 +23,14 @@ import {
   MousePointer,
   Settings,
   Upload,
+  Square,
+  CreditCard,
+  Layout,
+  Columns,
+  Rows,
+  SidebarOpen,
+  Folder,
+  ChevronDown,
 } from "lucide-react";
 
 // 템플릿 컴포넌트 타입 정의
@@ -30,11 +38,11 @@ export interface TemplateComponent {
   id: string;
   name: string;
   description: string;
-  category: "table" | "button" | "form" | "layout" | "chart" | "status" | "file";
+  category: "table" | "button" | "form" | "layout" | "chart" | "status" | "file" | "area";
   icon: React.ReactNode;
   defaultSize: { width: number; height: number };
   components: Array<{
-    type: "widget" | "container" | "datatable" | "file";
+    type: "widget" | "container" | "datatable" | "file" | "area";
     widgetType?: string;
     label: string;
     placeholder?: string;
@@ -43,6 +51,13 @@ export interface TemplateComponent {
     style?: any;
     required?: boolean;
     readonly?: boolean;
+    parentId?: string;
+    title?: string;
+    // 영역 컴포넌트 전용 속성
+    layoutType?: string;
+    description?: string;
+    layoutConfig?: any;
+    areaStyle?: any;
   }>;
 }
 
@@ -123,6 +138,303 @@ const templateComponents: TemplateComponent[] = [
       },
     ],
   },
+
+  // === 영역 템플릿들 ===
+
+  // 기본 박스 영역
+  {
+    id: "area-box",
+    name: "기본 박스 영역",
+    description: "컴포넌트들을 그룹화할 수 있는 기본 박스 형태의 영역",
+    category: "area",
+    icon: <Square className="h-4 w-4" />,
+    defaultSize: { width: 400, height: 300 },
+    components: [
+      {
+        type: "area",
+        label: "박스 영역",
+        position: { x: 0, y: 0 },
+        size: { width: 400, height: 300 },
+        layoutType: "box",
+        title: "박스 영역",
+        description: "컴포넌트들을 그룹화할 수 있는 기본 박스",
+        layoutConfig: {},
+        areaStyle: {
+          backgroundColor: "#f9fafb",
+          borderWidth: 1,
+          borderStyle: "solid",
+          borderColor: "#d1d5db",
+          borderRadius: 8,
+          padding: 16,
+          margin: 0,
+          shadow: "none",
+        },
+        style: {
+          border: "1px solid #d1d5db",
+          borderRadius: "8px",
+          backgroundColor: "#f9fafb",
+          padding: "16px",
+        },
+      },
+    ],
+  },
+
+  // 카드 영역
+  {
+    id: "area-card",
+    name: "카드 영역",
+    description: "그림자와 둥근 모서리가 있는 카드 형태의 영역",
+    category: "area",
+    icon: <CreditCard className="h-4 w-4" />,
+    defaultSize: { width: 400, height: 300 },
+    components: [
+      {
+        type: "area",
+        label: "카드 영역",
+        position: { x: 0, y: 0 },
+        size: { width: 400, height: 300 },
+        layoutType: "card",
+        title: "카드 영역",
+        description: "그림자와 둥근 모서리가 있는 카드 형태",
+        layoutConfig: {},
+        areaStyle: {
+          backgroundColor: "#ffffff",
+          borderWidth: 0,
+          borderStyle: "none",
+          borderColor: "#e5e7eb",
+          borderRadius: 12,
+          padding: 20,
+          margin: 0,
+          shadow: "md",
+        },
+        style: {
+          backgroundColor: "#ffffff",
+          borderRadius: "12px",
+          boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+          padding: "20px",
+        },
+      },
+    ],
+  },
+
+  // 패널 영역 (헤더 포함)
+  {
+    id: "area-panel",
+    name: "패널 영역",
+    description: "제목 헤더가 포함된 패널 형태의 영역",
+    category: "area",
+    icon: <Layout className="h-4 w-4" />,
+    defaultSize: { width: 500, height: 400 },
+    components: [
+      {
+        type: "area",
+        label: "패널 영역",
+        position: { x: 0, y: 0 },
+        size: { width: 500, height: 400 },
+        layoutType: "panel",
+        title: "패널 제목",
+        style: {
+          backgroundColor: "#ffffff",
+          border: "1px solid #e5e7eb",
+          borderRadius: "8px",
+          headerBackgroundColor: "#f3f4f6",
+          headerHeight: 48,
+          headerPadding: 16,
+        },
+      },
+    ],
+  },
+
+  // 그리드 영역
+  {
+    id: "area-grid",
+    name: "그리드 영역",
+    description: "내부 컴포넌트들을 격자 형태로 배치하는 영역",
+    category: "area",
+    icon: <Grid3x3 className="h-4 w-4" />,
+    defaultSize: { width: 600, height: 400 },
+    components: [
+      {
+        type: "area",
+        label: "그리드 영역",
+        position: { x: 0, y: 0 },
+        size: { width: 600, height: 400 },
+        layoutType: "grid",
+        title: "그리드 영역",
+        description: "격자 형태로 컴포넌트 배치",
+        layoutConfig: {
+          gridColumns: 3,
+          gridRows: 2,
+          gridGap: 16,
+        },
+        areaStyle: {
+          backgroundColor: "#ffffff",
+          borderWidth: 1,
+          borderStyle: "solid",
+          borderColor: "#d1d5db",
+          borderRadius: 8,
+          padding: 16,
+          margin: 0,
+          shadow: "none",
+          showGridLines: true,
+          gridLineColor: "#e5e7eb",
+        },
+        style: {
+          backgroundColor: "#ffffff",
+          border: "1px solid #d1d5db",
+          borderRadius: "8px",
+          padding: "16px",
+        },
+      },
+    ],
+  },
+
+  // 가로 플렉스 영역
+  {
+    id: "area-flex-row",
+    name: "가로 배치 영역",
+    description: "내부 컴포넌트들을 가로로 나란히 배치하는 영역",
+    category: "area",
+    icon: <Columns className="h-4 w-4" />,
+    defaultSize: { width: 600, height: 200 },
+    components: [
+      {
+        type: "area",
+        label: "가로 배치 영역",
+        position: { x: 0, y: 0 },
+        size: { width: 600, height: 200 },
+        layoutType: "flex-row",
+        layoutConfig: {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          gap: 16,
+        },
+        style: {
+          backgroundColor: "#f8fafc",
+          border: "1px solid #cbd5e1",
+          borderRadius: "8px",
+          padding: "16px",
+        },
+      },
+    ],
+  },
+
+  // 세로 플렉스 영역
+  {
+    id: "area-flex-column",
+    name: "세로 배치 영역",
+    description: "내부 컴포넌트들을 세로로 순차 배치하는 영역",
+    category: "area",
+    icon: <Rows className="h-4 w-4" />,
+    defaultSize: { width: 300, height: 500 },
+    components: [
+      {
+        type: "area",
+        label: "세로 배치 영역",
+        position: { x: 0, y: 0 },
+        size: { width: 300, height: 500 },
+        layoutType: "flex-column",
+        layoutConfig: {
+          flexDirection: "column",
+          justifyContent: "flex-start",
+          alignItems: "stretch",
+          gap: 12,
+        },
+        style: {
+          backgroundColor: "#f1f5f9",
+          border: "1px solid #94a3b8",
+          borderRadius: "8px",
+          padding: "16px",
+        },
+      },
+    ],
+  },
+
+  // 사이드바 영역
+  {
+    id: "area-sidebar",
+    name: "사이드바 영역",
+    description: "사이드바와 메인 컨텐츠 영역으로 구분된 레이아웃",
+    category: "area",
+    icon: <SidebarOpen className="h-4 w-4" />,
+    defaultSize: { width: 700, height: 400 },
+    components: [
+      {
+        type: "area",
+        label: "사이드바 영역",
+        position: { x: 0, y: 0 },
+        size: { width: 700, height: 400 },
+        layoutType: "sidebar",
+        layoutConfig: {
+          sidebarPosition: "left",
+          sidebarWidth: 200,
+          collapsible: true,
+        },
+        style: {
+          backgroundColor: "#ffffff",
+          border: "1px solid #e2e8f0",
+          borderRadius: "8px",
+        },
+      },
+    ],
+  },
+
+  // 탭 영역
+  {
+    id: "area-tabs",
+    name: "탭 영역",
+    description: "탭으로 구분된 여러 컨텐츠 영역을 제공하는 레이아웃",
+    category: "area",
+    icon: <Folder className="h-4 w-4" />,
+    defaultSize: { width: 600, height: 400 },
+    components: [
+      {
+        type: "area",
+        label: "탭 영역",
+        position: { x: 0, y: 0 },
+        size: { width: 600, height: 400 },
+        layoutType: "tabs",
+        layoutConfig: {
+          tabPosition: "top",
+          defaultActiveTab: "tab1",
+        },
+        style: {
+          backgroundColor: "#ffffff",
+          border: "1px solid #d1d5db",
+          borderRadius: "8px",
+        },
+      },
+    ],
+  },
+
+  // 아코디언 영역
+  {
+    id: "area-accordion",
+    name: "아코디언 영역",
+    description: "접고 펼칠 수 있는 섹션들로 구성된 영역",
+    category: "area",
+    icon: <ChevronDown className="h-4 w-4" />,
+    defaultSize: { width: 500, height: 600 },
+    components: [
+      {
+        type: "area",
+        label: "아코디언 영역",
+        position: { x: 0, y: 0 },
+        size: { width: 500, height: 600 },
+        layoutType: "accordion",
+        layoutConfig: {
+          allowMultiple: false,
+          defaultExpanded: ["section1"],
+        },
+        style: {
+          backgroundColor: "#ffffff",
+          border: "1px solid #e5e7eb",
+          borderRadius: "8px",
+        },
+      },
+    ],
+  },
 ];
 
 interface TemplatesPanelProps {
@@ -135,6 +447,7 @@ export const TemplatesPanel: React.FC<TemplatesPanelProps> = ({ onDragStart }) =
 
   const categories = [
     { id: "all", name: "전체", icon: <Grid3x3 className="h-4 w-4" /> },
+    { id: "area", name: "영역", icon: <Layout className="h-4 w-4" /> },
     { id: "table", name: "테이블", icon: <Table className="h-4 w-4" /> },
     { id: "button", name: "버튼", icon: <MousePointer className="h-4 w-4" /> },
     { id: "file", name: "파일", icon: <Upload className="h-4 w-4" /> },