diff --git a/packages/admin/src/features/QR-code-scanner/ui/QRCodeScannerPage.tsx b/packages/admin/src/features/QR-code-scanner/ui/QRCodeScannerPage.tsx index 0ed3a75..bd21704 100644 --- a/packages/admin/src/features/QR-code-scanner/ui/QRCodeScannerPage.tsx +++ b/packages/admin/src/features/QR-code-scanner/ui/QRCodeScannerPage.tsx @@ -1,33 +1,47 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import { QrReader } from "react-qr-reader"; import { usePutApplicantCheckIn } from "../api"; import { Button } from "@/shared"; export const QRCodeScannerPage = () => { - const [scannedData, setScannedData] = useState(null); + const [scannedDataList, setScannedDataList] = useState<{ studentId: number; message: string | null }[]>([]); const [scanning, setScanning] = useState(false); - const [scannedStudentId, setScannedStudentId] = useState(0); + const [scannedStudentId, setScannedStudentId] = useState(null); - const { mutate: checkInApplicant } = usePutApplicantCheckIn(scannedStudentId); + const { mutate: checkInApplicant } = usePutApplicantCheckIn(); + + useEffect(() => { + if (scannedStudentId !== null) { + checkInApplicant(scannedStudentId, { + onSuccess: () => updateMessage(scannedStudentId, "체크인 완료"), + onError: () => updateMessage(scannedStudentId, "체크인 실패"), + }); + } + }, [scannedStudentId, checkInApplicant]); + + const updateMessage = (studentId: number, message: string) => { + setScannedDataList((prevList) => + prevList.map((data) => (data.studentId === studentId ? { ...data, message } : data)), + ); + }; const handleScan = (result: { text: string } | null) => { if (result && result.text) { - setScannedData(result.text); - setScanning(false); - console.log("QR Code scanned:", result.text); - alert("QR Code가 정상적으로 스캔되었습니다."); - + const scannedText = result.text; try { - const parsedData = JSON.parse(result.text); - + const parsedData = JSON.parse(scannedText); const studentId = parsedData.studentId; + + if (!scannedDataList.some((data) => data.studentId === studentId)) { + setScannedDataList((prevList) => [...prevList, { studentId, message: null }]); + } + setScannedStudentId(studentId); + console.log("QR Code scanned:", scannedText); } catch (error) { console.error("QR 코드 파싱 에러:", error); } - - checkInApplicant(); } }; @@ -37,9 +51,9 @@ export const QRCodeScannerPage = () => { {scanning ? (
{ + onResult={(result: { text: string } | null, error: any) => { if (result) { - handleScan(result as { text: string }); + handleScan(result); } if (error) { console.error("QR Reader error:", error); @@ -55,10 +69,21 @@ export const QRCodeScannerPage = () => { ) : ( )} - {scannedData && ( + {scannedDataList.length > 0 && (
-

Scanned Data:

-

{scannedData}

+

QR 코드 스캔 결과

+
    + {scannedDataList.map(({ studentId, message }, index) => ( +
  • + 학번: {studentId} + {message && ( + + {message} + + )} +
  • + ))} +
)}