Merge pull request #2 from G-hoon/feat/#1

feat: Vite 로 환경 변경 및 config 파일 수정 등
DDD-Community · Jul 15, 2024 · 4a3e7a8 · 4a3e7a8
2 parents 4524a4c + 6009871
commit 4a3e7a8
Show file tree

Hide file tree

Showing 17 changed files with 1,029 additions and 4,408 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "printWidth": 120,
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "arrowParens": "always",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/config/webpack.common.ts b/config/webpack.common.ts
diff --git a/config/webpack.dev.ts b/config/webpack.dev.ts
diff --git a/config/webpack.prod.ts b/config/webpack.prod.ts
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -9,5 +9,6 @@
 </head>
 <body>
   <div id="root"></div>
+  <script type="module" src="/src/index.tsx"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -3,57 +3,45 @@
   "version": "1.0.0",
   "main": "index.js",
   "license": "MIT",
+  "type": "module",
   "scripts": {
-    "dev": "yarn webpack serve --config config/webpack.dev.ts",
-    "build:dev": "yarn webpack --config config/webpack.dev.ts",
-    "build:prod": "yarn webpack --config config/webpack.prod.ts",
+    "dev": "vite --mode dev",
+    "build": "tsc && vite build --mode dev",
+    "build:dev": "tsc && vite build --mode dev",
+    "build:test": "tsc && vite build --mode dev",
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --fix"
   },
   "dependencies": {
     "core-js": "^3.28.0",
+    "p5": "^1.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.8.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.7",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@types/node": "^20.14.10",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
-    "@types/webpack": "^5.28.0",
-    "@types/webpack-dev-server": "^4.7.2",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
+    "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
-    "babel-loader": "^9.1.2",
-    "css-loader": "^6.7.3",
-    "css-minimizer-webpack-plugin": "^4.2.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^8.7.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "html-webpack-plugin": "^5.5.0",
-    "mini-css-extract-plugin": "^2.7.2",
-    "postcss": "^8.4.39",
-    "postcss-loader": "^8.1.1",
-    "prettier": "^2.8.4",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "react-refresh": "^0.14.2",
-    "style-loader": "^3.3.1",
     "tailwindcss": "^3.4.4",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5",
-    "webpack": "^5.75.0",
-    "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1",
-    "webpack-merge": "^5.8.0"
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.3.2"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,6 +1,6 @@
-module.exports = {
-    plugins: {
-      tailwindcss: {},
-      autoprefixer: {},
-    },
-  };
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,18 @@
-import { PoseDetector } from "./components";
+// dependencies
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"
+
+// components
+import { PoseDetector } from "./components"
 
 const App: React.FC = () => {
   return (
-    <div>
-      <PoseDetector />
-    </div>
-  );
-};
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<PoseDetector />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </BrowserRouter>
+  )
+}
 
-export default App;
+export default App
diff --git a/src/components/Camera.tsx b/src/components/Camera.tsx
@@ -1,11 +1,11 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect } from "react"
 
 type WebcamProps = {
-  onStreamReady: (video: HTMLVideoElement) => void;
-};
+  onStreamReady: (video: HTMLVideoElement) => void
+}
 
 const Camera: React.FC<WebcamProps> = ({ onStreamReady }) => {
-  const videoRef = useRef<HTMLVideoElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null)
 
   const startVideo = (): void => {
     navigator.mediaDevices
@@ -19,24 +19,24 @@ const Camera: React.FC<WebcamProps> = ({ onStreamReady }) => {
       })
       .then((stream) => {
         if (videoRef.current) {
-          videoRef.current.srcObject = stream;
+          videoRef.current.srcObject = stream
           // 'loadedmetadata' 이벤트가 발생하면 비디오 재생
           videoRef.current.onloadedmetadata = () => {
             if (videoRef.current) {
-              videoRef.current.play();
-              onStreamReady(videoRef.current);
+              videoRef.current.play()
+              onStreamReady(videoRef.current)
             }
-          };
+          }
         }
       })
       .catch((err) => {
-        console.error("Error accessing webcam: ", err);
-      });
-  };
+        console.error("Error accessing webcam: ", err)
+      })
+  }
 
   useEffect(() => {
-    startVideo();
-  }, []);
+    startVideo()
+  }, [])
 
   return (
     <div style={{ position: "relative", width: "640px", height: "480px" }}>
@@ -51,7 +51,7 @@ const Camera: React.FC<WebcamProps> = ({ onStreamReady }) => {
         }}
       />
     </div>
-  );
-};
+  )
+}
 
-export default Camera;
+export default Camera
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,5 +9,6 @@ @@
     </head>
     <body>
       <div id="root"></div>
+      <script type="module" src="/src/index.tsx"></script>
     </body>
     </html>