polarvo-layout 1.0.21 → 1.0.22

package/package.json

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

package/src/components/Layout/BaseLayout.vue

@@ -2,8 +2,9 @@
   <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"
+    @contextmenu.prevent
   >
     <template v-for="(section, key) in layoutData" :key="key">
       <PolarLayout
@@ -50,9 +51,9 @@ import FreeLayout from './FreeLayout.vue';
 import GridLayout from './GridLayout.vue';
 
 // 우클릭 방지
-window.oncontextmenu = () => {
-  return false;
-};
+// window.oncontextmenu = () => {
+//   return false;
+// };
 
 const emit = defineEmits(['click:section']);
 const props = defineProps({
@@ -67,7 +68,7 @@ const props = defineProps({
 });
 
 const layoutType = computed(() => {
-  if (layoutName.value.eng == null) return 'no-split';
+  if (layoutName.value.eng === null) return 'no-split';
   return layoutName.value.eng
     .replace(/([A-Z])/g, '-$1')
     .toLowerCase()
@@ -78,16 +79,16 @@ const { layoutName, layoutData, activeSection, gapSize, gridNumber, gridRatio }
 
 const getBaseStyle = computed(() => {
   return {
-    gridTemplateColumns: gridRatio.value?.column.map((ratio) => `${ratio}%`).join(' '),
-    gridTemplateRows: gridRatio.value?.row.map((ratio) => `${ratio}%`).join(' '),
-    marginRight: layoutType.value === 'no-split' ? '0' : layoutType.value === 'three-column-split' ? '14px' : '8px',
+    // gridTemplateColumns: gridRatio.value?.column.map((ratio) => `${ratio}%`).join(' '),
+    // gridTemplateRows: gridRatio.value?.row.map((ratio) => `${ratio}%`).join(' '),
+    // marginRight: layoutType.value === 'no-split' ? '0' : layoutType.value === 'three-column-split' ? '14px' : '8px',
     gap: `${gapSize.value}px`,
   };
 });
 
 const getSectionStyle = (section) => ({
-  '--grid-columns': section.config?.gridColumns || 3,
-  '--grid-gap': `${section.config?.gridGap || 5}px`,
+  '--grid-columns': section.config?.gridColumns ?? 3,
+  '--grid-gap': `${section.config?.gridGap ?? 5}px`,
   position: 'relative',
 });
 
@@ -95,7 +96,7 @@ const getSectionClass = (key, section) => ({
   [key]: true,
   [section.mode]: true,
   'section-active': activeSection.value === key,
-  disabled: activeSection.value != key && !props.preview,
+  disabled: activeSection.value !== key && !props.preview,
 });
 </script>
 

package/src/components/MiniMenu/LayoutMiniMenu.vue

@@ -5,7 +5,7 @@
     <div class="grid gap-1 grid-cols-1 mx-1 mb-3">
       <div
         class="item flex flex-col items-center gap-1 p-2 border border-gray-200 rounded-md bg-white cursor-pointer hover:border-gray-400"
-        :class="{ active: layoutName.eng == 'NoSplit' }"
+        :class="{ active: layoutName.eng === 'NoSplit' }"
         @click="setLayoutName('NoSplit')"
       >
         <component class="text-gray-600" :is="layoutSource.noSplit.icon"></component>
@@ -18,7 +18,7 @@
         v-for="(layout, key) in layoutSource.split"
         :key="key"
         class="item flex flex-col items-center gap-1 p-2 border border-gray-200 rounded-md bg-white cursor-pointer hover:border-gray-400"
-        :class="{ active: layoutName.eng == key }"
+        :class="{ active: layoutName.eng === key }"
         @click="setLayoutName(key)"
       >
         <component class="text-gray-600" :is="layout.icon"></component>
@@ -45,8 +45,7 @@ watch(
   () => layoutName.value,
   () => {
     emits('click:layout');
-  },
-  { deep: true }
+  }
 );
 </script>
 

package/src/components/SideBar/LayoutSideBar.vue

@@ -10,7 +10,7 @@
       </button>
     </div>
 
-    <div v-if="layoutName.eng != 'NoSplit'">
+    <div v-if="layoutName.eng !== 'NoSplit'">
       <h5 class="mt-4 block text-sm font-bold text-gray-600">레이아웃 설정</h5>
       <div class="mt-2 border border-gray-200 rounded-md bg-gray-100">
         <div class="px-4 py-2">
@@ -21,7 +21,7 @@
               type="number"
               id="section-gap"
               :value="gapSize"
-              @change="setGapSize($event.target.value)"
+              @change="handleGapSize($event)"
             />
           </div>
         </div>
@@ -91,10 +91,25 @@ function handleGridRatio(type, index, event) {
     return;
   }
 
-  const { result, message } = setRatio(type, index, value)
+  const { result, message } = setRatio(type, index, Number(value));
 
   if (!result) {
-    alert(message)
+    alert(message);
+  }
+}
+
+function handleGapSize(event) {
+  const value = event.target.value;
+  if (Number(value) < 0 || isNaN(Number(value))) {
+    alert('갭 크기는 0 이상의 숫자여야 합니다.');
+    event.target.value = gapSize.value; // 원래 값으로 복원
+    return;
+  }
+
+  const { result, message } = setGapSize(Number(value));
+
+  if (!result) {
+    alert(message);
   }
 }
 </script>

package/src/core/engines/LayoutEngine.js

@@ -267,14 +267,14 @@ class LayoutEngine {
    * @param {number} size - 새로운 갭 사이즈
    */
   setGapSize(size) {
-    if (Number(size) < 0 || isNaN(Number(size))) return;
-
     this.gapSize = size;
 
     this.eventBus.emit('layout:updateGapSize', {
       $gapSize: this.gapSize,
       timestamp: Date.now(),
     });
+
+    return { result: true, message: '갭 사이즈가 성공적으로 변경되었습니다.' };
   }
 
   /** 섹션 비율 변경

package/src/library/LayoutLibrary.js

@@ -177,7 +177,7 @@ function useLayout(api) {
 
   const setGapSize = (size) => {
     try {
-      api.layout.setGapSize(size);
+      return api.layout.setGapSize(size);
     } catch (error) {
       console.error('[useLayout] setGapSize 실행 중 오류 발생:', error);
     }