Add: React Map Selector

package.json

@@ -21,12 +21,15 @@
     "@ant-design/icons": "^5.2.6",
     "@ant-design/plots": "^1.2.5",
     "@emotion/react": "^11.11.1",
+    "@types/react-scroll": "^1.8.10",
     "antd": "^5.11.1",
     "axios": "^1.6.2",
     "immer": "^10.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0",
+    "react-scroll": "^1.9.0",
+    "recoil": "^0.7.7",
     "zustand": "^4.4.3"
   },
   "devDependencies": {

src/components/molecules/index.ts

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

src/components/organisms/LocalCouncilReport.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Flex, Typography } from "antd";
+import { css } from "@emotion/react";
+import { useParams } from "react-router-dom";
+import { AgeHistogram } from "@/components/organisms/Histogram";
+import { PieChart } from "@/components/organisms/PieChart";
+
+import {
+  sampleAgeHistogramData,
+  samplePartyPieData,
+  sampleSexPieData,
+} from "@/utils";
+
+const { Title } = Typography;
+
+const LocalCouncilReport: React.FC = () => {
+  const { metroId, localId } = useParams();
+
+  return (
+    <Flex
+      vertical
+      gap={40}
+      css={css`
+        margin: 40px 0 40px 0;
+      `}
+    >
+      <Title
+        level={1}
+      >{`MetroId(${metroId}) LocalId(${localId})의 지역의회 다양성 리포트`}</Title>
+      <Title level={2}>연령 다양성</Title>
+      <AgeHistogram data={sampleAgeHistogramData} />
+      <Title level={2}>정당 다양성</Title>
+      <PieChart
+        data={samplePartyPieData.data}
+        colors={samplePartyPieData.colors}
+      />
+      <Title level={2}>성별 다양성</Title>
+      <PieChart data={sampleSexPieData.data} colors={sampleSexPieData.colors} />
+    </Flex>
+  );
+};
+
+export default LocalCouncilReport;