From 40407c14f389d7e80ae4f1f843dbe4b0f2d5f98e Mon Sep 17 00:00:00 2001
From: songc04 <songmhrm04@gmail.com>
Date: Fri, 17 Nov 2023 14:54:22 +0900
Subject: [PATCH] fix: type annotation

---
 src/components/organisms/LocalSelector.tsx | 107 ++++++++++-----------
 static/MapSVGData.ts                       |  32 +++++-
 2 files changed, 81 insertions(+), 58 deletions(-)

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 (
-    <svg
-      version="1.1"
-      id="Layer_1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      x="0px"
-      y="0px"
-      viewBox={MetroInfo[selected]?.viewBox || "0 0 509 716.1"}
-      xmlSpace="preserve"
-    >
-      <style type="text/css">
-        {`
+const LocalSelector = ({ selected, onClick = () => {} }: Props) => (
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox={MetroInfo[selected]?.viewBox || "0 0 509 716.1"}
+    xmlSpace="preserve"
+  >
+    <style type="text/css">
+      {`
           .local{
             fill: ${MetroInfo[selected]?.color || "#1c3f64"};
             stroke: #1c3f64;
@@ -35,41 +31,40 @@ const LocalSelector = ({ selected, onClick = () => {} }: Props) => {
             fill: #1c3f64;
           }
         `}
-      </style>
-      {MapSVG.map<ReactNode>(group =>
-        group.groupId === selected ? (
-          <g key={group.groupId}>
-            {group.component.map(shape => {
-              if (shape.type === `path`) {
-                return (
-                  <path
-                    key={shape.id}
-                    className="local"
-                    id={shape.id}
-                    d={shape.data}
-                    onClick={() => onClick(shape.id)}
-                  />
-                );
-              }
-              if (shape.type === `polygon`) {
-                return (
-                  <polygon
-                    key={shape.id}
-                    className="local"
-                    id={shape.id}
-                    points={shape.data}
-                    onClick={() => onClick(shape.id)}
-                  />
-                );
-              }
-              throw new Error(`${shape.id} is not path or polygon`);
-            })}
-          </g>
-        ) : (
-          <g key={group.groupId} />
-        ),
-      )}
-    </svg>
-  );
-};
+    </style>
+    {MapSVG.map<ReactNode>(group =>
+      group.groupId === selected ? (
+        <g key={group.groupId}>
+          {group.component.map(shape => {
+            if (shape.type === `path`) {
+              return (
+                <path
+                  key={shape.id}
+                  className="local"
+                  id={shape.id}
+                  d={shape.data}
+                  onClick={() => onClick(shape.id)}
+                />
+              );
+            }
+            if (shape.type === `polygon`) {
+              return (
+                <polygon
+                  key={shape.id}
+                  className="local"
+                  id={shape.id}
+                  points={shape.data}
+                  onClick={() => onClick(shape.id)}
+                />
+              );
+            }
+            throw new Error(`${shape.id} is not path or polygon`);
+          })}
+        </g>
+      ) : (
+        <g key={group.groupId} />
+      ),
+    )}
+  </svg>
+);
 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: `제주특별자치도`,