광역 / 기초 전환

src/components/atoms/Card.tsx

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+import { Card as AntCard } from "antd";
+import { css } from "@emotion/react";
+import colors from "@/styles/colors";
+
+interface Props {
+  children: ReactNode;
+  round?: boolean;
+}
+
+const Card = ({ children, round = false }: Props) => (
+  <AntCard
+    bodyStyle={
+      {
+        // backgroundColor: colors.white,
+      }
+    }
+    css={css`
+      background-color: ${colors.white};
+      ${round ? "" : "border-radius: 0px;"}
+      border: 0px;
+    `}
+  >
+    {children}
+  </AntCard>
+);
+
+export default Card;

src/components/atoms/index.ts

@@ -0,0 +1 @@
+export { default as Card } from "./Card";

src/components/organisms/Footer.tsx

@@ -1,9 +1,9 @@
-import { Col, Flex, Layout, Row, Typography } from "antd";
+import { Col, ConfigProvider, Flex, Layout, Row, Typography } from "antd";
 import { css } from "@emotion/react";
-
 import { SNSHomepage, SNSInstagram, SNSLinkedin, SNSYoutube } from "@/assets";
+import colors from "@/styles/colors";
 
-const { Title, Paragraph, Text } = Typography;
+const { Title, Paragraph, Text, Link } = Typography;
 const { Footer } = Layout;
 
 const FooterTitle = () => (
@@ -22,7 +22,20 @@ const FooterDescription = () => (
     <Paragraph type="secondary">젊치인의 도전과 성장을 돕는 에이전시</Paragraph>
     <Text type="secondary">대표 박혜민</Text>
     <Text type="secondary">고유번호 767-82-00531</Text>
-    <Text type="secondary">문의 [email protected]</Text>
+    <Text type="secondary">
+      문의{" "}
+      <ConfigProvider
+        theme={{
+          token: {
+            colorInfo: colors.gray140,
+          },
+        }}
+      >
+        <Link underline href="mailto:[email protected]">
+          [email protected]
+        </Link>
+      </ConfigProvider>
+    </Text>
   </Flex>
 );
 

src/components/organisms/Histogram.tsx

@@ -72,6 +72,7 @@ export const Histogram = ({ data }: Props) => {
     data: histogramData,
     binField: "value",
     binWidth,
+    height: 250,
     colorField: "type",
     color: param => {
       const [binMin] = param.range as [number, number];

src/components/pages/LocalCouncilPage.tsx → src/components/organisms/LocalCouncilCard.tsx

@@ -1,10 +1,11 @@
 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 "@/components/templates";
+
 import { type MetroID } from "static/MapSVGData";
 import axios from "@/utils/axios";
+import MapSelector from "./MapSelector";
+import LocalCouncilReport from "./LocalCouncilReport";
 
 type RegionInfo = {
   id: number;
@@ -17,18 +18,21 @@ type LocalInfo = {
   id: number;
 };
 
-const LocalCouncil = () => {
+const LocalCouncilCard = () => {
   const { metroName, localName } = useParams();
   const [metroLocalMap, setMetroLocalMap] =
     useState<Map<MetroID, Map<string, [number, number]>>>();
+  const [isLoaded, setIsLoaded] = useState(false);
+
   useEffect(() => {
     if (!metroName || !localName) return;
     scroller.scrollTo("Report", {
       duration: 1000,
       delay: 50,
       smooth: "easeInOutQuart",
     });
-  }, [metroName, localName]);
+  }, [metroName, localName, isLoaded]);
+
   useEffect(() => {
     const idMap = new Map<MetroID, Map<string, [number, number]>>();
     axios.get("/localCouncil/regionInfo").then(response => {
@@ -50,19 +54,20 @@ const LocalCouncil = () => {
     });
   }, []);
   return metroLocalMap ? (
-    <Layout>
+    <>
       <MapSelector idMap={metroLocalMap} />
       <Element name="Report">
         {metroName && localName ? (
           <LocalCouncilReport
             metroName={metroName as MetroID}
             localName={localName}
             idMap={metroLocalMap}
+            onLoaded={() => setIsLoaded(true)}
           />
         ) : null}
       </Element>
-    </Layout>
+    </>
   ) : null;
 };
 
-export default LocalCouncil;
+export default LocalCouncilCard;

src/components/organisms/LocalCouncilReport.tsx

@@ -54,9 +54,15 @@ interface Props {
   metroName: MetroID;
   localName: string;
   idMap: Map<MetroID, Map<string, [number, number]>>;
+  onLoaded: () => void;
 }
 
-const LocalCouncilReport = ({ metroName, localName, idMap }: Props) => {
+const LocalCouncilReport = ({
+  metroName,
+  localName,
+  idMap,
+  onLoaded,
+}: Props) => {
   const defaultData: GenderTextData = {
     metroName,
     localName,
@@ -231,6 +237,7 @@ const LocalCouncilReport = ({ metroName, localName, idMap }: Props) => {
   useEffect(fetchGraphColors, []);
 
   useEffect(() => {
+    onLoaded();
     fetchTextData();
     fetchGraphData();
   }, [metroName, localName]);
@@ -243,9 +250,14 @@ const LocalCouncilReport = ({ metroName, localName, idMap }: Props) => {
         margin: 40px 0 40px 0;
       `}
     >
-      <Title level={1}>{`${metroName} ${localName}의 ${sgYear}년도 ${
+      <Title
+        level={2}
+        css={css`
+          word-break: keep-all;
+        `}
+      >{`${metroName} ${localName}의 ${sgYear}년도 ${
         sgType === "candidate" ? "후보자" : "당선인"
-      } 광역의회 다양성 리포트`}</Title>
+      } 지역의회 다양성 리포트`}</Title>
       <Flex
         css={css`
           flex-direction: row;
@@ -255,7 +267,7 @@ const LocalCouncilReport = ({ metroName, localName, idMap }: Props) => {
         `}
       >
         <DropdownSelector
-          innerText="연도를 선택하세요."
+          innerText="연도를 선택해주세요."
           options={["2022", "2020", "2016", "2014"]}
           onClick={key => {
             setSgYear(parseInt(key));
@@ -271,15 +283,15 @@ const LocalCouncilReport = ({ metroName, localName, idMap }: Props) => {
           defaultChecked
         />
       </Flex>
-      <Title level={2}>연령 다양성</Title>
+      <Title level={3}>연령 다양성</Title>
       {ageHistogramData ? <Histogram data={ageHistogramData} /> : null}
       <AgeText data={ageTextData} getNameFromId={getNameFromId} />
-      <Title level={2}>성별 다양성</Title>
+      <Title level={3}>성별 다양성</Title>
       {genderPieChartData && genderPieChartColorMap ? (
         <PieChart data={genderPieChartData} colorMap={genderPieChartColorMap} />
       ) : null}
       <GenderText data={defaultData} />
-      <Title level={2}>정당 다양성</Title>
+      <Title level={3}>정당 다양성</Title>
       {partyPieChartData && partyPieChartColorMap ? (
         <PieChart data={partyPieChartData} colorMap={partyPieChartColorMap} />
       ) : null}

src/components/organisms/MapSelector.tsx

@@ -25,7 +25,7 @@ const MapSelector = ({ idMap, type = "local" }: Props) => {
       align="center"
       gap={40}
       css={css`
-        margin: 40px 0 40px 0;
+        margin: 0 0 40px 0;
       `}
     >
       {metroName && type === "local" ? (
@@ -43,7 +43,7 @@ const MapSelector = ({ idMap, type = "local" }: Props) => {
                   {
                     title: (
                       // eslint-disable-next-line jsx-a11y/anchor-is-valid
-                      <a>뉴웨이즈 다양성 리포트</a>
+                      <a>지역의회 다양성 리포트</a>
                     ),
                     onClick: () => navigate(`/localCouncil`),
                   },
@@ -73,7 +73,7 @@ const MapSelector = ({ idMap, type = "local" }: Props) => {
             `}
           >
             <DropdownSelector
-              innerText="기초 의회를 선택하세요."
+              innerText="시/군/구를 선택해주세요."
               options={[...(idMap.get(metroName as MetroID)?.keys() || [])]}
               onClick={local => {
                 const idData = idMap.get(metroName as MetroID)?.get(local);
@@ -112,7 +112,7 @@ const MapSelector = ({ idMap, type = "local" }: Props) => {
         <>
           {" "}
           <DropdownSelector
-            innerText="광역 의회를 선택하세요."
+            innerText="광역시/도를 선택해주세요."
             options={[...idMap.keys()]}
             onClick={newMetroName =>
               type === "local"

src/components/pages/MetroCouncilPage.tsx → src/components/organisms/MetroCouncilCard.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
-import { MapSelector, MetroCouncilReport } from "@/components/organisms";
 import { useParams } from "react-router-dom";
 import { Element, scroller } from "react-scroll";
-import { Layout } from "@/components/templates";
+
 import { type MetroID } from "static/MapSVGData";
 import axios from "@/utils/axios";
+import MapSelector from "./MapSelector";
+import MetroCouncilReport from "./MetroCouncilReport";
 
 type RegionInfo = {
   id: number;
@@ -17,19 +18,21 @@ type LocalInfo = {
   id: number;
 };
 
-const MetroCouncilPage = () => {
+const MetroCouncilCard = () => {
   const { metroName } = useParams();
   const [metroLocalMap, setMetroLocalMap] =
     useState<Map<MetroID, Map<string, [number, number]>>>();
   const [metroMap, setMetroMap] = useState<Map<MetroID, number>>();
+  const [isLoaded, setIsLoaded] = useState(false);
+
   useEffect(() => {
     if (!metroName) return;
     scroller.scrollTo("Report", {
       duration: 1000,
       delay: 50,
       smooth: "easeInOutQuart",
     });
-  }, [metroName]);
+  }, [metroName, isLoaded]);
   useEffect(() => {
     const idMap = new Map<MetroID, Map<string, [number, number]>>();
     const metroAPIMap = new Map<MetroID, number>();
@@ -54,19 +57,20 @@ const MetroCouncilPage = () => {
     });
   }, []);
   return metroLocalMap ? (
-    <Layout>
+    <>
       <MapSelector idMap={metroLocalMap} type="metro" />
       <Element name="Report">
         {metroName ? (
           <MetroCouncilReport
             metroName={metroName as MetroID}
             metroMap={metroMap}
             idMap={metroLocalMap}
+            onLoaded={() => setIsLoaded(true)}
           />
         ) : null}
       </Element>
-    </Layout>
+    </>
   ) : null;
 };
 
-export default MetroCouncilPage;
+export default MetroCouncilCard;

src/components/organisms/MetroCouncilReport.tsx

@@ -40,9 +40,15 @@ interface Props {
   metroName: MetroID;
   idMap: Map<MetroID, Map<string, [number, number]>>;
   metroMap: Map<MetroID, number> | undefined;
+  onLoaded: () => void;
 }
 
-const MetroCouncilReport = ({ metroName, idMap, metroMap }: Props) => {
+const MetroCouncilReport = ({
+  metroName,
+  idMap,
+  metroMap,
+  onLoaded,
+}: Props) => {
   const defaultData: GenderTextData = {
     metroName,
     now: {
@@ -179,6 +185,7 @@ const MetroCouncilReport = ({ metroName, idMap, metroMap }: Props) => {
   useEffect(fetchGraphColors, []);
 
   useEffect(() => {
+    onLoaded();
     fetchTextData();
     fetchGraphData();
   }, [metroName]);
@@ -191,7 +198,12 @@ const MetroCouncilReport = ({ metroName, idMap, metroMap }: Props) => {
         margin: 40px 0 40px 0;
       `}
     >
-      <Title level={1}>{`${metroName}의 ${sgYear}년도 ${
+      <Title
+        level={2}
+        css={css`
+          word-break: keep-all;
+        `}
+      >{`${metroName}의 ${sgYear}년도 ${
         sgType === "candidate" ? "후보자" : "당선인"
       } 광역의회 다양성 리포트`}</Title>
       <Flex
@@ -203,7 +215,7 @@ const MetroCouncilReport = ({ metroName, idMap, metroMap }: Props) => {
         `}
       >
         <DropdownSelector
-          innerText="연도를 선택하세요."
+          innerText="연도를 선택해주세요."
           options={["2022", "2020", "2016", "2014"]}
           onClick={key => {
             setSgYear(parseInt(key));
@@ -219,15 +231,15 @@ const MetroCouncilReport = ({ metroName, idMap, metroMap }: Props) => {
           defaultChecked
         />
       </Flex>
-      <Title level={2}>연령 다양성</Title>
+      <Title level={3}>연령 다양성</Title>
       {/* <Histogram data={sampleAgeHistogramData} /> */}
       <AgeText data={ageTextData} getNameFromId={getNameFromId} />
-      <Title level={2}>성별 다양성</Title>
+      <Title level={3}>성별 다양성</Title>
       {genderPieChartData && genderPieChartColorMap ? (
         <PieChart data={genderPieChartData} colorMap={genderPieChartColorMap} />
       ) : null}
       <GenderText data={defaultData} />
-      <Title level={2}>정당 다양성</Title>
+      <Title level={3}>정당 다양성</Title>
       {partyPieChartData && partyPieChartColorMap ? (
         <PieChart data={partyPieChartData} colorMap={partyPieChartColorMap} />
       ) : null}

src/components/organisms/PieChart.tsx

@@ -16,6 +16,7 @@ export const PieChart = ({ data, colorMap }: Props) => {
     appendPadding: 10,
     data,
     angleField: "value",
+    height: 250,
     radius: 0.6,
     label: {
       type: "outer",