[⚙️ : chore] 절대 경로 적용

.eslintrc.cjs

@@ -18,4 +18,9 @@ module.exports = {
     ],
     'no-console': 'off',
   },
+  settings: {
+    'import/resolver': {
+      typescript: {},
+    },
+  },
 };

package.json

@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@svgr/rollup": "^8.1.0",
+    "@types/node": "^20.10.5",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@types/styled-components": "^5.1.32",
@@ -32,6 +33,7 @@
     "eslint": "^8.53.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",

tsconfig.json

@@ -6,6 +6,18 @@
     "module": "ESNext",
     "skipLibCheck": true,
 
+    /* Static Path */
+    "baseUrl": "src",
+    "paths": {
+      "@/*": ["*"],
+      "@page/*": ["routes/*"],
+      "@compo/*": ["components/*"],
+      "@type/*": ["interfaces/*"],
+      "@util/*": ["utils/*"],
+      "@style/*": ["styles/*"],
+      "@img/*": ["assets/images/*"]
+    },
+
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,

vite.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import svgr from '@svgr/rollup';
 import viteImagemin from 'vite-plugin-imagemin';
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -36,4 +37,21 @@ export default defineConfig({
       },
     }),
   ],
+  resolve: {
+    alias: [
+      { find: '@', replacement: path.resolve(__dirname, 'src') },
+      { find: '@page', replacement: path.resolve(__dirname, 'src/routes') },
+      {
+        find: '@compo',
+        replacement: path.resolve(__dirname, 'src/components'),
+      },
+      { find: '@type', replacement: path.resolve(__dirname, 'src/interfaces') },
+      { find: '@util', replacement: path.resolve(__dirname, 'src/utils') },
+      { find: '@style', replacement: path.resolve(__dirname, 'src/styles') },
+      {
+        find: '@img',
+        replacement: path.resolve(__dirname, 'src/assets/images'),
+      },
+    ],
+  },
 });