feat: 메뉴 이미지 변경, 디자인 수정 (#33)

soyoung125 · Sep 20, 2023 · 3ac1450 · 3ac1450
1 parent cd3fd96
commit 3ac1450
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 7 deletions.
diff --git a/src/App.css b/src/App.css
@@ -18,9 +18,7 @@
 .blue_text {
   color: #223C6D;
   position: relative;
-}
 
-.center {
   margin-top: calc((100vh - 400px) / 2);
   margin-bottom: calc((100vh - 400px) / 2);
 }
@@ -62,4 +60,14 @@
   padding: 4px 8px;
   border-radius: 8px;
   background: rgba(255, 248, 223, 0.60);
+}
+
+.cocktail_menu {
+  width: 100%;
+}
+
+.center { 
+  height: calc(100vh - 92px);
+  display: flex;
+  align-items: center;
 }
diff --git a/src/assets/images/menu.jpg b/src/assets/images/menu.jpg
diff --git a/src/assets/images/menu.png b/src/assets/images/menu.png
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -8,7 +8,7 @@ function Home() {
 
     return (
         <>
-            <div className="blue_text center">
+            <div className="blue_text">
                 <div className="title">MBTI 밸런스 게임<div>-칵테일편-</div></div>
                 <img src={COCKTAILS.default} className="logo_cocktail" alt="cocktail logo" />
 

diff --git a/src/pages/Menu/index.tsx b/src/pages/Menu/index.tsx
@@ -1,10 +1,10 @@
-import menu from '../../assets/images/menu.png';
+import menu from '../../assets/images/menu.jpg';
 
 function Menu() {
     return (
-        <>
-            <img src={menu} className="logo_cocktail" alt="menu image" />
-        </>
+        <div className='center'>
+            <img src={menu} className="cocktail_menu" alt="menu image" />
+        </div>
     )
 }