refac: QR 인증 에러핸들링

Author: Yejiin21

src/features/ticket/hooks/useOrderHook.ts

@@ -50,13 +50,19 @@ export const useOrderTicket = () => {
 // qr 스캔
 export const useTicketQrCodeValidate = () => {
   return useMutation({
-    mutationFn: ({ orderId, sig }: { orderId: number; sig: string }) =>
-      ticketQrCode(orderId, sig),
+    mutationFn: ({ orderId, sig }: { orderId: number; sig: string }) => ticketQrCode(orderId, sig),
     onSuccess: () => {
       alert('체크인 성공!');
     },
-    onError: () => {
-      alert('체크인 실패했습니다. 다시 시도해주세요.');
+    onError: (error: any) => {
+      const errorCode = error?.code;
+      if (errorCode === 'QR_CODE4001') {
+        alert('이미 사용된 QR 코드입니다.');
+      } else if (errorCode === 'QR_CODE4002') {
+        alert('잘못된 QR 코드 형식입니다.');
+      } else {
+        alert('QR 코드 검증 중 오류가 발생했습니다.');
+      }
     },
   });
-};
+};

src/features/ticket/ui/QrScanner.tsx

@@ -1,83 +1,79 @@
-import { useEffect, useRef, useState } from "react";
-import QrScanner from "qr-scanner";
-import { useTicketQrCodeValidate } from "../hooks/useOrderHook";
-import Button from "../../../../design-system/ui/Button";
+import { useEffect, useRef, useState } from 'react';
+import QrScanner from 'qr-scanner';
+import { useTicketQrCodeValidate } from '../hooks/useOrderHook';
+import Button from '../../../../design-system/ui/Button';
 
 const QrScannerComponent = () => {
-    const videoRef = useRef<HTMLVideoElement>(null);
-    const [isScanning, setIsScanning] = useState(false);
-    const qrScannerRef = useRef<QrScanner | null>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isScanning, setIsScanning] = useState(false);
+  const qrScannerRef = useRef<QrScanner | null>(null);
 
-    const { mutate: validateQr } = useTicketQrCodeValidate();
+  const { mutate: validateQr } = useTicketQrCodeValidate();
 
-    useEffect(() => {
-        if (!videoRef.current) return;
+  useEffect(() => {
+    if (!videoRef.current) return;
 
-        const scanner = new QrScanner(
-            videoRef.current,
-            (decoded) => {
-                const data = decoded.data;
-                setIsScanning(false);
-                scanner.stop();
-                checkInApiCall(data);
-            },
-            {
-                onDecodeError: (err) => {
-                    console.warn("QR decode error:", err);
-                },
-                highlightScanRegion: true,
-                maxScansPerSecond: 5,
-            }
-        );
-
-        qrScannerRef.current = scanner;
+    const scanner = new QrScanner(
+      videoRef.current,
+      decoded => {
+        const data = decoded.data;
+        setIsScanning(false);
+        scanner.stop();
+        checkInApiCall(data);
+      },
+      {
+        onDecodeError: err => {
+          console.warn('QR decode error:', err);
+        },
+        highlightScanRegion: true,
+        maxScansPerSecond: 5,
+      }
+    );
 
-        return () => {
-            scanner.destroy();
-            qrScannerRef.current = null;
-        };
-    }, []);
+    qrScannerRef.current = scanner;
 
-    const handleStartScan = async () => {
-        try {
-            await navigator.mediaDevices.getUserMedia({ video: true });
-            qrScannerRef.current?.start();
-            setIsScanning(true);
-        } catch (e) {
-            alert(
-                "카메라 접근이 차단되어 있어 스캔할 수 없습니다.\n시스템 설정 또는 브라우저 설정에서 권한을 허용해 주세요."
-            );
-        }
+    return () => {
+      scanner.destroy();
+      qrScannerRef.current = null;
     };
+  }, []);
 
-    const checkInApiCall = async (qrData: string) => {
-        try {
-            const params = new URLSearchParams(qrData.replace(/-/g, '='));
-            const orderIdStr = params.get('orderId');
-            const sig = params.get('sig');
-            const orderId = orderIdStr ? parseInt(orderIdStr, 10) : NaN;
+  const handleStartScan = async () => {
+    try {
+      await navigator.mediaDevices.getUserMedia({ video: true });
+      qrScannerRef.current?.start();
+      setIsScanning(true);
+    } catch {
+      alert(
+        '카메라 접근이 차단되어 있어 스캔할 수 없습니다.\n시스템 설정 또는 브라우저 설정에서 권한을 허용해 주세요.'
+      );
+    }
+  };
 
-            if (!isNaN(orderId) && sig) {
-                validateQr({ orderId, sig });
-            } else {
-                alert("QR 코드 데이터 형식이 올바르지 않습니다.");
-            }
-        } catch {
-            alert("QR 코드 데이터를 파싱할 수 없습니다.");
-        }
-    };
+  const checkInApiCall = async (qrData: string) => {
+    try {
+      const params = new URLSearchParams(qrData.replace(/-/g, '='));
+      const orderIdStr = params.get('orderId');
+      const sig = params.get('sig');
+      const orderId = orderIdStr ? parseInt(orderIdStr, 10) : NaN;
 
-    return (
-        <div className="p-4">
-            <video
-                ref={videoRef}
-                className="border rounded w-full max-w-md"
-                style={{ aspectRatio: "3 / 4" }}
-            />
-            {!isScanning && (
-                <Button label="스캔하기" onClick={handleStartScan} className="w-full h-12 rounded-full mt-10 px-4 py-2" />
-            )}
-        </div>
-    );
+      if (!isNaN(orderId) && sig) {
+        validateQr({ orderId, sig });
+      } else {
+        alert('QR 코드 데이터 형식이 올바르지 않습니다.');
+      }
+    } catch {
+      alert('QR 코드 데이터를 파싱할 수 없습니다.');
+    }
+  };
+
+  return (
+    <div className="p-4">
+      <video ref={videoRef} className="border rounded w-full max-w-md" style={{ aspectRatio: '3 / 4' }} />
+      {!isScanning && (
+        <Button label="스캔하기" onClick={handleStartScan} className="w-full h-12 rounded-full mt-10 px-4 py-2" />
+      )}
+    </div>
+  );
 };
 export default QrScannerComponent;