Merge pull request #18 from Dev-FE-1/feat/fullpath-#17

✨ #17 절대경로 설정

.eslintrc.cjs

@@ -29,8 +29,12 @@ module.exports = {
     'no-console': ['warn', { allow: ['warn', 'error'] }],
   },
   settings: {
-    react: {
-      version: 'detect',
+    react: { version: 'detect' },
+    'import/resolver': {
+      alias: {
+        map: [['@', './src']],
+        extensions: ['.ts', '.js', '.jsx', '.json'],
+      },
     },
   },
 }

README.md

@@ -1,30 +1,3 @@
-# React + TypeScript + Vite
+# NP - No Problem
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json', './tsconfig.app.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+# My Idoru

src/App.tsx

@@ -1,17 +1,17 @@
-import { PATH } from './constants/path'
+import { PATH } from '@/constants/path'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 
-import CreatePlaylistPage from './pages/CreatePlaylistPage'
-import EditProfilePage from './pages/EditProfilePage'
-import FollowPage from './pages/FollowPage'
-import LoginPage from './pages/LoginPage'
-import Page404 from './pages/Page404'
-import PlaylistPage from './pages/PlaylistPage'
-import ProfilePage from './pages/ProfilePage'
-import SearchPage from './pages/SearchPage'
-import RootLayout from './layout/Root'
-import ChatPage from './pages/ChatPage'
-import HomePage from './pages/HomePage'
+import CreatePlaylistPage from '@/pages/CreatePlaylistPage'
+import EditProfilePage from '@/pages/EditProfilePage'
+import FollowPage from '@/pages/FollowPage'
+import LoginPage from '@/pages/LoginPage'
+import Page404 from '@/pages/Page404'
+import PlaylistPage from '@/pages/PlaylistPage'
+import ProfilePage from '@/pages/ProfilePage'
+import SearchPage from '@/pages/SearchPage'
+import RootLayout from '@/layout/Root'
+import ChatPage from '@/pages/ChatPage'
+import HomePage from '@/pages/HomePage'
 
 const router = createBrowserRouter([
   {

src/components/layout/Navbar.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 import { NavLink } from 'react-router-dom'
-import { PATH } from '../../constants/path'
+import { PATH } from '@/constants/path'
 
 const Navbar = () => {
   const menu = [

src/layout/Root.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled'
 import { Outlet } from 'react-router-dom'
-import Navbar from '../components/layout/Navbar'
-import Header from '../components/layout/Header'
+import Navbar from '@/components/layout/Navbar'
+import Header from '@/components/layout/Header'
 
 const RootLayout = () => (
   <StyledContainer>

src/main.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import App from '@/App'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(

tsconfig.json

@@ -7,6 +7,10 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
 
     /* Bundler mode */
     "moduleResolution": "bundler",

vite.config.ts

@@ -4,4 +4,9 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      '@': '/src',
+    },
+  },
 })