✨ feat:토스트 추가

- 좌석 선택/취소시 토스트 추가
- 좌석 api 실패시 토스트 추가
- 예매내역 삭제,실패시 토스트 추가
Issue Resolved: #

Author: qkdl60

front/src/App.tsx

@@ -5,13 +5,15 @@ import ToastContainer from '@/components/Toast/ToastContainer.tsx';
 import AuthProvider from '@/providers/AuthProvider';
 import QueryProvider from '@/providers/QueryProvider';
 import router from '@/routes/index';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 function App() {
   return (
     <QueryProvider>
       <AuthProvider>
         <RouterProvider router={router} />
         <ToastContainer />
+        <ReactQueryDevtools />
       </AuthProvider>
     </QueryProvider>
   );

front/src/components/Captcha/index.tsx

@@ -32,7 +32,7 @@ export default function Captcha({ goNextStep }: CaptchaProps) {
       setIsValid(false);
       if (InputRef.current) {
         const input = InputRef.current! as HTMLInputElement;
-        input.value = '';
+        setInputData('');
         input.focus();
       }
     }

front/src/components/Navbar/index.tsx

@@ -7,6 +7,7 @@ import { postLogout } from '@/api/user.ts';
 import { useAuthContext } from '@/hooks/useAuthContext.tsx';
 
 import ReservationCard from '@/components/Navbar/ReservationCard.tsx';
+import { toast } from '@/components/Toast/index.ts';
 import Button from '@/components/common/Button';
 import Icon from '@/components/common/Icon';
 import Popover from '@/components/common/Popover';
@@ -34,6 +35,7 @@ export default function Navbar() {
     mutationKey: RESERVATION_DELETE_MUTATION_KEY,
     mutationFn: deleteReservation,
     onSuccess: () => {
+      toast.warning('예매내역이 삭제되었습니다.');
       return queryClient.refetchQueries({ queryKey: ['reservation'] });
     },
   });
@@ -83,7 +85,7 @@ export default function Navbar() {
                 )}>
                 <h3 className="px-4 text-left text-heading3">예매 현황</h3>
                 <Separator direction="row" />
-                <div className="flex max-h-[800px] flex-grow flex-col justify-center gap-6 overflow-y-scroll pr-4">
+                <div className="flex max-h-[800px] flex-grow flex-col gap-6 overflow-y-scroll pr-4">
                   {isReservation ? (
                     reservations.map((reservation) => (
                       <ReservationCard
@@ -94,7 +96,9 @@ export default function Navbar() {
                       />
                     ))
                   ) : (
-                    <div className="w-full text-heading2 text-typo-sub">현재 예매된 내역이 없습니다. </div>
+                    <div className="m-auto w-full text-heading2 text-typo-sub">
+                      현재 예매된 내역이 없습니다.{' '}
+                    </div>
                   )}
                 </div>
                 <Separator direction="row" />

front/src/components/Toast/Toast.tsx

@@ -51,7 +51,7 @@ export default function Toast({ type, text, close }: ToastProps) {
 }
 
 const toastVariant = cva(
-  `flex gap-4 px-4 py-3 relative h-fit w-[300px] items-center rounded border whitespace-pre-line`,
+  `flex gap-4 px-4 py-3 relative h-fit w-[300px] items-center rounded border whitespace-pre-line z-20`,
   {
     variants: {
       type: {

front/src/components/Toast/ToastContainer.tsx

@@ -36,7 +36,7 @@ export default function ToastContainer() {
     };
   }, []);
   return (
-    <div className="fixed left-8 top-20 flex flex-col gap-5 overflow-visible transition-all">
+    <div className="fixed left-8 top-20 z-20 flex flex-col gap-5 overflow-visible transition-all">
       {toastList.map((toast) => (
         <Toast
           key={toast.id}

front/src/components/common/Popover.tsx

@@ -115,7 +115,7 @@ const Content = ({ children }: IContent) => {
       {canOpen &&
         createPortal(
           <div
-            className="fixed z-[999] cursor-default"
+            className="fixed z-10 cursor-default"
             style={{
               top: position.x + position.y + 24,
               right: 32,

front/src/pages/ReservationPage/SectionAndSeat.tsx

@@ -4,6 +4,7 @@ import { BASE_URL } from '@/api/axios.ts';
 import { PostSeatData, postSeat } from '@/api/booking.ts';
 import { postReservation } from '@/api/reservation.ts';
 
+import { toast } from '@/components/Toast/index.ts';
 import Button from '@/components/common/Button.tsx';
 import Icon from '@/components/common/Icon.tsx';
 import Separator from '@/components/common/Separator.tsx';
@@ -54,6 +55,7 @@ export default function SectionAndSeat({
         (seat) => seat.seatIndex !== seatIndex || seat.sectionIndex !== sectionIndex,
       );
       setSelectedSeats([...filtered]);
+      toast.error('좌석 선택/취소에 실패했습니다');
     },
     throwOnError: false,
   });
@@ -241,7 +243,13 @@ const renderSeatMap = (
   setSelectedSeats: (seats: SelectedSeat[]) => void,
   maxSelectCount: number,
   selectedSeats: SelectedSeat[],
-  pickSeat: (data: PostSeatData) => void,
+  pickSeat: (
+    data: PostSeatData,
+    mutateOption?: {
+      onSuccess?: () => void;
+      onError?: () => void;
+    },
+  ) => void,
   eventId: number,
   reservingList: PostSeatData[],
 ) => {
@@ -278,23 +286,37 @@ const renderSeatMap = (
           const selectedCount = selectedSeats.length;
           if (isMine) {
             const filtered = selectedSeats.filter((seat) => seatName !== seat.name);
-            pickSeat({
-              sectionIndex: selectedSectionIndex,
-              seatIndex: index,
-              expectedStatus: 'deleted',
-              eventId,
-            });
+            pickSeat(
+              {
+                sectionIndex: selectedSectionIndex,
+                seatIndex: index,
+                expectedStatus: 'deleted',
+                eventId,
+              },
+              {
+                onSuccess: () => {
+                  toast.warning(`${seatName!} 좌석을 취소했습니다`);
+                },
+              },
+            );
             setSelectedSeats(filtered);
             return;
           }
 
           if (maxSelectCount <= selectedCount) return;
-          pickSeat({
-            sectionIndex: selectedSectionIndex,
-            seatIndex: index,
-            expectedStatus: 'reserved',
-            eventId,
-          });
+          pickSeat(
+            {
+              sectionIndex: selectedSectionIndex,
+              seatIndex: index,
+              expectedStatus: 'reserved',
+              eventId,
+            },
+            {
+              onSuccess: () => {
+                toast.success(`${seatName!} 좌석 선택에\n성공했습니다`);
+              },
+            },
+          );
           setSelectedSeats([
             ...selectedSeats,
             { seatIndex: index, sectionIndex: selectedSectionIndex, name: seatName! },

front/src/pages/ReservationPage/index.tsx

@@ -25,6 +25,7 @@ export default function ReservationPage() {
   const { data: event } = useSuspenseQuery<EventDetail, CustomError>({
     queryKey: [`event`, eventId],
     queryFn: getEventDetail(Number(eventId)),
+    staleTime: Infinity,
   });
   const { place } = event;
   const { data: placeInformation } = useQuery<PlaceInformation, CustomError>({