From 9cba1687ed7c91542642eae4b6b477e938e708f4 Mon Sep 17 00:00:00 2001
From: jerry <becomegoodguy@gmail.com>
Date: Wed, 18 Dec 2024 17:22:34 +0900
Subject: [PATCH] =?UTF-8?q?design:=20Navigation=20grid=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=ED=95=B4=EC=84=9C=20=EC=A0=95=EB=A0=AC=ED=95=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../commons/navigation/Navigation.styled.ts   | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/commons/navigation/Navigation.styled.ts b/src/components/commons/navigation/Navigation.styled.ts
index c2d03ed3..b043476a 100644
--- a/src/components/commons/navigation/Navigation.styled.ts
+++ b/src/components/commons/navigation/Navigation.styled.ts
@@ -2,9 +2,9 @@ import {
   IcHamburgar,
   IconArrowLeft,
   IconArrowRight,
+  IconDownload,
   IconLogo,
   IconXButton,
-  IconDownload,
 } from "@assets/svgs";
 import styled from "styled-components";
 
@@ -12,12 +12,11 @@ export const NavigationWrapper = styled.div`
   position: fixed;
   z-index: 2;
 
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  justify-content: space-between;
-  width: 37.5rem;
-  height: 5.6rem;
-  padding: 1.2rem 1.6rem;
+  min-width: 37.5rem;
+  padding: 1.2rem 2.4rem;
 
   background-color: ${({ theme }) => theme.colors.gray_900};
 
@@ -34,6 +33,8 @@ export const Logo = styled(IconLogo)`
 `;
 
 export const NavigationTitle = styled.h1`
+  justify-self: center;
+
   ${({ theme }) => theme.fonts["body1-normal-semi"]};
   color: ${({ theme }) => theme.colors.white};
 `;
@@ -53,27 +54,26 @@ export const DownloadButton = styled(IconDownload)`
 `;
 
 export const NavigationLeftButton = styled(IconArrowLeft)`
-  box-sizing: content-box;
-  width: 2.4rem;
-  height: 2.4rem;
+  justify-self: start;
+  width: 3.2rem;
+  height: 3.2rem;
   padding: 0.4rem;
 
   cursor: pointer;
 `;
 
 export const NavigationRightButton = styled(IconArrowRight)`
-  box-sizing: content-box;
-  width: 2.4rem;
-  height: 2.4rem;
+  justify-self: end;
+  width: 3.2rem;
+  height: 3.2rem;
   padding: 0.4rem;
 
   cursor: pointer;
 `;
 
 export const NavigationXButton = styled(IconXButton)`
-  box-sizing: content-box;
-  width: 2.4rem;
-  height: 2.4rem;
+  width: 3.2rem;
+  height: 3.2rem;
   padding: 0.4rem;
 
   cursor: pointer;
@@ -82,6 +82,8 @@ export const NavigationXButton = styled(IconXButton)`
 // TODO: 뷰에 띄워보니 padding이 없어 스타일링 이상함 디자이너 분께 물어보기
 export const SubTextButton = styled.button`
   display: flex;
+  align-items: center;
+  justify-self: end;
   margin: 0 0.4rem 0 0;
 
   ${({ theme }) => theme.fonts["body1-normal-semi"]};