Feat: 픽업관리창

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;
+}

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 (
+    <>
+      <span className="Dropdown-box" onClick={() => onClick("All")}>
+        전체보기
+      </span>
+      <span className="Dropdown-box" onClick={() => onClick("PickUp")}>
+        픽업대기
+      </span>
+      <span className="Dropdown-box" onClick={() => onClick("Complete")}>
+        픽업완료
+      </span>
+    </>
+  );
+}
+
+export default Dropdown;

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 (
+    <>
+      <div
+        className={"Order-content__box"}
+        onClick={onClickHandler}
+        style={{
+          background: isSelected ? "rgba(216, 35, 86, 0.15)" : "#D9D9D9",
+        }}
+      >
+        <span className="Order-content__span">{orderNum} </span>
+        <span className="Order-content__span">
+          <div>{time.split("T")[0].replaceAll("-", ".")}</div>
+          <div>{time.split("T")[1].split(".")[0]}</div>
+        </span>
+        <span className="Order-content__span">
+          {pickUp === 1 ? "픽업" : "매장"}
+        </span>
+        <span className="Order-content__span">
+          {price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원
+        </span>
+        <span className="Order-content__span"> </span>
+      </div>
+    </>
+  );
+};
+
+export default PickUpOrderBox;

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}
         />
         <Receipt fetchData={fetchData} />
       </main>

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}
+              픽업 관리{" "}
             </div>
           </div>
         </div>
@@ -80,7 +78,7 @@ const MainHome = ({ waitInfo, makeInfo, completeInfo }) => {
       ) : status === "Progress" ? (
         <Progress orderInfo={makeInfo} />
       ) : status === "Complete" ? (
-        <Complete orderInfo={completeInfo} />
+        <Complete orderInfo={completeInfo} pickUpInfo={pickUpInfo} />
       ) : (
         <div>ERROR</div>
       )}

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;

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" ? (
+          <PickUpAfterReceipt
+            orderProps={Order}
+            setStatus={setStatus}
+            setOrder={setOrder}
+            fetchData={fetchData}
+          />
         ) : (
           <div alt="nullReceipt" />
         )}

src/pages/Home/Receipt/StatusReceipt/CompleteReceipt.jsx

@@ -43,7 +43,7 @@ const CompleteReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
         <span className="receipt-header"> 주문번호 {orderProps?.orderNum}</span>
 
         <button className="receipt-btn" onClick={handleComplete}>
-          완료
+          완료처리
         </button>
       </div>
       <div className="receiptTextBox">

src/pages/Home/Receipt/StatusReceipt/PickUpAfterReceipt.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+const PickUpAfterReceipt = ({ orderProps, setStatus, setOrder }) => {
+  return (
+    <div>
+      <div className="receiptHeader">
+        <span className="receipt-header"> 주문번호 {orderProps?.orderNum}</span>
+
+        <button className="receipt-btn-pickUp">픽업완료</button>
+      </div>
+      <div className="receiptTextBox">
+        <span className="receipt-text">주문시간</span>
+        <span className="receipt-text">
+          {orderProps?.time.split("T")[0].replaceAll("-", "/")}{" "}
+          {orderProps?.time.split("T")[1].split(".")[0]}
+        </span>
+      </div>
+      <div className="receiptTextBox">
+        <span className="receipt-text">고객연락처</span>
+        <span className="receipt-text">
+          {orderProps?.phone.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3")}
+        </span>
+      </div>
+      <div className="receipt-divider" />
+      <div className="receiptTextBox">
+        <span className="receipt-text">주문내역</span>
+      </div>
+      {orderProps?.foodies?.map((e, i) => (
+        <React.Fragment key={i}>
+          <div className="receiptTextBox">
+            <span className="receipt-FoodName">{e.name}</span>
+            <span className="receipt-text">{e.count}</span>
+          </div>
+          <div className="receiptOption">
+            {e.options.map((option) => (
+              <span className="receipt-optiontext">└ {option}</span>
+            ))}
+          </div>
+        </React.Fragment>
+      ))}
+      <div className="receipt-divider" />
+      <div className="receiptTextBox">
+        <span className="receipt-text">결제수단</span>
+        <span className="receipt-text">{orderProps?.payment}</span>
+      </div>
+      <div className="receiptTextBox">
+        <span className="receipt-text">결제금액</span>
+        <span className="receipt-text">
+          {orderProps?.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default PickUpAfterReceipt;