feat : svg 파일 input

package.json

@@ -24,11 +24,14 @@
     "react-hook-form": "^7.43.9",
     "react-router-dom": "^6.10.0",
     "recoil": "^0.7.7",
-    "sass": "^1.61.0",
-    "styled-components": "^5.3.10",
     "tailwindcss": "^3.3.2"
+    "styled-components": "^5.3.10",
+    "sass": "^1.61.0",
+    "vite-plugin-svgr": "^3.2.0",
+    "vite-svg-loader": "^4.0.0"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.0.1",
     "@types/node": "^18.15.11",
     "@types/react": "^18.0.28",
     "@types/react-datepicker": "^4.11.2",

src/assets/image/map.css

@@ -0,0 +1,3 @@
+.svg .seoul {
+  height: 1px;
+}

src/components/main/mappage.scss

@@ -6,5 +6,15 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: flex-start;
+}
+
+.mapdetail {
+  width: 530px;
+  height: 90%;
+  flex-direction: column;
+  .line {
+    transform: scale(0.54);
+    justify-self: center;
+  }
 }

src/components/main/mappage.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import './mappage.scss';
+import { ReactComponent as Map } from '@/assets/image/southKoreaLow.svg';
 
 const Mappage = () => {
   return (
     <div className="mapPageBackground">
       <div>여행가고 싶은곳을 눌러보세요</div>
-      <div>mappage</div>
+      <Map className="mapdetail" />
     </div>
   );
 };

tsconfig.json

@@ -4,6 +4,7 @@
     "paths": {
       "@/*": ["src/*"]
     },
+    "types": ["vite-plugin-svgr/client"],
     "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
@@ -21,5 +22,6 @@
     "jsx": "react-jsx"
   },
   "include": ["src", "postcss.config.js"],
+  "include": ["src", "types.d.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

types.d.ts

@@ -0,0 +1,8 @@
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<
+    React.ComponentProps<'svg'> & { title?: string }
+  >;
+  export default ReactComponent;
+}

vite.config.ts

@@ -2,10 +2,11 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import path from 'path';
+import svgr from 'vite-plugin-svgr';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), tsconfigPaths()],
+  plugins: [react(), tsconfigPaths(), svgr()],
   server: {
     port: 3000,
   },