From 73a6b9928de70e82f88207c5058108cf9b0d4871 Mon Sep 17 00:00:00 2001
From: daeyeon ko <rowan@megazone.com>
Date: Tue, 7 Jan 2025 19:05:30 +0900
Subject: [PATCH 1/4] refactor: changing resizer line to fatter when it hoverd

Signed-off-by: daeyeon ko <rowan@megazone.com>
---
 .../vertical-layout/PVerticalLayout.vue       | 176 +++++++++++-------
 1 file changed, 104 insertions(+), 72 deletions(-)

diff --git a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
index b1aec14be0..a96b751810 100644
--- a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
+++ b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
@@ -11,11 +11,11 @@ import screens from '@/styles/screens.cjs';
 const MOBILE_WIDTH = '312';
 
 interface Props {
-    height?: string;
-    initWidth?: number;
-    minWidth?: number;
-    maxWidth?: number;
-    enableDoubleClickResize? : boolean;
+  height?: string;
+  initWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  enableDoubleClickResize? : boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -60,7 +60,11 @@ const state = reactive({
     })),
     resizerStyle: computed(() => ({
         left: `${state.width}px`,
-        'border-left-width': state.hide ? 0 : '1px',
+        width: 'fit-content',
+    })),
+    resizerLineStyle: computed(() => ({
+    // eslint-disable-next-line no-nested-ternary
+        width: state.hide ? 0 : state.isHover ? '2px' : '1px',
     })),
     mainStyle: computed(() => ({
         width: state.isMobileSize ? '100%' : `calc( 100% - ${state.width}px )`,
@@ -97,17 +101,17 @@ const isResizing = (event) => {
             resize(width);
         }
         state.clientX = event.clientX;
-        state.isHover = true;
+        // state.isHover = true;
     }
 };
 const endResizing = () => {
     state.resizing = false;
     state.clientX = null;
-    state.isHover = false;
+    // state.isHover = false;
 };
 const startResizing = () => {
     state.resizing = true;
-    state.isHover = true;
+    // state.isHover = true;
 };
 
 /* Toggle hide Sidebar */
@@ -168,6 +172,9 @@ onBeforeMount(() => {
     detectWindowResizing();
 });
 
+function test() {
+    state.isHover = !state.isHover;
+}
 </script>
 
 <template>
@@ -186,9 +193,12 @@ onBeforeMount(() => {
                     name="sidebar"
                     v-bind="{width: Number(state.width), hide: state.hide, transition: state.transition, height: props.height}"
                 />
+                <button @click="test">
+                    toggle
+                </button>
             </div>
         </div>
-        <div class="resizer-container line"
+        <div class="resizer-container"
              :class="{transition: state.transition, hover: state.isHover}"
              :style="state.resizerStyle"
              @mousedown="startResizing"
@@ -197,28 +207,36 @@ onBeforeMount(() => {
              @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"
-                       :class="{hide: state.hide}"
-                       class="resizer"
-                       @click="handleSidebarToggle"
+            <div class="resizer-content"
+                 :class="{hover: state.isHover}"
             >
-                <span class="resizer-button">
-                    <slot name="resizer-button">
-                        <p-i width="1.5rem"
-                             height="1.5rem"
-                             :name="state.hide ? 'ic_chevron-right' : 'ic_chevron-left'"
-                             color="inherit"
-                        />
-                    </slot>
-                </span>
-            </p-tooltip>
-            <div
-                v-if="enableDoubleClickResize"
-                class="controller"
-                :class="{hover: state.isHover && !state.hide}"
-                @dblclick="handleControllerDoubleClick"
-            />
+                <div class="line"
+                     :class="{hover: state.isHover}"
+                     :style="state.resizerLineStyle"
+                />
+                <p-tooltip :contents="state.hide ? $t('COMPONENT.VERTICAL_LAYOUT.EXPAND') : $t('COMPONENT.VERTICAL_LAYOUT.COLLAPSE')"
+                           position="right"
+                           :class="{hide: state.hide}"
+                           class="resizer"
+                           @click="handleSidebarToggle"
+                >
+                    <span class="resizer-button">
+                        <slot name="resizer-button">
+                            <p-i width="1.5rem"
+                                 height="1.5rem"
+                                 :name="state.hide ? 'ic_chevron-right' : 'ic_chevron-left'"
+                                 color="inherit"
+                            />
+                        </slot>
+                    </span>
+                </p-tooltip>
+                <div
+                    v-if="enableDoubleClickResize"
+                    class="controller"
+                    :class="{hover: state.isHover && !state.hide}"
+                    @dblclick="handleControllerDoubleClick"
+                />
+            </div>
         </div>
         <div
             class="main"
@@ -258,71 +276,85 @@ onBeforeMount(() => {
         }
     }
     > .resizer-container {
-        display: flex;
-        align-items: flex-start;
-        justify-content: center;
         position: absolute;
         top: 0;
         height: 100%;
         width: 0;
         z-index: 1;
-        &.transition {
-            transition: left 0.2s;
-        }
-        &.line {
-            @apply border-gray-200;
-            background-color: transparent;
-            &.hover {
-                @apply border-blue-500;
-                cursor: ew-resize;
+        border: none;
+        .resizer-content {
+            position: relative;
+            height: 100%;
+            width: fit-content;
+            .transition {
+                transition: left 0.2s;
             }
-        }
-        .resizer {
-            @apply absolute flex items-center justify-center bg-white border border-gray-300 rounded-full text-gray-600 cursor-pointer;
-            width: 1.5rem;
-            height: 1.5rem;
-            margin-top: 1.25rem;
-            font-size: 1.5rem;
-            font-weight: 600;
-            z-index: 1;
-            cursor: col-resize;
-            &.hide {
-                @apply bg-white justify-end;
-                left: -1px;
-                width: 1.25rem;
-                margin-right: -0.25rem;
-                border-top-left-radius: 50%;
-                border-bottom-left-radius: 50%;
-                border-left: 0;
-                .resizer-button > svg {
-                    margin-right: -0.125rem;
-                }
+            .line {
+                position: absolute;
+                height: 100%;
+
+                @apply bg-gray-200;
                 &.hover {
-                    @apply text-secondary;
-                    width: 2.5rem;
+                    @apply bg-blue-600;
+                    cursor: ew-resize;
+                    transform: translateX(-25%);
+                }
+            }
+            .resizer {
+                @apply absolute flex items-center justify-center bg-white border border-gray-300 rounded-full text-gray-600 cursor-pointer;
+                width: 1.5rem;
+                height: 1.5rem;
+                margin-top: 1.25rem;
+                top: 0;
+                left: 50%;
+                transform: translateX(-50%);
+                font-size: 1.5rem;
+                font-weight: 600;
+                z-index: 1;
+                cursor: col-resize;
+                &.hide {
+                    @apply bg-white justify-end;
+                    left: -1px;
+                    width: 1.25rem;
+                    margin-right: -0.25rem;
+                    border-top-left-radius: 50%;
+                    border-bottom-left-radius: 50%;
+                    border-left: 0;
+                    transform: translateX(0);
                     .resizer-button > svg {
-                        margin-right: 0;
+                        margin-right: -0.125rem;
+                    }
+                    &:hover {
+                        @apply text-secondary;
+                        width: 2.5rem;
+                        .resizer-button > svg {
+                            margin-right: 0;
+                        }
                     }
                 }
-            }
-            &:hover {
-                @apply bg-blue-200 cursor-pointer;
+                &:hover {
+                    @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;
+            opacity: 1;
+            left: 50%;
+            transform: translateX(-50%);
 
             &.hover {
-                @apply border-blue-500;
+                @apply border-blue-600;
                 opacity: 1;
             }
             &:hover {
                 @apply bg-blue-200;
                 opacity: 1;
+                width: 0.6rem;
                 cursor: col-resize;
             }
         }

From 0777d45c6e6da96e0196405697996b9c43acb623 Mon Sep 17 00:00:00 2001
From: daeyeon ko <rowan@megazone.com>
Date: Wed, 8 Jan 2025 16:36:50 +0900
Subject: [PATCH 2/4] refactor: modify the rendering position of the controller
 of the PVerticalLayout

Signed-off-by: daeyeon ko <rowan@megazone.com>
---
 .../vertical-layout/PVerticalLayout.vue       | 71 +++++++++----------
 1 file changed, 34 insertions(+), 37 deletions(-)

diff --git a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
index a96b751810..954d237d92 100644
--- a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
+++ b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
@@ -101,17 +101,17 @@ const isResizing = (event) => {
             resize(width);
         }
         state.clientX = event.clientX;
-        // state.isHover = true;
+        state.isHover = true;
     }
 };
 const endResizing = () => {
     state.resizing = false;
     state.clientX = null;
-    // state.isHover = false;
+    state.isHover = false;
 };
 const startResizing = () => {
     state.resizing = true;
-    // state.isHover = true;
+    state.isHover = true;
 };
 
 /* Toggle hide Sidebar */
@@ -213,7 +213,14 @@ function test() {
                 <div class="line"
                      :class="{hover: state.isHover}"
                      :style="state.resizerLineStyle"
-                />
+                >
+                    <div
+                        v-if="enableDoubleClickResize"
+                        class="controller"
+                        :class="{hover: state.isHover && !state.hide}"
+                        @dblclick="handleControllerDoubleClick"
+                    />
+                </div>
                 <p-tooltip :contents="state.hide ? $t('COMPONENT.VERTICAL_LAYOUT.EXPAND') : $t('COMPONENT.VERTICAL_LAYOUT.COLLAPSE')"
                            position="right"
                            :class="{hide: state.hide}"
@@ -230,12 +237,6 @@ function test() {
                         </slot>
                     </span>
                 </p-tooltip>
-                <div
-                    v-if="enableDoubleClickResize"
-                    class="controller"
-                    :class="{hover: state.isHover && !state.hide}"
-                    @dblclick="handleControllerDoubleClick"
-                />
             </div>
         </div>
         <div
@@ -268,7 +269,6 @@ function test() {
         flex-direction: column;
         justify-content: stretch;
 
-        /* flex-grow: 1; */
         overflow-x: hidden;
         overflow-y: auto;
         &.transition {
@@ -286,18 +286,20 @@ function test() {
             position: relative;
             height: 100%;
             width: fit-content;
+            display: flex;
+            justify-content: center;
             .transition {
                 transition: left 0.2s;
             }
             .line {
+                @apply bg-gray-200;
                 position: absolute;
                 height: 100%;
-
-                @apply bg-gray-200;
                 &.hover {
                     @apply bg-blue-600;
                     cursor: ew-resize;
-                    transform: translateX(-25%);
+                    left: 50%;
+                    transform: translateX(-50%);
                 }
             }
             .resizer {
@@ -306,8 +308,6 @@ function test() {
                 height: 1.5rem;
                 margin-top: 1.25rem;
                 top: 0;
-                left: 50%;
-                transform: translateX(-50%);
                 font-size: 1.5rem;
                 font-weight: 600;
                 z-index: 1;
@@ -320,7 +320,6 @@ function test() {
                     border-top-left-radius: 50%;
                     border-bottom-left-radius: 50%;
                     border-left: 0;
-                    transform: translateX(0);
                     .resizer-button > svg {
                         margin-right: -0.125rem;
                     }
@@ -336,26 +335,24 @@ function test() {
                     @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: 1;
-            left: 50%;
-            transform: translateX(-50%);
-
-            &.hover {
-                @apply border-blue-600;
-                opacity: 1;
-            }
-            &:hover {
-                @apply bg-blue-200;
-                opacity: 1;
-                width: 0.6rem;
-                cursor: col-resize;
+            .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;
+                left: 50%;
+                transform: translateX(-50%);
+                &.hover {
+                    @apply border-blue-600;
+                    opacity: 1;
+                }
+                &:hover {
+                    @apply bg-blue-200;
+                    opacity: 1;
+                    width: 0.6rem;
+                    cursor: col-resize;
+                }
             }
         }
     }

From 491d7e3be9dfcf2619aa89004a5896c493b2f28c Mon Sep 17 00:00:00 2001
From: daeyeon ko <rowan@megazone.com>
Date: Wed, 8 Jan 2025 16:58:23 +0900
Subject: [PATCH 3/4] chore: chore

Signed-off-by: daeyeon ko <rowan@megazone.com>
---
 .../src/layouts/vertical-layout/PVerticalLayout.vue        | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
index 954d237d92..5d255474f5 100644
--- a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
+++ b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
@@ -171,10 +171,6 @@ documentEventMount('resize', detectWindowResizing);
 onBeforeMount(() => {
     detectWindowResizing();
 });
-
-function test() {
-    state.isHover = !state.isHover;
-}
 </script>
 
 <template>
@@ -193,9 +189,6 @@ function test() {
                     name="sidebar"
                     v-bind="{width: Number(state.width), hide: state.hide, transition: state.transition, height: props.height}"
                 />
-                <button @click="test">
-                    toggle
-                </button>
             </div>
         </div>
         <div class="resizer-container"

From 486442028ef285e4f60435525ac21e3f76812c9f Mon Sep 17 00:00:00 2001
From: daeyeon ko <rowan@megazone.com>
Date: Wed, 8 Jan 2025 17:17:56 +0900
Subject: [PATCH 4/4] style: style

Signed-off-by: daeyeon ko <rowan@megazone.com>
---
 .../src/layouts/vertical-layout/PVerticalLayout.vue    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
index 5d255474f5..c831844c26 100644
--- a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
+++ b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
@@ -11,11 +11,11 @@ import screens from '@/styles/screens.cjs';
 const MOBILE_WIDTH = '312';
 
 interface Props {
-  height?: string;
-  initWidth?: number;
-  minWidth?: number;
-  maxWidth?: number;
-  enableDoubleClickResize? : boolean;
+    height?: string;
+    initWidth?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    enableDoubleClickResize? : boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {