readyvery · marinesnow34 · May 20, 2024 · May 20, 2024 · May 20, 2024 · May 20, 2024
diff --git a/src/Atom/status.jsx b/src/Atom/status.jsx
@@ -5,6 +5,14 @@ import { Refresh } from "../util/handleRefresh";
 
 const { persistAtom } = recoilPersist();
 
+
+// storeIdx
+export const storeIdxState = atom({
+  key: "storeIdxState",
+  default: 0,
+  effects_UNSTABLE: [persistAtom],
+});
+
 export const storeState = atom({
   key: "storeState", // 전역적으로 고유한 값
   default: false, // 초깃값

diff --git a/src/components/views/Audio/SoundComponent.jsx b/src/components/views/Audio/SoundComponent.jsx
@@ -1,27 +1,29 @@
 import React, { useEffect } from 'react';
 import { useRecoilState } from 'recoil';
-import useSound from 'use-sound';
 import { soundState } from '../../../Atom/status';
-import Very from "../../../assets/Very.mp3";
 import { IMAGES } from "../../../constants/images";
-import { useFetchWaitInfo } from '../../../hooks/useFetchWaitInfo';
+import { useFetchIntegrationInfo } from '../../../hooks/useFetchIntegrationInfo';
+
+import useSound from "use-sound";
+import Very from "../../../assets/Very.mp3";
 
 const SoundComponent = () => {
   // const audioManager = useAudioManager();
   const [soundPlay] = useSound(Very);
-  const [sound, setSound] = useRecoilState(soundState); // 소리 여부를 가져옵니다
+  const [sound, setSound] = useRecoilState(soundState); // 소리 여부
 
   const onClickHandler = () => {
     console.log(sound);
     setSound((prev) => !prev);
   }
 
-  const {data: waitData} = useFetchWaitInfo();
-  // const [soundPlay, {stop}] = useSound(Very);
+  const {
+    orders: waitData
+  } = useFetchIntegrationInfo();
 
   useEffect(() => {
     let interval = null;
-    if(sound && waitData?.data?.orders?.length > 0){
+    if(sound && waitData?.length > 0){
       interval = setInterval(() => {
         console.log('소리 출력');
         soundPlay();

diff --git a/src/components/views/Home/OrderBox.jsx b/src/components/views/Home/OrderBox.jsx
@@ -1,12 +1,26 @@
+import { useRecoilValue } from "recoil";
 import styled, { css } from "styled-components";
+import { storeIdxState } from "../../../Atom/status";
 import theme from "../../../style/theme/theme";
 
 export default function OrderBox ({ id, category, menu, clicked }) {
     const menuLen = menu.length;
+    const method = menu[0]?.options.filter((m) => m.category === "포장/매장");
+    const storeIdx = useRecoilValue(storeIdxState);
     return(
         <OrderBoxContainer clicked={clicked}>
             <OrderBoxSpan width={"15%"} size="big" align="right">{id}</OrderBoxSpan>
-            <OrderBoxSpan width={"20%"} size="big" align="center">{category === 1 ? "매장" : "픽업"}</OrderBoxSpan>
+            <OrderBoxSpan width={"20%"} size="big" align="center">{storeIdx >= 10 ? (
+                method && (
+                    method.length > 0 ? (
+                        method[0]?.name?.includes("매장") 
+                        ? method[0]?.name?.split(" ")[3] 
+                        : method[0]?.name
+                    ) : "포장"
+                )
+            ) : (
+                category === 1 ? "매장" : "픽업"
+            )}</OrderBoxSpan>
             <OrderBoxSpan width={"65%"} size="small" align="left">
                 {menuLen > 1 ? `${menu[0].name} 외 ${menuLen - 1}건` : menu[0].name}
             </OrderBoxSpan>

diff --git a/src/components/views/Home/OrderContainer.jsx b/src/components/views/Home/OrderContainer.jsx
@@ -1,41 +1,44 @@
 import React, { useContext } from "react";
 import styled from "styled-components";
 import { useFetchCompleteInfo } from "../../../hooks/useFetchCompleteInfo";
-import { useFetchMakeInfo } from "../../../hooks/useFetchMakeInfo";
-import { useFetchWaitInfo } from "../../../hooks/useFetchWaitInfo";
+import { useFetchIntegrationInfo } from "../../../hooks/useFetchIntegrationInfo";
 import { HomeContext } from "../../../pages/OrderManage/Home";
 import theme from "../../../style/theme/theme";
 import OrderBox from "./OrderBox";
 
 export default function OrderContainer () {
     const context = useContext(HomeContext);
 
-    const {data: waitData} = useFetchWaitInfo();
-    const {data: makeData} = useFetchMakeInfo();
-    const {data: completeData} = useFetchCompleteInfo();
-    // console.log(waitData);
-    // console.log(makeData);
-    // console.log(completeData);
+    // const {data: waitData} = useFetchWaitInfo();
+    // const {data: makeData} = useFetchMakeInfo();
+    const {
+        orders: waitData, 
+        integrationMakeOrders: makeData
+    } = 
+        useFetchIntegrationInfo(); // 신규 + 진행
+    const {
+        orders: completeData
+    } = useFetchCompleteInfo(); // 완료
 
     const handleOrderMenu = (dummyInfo, e) => {
-        const selectedMenu = dummyInfo.orders.filter((order) => order.idx === e);
+        const selectedMenu = dummyInfo.filter((order) => order.idx === e);
         context.setSelectedMenu(e !== context.selectedIdx ? selectedMenu : {});
         context.setSelectedIdx(e !== context.selectedIdx ? e : 0);
     }
 
-    const handleWaitOrderMenu = (e) => handleOrderMenu(waitData.data, e); // 신규 주문
-    const handleMakeOrderMenu = (e) => handleOrderMenu(makeData.data, e); // 진행 주문
-    const handleCompleteOrderMenu = (e) => handleOrderMenu(completeData.data, e); // 완료 주문
+    const handleWaitOrderMenu = (e) => handleOrderMenu(waitData, e); // 신규 주문
+    const handleMakeOrderMenu = (e) => handleOrderMenu(makeData, e); // 진행 주문
+    const handleCompleteOrderMenu = (e) => handleOrderMenu(completeData, e); // 완료 주문
 
     return(
         <Container>
             {context.status === 1 ? (
                 <>
                 <OrderBoxContainer>
-                    <OrderTitleBox>신규 {waitData?.data?.orders?.length}건</OrderTitleBox>
+                    <OrderTitleBox>신규 {waitData?.length}건</OrderTitleBox>
                     <OrderBoxWrapper>
                         {
-                            waitData && waitData?.data?.orders?.map((item) => (
+                            waitData && waitData?.map((item) => (
                                 <span onClick={() => handleWaitOrderMenu(item.idx)}>
                                     <OrderBox 
                                         id={item.orderNum}
@@ -49,10 +52,10 @@ export default function OrderContainer () {
                     </OrderBoxWrapper>
                 </OrderBoxContainer>
                 <OrderBoxContainer>
-                    <OrderTitleBox>진행 {makeData?.data?.orders?.length}건</OrderTitleBox>
+                    <OrderTitleBox>진행 {makeData?.length}건</OrderTitleBox>
                     <OrderBoxWrapper>
                     {
-                        makeData && makeData?.data?.orders?.map((item) => (
+                        makeData && makeData?.map((item) => (
                             <span onClick={() => handleMakeOrderMenu(item.idx)}>
                                 <OrderBox 
                                     id={item.orderNum}
@@ -69,7 +72,7 @@ export default function OrderContainer () {
             ) : (
                 <>
                     {
-                        completeData && completeData?.data?.orders?.map((item) => (
+                        completeData && completeData?.map((item) => (
                             <span onClick={() => handleCompleteOrderMenu(item.idx)}>
                                 <OrderBox 
                                     id={item.orderNum}

diff --git a/src/components/views/Home/ReciptBox.jsx b/src/components/views/Home/ReciptBox.jsx
@@ -1,5 +1,7 @@
 import { message } from "antd";
 import React, { useContext } from "react";
+import { useRecoilValue } from "recoil";
+import { storeIdxState } from "../../../Atom/status";
 import { config } from "../../../config/index";
 import { IMAGES } from "../../../constants/images";
 import useAcceptOrder from "../../../hooks/useAcceptOrder";
@@ -11,6 +13,7 @@ import ReciptModal from "./ReciptModal";
 
 export default function ReceiptBox ({children, modalIdx, setModalIdx}) {
     const context = useContext(HomeContext);
+    const storeIdx = useRecoilValue(storeIdxState);
 
     const { cancelOrder } = useCancelOrder();
     const { acceptOrder } = useAcceptOrder();
@@ -43,11 +46,19 @@ export default function ReceiptBox ({children, modalIdx, setModalIdx}) {
     };
 
     const selectedInfo = context.selectedMenu;
+    console.log(selectedInfo);
+    const method = 
+      selectedInfo && 
+      selectedInfo?.length > 0 && 
+      selectedInfo[0]?.foodies && 
+      selectedInfo[0]?.foodies.length > 0 && 
+      selectedInfo[0]?.foodies[0]?.options?.filter((m) => m.category === "포장/매장"); // 축제 전용 수령 방식
 
     return(
       <div className="receiptWrapper">
         {
-          selectedInfo?.length ? (
+          (selectedInfo && 
+          selectedInfo?.length) > 0 ? (
             <>
               <div className="receiptHeader">
                 <span className="receipt-header"> 주문번호 {selectedInfo[0]?.orderNum}</span>
@@ -70,7 +81,17 @@ export default function ReceiptBox ({children, modalIdx, setModalIdx}) {
             <div className="receiptTextBox">
                 <span className="receipt-text">수령방식</span>
                 <span className="receipt-text">
-                    {selectedInfo[0]?.pickUp === 1 ? "매장" : "픽업"}
+                  {
+                    method.length > 0 ? (
+                      method[0].name
+                    ) : (
+                      storeIdx < 10 ? (
+                        selectedInfo[0]?.pickUp === 1 ? "매장" : "픽업"
+                      ) : (
+                        "포장"
+                      )
+                    )
+                  }
                 </span>
             </div>
             <div className="receipt-divider" />
@@ -84,7 +105,9 @@ export default function ReceiptBox ({children, modalIdx, setModalIdx}) {
                   <span className="receipt-FoodName count">{food?.count}</span>
                 </div>
                 <div className="receiptOption">
-                  {food?.options?.map((option) => (
+                  {food?.options
+                    .filter((m) => m.category !== "포장")
+                    ?.map((option) => (
                     <span
                       className="receipt-optiontext"
                       style={{
@@ -93,7 +116,10 @@ export default function ReceiptBox ({children, modalIdx, setModalIdx}) {
                         fontWeight: "500",
                       }}
                     >
-                      └ ({option.category}) {option.name}
+                      └ {
+                          option?.category !== "포장/매장" && 
+                          `(${option.category})`
+                        } {option.name}
                     </span>
                   ))}
                 </div>
@@ -125,6 +151,7 @@ export default function ReceiptBox ({children, modalIdx, setModalIdx}) {
               context?.selectedMenu.length > 0 &&
               context?.selectedMenu[0]?.progress &&
               context?.selectedMenu[0]?.progress === "MAKE" && 
+              storeIdx < 10 && 
               <ReceiptTest color="white"/>
             }
 

diff --git a/src/components/views/Home/StatusBtn.jsx b/src/components/views/Home/StatusBtn.jsx
@@ -1,16 +1,16 @@
 import { useContext } from "react";
 import styled, { css } from "styled-components";
 import { useFetchCompleteInfo } from "../../../hooks/useFetchCompleteInfo";
-import { useFetchMakeInfo } from "../../../hooks/useFetchMakeInfo";
-import { useFetchWaitInfo } from "../../../hooks/useFetchWaitInfo";
+import { useFetchIntegrationInfo } from "../../../hooks/useFetchIntegrationInfo";
 import { HomeContext } from "../../../pages/OrderManage/Home";
 import theme from "../../../style/theme/theme";
 
 export default function StatusBtn({ status, text }) {
   const context = useContext(HomeContext);
 
-  const {refreshData: fetchWait} = useFetchWaitInfo();
-  const {refreshData: fetchMake} = useFetchMakeInfo();
+  // const {refreshData: fetchWait} = useFetchWaitInfo();
+  // const {refreshData: fetchMake} = useFetchMakeInfo();
+  const {refreshData: fetchIntegration} = useFetchIntegrationInfo();
   const {refreshData: fetchComplete} = useFetchCompleteInfo();
 
   // 처리중 | 완료 버튼 눌렀을 때
@@ -20,8 +20,7 @@ export default function StatusBtn({ status, text }) {
     context.setSelectedMenu({});
 
     if(status === 1){
-      fetchWait();
-      fetchMake();
+      fetchIntegration();
     }
     if(status === 2){
       fetchComplete();

diff --git a/src/hooks/useAcceptOrder.jsx b/src/hooks/useAcceptOrder.jsx
@@ -1,11 +1,14 @@
 import { message } from "antd";
 import { useMutation, useQueryClient } from "react-query";
+import { useRecoilValue } from "recoil";
+import { storeIdxState } from "../Atom/status";
 import commonApis from "../util/commonApis";
 import usePrintHandler from "./usePrintHandler";
 
 const useAcceptOrder = () => {
     const queryClient = useQueryClient();
     const token = localStorage.getItem("accessToken");
+    const storeIdx = useRecoilValue(storeIdxState);
 
     const onClickPrintHandler = usePrintHandler();
 
@@ -25,14 +28,12 @@ const useAcceptOrder = () => {
                 if (data.status === 200 && data.data.success === true) {
                     message.destroy();
                     message.success("주문 접수되었습니다.");
-                    queryClient.invalidateQueries({queryKey: ["get-wait"]}); // 쿼리 무효화
-                    queryClient.invalidateQueries({queryKey: ["get-make"]}); // 쿼리 무효화
-                    onClickPrintHandler();
+                    queryClient.invalidateQueries({queryKey: ["get-integration"]}); // 쿼리 무효화
+                    storeIdx < 10 && onClickPrintHandler();
                 } else {
                     message.destroy();
                     message.error("주문 접수 실패. 다시 시도해주세요.");
-                    queryClient.invalidateQueries({queryKey: ["get-wait"]}); // 쿼리 무효화
-                    queryClient.invalidateQueries({queryKey: ["get-make"]}); // 쿼리 무효화
+                    queryClient.invalidateQueries({queryKey: ["get-integration"]}); // 쿼리 무효화
                 }
             },
             onError: (err) => {

diff --git a/src/hooks/useCancelOrder.jsx b/src/hooks/useCancelOrder.jsx
@@ -22,11 +22,11 @@ const useCancelOrder = () => {
                 if (data.status === 200 && data.data.success === true) {
                     message.destroy();
                     message.success("주문 취소되었습니다.");
-                    queryClient.invalidateQueries({queryKey: ["get-wait"]});
+                    queryClient.invalidateQueries({queryKey: ["get-integration"]}); // 신규 주문 건 쿼리 무효화
                 } else {
                     message.destroy();
                     message.error("주문 취소 실패. 다시 시도해주세요.");
-                    queryClient.invalidateQueries({queryKey: ["get-wait"]});
+                    queryClient.invalidateQueries({queryKey: ["get-integration"]}); // 신규 주문 건 쿼리 무효화
                 }
             },
             onError: (err) => {

diff --git a/src/hooks/useCompleteOrder.jsx b/src/hooks/useCompleteOrder.jsx
@@ -22,19 +22,20 @@ const useCompleteOrder = () => {
                 if (data.status === 200 && data.data.success === true) {
                     message.destroy();
                     message.success("완료 처리되었습니다.");
-                    queryClient.invalidateQueries({queryKey: ["get-make"]});
-                    queryClient.invalidateQueries({queryKey: ["get-complete"]});
+                    queryClient.invalidateQueries({queryKey: ["get-integration"]}); // 진행 주문 건 쿼리 무효화
+                    //queryClient.invalidateQueries({queryKey: ["get-complete"]}); // 완료 주문 건 쿼리 무효화
                 } else {
                     message.destroy();
                     message.error("완료 처리 실패. 다시 시도해주세요.");
-                    queryClient.invalidateQueries({queryKey: ["get-make"]});
-                    queryClient.invalidateQueries({queryKey: ["get-complete"]});
+                    queryClient.invalidateQueries({queryKey: ["get-integration"]}); // 진행 주문 건 쿼리 무효화
+                    //queryClient.invalidateQueries({queryKey: ["get-complete"]}); // 완료 주문 건 쿼리 무효화
                 }
             },
             onError: (err) => {
                 console.error(err);
                 message.destroy();
                 message.error("완료 처리 중 오류가 발생하였습니다.");
+                queryClient.invalidateQueries({queryKey: ["get-integration"]}); // 진행 주문 건 쿼리 무효화
             },
         }
     );

diff --git a/src/hooks/useFetchCompleteInfo.jsx b/src/hooks/useFetchCompleteInfo.jsx
@@ -4,18 +4,18 @@ import commonApis from "../util/commonApis";
 export const useFetchCompleteInfo = () => {
     const token = localStorage.getItem("accessToken");
     const { data, error, isLoading, refetch } = useQuery(["get-complete"], () => {
-    return commonApis.get("/order?status=COMPLETE", {
-        headers: {
-            Authorization: `Bearer ${token}`
-        }
+        return commonApis.get("/order?status=COMPLETE", {
+            headers: {
+                Authorization: `Bearer ${token}`
+            }
+        });
     });
-    }, {
-        // refetchInterval: 3000,
-    })
 
     const refreshData = () => {
         refetch();
     };
 
-    return { data, isLoading, error, refreshData };
-}
+    const orders = data?.data?.orders ?? [];
+
+    return { orders, isLoading, error, refreshData };
+};