Feat: 매출 관리 api 연결

src/components/views/Chart/Chart.jsx

@@ -8,7 +8,7 @@ export default function Chart ({ data }) {
             '매출',
         ]}
         indexBy="day"
-        margin={{ top: 20, right: 0, bottom: 30, left: 30 }}
+        margin={{ top: 20, right: 10, bottom: 30, left: 40 }}
         padding={0.5}
         width={710}
         height={390}
@@ -22,6 +22,8 @@ export default function Chart ({ data }) {
             legendPosition: 'middle',
             legendOffset: -40,
             truncateTickAt: 0,
+            // tickValues: [0, 2, 4, 6, 8, 10],
+            // format: (value) => `${value.toFixed(1)}`,
         }}
         labelSkipWidth={12}
         labelSkipHeight={12}

src/components/views/NavBar/NavBar.css

@@ -6,6 +6,7 @@
   background-color: #2e2d2d;
 
   display: flex;
+  flex-direction: column;
   justify-content: space-around;
 }
 
@@ -33,10 +34,10 @@
 
 .menu-font {
   color: #fff;
-  font-family: Pretendard;
+  font-family: "Bold";
   font-size: 1.25rem;
-  font-style: normal;
-  font-weight: 700;
+  /* font-style: normal;
+  font-weight: 700; */
   line-height: 130%; /* 1.625rem */
   letter-spacing: -0.0125rem;
 }

src/pages/Home/Home.jsx

@@ -1,4 +1,5 @@
-import React from "react";
+import axios from "axios";
+import React, { useEffect, useState } from "react";
 import Header from "../../components/views/Header/Header2";
 import NavBar from "../../components/views/NavBar/NavBar";
 import "./Home.css";
@@ -7,15 +8,92 @@ import Receipt from "./Receipt/Receipt";
 
 function Home () {
 
+  const apiUrl = process.env.REACT_APP_API_ROOT;
+
+  const [waitInfo, setWaitInfo] = useState({});
+  const [makeInfo, setMakeInfo] = useState({});
+  const [completeInfo, setCompleteInfo] = useState({});
+
+  const waitData = () => {
+    const config = {
+      withCredentials: true
+    };
+
+    axios.get(`${apiUrl}/api/v1/order?status=ORDER`, config)
+      .then((res) => {
+        console.log(res);
+        setWaitInfo(res.data);
+      })
+      .catch((err) => {
+        console.log(err);
+        if(err.status === 404 && err.message === "Not found order."){
+          setWaitInfo({});
+        }
+      })
+  }
+
+  const makeData = () => {
+    const config = {
+      withCredentials: true
+    };
+
+    axios.get(`${apiUrl}/api/v1/order?status=MAKE`, config)
+      .then((res) => {
+        console.log(res);
+        setMakeInfo(res.data);
+      })
+      .catch((err) => {
+        console.log(err);
+        if(err.status === 404 && err.message === "Not found order."){
+          setMakeInfo({});
+        }
+      })
+  }
+
+  const completeData = () => {
+    const config = {
+      withCredentials: true
+    };
+
+    axios.get(`${apiUrl}/api/v1/order?status=COMPLETE`, config)
+      .then((res) => {
+        console.log(res);
+        setCompleteInfo(res.data);
+      })
+      .catch((err) => {
+        console.log(err);
+        if(err.status === 404 && err.message === "Not found order."){
+          setCompleteInfo({});
+        }
+      })
+  }
+
+  const fetchData = () => {
+    waitData();
+    makeData();
+    completeData();
+  }
+
+  useEffect(() => {
+    fetchData();
+
+    // const intervalId = setInterval(fetchData, 5000); // 5초마다 실행
+
+    // return () => clearInterval(intervalId);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+
   return (
     <div className="home-wrapper">
       <Header />
         <nav>
           <NavBar />
         </nav>
         <main>
-          <MainHome />
-          <Receipt />
+          <MainHome waitInfo={waitInfo} makeInfo={makeInfo} completeInfo={completeInfo}/>
+          <Receipt fetchData={fetchData}/>
         </main>
     </div>
   );

src/pages/Home/MainHome.jsx

@@ -1,14 +1,12 @@
-import axios from "axios";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useSetRecoilState } from "recoil";
 import { selectStatus } from "../../Atom/order";
 import "./MainHome.css";
 import Complete from "./StatusHome/Complete";
 import Progress from "./StatusHome/Progress";
 import Wait from "./StatusHome/Wait";
 
-const MainHome = () => {
-  const apiUrl = process.env.REACT_APP_API_ROOT;
+const MainHome = ({ waitInfo, makeInfo, completeInfo}) => {
   const setStatusSelect = useSetRecoilState(selectStatus);
 
   const [status, setStatus] = useState("Wait");
@@ -19,65 +17,15 @@ const MainHome = () => {
     setStatusSelect("null")
   };
 
-  const [waitInfo, setWaitInfo] = useState({});
-  const [makeInfo, setMakeInfo] = useState({});
-  const [completeInfo, setCompleteInfo] = useState({});
-
-  const waitData = () => {
-    const config = {
-      withCredentials: true
-    };
-
-    axios.get(`${apiUrl}/api/v1/order?status=ORDER`, config)
-      .then((res) => {
-        console.log(res);
-        setWaitInfo(res.data);
-      })
-      .catch((err) => {
-        console.log(err)})
-  }
-
-  const makeData = () => {
-    const config = {
-      withCredentials: true
-    };
-
-    axios.get(`${apiUrl}/api/v1/order?status=MAKE`, config)
-      .then((res) => {
-        console.log(res);
-        setMakeInfo(res.data);
-      })
-      .catch((err) => console.log(err))
-  }
-
-  const completeData = () => {
-    const config = {
-      withCredentials: true
-    };
-
-    axios.get(`${apiUrl}/api/v1/order?status=COMPLETE`, config)
-      .then((res) => {
-        console.log(res);
-        setCompleteInfo(res.data);
-      })
-      .catch((err) => console.log(err))
-  }
-
-  const fetchData = () => {
-    waitData();
-    makeData();
-    completeData();
-  }
-
-  useEffect(() => {
-    fetchData();
+  // useEffect(() => {
+  //   fetchData();
 
   //   const intervalId = setInterval(fetchData, 5000); // 5초마다 실행
 
   //   return () => clearInterval(intervalId);
-  
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+
+  // // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, []);
 
   return (
     <div className="Main-Box">

src/pages/Home/Receipt/Receipt.css

@@ -11,6 +11,13 @@
   line-height: 100px; /* 수직 가운데 정렬을 위한 높이 설정 */
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
   overflow-y: auto;
+  overflow-x: hidden;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.rounded-rectangle::-webkit-scrollbar {
+  display: none;
 }
 
 .Box {
@@ -212,6 +219,12 @@
   line-height: 100%; /* 1.375rem */
 }
 
+.modal-box-choose-btn:active{
+  background-color: #d82356;
+  border: 2px solid #d82356;
+  color: #fff;
+}
+
 .modal-box-chooseTime-btn {
   display: flex;
   justify-content: center;
@@ -230,3 +243,9 @@
   font-weight: 600;
   line-height: 100%; /* 1.375rem */
 }
+
+.modal-box-chooseTime-btn:active{
+  background-color: #d82356;
+  border: 2px solid #d82356;
+  color: #fff;
+}

src/pages/Home/Receipt/Receipt.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useRecoilValue } from "recoil";
+import { useRecoilState } from "recoil";
 import { selectOrder, selectStatus } from "../../../Atom/order";
 import loading from "../../../assets/icons/loading.svg";
 import "./Receipt.css";
@@ -8,9 +8,9 @@ import CompleteReceipt from "./StatusReceipt/CompleteReceipt";
 import PendingReceipt from "./StatusReceipt/PendingReceipt";
 import ProgressReceipt from "./StatusReceipt/ProgressReceipt";
 
-const Receipt = () => {
-  const Status = useRecoilValue(selectStatus);
-  const Order = useRecoilValue(selectOrder);
+const Receipt = ({ fetchData }) => {
+  const [Status, setStatus] = useRecoilState(selectStatus);
+  const [Order, setOrder] = useRecoilState(selectOrder);
 
   const onClickHandler = () => {
     console.log(Status);
@@ -21,11 +21,11 @@ const Receipt = () => {
     <div className="Box">
       <div className="rounded-rectangle">
         {Status === "pending" ? (
-          <PendingReceipt orderProps={Order} />
+          <PendingReceipt orderProps={Order} setStatus={setStatus} setOrder={setOrder} fetchData={fetchData}/>
         ) : Status === "progress" ? (
-          <ProgressReceipt orderProps={Order} />
+          <ProgressReceipt orderProps={Order} setStatus={setStatus} setOrder={setOrder} fetchData={fetchData}/>
         ) : Status === "complete" ? (
-          <CompleteReceipt orderProps={Order} />
+          <CompleteReceipt orderProps={Order} setStatus={setStatus} setOrder={setOrder} fetchData={fetchData}/>
         ) : (
           <div className="nullReceipt">
             <img onClick={onClickHandler} alt="loading" src={loading} />

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

@@ -1,9 +1,9 @@
 import axios from "axios";
 import React from "react";
 
-const CompleteReceipt = ({ orderProps }) => {
+const CompleteReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
   const apiUrl = process.env.REACT_APP_API_ROOT;
-  // const { orderNum, time, phone, foodies, payment, price } = orderProps;
+  // const setOrderSelect = useSetRecoilState(selectOrder);
 
   const handleComplete = () => {
     const config = {
@@ -22,7 +22,10 @@ const CompleteReceipt = ({ orderProps }) => {
         if(res.data.success === true){
           alert("픽업완료 처리되었습니다.");
           // 데이터 다시 fetch
+          fetchData();
           // select된 데이터 변경
+          setStatus("null");
+          setOrder(null);
         }
       })
       .catch((err) => console.log(err))
@@ -38,7 +41,7 @@ const CompleteReceipt = ({ orderProps }) => {
       </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>
+        <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>

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

@@ -3,8 +3,9 @@ import React, { useState } from "react";
 import { Button, Col, Row } from "react-bootstrap";
 import X from "../../../../assets/icons/X.svg";
 
-const PendingReceipt = ({ orderProps }) => {
+const PendingReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
   const apiUrl = process.env.REACT_APP_API_ROOT;
+  // const setOrderSelect = useSetRecoilState(selectOrder);
 
   const [ReceiveModal, setReceiveModal] = useState(false);
   const [RefuseModal, setRefuseModal] = useState(false);
@@ -32,10 +33,21 @@ const PendingReceipt = ({ orderProps }) => {
           alert("취소되었습니다.");
           setRefuseModal((prev) => !prev);
           // 데이터 다시 fetch
+          fetchData();
           // select된 데이터 변경
+          setStatus("null");
+          setOrder(null);
         }
       })
-      .catch((err) => console.log(err))
+      .catch((err) => {
+        console.log(err);
+        setRefuseModal((prev) => !prev);
+          // 데이터 다시 fetch
+          fetchData();
+          // select된 데이터 변경
+          setStatus("null");
+          setOrder(null);
+      })
   }
 
   const handleMake = (e) => {
@@ -57,8 +69,11 @@ const PendingReceipt = ({ orderProps }) => {
           alert("접수되었습니다.");
           setReceiveModal((prev) => !prev);
           // 데이터 다시 fetch
+          fetchData();
           // select된 데이터 변경
           // 클릭 시 스타일 변화
+          setStatus("null");
+          setOrder(null);
         }
       })
       .catch((err) => console.log(err))