readyvery · marina-yhm · Nov 26, 2023
diff --git a/src/components/views/Header/Header.jsx b/src/components/views/Header/Header.jsx
@@ -23,6 +23,25 @@ const Header = () => {
     console.log(Sound);
   };
 
+  // const apiUrl = process.env.REACT_APP_API_ROOT;
+  //   const [storeOpen, setStoreOpen] = useState(false);
+  //   useEffect(() => {
+  //     const config = {
+  //       withCredentials: true,
+  //     }
+  //     axios
+  //     .get(`${apiUrl}/api/v1/store/sales`, config)
+  //     .then((response) => {
+  //       console.log(response);
+  //             setStoreOpen(response.data);
+  //             console.log(storeOpen);
+  //         })
+  //         .catch((error) => {
+  //             console.error(error);
+  //         }
+  //         // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, []);
+
   return (
     <div className="header">
       <Row>

diff --git a/src/hoc/auth.jsx b/src/hoc/auth.jsx
@@ -1,17 +1,18 @@
-/*import { useCookies } from "react-cookie";
+import moment from "moment";
+import { useEffect } from "react";
+import { useCookies } from "react-cookie";
 import { useLocation, useNavigate } from "react-router-dom";
 import { useRecoilValue, useSetRecoilState } from "recoil";
-import { getUserSelector, loginState } from "../Atom/status";*/
+import { getUserSelector, loginState } from "../Atom/status";
 
 function Auth(SpecificComponent, option) {
   function AuthenticationCheck(props) {
-    /*const navigate = useNavigate();
+    const navigate = useNavigate();
     const location = useLocation();
     const userInfo = useRecoilValue(getUserSelector);
     const setIsLoggedIn = useSetRecoilState(loginState);
     const [cookies] = useCookies(["accessToken"]);
 
-
     useEffect(() => {
       const isAuth = window.localStorage.getItem("isAuthenticated");
       if (userInfo === "404" && location.pathname !== "/") {
@@ -35,7 +36,7 @@ function Auth(SpecificComponent, option) {
       }
 
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);*/
+    }, []);
     return <SpecificComponent />;
   }
   return AuthenticationCheck;

diff --git a/src/pages/Home/MainHome.jsx b/src/pages/Home/MainHome.jsx
@@ -18,14 +18,13 @@ const MainHome = () => {
 
   const onClickHandler = (e) => {
     const { name } = e.target;
-    // 현재 선택된 상태
+
     const currentStatus = status[name];
     if (!currentStatus) {
       setStatus((prevStatus) => {
         const updatedStatus = { ...prevStatus };
-        updatedStatus[name] = true; // 선택된 status를 true로 설정
+        updatedStatus[name] = true;
 
-        // 나머지 값들을 모두 false로 설정
         for (const key in updatedStatus) {
           if (key !== name) {
             updatedStatus[key] = false;

diff --git a/src/pages/Home/Receipt/Receipt.jsx b/src/pages/Home/Receipt/Receipt.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { useRecoilState } from "recoil";
+import { useRecoilValue } from "recoil";
 import { selectOrder, selectStatus } from "../../../Atom/order";
 import loading from "../../../assets/icons/loading.svg";
 import "./Receipt.css";
@@ -9,9 +9,13 @@ import PendingReceipt from "./StatusReceipt/PendingReceipt";
 import ProgressReceipt from "./StatusReceipt/ProgressReceipt";
 
 const Receipt = () => {
-  const Status = useRecoilState(selectStatus);
-  const Order = useRecoilState(selectOrder);
+  const Status = useRecoilValue(selectStatus);
+  const Order = useRecoilValue(selectOrder);
 
+  const onClickHandler = () => {
+    console.log(Status);
+    console.log(Order);
+  };
   const orderInfo = {
     orders: [
       {
@@ -39,32 +43,12 @@ const Receipt = () => {
         {Status === "pending" ? (
           <PendingReceipt orderProps={Order} />
         ) : Status === "progress" ? (
-          <ProgressReceipt
-            orderProps={{
-              orderNum: orderInfo.orders[0].orderNum,
-              time: orderInfo.orders[0].time,
-              phone: orderInfo.orders[0].phone,
-              foodies: orderInfo.orders[0].foodies,
-              payment: orderInfo.orders[0].payment,
-              price: orderInfo.orders[0].price,
-            }}
-          />
-        ) : // <div onClick={onClickHandler}>progress</div>
-        Status === "complete" ? (
-          <CompleteReceipt
-            orderProps={{
-              orderNum: orderInfo.orders[0].orderNum,
-              time: orderInfo.orders[0].time,
-              phone: orderInfo.orders[0].phone,
-              foodies: orderInfo.orders[0].foodies,
-              payment: orderInfo.orders[0].payment,
-              price: orderInfo.orders[0].price,
-            }}
-          />
+          <ProgressReceipt orderProps={Order} />
+        ) : Status === "complete" ? (
+          <CompleteReceipt orderProps={Order} />
         ) : (
-          // <div>complete</div>
           <div className="nullReceipt">
-            <img alt="loading" src={loading} />
+            <img onClick={onClickHandler} alt="loading" src={loading} />
             <span className="receipt-text">주문을 선택해주세요</span>
           </div>
         )}

diff --git a/src/pages/Home/Receipt/StatusReceipt/CompleteReceipt.jsx b/src/pages/Home/Receipt/StatusReceipt/CompleteReceipt.jsx
@@ -1,8 +1,28 @@
 import React from "react";
 
-const CompleteReceipt = ({
-  orderProps: { orderNum, time, phone, foodies, payment, price },
-}) => {
+const CompleteReceipt = ({ orderProps }) => {
+  const { orderNum, time, phone, foodies, payment, price } = orderProps;
+
+  //   api연결
+  //   const apiUrl = process.env.REACT_APP_API_ROOT;
+  //   const [storeOpen, setStoreOpen] = useState(false);
+  //   useEffect(() => {
+  //     const config = {
+  //       withCredentials: true,
+  //     }
+  //     axios
+  //     .get(`${apiUrl}/api/v1/store/sales`, config)
+  //     .then((response) => {
+  //       console.log(response);
+  //             setStoreOpen(response.data);
+  //             console.log(storeOpen);
+  //         })
+  //         .catch((error) => {
+  //             console.error(error);
+  //         }
+  //         // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, []);
+
   return (
     <div>
       <div className="receipt-btn__wrapper">

diff --git a/src/pages/Home/Receipt/StatusReceipt/PendingReceipt.jsx b/src/pages/Home/Receipt/StatusReceipt/PendingReceipt.jsx
@@ -9,14 +9,33 @@ const PendingReceipt = ({ orderProps }) => {
   const [RefuseModal, setRefuseModal] = useState(false);
 
   const handleReceiveModal = () => {
-    console.log(ReceiveModal);
     setReceiveModal((prev) => !prev);
   };
 
   const handleRefuseModal = () => {
     setRefuseModal((prev) => !prev);
   };
 
+  //api 연결
+  //   const apiUrl = process.env.REACT_APP_API_ROOT;
+  //   const [storeOpen, setStoreOpen] = useState(false);
+  //   useEffect(() => {
+  //     const config = {
+  //       withCredentials: true,
+  //     }
+  //     axios
+  //     .get(`${apiUrl}/api/v1/store/sales`, config)
+  //     .then((response) => {
+  //       console.log(response);
+  //             setStoreOpen(response.data);
+  //             console.log(storeOpen);
+  //         })
+  //         .catch((error) => {
+  //             console.error(error);
+  //         }
+  //         // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, []);
+
   return (
     <div>
       <div className="receiptHeader">

diff --git a/src/pages/Home/Receipt/StatusReceipt/ProgressReceipt.jsx b/src/pages/Home/Receipt/StatusReceipt/ProgressReceipt.jsx
@@ -1,12 +1,31 @@
 import React from "react";
 
-const ProgressReceipt = ({
-  orderProps: { orderNum, time, phone, foodies, payment, price },
-}) => {
+const ProgressReceipt = ({ orderProps }) => {
+  const { orderNum, time, phone, foodies, payment, price } = orderProps;
   const onClickBtn = () => {
     console.log("제조완료");
   };
 
+  //   api 연결
+  //   const apiUrl = process.env.REACT_APP_API_ROOT;
+  //   const [storeOpen, setStoreOpen] = useState(false);
+  //   useEffect(() => {
+  //     const config = {
+  //       withCredentials: true,
+  //     }
+  //     axios
+  //     .get(`${apiUrl}/api/v1/store/sales`, config)
+  //     .then((response) => {
+  //       console.log(response);
+  //             setStoreOpen(response.data);
+  //             console.log(storeOpen);
+  //         })
+  //         .catch((error) => {
+  //             console.error(error);
+  //         }
+  //         // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, []);
+
   return (
     <div>
       <div className="receipt-btn__wrapper">

diff --git a/src/pages/Home/StatusHome/DetailHome.css b/src/pages/Home/StatusHome/DetailHome.css
@@ -38,15 +38,15 @@
 }
 
 .Order-content__box {
-  width: 33.375rem;
+  /* width: 33.375rem; */
+  width: 100%;
   padding: 2% 0% 2% 0%;
 
   border-top: 2px solid #838383;
 
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
+  justify-content: space-around;
   align-items: center;
 }
 

diff --git a/src/pages/Home/StatusHome/Wait.jsx b/src/pages/Home/StatusHome/Wait.jsx
@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { useRecoilState } from "recoil";
 import { ordercnt, selectOrder, selectStatus } from "../../../Atom/order";
+// import { soundState } from "../../../Atom/status";
 import downArrow from "../../../assets/icons/icon_downArrow_black.svg";
+// import AudioPlayer from "../../../components/views/Audio/AudioPlayer";
 import OrderBox from "../../../components/views/Order/OrderBox";
 import "./DetailHome.css";
 
@@ -99,12 +101,31 @@ const Wait = () => {
     setSelectedOrderId(selectedOrder ? selectedOrder.id : null);
   };
 
-  useEffect(() => {
-    /*
-    while (orderInfo.orders.length !== 0 && soundState) {
-      AudioPlayer();
-    }*/
+  //api 연결
+  //   const apiUrl = process.env.REACT_APP_API_ROOT;
+  //   const [storeOpen, setStoreOpen] = useState(false);
+  //   useEffect(() => {
+  //     const config = {
+  //       withCredentials: true,
+  //     }
+  //     axios
+  //     .get(`${apiUrl}/api/v1/store/sales`, config)
+  //     .then((response) => {
+  //       console.log(response);
+  //             setStoreOpen(response.data);
+  //             console.log(storeOpen);
+  //         })
+  //         .catch((error) => {
+  //             console.error(error);
+  //         }
+  //         // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, []);
+
+  // while (orderInfo.orders.length !== 0 && soundState) {
+  //   AudioPlayer();
+  // }
 
+  useEffect(() => {
     // OrderBox가 생성될 때마다 개수 증가
     setOrderCount((prev) => ({ ...prev, pending: orderInfo.orders.length }));
   }, [orderInfo.orders.length, setOrderCount]);