merge to main

apps/nowait-user/.gitignore

@@ -10,6 +10,8 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+.env.development
+.env.production
 *.local
 
 # Editor directories and files

apps/nowait-user/src/api/order.ts

@@ -13,7 +13,6 @@ export const api = axios.create({
 
 const API_URI = import.meta.env.VITE_SERVER_URI;
 
-
 //주문 생성
 export const createOrder = async (
   storeId: number,
@@ -29,14 +28,14 @@ export const getOrderDetails = async (
   storeId: number | undefined,
   tableId: number
 ): Promise<OrderDetailsServerResponse> => {
-  const res = await api.get(`${API_URI}/orders/items/${storeId}/${tableId}`);
+  const res = await api.get(`/orders/items/${storeId}/${tableId}`);
   return res.data;
 };
 
 //주점 QR, 계좌번호 조회
 export const getStorePayments = async (storeId: number) => {
   try {
-    const res = await api.get<StorePaymentsResponse>(
+    const res = await axios.get<StorePaymentsResponse>(
       `${API_URI}/v1/store-payments/${storeId}`
     );
     return res.data;

apps/nowait-user/src/components/common/SuccessMessagePage.tsx

@@ -36,7 +36,9 @@ const SuccessMessagePage = ({
         <SmallActionButton
           type="button"
           ariaLabel="주문내역 확인"
-          onClick={() => navigate(`/${storeId}/orderDetails`)}
+          onClick={() =>
+            navigate(`/${storeId}/orderDetails`, { replace: true })
+          }
         >
           주문내역 확인
         </SmallActionButton>

apps/nowait-user/src/pages/order/orderDetails/OrderDetailsPage.tsx

@@ -25,25 +25,25 @@ const OrderDetailsPage = () => {
   const { storeId } = useParams();
   const tableId = localStorage.getItem("tableId");
 
-  const { data, isLoading } = useQuery({
-    queryKey: ["orderDetails", storeId, tableId],
-    queryFn: () => getOrderDetails(Number(storeId), Number(tableId!)),
-    select: (data) => data.response,
+  const { data: orderDetails, isLoading } = useQuery({
+    queryKey: ["orderDetails", storeId],
+    queryFn: () => getOrderDetails(Number(storeId!), Number(tableId!)),
+    select: (data) => data?.response,
   });
-
+  console.log(orderDetails);
   if (isLoading) return <FullPageLoader />;
   //주문내역 없을 시
-  if (!data || data?.length < 1) return <EmptyOrderDetails />;
+  if (!orderDetails || orderDetails?.length < 1) return <EmptyOrderDetails />;
 
   return (
     <div>
       <BackOnlyHeader />
       <div className="bg-black-15 min-h-screen py-[64px] px-5">
         <h1 className="text-headline-22-bold mb-[23px] text-black-90">
-          주문내역 <span className="text-primary">{data.length}건</span>
+          주문내역 <span className="text-primary">{orderDetails.length}건</span>
         </h1>
         <ul>
-          {data.map((order) => {
+          {orderDetails?.map((order) => {
             // 주문 상태에 따른 값 보여주기
             const statusData = statusMap[order?.status as OrderStatus];
             return (

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

@@ -1,6 +1,6 @@
 import { useNavigate, useParams } from "react-router-dom";
 import SuccessMessagePage from "../../../components/common/SuccessMessagePage";
-import OrderSuccess from "../../../assets/orderSuccess.webp"
+import OrderSuccess from "../../../assets/orderSuccess.webp";
 
 const OrderSuccessPage = () => {
   const navigate = useNavigate();
@@ -12,7 +12,7 @@ const OrderSuccessPage = () => {
       imageAlt="주문 완료 이미지"
       title="주문이 접수되었어요!"
       message={`입금 확인 후 조리를 진행할게요.\n조금만 기다려 주세요.`}
-      onClick={() => navigate(`/${storeId}`)}
+      onClick={() => navigate(`/${storeId}`, { replace: true })}
       buttonText="확인"
     />
   );

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

@@ -23,7 +23,7 @@ const RemittancePage = () => {
   const { cart } = useCartStore();
   const [payer, setPayer] = useState<string>("");
   const [errorMessage, setErrorMessage] = useState<string | null>("");
-  const [remitValue, setRemitValue] = useState("");
+  const [remitValue, setRemitValue] = useState<string>("");
   const totalPrice = sumTotalPrice(cart);
   const payerFocus = useRef<HTMLInputElement>(null);
 
@@ -33,16 +33,21 @@ const RemittancePage = () => {
     enabled: !!storeId,
     select: (data) => data?.response,
   });
-  console.log(remittance);
+  // 정보 없으면 홈으로 이동
+  useEffect(() => {
+    if (cart.length === 0) {
+      navigate(`/${storeId}`, { replace: true });
+    }
+  }, []);
   // 기본 선택 값 지정하기
   useEffect(() => {
     if (!remittance) return;
 
     if (!(remittance.kakaoPayUrl === "")) setRemitValue("kakao");
     else if (!(remittance.tossUrl === "")) setRemitValue("toss");
     else if (!(remittance.naverPayUrl === "")) setRemitValue("naver");
-    else if (!(remittance.accountNumber === "")) setRemitValue("remit");
-  }, []);
+    else if (!(remittance.accountNumber === "")) setRemitValue("direct");
+  }, [remittance]);
 
   const orderHandleButton = () => {
     //입금자명을 입력하지 않고 이체 버튼 클릭 시 입금자명 input으로 포커스

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

@@ -3,6 +3,7 @@ import React from "react";
 interface PropsType {
   children: React.ReactNode;
   logo?: React.ReactNode;
+  remitValue: string;
   value: string;
   name: string;
   defaultChecked?: boolean | undefined;
@@ -12,6 +13,7 @@ interface PropsType {
 const Radio = ({
   children,
   logo,
+  remitValue,
   value,
   name,
   defaultChecked,
@@ -33,6 +35,7 @@ const Radio = ({
           type="radio"
           name={name}
           value={value}
+          checked={remitValue === value}
           defaultChecked={defaultChecked}
           onChange={onChange}
           className="peer sr-only"

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

@@ -45,6 +45,7 @@ const DirectRemitOption = ({
       <Radio
         name="remit"
         value="direct"
+        remitValue={remitValue}
         onChange={(e) => setRemitValue(e.target.value)}
       >
         계좌로 직접 이체하기

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

@@ -8,39 +8,64 @@ interface PropsType {
   kakao?: string;
   toss?: string;
   naver?: string;
+  remitValue: string;
   setRemitValue: React.Dispatch<React.SetStateAction<string>>;
 }
 
-const EasyPayOptions = ({ kakao, toss, naver, setRemitValue }: PropsType) => {
+const EasyPayOptions = ({
+  kakao,
+  toss,
+  naver,
+  remitValue,
+  setRemitValue,
+}: PropsType) => {
   return (
     <div className="flex flex-col gap-3 rounded-2xl bg-[#F9F9F9] px-5 py-5">
       <RadioGroup label="간편 송금">
         {kakao && (
           <Radio
-            logo={<img src={KakaoPay} width="42px" height="18px" alt="카카오 이미지"/>}
+            logo={
+              <img
+                src={KakaoPay}
+                width="42px"
+                height="18px"
+                alt="카카오 이미지"
+              />
+            }
             name="remit"
             value="kakao"
-            defaultChecked
+            remitValue={remitValue}
             onChange={(e) => setRemitValue(e.target.value)}
           >
             카카오페이
           </Radio>
         )}
         {toss && (
           <Radio
-            logo={<img src={TossPay} width="46px" height="16px" alt="토스 이미지"/>}
+            logo={
+              <img src={TossPay} width="46px" height="16px" alt="토스 이미지" />
+            }
             name="remit"
             value="toss"
+            remitValue={remitValue}
             onChange={(e) => setRemitValue(e.target.value)}
           >
             토스
           </Radio>
         )}
         {naver && (
           <Radio
-            logo={<img src={NaverPay} width="43px" height="15px" alt="네이버 이미지"/>}
+            logo={
+              <img
+                src={NaverPay}
+                width="43px"
+                height="15px"
+                alt="네이버 이미지"
+              />
+            }
             name="remit"
             value="naver"
+            remitValue={remitValue}
             onChange={(e) => setRemitValue(e.target.value)}
           >
             네이버페이

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

@@ -24,7 +24,6 @@ const RemitOptions = ({
   account,
   isLoading,
 }: PropsType) => {
-
   if (isLoading) return <RemitOptionsSkeleton />;
 
   return (
@@ -38,6 +37,7 @@ const RemitOptions = ({
             kakao={kakao}
             toss={toss}
             naver={naver}
+            remitValue={remitValue}
             setRemitValue={setRemitValue}
           />
         ) : null}

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

@@ -7,6 +7,7 @@ import remittanceWait from "../../../assets/remittanceWait.webp";
 import CenteredContentLayout from "../../../components/layout/CenteredContentLayout";
 import BackOnlyHeader from "../../../components/BackOnlyHeader";
 import LoadingSpinner from "../../../components/LoadingSpinner";
+import { useToastStore } from "../../../stores/toastStore";
 
 const RemittanceWaitPage = () => {
   const navigate = useNavigate();
@@ -15,6 +16,7 @@ const RemittanceWaitPage = () => {
   const { storeId } = useParams();
   const tableId = localStorage.getItem("tableId");
   const { cart, clearCart } = useCartStore();
+  const { showToast } = useToastStore();
   const totalPrice = sumTotalPrice(cart);
   const [isLoading, setIsLoading] = useState(false);
 
@@ -40,11 +42,12 @@ const RemittanceWaitPage = () => {
         localStorage.setItem("depositorName", res.response.depositorName);
         //장바구니 비우기
         clearCart();
-        navigate(`/${storeId}/order/success`);
+        navigate(`/${storeId}/order/success`, { replace: true });
       } else {
         // 서버가 success:false 반환한 경우
         console.error("주문 실패:", res);
-        alert("주문 처리에 실패했습니다. 다시 시도해주세요.");
+        showToast("주문에 실패했습니다. 다시 시도해 주세요");
+        return;
       }
     } catch (error) {
       console.log(error);

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

@@ -23,13 +23,15 @@ const MapManagePage = () => {
     const x = e.clientX - rect.left;
     const y = e.clientY - rect.top;
 
-    // = offsetWidth, offsetHeight
-    const width = rect.width;
-    const height = rect.height;
+    // 실제 지도 크기
+    const MAP_WIDTH = 1100;
+    const MAP_HEIGHT = 1100;
 
     // 비율로 변환
-    const left = ((x / width) * 100).toFixed(1);
-    const top = ((y / height) * 100).toFixed(1);
+    const left = ((x / rect.width) * 100 * (rect.width / MAP_WIDTH)).toFixed(3);
+    const top = ((y / rect.height) * 100 * (rect.height / MAP_HEIGHT)).toFixed(
+      3
+    );
 
     const newMarker = {
       storeId: Number(inputId),
@@ -41,14 +43,12 @@ const MapManagePage = () => {
   };
 
   return (
-    <div className="relative left-0 top-0">
+    <div className="relative top-0 left-0 min-h-dvh w-full">
       <div
-        className="mx-auto border border-gray-300"
         style={{
           width: "430px",
-          height: "100dvh",
+          height: "100%",
           overflow: "hidden",
-          WebkitOverflowScrolling: "touch",
         }}
       >
         <motion.div
@@ -83,25 +83,33 @@ const MapManagePage = () => {
             }}
             alt="맵 생성"
           />
-
-          {markers.map((marker) => (
-            <div
-              key={marker.storeId}
-              className="absolute"
-              style={{
-                top: marker.top,
-                left: marker.left,
-                transform: "translate(-50%, -100%)",
-              }}
-            >
-              <BoothMarker />
-            </div>
-          ))}
+          <ul className="absolute top-0 left-0 w-full h-full">
+            {markers.map((marker) => (
+              <li
+                key={marker.storeId}
+                className="absolute"
+                style={{
+                  top: marker.top,
+                  left: marker.left,
+                  transform: "translate(-50%, -100%)",
+                }}
+              >
+                <BoothMarker />
+              </li>
+            ))}
+          </ul>
         </motion.div>
       </div>
       <div className="flex gap-1 fixed left-1/2 bottom-0 -translate-x-1/2 w-full">
         <Button onClick={() => setStatus(true)}>시작</Button>
         <Button onClick={() => setStatus(false)}>중지</Button>
+        <Button
+          onClick={() => {
+            setMarkers((prev) => prev.slice(0, -1));
+          }}
+        >
+          뒤로가기
+        </Button>
         <Button
           onClick={() => {
             setMarkers([]);
@@ -118,6 +126,7 @@ const MapManagePage = () => {
               })
               .join(",\n");
             navigator.clipboard.writeText(`${formattedMarkers}\n`);
+            alert("복사 완료");
           }}
         >
           복사