From 71f7dc2236cfd9431fd061cb54ab488d6bee1dc4 Mon Sep 17 00:00:00 2001
From: daeyeon ko <rowan@megazone.com>
Date: Fri, 20 Dec 2024 17:59:10 +0900
Subject: [PATCH] fix: popover target slot width changes according to lsb width
 change in metricLSB, verification message when adding a user (#5239)

* fix: display verification message after checking user search input

Signed-off-by: daeyeon ko <rowan@megazone.com>

* chore(language): en, jp, ko translation added

Signed-off-by: daeyeon ko <rowan@megazone.com>

* feat: enable the double-click option for verticalLayout

Signed-off-by: daeyeon ko <rowan@megazone.com>

* feat: minWidth spec added

Signed-off-by: daeyeon ko <rowan@megazone.com>

* fix: the width of metricExplorerLSB is not applied correctly

Signed-off-by: daeyeon ko <rowan@megazone.com>

* refactor: verticalLayout dbclick logic & apply LSB minWidth

Signed-off-by: daeyeon ko <rowan@megazone.com>

* fix: typo & type

Signed-off-by: daeyeon ko <rowan@megazone.com>

* refactor: use a hook to get the current menu ID

Signed-off-by: daeyeon ko <rowan@megazone.com>

* chore: remove unused variable

Signed-off-by: daeyeon ko <rowan@megazone.com>

---------

Signed-off-by: daeyeon ko <rowan@megazone.com>
---
 .../page-layouts/VerticalPageLayout.vue       |  18 ++-
 .../AssetInventoryContainer.vue               |   4 +-
 .../asset-inventory/AssetInventoryLSB.vue     |   6 +-
 .../components/MetricExplorerLSB.vue          |  10 +-
 .../iam/components/UserManagementAddUser.vue  |  71 +++++------
 .../console-translation-2.8.babel             |  21 ++++
 packages/language-pack/en.json                |   1 +
 packages/language-pack/ja.json                |   1 +
 packages/language-pack/ko.json                |   1 +
 .../src/data-display/popover/PPopover.vue     |   7 +-
 .../src/data-display/popover/story-helper.ts  |  16 +++
 .../PVerticalLayout.stories.ts                |   9 +-
 .../vertical-layout/PVerticalLayout.vue       | 110 +++++++++++++++---
 .../layouts/vertical-layout/story-helper.ts   |  16 +++
 14 files changed, 223 insertions(+), 68 deletions(-)

diff --git a/apps/web/src/common/modules/page-layouts/VerticalPageLayout.vue b/apps/web/src/common/modules/page-layouts/VerticalPageLayout.vue
index af9d8e3b3a..5c540d9aa6 100644
--- a/apps/web/src/common/modules/page-layouts/VerticalPageLayout.vue
+++ b/apps/web/src/common/modules/page-layouts/VerticalPageLayout.vue
@@ -9,6 +9,9 @@ import { PVerticalLayout } from '@cloudforet/mirinae';
 
 import { useGlobalUIStore } from '@/store/global-ui/global-ui-store';
 
+import { MENU_ID } from '@/lib/menu/config';
+
+import { useCurrentMenuId } from '@/common/composables/current-menu-id';
 import FNB from '@/common/modules/navigations/FNB.vue';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 import type { Breadcrumb } from '@/common/modules/page-layouts/type';
@@ -35,6 +38,9 @@ const { width: contentsWidth } = useElementSize(contentRef);
 const storeState = reactive({
     isMinimizeNavRail: computed(() => gnbGetters.isMinimizeNavRail),
 });
+
+const { currentMenuId } = useCurrentMenuId();
+
 const state = reactive({
     padding: computed(() => {
         if (contentsWidth.value <= 1920) return '0';
@@ -52,10 +58,14 @@ watch(() => props.breadcrumbs, () => {
 </script>
 
 <template>
-    <p-vertical-layout v-bind="$props"
-                       ref="contentRef"
-                       class="vertical-page-layout"
-                       v-on="$listeners"
+    <p-vertical-layout
+        v-bind="$props"
+        ref="contentRef"
+        class="vertical-page-layout"
+        :width="width"
+        :min-width="240"
+        :enable-double-click-resize="currentMenuId === MENU_ID.METRIC_EXPLORER"
+        v-on="$listeners"
     >
         <template #sidebar="prop">
             <slot name="sidebar"
diff --git a/apps/web/src/services/asset-inventory/AssetInventoryContainer.vue b/apps/web/src/services/asset-inventory/AssetInventoryContainer.vue
index 632cc06203..54dab058a2 100644
--- a/apps/web/src/services/asset-inventory/AssetInventoryContainer.vue
+++ b/apps/web/src/services/asset-inventory/AssetInventoryContainer.vue
@@ -57,8 +57,8 @@ onUnmounted(() => {
 <template>
     <fragment>
         <vertical-page-layout v-if="state.lsbVisible">
-            <template #sidebar>
-                <asset-inventory-l-s-b />
+            <template #sidebar="prop">
+                <asset-inventory-l-s-b :width="prop.width" />
             </template>
             <template #default>
                 <router-view />
diff --git a/apps/web/src/services/asset-inventory/AssetInventoryLSB.vue b/apps/web/src/services/asset-inventory/AssetInventoryLSB.vue
index 524dbc96e2..06c606ba28 100644
--- a/apps/web/src/services/asset-inventory/AssetInventoryLSB.vue
+++ b/apps/web/src/services/asset-inventory/AssetInventoryLSB.vue
@@ -8,12 +8,16 @@ import MetricExplorerLSB from '@/services/asset-inventory/components/MetricExplo
 import SecurityLSB from '@/services/asset-inventory/components/SecurityLSB.vue';
 
 const { currentMenuId } = useCurrentMenuId();
+interface props {
+  width: number;
+}
+const props = defineProps<props>();
 </script>
 
 <template>
     <fragment>
         <cloud-service-l-s-b v-if="currentMenuId === MENU_ID.CLOUD_SERVICE" />
-        <metric-explorer-l-s-b v-else-if="currentMenuId === MENU_ID.METRIC_EXPLORER" />
+        <metric-explorer-l-s-b v-else-if="currentMenuId === MENU_ID.METRIC_EXPLORER" :width="width"/>
         <security-l-s-b v-else-if="currentMenuId === MENU_ID.SECURITY" />
     </fragment>
 </template>
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerLSB.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerLSB.vue
index 55598d5bfa..f078dcb271 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerLSB.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerLSB.vue
@@ -41,6 +41,11 @@ import { useAssetInventorySettingsStore } from '@/services/asset-inventory/store
 import { useMetricExplorerPageStore } from '@/services/asset-inventory/stores/metric-explorer-page-store';
 import type { NamespaceSubItemType } from '@/services/asset-inventory/types/asset-analysis-type';
 
+interface props {
+  width : number
+}
+const props = defineProps<props>();
+
 const lsbRef = ref<HTMLElement|null>(null);
 const { width: lsbWidth } = useElementSize(lsbRef);
 
@@ -295,16 +300,18 @@ watch(() => storeState.selectedNamespace, (selectedNamespace) => {
 <template>
     <div class="metric-explorer-l-s-b">
         <p-popover class="metric-select-guide-popover"
-                   :is-visible="guidePopoverState.metricGuideVisible"
+                   :is-visible.sync="guidePopoverState.metricGuideVisible"
                    position="right"
                    ignore-outside-click
                    ignore-target-click
                    boundary=".metric-explorer-l-s-b"
                    :trigger="POPOVER_TRIGGER.NONE"
+                   min-width="21.5rem"
                    :style="{ left: `${lsbWidth}px`}"
         >
             <l-s-b ref="lsbRef"
                    :menu-set="state.menuSet"
+                   :style="{ width: `${props.width}px` }"
             >
                 <template #collapsible-contents-starred>
                     <div v-if="state.starredMenuSet.length > 0">
@@ -418,6 +425,7 @@ watch(() => storeState.selectedNamespace, (selectedNamespace) => {
                     />
                 </template>
             </l-s-b>
+
             <template #content>
                 <div class="metric-select-guide-content">
                     <p class="title">
diff --git a/apps/web/src/services/iam/components/UserManagementAddUser.vue b/apps/web/src/services/iam/components/UserManagementAddUser.vue
index df19a173ef..5b8c183c8f 100644
--- a/apps/web/src/services/iam/components/UserManagementAddUser.vue
+++ b/apps/web/src/services/iam/components/UserManagementAddUser.vue
@@ -5,8 +5,6 @@ import {
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
-import { debounce } from 'lodash';
-
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
     PContextMenu, PEmpty, PFieldGroup, PIconButton, PSelectDropdown, PBadge,
@@ -26,7 +24,6 @@ import { checkEmailFormat } from '@/services/iam/helpers/user-management-form-va
 import { useUserPageStore } from '@/services/iam/store/user-page-store';
 import type { AddModalMenuItem, LocalType } from '@/services/iam/types/user-type';
 
-
 const userPageStore = useUserPageStore();
 const userPageState = userPageStore.state;
 const domainStore = useDomainStore();
@@ -62,70 +59,63 @@ const validationState = reactive({
 const hideMenu = () => {
     emit('change-input', { userList: state.selectedItems });
     state.menuVisible = false;
-    validationState.userIdInvalid = false;
-    validationState.userIdInvalidText = '';
-    formState.searchText = '';
 };
 const handleClickTextInput = async () => {
     state.menuVisible = true;
     resetValidationState();
 };
 const handleChangeTextInput = (value: string) => {
-    validationState.userIdInvalid = false;
-    validationState.userIdInvalidText = '';
+    resetValidationState();
     formState.searchText = value;
     if (!userPageState.isAdminMode || userPageState.afterWorkspaceCreated) {
         fetchListUsers();
         state.menuVisible = true;
     }
 };
-const handleEnterTextInput = debounce(async (value) => {
+const handleEnterTextInput = async () => {
     if (formState.searchText === '') return;
     if (validateUserId()) {
-        const isFocusOut = value.type === 'focusout';
-        await getUserList(isFocusOut);
+        await getUserList();
     }
-}, 100);
+};
 const handleClickDeleteButton = (idx: number) => {
     state.selectedItems.splice(idx, 1);
     emit('change-input', { userList: state.selectedItems });
 };
 const handleSelectDropdownItem = (selected: AuthType|LocalType) => {
     formState.selectedMenuItem = selected;
-    validationState.userIdInvalid = false;
-    validationState.userIdInvalidText = '';
+    resetValidationState();
 };
-const getUserList = async (isFocusOut?: boolean) => {
+
+const getUserList = async () => {
     let isNew = userPageState.isAdminMode || userPageState.afterWorkspaceCreated;
     try {
+        const trimmedText = formState.searchText.trim();
         if (userPageState.isAdminMode || userPageState.afterWorkspaceCreated) {
-            await fetchGetUsers(formState.searchText);
+            await fetchGetUsers(trimmedText);
         } else {
             const isIndependentUser = state.independentUsersList.find((user) => user.user_id === formState.searchText);
             isNew = !isIndependentUser;
-            await fetchGetWorkspaceUsers(formState.searchText);
+            await fetchGetWorkspaceUsers(trimmedText);
         }
     } catch (e) {
-        if (!isFocusOut) {
-            addSelectedItem(isNew);
-        }
-    } finally {
+        addSelectedItem(isNew);
         await hideMenu();
+        formState.searchText = '';
+        resetValidationState();
     }
 };
 const checkEmailValidation = () => {
     const { isValid, invalidText } = checkEmailFormat(formState.searchText);
     if (formState.selectedMenuItem === 'EMAIL') {
         if (!isValid) {
-            validationState.userIdInvalid = true;
-            validationState.userIdInvalidText = invalidText;
+            updateValidationState(invalidText);
             return false;
         }
     }
     if (formState.selectedMenuItem === 'ID') {
         if (isValid) {
-            validationState.userIdInvalid = true;
-            validationState.userIdInvalidText = i18n.t('IAM.USER.FORM.ID_INVALID');
+            updateValidationState(i18n.t('IAM.USER.FORM.ID_INVALID'));
             return false;
         }
     }
@@ -135,10 +125,14 @@ const resetValidationState = () => {
     validationState.userIdInvalid = false;
     validationState.userIdInvalidText = '';
 };
+
+const updateValidationState = (invalidText: TranslateResult = '', isInvalid = true) => {
+    validationState.userIdInvalid = isInvalid;
+    validationState.userIdInvalidText = invalidText;
+};
 const validateUserId = () => {
     if (formState.searchText === '') {
-        validationState.userIdInvalid = true;
-        validationState.userIdInvalidText = i18n.t('IAM.USER.FORM.ALT_E_INVALID_FULL_NAME');
+        updateValidationState(i18n.t('IAM.USER.FORM.ALT_E_INVALID_FULL_NAME'));
         return false;
     }
     return checkEmailValidation();
@@ -163,15 +157,16 @@ const initAuthTypeList = async () => {
 };
 const addSelectedItem = (isNew: boolean) => {
     if (!formState.searchText) return;
+    const trimmedText = formState.searchText.trim();
+    if (state.selectedItems.some((item) => item.name === trimmedText && item.auth_type === formState.selectedMenuItem)) return;
+
     state.selectedItems.unshift({
-        user_id: formState.searchText?.trim(),
-        label: formState.searchText?.trim(),
-        name: formState.searchText?.trim(),
+        user_id: trimmedText,
+        label: trimmedText,
+        name: trimmedText,
         isNew,
         auth_type: formState.selectedMenuItem,
     });
-    formState.searchText = '';
-    resetValidationState();
 };
 
 /* API */
@@ -205,19 +200,13 @@ const fetchGetWorkspaceUsers = async (userId: string) => {
     await SpaceConnector.clientV2.identity.workspaceUser.get<WorkspaceUserGetParameters, WorkspaceUserModel>({
         user_id: userId,
     });
-    validationState.userIdInvalid = true;
-    validationState.userIdInvalidText = i18n.t('IAM.USER.FORM.USER_ID_INVALID_WORKSPACE', { userId });
+    updateValidationState(i18n.t('IAM.USER.FORM.USER_ID_INVALID_WORKSPACE', { userId }));
 };
 const fetchGetUsers = async (userId: string) => {
     await SpaceConnector.clientV2.identity.user.get<UserGetParameters, UserModel>({
         user_id: userId,
     });
-    if (userPageState.afterWorkspaceCreated) {
-        addSelectedItem(false);
-    } else {
-        validationState.userIdInvalid = true;
-        validationState.userIdInvalidText = i18n.t('IAM.USER.FORM.USER_ID_INVALID_DOMAIN', { userId });
-    }
+    updateValidationState(i18n.t('IAM.USER.FORM.USER_ID_INVALID_DOMAIN', { userId }));
 };
 
 onClickOutside(containerRef, clickOutside);
@@ -271,7 +260,7 @@ onMounted(() => {
                                class="user-id-input"
                                :class="{'invalid': invalid}"
                                @click="handleClickTextInput"
-                               @focusout="handleEnterTextInput"
+                               @blur="handleEnterTextInput"
                                @keyup.enter="handleEnterTextInput"
                                @input="handleChangeTextInput($event.target.value)"
                         >
diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index 5669086e1b..9da355c07c 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -46174,6 +46174,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>ID_INVALID</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description/>
+                                        <comment/>
+                                        <default_text/>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>true</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>ja-JP</language>
+                                                <approved>true</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>ko-KR</language>
+                                                <approved>true</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>MEMBER</name>
                                         <definition_loaded>false</definition_loaded>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index a404de9aa6..ce612df424 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -2559,6 +2559,7 @@
 				"EMAIL_INVALID": "Invalid e-mail format.",
 				"GENERATE": "Generate",
 				"GENERATE_PLACEHOLDER": "Generate or Enter Password",
+				"ID_INVALID": "Invalid ID format.",
 				"MEMBER": "Member",
 				"NAME": "Name",
 				"NAME_VALID": "You can use this ID",
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index 34171b13cb..31dbd59eb3 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -2559,6 +2559,7 @@
 				"EMAIL_INVALID": "無効なメール形式です",
 				"GENERATE": "生成",
 				"GENERATE_PLACEHOLDER": "生成またはパスワード入力",
+				"ID_INVALID": "無効なID形式です。",
 				"MEMBER": "構成員",
 				"NAME": "お名前",
 				"NAME_VALID": "使用可能なIDです",
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index 0ef031e42f..6dae843ce5 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -2559,6 +2559,7 @@
 				"EMAIL_INVALID": "잘못된 이메일 형식입니다. ",
 				"GENERATE": "생성",
 				"GENERATE_PLACEHOLDER": "비밀번호 자동 생성 또는 입력",
+				"ID_INVALID": "잘못된 ID 형식입니다.",
 				"MEMBER": "멤버",
 				"NAME": "이름",
 				"NAME_VALID": "사용 가능한 아이디입니다.",
diff --git a/packages/mirinae/src/data-display/popover/PPopover.vue b/packages/mirinae/src/data-display/popover/PPopover.vue
index 4eb34f9b5d..ce27a028aa 100644
--- a/packages/mirinae/src/data-display/popover/PPopover.vue
+++ b/packages/mirinae/src/data-display/popover/PPopover.vue
@@ -63,6 +63,7 @@ interface PopoverProps {
     hideArrow?: boolean;
     boundary?: string;
     width?: string;
+    minWidth?: string;
 }
 
 const ARROW_STATIC_SIDES = {
@@ -137,6 +138,10 @@ export default defineComponent<PopoverProps>({
             type: String,
             default: '',
         },
+        minWidth: {
+            type: String,
+            default: '',
+        },
     },
     setup(props, { emit }) {
         const state = reactive({
@@ -210,7 +215,7 @@ export default defineComponent<PopoverProps>({
                             size({
                                 apply({ rects, elements }) {
                                     Object.assign(elements.floating.style, {
-                                        minWidth: `${rects.reference.width}px`,
+                                        minWidth: props.minWidth ? props.minWidth : `${rects.reference.width}px`,
                                     });
                                 },
                             }),
diff --git a/packages/mirinae/src/data-display/popover/story-helper.ts b/packages/mirinae/src/data-display/popover/story-helper.ts
index f58e5e76ba..87f67ee2a0 100644
--- a/packages/mirinae/src/data-display/popover/story-helper.ts
+++ b/packages/mirinae/src/data-display/popover/story-helper.ts
@@ -14,6 +14,7 @@ export const getPopoverArgs = (): Args => ({
     hideArrow: false,
     boundary: '',
     width: '',
+    minWidth: '',
     'v-model': false,
     defaultSlot: null,
     contentRefSlot: null,
@@ -198,6 +199,21 @@ export const getPopoverArgTypes = (): ArgTypes => {
             },
             control: 'text',
         },
+        minWidth: {
+            name: 'minWidth',
+            type: { name: 'string' },
+            description: 'minWidth of the popover. If the minWidth is not set, it would be calculated based on the width of the component it is applied to.',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                category: 'props',
+                defaultValue: {
+                    summary: false,
+                },
+            },
+            control: 'text',
+        },
         // model
         'v-model': {
             name: 'v-model',
diff --git a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.stories.ts b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.stories.ts
index 640594e4c5..48a080a181 100644
--- a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.stories.ts
+++ b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.stories.ts
@@ -32,8 +32,13 @@ const Template: Story = {
             PVerticalLayout,
         },
         template: `
-            <div style="width: 100vw; height: 10rem; border: 1px solid gray;">
-                <p-vertical-layout>
+            <div style="width: 100vw; height: 20rem; border: 1px solid gray;">
+                <p-vertical-layout 
+                    :height="height"
+                    :initWidth="initWidth"
+                    :minWidth="minWidth"
+                    :maxWidth="maxWidth"
+                    :enableDoubleClickResize="enableDoubleClickResize">
                     <template #sidebar>
                         Left Layout
                     </template>
diff --git a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
index 8e06528cfa..b1aec14be0 100644
--- a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
+++ b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-    reactive, computed, onMounted, onUnmounted,
+    reactive, computed, onMounted, onUnmounted, onBeforeMount, ref,
 } from 'vue';
 
 import PTooltip from '@/data-display/tooltips/PTooltip.vue';
@@ -15,6 +15,7 @@ interface Props {
     initWidth?: number;
     minWidth?: number;
     maxWidth?: number;
+    enableDoubleClickResize? : boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -22,6 +23,7 @@ const props = withDefaults(defineProps<Props>(), {
     initWidth: 240,
     minWidth: 100,
     maxWidth: 500,
+    enableDoubleClickResize: false,
 });
 
 const documentEventMount = (eventName: string, func: any) => {
@@ -36,6 +38,7 @@ const state = reactive({
     clientX: null,
     hide: false,
     transition: false,
+    isHover: false,
     sidebarContainerStyle: computed(() => ({
         width: `${state.width}px`,
         height: '100%',
@@ -65,6 +68,22 @@ const state = reactive({
     })),
 });
 
+const leftLayoutContentBox = ref<null|HTMLElement>(null);
+
+const resize = (delta: number) => {
+    const minimumWidth = props.minWidth;
+    const maximumWidth = props.maxWidth;
+
+    if (Number.isNaN(delta)) {
+        return;
+    }
+
+    const newWidth = Math.min(Math.max(delta, minimumWidth), maximumWidth);
+
+    if (state.width !== newWidth) {
+        state.width = newWidth;
+    }
+};
 /* Resizing */
 const isResizing = (event) => {
     if (state.resizing) {
@@ -75,17 +94,20 @@ const isResizing = (event) => {
         const delta = state.clientX - event.clientX;
         const width = (state.isMobileSize ? MOBILE_WIDTH : state.width) - delta;
         if (!(width <= props.minWidth || width > props.maxWidth)) {
-            state.width = width;
+            resize(width);
         }
         state.clientX = event.clientX;
+        state.isHover = true;
     }
 };
 const endResizing = () => {
     state.resizing = false;
     state.clientX = null;
+    state.isHover = false;
 };
 const startResizing = () => {
     state.resizing = true;
+    state.isHover = true;
 };
 
 /* Toggle hide Sidebar */
@@ -103,8 +125,6 @@ const handleSidebarToggle = () => {
         setTimeout(offTransition, 500);
     }
 };
-documentEventMount('mousemove', isResizing);
-documentEventMount('mouseup', endResizing);
 
 const detectWindowResizing = () => {
     state.isMobileSize = window.innerWidth <= screens.mobile.max;
@@ -119,8 +139,35 @@ const detectWindowResizing = () => {
     }
 };
 
-detectWindowResizing();
-window.addEventListener('resize', detectWindowResizing);
+const handleControllerDoubleClick = () => {
+    const minimumWidth = props.minWidth;
+    const maximumWidth = props.maxWidth;
+
+    if (state.width === maximumWidth) {
+        resize(minimumWidth);
+        return;
+    }
+    if (state.width === minimumWidth) {
+        resize(maximumWidth);
+        return;
+    }
+
+
+    if (state.width <= (maximumWidth + minimumWidth) / 2) {
+        resize(maximumWidth);
+    } else {
+        resize(minimumWidth);
+    }
+};
+
+documentEventMount('mousemove', isResizing);
+documentEventMount('mouseup', endResizing);
+documentEventMount('resize', detectWindowResizing);
+
+onBeforeMount(() => {
+    detectWindowResizing();
+});
+
 </script>
 
 <template>
@@ -131,18 +178,24 @@ window.addEventListener('resize', detectWindowResizing);
              :style="state.sidebarContainerStyle"
              :class="{transition: state.transition}"
         >
-            <div :style="state.sidebarStyle">
-                <slot name="sidebar"
-                      v-bind="{width: state.width, hide: state.hide, transition: state.transition, height: props.height}"
+            <div
+                ref="leftLayoutContentBox"
+                :style="state.sidebarStyle"
+            >
+                <slot
+                    name="sidebar"
+                    v-bind="{width: Number(state.width), hide: state.hide, transition: state.transition, height: props.height}"
                 />
             </div>
         </div>
         <div class="resizer-container line"
-             :class="{transition: state.transition}"
+             :class="{transition: state.transition, hover: state.isHover}"
              :style="state.resizerStyle"
              @mousedown="startResizing"
              @mousemove="isResizing"
              @mouseup="endResizing"
+             @mouseenter="state.isHover = true"
+             @mouseleave="state.isHover = false"
         >
             <p-tooltip :contents="state.hide ? $t('COMPONENT.VERTICAL_LAYOUT.EXPAND') : $t('COMPONENT.VERTICAL_LAYOUT.COLLAPSE')"
                        position="right"
@@ -160,10 +213,17 @@ window.addEventListener('resize', detectWindowResizing);
                     </slot>
                 </span>
             </p-tooltip>
+            <div
+                v-if="enableDoubleClickResize"
+                class="controller"
+                :class="{hover: state.isHover && !state.hide}"
+                @dblclick="handleControllerDoubleClick"
+            />
         </div>
-        <div class="main"
-             :class="{transition: state.transition}"
-             :style="state.mainStyle"
+        <div
+            class="main"
+            :class="{transition: state.transition}"
+            :style="state.mainStyle"
         >
             <slot />
         </div>
@@ -173,6 +233,7 @@ window.addEventListener('resize', detectWindowResizing);
 <style lang="postcss">
 .p-vertical-layout {
     display: flex;
+    position: relative;
     width: 100%;
     flex-direction: row;
     padding: 0;
@@ -200,7 +261,7 @@ window.addEventListener('resize', detectWindowResizing);
         display: flex;
         align-items: flex-start;
         justify-content: center;
-        position: sticky;
+        position: absolute;
         top: 0;
         height: 100%;
         width: 0;
@@ -211,7 +272,7 @@ window.addEventListener('resize', detectWindowResizing);
         &.line {
             @apply border-gray-200;
             background-color: transparent;
-            &:hover {
+            &.hover {
                 @apply border-blue-500;
                 cursor: ew-resize;
             }
@@ -236,7 +297,7 @@ window.addEventListener('resize', detectWindowResizing);
                 .resizer-button > svg {
                     margin-right: -0.125rem;
                 }
-                &:hover {
+                &.hover {
                     @apply text-secondary;
                     width: 2.5rem;
                     .resizer-button > svg {
@@ -248,6 +309,23 @@ window.addEventListener('resize', detectWindowResizing);
                 @apply bg-blue-200 cursor-pointer;
             }
         }
+        .controller {
+            @apply absolute border border-gray-300 rounded-md bg-white;
+            width: 0.4rem;
+            height: 1.5rem;
+            top: calc(50% - 1.5rem / 2);
+            opacity: 0;
+
+            &.hover {
+                @apply border-blue-500;
+                opacity: 1;
+            }
+            &:hover {
+                @apply bg-blue-200;
+                opacity: 1;
+                cursor: col-resize;
+            }
+        }
     }
 }
 </style>
diff --git a/packages/mirinae/src/layouts/vertical-layout/story-helper.ts b/packages/mirinae/src/layouts/vertical-layout/story-helper.ts
index 408584cc1d..1a7f9da96d 100644
--- a/packages/mirinae/src/layouts/vertical-layout/story-helper.ts
+++ b/packages/mirinae/src/layouts/vertical-layout/story-helper.ts
@@ -5,6 +5,7 @@ export const getVerticalLayoutArgs = (): Args => ({
     initWidth: 300,
     minWidth: 100,
     maxWidth: 500,
+    enableDoubleClickResize: false,
 });
 
 export const getVerticalLayoutParameters = (): Parameters => ({
@@ -75,6 +76,21 @@ export const getVerticalLayoutArgTypes = (): ArgTypes => ({
         },
         control: 'number',
     },
+    enableDoubleClickResize: {
+        name: 'enableDoubleClickResize',
+        type: { name: 'boolean' },
+        description: 'Whether to enable resizing the sidebar with a double-click on the controller.',
+        table: {
+            type: {
+                summary: 'boolean',
+            },
+            category: 'props',
+            defaultValue: {
+                summary: false,
+            },
+        },
+        control: 'boolean',
+    },
     // default
     sidebar: { table: { disable: true } },
     'resizer-button': { table: { disable: true } },