- {orderInfo.orders.map((order) => (
-
-
- 주문번호 {order.orderNum}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 주문시간
- {order.time}
-
-
- 고객연락처
- {order.phone}
-
-
-
- 주문내역
-
-
- {order.foodies[0].name}
- {order.foodies[0].count}
-
-
- {order.foodies[0].options.map((option) => (
- └ {option}
- ))}
-
-
-
- 결제수단
- {order.payment}
-
-
- 결제금액
- {/* 100원 단위 ,처리 여유로우면 하기 */}
- {order.price}원
-
-
- ))}
- {RefuseModal && (
-
-
-
-
-
-
-
-
-
- )}
- {ReceiveModal && (
-
-
-
-
-
-
-
-
-
- 5분
-
-
- 10분
-
-
-
-
- 15분
-
-
- 20분
-
-
-
-
- 25분
-
-
- 30분
-
-
-
+
+ {Status === "pending" ? (
+
+ ) : Status === "progress" ? (
+
+ ) : //
progress
+ Status === "complete" ? (
+
+ ) : (
+ //
complete
+
+
+
주문을 선택해주세요
-
- )}
+ )}
+
);
};
diff --git a/src/pages/Home/Receipt/StatusReceipt/CompleteReceipt.jsx b/src/pages/Home/Receipt/StatusReceipt/CompleteReceipt.jsx
new file mode 100644
index 0000000..130c406
--- /dev/null
+++ b/src/pages/Home/Receipt/StatusReceipt/CompleteReceipt.jsx
@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+
+const CompleteReceipt = ({
+ orderProps: { orderNum, time, phone, foodies, payment, price },
+}) => {
+ const [ReceiveModal, setReceiveModal] = useState(false);
+ const [RefuseModal, setRefuseModal] = useState(false);
+
+ const handleReceiveModal = () => {
+ console.log(ReceiveModal);
+ setReceiveModal((prev) => !prev);
+ };
+
+ const handleRefuseModal = () => {
+ setRefuseModal((prev) => !prev);
+ };
+ const orderInfo = {
+ orders: [
+ {
+ id: 123, //db 인덱스
+ orderNum: 2, // 그날의 그가게의 주문번호
+ pickUp: "픽업",
+ foodies: [
+ {
+ name: "아메리카노",
+ count: 3,
+ options: ["샷 추가", "휘핑", "ICE", "그란데"],
+ },
+ ],
+ phone: "010-6439-3547", // 고객의 전화번호
+ time: "21/11/08 11:44:30", // 주문시간
+ payment: "현대카드",
+ price: 8500,
+ },
+ ],
+ };
+
+ return (
+
+
+ 주문번호 {orderNum}
+
+
+
+
+ 주문시간
+ {time}
+
+
+ 고객연락처
+ {phone}
+
+
+
+ 주문내역
+
+
+ {foodies[0].name}
+ {foodies[0].count}
+
+
+ {foodies[0].options.map((option) => (
+ └ {option}
+ ))}
+
+
+
+ 결제수단
+ {payment}
+
+
+ 결제금액
+ {/* 100원 단위 ,처리 여유로우면 하기 */}
+ {price}원
+
+
+ );
+};
+
+export default CompleteReceipt;
diff --git a/src/pages/Home/Receipt/StatusReceipt/PendingReceipt.jsx b/src/pages/Home/Receipt/StatusReceipt/PendingReceipt.jsx
new file mode 100644
index 0000000..53a9338
--- /dev/null
+++ b/src/pages/Home/Receipt/StatusReceipt/PendingReceipt.jsx
@@ -0,0 +1,163 @@
+import React, { useState } from "react";
+import { Button, Col, Row } from "react-bootstrap";
+import X from "../../../../assets/icons/X.svg";
+
+const PendingReceipt = ({ orderProps }) => {
+ const { orderNum, time, phone, foodies, payment, price } = orderProps;
+
+ const [ReceiveModal, setReceiveModal] = useState(false);
+ const [RefuseModal, setRefuseModal] = useState(false);
+
+ const handleReceiveModal = () => {
+ console.log(ReceiveModal);
+ setReceiveModal((prev) => !prev);
+ };
+
+ const handleRefuseModal = () => {
+ setRefuseModal((prev) => !prev);
+ };
+
+ return (
+
+
+ 주문번호 {orderNum}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 주문시간
+ {time}
+
+
+ 고객연락처
+ {phone}
+
+
+
+ 주문내역
+
+
+ {foodies[0].name}
+ {foodies[0].count}
+
+
+ {foodies[0].options.map((option) => (
+ └ {option}
+ ))}
+
+
+
+ 결제수단
+ {payment}
+
+
+ 결제금액
+ {/* 100원 단위 ,처리 여유로우면 하기 */}
+ {price}원
+
+
+ {/* 주문거부모달창 */}
+ {RefuseModal && (
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* 주문수락모달창 */}
+ {ReceiveModal && (
+
+
+
+
+
+
+
+
+
+ 5분
+
+
+ 10분
+
+
+
+
+ 15분
+
+
+ 20분
+
+
+
+
+ 25분
+
+
+ 30분
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default PendingReceipt;
diff --git a/src/pages/Home/Receipt/StatusReceipt/ProgressReceipt.jsx b/src/pages/Home/Receipt/StatusReceipt/ProgressReceipt.jsx
new file mode 100644
index 0000000..51c2422
--- /dev/null
+++ b/src/pages/Home/Receipt/StatusReceipt/ProgressReceipt.jsx
@@ -0,0 +1,54 @@
+import React from "react";
+
+const ProgressReceipt = ({
+ orderProps: { orderNum, time, phone, foodies, payment, price },
+}) => {
+ const onClickBtn = () => {
+ console.log("제조완료");
+ };
+
+ return (
+
+
+ 주문번호 {orderNum}
+
+
+
+
+ 주문시간
+ {time}
+
+
+ 고객연락처
+ {phone}
+
+
+
+ 주문내역
+
+
+ {foodies[0].name}
+ {foodies[0].count}
+
+
+ {foodies[0].options.map((option) => (
+ └ {option}
+ ))}
+
+
+
+ 결제수단
+ {payment}
+
+
+ 결제금액
+ {/* 100원 단위 ,처리 여유로우면 하기 */}
+ {price}원
+
+
+ );
+};
+
+export default ProgressReceipt;
diff --git a/src/pages/Home/StatusHome/Complete.jsx b/src/pages/Home/StatusHome/Complete.jsx
index b8dd236..29c34bf 100644
--- a/src/pages/Home/StatusHome/Complete.jsx
+++ b/src/pages/Home/StatusHome/Complete.jsx
@@ -1,7 +1,143 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { useRecoilState } from "recoil";
+import { ordercnt, selectOrder, selectStatus } from "../../../Atom/order";
+import downArrow from "../../../assets/icons/icon_downArrow_black.svg";
+import OrderBox from "../../../components/views/Order/OrderBox";
+import "./DetailHome.css";
const Complete = () => {
- return
Complete
;
+ const [orderCount, setOrderCount] = useRecoilState(ordercnt); // Recoil 상태 가져오기
+ const [orderSelect, setOrderSelect] = useRecoilState(selectOrder);
+ const [statusSelect, setStatusSelect] = useRecoilState(selectStatus);
+
+ const orderInfo = {
+ orders: [
+ {
+ id: 123, //db 인덱스
+ orderNum: 2, // 그날의 그가게의 주문번호
+ pickUp: "픽업",
+ foodies: [
+ {
+ name: "아메리카노",
+ count: 3,
+ options: ["샷 추가", "휘핑", "ICE", "그란데"],
+ },
+ ],
+ phone: "010-6439-3547", // 고객의 전화번호
+ time: "21/11/08 11:44:30", // 주문시간
+ payment: "현대카드",
+ price: 8500,
+ },
+ {
+ id: 124, //db 인덱스
+ orderNum: 3, // 그날의 그가게의 주문번호
+ pickUp: "매장",
+ foodies: [
+ {
+ name: "아메리카누",
+ count: 3,
+ options: ["샷 추가 *100 ", "휘핑 *1000", "HOT", "그란데"],
+ },
+ ],
+ phone: "010-7679-3547", // 고객의 전화번호
+ time: "23/11/08 11:44:30", // 주문시간
+ payment: "현대카드",
+ price: 78500,
+ },
+ {
+ id: 125,
+ orderNum: 4,
+ pickUp: "픽업",
+ foodies: [
+ {
+ name: "아메리카노",
+ count: 3,
+ options: ["샷 추가", "휘핑", "ICE", "그란데"],
+ },
+ ],
+ phone: "010-6439-3547", // 고객의 전화번호
+ time: "21/11/08 11:44:30", // 주문시간
+ payment: "현대카드",
+ price: 8500,
+ },
+ {
+ id: 126,
+ orderNum: 5,
+ pickUp: "매장",
+ foodies: [
+ {
+ name: "아메리카노",
+ count: 3,
+ options: ["샷 추가", "휘핑", "ICE", "그란데"],
+ },
+ ],
+ phone: "010-6439-3547", // 고객의 전화번호
+ time: "21/11/08 11:44:30", // 주문시간
+ payment: "현대카드",
+ price: 8500,
+ },
+ ],
+ };
+
+ const [selectedOrderId, setSelectedOrderId] = useState(null);
+ const [isRecentFirst, setIsRecentFirst] = useState(false);
+
+ const sortedOrders = isRecentFirst
+ ? [...orderInfo.orders].reverse()
+ : orderInfo.orders;
+
+ const onClickHandler = (selectedOrder) => {
+ setOrderSelect(selectedOrder);
+ if (selectedOrder === null) {
+ setStatusSelect("null");
+ } else {
+ setStatusSelect("complete");
+ }
+ setSelectedOrderId(selectedOrder ? selectedOrder.id : null);
+ };
+
+ useEffect(() => {
+ // OrderBox가 생성될 때마다 개수 증가
+ setOrderCount((prev) => ({ ...prev, complete: orderInfo.orders.length }));
+ }, [orderInfo.orders.length, setOrderCount]);
+
+ return (
+
+
+
주문번호
+
주문일시
+
픽업유무
+
주문금액
+ {isRecentFirst ? (
+
setIsRecentFirst(!isRecentFirst)}
+ >
+ 과거순
+ 
+
+ ) : (
+
setIsRecentFirst(!isRecentFirst)}
+ >
+ 최신순
+
+
+ )}
+
+
+ {sortedOrders.map((order) => (
+
+ ))}
+
+
+ );
};
export default Complete;
diff --git a/src/pages/Home/StatusHome/DetailHome.css b/src/pages/Home/StatusHome/DetailHome.css
index edf4b34..fa9de71 100644
--- a/src/pages/Home/StatusHome/DetailHome.css
+++ b/src/pages/Home/StatusHome/DetailHome.css
@@ -1,6 +1,7 @@
.Order-wrapper {
width: 100%;
/* height: 100%; */
+ padding: 0%;
}
.Order-title__wrapper {
@@ -26,51 +27,44 @@
}
.Order-content__wrapper {
- width: 100%;
+ padding: 0%;
+
height: calc(46.25rem - 5.0625rem);
/* height: calc(42.5rem - 5.0625rem); */
overflow-y: auto;
-}
-.mainInven-category-content__box {
display: flex;
-
- width: 100%;
- min-width: calc(73.75rem - 8.875rem);
- height: 3.6875rem;
- border-bottom: #dadada solid 0.125rem;
+ flex-direction: column;
}
-.mainInven-category-content__box.selected {
- background-color: rgba(216, 35, 86, 0.15);
-}
+.Order-content__box {
+ width: 33.375rem;
+ padding: 2% 0% 2% 0%;
-.mainInven-category-content__box span {
- font-size: 1.5625rem;
- font-family: "Medium";
- color: #4f4f4f;
- line-height: 3.6875rem;
-}
+ border-top: 2px solid #838383;
-.mainInven-category-checkbox {
- height: 2.1875rem;
- width: 2.1875rem;
- border: #dadada solid 0.1875rem;
- border-radius: 0.125rem;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ align-items: center;
}
-/*
-.mainInven-category-checkbox.selected {
- background: #d82356 url("../../assets/icons/icon_check.svg") no-repeat center
- center;
-
- border: none;
-} */
.Order-content__span {
- width: 15%;
- min-width: 8.3125rem;
+ width: 6.275rem;
display: flex;
justify-content: center;
align-items: center;
+
+ color: #000;
+ font-family: "Medium";
+ font-size: 1.25rem;
+ font-weight: 500;
+ line-height: 100%; /* 1.25rem */
+}
+
+.Arrowicon {
+ width: 1.25rem;
+ height: 1.25rem;
}
diff --git a/src/pages/Home/StatusHome/Progress.jsx b/src/pages/Home/StatusHome/Progress.jsx
index 82994ac..e52df2b 100644
--- a/src/pages/Home/StatusHome/Progress.jsx
+++ b/src/pages/Home/StatusHome/Progress.jsx
@@ -1,7 +1,143 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { useRecoilState } from "recoil";
+import { ordercnt, selectOrder, selectStatus } from "../../../Atom/order";
+import downArrow from "../../../assets/icons/icon_downArrow_black.svg";
+import OrderBox from "../../../components/views/Order/OrderBox";
+import "./DetailHome.css";
const Progress = () => {
- return
Progress
;
+ const [orderCount, setOrderCount] = useRecoilState(ordercnt); // Recoil 상태 가져오기
+ const [orderSelect, setOrderSelect] = useRecoilState(selectOrder);
+ const [statusSelect, setStatusSelect] = useRecoilState(selectStatus);
+
+ const orderInfo = {
+ orders: [
+ {
+ id: 123, //db 인덱스
+ orderNum: 2, // 그날의 그가게의 주문번호
+ pickUp: "픽업",
+ foodies: [
+ {
+ name: "아메리카노",
+ count: 3,
+ options: ["샷 추가", "휘핑", "ICE", "그란데"],
+ },
+ ],
+ phone: "010-6439-3547", // 고객의 전화번호
+ time: "21/11/08 11:44:30", // 주문시간
+ payment: "현대카드",
+ price: 8500,
+ },
+ {
+ id: 124, //db 인덱스
+ orderNum: 3, // 그날의 그가게의 주문번호
+ pickUp: "매장",
+ foodies: [
+ {
+ name: "아메리카누",
+ count: 3,
+ options: ["샷 추가 *100 ", "휘핑 *1000", "HOT", "그란데"],
+ },
+ ],
+ phone: "010-7679-3547", // 고객의 전화번호
+ time: "23/11/08 11:44:30", // 주문시간
+ payment: "현대카드",
+ price: 78500,
+ },
+ {
+ id: 125,
+ orderNum: 4,
+ pickUp: "픽업",
+ foodies: [
+ {
+ name: "아메리카노",
+ count: 3,
+ options: ["샷 추가", "휘핑", "ICE", "그란데"],
+ },
+ ],
+ phone: "010-6439-3547", // 고객의 전화번호
+ time: "21/11/08 11:44:30", // 주문시간
+ payment: "현대카드",
+ price: 8500,
+ },
+ {
+ id: 126,
+ orderNum: 5,
+ pickUp: "매장",
+ foodies: [
+ {
+ name: "아메리카노",
+ count: 3,
+ options: ["샷 추가", "휘핑", "ICE", "그란데"],
+ },
+ ],
+ phone: "010-6439-3547", // 고객의 전화번호
+ time: "21/11/08 11:44:30", // 주문시간
+ payment: "현대카드",
+ price: 8500,
+ },
+ ],
+ };
+
+ const [selectedOrderId, setSelectedOrderId] = useState(null);
+ const [isRecentFirst, setIsRecentFirst] = useState(false);
+
+ const sortedOrders = isRecentFirst
+ ? [...orderInfo.orders].reverse()
+ : orderInfo.orders;
+
+ const onClickHandler = (selectedOrder) => {
+ setOrderSelect(selectedOrder);
+ if (selectedOrder === null) {
+ setStatusSelect("null");
+ } else {
+ setStatusSelect("progress");
+ }
+ setSelectedOrderId(selectedOrder ? selectedOrder.id : null);
+ };
+
+ useEffect(() => {
+ // OrderBox가 생성될 때마다 개수 증가
+ setOrderCount((prev) => ({ ...prev, progress: orderInfo.orders.length }));
+ }, [orderInfo.orders.length, setOrderCount]);
+
+ return (
+
+
+
주문번호
+
주문일시
+
픽업유무
+
주문금액
+ {isRecentFirst ? (
+
setIsRecentFirst(!isRecentFirst)}
+ >
+ 과거순
+
+
+ ) : (
+
setIsRecentFirst(!isRecentFirst)}
+ >
+ 최신순
+
+
+ )}
+
+
+ {sortedOrders.map((order) => (
+
+ ))}
+
+
+ );
};
export default Progress;
diff --git a/src/pages/Home/StatusHome/Wait.jsx b/src/pages/Home/StatusHome/Wait.jsx
index 5ffd64c..26d03b2 100644
--- a/src/pages/Home/StatusHome/Wait.jsx
+++ b/src/pages/Home/StatusHome/Wait.jsx
@@ -1,43 +1,110 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { useRecoilState } from "recoil";
+import { ordercnt, selectOrder, selectStatus } from "../../../Atom/order";
+import downArrow from "../../../assets/icons/icon_downArrow_black.svg";
+import OrderBox from "../../../components/views/Order/OrderBox";
import "./DetailHome.css";
const Wait = () => {
- // const orderInfo = {
- // orders: [
- // {
- // id: 123, //db 인덱스
- // orderNum: 2, // 그날의 그가게의 주문번호
- // pickUp: "픽업",
- // foodies: [
- // {
- // name: "아메리카노",
- // count: 3,
- // options: ["샷 추가", "휘핑", "ICE", "그란데"],
- // },
- // ],
- // phone: "010-6439-3547", // 고객의 전화번호
- // time: "21/11/08 11:44:30", // 주문시간
- // payment: "현대카드",
- // price: 8500,
- // },
- // {
- // id: 133, //db 인덱스
- // orderNum: 33, // 그날의 그가게의 주문번호
- // pickUp: "매장",
- // foodies: [
- // {
- // name: "아메리카누",
- // count: 3,
- // options: ["샷 추가 *100 ", "휘핑 *1000", "HOT", "그란데"],
- // },
- // ],
- // phone: "010-7679-3547", // 고객의 전화번호
- // time: "23/11/08 11:44:30", // 주문시간
- // payment: "현대카드",
- // price: 78500,
- // },
- // ],
- // };
+ const [orderCount, setOrderCount] = useRecoilState(ordercnt); // Recoil 상태 가져오기
+ const [orderSelect, setOrderSelect] = useRecoilState(selectOrder);
+ const [statusSelect, setStatusSelect] = useRecoilState(selectStatus);
+
+ const orderInfo = {
+ orders: [
+ {
+ id: 123, //db 인덱스
+ orderNum: 2, // 그날의 그가게의 주문번호
+ pickUp: "픽업",
+ foodies: [
+ {
+ name: "아메리카노",
+ count: 3,
+ options: ["샷 추가", "휘핑", "ICE", "그란데"],
+ },
+ ],
+ phone: "010-6439-3547", // 고객의 전화번호
+ time: "21/11/08 11:44:30", // 주문시간
+ payment: "현대카드",
+ price: 8500,
+ },
+ {
+ id: 124, //db 인덱스
+ orderNum: 3, // 그날의 그가게의 주문번호
+ pickUp: "매장",
+ foodies: [
+ {
+ name: "아메리카누",
+ count: 3,
+ options: ["샷 추가 *100 ", "휘핑 *1000", "HOT", "그란데"],
+ },
+ ],
+ phone: "010-7679-3547", // 고객의 전화번호
+ time: "23/11/08 11:44:30", // 주문시간
+ payment: "현대카드",
+ price: 78500,
+ },
+ {
+ id: 125,
+ orderNum: 4,
+ pickUp: "픽업",
+ foodies: [
+ {
+ name: "아메리카노",
+ count: 3,
+ options: ["샷 추가", "휘핑", "ICE", "그란데"],
+ },
+ ],
+ phone: "010-6439-3547", // 고객의 전화번호
+ time: "21/11/08 11:44:30", // 주문시간
+ payment: "현대카드",
+ price: 8500,
+ },
+ {
+ id: 126,
+ orderNum: 5,
+ pickUp: "매장",
+ foodies: [
+ {
+ name: "아메리카노",
+ count: 3,
+ options: ["샷 추가", "휘핑", "ICE", "그란데"],
+ },
+ ],
+ phone: "010-6439-3547", // 고객의 전화번호
+ time: "21/11/08 11:44:30", // 주문시간
+ payment: "현대카드",
+ price: 8500,
+ },
+ ],
+ };
+
+ const [selectedOrderId, setSelectedOrderId] = useState(null);
+ const [isRecentFirst, setIsRecentFirst] = useState(false);
+
+ const sortedOrders = isRecentFirst
+ ? [...orderInfo.orders].reverse()
+ : orderInfo.orders;
+
+ const onClickHandler = (selectedOrder) => {
+ setOrderSelect(selectedOrder);
+ if (selectedOrder === null) {
+ setStatusSelect("null");
+ } else {
+ setStatusSelect("pending");
+ }
+ setSelectedOrderId(selectedOrder ? selectedOrder.id : null);
+ };
+
+ useEffect(() => {
+ /*
+ while (orderInfo.orders.length !== 0 && soundState) {
+ AudioPlayer();
+ }*/
+
+ // OrderBox가 생성될 때마다 개수 증가
+ setOrderCount((prev) => ({ ...prev, pending: orderInfo.orders.length }));
+ }, [orderInfo.orders.length, setOrderCount]);
return (
@@ -46,29 +113,34 @@ const Wait = () => {
주문일시
픽업유무
주문금액
- {/* 최신순 */}
- {/*
-
-
{category}
- {isCategoryOpen ? (
) : (
)}
-
*/}
-
최신순
+ {isRecentFirst ? (
+
setIsRecentFirst(!isRecentFirst)}
+ >
+ 과거순
+
+
+ ) : (
+
setIsRecentFirst(!isRecentFirst)}
+ >
+ 최신순
+
+
+ )}
-
- {/*
- {orderInfo.map((orders) => (
-
-
-
+
+ {sortedOrders.map((order) => (
+
))}
-
*/}
+
+