feat: vite 마이그레이션 (#93)

#52
uswLectureEvaluation · Aug 30, 2024 · bc0a37a · bc0a37a
1 parent dd9ae1b
commit bc0a37a
Show file tree

Hide file tree

Showing 19 changed files with 111 additions and 128 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v20.10.0
diff --git a/bun.lockb b/bun.lockb
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -6,7 +6,7 @@
     <meta http-equiv="Cache-Control" content="max-age=0, s-maxage=31536000" />
     <meta name="description" content="수위키, 강의평가의 모든 것" />
     <meta name="keywords" content="SUWIKI, 수위키, 수원대, 강의평가, 수원대 강의평가" />
-    <link rel="icon" href="%PUBLIC_URL%/images/favicon.ico" />
+    <link rel="icon" href="images/favicon.ico" />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://suwiki.kr/" />
     <meta property="og:title" content="SUWIKI" />
@@ -26,35 +26,13 @@
     <link rel="preload" href="images/resize_banner.avif" as="image" type="image/avif" />
     <link rel="preload" href="images/signup.avif" as="image" type="image/avif" />
 
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="manifest" href="manifest.json" />
     <title>SUWIKI</title>
   </head>
 
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -2,63 +2,44 @@
   "name": "suwiki",
   "version": "1.3.0",
   "private": true,
-  "proxy": "https://api.suwiki.kr",
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@mui/material": "^5.11.4",
-    "axios": "^1.2.2",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^6.0.1",
+    "axios": "^1.7.5",
     "jwt-decode": "^3.1.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.0.13",
     "react-ga": "^3.3.1",
-    "react-hook-form": "^7.41.5",
-    "react-intersection-observer": "^9.4.1",
-    "react-query": "^3.39.2",
-    "react-router-dom": "^6.6.2",
-    "react-scripts": "5.0.1",
+    "react-hook-form": "^7.53.0",
+    "react-intersection-observer": "^9.13.0",
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.26.1",
     "react-star-ratings": "^2.3.0",
-    "recoil": "^0.7.6"
+    "recoil": "^0.7.7"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "tsc && react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "dev": "vite",
+    "build": "vite build",
     "lint": "eslint",
-    "type:check": "tsc --noEmit"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "compile": "tsc"
   },
   "devDependencies": {
-    "@types/node": "^18.15.3",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@types/react-star-ratings": "^2.3.0",
-    "eslint": "^8.31.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.7.0",
-    "eslint-plugin-react": "^7.31.11",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^2.8.2",
-    "typescript": "^4.9.5"
+    "@types/node": "^18.19.47",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-star-ratings": "^2.3.3",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "prettier": "^2.8.8",
+    "typescript": "^4.9.5",
+    "vite": "^5.4.2"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -20,7 +20,7 @@ import {
   Search,
   SignUp,
 } from 'pages';
-import RouteChangeTracker from 'RouteChangeTracker';
+import RouteChangeTracker from 'components/RouteChangeTracker';
 
 const App = () => {
   return (

diff --git a/src/api/ApiController.ts b/src/api/ApiController.ts
@@ -4,7 +4,8 @@ import jwtDecode, { type JwtPayload } from 'jwt-decode';
 import { useRecoilState } from 'recoil';
 import { isLoginStorage } from 'utils/loginStorage';
 import { logout, refresh } from './etc';
-const PROXY_URL = window.location.hostname === 'localhost' ? '' : '/proxy';
+
+const PROXY_URL = '/api';
 axios.defaults.withCredentials = true;
 
 const JwtInterceptors = () => {

diff --git a/src/api/User.ts b/src/api/User.ts
@@ -12,7 +12,7 @@ import type {
   RestrictionInfo,
   UserProfileInfo,
 } from 'types/user';
-import { queryClient } from '../index';
+import { queryClient } from '../main';
 import JwtInterceptors from './ApiController';
 import { Review } from 'types/evaluate';
 import { MyExam } from 'types/exam';

diff --git a/src/components/AsyncBoundary.tsx b/src/components/AsyncBoundary.tsx
diff --git a/src/components/Lecture/LectureContainer.tsx b/src/components/Lecture/LectureContainer.tsx
@@ -3,24 +3,24 @@ import { FlexWrap } from 'styles/common';
 import { LectureCard } from 'components';
 import type { LectureDetailItem } from 'types/lecture';
 
-const LectureContainer = ({ data }: { data: LectureDetailItem[] }) => {
-  const oddList = data.filter((row, i) => !(i % 2) && row);
-  const evenList = data.filter((row, i) => i % 2 && row);
+const LectureContainer = ({ data }: { data?: LectureDetailItem[] }) => {
+  const oddList = data?.filter((row, i) => !(i % 2) && row);
+  const evenList = data?.filter((row, i) => i % 2 && row);
 
   return (
     <FlexWrap>
       <FlexWrapSub>
-        {oddList.map((row) => (
+        {oddList?.map((row) => (
           <LectureCard key={row.id} row={row} />
         ))}
       </FlexWrapSub>
       <FlexWrapSub>
-        {evenList.map((row) => (
+        {evenList?.map((row) => (
           <LectureCard key={row.id} row={row} />
         ))}
       </FlexWrapSub>
       <FullWrapSub>
-        {data.map((row) => (
+        {data?.map((row) => (
           <LectureCard key={row.id} row={row} />
         ))}
       </FullWrapSub>

diff --git a/src/components/List/LectureList.tsx b/src/components/List/LectureList.tsx
@@ -2,19 +2,29 @@ import { LectureContainer } from 'components';
 import { fakeLectureList } from 'constants/placeholderData';
 import useLectureQuery from 'hooks/useLectureQuery';
 import { FlexWrap } from 'styles/common';
+import { MainLecture } from 'types/lecture';
 
 interface LectureListProps {
+  pages:
+    | (
+        | {
+            data: MainLecture;
+            isLast: boolean;
+            nextPage: number;
+          }
+        | undefined
+      )[]
+    | undefined;
   count: number;
-  data: any[];
 }
 
-const LectureList = ({ count, data }: LectureListProps) => {
+const LectureList = ({ count, pages }: LectureListProps) => {
   const { Search } = useLectureQuery();
   const { nextLoading, value, ref } = Search();
 
   return count ? (
     <>
-      {data.map((page) => (
+      {pages?.map((page) => (
         <LectureContainer key={page?.nextPage} data={page?.data.data} />
       ))}
       <div ref={ref} style={{ marginBottom: '10px' }}>

diff --git a/src/components/Major/MajorSearch.tsx b/src/components/Major/MajorSearch.tsx
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled/macro';
+import styled from '@emotion/styled';
 import * as styles from '@mui/material/styles';
 import { Fragment, useState } from 'react';
 import { TextField } from '@mui/material';

diff --git a/src/RouteChangeTracker.ts → src/components/RouteChangeTracker.ts b/src/RouteChangeTracker.ts → src/components/RouteChangeTracker.ts
diff --git a/src/components/Write/WriteEvaluation.tsx b/src/components/Write/WriteEvaluation.tsx
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled/macro';
+import styled from '@emotion/styled';
 import { Fragment } from 'react';
 import SemesterSelect from 'components/SemesterSelect';
 import {

diff --git a/src/components/Write/WriteTestInfo.tsx b/src/components/Write/WriteTestInfo.tsx
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled/macro';
+import styled from '@emotion/styled';
 import { useState } from 'react';
 import { useMutation } from 'react-query';
 import { User } from 'api';

diff --git a/src/index.tsx → src/main.tsx b/src/index.tsx → src/main.tsx
@@ -1,9 +1,7 @@
 import './styles/globalStyle.css';
 
 import axios from 'axios';
-import AsyncBoundary from 'components/AsyncBoundary';
 import { CACHE_TIME } from 'constants/cacheTime';
-import { BadGateway } from 'pages';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { initialize } from 'react-ga';
@@ -29,13 +27,11 @@ axios.defaults.withCredentials = true;
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <AsyncBoundary pendingFallback={<></>} rejectedFallback={() => <BadGateway />}>
-      <QueryClientProvider client={queryClient}>
-        <RecoilRoot>
-          <App />
-          <ReactQueryDevtools />
-        </RecoilRoot>
-      </QueryClientProvider>
-    </AsyncBoundary>
+    <QueryClientProvider client={queryClient}>
+      <RecoilRoot>
+        <App />
+        <ReactQueryDevtools />
+      </RecoilRoot>
+    </QueryClientProvider>
   </React.StrictMode>
 );
diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { LectureList, LectureSearch, MajorSelect, OptionSelect } from 'components';
-import { fakeLectureList, sortOptions } from 'constants/placeholderData';
+import { sortOptions } from 'constants/placeholderData';
 import useLectureQuery from 'hooks/useLectureQuery';
 
 const Search = () => {
@@ -29,7 +29,7 @@ const Search = () => {
         </SearchResultWrapper>
 
         <HeadSelection>
-          <LectureList data={data?.pages ?? fakeLectureList} count={count} />
+          <LectureList pages={data?.pages} count={count} />
         </HeadSelection>
       </Container>
     </div>

diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tsconfig.json b/tsconfig.json
@@ -16,6 +16,18 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "baseUrl": "src",
+    "paths": {
+      "*": ["*"],
+      "api/*": ["api/*"],
+      "app/*": ["app/*"],
+      "constants/*": ["constants/*"],
+      "components/*": ["components/*"],
+      "hooks/*": ["hooks/*"],
+      "pages/*": ["pages/*"],
+      "styles/*": ["styles/*"],
+      "types/*": ["types/*"],
+      "utils/*": ["utils/*"]
+    },
 
     "noUnusedLocals": true,
     "noUnusedParameters": true,

diff --git a/vite.config.mts b/vite.config.mts
@@ -0,0 +1,30 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    proxy: {
+      '/api': {
+        target: 'https://api.suwiki.kr',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      api: '/src/api',
+      app: '/src/app',
+      constants: '/src/constants',
+      components: '/src/components',
+      hooks: '/src/hooks',
+      pages: '/src/pages',
+      styles: '/src/styles',
+      types: '/src/types',
+      utils: '/src/utils',
+    },
+  },
+});