fix: lint error - semantic ambiguity

frontend/package-lock.json

@@ -11,6 +11,7 @@
         "@reduxjs/toolkit": "^1.9.2",
         "@vercel/analytics": "^0.1.10",
         "i18next": "^23.11.5",
+        "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-copy-to-clipboard": "^5.1.0",
         "react-dom": "^18.2.0",
@@ -1488,7 +1489,7 @@
       "version": "18.0.10",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz",
       "integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -6606,6 +6607,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",

frontend/package.json

@@ -22,6 +22,7 @@
     "@reduxjs/toolkit": "^1.9.2",
     "@vercel/analytics": "^0.1.10",
     "i18next": "^23.11.5",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",

frontend/src/upload/Upload.tsx

@@ -55,7 +55,7 @@ function Upload({
     }
   }, []);
 
-  function ProgressBar({ progress }: { progress: number }) {
+  function ProgressBar({ progressPercent }: { progressPercent: number }) {
     return (
       <div className="my-5 w-[50%]">
         <div
@@ -65,9 +65,9 @@ function Upload({
             className={`h-full border-none p-1 w-${
               progress || 0
             }%  flex items-center justify-center bg-purple-30 outline-none transition-all`}
-            style={{ width: `${progress || 0}%` }}
+            style={{ width: `${progressPercent || 0}%` }}
           >
-            {progress >= 5 && `${progress}%`}
+            {progressPercent >= 5 && `${progressPercent}%`}
           </div>
         </div>
       </div>
@@ -93,7 +93,7 @@ function Upload({
         {/* <p className="mt-10 text-2xl">{progress?.percentage || 0}%</p> */}
 
         {/* progress bar */}
-        <ProgressBar progress={progress?.percentage as number} />
+        <ProgressBar progressPercent={progress?.percentage as number} />
 
         <button
           onClick={() => {