feat: 맵 페이지 진입 포커스 처리, 주문 페이지 수정사항 반영

apps/nowait-user/src/components/EmptyPage.tsx

@@ -26,12 +26,12 @@ const EmptyPage = ({ mode, title, buttonText }: PropsType) => {
         <SmallActionButton
           mode={mode}
           type="button"
-          ariaLabel="메뉴 추가"
+          ariaLabel="주문하기"
           onClick={() => navigate(`/${storeId}`)}
         >
           <h1>{buttonText}</h1>
-          <span>
-            <Add className="w-4 h-4" fill="currentColor" />
+          <span className="block w-4 h-4 mb-0.5">
+            <Add className="w-full h-full" fill="currentColor" />
           </span>
         </SmallActionButton>
       </div>

apps/nowait-user/src/components/SmallActionButton.tsx

@@ -1,5 +1,5 @@
 interface PropsType {
-  mode? : "default" | "orderDetails"
+  mode?: "default" | "orderDetails";
   type?: "button" | "submit" | "reset";
   ariaLabel: string;
   children: React.ReactNode;
@@ -18,10 +18,16 @@ export const SmallActionButton = ({
     <button
       type={type}
       aria-label={ariaLabel}
-      className={`${className} py-2 px-4 rounded-[12px] border-1 ${mode==="default" ? "border-[#ececec] text-black-70" : "border-[#dddddd] text-black-80"}`}
+      className={`${className} py-2 px-4 rounded-[12px] border-1 ${
+        mode === "default" ? "border-[#ececec] " : "border-[#dddddd]"
+      }`}
       onClick={onClick}
     >
-      <div className="flex items-center justify-center gap-1 text-[14px] font-bold">
+      <div
+        className={`flex items-center justify-center text-[14px] font-bold ${
+          mode === "default" ? "text-black-70" : "text-black-80"
+        }`}
+      >
         {children}
       </div>
     </button>

apps/nowait-user/src/components/order/TotalButton.tsx

@@ -1,6 +1,6 @@
 import { sumQuantity, sumTotalPrice } from "../../utils/sumUtils";
 import { useCartStore } from "../../stores/cartStore";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import NumberFlow from "@number-flow/react";
 
 interface PropsType {
@@ -18,8 +18,7 @@ const TotalButton = ({
   const baseTotal = sumTotalPrice(cart);
   const [price, setPrice] = useState(baseTotal);
   const [trend, setTrend] = useState(0);
-  console.log(trend);
-  console.log(addedPrice);
+
   useEffect(() => {
     if (addedPrice !== undefined) {
       setTrend(1);
@@ -49,4 +48,4 @@ const TotalButton = ({
   );
 };
 
-export default TotalButton;
+export default React.memo(TotalButton)

apps/nowait-user/src/pages/NotFound/NotFound.tsx

@@ -3,13 +3,8 @@ const NotFound = () => {
   return (
     <main className="w-full min-h-dvh flex justify-center items-center">
       <div className="flex flex-col justify-center items-center text-center">
-      <img src={NotFoundImage} width="150px" height="150px" alt="페이지를 찾을 수 없습니다" />
+      <img src={NotFoundImage} width="175px" height="150px" alt="페이지를 찾을 수 없습니다" />
       <h1 className="text-headline-24-bold mb-[14px]">페이지를 찾을 수 없어요</h1>
-      <h2 className="text-16-regular text-black-70">
-        페이지가 존재하지 않거나, 사용할 수 없는 페이지입니다.
-        <br />
-        입력하신 주소가 정확한지 다시 한번 확인해 주세요.
-      </h2>
       </div>
     </main>
   );

apps/nowait-user/src/pages/order/home/StorePage.tsx

@@ -23,24 +23,30 @@ const StorePage = () => {
 
   //메뉴 추가 시 toast 띄우기
   useEffect(() => {
-    if (added) showToast("메뉴를 담았습니다");
-    navigate(location.pathname, { replace: true });
+    if (added) {
+      showToast("메뉴를 담았습니다");
+      navigate(location.pathname, { replace: true });
+    }
   }, [added]);
 
-    const { data: menus, isLoading } = useQuery({
+  const { data: menus, isLoading } = useQuery({
     queryKey: ["storeMenus", storeId],
     queryFn: () => getStoreMenus(storeId!),
     select: (data) => data?.response,
   });
 
-  console.log(menus,"asd")
+  console.log(menus, "asd");
   return (
     <div>
       <div className="flex flex-col flex-grow pb-[112px] min-h-dvh pt-7.5 px-5">
         <div className="flex-grow">
-          <StoreHeader storeName={menus?.storeName} isLoading={isLoading}/>
+          <StoreHeader storeName={menus?.storeName} isLoading={isLoading} />
           <SectionDivider />
-          <MenuList mode="order" menus={menus?.menuReadDto} isLoading={isLoading}/>
+          <MenuList
+            mode="order"
+            menus={menus?.menuReadDto}
+            isLoading={isLoading}
+          />
         </div>
       </div>
       {cart && cart.length > 0 && (
@@ -61,4 +67,4 @@ const StorePage = () => {
   );
 };
 
-export default StorePage;
+export default StorePage;

apps/nowait-user/src/pages/order/remittance/RemittancePage.tsx

@@ -33,6 +33,7 @@ const RemittancePage = () => {
     enabled: !!storeId,
     select: (data) => data?.response,
   });
+
   // 정보 없으면 홈으로 이동
   useEffect(() => {
     if (cart.length === 0) {

apps/nowait-user/src/pages/order/remittance/components/remitOptions/DirectRemitOption.tsx

@@ -3,12 +3,13 @@ import SlideToggle from "../SlideToggle";
 import useThrottle from "../../../../../hooks/useThrottle";
 import { useToastStore } from "../../../../../stores/toastStore";
 import { accountFormat } from "../../../../../utils/accountFormat";
+import BankImage from "../../../../../assets/bankImage.png";
 
 interface PropsType {
   remitValue: string;
   setRemitValue: React.Dispatch<React.SetStateAction<string>>;
   totalPrice: number;
-  account: string;
+  account?: string;
 }
 const DirectRemitOption = ({
   remitValue,
@@ -59,7 +60,8 @@ const DirectRemitOption = ({
           <div className="flex items-center gap-2">
             <img
               className="w-[38px] h-[38px] rounded-full"
-              src="/beef.png"
+              src={BankImage}
+              alt="계좌이체 은행 이미지"
             ></img>
             <div>
               <h1 className="text-14-semibold text-black-80">

apps/nowait-user/src/pages/order/remittance/components/remitOptions/RemitOptions.tsx

@@ -25,7 +25,7 @@ const RemitOptions = ({
   isLoading,
 }: PropsType) => {
   if (isLoading) return <RemitOptionsSkeleton />;
-
+  
   return (
     <section>
       <div className="py-7.5">
@@ -41,7 +41,7 @@ const RemitOptions = ({
             setRemitValue={setRemitValue}
           />
         ) : null}
-        {account && (
+        {account?.trim() !== "" && (
           <DirectRemitOption
             remitValue={remitValue}
             setRemitValue={setRemitValue}

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

@@ -1,33 +1,55 @@
 import BoothMarker from "../../../assets/icon/BoothMarker.svg?react";
 import BoothList from "./components/BoothList";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import BoothDetail from "./components/BoothDetail";
 import { useQuery } from "@tanstack/react-query";
 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";
 
 const MapPage = () => {
   const [selectedBooth, setSelectedBooth] = useState<number | null>(null);
   const [isDragging, setIsDragging] = useState(false);
+  const [positionX, setPositionX] = useState(0);
+  const [positionY, setPositionY] = useState(0);
+
   const { data: storeMarkers } = useQuery({
     queryKey: ["storesMarkers"],
     queryFn: getAllStores,
     select: (data) => data?.response?.storePageReadResponses,
   });
 
+  // 뷰포트 크기 계산
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const viewportWidth = viewportRef.current?.clientWidth ?? 430;
+  const viewportHeight = viewportRef.current?.clientHeight ?? 812;
+
   // 부스 + 마커 좌표
   const booths = storeMarkers?.map((booth) => ({
     ...booth,
     ...boothPosition[booth.storeId],
   }));
-
-  // 마커 클릭시 나오는 부스 정보
-  const detailBooth = booths?.find((booth) => booth.storeId === selectedBooth);
+  console.log(booths, "부스");
+  useEffect(() => {
+    if (!booths || booths.length === 0) return;
+    console.log("실행");
+    const positions = Object.values(boothPosition).map((booth) => ({
+      top: parseFloat(booth.top),
+      left: parseFloat(booth.left),
+    }));
+    const avgTop =
+      positions.reduce((sum, booth) => sum + booth.top, 0) / positions.length;
+    const avgLeft =
+      positions.reduce((sum, booth) => sum + booth.left, 0) / positions.length;
+    const initialX = -((avgLeft / 100) * 1100 - viewportWidth / 2);
+    const initialY = -((avgTop / 100) * 1100 - viewportHeight / 2);
+    setPositionX(initialX);
+    setPositionY(initialY);
+  }, [booths]);
 
   const openBoothButton = (id: number) => {
-    console.log(id);
     if (selectedBooth === id) {
       setSelectedBooth(null);
     } else {
@@ -55,16 +77,17 @@ const MapPage = () => {
               timeConstant: 0,
             }}
             dragConstraints={{
-              left: -(1100 - 430),
+              left: -(1100 - viewportWidth),
               right: 0,
-              top: -(1100 - 812),
+              top: -(1100 - viewportHeight),
               bottom: 0,
             }}
             // 클릭, 드래그 구분
             onPointerDown={() => setIsDragging(false)}
             onDragStart={() => setIsDragging(true)}
-            onPointerUp={() => {
+            onPointerUp={(e) => {
               if (!isDragging) {
+                if ((e.target as HTMLElement).closest("button")) return;
                 setSelectedBooth(null);
               }
             }}
@@ -73,6 +96,8 @@ const MapPage = () => {
               height: "1100px",
               position: "relative",
               cursor: "grab",
+              x: positionX,
+              y: positionY,
             }}
           >
             <img
@@ -83,8 +108,7 @@ const MapPage = () => {
                 pointerEvents: "none",
                 userSelect: "none",
               }}
-              // src={boothMap}
-              src="/test-map.png"
+              src={BoothMap}
               alt="축제 맵 이미지"
             />
             {/* 마커 */}
@@ -120,7 +144,9 @@ const MapPage = () => {
       </div>
       {/* 부스 리스트 */}
       {selectedBooth !== null ? (
-        <BoothDetail booth={detailBooth} />
+        <BoothDetail
+          booth={booths?.find((booth) => booth.storeId === selectedBooth)}
+        />
       ) : (
         <BoothList totalBooth={storeMarkers?.length} />
       )}

apps/nowait-user/src/pages/waiting/boothMap/constants/boothPosition.ts

@@ -2,5 +2,4 @@ export const boothPosition: Record<number, { top: string; left: string }> = {
 1 : {top:"52.5%",left:"52.0%"},
 2 : {top:"41.2%",left:"50.8%"},
 3 : {top:"64.6%",left:"53.0%"}
-
 };