fix: #11 해결

NGuard-Security · Jan 19, 2024 · 6727b6b · 6727b6b
1 parent b8b1d2f
commit 6727b6b
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 36 deletions.
diff --git a/assets/styles/components/appHeader.scss b/assets/styles/components/appHeader.scss
@@ -10,20 +10,21 @@
 
 header {
   background: rgb(15, 16, 22);
-  height: 40px;
+  height: 36px;
 }
 
-@media (max-width: 660px) {
-  .headerContent {
-    padding: 0.8rem 1.2rem;
-  }
-
+@media (max-width: 768px) {
   .logoImg {
-    height: 36px !important;
+    height: 34px !important;
   }
 
+  .headerContent,
   header {
-    padding: 0.8rem 1.2rem;
+    padding: 5px 1rem;
+  }
+
+  .headerContent {
+    gap: 5px;
   }
 
   // .menuBtn {
@@ -55,7 +56,7 @@ header {
   }
 }
 
-@media (max-width: 660px) {
+@media (max-width: 768px) {
   .userBtn-wrap {
     position: static;
   }
@@ -72,28 +73,34 @@ header {
   }
 }
 
-@media (max-width: 768px) {
-  .headerNav .nav_item {
-    width: 100%;
-    height: 100%;
-    padding: 0.9rem 0 0.9rem 4rem !important;
-    margin: 0px 25px;
+.nav_item {
+  border-radius: 0.5rem;
+
+  @media (max-width: 768px) {
+    padding: 0.5rem;
+    font-size: 15px;
   }
+}
 
+@media (max-width: 768px) {
   .headerNav {
     background: rgba(15, 16, 22, 0.9);
     border-bottom: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: 0px 0px 20px 20px;
+
+    a {
+      width: 100%;
+      height: 100%;
+      padding: 0.9rem 0 0.9rem 4rem !important;
+      margin: 0px 25px;
+    }
   }
-}
 
-@media (max-width: 660px) {
 
-  //<모바일시> '헤더'와 '유저'의 (메뉴)의 패딩 통일
-  .headerNav .nav_item {
-    padding: 1.5rem 0 1.5rem 4rem !important;
-  }
 
+}
+
+@media (max-width: 768px) {
   .userMenu {
     border-radius: 20px;
   }
@@ -103,14 +110,12 @@ header {
   }
 }
 
-.nav_item,
 .dropdownMenu {
 
   //'헤더'와 '유저 드롭다운'의 (메뉴 아이템)의 호버시 배경 모양을 같게
-  @media (max-width: 660px) {
+  @media (max-width: 768px) {
     //<모바일시> '헤더'와 '유저 드롭다운'의 (메뉴 아이템)의 폰트 크기 같게
-    font-size: 18px;
-    border-radius: 15px;
+    // font-size: 18px;
   }
 
   &:hover {

diff --git a/assets/styles/components/appNavBar.scss b/assets/styles/components/appNavBar.scss
@@ -47,7 +47,7 @@
 
   @media (max-width: 768px) {
     width: 100%;
-    padding: 0.4rem 1rem;
+    padding: 6px 1rem;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
@@ -59,9 +59,9 @@
 
     .menuIcon {
       display: block;
-      width: 1.9rem !important;
-      height: 1.9rem !important;
-      padding: 0.375rem;
+      width: 1.75rem !important;
+      height: 1.75rem !important;
+      padding: 0.25rem;
 
       svg {
         width: 100%;
@@ -73,20 +73,23 @@
       margin-bottom: 0px !important;
       min-width: 0px;
       width: fit-content;
-      height: 45px;
+
+      &,
+      & .serverBtn {
+        height: 38px;
+      }
 
       .serverBtn {
-        padding: 6px;
+        padding: 3px 5px;
         max-width: 300px;
-        height: 100%;
 
         img {
           width: auto;
           height: 100%;
         }
 
         .serverBtn_name {
-          font-size: 1rem;
+          font-size: 15px;
         }
       }
 

diff --git a/components/AppHeader.vue b/components/AppHeader.vue
@@ -133,7 +133,7 @@ onMounted(async () => {
         <!-- 모바일 메뉴 버튼 -->
         <div
           @click="isShowMobileMenu = !isShowMobileMenu"
-          class="menuBtn md:hidden w-7 h-7 p-1.5 box-content fill-white cursor-pointer"
+          class="menuBtn md:hidden w-7 h-7 p-1 box-content fill-white cursor-pointer"
         >
           <SvgIcon v-if="!isShowMobileMenu" name="menu" />
           <SvgIcon v-else name="close" />

diff --git a/components/AppNavBar.vue b/components/AppNavBar.vue
@@ -66,7 +66,7 @@ onMounted(async () => {
             :class="{ on: isShowServerMenu }"
             class="serverBtn flex items-center px-2 py-2 w-full border border-slate-700/[.2] rounded-lg cursor-pointer"
           >
-            <div class="w-8 h-8 mr-2 rounded-lg overflow-hidden shrink-0">
+            <div class="w-7 h-7 mr-2 rounded-lg overflow-hidden shrink-0">
               <div v-if="!currentServerData"></div>
               <nuxt-img
                 v-else-if="currentServerData.icon"
@@ -82,7 +82,7 @@ onMounted(async () => {
             <span class="serverBtn_name mr-auto text-sm text-gray-300 text-ellipsis whitespace-nowrap overflow-hidden">
               {{ currentServerData?.name || '' }}
             </span>
-            <SvgIcon name="arrowDown" class="w-5 h-5" />
+            <SvgIcon name="arrowDown" class="w-4 h-4" />
           </div>
 
           <!-- 서버 선택 드롭다운의 메뉴 -->