diff --git a/src/components/molecules/LocalSelector.tsx b/src/components/molecules/LocalSelector.tsx index aac9b6b..9ed9f93 100644 --- a/src/components/molecules/LocalSelector.tsx +++ b/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(); const [coloring, setColoring] = useState<"none" | "party">("party"); const [localPartyColor, setLocalPartyColor] = useState>(); - + 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 ( (); const [sgType, setSgType] = useState<"elected" | "candidate">("elected"); - const [sgYear, setSgYear] = useState(2022); + const [searchParams, setSearchParams] = useSearchParams(); + const sgYear = searchParams.get("year") || 2022; const [genderPieChartData, setGenderPieChartData] = useState(); @@ -307,12 +309,13 @@ const LocalCouncilReport = ({ > `${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); }} /> { > `${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])); diff --git a/src/components/organisms/NationalCouncilReport.tsx b/src/components/organisms/NationalCouncilReport.tsx index 61c2b2c..b66204a 100644 --- a/src/components/organisms/NationalCouncilReport.tsx +++ b/src/components/organisms/NationalCouncilReport.tsx @@ -288,9 +288,9 @@ const NationalCouncilReport = ({ > `${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])); diff --git a/src/components/pages/MainPage.tsx b/src/components/pages/MainPage.tsx index 6eb2e3c..fb919c3 100644 --- a/src/components/pages/MainPage.tsx +++ b/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 ; + } return (