From b61358637298b8d0eb776e9052cd5e2e4c8173b7 Mon Sep 17 00:00:00 2001
From: 1223v <1223v@naver.com>
Date: Mon, 4 Dec 2023 00:39:49 +0900
Subject: [PATCH] =?UTF-8?q?Fix:=20=EB=8F=99=EA=B8=B0=20=EB=B9=84=EB=8F=99?=
=?UTF-8?q?=EA=B8=B0=20=EB=AC=B8=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/Atom/status.jsx | 48 ++++++++++++++++
.../Receipt/StatusReceipt/CompleteReceipt.jsx | 55 ++++++++++--------
.../Receipt/StatusReceipt/PendingReceipt.jsx | 56 +++++++++++--------
.../Receipt/StatusReceipt/ProgressReceipt.jsx | 55 ++++++++++--------
src/pages/Home/StatusHome/Wait.jsx | 26 +++++----
5 files changed, 159 insertions(+), 81 deletions(-)
diff --git a/src/Atom/status.jsx b/src/Atom/status.jsx
index 0514b39..07e7e26 100644
--- 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
index 50b84a9..76c5651 100644
--- 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 (
@@ -67,7 +71,15 @@ const CompleteReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
{e.options.map((option) => (
- └ {option}
+
+ └ ({option.category}) {option.name}
+
))}
@@ -75,15 +87,12 @@ const CompleteReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
결제수단
- {orderProps?.payment}
+ {orderProps?.method}
결제금액
- {orderProps?.price
- .toString()
- .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
- 원
+ {orderProps?.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원
diff --git a/src/pages/Home/Receipt/StatusReceipt/PendingReceipt.jsx b/src/pages/Home/Receipt/StatusReceipt/PendingReceipt.jsx
index 592b7e5..a06ca9c 100644
--- 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,7 +159,15 @@ const PendingReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
{e.options.map((option) => (
- └ {option}
+
+ └ ({option.category}) {option.name}
+
))}
@@ -164,15 +175,12 @@ const PendingReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
결제수단
- {orderProps?.payment}
+ {orderProps?.method}
결제금액
- {orderProps?.price
- .toString()
- .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
- 원
+ {orderProps?.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원
diff --git a/src/pages/Home/Receipt/StatusReceipt/ProgressReceipt.jsx b/src/pages/Home/Receipt/StatusReceipt/ProgressReceipt.jsx
index bdabe8f..4bb92f8 100644
--- 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,7 +72,15 @@ const ProgressReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
{e.options.map((option) => (
- └ {option}
+
+ └ ({option.category}) {option.name}
+
))}
@@ -78,15 +88,12 @@ const ProgressReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
결제수단
- {orderProps?.payment}
+ {orderProps?.method}
결제금액
- {orderProps?.price
- .toString()
- .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
- 원
+ {orderProps?.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원
diff --git a/src/pages/Home/StatusHome/Wait.jsx b/src/pages/Home/StatusHome/Wait.jsx
index 86750c5..19ccfe7 100644
--- 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);