Merge remote-tracking branch 'origin/main' into 14-router-consumer

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/[email protected]/reset.min.css
+"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>뉴웨이즈 다양성 평가 리포트</title>
   </head>

src/components/molecules/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;

src/components/molecules/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,

src/components/molecules/index.ts

@@ -1,2 +1,2 @@
-export { default as MetroSelector } from "../molecules/MetroSelector";
-export { default as LocalSelector } from "../molecules/LocalSelector";
+export { default as MetroSelector } from "./MetroSelector";
+export { default as LocalSelector } from "./LocalSelector";

src/components/organisms/LocalCouncilReport.tsx

@@ -2,12 +2,9 @@ import React from "react";
 import { Flex, Typography } from "antd";
 import { css } from "@emotion/react";
 import { useParams } from "react-router-dom";
-import {
-  AgeHistogram,
-  PieChart,
-  // type HistogramData,
-  // type PieChartData,
-} from "@/components/organisms";
+import { AgeHistogram } from "@/components/organisms/Histogram";
+import { PieChart } from "@/components/organisms/PieChart";
+
 import {
   sampleAgeHistogramData,
   samplePartyPieData,

src/components/organisms/MapSelector.tsx

@@ -5,19 +5,19 @@ import { LocalSelector, MetroSelector } from "@/components/molecules";
 import { type MetroID } from "static/MapSVGData";
 import { useNavigate, useParams } from "react-router-dom";
 
-const LocalCouncil = ({
-  idMap,
-}: {
+interface Props {
   idMap: Map<MetroID, Map<string, [number, number]>>;
-}) => {
+}
+
+const LocalCouncil = ({ idMap }: Props) => {
   const [metroId, setMetroId] = useState<MetroID>();
   const { metroId: metroParam } = useParams();
   const navigate = useNavigate();
   useEffect(() => {
     if (metroParam) {
-      for (let [key, value] of idMap.entries()) {
+      for (const [key, value] of idMap.entries()) {
         if (value) {
-          if (value.values().next().value[0] == metroParam) {
+          if (value.values().next().value[0] === metroParam) {
             setMetroId(key as MetroID);
             break;
           }

src/components/pages/LocalCouncil.tsx

@@ -2,8 +2,8 @@ import { useEffect, useState } from "react";
 import { MapSelector, LocalCouncilReport } from "@/components/organisms";
 import { useParams } from "react-router-dom";
 import { Element, scroller } from "react-scroll";
-import { Layout } from "../templates";
-import { MetroID } from "static/MapSVGData";
+import { Layout } from "@/components/templates";
+import { type MetroID } from "static/MapSVGData";
 import axios from "@/utils/axios";
 
 type RegionInfo = {
@@ -17,7 +17,7 @@ type LocalInfo = {
   id: number;
 };
 
-export default function LocalCouncil() {
+const LocalCouncil = () => {
   const { metroId, localId } = useParams();
   const [metroLocalMap, setMetroLocalMap] =
     useState<Map<MetroID, Map<string, [number, number]>>>();
@@ -53,10 +53,10 @@ export default function LocalCouncil() {
     <Layout>
       <MapSelector idMap={metroLocalMap} />
       <Element name="Report">
-        {metroId && localId ? <LocalCouncilReport /> : <></>}
+        {metroId && localId ? <LocalCouncilReport /> : null}
       </Element>
     </Layout>
-  ) : (
-    <></>
-  );
-}
+  ) : null;
+};
+
+export default LocalCouncil;

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>