build: 절대경로 import 추가, MyRentInfo에 절대경로 적용

package.json

@@ -23,6 +23,7 @@
     "react-router-dom": "^6.11.2",
     "recoil": "^0.7.7",
     "vite": "^4.3.8",
+    "vite-tsconfig-paths": "^4.2.0",
     "web-vitals": "^3.3.1"
   },
   "scripts": {

src/api/like/index.ts

@@ -0,0 +1,3 @@
+export * from "./useDeleteLike";
+export * from "./useGetLike";
+export * from "./usePostLike";

src/component/mypage/MyRentInfo/MyRent.tsx

@@ -1,8 +1,8 @@
-import { useGetUsersSearchId } from "../../../api/users/useGetUsersSearchId";
+import { useGetUsersSearchId } from "~/api/users/useGetUsersSearchId";
 import RentHistory from "./RentHistory";
 import RentedOrReservedBooks from "./RentedOrReservedBooks";
-import InquireBoxTitle from "../../utils/InquireBoxTitle";
-import Book from "../../../asset/img/admin_icon.svg";
+import InquireBoxTitle from "~/component/utils/InquireBoxTitle";
+import Book from "~/asset/img/admin_icon.svg";
 
 const MyRent = () => {
   const user = window.localStorage.getItem("user");

src/component/mypage/MyRentInfo/RentHistory.tsx

@@ -1,7 +1,7 @@
-import Pagination from "../../utils/Pagination";
-import { useGetHistories } from "../../../api/histories/useGetHistories";
+import Pagination from "~/component/utils/Pagination";
+import { useGetHistories } from "~/api/histories/useGetHistories";
 import RentHistoryTable from "./RentHistoryTable";
-import "../../../asset/css/RentHistory.css";
+import "~/asset/css/RentHistory.css";
 
 const RentHistory = () => {
   const { historiesList, lastPage, page, setPage } = useGetHistories({

src/component/mypage/MyRentInfo/RentHistoryTable.tsx

@@ -1,12 +1,10 @@
 import { useState } from "react";
-import { useGetLike } from "../../../api/like/useGetLike";
-import { usePostLike } from "../../../api/like/usePostLike";
-import { useDeleteLike } from "../../../api/like/useDeleteLike";
-import Image from "../../utils/Image";
-import FilledLike from "../../../asset/img/like_filled.svg";
-import EmptyLike from "../../../asset/img/like_empty.svg";
-import { History } from "../../../type";
-import "../../../asset/css/RentHistory.css";
+import { useGetLike, usePostLike, useDeleteLike } from "~/api/like";
+import Image from "~/component/utils/Image";
+import FilledLike from "~/asset/img/like_filled.svg";
+import EmptyLike from "~/asset/img/like_empty.svg";
+import type { History } from "~/type";
+import "~/asset/css/RentHistory.css";
 
 type Props = {
   factor: History;

src/component/mypage/MyRentInfo/RentedOrReservedBooks.tsx

@@ -1,8 +1,8 @@
-import { usePatchReservationsCancel } from "../../../api/reservations/usePatchReservationsCancel";
-import Image from "../../utils/Image";
-import { isNumber } from "../../../util/typeCheck";
-import { Lending, Reservation } from "../../../type";
-import "../../../asset/css/RentedOrReservedBooks.css";
+import { usePatchReservationsCancel } from "~/api/reservations/usePatchReservationsCancel";
+import Image from "~/component/utils/Image";
+import { isNumber } from "~/util/typeCheck";
+import { Lending, Reservation } from "~/type";
+import "~/asset/css/RentedOrReservedBooks.css";
 
 type Props = {
   componentMode: string;

tsconfig.json

@@ -14,7 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "paths": { "~/*": ["./src/*"] }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.vite.json" }]

vite.config.ts

@@ -2,6 +2,7 @@
 import { defineConfig, loadEnv } from "vite";
 // eslint-disable-next-line import/no-extraneous-dependencies
 import react from "@vitejs/plugin-react-swc";
+import tsconfigPaths from "vite-tsconfig-paths";
 
 /**
  * REACT_APP_ 으로 시작하는 환경변수를
@@ -21,7 +22,7 @@ export default defineConfig(({ mode }) => {
 
   return {
     /** @see https://vitejs.dev/plugins/ */
-    plugins: [react()],
+    plugins: [react(), tsconfigPaths()],
 
     envPrefix,