add zoom to qr reader

package.json

@@ -45,6 +45,7 @@
     "eslint-config-next": "14.2.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
+    "html5-qrcode": "^2.3.8",
     "postcss": "^8.4.39",
     "tailwindcss": "^3.4.6",
     "typescript": "^5.5.3"

src/components/(main)/home/CustomButton.tsx

@@ -35,7 +35,7 @@ const CustomButton: React.FC<CustomButtonProps> = ({
   const router = useRouter();
 
   const firstdate = async () => {
-    let firstDateDate = currentDate;
+    /* let firstDateDate = currentDate;
     const firstDate = process.env.NEXT_PUBLIC_FIRST_DATE_DATE;
 
     if (firstDate) {
@@ -52,7 +52,7 @@ const CustomButton: React.FC<CustomButtonProps> = ({
       router.push('/firstdate/home');
     } else {
       router.push('/register');
-    }
+    } */
   };
 
   const rubpeun = async () => {
@@ -131,7 +131,7 @@ const CustomButton: React.FC<CustomButtonProps> = ({
   };
   const buttonProps = {
     'first-date': {
-      color: 'bg-project-pink',
+      color: 'bg-project-pink opacity-30 event-pointer-none',
       onClick: firstdate,
     },
     'rub-peun': {

src/components/rpkm/staff/home/qrscanner/QRScanner.tsx

@@ -1,7 +1,7 @@
 'use client';
-import React from 'react';
-import { QrReader } from 'react-qr-reader';
+import React, { useEffect } from 'react';
 import { motion } from 'framer-motion';
+import { Html5Qrcode } from 'html5-qrcode';
 
 interface ScanProps {
   sendCheckInRequest: (
@@ -10,26 +10,44 @@ interface ScanProps {
   ) => Promise<void>;
 }
 
+const id = 'reader';
+
 const Scan = ({ sendCheckInRequest }: ScanProps) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleScanResult = (scanRawData: any) => {
-    if (!scanRawData || !scanRawData.text) {
-      return;
-    }
-    sendCheckInRequest('userId', scanRawData.text);
-  };
+  useEffect(() => {
+    const reader = new Html5Qrcode(id);
+    reader
+      .start(
+        { facingMode: 'environment' },
+        {
+          fps: 10,
+          qrbox: { width: 500, height: 500 },
+          aspectRatio: 1,
+        },
+        (decodedText) => {
+          if (localStorage.getItem('enable') === 'false') return;
+          sendCheckInRequest('userId', decodedText);
+        },
+        (errorMessage) => {
+          console.log(errorMessage);
+        }
+      )
+      .then(() => {
+        reader.applyVideoConstraints({
+          //eslint-disable-next-line @typescript-eslint/no-explicit-any
+          advanced: [{ zoom: 2.5, focusMode: 'continuous' } as any],
+        });
+      });
+
+    return () => reader.clear();
+  }, []);
 
   return (
     <div className="flex flex-col items-center justify-center w-full">
       <div className="relative w-full h-full">
-        <div className="overflow-hidden aspect-square">
-          <QrReader
-            scanDelay={0}
-            className="bg-black w-[100vw] aspect-square -mt-[13vw] -ml-[14vw]"
-            onResult={handleScanResult}
-            constraints={{ facingMode: 'environment' }}
-          />
-        </div>
+        <div
+          id={id}
+          className="w-full aspect-auto"
+        ></div>
 
         <motion.div
           className="absolute left-1/2 top-1/2 h-[50vw] w-[50vw] max-w-md -translate-x-1/2 -translate-y-1/2 transform rounded-3xl border-4 border-white"