diff --git a/src/assets/booth_stamp_success.png b/src/assets/booth_stamp_success.png new file mode 100644 index 0000000..27e06b2 Binary files /dev/null and b/src/assets/booth_stamp_success.png differ diff --git a/src/components/stamp/BoothStamp.tsx b/src/components/stamp/BoothStamp.tsx index 7a7a6ae..93af55c 100644 --- a/src/components/stamp/BoothStamp.tsx +++ b/src/components/stamp/BoothStamp.tsx @@ -4,7 +4,7 @@ import QrScanner from 'qr-scanner' import StampImg from '../../assets/duksung_fantasy_transparent.png' import ComputerIcon from '../../assets/booth_stamp_computer.svg' import ComputerSuccessIcon from '../../assets/booth_stamp_computer_success.svg' -import StampIcon from '../../assets/booth_stamp_success.svg' +import StampIcon from '../../assets/booth_stamp_success.png' import ScanModal from './ScanModal' import Modal from '../Modal' import BoothData from '../../data/boothData.json' @@ -18,6 +18,7 @@ const BoothStamp = () => { }>({}) const [showModal, setShowModal] = useState(false) + const [isValidQR, setIsValidQR] = useState(false) const [content, setContent] = useState('') const videoRef = useRef(null) @@ -25,20 +26,25 @@ const BoothStamp = () => { const handleScan = (result: QrScanner.ScanResult) => { if (result) { - console.log(result) - scannerRef.current?.stop() const boothId = result.data - const content = BoothData.find((booth) => String(booth.id) === boothId) - setContent(content?.content ?? '') - - const updatedBooths = { ...scannedBooth, [boothId]: true } - - setScannedBooth(updatedBooths) - - localStorage.setItem('scannedBooths', JSON.stringify(updatedBooths)) + const booth = BoothData.find((booth) => String(booth.id) === boothId) // 해당 부스 객체 + + if (!booth) { + setIsValidQR(false) + setContent( + '유효하지 않은 QR입니다. 올바른 코드를 스캔했는지 확인해주세요.', + ) + } else { + setIsValidQR(true) + setContent(booth?.content ?? '') + + const updatedBooths = { ...scannedBooth, [boothId]: true } + setScannedBooth(updatedBooths) + localStorage.setItem('scannedBooths', JSON.stringify(updatedBooths)) + } } setTimeout(() => { @@ -96,7 +102,7 @@ const BoothStamp = () => { /> -
+
{Array.from({ length: 17 }).map((_, idx) => (
{ )} -
+