FIX: 화면이 작으면 홈 화면 메뉴 레이아웃이 깨지던 문제

BSSM-BSM · Mar 23, 2023 · 2935b4f · 2935b4f
1 parent 7709cb5
commit 2935b4f
Show file tree

Hide file tree

Showing 12 changed files with 14 additions and 31 deletions.
diff --git a/README_RESOURCES/10.png b/README_RESOURCES/10.png
diff --git a/README_RESOURCES/11.png b/README_RESOURCES/11.png
diff --git a/README_RESOURCES/12.png b/README_RESOURCES/12.png
diff --git a/README_RESOURCES/3.png b/README_RESOURCES/3.png
diff --git a/README_RESOURCES/4.png b/README_RESOURCES/4.png
diff --git a/README_RESOURCES/5.png b/README_RESOURCES/5.png
diff --git a/README_RESOURCES/6.png b/README_RESOURCES/6.png
diff --git a/README_RESOURCES/7.png b/README_RESOURCES/7.png
diff --git a/README_RESOURCES/8.png b/README_RESOURCES/8.png
diff --git a/README_RESOURCES/9.png b/README_RESOURCES/9.png
diff --git a/app/page.tsx b/app/page.tsx
@@ -7,6 +7,8 @@ import Link from 'next/link';
 import { headerOptionState, pageState } from '../store/common.store';
 import { MeisterHomeMenu } from '../components/home/meisterMenu';
 import { UserHomeMenu } from '../components/home/userMenu';
+import { Banner, BannerPos } from '../components/common/banner';
+import { BannerType } from '../types/banner.type';
 
 const Home = () => {
   const setHeaderOption = useSetRecoilState(headerOptionState);
@@ -19,6 +21,9 @@ const Home = () => {
 
   return (<>
     {/* <Notice /> */}
+    <>
+      <Banner position={BannerPos.TOP} type={BannerType.HORIZONTAL} />
+    </>
     <section className={styles.quick_menu_section}>
       <ul className={`${styles.quick_menu_list} button-wrap`}>
         <li>

diff --git a/styles/home.module.css b/styles/home.module.css
@@ -1,18 +1,19 @@
 .quick_menu_section {
   width: 100%;
-  height: 100%;
+  min-height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: .5rem;
+  padding: 1rem;
 }
 
 .quick_menu_list {
+  margin-top: 5rem;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   row-gap: 3rem;
-  column-gap: 5rem;
+  column-gap: 3rem;
   max-width: 100rem;
   width: 100%;
 }
@@ -92,13 +93,11 @@
 
 /* 가로 메뉴 */
 @media screen and (min-height: 0px) and (max-height: 600px) {
-  .quick_menu_section {
-    padding-top: 5rem;
-  }
 
   .quick_menu_list {
-    row-gap: 2rem;
-    column-gap: 3rem;
+    margin-top: 5rem;
+    row-gap: 1.5rem;
+    column-gap: 2rem;
   }
 
   .menu {
@@ -122,32 +121,11 @@
   }
 }
 
-@media screen and (min-height: 0px) and (max-height: 400px) {
-  .quick_menu_section {
-    justify-content: end;
-    padding: 1rem;
-  }
-
-  .quick_menu_list {
-    row-gap: 1.5rem;
-    column-gap: 2rem;
-  }
-
-  .menu {
-    padding: 1rem;
-  }
-}
-
 /* 세로 메뉴 */
 @media screen and (min-width: 0px) and (max-width: 980px) {
-  .quick_menu_list {
-    column-gap: 2rem;
-  }
-}
-
-@media screen and (min-width: 0px) and (max-width: 980px) and (min-height: 600px) {
 
   .quick_menu_list {
+    margin-top: 6rem;
     grid-template-columns: 1fr;
     row-gap: 1rem;
   }
@@ -181,4 +159,4 @@
   .main_content {
     font-size: 1.6rem !important;
   }
-}
+}