diff --git a/packages/admin/src/features/QR-code-scanner/api/hook/usePutApplicantCheckIn.ts b/packages/admin/src/features/QR-code-scanner/api/hook/usePutApplicantCheckIn.ts index a7f2b83..e532048 100644 --- a/packages/admin/src/features/QR-code-scanner/api/hook/usePutApplicantCheckIn.ts +++ b/packages/admin/src/features/QR-code-scanner/api/hook/usePutApplicantCheckIn.ts @@ -1,13 +1,14 @@ import { applicantCheckIn } from "../applicant-check-in.api"; +import { ApplicantCheckInResponse } from "../types"; import { useMutation } from "@tanstack/react-query"; -export const usePutApplicantCheckIn = (id: number) => { - return useMutation({ - mutationFn: () => applicantCheckIn(id), +export const usePutApplicantCheckIn = () => { + return useMutation({ + mutationFn: (id: number) => applicantCheckIn(id), onSuccess: () => { alert("체크인이 완료되었습니다."); }, - onError: (error) => { + onError: (error: Error) => { console.error(error); alert("체크인에 실패했습니다."); }, 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} + + )} +
  • + ))} +
)}
diff --git a/packages/admin/src/features/people-management/api/hook/useDeleteInfo.ts b/packages/admin/src/features/people-management/api/hook/useDeleteInfo.ts index a384c0c..d292d43 100644 --- a/packages/admin/src/features/people-management/api/hook/useDeleteInfo.ts +++ b/packages/admin/src/features/people-management/api/hook/useDeleteInfo.ts @@ -1,4 +1,6 @@ +import { getApplicantListPath } from "../applicant-list.api"; import { deleteInfo } from "../delete-info.api"; +import { queryClient } from "@/shared"; import { useMutation } from "@tanstack/react-query"; export const useDeleteInfo = (id: number) => { @@ -6,6 +8,8 @@ export const useDeleteInfo = (id: number) => { mutationFn: () => deleteInfo(id), onSuccess: () => { alert("참가자 정보가 삭제되었습니다."); + + queryClient.refetchQueries({ queryKey: [getApplicantListPath()] }); }, onError: (error) => { console.error(error); diff --git a/packages/admin/src/features/people-management/api/hook/usePutDepositCheck.ts b/packages/admin/src/features/people-management/api/hook/usePutDepositCheck.ts index d033e06..25f6f40 100644 --- a/packages/admin/src/features/people-management/api/hook/usePutDepositCheck.ts +++ b/packages/admin/src/features/people-management/api/hook/usePutDepositCheck.ts @@ -1,5 +1,7 @@ +import { getApplicantListPath } from "../applicant-list.api"; import { putDepositCheck } from "../deposit-check"; import { DepositCheckResponse } from "../types"; +import { queryClient } from "@/shared"; import { useMutation, UseMutationResult } from "@tanstack/react-query"; export const usePutDepositCheck = (id: number): UseMutationResult => { @@ -7,9 +9,12 @@ export const usePutDepositCheck = (id: number): UseMutationResult putDepositCheck(id), onSuccess: () => { alert("입금 완료로 상태가 변경되었습니다."); + + queryClient.invalidateQueries({ queryKey: [getApplicantListPath()] }); }, onError: (error) => { console.error("입금 완료 상태 변경에 실패했습니다.", error); + alert("입금 완료 상태 변경에 실패했습니다."); }, });