Chat-Diary · Nangniya · Jun 14, 2024
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,23 +2,13 @@ module.exports = {
   env: {
     browser: true,
     es2021: true,
+    node: true,
   },
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react/recommended',
   ],
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: ['.eslintrc.{js,cjs}'],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 'latest',

diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Chat Diary</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.68",
+    "@types/node": "^18.0.0",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "@types/react-router-dom": "^5.3.3",
@@ -17,7 +17,6 @@
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.21.1",
-    "react-scripts": "5.0.1",
     "react-slick": "^0.29.0",
     "sass": "^1.69.5",
     "slick-carousel": "^1.8.1",
@@ -27,10 +26,9 @@
     "zustand": "^4.4.7"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview"
   },
   "eslintConfig": {
     "extends": [
@@ -51,10 +49,17 @@
     ]
   },
   "devDependencies": {
+    "@svgr/rollup": "^8.1.0",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.56.0",
     "eslint-plugin-react": "latest",
-    "prettier": "^3.1.1"
+    "prettier": "^3.1.1",
+    "vite": "^5.3.0",
+    "vite-plugin-env-compatible": "^2.0.1",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.3.2"
   }
 }
diff --git a/public/index.html b/public/index.html
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -2,8 +2,7 @@ declare module '*.scss' {
   const content: { [className: string]: string };
   export = content;
 }
-declare module '*.svg' {
-  export const ReactComponent: REact.FC<React.SVGProps<SVGSVGElement>>;
-  const src: string;
-  export default src;
-}
+// declare module '*.svg' {
+//   const content: React.FC<React.SVGProps<SVGElement>>;
+//   export default content;
+// }
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import './index.css';

diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
@@ -6,11 +6,11 @@ import DialogBtn from '../../components/common/Buttons/DialogBtn/DialogBtn';
 const Login = () => {
   const [isKakao, setIsKakao] = useState(false);
   // oauth 요청 URL
-  const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${process.env.REACT_APP_REST_API_KEY}&redirect_uri=${process.env.REACT_APP_REDIRECT_URL}&response_type=code`
-  
-  const handleLogin = ()=>{
-      window.location.href = kakaoURL
-  }
+  const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${process.env.REACT_APP_REST_API_KEY}&redirect_uri=${process.env.REACT_APP_REDIRECT_URL}&response_type=code`;
+
+  const handleLogin = () => {
+    window.location.href = kakaoURL;
+  };
 
   return (
     <div className={styles.wholeContainer}>

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,16 +1,16 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": ["vite/client", "vite-plugin-svgr/client"],
+    "allowJs": false,
+    "skipLibCheck": false,
+    "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import viteTsconfigPaths from 'vite-tsconfig-paths';
+import svgr from '@svgr/rollup';
+import envCompatible from 'vite-plugin-env-compatible';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    viteTsconfigPaths(),
+    svgr(),
+    envCompatible({ prefix: 'REACT_APP' }),
+  ],
+  server: {
+    open: true,
+    port: 3000,
+  },
+});
diff --git a/vite.env.d.ts b/vite.env.d.ts
@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly REACT_APP_HTTP_API_KEY: string;
+  readonly REACT_APP_WS_API_KEY: string;
+  // 다른 환경 변수들도 여기에 추가
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}