모바일 호환

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 {