polarvo-layout 1.0.8 → 1.0.9

package/package.json

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

package/src/components/FastMenu/ActionFastMenu.vue

@@ -41,6 +41,7 @@ async function saveSetting() {
   const finalElements = elements.value.filter((el) => elementIdsTotal.includes(el.id));
 
   const { width, height } = containerSize.value || { width: 1920, height: 1080 };
+  
   // 요소 데이터 정규화
   const normalizedElements = dataConverter.normalize(finalElements, width, height);
 

package/src/components/FastMenu/DesignFastMenu.vue

@@ -52,12 +52,13 @@ const selectedElement = inject('selectedElement');
 // const emits = defineEmits(['click:designBar']);
 function clickDesignBar(designMenu) {
   if (designMenu == 'option') {
+    // 테스트용 -> inputForm만 남기고 추후 삭제 예정
     designMenu = activeElement.value?.type === 'inputForm' ? 'option-form' : 'option-default';
   }
 
   // selectedElement의 props 기본값 세팅
   if (selectedElement.value) {
-    setComponentDefaults(selectedElement.value);
+    // setComponentDefaults(selectedElement.value);
   }
 
   setActiveDesign(designMenu);
@@ -79,7 +80,7 @@ function setComponentDefaults(element) {
   //     selectedElement.value[key] = typeof propInfo.default === 'function' ? propInfo.default() : propInfo.default;
   //   }
   // });
-  selectedElement.value = element;
+  // selectedElement.value = element;
 
 }
 </script>

package/src/components/FastMenu/DisplayFastMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- editor - title left -->
   <div id="fast-menu" class="flex items-center gap-4">
-    <div class="flex gap-2 text-gray-400">
+    <!-- <div class="flex gap-2 text-gray-400">
       <font-awesome-icon
         :icon="['fas', 'display']"
         class="cursor-pointer icon hover:opacity-70 active:text-blue-600"
@@ -15,7 +15,7 @@
         @click="setDisplayMode('mobile')"
       />
     </div>
-    <div id="divider" class="w-px bg-gray-200 h-4"></div>
+    <div id="divider" class="w-px bg-gray-200 h-4"></div> -->
     <div class="text-sm text-gray-400">
       <input
         type="number"

package/src/components/FastMenu/LayoutFastMenu.vue

@@ -57,8 +57,8 @@
               min="0"
               max="12"
               class="text-sm text-center w-6 border-b-2 border-white focus:outline-none focus:border-b-2 focus:border-blue-500"
-              :value="gapSize"
-              @change="setGapSize($event.target.value)"
+              :value="activeData?.config?.gridGap"
+              @change="setSectionConfig('gap', $event.target.value)"
             />
           </div>
         </div>
@@ -77,8 +77,8 @@ const props = defineProps({
   },
 });
 
-const { activeSection, activeData, gapSize } = toRefs(props.polarvo.layout.state);
-const { setGapSize, setSectionMode, setSectionConfig } = props.polarvo.layout;
+const { activeSection, activeData } = toRefs(props.polarvo.layout.state);
+const { setSectionMode, setSectionConfig } = props.polarvo.layout;
 const sectionMode = computed(() => activeData.value?.mode);
 </script>
 

package/src/components/IconBar/IconBar.vue

@@ -1,7 +1,7 @@
 <template>
   <aside id="icon-bar" class="flex flex-col items-center justify-between w-16 h-fit bg-white border-r border-gray-200">
     <div class="icon-wrapper logo border-b border-gray-200 text-2xl text-blue-800 p-0 w-full" @click="openIconBar = !openIconBar">
-      <font-awesome-icon :icon="['fas', 'p']" class="h-16" />
+      <font-awesome-icon :icon="['fas', 'p']" class="h-16 text-xs" />
     </div>
 
     <!-- 아이콘바 활성화 -->
@@ -10,12 +10,12 @@
       <div class="top-side flex flex-col items-center gap-2 mt-4">
         <div class="icon-group">
           <div
-            class="icon-wrapper w-14 text-2xl text-gray-400 p-2"
+            class="icon-wrapper text-2xl text-gray-400 p-2"
             title="프로젝트 관리"
             :class="{ active: activeMenu === 'home' }"
             @click="$router.push('/console/home')"
           >
-            <font-awesome-icon :icon="['fas', 'folder']" />
+            <font-awesome-icon :icon="['fas', 'folder']" class="text-xl"/>
             <div class="text-xs text-center col-span-1 w-max">프로젝트</div>
           </div>
         </div>
@@ -26,75 +26,75 @@
           <div class="icon-group">
             <!-- 👂 기본설정에 테마설정 포함 -->
             <div
-              class="icon-wrapper text-2xl text-gray-400 p-2 hover"
+              class="icon-wrapper text-2xl text-gray-400 p-2"
               title="기본설정"
               :class="{ active: activeMenu === 'projectSetting' }"
               @click="polarvo.display.setActiveMenu('projectSetting')"
             >
-              <font-awesome-icon :icon="['fas', 'computer']" />
+            <font-awesome-icon :icon="['fas', 'screwdriver-wrench']" class="text-xl"/>
               <div class="text-xs text-center col-span-1 w-max">기본설정</div>
             </div>
             <div
-              class="icon-wrapper text-2xl text-gray-400 p-2 hover"
+              class="icon-wrapper text-2xl text-gray-400 p-2"
               title="정책설정"
               :class="{ active: activeMenu === 'policySetting' }"
               @click="polarvo.display.setActiveMenu('policySetting')"
             >
-              <font-awesome-icon :icon="['fas', 'shield-halved']" />
+              <font-awesome-icon :icon="['fas', 'shield-halved']" class="text-xl"/>
               <div class="text-xs text-center col-span-1 w-max">정책설정</div>
             </div>
           </div>
           <div id="divider" class="h-px bg-gray-200 w-8"></div>
           <div class="icon-group">
             <div
-              class="icon-wrapper text-2xl text-gray-400 p-2 hover"
+              class="icon-wrapper text-2xl text-gray-400 p-2"
               title="DB관리"
               :class="{ active: activeMenu === 'dbSetting' }"
               @click="polarvo.display.setActiveMenu('dbSetting')"
             >
-              <font-awesome-icon :icon="['fas', 'database']" />
+              <font-awesome-icon :icon="['fas', 'database']" class="text-xl"/>
               <div class="text-xs text-center col-span-1 w-max">DB관리</div>
             </div>
             <div
-              class="icon-wrapper text-2xl text-gray-400 p-2 hover"
-              title="화면관리"
-              :class="{ active: activeMenu === '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>
-            </div>
-            <div
-              class="icon-wrapper text-2xl text-gray-400 p-2 hover"
+              class="icon-wrapper text-2xl text-gray-400 p-2"
               title="화면이동"
               :class="{ active: activeMenu === 'screenMove' }"
               @click="polarvo.display.setActiveMenu('screenMove')"
             >
-              <font-awesome-icon :icon="['far', 'copy']" />
+            <font-awesome-icon :icon="['fas', 'boxes-packing']" class="text-xl"/>
               <div class="text-xs text-center col-span-1 w-max">화면이동</div>
             </div>
+            <div
+              class="icon-wrapper text-2xl text-gray-400 p-2"
+              title="화면관리"
+              :class="{ active: activeMenu === 'screenSetting' }"
+              @click="polarvo.display.setActiveMenu('screenSetting')"
+            >
+              <font-awesome-icon :icon="['fas', 'computer']" class="text-xl"/>
+              <div class="text-xs text-center col-span-1 w-max">화면관리</div>
+            </div>
           </div>
           <!-- 화면 선택 시 아이콘 그룹 -->
           <template v-if="isScreen">
             <div id="divider" class="h-px bg-gray-200 w-8"></div>
             <div class="icon-group">
               <div
-                class="icon-wrapper text-2xl text-gray-400 p-2 hover"
+                class="icon-wrapper text-2xl text-gray-400 p-2"
                 title="레이아웃"
                 :class="{ active: activeMenu === 'layout' }"
                 @click="polarvo.display.setActiveMenu('layout')"
               >
-                <font-awesome-icon :icon="['fas', 'table-columns']" />
+                <font-awesome-icon :icon="['fas', 'table-columns']" class="text-xl"/>
                 <div class="text-xs text-center col-span-1 w-max">레이아웃</div>
               </div>
               <div
                 v-if="activeSection"
-                class="icon-wrapper text-2xl text-gray-400 p-2 hover"
+                class="icon-wrapper text-2xl text-gray-400 p-2"
                 title="요소"
                 :class="{ active: activeMenu === 'element' }"
                 @click="polarvo.display.setActiveMenu('element')"
               >
-                <font-awesome-icon :icon="['fas', 'shapes']" />
+                <font-awesome-icon :icon="['fas', 'shapes']" class="text-xl"/>
                 <div class="text-xs text-center col-span-1 w-max">요소</div>
               </div>
             </div>
@@ -110,7 +110,7 @@
           :class="{ active: activeMenu === 'setting' }"
           @click="$router.push('/console/setting')"
         >
-          <font-awesome-icon :icon="['fas', 'gear']" />
+          <font-awesome-icon :icon="['fas', 'gear']" class="text-xl"/>
           <div class="text-xs text-center col-span-1 w-max">환경설정</div>
         </div>
         <!-- 계정설정 -->
@@ -121,7 +121,7 @@
             title="계정설정"
             @click="toggleUser = !toggleUser"
           >
-            <font-awesome-icon :icon="['fas', 'user']" />
+            <font-awesome-icon :icon="['fas', 'user']" class="text-xl"/>
           </div>
 
           <!-- 계정설정 토글메뉴 -->
@@ -185,6 +185,7 @@ async function logout() {
 <style scoped lang="scss">
 .icon-wrapper {
   aspect-ratio: 1 / 1; /* aspect-square */
+  width: 100%;
   display: grid; /* grid */
   grid-template-rows: 1fr auto; /* grid-rows-[1fr_auto] */
   place-items: center; /* place-items-center */
@@ -193,7 +194,7 @@ async function logout() {
   cursor: pointer; /* cursor-pointer */
 
   &:hover:not(.logo):not(.active) {
-    width: 100%;
+    // width: 100%;
     background-color: #f3f4f6; /* hover:bg-gray-100 */
     border-radius: 0.5rem; /* rounded-lg */
     color: #4b5563; /* text-gray-600 */
@@ -219,8 +220,8 @@ async function logout() {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem; /* gap-2 */
-  padding-top: 0.5rem; /* py-2 */
+  gap: 0.25rem; /* gap-1 */
+  padding-block: 0.5rem; /* py-2 */
 }
 
 .bubble::before {

package/src/components/Layout/BaseLayout.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script setup>
-import { toRefs, computed, onUnmounted } from 'vue';
+import { toRefs, computed } from 'vue';
 
 import PolarLayout from './PolarLayout.vue';
 import FreeLayout from './FreeLayout.vue';
@@ -89,8 +89,6 @@ const getSectionClass = (key, section) => ({
   'section-active': activeSection.value === key,
   disabled: activeSection.value != key && !props.preview,
 });
-
-
 </script>
 
 <style scoped>

package/src/components/Layout/CanvasContainer.vue

@@ -6,7 +6,7 @@
         class="absolute bottom-4 left-4 right-4 bg-gray-50 flex items-center justify-center text-gray-400 rounded-lg hover:bg-gray-100 hover:text-gray-600 cursor-pointer"
         @click="expandContainer()"
       >
-        <font-awesome-icon :icon="['fas', 'plus']" class="h-8" />
+        <font-awesome-icon :icon="['fas', 'plus']" class="h-8 text-xs" />
       </div>
     </div>
   </div>
@@ -47,6 +47,10 @@ watch(
 const additionalHeight = ref(0);
 const displayHeight = computed(() => defaultHeight.value + additionalHeight.value);
 
+function expandContainer() {
+  additionalHeight.value += 200;
+}
+
 const containerStyle = computed(() => {
   return {
     aspectRatio: displaySize.value?.aspectRatio,
@@ -64,11 +68,7 @@ const containerStyle = computed(() => {
 });
 
 // 전체 elements
-provide('elements', elements);
-
-function expandContainer() {
-  additionalHeight.value += 200;
-}
+// provide('elements', elements);
 </script>
 
 <style scoped lang="scss">

package/src/components/Layout/FreeLayout.vue

@@ -7,7 +7,7 @@
       class="absolute user-select-none"
       :style="getElementStyle(item)"
       :class="{ 'z-50': item.id === activeId, 'bg-white border-2 border-blue-400': item.id === activeId }"
-      @mousedown.stop="startDrag($event,  item.id)"
+      @mousedown.stop="startDrag($event, item.id)"
     >
       <!-- 리사이즈 핸들 -->
       <div v-if="item.id === activeId" class="absolute inset-0 pointer-events-none">
@@ -17,9 +17,21 @@
           :class="`handle absolute bg-blue-400 z-10 pointer-events-auto hover:bg-blue-700 ${handle.name}`"
           @mousedown="startResize($event, handle.name)"
         ></div>
-        <div class="absolute z-10 pointer-events-auto cursor-pointer" @click="toggleLock()">
-          <LockIcon v-if="item.isLocked" />
-          <UnlockIcon v-else />
+        <div class="flex flex-row m-1 gap-1">
+          <!-- 잠금 토글-->
+          <div class="z-10 pointer-events-auto cursor-pointer" @click="toggleLock()">
+            <LockIcon v-if="item.isLocked" />
+            <UnlockIcon v-else />
+          </div>
+          <!-- 편집 토글-->
+          <div class="z-10 pointer-events-auto cursor-pointer">
+            <div v-if="item.type === 'inputForm'" @click="toggleEditMode">
+              <div v-if="activeEditMode" class="bg-red-100 text-red-400 px-2 py-1 text-sm rounded-md hover:opacity-80 animate-pulse">
+                편집모드 on
+              </div>
+              <div v-else class="bg-gray-100 px-2 py-1 text-sm rounded-md hover:bg-gray-200">편집모드 off</div>
+            </div>
+          </div>
         </div>
       </div>
       <component
@@ -27,10 +39,14 @@
         :id="`${sectionKey}-${index}`"
         :ref="(el) => setComponentRef(el, item.id)"
         v-bind="item"
-        class="hover:opacity-80 pointer-events-none"
+        class="hover:opacity-80"
+        :class="activeEditMode ? `pointer-events-auto` : `pointer-events-none`"
       />
     </div>
-    
+
+    <!-- 오버레이 -->
+    <div v-if="activeEditMode" class="absolute inset-0 bg-black opacity-50"></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>
@@ -109,6 +125,11 @@ function setComponentRef(el, elementId) {
 
 const selectedElement = inject('selectedElement');
 
+const activeEditMode = inject('activeEditMode');
+function toggleEditMode() {
+  activeEditMode.value = !activeEditMode.value;
+}
+
 import { omit, cloneDeep } from 'lodash-es';
 watch(
   () => activeElement.value?.id,
@@ -119,6 +140,9 @@ watch(
     }
     // selectedElement.value = structuredClone(toRaw(activeElement.value));
     selectedElement.value = cloneDeep(activeElement.value);
+
+    // activeElement 바뀌면 편집 모드 해제
+    activeEditMode.value = false;
   },
 );
 
@@ -130,7 +154,7 @@ watch(
   (newElement) => {
     updateActiveElement(selectedElement.value?.id, newElement);
   },
-  { deep: true }
+  { deep: true },
 );
 
 onMounted(() => {

package/src/components/Layout/GridLayout.vue

@@ -15,9 +15,21 @@
       <!-- 리사이즈 핸들 -->
       <div v-if="activeElement?.id === item.id">
         <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 />
+        <div class="flex gap-1 m-1">
+          <!-- 잠금 토글-->
+          <div class="z-10 pointer-events-auto cursor-pointer" @click="toggleLock()">
+            <LockIcon v-if="item.isLocked" />
+            <UnlockIcon v-else />
+          </div>
+          <!-- 편집 토글-->
+          <div class="z-10 pointer-events-auto cursor-pointer">
+            <div v-if="item.type === 'inputForm'" @click="toggleEditMode">
+              <div v-if="activeEditMode" class="bg-red-100 text-red-400 px-2 py-1 text-sm rounded-md hover:opacity-80 animate-pulse">
+                편집모드 on
+              </div>
+              <div v-else class="bg-gray-100 px-2 py-1 text-sm rounded-md hover:bg-gray-200">편집모드 off</div>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -26,10 +38,14 @@
         :id="`${sectionKey}-${index}`"
         :ref="(el) => setComponentRef(el, item.id)"
         v-bind="item"
-        class="hover:opacity-80 pointer-events-none"
+        class="hover:opacity-80"
+        :class="activeEditMode ? `pointer-events-auto` : `pointer-events-none`"
       />
     </div>
 
+    <!-- 오버레이 -->
+    <div v-if="activeEditMode" class="absolute inset-0 bg-black opacity-50"></div>
+
     <!-- 빈 그리드 설정 -->
     <div
       v-for="(cell, index) in emptyData[sectionKey]"
@@ -103,6 +119,11 @@ function setComponentRef(el, elementId) {
 }
 
 const selectedElement = inject('selectedElement');
+const activeEditMode = inject('activeEditMode');
+
+function toggleEditMode() {
+  activeEditMode.value = !activeEditMode.value;
+}
 
 import { omit, cloneDeep } from 'lodash-es';
 watch(
@@ -114,8 +135,11 @@ watch(
     }
     // selectedElement.value = structuredClone(toRaw(activeElement.value));
     selectedElement.value = cloneDeep(activeElement.value);
+
+    // activeElement 바뀌면 편집 모드 해제
+    activeEditMode.value = false;
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 // 특정 키 값을 제외하고 변경 감지
@@ -126,7 +150,7 @@ watch(
   (newElement) => {
     updateActiveElement(selectedElement.value?.id, newElement);
   },
-  { deep: true }
+  { deep: true },
 );
 
 onMounted(() => {

package/src/core/engines/DisplayEngine.js

@@ -163,12 +163,14 @@ class DisplayEngine {
     if (this.displayMode === mode) return;
 
     this.displayMode = mode;
+    const prevDisplaySize = { ...this.displaySize };
     this._resetDisplaySizeByMode(mode);
 
     // displayMode 변경 시, displaySize도 초기화 됨
     this.eventBus.emit('display:updateDisplayMode', {
       displayMode: this.displayMode,
       displaySize: this.displaySize,
+      prev: { displaySize: prevDisplaySize },
       timestamp: Date.now(),
     });
   }
@@ -213,10 +215,12 @@ class DisplayEngine {
       alert(`설정 가능한 최대 ${typeLimit.name}는 ${typeLimit.max}${typeLimit.unit}입니다.`);
     }
 
+    const prevDisplaySize = { ...this.displaySize };
     this.displaySize[type] = Math.min(Math.max(0, numSize), typeLimit.max);
 
     this.eventBus.emit('display:updateDisplaySize', {
       displaySize: this.displaySize,
+      prev: { displaySize: prevDisplaySize },
       timestamp: Date.now(),
     });
   }

package/src/core/engines/FreeDropEngine.js

@@ -71,9 +71,9 @@ class FreeDropEngine {
     });
 
     // layoutName 변경 감지 (gridNumber가 함께 초기화됨)
-    this._subscribe('layout:setLayoutName', ({gridNumber}) => {
+    this._subscribe('layout:setLayoutName', ({ gridNumber }) => {
       this._gridNumber = gridNumber;
-    })
+    });
     this._subscribe('layout:updateLayoutName', ({ gridNumber }) => {
       this._gridNumber = gridNumber;
     });

package/src/core/managers/EngineManager.js

@@ -1,4 +1,6 @@
 import { cloneDeep } from 'lodash-es';
+import { nextTick } from 'vue';
+
 import EventBus from './EventBus.js';
 import ApiManager from './ApiManager.js';
 import utils from '../../utils/index.js';
@@ -180,7 +182,38 @@ class EngineManager {
 
   /** ---------------------------------- display Engine ---------------------------------- **/
   /** [내부함수] displayEngine 연결 설정 */
-  _setupDisplayEngineConnections() {}
+  _setupDisplayEngineConnections() {
+    this._subscribe('display:updateDisplayMode', ({ displaySize, prev }) => {
+      this._updateElementsScale(prev.displaySize, displaySize);
+    });
+
+    this._subscribe('display:updateDisplaySize', ({ displaySize, prev }) => {
+      this._updateElementsScale(prev.displaySize, displaySize);
+    });
+  }
+
+  _updateElementsScale(oldValue, newValue) {
+    const oldWidth = oldValue.px;
+    const oldHeight = oldValue.px / oldValue.aspectRatio.split('/').map(Number).reduce((a, b) => a / b);
+
+    const newWidth = newValue.px;
+    const newHeight = newValue.px / newValue.aspectRatio.split('/').map(Number).reduce((a, b) => a / b);
+
+    nextTick(() => {
+      this.setContainerSize();
+
+      const normalizeElements = dataConverter.normalize(this.state.elements, oldWidth, oldHeight);
+      const denormalizedElements = dataConverter.denormalize(normalizeElements, newWidth, newHeight);
+
+      this.state.elements = cloneDeep(denormalizedElements);
+
+      this.eventBus.emit('system:requestUpdateElements', {
+        historyEvent: true,
+        elements: cloneDeep(this.state.elements),
+        timestamp: Date.now(),
+      });
+    });
+  }
 
   /** ---------------------------------- layout Engine ---------------------------------- **/
   /** [내부함수] layoutEngine 연결 설정 */

package/src/icons/action/EditIcon.vue

@@ -0,0 +1,52 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    class="edit-icon"
+  >
+    <!-- 종이/문서 -->
+    <path
+      d="M12 6H7C6.73478 6 6.48043 6.10536 6.29289 6.29289C6.10536 6.48043 6 6.73478 6 7V17C6 17.2652 6.10536 17.5196 6.29289 17.7071C6.48043 17.8946 6.73478 18 7 18H17C17.2652 18 17.5196 17.8946 17.7071 17.7071C17.8946 17.5196 18 17.2652 18 17V12"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <!-- 연필 -->
+    <path
+      d="M17.5 4.5C17.6989 4.30109 17.9687 4.18934 18.25 4.18934C18.5313 4.18934 18.8011 4.30109 19 4.5C19.1989 4.69891 19.3107 4.96866 19.3107 5.25C19.3107 5.53134 19.1989 5.80109 19 6L13 12L11 13L12 11L17.5 4.5Z"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
+
+<style scoped lang="scss">
+.edit-icon {
+  color: #6b7280; /* 미선택 상태를 나타내는 회색 */
+  background-color: rgba(107, 114, 128, 0.1); /* 연한 회색 배경 */
+  /* margin: 4px; */
+  padding: 2px;
+  border-radius: 4px;
+
+  &.active {
+    color: #2563eb; /* 선택 상태를 나타내는 파란색 */
+    background-color: rgba(37, 99, 235, 0.1);
+  }
+}
+
+.edit-icon:hover {
+  color: #4b5563; /* 호버 시 더 진한 회색 */
+  background-color: rgba(107, 114, 128, 0.15); /* 호버 시 배경색 강화 */
+}
+
+.edit-icon:active {
+  color: #374151; /* 클릭 시 가장 진한 회색 */
+  background-color: rgba(107, 114, 128, 0.2);
+}
+</style>

package/src/icons/action/LockIcon.vue

@@ -35,7 +35,7 @@
 .lock-icon {
   color: #dc2626; /* 잠긴 상태를 나타내는 빨간색 */
   background-color: rgba(239, 68, 68, 0.1); /* 연한 빨간색 배경 */
-  margin: 4px;
+  /* margin: 4px; */
   padding: 2px;
   border-radius: 4px;
 }

package/src/icons/action/UnlockIcon.vue

@@ -35,7 +35,7 @@
 .unlock-icon {
   color: #6b7280; /* 열린 상태를 나타내는 회색 */
   background-color: rgba(107, 114, 128, 0.1); /* 연한 회색 배경 */
-  margin: 4px;
+  /* margin: 4px; */
   padding: 2px;
   border-radius: 4px;
 }

package/src/icons/iconHolder.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="icon-holder">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.icon-holder {
+  width: 24px;
+  height: 24px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  color: #6b7280; /* 미선택 상태를 나타내는 회색 */
+  background-color: rgba(107, 114, 128, 0.1); /* 연한 회색 배경 */
+  /* margin: 4px; */
+  padding: 4px;
+  border-radius: 4px;
+
+  &.active {
+    color: #2563eb; /* 선택 상태를 나타내는 파란색 */
+    background-color: rgba(37, 99, 235, 0.1);
+  }
+}
+
+.icon-holder:hover {
+  color: #4b5563; /* 호버 시 더 진한 회색 */
+  background-color: rgba(107, 114, 128, 0.15); /* 호버 시 배경색 강화 */
+}
+
+.icon-holder:active {
+  color: #374151; /* 클릭 시 가장 진한 회색 */
+  background-color: rgba(107, 114, 128, 0.2);
+}
+</style>