diff --git a/src/components/organisms/LocalSelector.tsx b/src/components/organisms/LocalSelector.tsx index 6238da0..af56e0f 100644 --- a/src/components/organisms/LocalSelector.tsx +++ b/src/components/organisms/LocalSelector.tsx @@ -1,28 +1,24 @@ -import { MapSVG, MetroInfo } from "@/../static/MapSVGData"; +import { MapSVG, type MetroID, MetroInfo } from "@/../static/MapSVGData"; import { type ReactNode } from "react"; interface Props { - selected: string; + selected: MetroID; onClick?: (local: string) => void; } -const LocalSelector = ({ selected, onClick = () => {} }: Props) => { - if (!(selected in MetroInfo)) { - throw new Error(`${selected} is not a metro`); - } - return ( - - + {MapSVG.map(group => + group.groupId === selected ? ( + + {group.component.map(shape => { + if (shape.type === `path`) { + return ( + onClick(shape.id)} + /> + ); + } + if (shape.type === `polygon`) { + return ( + onClick(shape.id)} + /> + ); + } + throw new Error(`${shape.id} is not path or polygon`); + })} + + ) : ( + + ), + )} + +); export default LocalSelector; diff --git a/static/MapSVGData.ts b/static/MapSVGData.ts index 261aab0..2b11c65 100644 --- a/static/MapSVGData.ts +++ b/static/MapSVGData.ts @@ -1,4 +1,25 @@ -export const MetroInfo = { +export type MetroID = + | "제주특별자치도" + | "경상남도" + | "경상북도" + | "전라남도" + | "전라북도" + | "충청남도" + | "충청북도" + | "강원도" + | "경기도" + | "세종특별자치시" + | "울산광역시" + | "대전광역시" + | "광주광역시" + | "대구광역시" + | "부산광역시" + | "인천광역시" + | "서울특별시"; + +export const MetroInfo: { + [id in MetroID]: { color: string; viewBox?: string }; +} = { 제주특별자치도: { color: "#4caff4", }, @@ -53,7 +74,14 @@ export const MetroInfo = { }, }; -export const MapSVG = [ +export const MapSVG: { + groupId: MetroID; + component: { + type: "path" | "polygon"; + id: string; + data: string; + }[]; +}[] = [ // id:`제주특별자치도`> { groupId: `제주특별자치도`,