From d32279bcb05ecdebfb13da9f60cad3c5621b7efe Mon Sep 17 00:00:00 2001
From: songc04 <songmhrm04@gmail.com>
Date: Wed, 22 Nov 2023 11:36:05 +0900
Subject: [PATCH] feat: mobile responsive & dropdown & refactor

---
 package.json                               |   1 +
 pnpm-lock.yaml                             | 196 ++++++++++-----------
 src/components/organisms/LocalSelector.tsx | 178 +++++++++----------
 src/components/organisms/MetroSelector.tsx | 160 +++++++++--------
 4 files changed, 276 insertions(+), 259 deletions(-)

diff --git a/package.json b/package.json
index 9fe55d5..5990681 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@ant-design/charts": "^1.4.2",
+    "@ant-design/icons": "^5.2.6",
     "@ant-design/plots": "^1.2.5",
     "@emotion/react": "^11.11.1",
     "antd": "^5.11.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eef0c74..6d84ce7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,13 +1,12 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
   '@ant-design/charts':
     specifier: ^1.4.2
-    version: 1.4.2(@ant-design/icons@4.8.1)(antd@5.11.1)(classnames@2.3.2)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(reflect-metadata@0.1.13)
+    version: 1.4.2(@ant-design/icons@5.2.6)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0)
+  '@ant-design/icons':
+    specifier: ^5.2.6
+    version: 5.2.6(react-dom@18.2.0)(react@18.2.0)
   '@ant-design/plots':
     specifier: ^1.2.5
     version: 1.2.5(react-dom@18.2.0)(react@18.2.0)
@@ -114,7 +113,7 @@ packages:
       '@jridgewell/trace-mapping': 0.3.19
     dev: true
 
-  /@ant-design/charts@1.4.2(@ant-design/icons@4.8.1)(antd@5.11.1)(classnames@2.3.2)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(reflect-metadata@0.1.13):
+  /@ant-design/charts@1.4.2(@ant-design/icons@5.2.6)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-BcVx6AAnwxSdzAVUZReSuvUVtnT5AkJivq3wmcYj17scll26HHficg35yimGskAj3Gu1upYjBQBz6Tk7GEMJsQ==}
     peerDependencies:
       '@ant-design/icons': ^4.6.0
@@ -123,19 +122,17 @@ packages:
       react: '>=16.8.4'
       react-dom: '>=16.8.4'
     dependencies:
-      '@ant-design/flowchart': 1.2.2(@ant-design/icons@4.8.1)(antd@5.11.1)(classnames@2.3.2)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(reflect-metadata@0.1.13)
+      '@ant-design/flowchart': 1.2.2(@ant-design/icons@5.2.6)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/graphs': 1.4.0(react-dom@18.2.0)(react@18.2.0)
-      '@ant-design/icons': 4.8.1(react-dom@18.2.0)(react@18.2.0)
+      '@ant-design/icons': 5.2.6(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/maps': 1.0.7(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/plots': 1.2.5(react-dom@18.2.0)(react@18.2.0)
       antd: 5.11.1(react-dom@18.2.0)(react@18.2.0)
-      lodash: 4.17.21
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     transitivePeerDependencies:
       - bufferutil
       - classnames
-      - reflect-metadata
       - utf-8-validate
     dev: false
 
@@ -145,12 +142,6 @@ packages:
       tinycolor2: 1.6.0
     dev: false
 
-  /@ant-design/colors@6.0.0:
-    resolution: {integrity: sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==}
-    dependencies:
-      '@ctrl/tinycolor': 3.6.1
-    dev: false
-
   /@ant-design/colors@7.0.0:
     resolution: {integrity: sha512-iVm/9PfGCbC0dSMBrz7oiEXZaaGH7ceU40OJEfKmyuzR9R5CRimJYPlRiFtMQGQcbNMea/ePcoIebi4ASGYXtg==}
     dependencies:
@@ -163,7 +154,7 @@ packages:
       react: '>=16.0.0'
       react-dom: '>=16.0.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       '@emotion/hash': 0.8.0
       '@emotion/unitless': 0.7.5
       classnames: 2.3.2
@@ -174,7 +165,7 @@ packages:
       stylis: 4.2.0
     dev: false
 
-  /@ant-design/flowchart@1.2.2(@ant-design/icons@4.8.1)(antd@5.11.1)(classnames@2.3.2)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(reflect-metadata@0.1.13):
+  /@ant-design/flowchart@1.2.2(@ant-design/icons@5.2.6)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-bzHZ81qqHjWIrXcCMInDB6eMTzbswaVCOAdUTCQJ+B45aybkVsU9LMCKquyOwRM7U7PWNfPC9S/lAlx2i2BvBQ==}
     peerDependencies:
       '@ant-design/icons': ^4.6.0
@@ -183,21 +174,19 @@ packages:
       react: '>=16.8.4'
       react-dom: '>=16.8.4'
     dependencies:
-      '@ant-design/icons': 4.8.1(react-dom@18.2.0)(react@18.2.0)
+      '@ant-design/icons': 5.2.6(react-dom@18.2.0)(react@18.2.0)
       '@antv/layout': 0.1.31
       '@antv/x6': 1.35.0
       '@antv/x6-react-components': 1.1.20(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0)
       '@antv/x6-react-shape': 1.6.5(@antv/x6@1.35.0)(react-dom@18.2.0)(react@18.2.0)
-      '@antv/xflow': 1.0.55(@ant-design/icons@4.8.1)(antd@5.11.1)(classnames@2.3.2)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(reflect-metadata@0.1.13)
+      '@antv/xflow': 1.0.55(@ant-design/icons@5.2.6)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0)
       antd: 5.11.1(react-dom@18.2.0)(react@18.2.0)
-      lodash: 4.17.21
       react: 18.2.0
       react-color: 2.17.3(react@18.2.0)
       react-dom: 18.2.0(react@18.2.0)
       react-use: 17.3.1(react-dom@18.2.0)(react@18.2.0)
     transitivePeerDependencies:
       - classnames
-      - reflect-metadata
     dev: false
 
   /@ant-design/graphs@1.4.0(react-dom@18.2.0)(react@18.2.0):
@@ -220,23 +209,6 @@ packages:
     resolution: {integrity: sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g==}
     dev: false
 
-  /@ant-design/icons@4.8.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-JRAuiqllnMsiZIO8OvBOeFconprC3cnMpJ9MvXrHh+H5co9rlg8/aSHQfLf5jKKe18lUgRaIwC2pz8YxH9VuCA==}
-    engines: {node: '>=8'}
-    peerDependencies:
-      react: '>=16.0.0'
-      react-dom: '>=16.0.0'
-    dependencies:
-      '@ant-design/colors': 6.0.0
-      '@ant-design/icons-svg': 4.3.1
-      '@babel/runtime': 7.23.2
-      classnames: 2.3.2
-      lodash: 4.17.21
-      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /@ant-design/icons@5.2.6(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw==}
     engines: {node: '>=8'}
@@ -246,7 +218,7 @@ packages:
     dependencies:
       '@ant-design/colors': 7.0.0
       '@ant-design/icons-svg': 4.3.1
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -288,7 +260,7 @@ packages:
     peerDependencies:
       react: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       json2mq: 0.2.0
       react: 18.2.0
@@ -912,7 +884,7 @@ packages:
       utility-types: 3.10.0
     dev: false
 
-  /@antv/xflow-core@1.0.55(@ant-design/icons@4.8.1)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0):
+  /@antv/xflow-core@1.0.55(@ant-design/icons@5.2.6)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-FhjTstp/ZdO6mj8ERARJ6M9PWgikXvOpWwMTLCjc+i8vS4O3t4XL/fIu16MqJNuNdqfETcjJluHd06c32MTB/w==}
     peerDependencies:
       '@ant-design/icons': ^4.6.0
@@ -924,7 +896,7 @@ packages:
       react: ^16.8.0  || ^17.0.0
       react-dom: ^16.8.0  || ^17.0.0
     dependencies:
-      '@ant-design/icons': 4.8.1(react-dom@18.2.0)(react@18.2.0)
+      '@ant-design/icons': 5.2.6(react-dom@18.2.0)(react@18.2.0)
       '@antv/x6': 1.35.0
       '@antv/x6-react-components': 1.1.20(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0)
       '@antv/x6-react-shape': 1.6.5(@antv/x6@1.35.0)(react-dom@18.2.0)(react@18.2.0)
@@ -932,7 +904,6 @@ packages:
       antd: 5.11.1(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.3.2
       immer: 9.0.21
-      lodash: 4.17.21
       mana-common: 0.3.2
       mana-syringe: 0.2.2
       react: 18.2.0
@@ -941,7 +912,7 @@ packages:
       rxjs: 6.6.7
     dev: false
 
-  /@antv/xflow-extension@1.0.55(@ant-design/icons@4.8.1)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(classnames@2.3.2)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(reflect-metadata@0.1.13):
+  /@antv/xflow-extension@1.0.55(@ant-design/icons@5.2.6)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-iHRfO/ae4/9xvC5xVFmA9eIFg813DQa06hTgTdxLlt0Aojnfa5VnsGrIrPQoDDQovCXG8SavMDlnLZUpa491GQ==}
     peerDependencies:
       '@ant-design/icons': ^4.6.0
@@ -952,16 +923,14 @@ packages:
       classnames: ^2.2.6
       react: ^16.8.0  || ^17.0.0
       react-dom: ^16.8.0  || ^17.0.0
-      reflect-metadata: ^0.1.13
     dependencies:
-      '@ant-design/icons': 4.8.1(react-dom@18.2.0)(react@18.2.0)
+      '@ant-design/icons': 5.2.6(react-dom@18.2.0)(react@18.2.0)
       '@antv/x6': 1.35.0
       '@antv/x6-react-components': 1.1.20(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0)
       '@antv/x6-react-shape': 1.6.5(@antv/x6@1.35.0)(react-dom@18.2.0)(react@18.2.0)
-      '@antv/xflow-core': 1.0.55(@ant-design/icons@4.8.1)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)
+      '@antv/xflow-core': 1.0.55(@ant-design/icons@5.2.6)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0)
       '@antv/xflow-hook': 1.0.55
       antd: 5.11.1(react-dom@18.2.0)(react@18.2.0)
-      classnames: 2.3.2
       mana-syringe: 0.2.2
       moment: 2.29.4
       rc-field-form: 1.40.0(react-dom@18.2.0)(react@18.2.0)
@@ -979,7 +948,7 @@ packages:
       toposort: 2.0.2
     dev: false
 
-  /@antv/xflow@1.0.55(@ant-design/icons@4.8.1)(antd@5.11.1)(classnames@2.3.2)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(reflect-metadata@0.1.13):
+  /@antv/xflow@1.0.55(@ant-design/icons@5.2.6)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-1LRFZsDZDVuRwEYD0xFt7SGCbHducgXQ4GgPOzmaCMA5FMbQfZVpXhsOG4o/a9X+gKfYdpOELCLqpz7iykyArQ==}
     peerDependencies:
       '@ant-design/icons': ^4.6.0
@@ -988,21 +957,19 @@ packages:
       react: ^16.8.0  || ^17.0.0
       react-dom: ^16.8.0  || ^17.0.0
     dependencies:
-      '@ant-design/icons': 4.8.1(react-dom@18.2.0)(react@18.2.0)
+      '@ant-design/icons': 5.2.6(react-dom@18.2.0)(react@18.2.0)
       '@antv/layout': 0.1.31
       '@antv/x6': 1.35.0
       '@antv/x6-react-components': 1.1.20(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0)
       '@antv/x6-react-shape': 1.6.5(@antv/x6@1.35.0)(react-dom@18.2.0)(react@18.2.0)
-      '@antv/xflow-core': 1.0.55(@ant-design/icons@4.8.1)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)
-      '@antv/xflow-extension': 1.0.55(@ant-design/icons@4.8.1)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(classnames@2.3.2)(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(reflect-metadata@0.1.13)
+      '@antv/xflow-core': 1.0.55(@ant-design/icons@5.2.6)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0)
+      '@antv/xflow-extension': 1.0.55(@ant-design/icons@5.2.6)(@antv/x6-react-components@1.1.20)(@antv/x6-react-shape@1.6.5)(@antv/x6@1.35.0)(antd@5.11.1)(react-dom@18.2.0)(react@18.2.0)
       '@antv/xflow-hook': 1.0.55
       antd: 5.11.1(react-dom@18.2.0)(react@18.2.0)
-      lodash: 4.17.21
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     transitivePeerDependencies:
       - classnames
-      - reflect-metadata
     dev: false
 
   /@babel/code-frame@7.22.13:
@@ -1248,7 +1215,7 @@ packages:
     resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
     dependencies:
       '@babel/helper-module-imports': 7.22.15
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       '@emotion/hash': 0.9.1
       '@emotion/memoize': 0.8.1
       '@emotion/serialize': 1.1.2
@@ -1770,7 +1737,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       '@ctrl/tinycolor': 3.6.1
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
@@ -1784,7 +1751,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -1794,7 +1761,7 @@ packages:
     resolution: {integrity: sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==}
     engines: {node: '>=8.x'}
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
     dev: false
 
   /@rc-component/mutate-observer@1.1.0(react-dom@18.2.0)(react@18.2.0):
@@ -1804,7 +1771,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -1818,7 +1785,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -1832,7 +1799,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       '@rc-component/portal': 1.1.2(react-dom@18.2.0)(react@18.2.0)
       '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.3.2
@@ -2604,7 +2571,7 @@ packages:
     resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
     engines: {node: '>=10', npm: '>=6'}
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       cosmiconfig: 7.1.0
       resolve: 1.22.6
     dev: false
@@ -3355,7 +3322,7 @@ packages:
       debug: 4.3.4
       enhanced-resolve: 5.15.0
       eslint: 8.50.0
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.7.4)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.50.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.7.4)(eslint-import-resolver-typescript@3.6.1)(eslint@8.50.0)
       eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.7.4)(eslint-import-resolver-typescript@3.6.1)(eslint@8.50.0)
       fast-glob: 3.3.1
       get-tsconfig: 4.7.2
@@ -3398,6 +3365,35 @@ packages:
       - supports-color
     dev: true
 
+  /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.7.4)(eslint-import-resolver-typescript@3.6.1)(eslint@8.50.0):
+    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 6.7.4(eslint@8.50.0)(typescript@5.2.2)
+      debug: 3.2.7
+      eslint: 8.50.0
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.7.4)(eslint-plugin-import@2.28.1)(eslint@8.50.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.7.4)(eslint-import-resolver-typescript@3.6.1)(eslint@8.50.0):
     resolution: {integrity: sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==}
     engines: {node: '>=4'}
@@ -4898,7 +4894,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       array-tree-filter: 2.1.0
       classnames: 2.3.2
       rc-select: 14.10.0(react-dom@18.2.0)(react@18.2.0)
@@ -4914,7 +4910,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -4927,7 +4923,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
@@ -4941,7 +4937,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       '@rc-component/portal': 1.1.2(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.3.2
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
@@ -4956,7 +4952,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       '@rc-component/portal': 1.1.2(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.3.2
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
@@ -4985,7 +4981,7 @@ packages:
       react: '>=16.11.0'
       react-dom: '>=16.11.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
@@ -5000,7 +4996,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       async-validator: 4.2.5
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -5013,7 +5009,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       '@rc-component/portal': 1.1.2(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.3.2
       rc-dialog: 9.3.4(react-dom@18.2.0)(react@18.2.0)
@@ -5029,7 +5025,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       '@rc-component/mini-decimal': 1.1.0
       classnames: 2.3.2
       rc-input: 1.3.6(react-dom@18.2.0)(react@18.2.0)
@@ -5044,7 +5040,7 @@ packages:
       react: '>=16.0.0'
       react-dom: '>=16.0.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -5057,7 +5053,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.3.2
       rc-input: 1.3.6(react-dom@18.2.0)(react@18.2.0)
@@ -5074,7 +5070,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.3.2
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
@@ -5090,7 +5086,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -5104,7 +5100,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
@@ -5118,7 +5114,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
@@ -5132,7 +5128,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -5159,7 +5155,7 @@ packages:
       moment:
         optional: true
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.3.2
       dayjs: 1.11.10
@@ -5174,7 +5170,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -5188,7 +5184,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -5201,7 +5197,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -5215,7 +5211,7 @@ packages:
       react: '>=16.0.0'
       react-dom: '>=16.0.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
@@ -5230,7 +5226,7 @@ packages:
       react: '*'
       react-dom: '*'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.3.2
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
@@ -5248,7 +5244,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -5262,7 +5258,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -5275,7 +5271,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -5289,7 +5285,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       '@rc-component/context': 1.4.0(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.3.2
       rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
@@ -5306,7 +5302,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-dropdown: 4.1.0(react-dom@18.2.0)(react@18.2.0)
       rc-menu: 9.12.2(react-dom@18.2.0)(react@18.2.0)
@@ -5323,7 +5319,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-input: 1.3.6(react-dom@18.2.0)(react@18.2.0)
       rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
@@ -5338,7 +5334,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       '@rc-component/trigger': 1.18.2(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.3.2
       react: 18.2.0
@@ -5351,7 +5347,7 @@ packages:
       react: '*'
       react-dom: '*'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-select: 14.10.0(react-dom@18.2.0)(react@18.2.0)
       rc-tree: 5.8.2(react-dom@18.2.0)(react@18.2.0)
@@ -5367,7 +5363,7 @@ packages:
       react: '*'
       react-dom: '*'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
@@ -5398,7 +5394,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -5421,7 +5417,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       react-is: 18.2.0
@@ -5434,7 +5430,7 @@ packages:
       react: '*'
       react-dom: '*'
     dependencies:
-      '@babel/runtime': 7.23.1
+      '@babel/runtime': 7.23.2
       classnames: 2.3.2
       rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
@@ -6514,3 +6510,7 @@ packages:
       react: 18.2.0
       use-sync-external-store: 1.2.0(react@18.2.0)
     dev: false
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
diff --git a/src/components/organisms/LocalSelector.tsx b/src/components/organisms/LocalSelector.tsx
index 269cf27..a59c0fd 100644
--- a/src/components/organisms/LocalSelector.tsx
+++ b/src/components/organisms/LocalSelector.tsx
@@ -1,102 +1,102 @@
 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;
+  selected: MetroID;
+  onClick?: (local: string) => void;
 }
 
 const LocalSelector = ({
-                           selected, onClick = () => {
-    }
+                         selected, onClick = () => {
+  }
                        }: Props) => (
-    <div
-        style={{
-            width: "100%",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-        }}
+  <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;
+      `}>
+        기초 자치 단체 선택하기
+        <DownOutlined/>
+      </Flex>
+    </Dropdown>
+    <div css={css`height: 15pt`}/>
+    <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"
+      css={css`
+        @media (max-width: 768px) {
+          width: 80%;
+        }
+        width: 30%;
+        .local {
+          fill: ${MetroInfo[selected]?.color || "#4CC9F0"};
+          stroke: #080808;
+          stroke-width: 1px;
+          -webkit-transition: fill 0.2s,
+          stroke 0.2s
+        }
+        .local:hover {
+          fill: #080808;
+        }
+      `}
     >
-        <Dropdown menu={{
-            items: [
-                {key: '1', label: 'One'},
-                {key: '2', label: 'Two'},
-                {type: 'divider'},
-                {key: '3', label: 'Three'},
-                {key: '4', label: 'Four'},
-            ]
-        }}>
-            <div>
-                <Flex vertical css={css`
-                  background-color: aliceblue
-                `}>
-                    TODO: Dropdown으로 선택
-                </Flex>
-            </div>
-        </Dropdown>
-        <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={{width: "40%"}}
-        >
-            <style type="text/css">
-                {`
-          .local{
-            fill: ${MetroInfo[selected]?.color || "#1c3f64"};
-            stroke: #1c3f64;
-            stroke-width: 1.5px;
-            -webkit-transition:
-              fill 0.2s,
-              stroke 0.2s
-          }
-          .local:hover{
-            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>
-    </div>
+      {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>
+  </Flex>
 );
 export default LocalSelector;
diff --git a/src/components/organisms/MetroSelector.tsx b/src/components/organisms/MetroSelector.tsx
index 6c824f0..f7ac4ce 100644
--- a/src/components/organisms/MetroSelector.tsx
+++ b/src/components/organisms/MetroSelector.tsx
@@ -1,82 +1,98 @@
 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;
+  onClick?: (local: string) => void;
 }
 
-const MetroSelector = ({onClick = () => {}}: Props) => {
-    const [hover, setHover] = useState<string>("");
-    return (
-        <div
-            style={{
-                width: "100%",
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
+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;
+        `}>
+          광역 자치 단체 선택하기
+          <DownOutlined/>
+        </Flex>
+      </Dropdown>
+      <div css={css`height: 15pt`}/>
+      <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="0 0 509 716.1"
+        xmlSpace="preserve"
+        css={css`
+          @media (max-width: 768px) {
+            width: 80%;
+          }
+          width: 30%;
+          .metro {
+            -webkit-transition: fill 0.2s,
+            stroke 0.2s
+          }
+        `}
+      >
+        {MapSVG.map<ReactNode>(group => (
+          <g
+            key={group.groupId}
+            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"};
+            `}
+            onMouseEnter={() => {
+              setHover(group.groupId);
             }}
-        >
-            <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="0 0 509 716.1"
-                xmlSpace="preserve"
-                style={{width: "40%"}}
-            >
-                <style type="text/css">
-                    {`
-                        .metro{
-                        -webkit-transition:
-                            fill 0.2s,
-                            stroke 0.2s
-                        }
-      `             }
-                </style>
-                {MapSVG.map<ReactNode>(group => (
-                    <g
-                        key={group.groupId}
-                        id={group.groupId}
-                        className="metro"
-                        style={{
-                            fill:
-                                hover !== group.groupId
-                                    ? MetroInfo[group.groupId].color
-                                    : "#060606",
-                            stroke:
-                                hover !== group.groupId
-                                    ? MetroInfo[group.groupId].color
-                                    : "#060606",
-                        }}
-                        onMouseEnter={() => {
-                            setHover(group.groupId);
-                        }}
-                        onMouseLeave={() => {
-                            setHover("");
-                        }}
-                        onClick={() => {
-                            onClick(group.groupId);
-                        }}
-                    >
-                        {group.component.map(shape => {
-                            if (shape.type === `path`) {
-                                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}/>
-                                );
-                            }
-                            throw new Error(`${shape.id} is not path or polygon`);
-                        })}
-                    </g>
-                ))}
-            </svg>
-        </div>
-    );
+            onMouseLeave={() => {
+              setHover("");
+            }}
+            onClick={() => {
+              onClick(group.groupId);
+            }}
+          >
+            {group.component.map(shape => {
+              if (shape.type === `path`) {
+                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}/>
+                );
+              }
+              throw new Error(`${shape.id} is not path or polygon`);
+            })}
+          </g>
+        ))}
+      </svg>
+    </Flex>
+  );
 };
 
 export default MetroSelector;