Merge pull request #60 from readyvery/test

배포 전 최종

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",

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);
+//   },
+// });

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;

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,11 +143,26 @@
   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;
   top: calc(5.5rem + 0.625rem);
-  left: calc(8.875rem + 33rem);
+  left: calc(33rem);
 
   /* width: 23.75rem;
   height: 43rem; */

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,8 @@ const Receipt = ({ fetchData }) => {
             setOrder={setOrder}
             fetchData={fetchData}
           />
+        ) : Status === "pickUp" ? (
+          <PickUpAfterReceipt orderProps={Order} />
         ) : (
           <div alt="nullReceipt" />
         )}