From a72b51ec5bdf1cfc186f33a5ba3593ade6d4fa6a Mon Sep 17 00:00:00 2001
From: withsang <jsa5115@naver.com>
Date: Wed, 22 Nov 2023 19:13:46 +0900
Subject: [PATCH] fix(layout): add max-width again

---
 index.html                                 |  6 ++++++
 src/components/organisms/LocalSelector.tsx |  4 ++--
 src/components/organisms/MetroSelector.tsx |  4 ++--
 src/components/templates/Layout.tsx        | 20 +++++++-------------
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 12e02b8..1cecebb 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,12 @@
       type="text/css"
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
     />
+    <link
+      href="
+https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css
+"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>뉴웨이즈 다양성 평가 리포트</title>
   </head>
diff --git a/src/components/organisms/LocalSelector.tsx b/src/components/organisms/LocalSelector.tsx
index a394ffe..a7798b5 100644
--- a/src/components/organisms/LocalSelector.tsx
+++ b/src/components/organisms/LocalSelector.tsx
@@ -30,7 +30,7 @@ const LocalSelector = ({ selected, onClick = () => {} }: Props) => (
           @media (max-width: 768px) {
             width: 80%;
           }
-          width: 30%;
+          width: 50%;
           height: 20pt;
           border-radius: 5pt;
           background-color: white;
@@ -58,7 +58,7 @@ const LocalSelector = ({ selected, onClick = () => {} }: Props) => (
         @media (max-width: 768px) {
           width: 80%;
         }
-        width: 30%;
+        width: 50%;
         .local {
           fill: ${MetroInfo[selected]?.color || "#4CC9F0"};
           stroke: #080808;
diff --git a/src/components/organisms/MetroSelector.tsx b/src/components/organisms/MetroSelector.tsx
index 0687072..3d9510e 100644
--- a/src/components/organisms/MetroSelector.tsx
+++ b/src/components/organisms/MetroSelector.tsx
@@ -31,7 +31,7 @@ const MetroSelector = ({ onClick = () => {} }: Props) => {
             @media (max-width: 768px) {
               width: 80%;
             }
-            width: 30%;
+            width: 50%;
             height: 20pt;
             border-radius: 5pt;
             background-color: white;
@@ -59,7 +59,7 @@ const MetroSelector = ({ onClick = () => {} }: Props) => {
           @media (max-width: 768px) {
             width: 80%;
           }
-          width: 30%;
+          width: 50%;
           .metro {
             -webkit-transition:
               fill 0.2s,
diff --git a/src/components/templates/Layout.tsx b/src/components/templates/Layout.tsx
index 2ec79bb..e3e1327 100644
--- a/src/components/templates/Layout.tsx
+++ b/src/components/templates/Layout.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Col, ConfigProvider, Layout, Row } from "antd";
+import { css } from "@emotion/react";
 import { Header, Footer } from "@/components/organisms";
 
 const { Content } = Layout;
@@ -29,21 +30,14 @@ const NewwaysLayout = ({ children }: Props) => (
     <Layout className="layout">
       <Header />
       <Row justify="center">
-        <Col span={22}>
+        {/* breakpoint: 768px */}
+        <Col span={22} md={11}>
           <Content
-            style={{ padding: "0", display: "flex", justifyContent: "center" }}
+            css={css`
+              padding: 0;
+            `}
           >
-            <div
-              className="site-layout-content"
-              style={{
-                background: "#00E9A1",
-                maxWidth: "800px",
-
-                // alignItems: "center",
-              }}
-            >
-              {children}
-            </div>
+            {children}
           </Content>
         </Col>
       </Row>