모바일 호환

src/components/base/VModal.vue

@@ -170,6 +170,23 @@ onUnmounted(() => {
   }
 
   &.is-full {
+    @media (hover: none) and (pointer: coarse) {
+      .modal-content {
+        width: 100%;
+        max-width: 100% !important;
+
+        .modal-card {
+          width: 100%;
+          .modal-card-body {
+            padding: 0px !important;
+          }
+        }
+      }
+
+      .form-layout {
+        max-width: 100% !important;
+      }
+    }
     .modal-content {
       width: 100%;
       max-width: 90%;

src/components/layouts/navbar/Navbar.vue

@@ -33,6 +33,26 @@ const isScrolling = computed(() => {
 </template>
 
 <style lang="scss">
+
+@media (hover: none) and (pointer: coarse) {
+  .company-nm {
+    display:none !important;
+  }
+
+  .right {
+    width: 17% !important;
+  }
+
+  .datatable-toolbar {
+    .button {
+      padding: 8px 12px !important;
+      span:nth-child(1) {
+        display:none;
+      }
+    }
+  }
+}
+
 .navbar-navbar {
   position: fixed;
   top: 0;
@@ -400,6 +420,7 @@ const isScrolling = computed(() => {
   }
 }
 
+
 /* ==========================================================================
 4. Webapp Navbar Dark mode
 ========================================================================== */
@@ -641,7 +662,7 @@ const isScrolling = computed(() => {
 
 a {
   &:hover {
-    background-color:white !important;
+    background-color:transparent !important;
   }
 }
 

src/components/pages/contract/ContractList.vue

@@ -128,7 +128,7 @@ watch(changePage, (newParams) => {
                     </template>
                   </VDatePicker>
                 </div>
-                <div style="transform: translateY(15px)">~</div>
+                <div class="mobile-hide" style="transform: translateY(15px)">~</div>
                 <div class="column is-6">
                   <VDatePicker
                     v-model.string="params.regEdt"
@@ -156,7 +156,7 @@ watch(changePage, (newParams) => {
           </VField>
         </div>
         <div class="column is-1" style="position:relative;">
-          <div style="padding-top:20px;">
+          <div style="padding-top:25px;">
             <VButtons>
               <VButton
                 color="primary"
@@ -241,6 +241,12 @@ watch(changePage, (newParams) => {
 </template>
 
 <style lang="scss">
+@media (width <= 767px) {
+  .mobile-hide {
+    display:none;
+  }
+}
+
 .is-navbar {
   .datatable-toolbar {
     padding-top: 30px;

src/components/pages/estimate/EstimateList.vue

@@ -107,7 +107,7 @@ watch(changePage, (newParams) => {
           </VField>
         </div>
         <div class="column is-1" style="position:relative;">
-          <div style="padding-top:20px;">
+          <div style="padding-top:25px;">
             <VButtons>
               <VButton
                 color="primary"

src/components/partials/layout/toolbar/ToolbarUserProfile.vue

@@ -100,7 +100,8 @@ function onRePassword() {
             @keydown.enter.prevent="toggle"
             @click="toggle"
           >
-            <VAvatar picture="/images/avatars/svg/person-2.svg" />
+            <VAvatar class="light-person" picture="/images/avatars/svg/person-2.svg" />
+            <VAvatar class="dark-person" picture="/images/avatars/svg/person-1.svg" />
           </a>
         </div>
         <div class="company-nm" style="color:var(--modal-text-reverse)">{{ biz.compNm }}</div>
@@ -396,6 +397,25 @@ function onRePassword() {
   </VDropdown>
 </template>
 
+<style lang="scss">
+@media (width <= 767px) {
+  .avatar {
+    width:30px !important;
+    height:30px !important;
+  }
+
+  .navbar-brand {
+    img {
+      transform: translateY(2px);
+    }
+  }
+
+  .page-title {
+    padding-left: 15px;
+  }
+}
+</style>
+
 <style scoped lang="scss">
 .profile-dropdown {
   > img {
@@ -453,8 +473,30 @@ function onRePassword() {
     }
   }
 }
+.light-person {
+  display:block;
+}
+.dark-person {
+  display:none;
+}
+
+@media screen and (width <= 1380) {
+  .light-person {
+    display:none;
+  }
+  .dark-person {
+    display:block;
+  }
+}
 
 .is-dark {
+  .light-person {
+    display:none;
+  }
+  .dark-person {
+    display:block;
+  }
+
   .profile-dropdown {
     .dropdown-content, :deep(.dropdown-content) {
       .dropdown-head {

src/layouts/navbar.vue

@@ -30,7 +30,7 @@ const links = ref<NavbarItem[]>([
 
     <template #logo>
       <RouterLink
-        to="/navbar/dashboards"
+        to="/navbar/layouts/contract-list"
       >
         <AnimatedLogo
           width="38px"

src/layouts/sidebar.vue

@@ -23,7 +23,7 @@ const links = ref<SidebarItem[]>([
           children: [
             {
               label: 'Personal V1',
-              to: '/sidebar/dashboards',
+              to: '/sidebar/layouts/contract-list',
               icon: 'lnil lnil-analytics-alt-1',
             },
             {

src/pages/auth/login.vue

@@ -45,7 +45,7 @@ const handleLogin = async () => {
       userSession.setUser(result)
       notyf.dismissAll()
       notyf.primary(`환영합니다. ${result.repNm}님`)
-      router.push('/navbar/dashboards')
+      router.push('/navbar/layouts/contract-list')
       isLoading.value = false
     }).catch((res) => {
       notyf.error(res.response._data.body)

src/pages/auth/signup.vue

@@ -1440,6 +1440,22 @@ useHead({
 }
 
 @media only screen and (width <= 767px) {
+  .signup-footer {
+    position:fixed;
+    bottom: 10px !important;
+    width: 50px;
+  }
+
+  .signup-nav {
+    background-color: white;
+  }
+
+  .is-dark {
+    .signup-nav {
+      background-color: color-mix(in oklab, var(--dark-sidebar), white 10%);
+    }
+  }
+
   .signup-steps {
     .steps-container {
       padding: 0 1rem;

src/pages/navbar/layouts/contract-list.vue

@@ -7,11 +7,11 @@ meta:
 
 const pageTitle = useVueroContext<string>('page-title')
 onMounted(() => {
-  pageTitle.value = '입찰신청'
+  pageTitle.value = '가격조사'
 })
 
 useHead({
-  title: '소액계약관리 - 입찰신청',
+  title: '소액계약관리 - 가격조사',
 })
 </script>
 

src/pages/navbar/layouts/est-list.vue

@@ -7,11 +7,11 @@ meta:
 
 const pageTitle = useVueroContext<string>('page-title')
 onMounted(() => {
-  pageTitle.value = '입찰내역'
+  pageTitle.value = '신청내역'
 })
 
 useHead({
-  title: '소액계약관리 - 입찰내역',
+  title: '소액계약관리 - 신청내역',
 })
 </script>
 

src/pages/sidebar/index.vue

@@ -2,7 +2,7 @@
 const router = useRouter()
 
 onMounted(() => {
-  router.push('/sidebar/dashboards')
+  router.push('/sidebar/layouts/contract-list')
 })
 </script>
 

src/plugins/session-check.ts

@@ -67,7 +67,7 @@ export default definePlugin(async ({ router, pinia, event }) => {
     }
     else {
       if (userSession.user !== undefined) {
-        router.replace('/navbar/dashboards')
+        router.replace('/navbar/layouts/contract-list')
       }
     }
   })

src/scss/components/_custom-contract.scss

@@ -12,6 +12,12 @@
           background-color: var(--primary);
           color: #fff !important;
         }
+
+        @media (width <= 767px) {
+          .label {
+            width: 100%;
+          }
+        }
         .control {
           padding: 10px 14px !important;
         }
@@ -131,6 +137,7 @@ a.mouse-pointer {
   label {
     color: var(--modal-text) !important;
     font-weight:bold !important;
+    flex-shrink: 0;
   }
   p {
     font-weight: lighter !important;