From 96654fd15a9e46bf0a062da68cdc96d8e6f3e08e Mon Sep 17 00:00:00 2001 From: seyun31 <2ne1jenna@naver.com> Date: Fri, 12 Sep 2025 02:32:16 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20toast=20=EC=95=8C=EB=A6=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 25 ++++++++++++++++++++++++- package.json | 3 ++- src/App.tsx | 14 ++++++++++++++ src/components/EventTable.tsx | 26 ++++++++++++++------------ src/page/login.tsx | 2 +- src/utils/alert.ts | 32 ++++++++++++++++++++++++++++++++ 6 files changed, 87 insertions(+), 15 deletions(-) create mode 100644 src/utils/alert.ts diff --git a/package-lock.json b/package-lock.json index 8889e34..0aa3c38 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,8 @@ "react": "^19.1.1", "react-dom": "^19.1.1", "react-icons": "^5.5.0", - "react-router-dom": "^7.8.2" + "react-router-dom": "^7.8.2", + "react-toastify": "^11.0.5" }, "devDependencies": { "@eslint/js": "^9.33.0", @@ -2253,6 +2254,15 @@ "node": ">=18" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -3684,6 +3694,19 @@ "react-dom": ">=18" } }, + "node_modules/react-toastify": { + "version": "11.0.5", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz", + "integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==", + "license": "MIT", + "dependencies": { + "clsx": "^2.1.1" + }, + "peerDependencies": { + "react": "^18 || ^19", + "react-dom": "^18 || ^19" + } + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", diff --git a/package.json b/package.json index 505b2db..882a942 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,8 @@ "react": "^19.1.1", "react-dom": "^19.1.1", "react-icons": "^5.5.0", - "react-router-dom": "^7.8.2" + "react-router-dom": "^7.8.2", + "react-toastify": "^11.0.5" }, "devDependencies": { "@eslint/js": "^9.33.0", diff --git a/src/App.tsx b/src/App.tsx index 5480fff..8157e02 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,5 @@ import { Routes, Route } from 'react-router-dom'; +import { ToastContainer, Bounce } from 'react-toastify'; import Home from './page/home'; import Login from './page/login'; import Event from './page/event'; @@ -13,6 +14,19 @@ const App: React.FC = () => { } /> } /> + ); }; diff --git a/src/components/EventTable.tsx b/src/components/EventTable.tsx index da811dd..8735607 100644 --- a/src/components/EventTable.tsx +++ b/src/components/EventTable.tsx @@ -1,5 +1,6 @@ import { useState } from 'react'; import QRScannerComponent from './QRScanner'; +import { showError, showSuccess, showWarning } from '../utils/alert'; import { getActivityById, updateActivity } from '../api/activity/put-activities'; import { deleteActivity } from '../api/activity/delete-acitivites'; import { GetActivities } from '../api/activity/get-activities'; @@ -26,7 +27,7 @@ const EventTable: React.FC = ({ rows, setRows }) => { const handleQRClose = () => { - // URL 파라미터에서 id 제거 + // URL 파라미터에서 ID 제거 const url = new URL(window.location.href); url.searchParams.delete('id'); window.history.pushState({}, '', url); @@ -68,19 +69,20 @@ const EventTable: React.FC = ({ rows, setRows }) => { setShowEditModal(true); } else { console.log('활동 정보를 찾을 수 없습니다.'); - alert('활동 정보를 불러올 수 없습니다.'); + showError('활동 정보를 불러올 수 없습니다.'); } } catch (error) { console.error('수정 모달 열기 오류:', error); - alert('오류가 발생했습니다.'); + showError('오류가 발생했습니다.'); } }; const handleDelete = async (activityId: number) => { - if (confirm('정말로 이 활동을 삭제하시겠습니까?')) { + const confirmed = await showWarning('정말로 이 활동을 삭제하시겠습니까?'); + if (confirmed) { const success = await deleteActivity(activityId); if (success) { - alert('활동이 삭제되었습니다.'); + showSuccess('활동이 삭제되었습니다.'); // 삭제 후 자동으로 정보 업데이트 const updatedActivities = await GetActivities(); const formattedRows = updatedActivities.map(activity => ({ @@ -90,7 +92,7 @@ const EventTable: React.FC = ({ rows, setRows }) => { })); setRows(formattedRows); } else { - alert('삭제에 실패했습니다.'); + showError('삭제에 실패했습니다.'); } } }; @@ -111,13 +113,13 @@ const EventTable: React.FC = ({ rows, setRows }) => { e.preventDefault(); if (!eventName.trim()) { - alert('행사 이름을 입력하세요.'); + showError('행사 이름을 입력하세요.'); return; } const pointValue = parseInt(pointAmount, 10); if (isNaN(pointValue)) { - alert('올바른 포인트 값을 입력하세요.'); + showError('올바른 포인트 값을 입력하세요.'); return; } @@ -125,7 +127,7 @@ const EventTable: React.FC = ({ rows, setRows }) => { // 수정 모드 const success = await updateActivity(editingActivityId, eventName.trim(), pointValue); if (success) { - alert('행사가 수정되었습니다.'); + showSuccess('행사가 수정되었습니다.'); handleCloseModal(); // 수정 후 자동으로 정보 업데이트 const updatedActivities = await GetActivities(); @@ -136,13 +138,13 @@ const EventTable: React.FC = ({ rows, setRows }) => { })); setRows(formattedRows); } else { - alert('행사 수정에 실패했습니다.'); + showError('행사 수정에 실패했습니다.'); } } else { // 생성 모드 const success = await PostMemberActivities(eventName.trim(), pointValue); if (success) { - alert('행사가 생성되었습니다.'); + showSuccess('행사가 생성되었습니다.'); handleCloseModal(); // 생성 후 자동으로 정보 업데이트 const updatedActivities = await GetActivities(); @@ -153,7 +155,7 @@ const EventTable: React.FC = ({ rows, setRows }) => { })); setRows(formattedRows); } else { - alert('행사 생성에 실패했습니다.'); + showError('행사 생성에 실패했습니다.'); } } }; diff --git a/src/page/login.tsx b/src/page/login.tsx index 4153ce1..7b7de5c 100644 --- a/src/page/login.tsx +++ b/src/page/login.tsx @@ -15,7 +15,7 @@ const Login: React.FC = () => { placeholder="Enter ID"> */} - diff --git a/src/utils/alert.ts b/src/utils/alert.ts new file mode 100644 index 0000000..8f12c26 --- /dev/null +++ b/src/utils/alert.ts @@ -0,0 +1,32 @@ +import { toast } from "react-toastify"; + +export const showError = (message: string) => { + toast.error(message, { + position: "top-center", + autoClose: 2500, + icon: false, + }); +}; + +export const showSuccess = (message: string) => { + toast.success(message, { + position: "top-center", + autoClose: 2500, + icon: false, + }); +}; + +export const showWarning = (message: string): Promise => { + return new Promise((resolve) => { + const result = window.confirm(message); + resolve(result); + }); +}; + +export const showConfirm = (message: string): Promise => { + return new Promise((resolve) => { + const result = window.confirm(message); + resolve(result); + }); +}; + From 08a5b0260487be594f47bba5e4f7db874720b5d0 Mon Sep 17 00:00:00 2001 From: seyun31 <2ne1jenna@naver.com> Date: Fri, 12 Sep 2025 02:50:58 +0900 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20QR=20=EC=8A=A4=EC=BA=94?= =?UTF-8?q?=EC=97=90=EC=84=9C=20alert=20=EB=B6=80=EB=B6=84=20toast=20?= =?UTF-8?q?=EC=95=8C=EB=A6=BC=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/activity/post-memebr-activities.ts | 10 +++++---- src/components/QRScanner.tsx | 26 +++++++++------------- 2 files changed, 16 insertions(+), 20 deletions(-) diff --git a/src/api/activity/post-memebr-activities.ts b/src/api/activity/post-memebr-activities.ts index 677329a..b82aab5 100644 --- a/src/api/activity/post-memebr-activities.ts +++ b/src/api/activity/post-memebr-activities.ts @@ -1,4 +1,5 @@ const API_BASE_URL = import.meta.env.VITE_API_BASE_URL; +import { showError } from '../../utils/alert'; export interface MemberActivityRequest { activityId: number; @@ -26,18 +27,19 @@ export async function PostMemberActivities(activityId: number, memberId: number) if (!res.ok) { switch (res.status) { case 400: - alert("잘못된 요청입니다. 입력 데이터를 확인해주세요."); + showError("잘못된 요청입니다. 관리자에게 문의해주세요."); break; case 404: - alert("해당 활동 또는 회원을 찾을 수 없습니다."); + showError("해당 활동 또는 회원을 찾을 수 없습니다. 관리자에게 문의해주세요."); break; case 409: - alert("이미 참여한 활동입니다."); + showError("이미 참여한 활동입니다."); break; default: - alert("요청 처리 중 오류가 발생했습니다."); + showError("요청 처리 중 오류가 발생했습니다. 관리자에게 문의해주세요."); break; } + return false; } return true; diff --git a/src/components/QRScanner.tsx b/src/components/QRScanner.tsx index 7af9ae6..a1c7cb5 100644 --- a/src/components/QRScanner.tsx +++ b/src/components/QRScanner.tsx @@ -1,5 +1,6 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import QrScanner from 'qr-scanner'; +import { showSuccess, showError } from '../utils/alert'; import { GetQRCode } from '../api/activity/get-qrcode'; import { PostMemberActivities } from '../api/activity/post-memebr-activities'; @@ -10,7 +11,6 @@ interface QRScannerProps { const QRScannerComponent: React.FC = ({ onClose }) => { const videoRef = useRef(null); const [scanner, setScanner] = useState(null); - const [error, setError] = useState(''); const [isProcessing, setIsProcessing] = useState(false); const lastProcessedQR = useRef(''); const lastScanTime = useRef(0); @@ -40,13 +40,13 @@ const QRScannerComponent: React.FC = ({ onClose }) => { lastProcessedQR.current = uuid; lastScanTime.current = currentTime; setIsProcessing(true); - setError(''); + // setError(''); try { // 로컬 저장소에서 활동 ID 가져오기 const storedActivityId = localStorage.getItem('currentActivityId'); if (!storedActivityId) { - setError('활동 ID를 찾을 수 없습니다.'); + showError('활동 ID를 찾을 수 없습니다.'); setIsProcessing(false); isThrottled.current = false; return; @@ -55,20 +55,16 @@ const QRScannerComponent: React.FC = ({ onClose }) => { // QR 코드 UUID로 멤버 정보 조회 const qrResult = await GetQRCode(uuid); if (!qrResult.success || !qrResult.data) { - alert(qrResult.error || 'QR 코드를 통한 멤버 정보 조회에 실패했습니다.'); + showError('QR 코드를 새로고침 후 다시 시도하세요.'); + setIsProcessing(false); isThrottled.current = false; - if (scanner) { - scanner.stop(); - scanner.destroy(); - } - onClose(); return; } // 멤버 활동 참여 등록 const success = await PostMemberActivities(parseInt(storedActivityId), qrResult.data.memberId); if (success) { - alert(`${qrResult.data.name}님이 참석했습니다.`); + showSuccess(`${qrResult.data.name}님이 참석했습니다.`); // 성공 후 다시 스캔 가능하도록 설정 setTimeout(() => { setIsProcessing(false); @@ -83,7 +79,7 @@ const QRScannerComponent: React.FC = ({ onClose }) => { } catch (error) { console.error('QR 코드 처리 중 오류 발생:', error); - alert('QR 코드 처리 중 오류가 발생했습니다. 다시 시도해주세요.'); + showError('QR 코드 처리 중 오류가 발생했습니다. 다시 시도해주세요.'); setIsProcessing(false); isThrottled.current = false; } @@ -112,7 +108,7 @@ const QRScannerComponent: React.FC = ({ onClose }) => { qrScanner.start().catch((err) => { console.error('QR Scanner Error:', err); if (isActive) { - setError('카메라에 접근할 수 없습니다. 카메라 권한을 확인해주세요.'); + showError('카메라에 접근할 수 없습니다. 카메라 권한을 확인해주세요.'); } }); @@ -137,9 +133,7 @@ const QRScannerComponent: React.FC = ({ onClose }) => { - {error ? ( -
{error}
- ) : ( + {
- )} + }
diff --git a/src/utils/alert.ts b/src/utils/alert.ts deleted file mode 100644 index 8f12c26..0000000 --- a/src/utils/alert.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { toast } from "react-toastify"; - -export const showError = (message: string) => { - toast.error(message, { - position: "top-center", - autoClose: 2500, - icon: false, - }); -}; - -export const showSuccess = (message: string) => { - toast.success(message, { - position: "top-center", - autoClose: 2500, - icon: false, - }); -}; - -export const showWarning = (message: string): Promise => { - return new Promise((resolve) => { - const result = window.confirm(message); - resolve(result); - }); -}; - -export const showConfirm = (message: string): Promise => { - return new Promise((resolve) => { - const result = window.confirm(message); - resolve(result); - }); -}; - diff --git a/src/utils/alert.tsx b/src/utils/alert.tsx new file mode 100644 index 0000000..78eec42 --- /dev/null +++ b/src/utils/alert.tsx @@ -0,0 +1,72 @@ +import { toast } from "react-toastify"; + +export const showError = (message: string) => { + toast.error(message, { + position: "top-center", + autoClose: 2500, + icon: false, + }); +}; + +export const showSuccess = (message: string) => { + toast.success(message, { + position: "top-center", + autoClose: 2500, + icon: false, + }); +}; + +export const showWarning = (message: string): Promise => { + return new Promise((resolve) => { + const result = window.confirm(message); + resolve(result); + }); +}; + +export const showConfirm = (message: string): Promise => { + return new Promise((resolve) => { + const result = window.confirm(message); + resolve(result); + }); +}; + +export const showCustomConfirm = (message: string): Promise => { + return new Promise((resolve) => { + toast( + ({ closeToast }) => ( +
+
{message}
+
+ + +
+
+ ), + { + position: "top-center", + autoClose: false, + closeOnClick: false, + closeButton: false, + draggable: false, + className: "flex justify-center items-center text-center", + } + ); + }); +}; +