feat: fallback 이미지 추가

README.md

@@ -65,8 +65,8 @@ yarn dev:user    # 사용자용 앱 실행
 yarn dev:admin   # 관리자용 앱 실행
 ```
 
-## 🔗배포주소
+## 🔗 배포주소
 ```txt
-사용자: https://www.nowait.co.kr
+사용자: https://www.nowait-user.vercel.app
 관리자: https://www.nowait-admin.com
 ```

apps/nowait-user/src/hooks/useFallbackImage.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+
+export const useFallbackImage = (src: string) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [loadedSrc, setLoadedSrc] = useState("");
+  useEffect(() => {
+    const img = new Image();
+    img.src = src;
+    img.onload = () => {
+      setLoadedSrc(src);
+      setIsLoaded(true);
+    };
+  }, [src]);
+  return { isLoaded, loadedSrc };
+};

apps/nowait-user/src/pages/order/orderSuccess/OrderSuccessPage.tsx

@@ -1,14 +1,17 @@
 import { useNavigate, useParams } from "react-router-dom";
 import SuccessMessagePage from "../../../components/common/SuccessMessagePage";
+import OrderSuccessFallback from "../../../assets/orderSuccessFallback.webp";
 import OrderSuccess from "../../../assets/orderSuccess.webp";
+import { useFallbackImage } from "../../../hooks/useFallbackImage";
 
 const OrderSuccessPage = () => {
   const navigate = useNavigate();
   const { storeId } = useParams();
+  const { isLoaded, loadedSrc } = useFallbackImage(OrderSuccess);
 
   return (
     <SuccessMessagePage
-      ImageSrc={OrderSuccess}
+      ImageSrc={isLoaded ? loadedSrc : OrderSuccessFallback}
       imageAlt="주문 완료 이미지"
       title="주문이 접수되었어요!"
       message={`입금 확인 후 조리를 진행할게요.\n조금만 기다려 주세요.`}

apps/nowait-user/src/pages/order/remittenceWait/RemittanceWaitPage.tsx

@@ -4,10 +4,12 @@ import { sumTotalPrice } from "../../../utils/sumUtils";
 import { createOrder } from "../../../api/order";
 import { useState } from "react";
 import remittanceWait from "../../../assets/remittanceWait.webp";
+import remittanceWaitFallback from "../../../assets/remittanceWaitFallback.webp";
 import CenteredContentLayout from "../../../components/layout/CenteredContentLayout";
 import BackOnlyHeader from "../../../components/BackOnlyHeader";
 import LoadingSpinner from "../../../components/LoadingSpinner";
 import { useToastStore } from "../../../stores/toastStore";
+import { useFallbackImage } from "../../../hooks/useFallbackImage";
 
 const RemittanceWaitPage = () => {
   const navigate = useNavigate();
@@ -18,7 +20,8 @@ const RemittanceWaitPage = () => {
   const { cart, clearCart } = useCartStore();
   const { showToast } = useToastStore();
   const totalPrice = sumTotalPrice(cart);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false); // 중복 요청 방지
+  const { isLoaded, loadedSrc } = useFallbackImage(remittanceWait);
 
   const orderButton = async () => {
     try {
@@ -62,10 +65,10 @@ const RemittanceWaitPage = () => {
         }
       >
         <img
-          src={remittanceWait}
-          width="150px"
-          height="150px"
-          alt="이체 대기중인 이미지"
+          src={isLoaded ? loadedSrc : remittanceWaitFallback}
+          alt="입금 대기중인 이미지"
+          width={"150px"}
+          height={"150px"}
         />
         <h1 className="text-headline-24-bold mb-2">이체가 진행되고 있어요</h1>
         <h2 className="whitespace-pre-line text-16-regular text-black-70 mb-3.5">

apps/nowait-user/src/pages/waiting/boothMap/MapPage.tsx

@@ -1,4 +1,3 @@
-import BoothMarker from "../../../assets/icon/BoothMarker.svg?react";
 import BoothList from "./components/BoothList";
 import { useEffect, useRef, useState } from "react";
 import BoothDetail from "./components/BoothDetail";
@@ -7,7 +6,6 @@ import { getAllStores } from "../../../api/reservation";
 import { motion } from "framer-motion";
 import MapHeader from "./components/MapHeader";
 import { boothPosition } from "./constants/boothPosition";
-import BoothMap from "../../../assets/boothMap.png";
 import type { StoreType } from "../../../types/wait/store";
 
 interface BoothWithPosition extends StoreType {
@@ -108,7 +106,7 @@ const MapPage = () => {
               y: positionY,
             }}
           >
-            <img
+            {/* <img
               style={{
                 width: "100%",
                 height: "100%",
@@ -118,7 +116,7 @@ const MapPage = () => {
               }}
               src={BoothMap}
               alt="축제 맵 이미지"
-            />
+            /> */}
             {/* 마커 */}
             <ul className="absolute top-0 left-0 w-full h-full">
               {boothsWithPosition?.map((booth) => (
@@ -142,7 +140,6 @@ const MapPage = () => {
                       openBoothButton(booth.storeId);
                     }}
                   >
-                    <BoothMarker />
                   </button>
                 </li>
               ))}