Merge pull request #58 from NewWays-TechForImpactKAIST/aju-nice

URL 필터링 / 각종 문제 해결

src/components/molecules/LocalSelector.tsx

@@ -3,6 +3,7 @@ import { type ReactNode, useEffect, useState } from "react";
 import { css } from "@emotion/react";
 import { axios, hexToRgb, majorBlend, rgbToHex } from "@/utils";
 import { Flex, Switch } from "antd";
+import { useSearchParams } from "react-router-dom";
 
 interface Props {
   selected: MetroID;
@@ -16,7 +17,8 @@ const LocalSelector = ({ selected, idMap, onClick = () => {} }: Props) => {
   const partyColorMap = new Map<string, Color>();
   const [coloring, setColoring] = useState<"none" | "party">("party");
   const [localPartyColor, setLocalPartyColor] = useState<Map<string, string>>();
-
+  const [searchParams] = useSearchParams();
+  const sgYear = searchParams.get("year") || "2022";
   const fetchPartyColor = async () => {
     await axios
       .get("localCouncil/partyInfo")
@@ -35,7 +37,9 @@ const LocalSelector = ({ selected, idMap, onClick = () => {} }: Props) => {
   const fetchPartyData = () => {
     idMap.get(selected)?.forEach((value, key) => {
       axios
-        .get(`localCouncil/chart-data/${value[0]}/${value[1]}?factor=party`)
+        .get(
+          `localCouncil/chart-data/${value[0]}/${value[1]}?factor=party&year=${sgYear}`,
+        )
         .then(response => {
           setLocalPartyColor(prev => {
             const data = response.data.data as {
@@ -73,7 +77,7 @@ const LocalSelector = ({ selected, idMap, onClick = () => {} }: Props) => {
   };
   useEffect(() => {
     fetchPartyColor().then(fetchPartyData);
-  }, []);
+  }, [searchParams.get("year")]);
   return (
     <Flex
       vertical

src/components/organisms/LocalCouncilReport.tsx

@@ -25,6 +25,7 @@ import {
   useLocalElectionYears,
   type ElectionYears,
 } from "@/utils";
+import { useSearchParams } from "react-router-dom";
 
 const { Title } = Typography;
 
@@ -77,7 +78,8 @@ const LocalCouncilReport = ({
 
   const [genderTextData, setGenderTextData] = useState<GenderTextData>();
   const [sgType, setSgType] = useState<"elected" | "candidate">("elected");
-  const [sgYear, setSgYear] = useState<number>(2022);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const sgYear = searchParams.get("year") || 2022;
 
   const [genderPieChartData, setGenderPieChartData] =
     useState<PieChartData[]>();
@@ -307,12 +309,13 @@ const LocalCouncilReport = ({
       >
         <DropdownSelector
           innerText="연도를 선택해주세요."
-          options={localElectionYears.map(
-            election => `${election.year}년 (제${election.ordinal}대)`,
-          )}
+          options={localElectionYears
+            .filter(election => election.year !== 2010)
+            .map(election => `${election.year}년 (제${election.ordinal}대)`)}
           onClick={key => {
             // key: "YYYY년 (제NN대)"
-            setSgYear(parseInt(key.split("년")[0]));
+            searchParams.set("year", key.split("년")[0]);
+            setSearchParams(searchParams);
           }}
         />
         <Switch

src/components/organisms/MetroCouncilReport.tsx

@@ -288,9 +288,9 @@ const MetroCouncilReport = ({ metroName, metroMap, onLoaded }: Props) => {
       >
         <DropdownSelector
           innerText="연도를 선택해주세요."
-          options={localElectionYears.map(
-            election => `${election.year}년 (제${election.ordinal}대)`,
-          )}
+          options={localElectionYears
+            .filter(election => election.year !== 2010)
+            .map(election => `${election.year}년 (제${election.ordinal}대)`)}
           onClick={key => {
             // key: "YYYY년 (제NN대)"
             setSgYear(parseInt(key.split("년")[0]));

src/components/organisms/NationalCouncilReport.tsx

@@ -288,9 +288,9 @@ const NationalCouncilReport = ({
       >
         <DropdownSelector
           innerText="연도를 선택해주세요."
-          options={nationalElectionYears.map(
-            election => `${election.year}년 (제${election.ordinal}대)`,
-          )}
+          options={nationalElectionYears
+            .filter(election => election.year !== 2008)
+            .map(election => `${election.year}년 (제${election.ordinal}대)`)}
           onClick={key => {
             // key: "YYYY년 (제NN대)"
             setSgYear(parseInt(key.split("년")[0]));

src/components/pages/MainPage.tsx

@@ -1,4 +1,4 @@
-import { useParams } from "react-router-dom";
+import { Navigate, useParams } from "react-router-dom";
 import { Divider } from "antd";
 import { Layout } from "@/components/templates";
 import { Card } from "@/components/atoms";
@@ -10,8 +10,54 @@ import {
   TabSelector,
 } from "@/components/organisms";
 
+const BANNED_METRO = ["제주특별자치도", "세종특별자치시"];
+
+const BANNED_LOCAL = ["군위군"];
+
+const METRO_NAMES: string[] = [
+  "제주특별자치도",
+  "경상남도",
+  "경상북도",
+  "전라남도",
+  "전라북도",
+  "충청남도",
+  "충청북도",
+  "강원도",
+  "경기도",
+  "세종특별자치시",
+  "울산광역시",
+  "대전광역시",
+  "광주광역시",
+  "대구광역시",
+  "부산광역시",
+  "인천광역시",
+  "서울특별시",
+  "",
+];
+
+const vaildateLocalAndMetroName = (
+  reportType: string,
+  metroName: string,
+  localName: string,
+) => {
+  if (
+    reportType === "localCouncil" &&
+    (BANNED_LOCAL.includes(localName) || BANNED_METRO.includes(metroName))
+  ) {
+    return false;
+  }
+  if (!METRO_NAMES.includes(metroName)) {
+    return false;
+  }
+
+  return true;
+};
+
 const MainPage = () => {
-  const { reportType = "" } = useParams();
+  const { reportType = "", metroName = "", localName = "" } = useParams();
+  if (!vaildateLocalAndMetroName(reportType, metroName, localName)) {
+    return <Navigate to="/localCouncil" replace />;
+  }
 
   return (
     <Layout>