polarvo-layout 1.0.0 → 1.0.2

package/README.md

@@ -5,7 +5,7 @@
 
 # 로컬에서 라이브러리 테스트하기
 1) 라이브러리(polavo-layout)에서 ```npm link```
-2) 라이브러리를 사용하려는 프로젝트에서 ```npm link polavo-layout```
+2) 라이브러리를 사용하려는 프로젝트에서 ```npm link polarvo-layout```
 
 # 폴더구조
 src/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polarvo-layout",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "author": "unigence <unigencelab@gmail.com>",
   "repository": {

package/src/components/FastMenu/DesignFastMenu.vue

@@ -20,22 +20,22 @@
 </template>
 
 <script setup>
-import { toRefs, computed, inject, watch } from 'vue';
+import { toRefs, computed, inject } from 'vue';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
 });
-const { activeDesign } = toRefs(props.polavo.display.state);
-const { setActiveDesign } = props.polavo.display;
+const { activeDesign } = toRefs(props.polarvo.display.state);
+const { setActiveDesign } = props.polarvo.display;
 
-const { activeData, activeSection } = toRefs(props.polavo.layout.state);
+const { activeData, activeSection } = toRefs(props.polarvo.layout.state);
 const sectionMode = computed(() => activeData.value?.mode);
 
-const { activeElement: freeActiveElement } = toRefs(props.polavo.freeDrop.state);
-const { activeElement: gridActiveElement } = toRefs(props.polavo.gridDrop.state);
+const { activeElement: freeActiveElement } = toRefs(props.polarvo.freeDrop.state);
+const { activeElement: gridActiveElement } = toRefs(props.polarvo.gridDrop.state);
 
 const activeElement = computed(() => {
   if (sectionMode.value === 'free') {
@@ -65,7 +65,7 @@ function clickDesignBar(designMenu) {
 
 
 function setComponentDefaults(element) {
-  const child = props.polavo.components.getElement(activeSection.value, element.id);
+  const child = props.polarvo.components.getElement(activeSection.value, element.id);
   if (!child) return;
   selectedChildProps.value = Object.keys(child.$props);
 

package/src/components/FastMenu/DisplayFastMenu.vue

@@ -49,13 +49,13 @@
 import { toRefs } from 'vue';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
 });
-const { displayMode, displaySize } = toRefs(props.polavo.display.state);
-const { setDisplayMode, setDisplaySize } = props.polavo.display;
+const { displayMode, displaySize } = toRefs(props.polarvo.display.state);
+const { setDisplayMode, setDisplaySize } = props.polarvo.display;
 </script>
 
 <style scoped>

package/src/components/FastMenu/LayoutFastMenu.vue

@@ -71,14 +71,14 @@
 import { toRefs, computed } from 'vue';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
 });
 
-const { activeSection, activeData, gapSize } = toRefs(props.polavo.layout.state);
-const { setGapSize, setSectionMode, setSectionConfig } = props.polavo.layout;
+const { activeSection, activeData, gapSize } = toRefs(props.polarvo.layout.state);
+const { setGapSize, setSectionMode, setSectionConfig } = props.polarvo.layout;
 const sectionMode = computed(() => activeData.value?.mode);
 </script>
 

package/src/components/IconBar/IconBar.vue

@@ -32,7 +32,7 @@
               class="icon-wrapper text-2xl text-gray-400 p-2 hover"
               title="내부설정"
               :class="{ active: activeMenu === 'projectSetting' }"
-              @click="polavo.display.setActiveMenu('projectSetting')"
+              @click="polarvo.display.setActiveMenu('projectSetting')"
             >
               <font-awesome-icon :icon="['fas', 'computer']" />
               <div class="text-xs text-center col-span-1 w-max">내부설정</div>
@@ -41,7 +41,7 @@
               class="icon-wrapper text-2xl text-gray-400 p-2 hover"
               title="DB관리"
               :class="{ active: activeMenu === 'dbSetting' }"
-              @click="polavo.display.setActiveMenu('dbSetting')"
+              @click="polarvo.display.setActiveMenu('dbSetting')"
             >
               <font-awesome-icon :icon="['fas', 'database']" />
               <div class="text-xs text-center col-span-1 w-max">DB관리</div>
@@ -50,7 +50,7 @@
               class="icon-wrapper text-2xl text-gray-400 p-2 hover"
               title="화면관리"
               :class="{ active: activeMenu === 'screenSetting' }"
-              @click="polavo.display.setActiveMenu('screenSetting')"
+              @click="polarvo.display.setActiveMenu('screenSetting')"
             >
               <font-awesome-icon :icon="['far', 'window-restore']" />
               <div class="text-xs text-center col-span-1 w-max">화면관리</div>
@@ -65,7 +65,7 @@
                 class="icon-wrapper text-2xl text-gray-400 p-2 hover"
                 title="레이아웃"
                 :class="{ active: activeMenu === 'layout' }"
-                @click="polavo.display.setActiveMenu('layout')"
+                @click="polarvo.display.setActiveMenu('layout')"
               >
                 <font-awesome-icon :icon="['fas', 'table-columns']" />
                 <div class="text-xs text-center col-span-1 w-max">레이아웃</div>
@@ -75,7 +75,7 @@
                 class="icon-wrapper text-2xl text-gray-400 p-2 hover"
                 title="요소"
                 :class="{ active: activeMenu === 'element' }"
-                @click="polavo.display.setActiveMenu('element')"
+                @click="polarvo.display.setActiveMenu('element')"
               >
                 <font-awesome-icon :icon="['fas', 'shapes']" />
                 <div class="text-xs text-center col-span-1 w-max">요소</div>
@@ -128,7 +128,7 @@ import { ref, toRefs } from 'vue';
 import { clickOutside } from '../../utils/index.js';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
@@ -141,8 +141,8 @@ const props = defineProps({
     default: false,
   },
 });
-const { activeMenu } = toRefs(props.polavo.display.state);
-const { activeSection } = toRefs(props.polavo.layout.state);
+const { activeMenu } = toRefs(props.polarvo.display.state);
+const { activeSection } = toRefs(props.polarvo.layout.state);
 
 // 디렉티브 등록
 const vClickOutside = clickOutside;
@@ -156,7 +156,7 @@ import { useRouter } from 'vue-router';
 const router = useRouter();
 
 async function logout() {
-  const result = await props.polavo.userApi.logout();
+  const result = await props.polarvo.userApi.logout();
   if (result) {
     // 로그아웃 성공 시 라우터 이동
     //서브도메인 제거하기위해 아래와 같이 코드 짰습니다

package/src/components/Layout/BaseLayout.vue

@@ -2,35 +2,29 @@
   <div
     :id="preview ? 'previewLayout' : 'baseLayout'"
     class="grid h-full p-2 bg-transparent rounded-lg"
-    :class="[
-      layoutType + '-layout',
-      `grid-cols-${gridNumber.column}`,
-      'mb-4' ? layoutType === 'three-column-split' : '',
-    ]"
+    :class="[layoutType + '-layout', `grid-cols-${gridNumber.column}`, 'mb-4' ? layoutType === 'three-column-split' : '']"
     :style="getBaseStyle"
   >
     <template v-for="(section, key) in layoutData" :key="key">
       <PolarLayout
         :id="preview ? `${key}Preview` : `${key}Layout`"
         :style="getSectionStyle(section)"
-        :class="[
-          getSectionClass(key, section),
-          activeSection === key && preview ? 'text-blue-400 bg-blue-50' : 'text-gray-400',
-        ]"
+        :class="[getSectionClass(key, section), activeSection === key && preview ? 'text-blue-400 bg-blue-50' : 'text-gray-400']"
         @click.stop="emit('click:section', key)"
       >
         <div v-if="preview" class="absolute text-sm top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
           {{ key }}
         </div>
         <template v-if="section.mode === 'grid'">
-          <GridLayout :polavo="polavo" :preview="preview" :sectionKey="key"  />
+          <GridLayout :polarvo="polarvo" :preview="preview" :sectionKey="key" :elementIds="section.elementIds" />
         </template>
 
         <template v-else>
           <FreeLayout
-            :polavo="polavo"
+            :polarvo="polarvo"
             :preview="preview"
             :sectionKey="key"
+            :elementIds="section.elementIds"
             :isActive="activeSection === key"
           />
         </template>
@@ -40,7 +34,7 @@
 </template>
 
 <script setup>
-import { toRefs, reactive, computed } from 'vue';
+import { toRefs, computed } from 'vue';
 
 import PolarLayout from './PolarLayout.vue';
 import FreeLayout from './FreeLayout.vue';
@@ -53,7 +47,7 @@ window.oncontextmenu = () => {
 
 const emit = defineEmits(['click:section']);
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
@@ -93,7 +87,7 @@ const getSectionClass = (key, section) => ({
   disabled: activeSection.value != key && !props.preview,
 });
 
-const { layoutName, layoutData, activeSection, gapSize, gridNumber, gridRatio } = toRefs(props.polavo.layout.state);
+const { layoutName, layoutData, activeSection, gapSize, gridNumber, gridRatio } = toRefs(props.polarvo.layout.state);
 </script>
 
 <style scoped>
@@ -109,7 +103,8 @@ const { layoutName, layoutData, activeSection, gapSize, gridNumber, gridRatio }
 
 [id^='section'].section-active {
   border-width: 1px;
-  border-color: #3b82f6; /* blue-500 */
+  border-color: #3b82f6;
+  /* blue-500 */
 }
 
 [id^='section'].disabled {

package/src/components/Layout/CanvasContainer.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full h-full p-4">
     <div id="canvas-container" class="border rounded-md w-full h-full bg-white" :style="containerStyle">
-      <BaseLayout ref="baseLayoutRef" :polavo="polavo" />
+      <BaseLayout ref="baseLayoutRef" :polarvo="polarvo" />
     </div>
   </div>
 </template>
@@ -11,13 +11,13 @@ import { toRefs, inject, computed, provide } from 'vue';
 import BaseLayout from './BaseLayout.vue';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
 });
 
-const { displaySize } = toRefs(props.polavo.display.state);
+const { displaySize } = toRefs(props.polarvo.display.state);
 const gridSize = computed(() => displaySize.value.gridSize || 16);
 
 const containerStyle = computed(() => {
@@ -35,7 +35,7 @@ const containerStyle = computed(() => {
   };
 });
 
-const { elements } = toRefs(props.polavo.layout.state);
+const { elements } = toRefs(props.polarvo.layout.state);
 
 // 전체 elements
 provide('elements', elements)

package/src/components/Layout/FreeLayout.vue

@@ -1,16 +1,16 @@
 <template>
-  <div>
+  <div v-if="!preview">
     <div
-      v-for="(item, index) in elements"
+      v-for="(item, index) in filteredElements"
       :key="index"
       :id="item.id"
       class="absolute user-select-none"
       :style="getElementStyle(item)"
-      :class="{ 'z-50': item.id === activeId, 'bg-white border-2 border-blue-400': item.id === activeId && !preview }"
-      @mousedown.stop="startDrag($event, item.id)"
+      :class="{ 'z-50': item.id === activeId, 'bg-white border-2 border-blue-400': item.id === activeId }"
+      @mousedown.stop="startDrag($event,  item.id)"
     >
       <!-- 리사이즈 핸들 -->
-      <div v-if="item.id === activeId && !preview" class="absolute inset-0 pointer-events-none">
+      <div v-if="item.id === activeId" class="absolute inset-0 pointer-events-none">
         <div
           v-for="handle in handles"
           :key="handle.name"
@@ -23,7 +23,6 @@
         </div>
       </div>
       <component
-        v-if="!preview"
         :is="dynamicComponent(item.type)"
         :id="`${sectionKey}-${index}`"
         :ref="(el) => setComponentRef(el, item.id)"
@@ -33,22 +32,14 @@
     </div>
 
     <!-- 가이드라인 -->
-    <div v-if="isActive && !preview">
-      <div
-        v-if="guides.x !== null"
-        class="guide absolute z-10 pointer-events-none vertical"
-        :style="{ left: `${guides.x}px` }"
-      ></div>
+    <div v-if="isActive">
+      <div v-if="guides.x !== null" class="guide absolute z-10 pointer-events-none vertical" :style="{ left: `${guides.x}px` }"></div>
       <div
         v-if="guides.x !== null"
         class="guide absolute z-10 pointer-events-none vertical"
         :style="{ left: `${guides.x + guides.w}px` }"
       ></div>
-      <div
-        v-if="guides.y !== null"
-        class="guide absolute z-10 pointer-events-none horizontal"
-        :style="{ top: `${guides.y}px` }"
-      ></div>
+      <div v-if="guides.y !== null" class="guide absolute z-10 pointer-events-none horizontal" :style="{ top: `${guides.y}px` }"></div>
       <div
         v-if="guides.y !== null"
         class="guide absolute z-10 pointer-events-none horizontal"
@@ -62,21 +53,10 @@
 import LockIcon from '../../icons/action/LockIcon.vue';
 import UnlockIcon from '../../icons/action/UnlockIcon.vue';
 
-import {
-  toRefs,
-  defineAsyncComponent,
-  markRaw,
-  getCurrentInstance,
-  onMounted,
-  onUnmounted,
-  inject,
-  watch,
-  toRaw,
-  computed,
-} from 'vue';
+import { toRefs, defineAsyncComponent, markRaw, getCurrentInstance, onMounted, onUnmounted, inject, watch, toRaw, computed } from 'vue';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
@@ -88,16 +68,23 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  elementIds: {
+    type: Array,
+    required: true,
+  },
   isActive: {
     type: Boolean,
     default: false,
   },
 });
 
-const { setActiveDesign } = props.polavo.display;
-const { updateActiveElement } = props.polavo.layout;
-const { elements, activeId, handles, guides, activeElement } = toRefs(props.polavo.freeDrop.state);
-const { getElementStyle, toggleLock, startDrag, startResize } = props.polavo.freeDrop;
+const { setActiveDesign } = props.polarvo.display;
+const { updateActiveElement } = props.polarvo.layout;
+const { elements, activeId, handles, guides, activeElement } = toRefs(props.polarvo.freeDrop.state);
+const { getElementStyle, toggleLock, startDrag, startResize } = props.polarvo.freeDrop;
+const filteredElements = computed(() => {
+  return elements.value.filter((el) => props.elementIds?.includes(el.id) && el.section === props.sectionKey);
+});
 
 function dynamicComponent(elName) {
   const modules = import.meta.glob('@/components/elements/*.vue');
@@ -114,9 +101,9 @@ function dynamicComponent(elName) {
 
 function setComponentRef(el, elementId) {
   if (el) {
-    props.polavo.components.register('elements', `${props.sectionKey}-${elementId}`, el);
+    props.polarvo.components.register('elements', `${props.sectionKey}-${elementId}`, el);
   } else {
-    props.polavo.components.unregister('elements', `${props.sectionKey}-${elementId}`);
+    props.polarvo.components.unregister('elements', `${props.sectionKey}-${elementId}`);
   }
 }
 
@@ -125,9 +112,9 @@ const selectedElement = inject('selectedElement');
 watch(
   () => activeElement.value?.id,
   (newId, oldId) => {
-     if (newId === oldId) return;
+    if (newId === oldId) return;
     if (!newId) {
-      setActiveDesign(null)
+      setActiveDesign(null);
     }
     selectedElement.value = structuredClone(toRaw(activeElement.value));
   },
@@ -141,17 +128,17 @@ const selectedElementForWatch = computed(() => omit(selectedElement.value, ['pos
 watch(
   () => selectedElementForWatch.value,
   (newElement) => {
-    updateActiveElement(selectedElement.value?.id, newElement)
+    updateActiveElement(selectedElement.value?.id, newElement);
   },
   { deep: true }
 );
 
 onMounted(() => {
-  props.polavo.components.register('sections', props.sectionKey, getCurrentInstance());
+  props.polarvo.components.register('sections', props.sectionKey, getCurrentInstance());
 });
 
 onUnmounted(() => {
-  props.polavo.components.unregister('sections', props.sectionKey);
+  props.polarvo.components.unregister('sections', props.sectionKey);
 });
 </script>
 

package/src/components/Layout/GridLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-for="(item, index) in elements"
+    v-for="(item, index) in filteredElements"
     :key="index"
     :id="item.id"
     class="relative bg-gray-200"
@@ -13,10 +13,7 @@
   >
     <!-- 리사이즈 핸들 -->
     <div v-if="activeElement?.id === item.id && !preview">
-      <div
-        class="absolute w-4 h-4 bottom-0 right-0 bg-blue-400 z-10 cursor-se-resize"
-        @mousedown="startResize($event, item.id)"
-      ></div>
+      <div class="absolute w-4 h-4 bottom-0 right-0 bg-blue-400 z-10 cursor-se-resize" @mousedown="startResize($event, item.id)"></div>
       <div class="absolute z-10 pointer-events-auto cursor-pointer" @click="toggleLock()">
         <LockIcon v-if="item.isLocked" />
         <UnlockIcon v-else />
@@ -55,21 +52,10 @@
 import LockIcon from '../../icons/action/LockIcon.vue';
 import UnlockIcon from '../../icons/action/UnlockIcon.vue';
 
-import {
-  toRefs,
-  defineAsyncComponent,
-  markRaw,
-  getCurrentInstance,
-  onMounted,
-  onUnmounted,
-  inject,
-  watch,
-  toRaw,
-  computed,
-} from 'vue';
+import { toRefs, defineAsyncComponent, markRaw, getCurrentInstance, onMounted, onUnmounted, inject, watch, toRaw, computed } from 'vue';
 const emit = defineEmits(['click:element']);
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
@@ -81,12 +67,19 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  elementIds: {
+    type: Array,
+    required: true,
+  }
 });
 
-const { setActiveDesign } = props.polavo.display;
-const { updateActiveElement } = props.polavo.layout;
-const { elements, emptyData, activeCell, activeElement } = toRefs(props.polavo.gridDrop.state);
-const { getElementStyle, setActiveCell, toggleLock, startDrag, detectHoverCell, startResize } = props.polavo.gridDrop;
+const { setActiveDesign } = props.polarvo.display;
+const { updateActiveElement } = props.polarvo.layout;
+const { elements, emptyData, activeCell, activeElement } = toRefs(props.polarvo.gridDrop.state);
+const { getElementStyle, setActiveCell, toggleLock, startDrag, detectHoverCell, startResize } = props.polarvo.gridDrop;
+const filteredElements = computed(() => {
+  return elements.value.filter((el) => props.elementIds?.includes(el.id) && el.section === props.sectionKey);
+});
 
 function dynamicComponent(elName) {
   const modules = import.meta.glob('@/components/elements/*.vue');
@@ -103,21 +96,20 @@ function dynamicComponent(elName) {
 
 function setComponentRef(el, elementId) {
   if (el) {
-    props.polavo.components.register('elements', `${props.sectionKey}-${elementId}`, el);
+    props.polarvo.components.register('elements', `${props.sectionKey}-${elementId}`, el);
   } else {
-    props.polavo.components.unregister('elements', `${props.sectionKey}-${elementId}`);
+    props.polarvo.components.unregister('elements', `${props.sectionKey}-${elementId}`);
   }
 }
 
 const selectedElement = inject('selectedElement');
 
-
 watch(
   () => activeElement.value?.id,
   (newId, oldId) => {
     if (newId === oldId) return;
     if (!newId) {
-      setActiveDesign(null)
+      setActiveDesign(null);
     }
     selectedElement.value = structuredClone(toRaw(activeElement.value));
   },
@@ -131,16 +123,16 @@ const selectedElementForWatch = computed(() => omit(selectedElement.value, ['pos
 watch(
   () => selectedElementForWatch.value,
   (newElement) => {
-    updateActiveElement(selectedElement.value?.id, newElement)
+    updateActiveElement(selectedElement.value?.id, newElement);
   },
   { deep: true }
 );
 
 onMounted(() => {
-  props.polavo.components.register('sections', props.sectionKey, getCurrentInstance());
+  props.polarvo.components.register('sections', props.sectionKey, getCurrentInstance());
 });
 
 onUnmounted(() => {
-  props.polavo.components.unregister('sections', props.sectionKey);
+  props.polarvo.components.unregister('sections', props.sectionKey);
 });
 </script>

package/src/components/MiniMenu/LayoutMiniMenu.vue

@@ -32,13 +32,13 @@
 import { toRefs, watch } from 'vue';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
 });
-const { layoutName, layoutSource } = toRefs(props.polavo.layout.state);
-const { setLayoutName } = props.polavo.layout;
+const { layoutName, layoutSource } = toRefs(props.polarvo.layout.state);
+const { setLayoutName } = props.polarvo.layout;
 
 const emits = defineEmits(['click:layout']);
 watch(

package/src/components/SideBar/ElementSideBar.vue

@@ -17,7 +17,7 @@
 import { ref, onBeforeMount } from 'vue';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
@@ -27,8 +27,8 @@ const props = defineProps({
     default: '',
   },
 });
-const { addElement: addElementToFree } = props.polavo.freeDrop;
-const { addElement: addElementToGrid } = props.polavo.gridDrop;
+const { addElement: addElementToFree } = props.polarvo.freeDrop;
+const { addElement: addElementToGrid } = props.polarvo.gridDrop;
 
 const allElements = ref([]);
 

package/src/components/SideBar/LayoutSettingSideBar.vue

@@ -76,13 +76,13 @@
 import { toRefs, computed } from 'vue';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
 });
-const { activeData, gapSize, gridNumber, gridRatio } = toRefs(props.polavo.layout.state);
-const { setGapSize, setRatio, setSectionMode, setSectionConfig } = props.polavo.layout;
+const { activeData, gapSize, gridNumber, gridRatio } = toRefs(props.polarvo.layout.state);
+const { setGapSize, setRatio, setSectionMode, setSectionConfig } = props.polarvo.layout;
 
 const sectionMode = computed(() => activeData.value?.mode);
 </script>

package/src/components/SideBar/LayoutSideBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div class="aspect-[3/2] border border-gray-200 rounded-md bg-white">
-      <BaseLayout id="preview" :polavo="polavo" :preview="true" @click:section="setActiveSection($event)" />
+    <div class="aspect-[3/2] border border-gray-200 rounded-md bg-white ">
+      <BaseLayout id="preview" :polarvo="polarvo" :preview="true" @click:section="setActiveSection($event)" />
       <button
         class="text-sm bg-blue-100 text-center w-full py-1 hover:cursor-pointer hover:bg-blue-200 active:opacity-80"
         @click="setActiveSection(null)"
@@ -62,7 +62,7 @@
       </h5>
       <LayoutSetting
         v-if="activeSection !== null"
-        :polavo="polavo"
+        :polarvo="polarvo"
         class="mt-2 border border-gray-200 rounded-md bg-white"
       />
       <div v-else>
@@ -79,11 +79,11 @@ import BaseLayout from '../Layout/BaseLayout.vue';
 import LayoutSetting from './LayoutSettingSideBar.vue';
 
 const props = defineProps({
-  polavo: {
+  polarvo: {
     type: Object,
     required: true,
   },
 });
-const { layoutName, activeSection, gapSize, gridNumber, gridRatio } = toRefs(props.polavo.layout.state);
-const { setGapSize, setRatio, setActiveSection } = props.polavo.layout;
+const { layoutName, activeSection, gapSize, gridNumber, gridRatio } = toRefs(props.polarvo.layout.state);
+const { setGapSize, setRatio, setActiveSection } = props.polarvo.layout;
 </script>

package/src/core/engines/FreeDropEngine.js

@@ -91,6 +91,16 @@ class FreeDropEngine {
       }
     });
 
+    this._elements = [];
+    this._elementsUpdate = false;
+    this._freeElements = []; 
+
+    this._activeData = null;
+    this._activeSection = null;
+    this._activeElement = null; 
+
+    this.guides = { x: null, y: null, w: null, h: null };
+    
     this._subscriptions = [];
     this.eventBus = null;
 
@@ -208,7 +218,7 @@ class FreeDropEngine {
       console.error('[FreeDropEngine] 충돌 검사를 위한 아이템 정보를 찾을 수 없습니다:', this._activeElement.id);
       return false;
     }
-
+    
     const newElementRect = {
       left: this._activeElement.position.x,
       top: this._activeElement.position.y,
@@ -216,7 +226,7 @@ class FreeDropEngine {
       bottom: this._activeElement.position.y + this._activeElement.size.h,
     };
 
-    return this.freeElements.some((element) => {
+    return this.freeElements.filter((element) => element.section === this._activeElement.section).some((element) => {
       if (element.id === this._activeElement.id) return false; // 자기 자신은 제외
 
       const elementRect = {
@@ -282,6 +292,7 @@ class FreeDropEngine {
       mode: 'free',
       position: this._startPos,
       size: elementSource[elName] || { w: 100, h: 100 },
+      section: this._activeSection,
       isLocked: false,
     };
 

package/src/core/engines/GridDropEngine.js

@@ -7,6 +7,7 @@ class GridDropEngine {
     this._elementsUpdate = false; // 원본 요소 목록 변경 플래그
     this._gridElements = []; // 로컬에서 사용하는 요소 목록
 
+    this._layoutData = null;
     this._activeData = null;
     this._activeSection = null;
 
@@ -47,9 +48,12 @@ class GridDropEngine {
       this._initialize();
     });
 
-    this._subscribe('system:setElements', ({ elements }) => {
+    this._subscribe('system:setElements', ({ elements, layoutData }) => {
+      this._layoutData = layoutData;
       this._elements = elements;
       this._elementsUpdate = true;
+
+      this._setEmptyData('all');
     });
 
     this._subscribe('system:updateElements', ({ elements }) => {
@@ -78,6 +82,19 @@ class GridDropEngine {
       }
     });
 
+    this._elements = [];
+    this._elementsUpdate = false;
+    this._gridElements = [];
+
+    this._activeData = null;
+    this._activeSection = null;
+
+    this._activeCell = null;
+    this._targetCell = null;
+    this._activeElement = null;
+
+    this.emptyData = {};
+
     this._subscriptions = [];
     this.eventBus = null;
 
@@ -121,41 +138,72 @@ class GridDropEngine {
   }
 
   /** 빈 데이터 설정 */
-  _setEmptyData() {
-    if (!this._activeData) {
-      console.error('[GridDropEngine] 활성화된 데이터가 없습니다.');
-      return;
-    }
-
-    const { gridColumns, gridRows } = this._activeData.config || {
-      gridColumns: 3,
-      gridRows: 3,
-    };
+  _setEmptyData(type = null) {
+    // 공통 로직을 헬퍼 함수로 추출
+    const calculateEmptyData = (sectionKey, sectionData) => {
+      const { gridColumns, gridRows } = sectionData.config || {
+        gridColumns: 3,
+        gridRows: 3,
+      };
 
-    // 데이터가 존재하는 셀 리스트
-    const occupied = new Set();
-    this.gridElements.forEach((element) => {
-      const { col, row } = element.position;
-      const { colSpan, rowSpan } = element.size;
+      // 데이터가 존재하는 셀 리스트
+      const grid = Array.from({ length: gridRows + 1 }, () => Array(gridColumns + 1).fill(false));
+
+      this.gridElements
+        .filter((element) => element.section === sectionKey)
+        .forEach((element) => {
+          const { col, row } = element.position;
+          const { colSpan, rowSpan } = element.size;
+
+          for (let r = row; r < row + rowSpan; r++) {
+            for (let c = col; c < col + colSpan; c++) {
+              if (r >= 1 && c >= 1 && r <= gridRows && c <= gridColumns) {
+                grid[r][c] = true;
+              }
+            }
+          }
+        });
 
-      for (let r = row; r < row + rowSpan; r++) {
-        for (let c = col; c < col + colSpan; c++) {
-          if (r >= 1 && c >= 1 && r <= gridRows && c <= gridColumns) {
-            occupied.add(`${r}-${c}`); //row-col 형태로 저장
+      // 빈 셀 찾기
+      const result = [];
+      for (let r = 1; r <= gridRows; r++) {
+        for (let c = 1; c <= gridColumns; c++) {
+          if (!grid[r][c]) {
+            result.push({ row: r, col: c });
           }
         }
       }
-    });
 
-    const result = [];
-    for (let r = 1; r <= gridRows; r++) {
-      for (let c = 1; c <= gridColumns; c++) {
-        if (!occupied.has(`${r}-${c}`)) {
-          result.push({ row: r, col: c });
-        }
+      return result;
+    };
+
+    // 초기 세팅
+    if (type === 'all') {
+      if (!this._layoutData) {
+        console.error('[GridDropEngine] 레이아웃 데이터가 없습니다.');
+        return;
       }
+
+      // 모든 섹션에 대해 빈 데이터 계산
+      Object.entries(this._layoutData).forEach(([sectionKey, sectionData]) => {
+        this.emptyData[sectionKey] = calculateEmptyData(sectionKey, sectionData);
+      });
+
+      this.eventBus.emit('gridDrop:updateAllEmptyData', {
+        emptyData: this.emptyData,
+        timestamp: Date.now(),
+      });
+
+      return;
+    }
+
+    // 단일 섹션 처리
+    if (!this._activeData) {
+      console.error('[GridDropEngine] 활성화된 데이터가 없습니다.');
+      return;
     }
 
+    const result = calculateEmptyData(this._activeSection, this._activeData);
     this.emptyData[this._activeSection] = result;
 
     this.eventBus.emit('gridDrop:updateEmptyData', {
@@ -163,8 +211,6 @@ class GridDropEngine {
       activeSection: this._activeSection,
       timestamp: Date.now(),
     });
-
-    return;
   }
 
   /** 활성화 배치요소 변경 */
@@ -263,19 +309,21 @@ class GridDropEngine {
       return false;
     }
 
-    return this.gridElements.some((item) => {
-      if (item.id === this._activeElement.id) return false; // 자기 자신은 무시
+    return this.gridElements
+      .filter((item) => item.section === this._activeElement.section)
+      .some((item) => {
+        if (item.id === this._activeElement.id) return false; // 자기 자신은 무시
 
-      const itemPosition = item.position;
-      const itemSize = item.size;
+        const itemPosition = item.position;
+        const itemSize = item.size;
 
-      return !(
-        position.row >= itemPosition.row + itemSize.rowSpan ||
-        position.row + size.rowSpan <= itemPosition.row ||
-        position.col >= itemPosition.col + itemSize.colSpan ||
-        position.col + size.colSpan <= itemPosition.col
-      );
-    });
+        return !(
+          position.row >= itemPosition.row + itemSize.rowSpan ||
+          position.row + size.rowSpan <= itemPosition.row ||
+          position.col >= itemPosition.col + itemSize.colSpan ||
+          position.col + size.colSpan <= itemPosition.col
+        );
+      });
   }
 
   /** ---------------------------------- 배치요소 관련 메소드 ---------------------------------- **/
@@ -300,10 +348,12 @@ class GridDropEngine {
       mode: 'grid',
       position: { col: this._activeCell.col, row: this._activeCell.row },
       size: { colSpan: 1, rowSpan: 1 },
+      section: this._activeSection,
       isLocked: false,
     };
 
     this.eventBus.emit('gridDrop:requestAddElement', {
+      id: element.id,
       element: element,
       timestamp: Date.now(),
     });

package/src/core/managers/EngineManager.js

@@ -70,14 +70,16 @@ class EngineManager {
   }
 
   setElements(elements) {
-    this.state.elements = elements;
+    // section 정보가 없는 경우 section1으로 간주
+    this.state.elements = elements.map(x => x.section ? x : { ...x, section: 'section1' });
 
     // 각 섹션의 elementIds 업데이트
-    Object.entries(this.state.layoutData).forEach(([key, section]) => {
-      section.elementIds = this.state.elements.filter((x) => x.mode === section.mode).map((x) => x.id);
+    Object.entries(this._layoutData).forEach(([key, section]) => {
+      section.elementIds = this.state.elements.filter((x) => x.mode === section.mode && x.section === key).map((x) => x.id);
     });
-
+    
     this.eventBus.emit('system:setElements', {
+      layoutData: this._layoutData,
       elements: this.state.elements,
       timestamp: Date.now(),
     });
@@ -118,9 +120,10 @@ class EngineManager {
       this._layoutData = data.layoutData;
       this._dataUpdate = true;
     });
+
     // layoutData 업데이트
     this._subscribe('layout:updateLayoutData', (data) => {
-      this.state.layoutData = data.layoutData;
+      this._layoutData = data.layoutData;
       this._dataUpdate = true;
     });
 
@@ -287,7 +290,7 @@ class EngineManager {
       this.eventBus.emit('system:closeActiveMenu');
 
       this.updateActiveData({
-        elementIds: [...this.activeData.elementIds, id],
+        elementIds: [...this.activeData?.elementIds, id],
       });
     });
 

package/src/index.js

@@ -2,7 +2,7 @@
 import './styles.scss';
 
 // 라이브러리 함수
-import createPolavoLayout from './library/index.js';
+import createPolarvoLayout from './library/index.js';
 
 // 컴포넌트
 import IconBar from './components/IconBar/IconBar.vue';
@@ -19,7 +19,7 @@ import CanvasContainer from './components/Layout/CanvasContainer.vue';
 
 
 export {
-  createPolavoLayout,
+  createPolarvoLayout,
   IconBar,
   DisplayFastMenu,
   HistoryFastMenu,

package/src/library/GridDropLibrary.js

@@ -42,6 +42,10 @@ function useGridDrop(api) {
       state.elements = cloneDeep(api.gridDrop.getGridElements());
     });
 
+     _subscribe('gridDrop:updateAllEmptyData', ({ emptyData }) => {
+      state.emptyData = cloneDeep(emptyData);
+    });
+
     _subscribe('gridDrop:updateEmptyData', ({ emptyData, activeSection }) => {
       state.emptyData[activeSection] = cloneDeep(emptyData);
     });

package/src/library/LayoutLibrary.js

@@ -41,7 +41,8 @@ function useLayout(api) {
     });
 
     // elements 변경 감지
-    _subscribe('system:setElements', ({ elements }) => {
+    _subscribe('system:setElements', ({ layoutData, elements }) => {
+      state.layoutData = cloneDeep(layoutData);
       state.elements = cloneDeep(elements);
     });
 

package/src/library/index.js

@@ -6,7 +6,7 @@ import useFreeDrop from './FreeDropLibrary.js';
 import useGridDrop from './GridDropLibrary.js';
 import useHistory from './HistoryLibrary.js';
 
-async function createPolavoLayout(config = {}) {
+async function createPolarvoLayout(config = {}) {
   let manager = new EngineManager(config);
   await manager.initialize();
 
@@ -47,4 +47,4 @@ async function createPolavoLayout(config = {}) {
   };
 }
 
-export default createPolavoLayout;
+export default createPolarvoLayout;