From 2d706dacfd29a306dae6cf3a0d51081f5bb37b3d Mon Sep 17 00:00:00 2001 From: hyemin Date: Fri, 1 Dec 2023 13:15:23 +0900 Subject: [PATCH 01/10] =?UTF-8?q?Refactor:=20=EC=9E=AC=EC=A0=95=EB=A0=AC?= =?UTF-8?q?=EC=8B=9C=20=EC=98=A4=EB=8D=94=20=EA=B8=B0=EB=B3=B8=EA=B0=92=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/views/Audio/AudioPlayer.jsx | 9 ++-- src/index.js | 16 +++--- src/pages/Home/StatusHome/Complete.jsx | 34 +++++++++--- src/pages/Home/StatusHome/Progress.jsx | 63 +++++++++++++--------- src/pages/Home/StatusHome/Wait.jsx | 57 ++++++++++---------- 5 files changed, 107 insertions(+), 72 deletions(-) diff --git a/src/components/views/Audio/AudioPlayer.jsx b/src/components/views/Audio/AudioPlayer.jsx index b5f17a3..40706d8 100644 --- a/src/components/views/Audio/AudioPlayer.jsx +++ b/src/components/views/Audio/AudioPlayer.jsx @@ -2,9 +2,12 @@ import VeryMp3 from "../../../assets/Very.mp3"; const AudioPlayer = () => { const audio = new Audio(VeryMp3); - audio.play().catch((error) => { - console.error("Autoplay prevented:", error); - }); + audio.play(); + // 1초 후에 소리 멈춤 + setTimeout(() => { + // setplaySound(false); + console.log("소리 멈춤"); + }, 100); }; export default AudioPlayer; diff --git a/src/index.js b/src/index.js index 82429ba..83d4f2f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ import React from "react"; -import { CookiesProvider } from 'react-cookie'; +import { CookiesProvider } from "react-cookie"; import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import { ThemeProvider } from "styled-components"; @@ -9,15 +9,15 @@ import theme from "./style/theme/theme"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - - - + // + + - - - - + + + + // ); // If you want to start measuring performance in your app, pass a function diff --git a/src/pages/Home/StatusHome/Complete.jsx b/src/pages/Home/StatusHome/Complete.jsx index ba1699a..21d4f56 100644 --- a/src/pages/Home/StatusHome/Complete.jsx +++ b/src/pages/Home/StatusHome/Complete.jsx @@ -40,6 +40,30 @@ const Complete = ({ orderInfo }) => { } }; + const defaultOrder = () => { + const sortedOrdersArray = isRecentFirst + ? orderInfo?.orders + : [...(orderInfo?.orders || [])].reverse(); + + const firstOrder = + sortedOrdersArray?.length > 0 ? sortedOrdersArray[0] : null; + + if (firstOrder !== null) { + setStatusSelect("complete"); + setOrderSelect(firstOrder); + setSelectedOrderId(firstOrder.idx); + } else { + setStatusSelect("null"); + setOrderSelect(null); + setSelectedOrderId(null); + } + }; + + const onClickSorter = () => { + setIsRecentFirst(!isRecentFirst); + defaultOrder(); + }; + useEffect(() => { const firstOrder = sortedOrders?.length > 0 ? sortedOrders[0] : null; setOrderSelect(firstOrder); @@ -62,18 +86,12 @@ const Complete = ({ orderInfo }) => { 픽업유무 주문금액 {isRecentFirst ? ( - setIsRecentFirst(!isRecentFirst)} - > + 최신순 new ) : ( - setIsRecentFirst(!isRecentFirst)} - > + 과거순 new diff --git a/src/pages/Home/StatusHome/Progress.jsx b/src/pages/Home/StatusHome/Progress.jsx index 9068388..f856823 100644 --- a/src/pages/Home/StatusHome/Progress.jsx +++ b/src/pages/Home/StatusHome/Progress.jsx @@ -28,6 +28,43 @@ const Progress = ({ orderInfo }) => { ? [...(orderInfo?.orders || [])].reverse() : orderInfo?.orders; + const onClickHandler = (selectedOrder) => { + setOrderSelect(selectedOrder); + setSelectedOrderId(selectedOrder?.idx && selectedOrder?.idx); + + if (selectedOrder === null) { + setStatusSelect("null"); + } else { + setStatusSelect("progress"); + } + }; + + const defaultOrder = () => { + console.log("defaultOrder"); + const sortedOrdersArray = isRecentFirst + ? orderInfo?.orders + : [...(orderInfo?.orders || [])].reverse(); + + const firstOrder = + sortedOrdersArray?.length > 0 ? sortedOrdersArray[0] : null; + + if (firstOrder !== null) { + console.log("firstOrder defaultOrder"); + setStatusSelect("pregress"); + setOrderSelect(firstOrder); + setSelectedOrderId(firstOrder.idx); + } else { + setStatusSelect("null"); + setOrderSelect(null); + setSelectedOrderId(null); + } + }; + + const onClickSorter = () => { + setIsRecentFirst(!isRecentFirst); + defaultOrder(); + }; + useEffect(() => { const firstOrder = sortedOrders?.length > 0 ? sortedOrders[0] : null; setOrderSelect(firstOrder); @@ -42,22 +79,6 @@ const Progress = ({ orderInfo }) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const onClickHandler = (selectedOrder) => { - setOrderSelect(selectedOrder); - setSelectedOrderId(selectedOrder?.idx && selectedOrder?.idx); - - if (selectedOrder === null) { - setStatusSelect("null"); - } else { - setStatusSelect("progress"); - } - }; - - // useEffect(() => { - // // OrderBox가 생성될 때마다 개수 증가 - // setOrderCount((prev) => ({ ...prev, progress: orderInfo?.orders?.length })); - // }, [orderInfo, setOrderCount]); - return (
@@ -66,18 +87,12 @@ const Progress = ({ orderInfo }) => { 픽업유무 주문금액 {isRecentFirst ? ( - setIsRecentFirst(!isRecentFirst)} - > + 최신순 new ) : ( - setIsRecentFirst(!isRecentFirst)} - > + 과거순 new diff --git a/src/pages/Home/StatusHome/Wait.jsx b/src/pages/Home/StatusHome/Wait.jsx index ab5a5d4..240374a 100644 --- a/src/pages/Home/StatusHome/Wait.jsx +++ b/src/pages/Home/StatusHome/Wait.jsx @@ -9,6 +9,7 @@ import OrderBox from "../../../components/views/Order/OrderBox"; import "./DetailHome.css"; const Wait = ({ orderInfo }) => { + console.log("페이지 로딩"); const setOrderSelect = useSetRecoilState(selectOrder); const setStatusSelect = useSetRecoilState(selectStatus); const [playSound, setplaySound] = useRecoilState(soundState); @@ -17,11 +18,12 @@ const Wait = ({ orderInfo }) => { useEffect(() => { const isAudioPlay = () => { - if (playSound && orderInfo?.orders?.length !== null) { + if (playSound && orderInfo?.orders?.length > 0) { AudioPlayer(); // 소리 재생 console.log("소리 재생"); } }; + isAudioPlay(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); @@ -53,27 +55,13 @@ const Wait = ({ orderInfo }) => { } }; - // useEffect(() => { - // const firstOrder = sortedOrders?.length > 0 ? sortedOrders[0] : null; - - // if (firstOrder !== null) { - // setStatusSelect("pending"); - // setOrderSelect(firstOrder); - // setSelectedOrderId(firstOrder.idx); - // } else { - // setStatusSelect("null"); - // setOrderSelect(null); - // setSelectedOrderId(null); - // } - - // // eslint-disable-next-line react-hooks/exhaustive-deps - // }, [sortedOrders]); + const defaultOrder = () => { + const sortedOrdersArray = isRecentFirst + ? orderInfo?.orders + : [...(orderInfo?.orders || [])].reverse(); - useEffect(() => { - const sortedOrders = isRecentFirst - ? [...(orderInfo?.orders || [])].reverse() - : orderInfo?.orders; - const firstOrder = sortedOrders?.length > 0 ? sortedOrders[0] : null; + const firstOrder = + sortedOrdersArray?.length > 0 ? sortedOrdersArray[0] : null; if (firstOrder !== null) { setStatusSelect("pending"); @@ -84,7 +72,24 @@ const Wait = ({ orderInfo }) => { setOrderSelect(null); setSelectedOrderId(null); } + }; + + const onClickSorter = () => { + setIsRecentFirst(!isRecentFirst); + defaultOrder(); + }; + useEffect(() => { + const firstOrder = sortedOrders?.length > 0 ? sortedOrders[0] : null; + setOrderSelect(firstOrder); + setSelectedOrderId(firstOrder?.idx && firstOrder?.idx); + + if (firstOrder !== null) { + setStatusSelect("pending"); + } else { + setStatusSelect("null"); + setOrderSelect(null); + } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); @@ -96,18 +101,12 @@ const Wait = ({ orderInfo }) => { 픽업유무 주문금액 {isRecentFirst ? ( - setIsRecentFirst(!isRecentFirst)} - > + 최신순 new ) : ( - setIsRecentFirst(!isRecentFirst)} - > + 과거순 new From 7686410fb9d566944cb9638fbb84dec0047c8f9d Mon Sep 17 00:00:00 2001 From: hyemin Date: Fri, 1 Dec 2023 15:40:49 +0900 Subject: [PATCH 02/10] =?UTF-8?q?Design:=20=EB=AA=A8=EB=8B=AC=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/StatusHome/Complete.jsx | 36 +++++------------ src/pages/Home/StatusHome/Progress.jsx | 56 ++++++++++++++------------ 2 files changed, 40 insertions(+), 52 deletions(-) diff --git a/src/pages/Home/StatusHome/Complete.jsx b/src/pages/Home/StatusHome/Complete.jsx index 21d4f56..959a317 100644 --- a/src/pages/Home/StatusHome/Complete.jsx +++ b/src/pages/Home/StatusHome/Complete.jsx @@ -40,30 +40,6 @@ const Complete = ({ orderInfo }) => { } }; - const defaultOrder = () => { - const sortedOrdersArray = isRecentFirst - ? orderInfo?.orders - : [...(orderInfo?.orders || [])].reverse(); - - const firstOrder = - sortedOrdersArray?.length > 0 ? sortedOrdersArray[0] : null; - - if (firstOrder !== null) { - setStatusSelect("complete"); - setOrderSelect(firstOrder); - setSelectedOrderId(firstOrder.idx); - } else { - setStatusSelect("null"); - setOrderSelect(null); - setSelectedOrderId(null); - } - }; - - const onClickSorter = () => { - setIsRecentFirst(!isRecentFirst); - defaultOrder(); - }; - useEffect(() => { const firstOrder = sortedOrders?.length > 0 ? sortedOrders[0] : null; setOrderSelect(firstOrder); @@ -76,7 +52,7 @@ const Complete = ({ orderInfo }) => { setOrderSelect(null); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [isRecentFirst]); return (
@@ -86,12 +62,18 @@ const Complete = ({ orderInfo }) => { 픽업유무 주문금액 {isRecentFirst ? ( - + setIsRecentFirst(!isRecentFirst)} + > 최신순 new ) : ( - + setIsRecentFirst(!isRecentFirst)} + > 과거순 new diff --git a/src/pages/Home/StatusHome/Progress.jsx b/src/pages/Home/StatusHome/Progress.jsx index f856823..7e38489 100644 --- a/src/pages/Home/StatusHome/Progress.jsx +++ b/src/pages/Home/StatusHome/Progress.jsx @@ -39,31 +39,31 @@ const Progress = ({ orderInfo }) => { } }; - const defaultOrder = () => { - console.log("defaultOrder"); - const sortedOrdersArray = isRecentFirst - ? orderInfo?.orders - : [...(orderInfo?.orders || [])].reverse(); + // const defaultOrder = () => { + // console.log("defaultOrder"); + // const sortedOrdersArray = isRecentFirst + // ? orderInfo?.orders + // : [...(orderInfo?.orders || [])].reverse(); - const firstOrder = - sortedOrdersArray?.length > 0 ? sortedOrdersArray[0] : null; + // const firstOrder = + // sortedOrdersArray?.length > 0 ? sortedOrdersArray[0] : null; - if (firstOrder !== null) { - console.log("firstOrder defaultOrder"); - setStatusSelect("pregress"); - setOrderSelect(firstOrder); - setSelectedOrderId(firstOrder.idx); - } else { - setStatusSelect("null"); - setOrderSelect(null); - setSelectedOrderId(null); - } - }; + // if (firstOrder !== null) { + // console.log("firstOrder defaultOrder"); + // setStatusSelect("pregress"); + // setOrderSelect(firstOrder); + // setSelectedOrderId(firstOrder.idx); + // } else { + // setStatusSelect("null"); + // setOrderSelect(null); + // setSelectedOrderId(null); + // } + // }; - const onClickSorter = () => { - setIsRecentFirst(!isRecentFirst); - defaultOrder(); - }; + // const onClickSorter = () => { + // setIsRecentFirst(!isRecentFirst); + // defaultOrder(); + // }; useEffect(() => { const firstOrder = sortedOrders?.length > 0 ? sortedOrders[0] : null; @@ -77,7 +77,7 @@ const Progress = ({ orderInfo }) => { setOrderSelect(null); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [isRecentFirst]); return (
@@ -87,12 +87,18 @@ const Progress = ({ orderInfo }) => { 픽업유무 주문금액 {isRecentFirst ? ( - + setIsRecentFirst(!isRecentFirst)} + > 최신순 new ) : ( - + setIsRecentFirst(!isRecentFirst)} + > 과거순 new From b6fc03163dd500fa335491cebafc3f6be30783dd Mon Sep 17 00:00:00 2001 From: happppi <102276917+hhbb0081@users.noreply.github.com> Date: Fri, 1 Dec 2023 15:55:36 +0900 Subject: [PATCH 03/10] =?UTF-8?q?Style:=20=EB=AA=A8=EB=8B=AC=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/Receipt/Receipt.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Home/Receipt/Receipt.css b/src/pages/Home/Receipt/Receipt.css index 7d397d1..7d3ac18 100644 --- a/src/pages/Home/Receipt/Receipt.css +++ b/src/pages/Home/Receipt/Receipt.css @@ -147,7 +147,7 @@ .modal-wrapper { position: absolute; top: calc(5.5rem + 0.625rem); - left: calc(8.875rem + 33rem); + left: calc(33rem); /* width: 23.75rem; height: 43rem; */ From e8f890ed455e5f198da533bf2a6a1907ed1bc20f Mon Sep 17 00:00:00 2001 From: hyemin Date: Fri, 1 Dec 2023 20:27:11 +0900 Subject: [PATCH 04/10] =?UTF-8?q?Docs:=20=ED=94=BD=EC=97=85=EC=99=84?= =?UTF-8?q?=EB=A3=8C=20=EB=AA=85=EC=B9=AD=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/StatusHome/Progress.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/Home/StatusHome/Progress.jsx b/src/pages/Home/StatusHome/Progress.jsx index 7e38489..a953620 100644 --- a/src/pages/Home/StatusHome/Progress.jsx +++ b/src/pages/Home/StatusHome/Progress.jsx @@ -39,7 +39,6 @@ const Progress = ({ orderInfo }) => { } }; - // const defaultOrder = () => { // console.log("defaultOrder"); // const sortedOrdersArray = isRecentFirst // ? orderInfo?.orders From ec45d3523ee76aaedec3de4fe4bbf11fde299de8 Mon Sep 17 00:00:00 2001 From: 1223v <1223v@naver.com> Date: Sat, 2 Dec 2023 02:58:20 +0900 Subject: [PATCH 05/10] =?UTF-8?q?Fix:=20=EC=A3=BC=EB=AC=B8=20=EC=82=AC?= =?UTF-8?q?=EC=9A=B4=EB=93=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 11 +++++++++++ package.json | 1 + src/assets/Very.mp3 | Bin 8685 -> 14332 bytes src/pages/Home/StatusHome/Wait.jsx | 10 +++++----- src/utils/EffectSound.jsx | 22 +++++++++++----------- 5 files changed, 28 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index c4e7212..67d5a39 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "apexcharts": "^3.44.0", "axios": "^1.6.2", "bootstrap": "^5.3.2", + "howler": "^2.2.4", "moment": "^2.29.4", "react": "^18.2.0", "react-apexcharts": "^1.4.1", @@ -10464,6 +10465,11 @@ "node": ">= 6.0.0" } }, + "node_modules/howler": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.4.tgz", + "integrity": "sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==" + }, "node_modules/hpack.js": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz", @@ -27969,6 +27975,11 @@ "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", "integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==" }, + "howler": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.4.tgz", + "integrity": "sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==" + }, "hpack.js": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz", diff --git a/package.json b/package.json index 85687b9..24acd13 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "apexcharts": "^3.44.0", "axios": "^1.6.2", "bootstrap": "^5.3.2", + "howler": "^2.2.4", "moment": "^2.29.4", "react": "^18.2.0", "react-apexcharts": "^1.4.1", diff --git a/src/assets/Very.mp3 b/src/assets/Very.mp3 index 986edb3ce781f19b22233427726289438ce73d2f..4d64e0278208bf778313c1f6ca6322cb79993ff5 100644 GIT binary patch literal 14332 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 { - console.log("페이지 로딩"); + const Mp = EffectSound(MP, 1); const setOrderSelect = useSetRecoilState(selectOrder); const setStatusSelect = useSetRecoilState(selectStatus); const [orderTotal, setorderTotal] = useRecoilState(selectTotal); @@ -32,9 +32,9 @@ const Wait = ({ orderInfo }) => { setOrderSelect(null); } - if (playSound && orderInfo?.orders?.length >= orderTotal) { - AudioPlayer(); // 소리 재생 + if (playSound && orderInfo?.orders?.length > orderTotal) { console.log("소리 재생"); + Mp.play(); setorderTotal(orderInfo?.orders?.length); } //eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/src/utils/EffectSound.jsx b/src/utils/EffectSound.jsx index f575d95..dc24b48 100644 --- a/src/utils/EffectSound.jsx +++ b/src/utils/EffectSound.jsx @@ -1,13 +1,13 @@ -// import { Howl } from 'howler'; +import { Howl } from "howler"; -// function EffectSound(src, volume = 1) { -// let sound; -// const soundInject = (src) => { -// sound = new Howl({ src }); -// sound.volume(volume); -// } -// soundInject(src); -// return sound; -// } +function EffectSound(src, volume = 1) { + let sound; + const soundInject = (src) => { + sound = new Howl({ src }); + sound.volume(volume); + }; + soundInject(src); + return sound; +} -// export default EffectSound; +export default EffectSound; From fc4bc075d123a903c7311348f70cc1b8df09e260 Mon Sep 17 00:00:00 2001 From: 1223v <1223v@naver.com> Date: Sat, 2 Dec 2023 03:13:21 +0900 Subject: [PATCH 06/10] =?UTF-8?q?Fix:=20=EC=82=AC=EC=9A=B4=EB=93=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/StatusHome/Wait.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Home/StatusHome/Wait.jsx b/src/pages/Home/StatusHome/Wait.jsx index bd92503..86750c5 100644 --- a/src/pages/Home/StatusHome/Wait.jsx +++ b/src/pages/Home/StatusHome/Wait.jsx @@ -32,7 +32,7 @@ const Wait = ({ orderInfo }) => { setOrderSelect(null); } - if (playSound && orderInfo?.orders?.length > orderTotal) { + if (playSound && orderInfo?.orders?.length >= orderTotal) { console.log("소리 재생"); Mp.play(); setorderTotal(orderInfo?.orders?.length); 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 07/10] =?UTF-8?q?Fix:=20=EB=8F=99=EA=B8=B0=20=EB=B9=84?= =?UTF-8?q?=EB=8F=99=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); From c88481641c4826abe87ca7cb76e109363166ee71 Mon Sep 17 00:00:00 2001 From: hyemin Date: Mon, 4 Dec 2023 03:02:10 +0900 Subject: [PATCH 08/10] =?UTF-8?q?Feat:=20=ED=94=BD=EC=97=85=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=EC=B0=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/icon_upArrow_black.svg | 3 + src/components/views/Dropdown/Dropdown.css | 23 +++ src/components/views/Dropdown/Dropdown.jsx | 22 +++ src/components/views/Order/PickUpOrderBox.jsx | 36 +++++ src/pages/Home/Home.jsx | 22 +++ src/pages/Home/MainHome.jsx | 10 +- src/pages/Home/Receipt/Receipt.css | 15 ++ src/pages/Home/Receipt/Receipt.jsx | 8 ++ .../Receipt/StatusReceipt/CompleteReceipt.jsx | 7 +- .../StatusReceipt/PickUpAfterReceipt.jsx | 56 ++++++++ src/pages/Home/StatusHome/Complete.jsx | 133 +++++++++++++----- src/pages/Home/StatusHome/DetailHome.css | 42 +++++- src/pages/Home/StatusHome/Progress.jsx | 14 +- src/pages/Home/StatusHome/Wait.jsx | 9 +- 14 files changed, 327 insertions(+), 73 deletions(-) create mode 100644 src/assets/icons/icon_upArrow_black.svg create mode 100644 src/components/views/Dropdown/Dropdown.css create mode 100644 src/components/views/Dropdown/Dropdown.jsx create mode 100644 src/components/views/Order/PickUpOrderBox.jsx create mode 100644 src/pages/Home/Receipt/StatusReceipt/PickUpAfterReceipt.jsx diff --git a/src/assets/icons/icon_upArrow_black.svg b/src/assets/icons/icon_upArrow_black.svg new file mode 100644 index 0000000..60dd365 --- /dev/null +++ b/src/assets/icons/icon_upArrow_black.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/views/Dropdown/Dropdown.css b/src/components/views/Dropdown/Dropdown.css new file mode 100644 index 0000000..1c78684 --- /dev/null +++ b/src/components/views/Dropdown/Dropdown.css @@ -0,0 +1,23 @@ +.Dropdown { + color: #4f4f4f; + font-family: Pretendard; + font-size: 1.125rem; + font-style: normal; + font-weight: 600; + line-height: 100%; /* 1.125rem */ + + position: absolute; + /* left: calc((100vw - 8.875rem) * 0.275); */ + top: 10rem; + left: 17.14375rem; + /* left: 0; */ + display: flex; + flex-direction: column; + /* width: 17.1875rem; */ + width: 8.0625rem; + height: 3.41669rem; + border-radius: 0 0 0.625rem 0.625rem; + z-index: 0; + overflow-y: auto; + overflow-x: hidden; +} diff --git a/src/components/views/Dropdown/Dropdown.jsx b/src/components/views/Dropdown/Dropdown.jsx new file mode 100644 index 0000000..5b053fa --- /dev/null +++ b/src/components/views/Dropdown/Dropdown.jsx @@ -0,0 +1,22 @@ +import "./Dropdown.css"; +function Dropdown({ onClickViewer }) { + const onClick = (view) => { + onClickViewer(view); + console.log(view); + }; + return ( + <> + onClick("All")}> + 전체보기 + + onClick("PickUp")}> + 픽업대기 + + onClick("Complete")}> + 픽업완료 + + + ); +} + +export default Dropdown; diff --git a/src/components/views/Order/PickUpOrderBox.jsx b/src/components/views/Order/PickUpOrderBox.jsx new file mode 100644 index 0000000..9b622ee --- /dev/null +++ b/src/components/views/Order/PickUpOrderBox.jsx @@ -0,0 +1,36 @@ +import React from "react"; + +const PickUpOrderBox = ({ onSelect, order, selectedOrderId }) => { + const { orderNum, time, pickUp, price } = order; + const isSelected = order.idx === selectedOrderId; + + const onClickHandler = () => { + onSelect(isSelected ? null : order); + }; + return ( + <> +
+ {orderNum} + +
{time.split("T")[0].replaceAll("-", ".")}
+
{time.split("T")[1].split(".")[0]}
+ + + {pickUp === 1 ? "픽업" : "매장"} + + + {price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원 + + +
+ + ); +}; + +export default PickUpOrderBox; diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx index 07d16fb..1fe99df 100644 --- a/src/pages/Home/Home.jsx +++ b/src/pages/Home/Home.jsx @@ -10,6 +10,7 @@ function Home() { const [waitInfo, setWaitInfo] = useState({}); const [makeInfo, setMakeInfo] = useState({}); const [completeInfo, setCompleteInfo] = useState({}); + const [pickUpInfo, setpickUpInfo] = useState({}); const waitData = () => { const config = { @@ -68,10 +69,30 @@ function Home() { }); }; + const pickUpData = () => { + const config = { + withCredentials: true, + }; + + axios + .get(`${apiUrl}/api/v1/order?status=PICKUP`, config) + .then((res) => { + console.log(res); + setpickUpInfo(res.data); + }) + .catch((err) => { + console.log(err); + if (err.status === 404 && err.message === "Not found order.") { + setpickUpInfo({}); + } + }); + }; + const fetchData = () => { waitData(); makeData(); completeData(); + pickUpData(); }; useEffect(() => { @@ -93,6 +114,7 @@ function Home() { waitInfo={waitInfo} makeInfo={makeInfo} completeInfo={completeInfo} + pickUpInfo={pickUpInfo} /> diff --git a/src/pages/Home/MainHome.jsx b/src/pages/Home/MainHome.jsx index d5d9d1d..835e967 100644 --- a/src/pages/Home/MainHome.jsx +++ b/src/pages/Home/MainHome.jsx @@ -6,7 +6,7 @@ import Complete from "./StatusHome/Complete"; import Progress from "./StatusHome/Progress"; import Wait from "./StatusHome/Wait"; -const MainHome = ({ waitInfo, makeInfo, completeInfo }) => { +const MainHome = ({ waitInfo, makeInfo, completeInfo, pickUpInfo }) => { const setStatusSelect = useSetRecoilState(selectStatus); const [status, setStatus] = useState("Wait"); @@ -20,6 +20,7 @@ const MainHome = ({ waitInfo, makeInfo, completeInfo }) => { if (name === "Wait") setStatusSelect("pending"); else if (name === "Progress") setStatusSelect("progress"); else if (name === "Complete") setStatusSelect("complete"); + else if (name === "PickUp") setStatusSelect("pickup"); else setStatusSelect("null"); }; @@ -66,10 +67,7 @@ const MainHome = ({ waitInfo, makeInfo, completeInfo }) => { }`} onClick={onClickHandler} > - 제조완료{" "} - {completeInfo?.orders?.length > 0 - ? completeInfo?.orders?.length - : 0} + 픽업 관리{" "}
@@ -80,7 +78,7 @@ const MainHome = ({ waitInfo, makeInfo, completeInfo }) => { ) : status === "Progress" ? ( ) : status === "Complete" ? ( - + ) : (
ERROR
)} diff --git a/src/pages/Home/Receipt/Receipt.css b/src/pages/Home/Receipt/Receipt.css index 7d3ac18..578f460 100644 --- a/src/pages/Home/Receipt/Receipt.css +++ b/src/pages/Home/Receipt/Receipt.css @@ -143,6 +143,21 @@ align-items: center; } +.receipt-btn-pickUp { + width: 8.75rem; + height: 2.8125rem; + border: 2px solid; + border-radius: 1.5625rem; + background-color: #838383; + font-family: "SemiBold"; + font-size: 1.375rem; + color: #ffffff; + + display: flex; + justify-content: center; + align-items: center; +} + /* 모달 */ .modal-wrapper { position: absolute; diff --git a/src/pages/Home/Receipt/Receipt.jsx b/src/pages/Home/Receipt/Receipt.jsx index 00a166e..34827d5 100644 --- a/src/pages/Home/Receipt/Receipt.jsx +++ b/src/pages/Home/Receipt/Receipt.jsx @@ -5,6 +5,7 @@ import "./Receipt.css"; import CompleteReceipt from "./StatusReceipt/CompleteReceipt"; import PendingReceipt from "./StatusReceipt/PendingReceipt"; +import PickUpAfterReceipt from "./StatusReceipt/PickUpAfterReceipt"; import ProgressReceipt from "./StatusReceipt/ProgressReceipt"; const Receipt = ({ fetchData }) => { @@ -35,6 +36,13 @@ const Receipt = ({ fetchData }) => { setOrder={setOrder} fetchData={fetchData} /> + ) : Status === "pickUp" ? ( + ) : (
)} diff --git a/src/pages/Home/Receipt/StatusReceipt/CompleteReceipt.jsx b/src/pages/Home/Receipt/StatusReceipt/CompleteReceipt.jsx index 50b84a9..25abec3 100644 --- a/src/pages/Home/Receipt/StatusReceipt/CompleteReceipt.jsx +++ b/src/pages/Home/Receipt/StatusReceipt/CompleteReceipt.jsx @@ -39,7 +39,7 @@ const CompleteReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => { 주문번호 {orderProps?.orderNum}
@@ -80,10 +80,7 @@ const CompleteReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
결제금액 - {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/PickUpAfterReceipt.jsx b/src/pages/Home/Receipt/StatusReceipt/PickUpAfterReceipt.jsx new file mode 100644 index 0000000..e000513 --- /dev/null +++ b/src/pages/Home/Receipt/StatusReceipt/PickUpAfterReceipt.jsx @@ -0,0 +1,56 @@ +import React from "react"; + +const PickUpAfterReceipt = ({ orderProps, setStatus, setOrder }) => { + return ( +
+
+ 주문번호 {orderProps?.orderNum} + + +
+
+ 주문시간 + + {orderProps?.time.split("T")[0].replaceAll("-", "/")}{" "} + {orderProps?.time.split("T")[1].split(".")[0]} + +
+
+ 고객연락처 + + {orderProps?.phone.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3")} + +
+
+
+ 주문내역 +
+ {orderProps?.foodies?.map((e, i) => ( + +
+ {e.name} + {e.count} +
+
+ {e.options.map((option) => ( + └ {option} + ))} +
+ + ))} +
+
+ 결제수단 + {orderProps?.payment} +
+
+ 결제금액 + + {orderProps?.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원 + +
+
+ ); +}; + +export default PickUpAfterReceipt; diff --git a/src/pages/Home/StatusHome/Complete.jsx b/src/pages/Home/StatusHome/Complete.jsx index 959a317..5d66e98 100644 --- a/src/pages/Home/StatusHome/Complete.jsx +++ b/src/pages/Home/StatusHome/Complete.jsx @@ -1,19 +1,18 @@ import React, { useEffect, useState } from "react"; -import { useRecoilState, useSetRecoilState } from "recoil"; +import { useSetRecoilState } from "recoil"; import { selectOrder, selectStatus } from "../../../Atom/order"; -import { isRecentFirstState } from "../../../Atom/status"; import downArrow from "../../../assets/icons/icon_downArrow_black.svg"; +import upArrow from "../../../assets/icons/icon_upArrow_black.svg"; import OrderBox from "../../../components/views/Order/OrderBox"; +import PickUpOrderBox from "../../../components/views/Order/PickUpOrderBox"; import "./DetailHome.css"; -const Complete = ({ orderInfo }) => { - // const apiUrl = process.env.REACT_APP_API_ROOT; - // const [orderCount, setOrderCount] = useRecoilState(ordercnt); // Recoil 상태 가져오기 +const Complete = ({ orderInfo, pickUpInfo }) => { const setOrderSelect = useSetRecoilState(selectOrder); const setStatusSelect = useSetRecoilState(selectStatus); - + const [view, setView] = useState(false); + const [viewStatus, setViewStatus] = useState("All"); const [selectedOrderId, setSelectedOrderId] = useState(null); - const [isRecentFirst, setIsRecentFirst] = useRecoilState(isRecentFirstState); /* const sortedOrders = isRecentFirst @@ -25,9 +24,11 @@ const Complete = ({ orderInfo }) => { : orderInfo?.orders; */ - const sortedOrders = isRecentFirst - ? [...(orderInfo?.orders || [])].reverse() - : orderInfo?.orders; + const onClickViewer = (viewStatus) => { + setViewStatus(viewStatus); + }; + const Orders = orderInfo?.orders; + const PickUps = pickUpInfo?.orders; const onClickHandler = (selectedOrder) => { setOrderSelect(selectedOrder); @@ -40,8 +41,19 @@ const Complete = ({ orderInfo }) => { } }; + const onClickPickUpHandler = (selectedOrder) => { + setOrderSelect(selectedOrder); + setSelectedOrderId(selectedOrder?.idx && selectedOrder?.idx); + + if (selectedOrder === null) { + setStatusSelect("null"); + } else { + setStatusSelect("pickUp"); + } + }; + useEffect(() => { - const firstOrder = sortedOrders?.length > 0 ? sortedOrders[0] : null; + const firstOrder = Orders?.length > 0 ? Orders[0] : null; setOrderSelect(firstOrder); setSelectedOrderId(firstOrder?.idx && firstOrder?.idx); @@ -52,43 +64,86 @@ const Complete = ({ orderInfo }) => { setOrderSelect(null); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isRecentFirst]); + }, []); return (
주문번호 주문일시 - 픽업유무 + 수령방식 주문금액 - {isRecentFirst ? ( - setIsRecentFirst(!isRecentFirst)} - > - 최신순 - new - - ) : ( - setIsRecentFirst(!isRecentFirst)} - > - 과거순 +
    { + setView(!view); + }} + className="Order-wrapper-dropdown" + > + {viewStatus === "All" ? ( + 전체보기 + ) : viewStatus === "PickUp" ? ( + 픽업대기 + ) : viewStatus === "Complete" ? ( + 픽업완료 + ) : null}{" "} + {view ? ( + new + ) : ( new - - )} -
-
- {sortedOrders?.map((order) => ( - - ))} + )} + {view && ( +
+ onClickViewer("All")}>전체보기 + onClickViewer("PickUp")}>픽업대기 + onClickViewer("Complete")}>픽업완료 +
+ )} +
+ {viewStatus === "All" && ( +
+ {Orders?.map((order) => ( + + ))} + {PickUps?.map((order) => ( + + ))} +
+ )} + {viewStatus === "PickUp" && ( +
+ {Orders?.map((order) => ( + + ))} +
+ )} + {viewStatus === "Complete" && ( +
+ {PickUps?.map((order) => ( + + ))} +
+ )}
); }; diff --git a/src/pages/Home/StatusHome/DetailHome.css b/src/pages/Home/StatusHome/DetailHome.css index 283076f..a322c33 100644 --- a/src/pages/Home/StatusHome/DetailHome.css +++ b/src/pages/Home/StatusHome/DetailHome.css @@ -4,6 +4,13 @@ padding: 0%; } +.Order-wrapper-dropdown { + display: flex; + align-items: center; + justify-content: center; + padding-left: 0%; +} + .Order-title__wrapper { display: flex; padding-left: 1%; @@ -14,7 +21,7 @@ align-items: center; justify-content: center; - width: 8.25rem; + width: 6.25rem; height: 3.125rem; text-align: center; @@ -40,7 +47,7 @@ .Order-content__box { /* width: 33.375rem; */ width: 100%; - padding: 2% 0% 2% 0%; + padding: 2% 2.7% 2% 0%; border-bottom: 1px solid #838383; @@ -65,12 +72,37 @@ line-height: 100%; /* 1.25rem */ } -.Order-content__span div{ +.Order-content__span div { white-space: nowrap; font-size: 1.125rem; } .Arrowicon { - width: 1.25rem; - height: 1.25rem; + width: 1rem; + height: 1rem; +} + +.Dropdown-box { + color: #4f4f4f; + font-family: Pretendard; + font-size: 1.125rem; + font-style: normal; + font-weight: 600; + line-height: 100%; /* 1.125rem */ + position: absolute; + /* left: calc((100vw - 8.875rem) * 0.275); */ + top: 14rem; + left: 24.7rem; + /* left: 0; */ + display: flex; + flex-direction: column; + align-items: center; + /* width: 17.1875rem; */ + width: 8.0625rem; + height: 9rem; + border-radius: 0 0 0.625rem 0.625rem; + background-color: #fff; + z-index: 0; + overflow-y: auto; + overflow-x: hidden; } diff --git a/src/pages/Home/StatusHome/Progress.jsx b/src/pages/Home/StatusHome/Progress.jsx index a953620..762529b 100644 --- a/src/pages/Home/StatusHome/Progress.jsx +++ b/src/pages/Home/StatusHome/Progress.jsx @@ -7,23 +7,11 @@ import OrderBox from "../../../components/views/Order/OrderBox"; import "./DetailHome.css"; const Progress = ({ orderInfo }) => { - // const [orderCount, setOrderCount] = useRecoilState(ordercnt); // Recoil 상태 가져오기 const setOrderSelect = useSetRecoilState(selectOrder); const setStatusSelect = useSetRecoilState(selectStatus); const [selectedOrderId, setSelectedOrderId] = useState(null); const [isRecentFirst, setIsRecentFirst] = useRecoilState(isRecentFirstState); - - /* - const sortedOrders = isRecentFirst - ? [...(orderInfo?.orders || [])].sort((prev, cur) => { - if (prev?.price > cur?.price) return -1; - if (prev?.price < cur?.price) return 1; - return 0; - }) - : orderInfo?.orders; -*/ - const sortedOrders = isRecentFirst ? [...(orderInfo?.orders || [])].reverse() : orderInfo?.orders; @@ -83,7 +71,7 @@ const Progress = ({ orderInfo }) => {
주문번호 주문일시 - 픽업유무 + 수령방식 주문금액 {isRecentFirst ? ( { - const Mp = EffectSound(MP, 1); + console.log("페이지 로딩"); const setOrderSelect = useSetRecoilState(selectOrder); const setStatusSelect = useSetRecoilState(selectStatus); const [orderTotal, setorderTotal] = useRecoilState(selectTotal); @@ -33,8 +32,8 @@ const Wait = ({ orderInfo }) => { } if (playSound && orderInfo?.orders?.length >= orderTotal) { + AudioPlayer(); // 소리 재생 console.log("소리 재생"); - Mp.play(); setorderTotal(orderInfo?.orders?.length); } //eslint-disable-next-line react-hooks/exhaustive-deps @@ -97,7 +96,7 @@ const Wait = ({ orderInfo }) => {
주문번호 주문일시 - 픽업유무 + 수령방식 주문금액 {isRecentFirst ? ( From 06cdef16eedcc04a6033b49b0e9833fcda8ee371 Mon Sep 17 00:00:00 2001 From: hyemin Date: Mon, 4 Dec 2023 03:30:49 +0900 Subject: [PATCH 09/10] =?UTF-8?q?Fix:=20git=EC=B6=A9=EB=8F=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/Receipt/Receipt.jsx | 7 +------ .../Receipt/StatusReceipt/PickUpAfterReceipt.jsx | 2 +- src/pages/Home/StatusHome/Complete.jsx | 10 ---------- src/pages/Home/StatusHome/Wait.jsx | 13 +++++++++---- 4 files changed, 11 insertions(+), 21 deletions(-) diff --git a/src/pages/Home/Receipt/Receipt.jsx b/src/pages/Home/Receipt/Receipt.jsx index 34827d5..6534199 100644 --- a/src/pages/Home/Receipt/Receipt.jsx +++ b/src/pages/Home/Receipt/Receipt.jsx @@ -37,12 +37,7 @@ const Receipt = ({ fetchData }) => { fetchData={fetchData} /> ) : Status === "pickUp" ? ( - + ) : (
)} diff --git a/src/pages/Home/Receipt/StatusReceipt/PickUpAfterReceipt.jsx b/src/pages/Home/Receipt/StatusReceipt/PickUpAfterReceipt.jsx index e000513..9a342d9 100644 --- a/src/pages/Home/Receipt/StatusReceipt/PickUpAfterReceipt.jsx +++ b/src/pages/Home/Receipt/StatusReceipt/PickUpAfterReceipt.jsx @@ -1,6 +1,6 @@ import React from "react"; -const PickUpAfterReceipt = ({ orderProps, setStatus, setOrder }) => { +const PickUpAfterReceipt = ({ orderProps }) => { return (
diff --git a/src/pages/Home/StatusHome/Complete.jsx b/src/pages/Home/StatusHome/Complete.jsx index 5d66e98..d2ce454 100644 --- a/src/pages/Home/StatusHome/Complete.jsx +++ b/src/pages/Home/StatusHome/Complete.jsx @@ -14,16 +14,6 @@ const Complete = ({ orderInfo, pickUpInfo }) => { const [viewStatus, setViewStatus] = useState("All"); const [selectedOrderId, setSelectedOrderId] = useState(null); - /* - const sortedOrders = isRecentFirst - ? [...(orderInfo?.orders || [])].sort((prev, cur) => { - if (prev?.price > cur?.price) return -1; - if (prev?.price < cur?.price) return 1; - return 0; - }) - : orderInfo?.orders; -*/ - const onClickViewer = (viewStatus) => { setViewStatus(viewStatus); }; diff --git a/src/pages/Home/StatusHome/Wait.jsx b/src/pages/Home/StatusHome/Wait.jsx index db05a25..19ccfe7 100644 --- a/src/pages/Home/StatusHome/Wait.jsx +++ b/src/pages/Home/StatusHome/Wait.jsx @@ -2,14 +2,14 @@ import React, { useEffect, useState } from "react"; import { useRecoilState, useSetRecoilState } from "recoil"; import { selectOrder, selectStatus, selectTotal } from "../../../Atom/order"; import { isRecentFirstState, soundState } from "../../../Atom/status"; +import MP from "../../../assets/Very.mp3"; import downArrow from "../../../assets/icons/icon_downArrow_black.svg"; -import AudioPlayer from "../../../components/views/Audio/AudioPlayer"; import OrderBox from "../../../components/views/Order/OrderBox"; +import EffectSound from "../../../utils/EffectSound"; import "./DetailHome.css"; const Wait = ({ orderInfo }) => { -const Mp = EffectSound(MP, 1); - + const Mp = EffectSound(MP, 1); const setStatusSelect = useSetRecoilState(selectStatus); const [orderSelect, setOrderSelect] = useRecoilState(selectOrder); @@ -34,8 +34,13 @@ const Mp = EffectSound(MP, 1); setOrderSelect(null); } } + + /** + * 주문 들어올 시 소리 재생 + */ if (playSound && orderInfo?.orders?.length > orderTotal) { console.log("소리 재생"); + Mp.play(); setorderTotal(orderInfo?.orders?.length); } //eslint-disable-next-line react-hooks/exhaustive-deps @@ -98,7 +103,7 @@ const Mp = EffectSound(MP, 1);
주문번호 주문일시 - 수령방식 + 픽업유무 주문금액 {isRecentFirst ? ( From ec0cd22e6d816f1924a89a804b55e6c84c4b571a Mon Sep 17 00:00:00 2001 From: hyemin Date: Mon, 4 Dec 2023 04:00:07 +0900 Subject: [PATCH 10/10] =?UTF-8?q?Docs:=20=EB=AA=85=EC=B9=AD=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/StatusHome/Wait.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Home/StatusHome/Wait.jsx b/src/pages/Home/StatusHome/Wait.jsx index 19ccfe7..c7eda7b 100644 --- a/src/pages/Home/StatusHome/Wait.jsx +++ b/src/pages/Home/StatusHome/Wait.jsx @@ -103,7 +103,7 @@ const Wait = ({ orderInfo }) => {
주문번호 주문일시 - 픽업유무 + 수령방식 주문금액 {isRecentFirst ? (