diff --git a/README.md b/README.md index 61170e4d..3e86b031 100644 --- a/README.md +++ b/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 ``` diff --git a/apps/nowait-user/src/assets/orderSuccess.png b/apps/nowait-user/src/assets/orderSuccess.png deleted file mode 100644 index 5f95a1ec..00000000 Binary files a/apps/nowait-user/src/assets/orderSuccess.png and /dev/null differ diff --git a/apps/nowait-user/src/assets/orderSuccessFallback.webp b/apps/nowait-user/src/assets/orderSuccessFallback.webp new file mode 100644 index 00000000..cdd66440 Binary files /dev/null and b/apps/nowait-user/src/assets/orderSuccessFallback.webp differ diff --git a/apps/nowait-user/src/assets/remittanceWait.png b/apps/nowait-user/src/assets/remittanceWait.png deleted file mode 100644 index b9a935cd..00000000 Binary files a/apps/nowait-user/src/assets/remittanceWait.png and /dev/null differ diff --git a/apps/nowait-user/src/assets/remittanceWaitFallback.webp b/apps/nowait-user/src/assets/remittanceWaitFallback.webp new file mode 100644 index 00000000..c429f403 Binary files /dev/null and b/apps/nowait-user/src/assets/remittanceWaitFallback.webp differ diff --git a/apps/nowait-user/src/hooks/useFallbackImage.ts b/apps/nowait-user/src/hooks/useFallbackImage.ts new file mode 100644 index 00000000..26e3ed6a --- /dev/null +++ b/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 }; +}; diff --git a/apps/nowait-user/src/pages/order/orderSuccess/OrderSuccessPage.tsx b/apps/nowait-user/src/pages/order/orderSuccess/OrderSuccessPage.tsx index e3acd18a..5cbf974a 100644 --- a/apps/nowait-user/src/pages/order/orderSuccess/OrderSuccessPage.tsx +++ b/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 ( { 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 = () => { } > 이체 대기중인 이미지

이체가 진행되고 있어요

diff --git a/apps/nowait-user/src/pages/waiting/boothMap/MapPage.tsx b/apps/nowait-user/src/pages/waiting/boothMap/MapPage.tsx index ff486865..3a5b4c1c 100644 --- a/apps/nowait-user/src/pages/waiting/boothMap/MapPage.tsx +++ b/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, }} > - { }} src={BoothMap} alt="축제 맵 이미지" - /> + /> */} {/* 마커 */}