[Refactor] 절대경로 세팅 (#62)

* feat: tsconfig-paths 패키지 설치

* feat: 절대경로 설정

* feat: 인기 컴포넌트 높이 수정

* feat: 상대 경로 -> 절대 경로 변경

* feat: path 상수화

Author: 1jiwoo27

package.json

@@ -40,6 +40,7 @@
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.0",
     "vite": "^7.1.9",
-    "vite-plugin-svgr": "^4.5.0"
+    "vite-plugin-svgr": "^4.5.0",
+    "vite-tsconfig-paths": "^5.1.4"
   }
 }

pnpm-lock.yaml

@@ -1,8 +1,7 @@
-import { RouterProvider } from "react-router-dom";
-import { router } from "../shared/router";
-
+import { RouterProvider } from 'react-router-dom';
+import { router } from '@shared/router';
 
 const App = () => {
-    return <RouterProvider router={router} />;
-}
+  return <RouterProvider router={router} />;
+};
 export default App;

src/app/App.tsx

@@ -1,11 +1,11 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App.tsx";
-import "../styles/reset.css.ts";
-import "../styles/global.css.ts";
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import '@styles/reset.css.ts';
+import '@styles/global.css.ts';
 
-createRoot(document.getElementById("root")!).render(
+createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />
-  </StrictMode>
+  </StrictMode>,
 );

src/app/main.tsx

@@ -1,4 +1,4 @@
-import { vars } from '../../styles/theme.css';
+import { vars } from '@styles/theme.css';
 import { style } from '@vanilla-extract/css';
 
 export const detailContainer = style({

src/pages/deposit-detail/deposit-detail-page.css.ts

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { getDepositsDetail } from '../../shared/api/products';
-import { formatLimit } from '../../shared/utils/format';
+import { getDepositsDetail } from '@shared/api/products';
+import { formatLimit } from '@shared/utils/format';
+import Header from '@shared/components/header/header';
+import DepositCompare from '@shared/components/deposit-compare/deposit-compare';
+import Spinner from '@shared/components/spinner/spinner';
 import * as styles from './deposit-detail-page.css';
-import Header from '../../shared/components/header/header';
-import DepositCompare from '../../shared/components/deposit-compare/deposit-compare';
-import Spinner from '../../shared/components/spinner/spinner';
 
 type SimilarProducts = {
   productId: number;

src/pages/deposit-detail/deposit-detail-page.tsx

@@ -1,4 +1,4 @@
-import { vars } from '../../styles/theme.css';
+import { vars } from '@styles/theme.css';
 import { style, globalStyle } from '@vanilla-extract/css';
 
 export const mainContainer = style({

src/pages/deposit-search/deposit-search-page.css.ts

@@ -1,12 +1,12 @@
 import { useState, useEffect } from 'react';
-import { getDepositsList } from '../../shared/api/products';
-import { useDepositSearchStore } from '../../shared/stores/useDepositSearchStore';
-import { button } from '../../shared/components/button/button.css';
-import { BANK_LIST } from '../../shared/constants/bank-list';
-import Header from '../../shared/components/header/header';
-import DepositBasic from '../../shared/components/deposit-basic/deposit-basic';
-import DropDown from '../../shared/components/dropdown/dropdown';
-import Spinner from '../../shared/components/spinner/spinner';
+import { getDepositsList } from '@shared/api/products';
+import { useDepositSearchStore } from '@shared/stores/useDepositSearchStore';
+import { button } from '@shared/components/button/button.css';
+import { BANK_LIST } from '@shared/constants/bank-list';
+import Header from '@shared/components/header/header';
+import DepositBasic from '@shared/components/deposit-basic/deposit-basic';
+import DropDown from '@shared/components/dropdown/dropdown';
+import Spinner from '@shared/components/spinner/spinner';
 import * as styles from './deposit-search-page.css';
 
 const DepositSearchPage = () => {

src/pages/deposit-search/deposit-search-page.tsx

@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
+import { vars } from '@styles/theme.css';
 
 export const container = style({
   display: 'flex',

src/pages/error/error-page.css.ts

@@ -1,8 +1,8 @@
-import * as styles from './error-page.css';
 import { useNavigate } from 'react-router-dom';
-import { PATH } from '../../shared/router/path';
-import Button from '../../shared/components/button/button';
-import Header from '../../shared/components/header/header';
+import { PATH } from '@shared/router/path';
+import Button from '@shared/components/button/button';
+import Header from '@shared/components/header/header';
+import * as styles from './error-page.css';
 
 const ErrorPage = () => {
   const navigate = useNavigate();