design: Navigation grid 사용해서 정렬하도록 변경

src/components/commons/navigation/Navigation.styled.ts

@@ -2,22 +2,21 @@ import {
   IcHamburgar,
   IconArrowLeft,
   IconArrowRight,
+  IconDownload,
   IconLogo,
   IconXButton,
-  IconDownload,
 } from "@assets/svgs";
 import styled from "styled-components";
 
 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"]};