From 37097cb5a6df6ab941333e1d1e132643f0c10f6e Mon Sep 17 00:00:00 2001
From: withsang <jsa5115@naver.com>
Date: Wed, 22 Nov 2023 16:58:23 +0900
Subject: [PATCH] refactor(format): format codes

---
 src/components/organisms/LocalSelector.tsx | 73 ++++++++++---------
 src/components/organisms/MetroSelector.tsx | 83 +++++++++++++---------
 src/components/pages/LocalCouncil.tsx      | 72 +++++++++----------
 static/MapSVGData.ts                       | 40 ++++++-----
 4 files changed, 148 insertions(+), 120 deletions(-)

diff --git a/src/components/organisms/LocalSelector.tsx b/src/components/organisms/LocalSelector.tsx
index a59c0fd..a394ffe 100644
--- a/src/components/organisms/LocalSelector.tsx
+++ b/src/components/organisms/LocalSelector.tsx
@@ -1,42 +1,50 @@
-import {MapSVG, type MetroID, MetroInfo} from "@/../static/MapSVGData";
-import {type ReactNode} from "react";
-import {Dropdown, Flex} from "antd";
-import {DownOutlined} from "@ant-design/icons";
-import {css} from "@emotion/react";
+import { MapSVG, type MetroID, MetroInfo } from "@/../static/MapSVGData";
+import { type ReactNode } from "react";
+import { Dropdown, Flex } from "antd";
+import { DownOutlined } from "@ant-design/icons";
+import { css } from "@emotion/react";
 
 interface Props {
   selected: MetroID;
   onClick?: (local: string) => void;
 }
 
-const LocalSelector = ({
-                         selected, onClick = () => {
-  }
-                       }: Props) => (
+const LocalSelector = ({ selected, onClick = () => {} }: Props) => (
   <Flex vertical align="center">
-    <Dropdown menu={{
-      items: [
-        {key: '1', label: 'One'},
-        {key: '2', label: 'Two'},
-        {type: 'divider'},
-        {key: '3', label: 'Three'},
-        {key: '4', label: 'Four'},
-      ]
-    }}>
-      <Flex justify="center" align="center" gap="small" css={css`
-        @media (max-width: 768px) {
-          width: 80%;
-        }
-        width: 30%;
-        height: 20pt;
-        border-radius: 5pt;
-        background-color: white;
-      `}>
+    <Dropdown
+      menu={{
+        items: [
+          { key: "1", label: "One" },
+          { key: "2", label: "Two" },
+          { type: "divider" },
+          { key: "3", label: "Three" },
+          { key: "4", label: "Four" },
+        ],
+      }}
+    >
+      <Flex
+        justify="center"
+        align="center"
+        gap="small"
+        css={css`
+          @media (max-width: 768px) {
+            width: 80%;
+          }
+          width: 30%;
+          height: 20pt;
+          border-radius: 5pt;
+          background-color: white;
+        `}
+      >
         기초 자치 단체 선택하기
-        <DownOutlined/>
+        <DownOutlined />
       </Flex>
     </Dropdown>
-    <div css={css`height: 15pt`}/>
+    <div
+      css={css`
+        height: 15pt;
+      `}
+    />
     <svg
       version="1.1"
       id="Layer_1"
@@ -55,8 +63,9 @@ const LocalSelector = ({
           fill: ${MetroInfo[selected]?.color || "#4CC9F0"};
           stroke: #080808;
           stroke-width: 1px;
-          -webkit-transition: fill 0.2s,
-          stroke 0.2s
+          -webkit-transition:
+            fill 0.2s,
+            stroke 0.2s;
         }
         .local:hover {
           fill: #080808;
@@ -93,7 +102,7 @@ const LocalSelector = ({
             })}
           </g>
         ) : (
-          <g key={group.groupId}/>
+          <g key={group.groupId} />
         ),
       )}
     </svg>
diff --git a/src/components/organisms/MetroSelector.tsx b/src/components/organisms/MetroSelector.tsx
index f7ac4ce..0687072 100644
--- a/src/components/organisms/MetroSelector.tsx
+++ b/src/components/organisms/MetroSelector.tsx
@@ -1,43 +1,51 @@
-import {MapSVG, MetroInfo} from "@/../static/MapSVGData";
-import {type ReactNode, useState} from "react";
-import {Dropdown, Flex} from "antd";
-import {css} from "@emotion/react";
-import {DownOutlined} from "@ant-design/icons";
+import { MapSVG, MetroInfo } from "@/../static/MapSVGData";
+import { type ReactNode, useState } from "react";
+import { Dropdown, Flex } from "antd";
+import { css } from "@emotion/react";
+import { DownOutlined } from "@ant-design/icons";
 
 interface Props {
   onClick?: (local: string) => void;
 }
 
-const MetroSelector = ({
-                         onClick = () => {
-                         }
-                       }: Props) => {
+const MetroSelector = ({ onClick = () => {} }: Props) => {
   const [hover, setHover] = useState<string>("");
   return (
     <Flex vertical align="center">
-      <Dropdown menu={{
-        items: [
-          {key: '1', label: 'One'},
-          {key: '2', label: 'Two'},
-          {type: 'divider'},
-          {key: '3', label: 'Three'},
-          {key: '4', label: 'Four'},
-        ]
-      }}>
-        <Flex justify="center" align="center" gap="small" css={css`
-          @media (max-width: 768px) {
-            width: 80%;
-          }
-          width: 30%;
-          height: 20pt;
-          border-radius: 5pt;
-          background-color: white;
-        `}>
+      <Dropdown
+        menu={{
+          items: [
+            { key: "1", label: "One" },
+            { key: "2", label: "Two" },
+            { type: "divider" },
+            { key: "3", label: "Three" },
+            { key: "4", label: "Four" },
+          ],
+        }}
+      >
+        <Flex
+          justify="center"
+          align="center"
+          gap="small"
+          css={css`
+            @media (max-width: 768px) {
+              width: 80%;
+            }
+            width: 30%;
+            height: 20pt;
+            border-radius: 5pt;
+            background-color: white;
+          `}
+        >
           광역 자치 단체 선택하기
-          <DownOutlined/>
+          <DownOutlined />
         </Flex>
       </Dropdown>
-      <div css={css`height: 15pt`}/>
+      <div
+        css={css`
+          height: 15pt;
+        `}
+      />
       <svg
         version="1.1"
         id="Layer_1"
@@ -53,8 +61,9 @@ const MetroSelector = ({
           }
           width: 30%;
           .metro {
-            -webkit-transition: fill 0.2s,
-            stroke 0.2s
+            -webkit-transition:
+              fill 0.2s,
+              stroke 0.2s;
           }
         `}
       >
@@ -64,8 +73,12 @@ const MetroSelector = ({
             id={group.groupId}
             className="metro"
             css={css`
-              fill: ${hover !== group.groupId ? MetroInfo[group.groupId].color : "#060606"};
-              stroke: ${hover !== group.groupId ? MetroInfo[group.groupId].color : "#060606"};
+              fill: ${hover !== group.groupId
+                ? MetroInfo[group.groupId].color
+                : "#060606"};
+              stroke: ${hover !== group.groupId
+                ? MetroInfo[group.groupId].color
+                : "#060606"};
             `}
             onMouseEnter={() => {
               setHover(group.groupId);
@@ -79,11 +92,11 @@ const MetroSelector = ({
           >
             {group.component.map(shape => {
               if (shape.type === `path`) {
-                return <path key={shape.id} id={shape.id} d={shape.data}/>;
+                return <path key={shape.id} id={shape.id} d={shape.data} />;
               }
               if (shape.type === `polygon`) {
                 return (
-                  <polygon key={shape.id} id={shape.id} points={shape.data}/>
+                  <polygon key={shape.id} id={shape.id} points={shape.data} />
                 );
               }
               throw new Error(`${shape.id} is not path or polygon`);
diff --git a/src/components/pages/LocalCouncil.tsx b/src/components/pages/LocalCouncil.tsx
index 8df015c..fce190f 100644
--- a/src/components/pages/LocalCouncil.tsx
+++ b/src/components/pages/LocalCouncil.tsx
@@ -1,41 +1,41 @@
-import React, {useState} from "react";
-import {Flex} from "antd";
-import {css} from "@emotion/react";
+import React, { useState } from "react";
+import { Flex } from "antd";
+import { css } from "@emotion/react";
 
-import {Layout} from "@/components/templates";
-import {LocalSelector, MetroSelector} from "@/components/organisms";
-import {type MetroID} from "static/MapSVGData";
-import {useNavigate} from "react-router-dom";
+import { Layout } from "@/components/templates";
+import { LocalSelector, MetroSelector } from "@/components/organisms";
+import { type MetroID } from "static/MapSVGData";
+import { useNavigate } from "react-router-dom";
 
 const LocalCouncil: React.FC = () => {
-    const [metroId, setMetroId] = useState<MetroID>();
-    const navigate = useNavigate();
-    return (
-        <Layout>
-            <Flex
-                vertical
-                gap={40}
-                css={css`
-                  margin: 40px 0 40px 0;
-                `}
-            >
-                {metroId ? (
-                    <LocalSelector
-                        selected={metroId}
-                        onClick={id => {
-                            navigate(`/localCouncilReport/${metroId}/${id}`);
-                        }}
-                    />
-                ) : (
-                    <MetroSelector
-                        onClick={id => {
-                            setMetroId(id as MetroID);
-                        }}
-                    />
-                )}
-            </Flex>
-        </Layout>
-    );
+  const [metroId, setMetroId] = useState<MetroID>();
+  const navigate = useNavigate();
+  return (
+    <Layout>
+      <Flex
+        vertical
+        gap={40}
+        css={css`
+          margin: 40px 0 40px 0;
+        `}
+      >
+        {metroId ? (
+          <LocalSelector
+            selected={metroId}
+            onClick={id => {
+              navigate(`/localCouncilReport/${metroId}/${id}`);
+            }}
+          />
+        ) : (
+          <MetroSelector
+            onClick={id => {
+              setMetroId(id as MetroID);
+            }}
+          />
+        )}
+      </Flex>
+    </Layout>
+  );
 };
 
-export default LocalCouncil;
\ No newline at end of file
+export default LocalCouncil;
diff --git a/static/MapSVGData.ts b/static/MapSVGData.ts
index 8c9382e..87b4287 100644
--- a/static/MapSVGData.ts
+++ b/static/MapSVGData.ts
@@ -17,74 +17,80 @@ export type MetroID =
   | "인천광역시"
   | "서울특별시";
 
-export const themeColors = ["#031273", "#0504AA", "#2337C6", "#4169E1", "#4CC9F0"]
+export const themeColors = [
+  "#031273",
+  "#0504AA",
+  "#2337C6",
+  "#4169E1",
+  "#4CC9F0",
+];
 
 export const MetroInfo: {
   [id in MetroID]: { color: string; viewBox?: string };
 } = {
   제주특별자치도: {
     color: themeColors[0],
-    viewBox: "355 600 150 150"
+    viewBox: "355 600 150 150",
   },
   경상남도: {
     color: themeColors[3],
-    viewBox: "200 400 250 250"
+    viewBox: "200 400 250 250",
   },
   경상북도: {
     color: themeColors[4],
-    viewBox: "220 200 300 300"
+    viewBox: "220 200 300 300",
   },
   전라남도: {
     color: themeColors[4],
-    viewBox: "0 450 280 280"
+    viewBox: "0 450 280 280",
   },
   전라북도: {
     color: themeColors[1],
-    viewBox: "65 350 220 220"
+    viewBox: "65 350 220 220",
   },
   충청남도: {
     color: themeColors[3],
-    viewBox: "30 220 220 220"
+    viewBox: "30 220 220 220",
   },
   충청북도: {
     color: themeColors[2],
-    viewBox: "150 190 240 240"
+    viewBox: "150 190 240 240",
   },
   강원도: {
     color: themeColors[3],
-    viewBox: "150 -30 320 320"
+    viewBox: "150 -30 320 320",
   },
   경기도: {
     color: themeColors[4],
-    viewBox: "50 50 240 240"
+    viewBox: "50 50 240 240",
   },
   세종특별자치시: {
     color: themeColors[1],
-    viewBox: "140 280 100 100"
+    viewBox: "140 280 100 100",
   },
   울산광역시: {
     color: themeColors[2],
-    viewBox: "390 435 100 100"
+    viewBox: "390 435 100 100",
   },
   대전광역시: {
     color: themeColors[4],
-    viewBox: "165 320 80 80"
+    viewBox: "165 320 80 80",
   },
   광주광역시: {
     color: themeColors[3],
-    viewBox: "95 505 80 80"
+    viewBox: "95 505 80 80",
   },
   대구광역시: {
     color: themeColors[1],
-    viewBox: "285 340 150 150"
+    viewBox: "285 340 150 150",
   },
   인천광역시: {
     color: themeColors[1],
-    viewBox: "-20 80 180 180"
+    viewBox: "-20 80 180 180",
   },
   부산광역시: {
     color: themeColors[0],
-    viewBox: "365 485 100 100"
+    viewBox: "365 485 100 100",
   },
   서울특별시: {
     color: themeColors[0],