From dbbdbdf3a883d298eb80f9a0852e14c50d7bb778 Mon Sep 17 00:00:00 2001
From: lavi27 <62757958+lavi27@users.noreply.github.com>
Date: Mon, 8 Jan 2024 12:16:55 +0900
Subject: [PATCH] :ambulance: hotfix: Fix mobile list touch issue (#6)

---
 pages/dashboard/invite.vue | 133 +++++++++++++++++++------------------
 pages/dashboard/verify.vue |  39 ++++++-----
 2 files changed, 90 insertions(+), 82 deletions(-)

diff --git a/pages/dashboard/invite.vue b/pages/dashboard/invite.vue
index c8184e0..28d6c8b 100644
--- a/pages/dashboard/invite.vue
+++ b/pages/dashboard/invite.vue
@@ -34,30 +34,33 @@
                 <!-- 보안 초대 방식 -->
                 {{ $t('invite.category1.type.title') }}
               </p>
-              <div
-                class="select select-l"
-                :class="{ active: select.method.isActive }"
-                @click="
-                  list.method.show = true
-                  select.method.isActive = true
-                "
-                v-click-outside="onClickOutside"
-              >
-                {{ list.method.list[select.method.index] }}
-              </div>
 
-              <ul class="list-l" v-if="list.method.show">
-                <li
-                  v-for="(name, index) in list.method.list"
-                  v-bind:key="index"
+              <div class="flex-col w-full" v-click-outside="onClickOutside">
+                <div
+                  class="select select-l"
+                  :class="{ active: select.method.isActive }"
                   @click="
-                    select.method.index = index
-                    select.method.isActive = false
+                    list.method.show = true
+                    select.method.isActive = true
                   "
                 >
-                  {{ name }}
-                </li>
-              </ul>
+                  {{ list.method.list[select.method.index] }}
+                </div>
+
+                <ul class="list-l" v-if="list.method.show">
+                  <li
+                    v-for="(name, index) in list.method.list"
+                    v-bind:key="index"
+                    @click="
+                      select.method.index = index
+                      select.method.isActive = false
+                      list.method.show = false
+                    "
+                  >
+                    {{ name }}
+                  </li>
+                </ul>
+              </div>
             </div>
 
             <div class="vert" v-if="switch_.invite">
@@ -82,49 +85,49 @@
         </div>
 
         <!-- <div class="mb-6"> -->
-          <!-- <h2> -->
-            <!-- 커스텀 초대링크 -->
-            <!-- {{ $t('invite.category2.title') }} -->
-          <!-- </h2> -->
-          <!-- <p> -->
-            <!-- 소유하고 계신 도메인에 NGuard 초대링크를 설정할 수 있습니다. -->
-            <!-- {{ $t('invite.category2.description') }} -->
-          <!-- </p> -->
-          <!-- <form> -->
-            <!-- <div> -->
-              <!-- <label> -->
-                <!-- 커스텀 초대링크 -->
-                <!-- {{ $t('invite.category2.toggle') }} -->
-              <!-- </label> -->
-              <!-- <div @click="inputSwitch('domain')" :class="{ switch_on: switch_.domain }" class="switch"></div> -->
-            <!-- </div> -->
-
-            <!-- <div class="vert" v-if="switch_.domain"> -->
-              <!-- <p> -->
-                <!-- 도메인 설정 -->
-                <!-- {{ $t('invite.category2.link') }} -->
-              <!-- </p> -->
-              <!-- <div class="flex items-center"> -->
-                <!-- <input -->
-                  <!-- class="input-m" -->
-                  <!-- id="inviteDomain_input" -->
-                  <!-- type="text" -->
-                  <!-- placeholder="도메인 입력" -->
-                  <!-- v-model="select.domain" -->
-                  <!-- v-bind:readonly="!isEnterprise" -->
-                  <!-- @click="clickCustomDomain()" -->
-                <!-- /> -->
-              <!-- </div> -->
-            <!-- </div> -->
-
-            <!-- <div class="flex" v-if="switch_.domain"> -->
-              <!-- <label> -->
-                <!-- SSL 설정 -->
-                <!-- {{ $t('invite.category2.ssl') }} -->
-              <!-- </label> -->
-              <!-- <div @click="inputSwitch('domain_ssl')" :class="{ switch_on: switch_.domain_ssl }" class="switch"></div> -->
-            <!-- </div> -->
-          <!-- </form> -->
+        <!-- <h2> -->
+        <!-- 커스텀 초대링크 -->
+        <!-- {{ $t('invite.category2.title') }} -->
+        <!-- </h2> -->
+        <!-- <p> -->
+        <!-- 소유하고 계신 도메인에 NGuard 초대링크를 설정할 수 있습니다. -->
+        <!-- {{ $t('invite.category2.description') }} -->
+        <!-- </p> -->
+        <!-- <form> -->
+        <!-- <div> -->
+        <!-- <label> -->
+        <!-- 커스텀 초대링크 -->
+        <!-- {{ $t('invite.category2.toggle') }} -->
+        <!-- </label> -->
+        <!-- <div @click="inputSwitch('domain')" :class="{ switch_on: switch_.domain }" class="switch"></div> -->
+        <!-- </div> -->
+
+        <!-- <div class="vert" v-if="switch_.domain"> -->
+        <!-- <p> -->
+        <!-- 도메인 설정 -->
+        <!-- {{ $t('invite.category2.link') }} -->
+        <!-- </p> -->
+        <!-- <div class="flex items-center"> -->
+        <!-- <input -->
+        <!-- class="input-m" -->
+        <!-- id="inviteDomain_input" -->
+        <!-- type="text" -->
+        <!-- placeholder="도메인 입력" -->
+        <!-- v-model="select.domain" -->
+        <!-- v-bind:readonly="!isEnterprise" -->
+        <!-- @click="clickCustomDomain()" -->
+        <!-- /> -->
+        <!-- </div> -->
+        <!-- </div> -->
+
+        <!-- <div class="flex" v-if="switch_.domain"> -->
+        <!-- <label> -->
+        <!-- SSL 설정 -->
+        <!-- {{ $t('invite.category2.ssl') }} -->
+        <!-- </label> -->
+        <!-- <div @click="inputSwitch('domain_ssl')" :class="{ switch_on: switch_.domain_ssl }" class="switch"></div> -->
+        <!-- </div> -->
+        <!-- </form> -->
         <!-- </div> -->
 
         <button class="btn-save" @click="checkSaveSettings()">
@@ -344,7 +347,7 @@ export default {
       const settings = (
         await this.$axios.$get('/dashboard/invite?id=' + this.$route.query.id, {
           headers: {
-            Authorization: "Bearer " + localStorage.getItem('access_token'),
+            Authorization: 'Bearer ' + localStorage.getItem('access_token'),
           },
         })
       ).data
@@ -439,7 +442,7 @@ export default {
           },
           {
             headers: {
-              Authorization: "Bearer " + localStorage.getItem('access_token'),
+              Authorization: 'Bearer ' + localStorage.getItem('access_token'),
             },
           },
         )
diff --git a/pages/dashboard/verify.vue b/pages/dashboard/verify.vue
index 12615e8..e81bfeb 100644
--- a/pages/dashboard/verify.vue
+++ b/pages/dashboard/verify.vue
@@ -44,21 +44,22 @@
               {{ $t('verify.category1.role') }}
               <!-- 인증 시 지급될 역할 -->
             </p>
-            <input
-              class="input-l"
-              id="role_input"
-              :value="input.role?.name"
-              @click="list.role.show = true"
-              readonly
-              v-click-outside="onClickOutside"
-              type="text"
-              :placeholder="$t('verify.category1.rolePlaceholder')"
-            />
-            <ul class="list-l" v-if="list.role.show">
-              <li v-for="(role, index) in list.role.list" @click="input.role = role" v-bind:key="index">
-                {{ role?.name }}
-              </li>
-            </ul>
+            <div class="flex-col" v-click-outside="onClickOutside">
+              <input
+                class="input-l"
+                id="role_input"
+                :value="input.role?.name"
+                @click="list.role.show = true"
+                readonly
+                type="text"
+                :placeholder="$t('verify.category1.rolePlaceholder')"
+              />
+              <ul class="list-l" v-if="list.role.show">
+                <li v-for="(role, index) in list.role.list" @click="onClickRole(role)" v-bind:key="index">
+                  {{ role?.name }}
+                </li>
+              </ul>
+            </div>
           </div>
         </form>
 
@@ -141,7 +142,7 @@ export default {
       const settings = (
         await this.$axios.$get('/dashboard/verify?id=' + this.$route.query.id, {
           headers: {
-            Authorization: "Bearer " + localStorage.getItem('access_token'),
+            Authorization: 'Bearer ' + localStorage.getItem('access_token'),
           },
         })
       ).data
@@ -182,6 +183,10 @@ export default {
     onClickOutside() {
       this.list.role.show = false
     },
+    onClickRole(roleName) {
+      this.input.role = roleName
+      this.list.role.show = false
+    },
     async saveSettings() {
       try {
         await this.$axios.$post(
@@ -192,7 +197,7 @@ export default {
           },
           {
             headers: {
-              Authorization: "Bearer " + localStorage.getItem('access_token'),
+              Authorization: 'Bearer ' + localStorage.getItem('access_token'),
             },
           },
         )