Merge pull request #56 from 1223v/wait

Fix: 동기 비동기 문제
readyvery · Dec 3, 2023 · c29700a · c29700a
2 parents 7beaf5c + b613586
commit c29700a
Show file tree

Hide file tree

Showing 5 changed files with 159 additions and 81 deletions.
diff --git a/src/Atom/status.jsx b/src/Atom/status.jsx
@@ -98,3 +98,51 @@ export const getUserSelector = selector({
     set(userState, newValue);
   },
 });
+
+// export const waitorderState = atom({
+//   key: "waitorderState",
+//   default: [],
+// });
+
+// export const selectWaitOrderState = selector({
+//   key: "selectWaitOrderState",
+//   get: ({ get }) => {
+//     return get(waitorderState);
+//   },
+
+//   set: ({ set }, newValue) => {
+//     set(waitorderState, newValue);
+//   },
+// });
+
+// export const makeorderState = atom({
+//   key: "makeorderState",
+//   default: [],
+// });
+
+// export const selectMakeOrderState = selector({
+//   key: "selectMakeOrderState",
+//   get: ({ get }) => {
+//     return get(makeorderState);
+//   },
+
+//   set: ({ set }, newValue) => {
+//     set(makeorderState, newValue);
+//   },
+// });
+
+// export const completeorderState = atom({
+//   key: "completeorderState",
+//   default: [],
+// });
+
+// export const selectCompleteOrderState = selector({
+//   key: "selectCompleteOrderState",
+//   get: ({ get }) => {
+//     return get(completeorderState);
+//   },
+
+//   set: ({ set }, newValue) => {
+//     set(completeorderState, newValue);
+//   },
+// });
diff --git a/src/pages/Home/Receipt/StatusReceipt/CompleteReceipt.jsx b/src/pages/Home/Receipt/StatusReceipt/CompleteReceipt.jsx
@@ -6,7 +6,7 @@ const CompleteReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
   const apiUrl = process.env.REACT_APP_API_ROOT;
   // const setOrderSelect = useSetRecoilState(selectOrder);
 
-  const handleComplete = () => {
+  const handleComplete = async () => {
     const config = {
       withCredentials: true,
     };
@@ -15,24 +15,28 @@ const CompleteReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
       orderId: orderProps.orderId,
       status: "PICKUP",
     };
-    console.log(body);
 
-    axios
-      .post(`${apiUrl}/api/v1/order/complete`, body, config)
-      .then((res) => {
-        console.log(res);
-        if (res.data.success === true) {
-          message.info("픽업완료 처리되었습니다.");
-          // 데이터 다시 fetch
-          fetchData();
-          // select된 데이터 변경
-          setStatus("null");
-          setOrder(null);
-        }
-      })
-      .catch((err) => console.log(err));
-  };
+    try {
+      const res = await axios.post(
+        `${apiUrl}/api/v1/order/complete`,
+        body,
+        config
+      );
+      console.log(res);
+      if (res.data.success === true) {
+        message.success("픽업완료 처리되었습니다.");
+
+        // fetchData가 완료될 때까지 기다립니다.
+        await fetchData();
 
+        // fetchData가 완료된 후에 실행됩니다.
+        setStatus("null");
+        setOrder(null);
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
   return (
     <div>
       <div className="receiptHeader">
@@ -67,23 +71,28 @@ const CompleteReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
           </div>
           <div className="receiptOption">
             {e.options.map((option) => (
-              <span className="receipt-optiontext">└ {option}</span>
+              <span
+                className="receipt-optiontext"
+                style={{
+                  color: option?.price !== 0 ? "#D82356" : undefined,
+                  fontWeight: "500",
+                }}
+              >
+                └ ({option.category}) {option.name}
+              </span>
             ))}
           </div>
         </React.Fragment>
       ))}
       <div className="receipt-divider" />
       <div className="receiptTextBox">
         <span className="receipt-text">결제수단</span>
-        <span className="receipt-text">{orderProps?.payment}</span>
+        <span className="receipt-text">{orderProps?.method}</span>
       </div>
       <div className="receiptTextBox">
         <span className="receipt-text">결제금액</span>
         <span className="receipt-text">
-          {orderProps?.price
-            .toString()
-            .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
-          원
+          {orderProps?.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원
         </span>
       </div>
     </div>

diff --git a/src/pages/Home/Receipt/StatusReceipt/PendingReceipt.jsx b/src/pages/Home/Receipt/StatusReceipt/PendingReceipt.jsx
@@ -52,7 +52,7 @@ const PendingReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
       });
   };
 
-  const handleMake = (e) => {
+  const handleMake = async (e) => {
     const config = {
       withCredentials: true,
     };
@@ -62,24 +62,27 @@ const PendingReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
       status: "MAKE",
       time: parseInt(e.target.innerText.split("분")[0]),
     };
-    console.log(body);
 
-    axios
-      .post(`${apiUrl}/api/v1/order/complete`, body, config)
-      .then((res) => {
-        console.log(res);
-        if (res.status === 200) {
-          alert("접수되었습니다.");
-          setReceiveModal((prev) => !prev);
-          // 데이터 다시 fetch
-          fetchData();
-          // select된 데이터 변경
-          // 클릭 시 스타일 변화
-          setStatus("null");
-          setOrder(null);
-        }
-      })
-      .catch((err) => console.log(err));
+    try {
+      const res = await axios.post(
+        `${apiUrl}/api/v1/order/complete`,
+        body,
+        config
+      );
+      console.log(res);
+      if (res.status === 200) {
+        message.success("접수되었습니다.");
+        setReceiveModal((prev) => !prev);
+        // 데이터 다시 fetch
+        await fetchData();
+        // select된 데이터 변경
+        // 클릭 시 스타일 변화
+        setStatus("null");
+        setOrder(null);
+      }
+    } catch (err) {
+      console.log(err);
+    }
   };
 
   return (
@@ -156,23 +159,28 @@ const PendingReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
           </div>
           <div className="receiptOption">
             {e.options.map((option) => (
-              <span className="receipt-optiontext">└ {option}</span>
+              <span
+                className="receipt-optiontext"
+                style={{
+                  color: option?.price !== 0 ? "#D82356" : undefined,
+                  fontWeight: "500",
+                }}
+              >
+                └ ({option.category}) {option.name}
+              </span>
             ))}
           </div>
         </React.Fragment>
       ))}
       <div className="receipt-divider" />
       <div className="receiptTextBox">
         <span className="receipt-text">결제수단</span>
-        <span className="receipt-text">{orderProps?.payment}</span>
+        <span className="receipt-text">{orderProps?.method}</span>
       </div>
       <div className="receiptTextBox">
         <span className="receipt-text">결제금액</span>
         <span className="receipt-text">
-          {orderProps?.price
-            .toString()
-            .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
-          원
+          {orderProps?.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원
         </span>
       </div>
 

diff --git a/src/pages/Home/Receipt/StatusReceipt/ProgressReceipt.jsx b/src/pages/Home/Receipt/StatusReceipt/ProgressReceipt.jsx
@@ -7,7 +7,7 @@ const ProgressReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
   // const setOrderSelect = useSetRecoilState(selectOrder);
   // const { orderNum, time, phone, foodies, payment, price } = orderProps;
 
-  const handleComplete = () => {
+  const handleComplete = async () => {
     const config = {
       withCredentials: true,
     };
@@ -16,24 +16,26 @@ const ProgressReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
       orderId: orderProps.orderId,
       status: "COMPLETE",
     };
-    console.log(body);
+    try {
+      const res = await axios.post(
+        `${apiUrl}/api/v1/order/complete`,
+        body,
+        config
+      );
+      console.log(res);
+      if (res.data.success === true) {
+        message.success("제조완료 처리되었습니다.");
 
-    axios
-      .post(`${apiUrl}/api/v1/order/complete`, body, config)
-      .then((res) => {
-        console.log(res);
-        if (res.data.success === true) {
-          message.info("제조완료 처리되었습니다.");
-          // 데이터 다시 fetch
-          fetchData();
-          // select된 데이터 변경
-          setStatus("null");
-          setOrder(null);
-        }
-      })
-      .catch((err) => {
-        console.log(err);
-      });
+        // fetchData가 완료될 때까지 기다립니다.
+        await fetchData();
+
+        // fetchData가 완료된 후에 실행됩니다.
+        setStatus("null");
+        setOrder(null);
+      }
+    } catch (err) {
+      console.log(err);
+    }
   };
 
   return (
@@ -70,23 +72,28 @@ const ProgressReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
           </div>
           <div className="receiptOption">
             {e.options.map((option) => (
-              <span className="receipt-optiontext">└ {option}</span>
+              <span
+                className="receipt-optiontext"
+                style={{
+                  color: option?.price !== 0 ? "#D82356" : undefined,
+                  fontWeight: "500",
+                }}
+              >
+                └ ({option.category}) {option.name}
+              </span>
             ))}
           </div>
         </React.Fragment>
       ))}
       <div className="receipt-divider" />
       <div className="receiptTextBox">
         <span className="receipt-text">결제수단</span>
-        <span className="receipt-text">{orderProps?.payment}</span>
+        <span className="receipt-text">{orderProps?.method}</span>
       </div>
       <div className="receiptTextBox">
         <span className="receipt-text">결제금액</span>
         <span className="receipt-text">
-          {orderProps?.price
-            .toString()
-            .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
-          원
+          {orderProps?.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원
         </span>
       </div>
     </div>

diff --git a/src/pages/Home/StatusHome/Wait.jsx b/src/pages/Home/StatusHome/Wait.jsx
@@ -10,8 +10,9 @@ import "./DetailHome.css";
 
 const Wait = ({ orderInfo }) => {
   const Mp = EffectSound(MP, 1);
-  const setOrderSelect = useSetRecoilState(selectOrder);
+
   const setStatusSelect = useSetRecoilState(selectStatus);
+  const [orderSelect, setOrderSelect] = useRecoilState(selectOrder);
   const [orderTotal, setorderTotal] = useRecoilState(selectTotal);
   const [playSound, setplaySound] = useRecoilState(soundState);
   const [selectedOrderId, setSelectedOrderId] = useState(null);
@@ -21,18 +22,23 @@ const Wait = ({ orderInfo }) => {
     : orderInfo?.orders;
 
   useEffect(() => {
-    const firstOrder = sortedOrders?.length > 0 ? sortedOrders[0] : null;
-    setOrderSelect(firstOrder);
-    setSelectedOrderId(firstOrder?.idx || null);
+    if (orderSelect === null) {
+      const firstOrder = sortedOrders?.length > 0 ? sortedOrders[0] : null;
+      setOrderSelect(firstOrder);
+      setSelectedOrderId(firstOrder?.idx || null);
 
-    if (firstOrder !== null) {
-      setStatusSelect("pending");
-    } else {
-      setStatusSelect("null");
-      setOrderSelect(null);
+      if (firstOrder !== null) {
+        setStatusSelect("pending");
+      } else {
+        setStatusSelect("null");
+        setOrderSelect(null);
+      }
     }
 
-    if (playSound && orderInfo?.orders?.length >= orderTotal) {
+    /**
+     * 주문 들어올 시 소리 재생
+     */
+    if (playSound && orderInfo?.orders?.length > orderTotal) {
       console.log("소리 재생");
       Mp.play();
       setorderTotal(orderInfo?.orders?.length);