[Init/#22] Path Alias 추가

package.json

@@ -31,7 +31,8 @@
     "styled-components": "^6.1.11",
     "styled-reset": "^4.5.2",
     "supports-color": "^9.4.0",
-    "typescript": "^5.5.2"
+    "typescript": "^5.5.2",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "devDependencies": {
     "@eslint/compat": "^1.1.0",

src/App.tsx

@@ -1,7 +1,7 @@
-import router from "./routes/Router";
+import router from "@routes/Router";
+import GlobalStyle from "@styles/global";
+import theme from "@styles/theme";
 import { RouterProvider } from "react-router-dom";
-import theme from "./styles/theme";
-import GlobalStyle from "./styles/global";
 import { ThemeProvider } from "styled-components";
 
 function App() {

src/main.tsx

@@ -1,9 +1,4 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

src/pages/APage/Apage.styled.tsx

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  color: ${({ theme }) => theme.colors.gray_100};
+  ${({ theme }) => theme.fonts.heading1};
+`;

src/pages/APage/Apage.tsx

@@ -0,0 +1,7 @@
+import { Container } from "./Apage.styled";
+
+const Apage = () => {
+  return <Container>Apage</Container>;
+};
+
+export default Apage;

src/routes/Router.tsx

@@ -1,10 +1,11 @@
+import Apage from "@pages/APage/Apage";
 import { createBrowserRouter } from "react-router-dom";
 
 const router = createBrowserRouter([
-  //   {
-  //     path: "/A",
-  //     element: <APage />,
-  //   },
+  {
+    path: "/a",
+    element: <Apage />,
+  },
   //   {
   //     path: "/B",
   //     element: <BPage />,

tsconfig.app.json

@@ -21,7 +21,21 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    "baseUrl": "./",
+    "paths": {
+      "@apis/*": ["src/apis/*"],
+      "@assets/*": ["src/assets/*"],
+      "@components/*": ["src/components/*"],
+      "@constants/*": ["src/constants/*"],
+      "@hooks/*": ["src/hooks/*"],
+      "@pages/*": ["src/pages/*"],
+      "@routes/*": ["src/routes/*"],
+      "@styles/*": ["src/styles/*"],
+      "@types/*": ["src/types/*"],
+      "@utils/*": ["src/utils/*"]
+    }
   },
   "include": ["src"]
 }

vite.config.ts

@@ -1,7 +1,8 @@
-import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tsconfigPaths()],
 });

yarn.lock

@@ -3366,6 +3366,7 @@ __metadata:
     typescript: "npm:^5.5.2"
     typescript-eslint: "npm:^7.14.1"
     vite: "npm:^5.3.1"
+    vite-tsconfig-paths: "npm:^4.3.2"
   dependenciesMeta:
     [email protected]:
       unplugged: true
@@ -5045,6 +5046,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globrex@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "globrex@npm:0.1.2"
+  checksum: 10c0/a54c029520cf58bda1d8884f72bd49b4cd74e977883268d931fd83bcbd1a9eb96d57c7dbd4ad80148fb9247467ebfb9b215630b2ed7563b2a8de02e1ff7f89d1
+  languageName: node
+  linkType: hard
+
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -5223,22 +5231,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"human-signals@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "human-signals@npm:5.0.0"
-  checksum: 10c0/5a9359073fe17a8b58e5a085e9a39a950366d9f00217c4ff5878bd312e09d80f460536ea6a3f260b5943a01fe55c158d1cea3fc7bee3d0520aeef04f6d915c82
-  languageName: node
-  linkType: hard
-
-"husky@npm:^8.0.0":
-  version: 8.0.3
-  resolution: "husky@npm:8.0.3"
-  bin:
-    husky: lib/bin.js
-  checksum: 10c0/6722591771c657b91a1abb082e07f6547eca79144d678e586828ae806499d90dce2a6aee08b66183fd8b085f19d20e0990a2ad396961746b4c8bd5bdb619d668
-  languageName: node
-  linkType: hard
-
 "iconv-lite@npm:^0.6.2":
   version: 0.6.3
   resolution: "iconv-lite@npm:0.6.3"
@@ -7764,6 +7756,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tsconfck@npm:^3.0.3":
+  version: 3.1.1
+  resolution: "tsconfck@npm:3.1.1"
+  peerDependencies:
+    typescript: ^5.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  bin:
+    tsconfck: bin/tsconfck.js
+  checksum: 10c0/e133eb308ba37e8db8dbac1905bddaaf4a62f0e01aa88143e19867e274a877b86b35cf69c9a0172ca3e7d1a4bb32400381ac7f7a1429e34250a8d7ae55aee3e7
+  languageName: node
+  linkType: hard
+
 "tsconfig-paths@npm:^3.15.0":
   version: 3.15.0
   resolution: "tsconfig-paths@npm:3.15.0"
@@ -8017,6 +8023,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-tsconfig-paths@npm:^4.3.2":
+  version: 4.3.2
+  resolution: "vite-tsconfig-paths@npm:4.3.2"
+  dependencies:
+    debug: "npm:^4.1.1"
+    globrex: "npm:^0.1.2"
+    tsconfck: "npm:^3.0.3"
+  peerDependencies:
+    vite: "*"
+  peerDependenciesMeta:
+    vite:
+      optional: true
+  checksum: 10c0/f390ac1d1c3992fc5ac50f9274c1090f8b55ab34a89ea88893db9a6924a3b26c9f64bc1163615150ad100749db73b6b2cf1d57f6cd60df6e762ceb5b8ad30024
+  languageName: node
+  linkType: hard
+
 "vite@npm:^5.3.1":
   version: 5.3.3
   resolution: "vite@npm:5.3.3"