+ 게이트 페이지 임시 히든 처리

assets/scss/main.scss

@@ -466,6 +466,7 @@ html {
   left:0px;
   z-index: 9999999;
   > div{
+    transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
     .btn--contents{
       display: flex;
       flex-direction: column;
@@ -502,7 +503,7 @@ html {
     transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
     
     &.actv{
-      width:60%;
+      width:60%;      
       z-index: 9;
 
       .btn--contents{

pages/index.vue

@@ -1,16 +1,24 @@
 <template>
   <div class="login-wrap">
-    <div class="login--gate" v-show="loginVisible == 'Y'">
-      <div class="inf--gate" :class="gate1 ? 'actv' : ''">
-        <div class="btn--contents" @mouseenter.stop="[(gate1 = !gate1), (gate2 = false)]">
+    <!-- <div class="login--gate" v-show="loginVisible == 'Y'">
+      <div
+        class="inf--gate"
+        :class="gate1 ? 'actv' : ''"
+        @mousemove.stop="handleInfluenceMove"
+      >        
+        <div class="btn--contents">
           <h2>influence</h2>
           <v-btn class="loc--btn" @click.stop="location('influence')"
             >Discover more ></v-btn
           >
         </div>
       </div>
-      <div class="ven--gate" :class="gate2 ? 'actv' : ''">
-        <div class="btn--contents" @mouseenter.stop="[(gate2 = !gate2), (gate1 = false)]">
+      <div
+        class="ven--gate"
+        :class="gate2 ? 'actv' : ''"
+        @mousemove.stop="handleVendorMove"
+      >        
+        <div class="btn--contents">
           <h2>vendor</h2>
           <v-btn class="loc--btn" @click.stop="location('vendor')">Discover more ></v-btn>
         </div>
@@ -18,6 +26,9 @@
     </div>
 
     <div class="login--cock" v-show="loginVisible == 'N'">
+     -->
+
+    <div class="login--cock">
       <!-- header -->
       <div class="login--header">
         <div class="login--header--l">
@@ -95,7 +106,8 @@
             <v-btn class="custom-btn text--btn">비밀번호 찾기</v-btn>
             <v-btn class="custom-btn text--btn" @click="location('join')">회원가입</v-btn>
           </div>
-          <div class="short--login--wrap" v-if="loginForm.loginType == 'influence'">
+          <!-- <div class="short--login--wrap" v-if="loginForm.loginType == 'influence'"> -->
+          <div class="short--login--wrap">
             <v-btn class="btn--google" @click.stop="onGoogleLogin"></v-btn>
             <v-btn class="btn--kakao" @click.stop="onKakaoLogin"></v-btn>
             <v-btn class="btn--naver" @click.stop="onNaverLogin"></v-btn>
@@ -156,6 +168,43 @@
   let listObj = ref({
     langTypeList: {},
   });
+
+  const handleInfluenceMove = (event) => {
+    const el = event.currentTarget;
+    const rect = el.getBoundingClientRect();
+    const mouseX = event.clientX;
+
+    // 요소 너비의 15%를 좌우 여백으로 계산 (중앙 70% 영역)
+    const margin = rect.width * 0.15;
+    const leftBound = rect.left + margin;
+    const rightBound = rect.right - margin;
+
+    if (mouseX >= leftBound && mouseX <= rightBound) {
+      gate1.value = true;
+      gate2.value = false;
+    } else {
+      gate1.value = false;
+    }
+  };
+
+  const handleVendorMove = (event) => {
+    const el = event.currentTarget;
+    const rect = el.getBoundingClientRect();
+    const mouseX = event.clientX;
+
+    // 요소 너비의 15%를 좌우 여백으로 계산 (중앙 70% 영역)
+    const margin = rect.width * 0.15;
+    const leftBound = rect.left + margin;
+    const rightBound = rect.right - margin;
+
+    if (mouseX >= leftBound && mouseX <= rightBound) {
+      gate2.value = true;
+      gate1.value = false;
+    } else {
+      gate2.value = false;
+    }
+  };
+
   // 로그인 정보
   const loginForm = ref({
     userId: "",
@@ -429,6 +478,7 @@
     onBeforeUnmount(() => window.removeEventListener("message", handleMessage));
   });
 
+  /*
   watch(
     () => route.query.type,
     (newType) => {
@@ -443,6 +493,7 @@
       immediate: true, // 컴포넌트가 마운트될 때 즉시 실행
     }
   );
+  */
 
   watchEffect(() => {
     // 감시하고자 하는 데이터를 해당 블럭내에서 사용하면 호출된다.