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: `제주특별자치도`,