diff --git a/src/components/views/Chart/Chart.jsx b/src/components/views/Chart/Chart.jsx index c8d5bdb..25a7dfe 100644 --- a/src/components/views/Chart/Chart.jsx +++ b/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} diff --git a/src/components/views/NavBar/NavBar.css b/src/components/views/NavBar/NavBar.css index 6237dda..6cbe54b 100644 --- a/src/components/views/NavBar/NavBar.css +++ b/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; } diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx index f11c1d6..6bbb524 100644 --- a/src/pages/Home/Home.jsx +++ b/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,6 +8,83 @@ 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 (
@@ -14,8 +92,8 @@ function Home () {
- - + +
); diff --git a/src/pages/Home/MainHome.jsx b/src/pages/Home/MainHome.jsx index 5ed1e63..044569f 100644 --- a/src/pages/Home/MainHome.jsx +++ b/src/pages/Home/MainHome.jsx @@ -1,5 +1,4 @@ -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"; @@ -7,8 +6,7 @@ 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 (
diff --git a/src/pages/Home/Receipt/Receipt.css b/src/pages/Home/Receipt/Receipt.css index 6899a7c..ef001c3 100644 --- a/src/pages/Home/Receipt/Receipt.css +++ b/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; +} \ No newline at end of file diff --git a/src/pages/Home/Receipt/Receipt.jsx b/src/pages/Home/Receipt/Receipt.jsx index bcef6f8..6ec8454 100644 --- a/src/pages/Home/Receipt/Receipt.jsx +++ b/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 = () => {
{Status === "pending" ? ( - + ) : Status === "progress" ? ( - + ) : Status === "complete" ? ( - + ) : (
loading diff --git a/src/pages/Home/Receipt/StatusReceipt/CompleteReceipt.jsx b/src/pages/Home/Receipt/StatusReceipt/CompleteReceipt.jsx index 7491b16..290b0ed 100644 --- a/src/pages/Home/Receipt/StatusReceipt/CompleteReceipt.jsx +++ b/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 }) => {
주문시간 - {orderProps?.time.split("T")[0].replaceAll("-", "/")} {orderProps.time.split("T")[1].split(".")[0]} + {orderProps?.time.split("T")[0].replaceAll("-", "/")} {orderProps?.time.split("T")[1].split(".")[0]}
고객연락처 diff --git a/src/pages/Home/Receipt/StatusReceipt/PendingReceipt.jsx b/src/pages/Home/Receipt/StatusReceipt/PendingReceipt.jsx index 6d2d49e..fa835c8 100644 --- a/src/pages/Home/Receipt/StatusReceipt/PendingReceipt.jsx +++ b/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)) diff --git a/src/pages/Home/Receipt/StatusReceipt/ProgressReceipt.jsx b/src/pages/Home/Receipt/StatusReceipt/ProgressReceipt.jsx index d4d8058..9a8de14 100644 --- a/src/pages/Home/Receipt/StatusReceipt/ProgressReceipt.jsx +++ b/src/pages/Home/Receipt/StatusReceipt/ProgressReceipt.jsx @@ -1,8 +1,9 @@ import axios from "axios"; import React from "react"; -const ProgressReceipt = ({ orderProps }) => { +const ProgressReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => { const apiUrl = process.env.REACT_APP_API_ROOT; + // const setOrderSelect = useSetRecoilState(selectOrder); // const { orderNum, time, phone, foodies, payment, price } = orderProps; const handleComplete = () => { @@ -22,10 +23,15 @@ const ProgressReceipt = ({ orderProps }) => { if(res.data.success === true){ alert("제조완료 처리되었습니다."); // 데이터 다시 fetch + fetchData(); // select된 데이터 변경 + setStatus("null"); + setOrder(null); } }) - .catch((err) => console.log(err)) + .catch((err) => { + console.log(err); + }) }; return ( diff --git a/src/pages/Home/StatusHome/Complete.jsx b/src/pages/Home/StatusHome/Complete.jsx index 1c3823c..5d0c998 100644 --- a/src/pages/Home/StatusHome/Complete.jsx +++ b/src/pages/Home/StatusHome/Complete.jsx @@ -64,7 +64,7 @@ const Complete = ({orderInfo}) => { )}
- {sortedOrders?.length && + { sortedOrders?.map((order) => ( { )}
- {sortedOrders?.length && - sortedOrders?.map((order) => ( - - ))} + {sortedOrders?.map((order) => ( + + ))}
{/* */}
diff --git a/src/pages/Inventory/MainInven.css b/src/pages/Inventory/MainInven.css index 9b346e1..7e31481 100644 --- a/src/pages/Inventory/MainInven.css +++ b/src/pages/Inventory/MainInven.css @@ -61,6 +61,16 @@ background-color: #4F4F4F; z-index: 0; overflow-y: auto; + overflow-x: hidden; +} + +.mainInven-category__modal::-webkit-scrollbar { + display: none; +} + +.mainInven-category__modal { + -ms-overflow-style: none; /* 인터넷 익스플로러 */ + scrollbar-width: none; /* 파이어폭스 */ } .mainInven-category__modal span{ @@ -165,7 +175,8 @@ bottom: 0; left: 8.875rem; right: 0; - height: 46.25rem; + width: 55.125rem; + height: 42.5rem; background-color: rgba(0,0,0, 0.5); display: flex; diff --git a/src/pages/Inventory/MainInven.jsx b/src/pages/Inventory/MainInven.jsx index f867d57..eb41925 100644 --- a/src/pages/Inventory/MainInven.jsx +++ b/src/pages/Inventory/MainInven.jsx @@ -37,7 +37,8 @@ function MainInven () { useEffect(() => { fetchData(); - }, [fetchData]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); // const memoizedCategoryList = useMemo(() => { // return categoryList; @@ -80,6 +81,7 @@ function MainInven () { .then((res) => { console.log(res); setIsModalOpen(false); + fetchData(); }) .catch((err) => console.log(err)); } diff --git a/src/pages/Main/MainPage.css b/src/pages/Main/MainPage.css index a677b24..8b397e0 100644 --- a/src/pages/Main/MainPage.css +++ b/src/pages/Main/MainPage.css @@ -1,6 +1,6 @@ .mainpage-wrapper{ width: 100%; - height: 100vh; + height: 94vh; background-color: #fff; display: flex; diff --git a/src/pages/Mypage/MainMypage.css b/src/pages/Mypage/MainMypage.css index b28b5c1..bcb4945 100644 --- a/src/pages/Mypage/MainMypage.css +++ b/src/pages/Mypage/MainMypage.css @@ -6,6 +6,7 @@ /* width: 100%; */ /* height: calc(100% + 5.5rem); */ width: calc(64rem - 8.875rem); + min-width: calc(64rem - 8.875rem); height: calc(48rem - 5.5rem); justify-content: space-between; @@ -28,16 +29,19 @@ .mypage-top-txt__wrapper{ text-align: start; + white-space: nowrap; } .mypage-top-cafe__txt{ + max-width: 28.375rem; font-size: 1.875rem; font-family: "Bold"; - white-space: nowrap; + white-space: pre-line; } .mypage-top-cafe__txt span{ font-size: 3.125rem; + max-width: 18.75rem; } .mypage-kakao__wrapper{ @@ -51,6 +55,7 @@ flex-direction: column; text-align: start; margin: 0 3.4375rem 0 0.6875rem; + white-space: nowrap; } .mypage-kakao__txt span{ @@ -64,7 +69,11 @@ height: 2.5rem; border-radius: 0.625rem; background-color: #d9d9d9; - padding: 0.59375rem 0; + + display: flex; + align-items: center; + justify-content: center; + /* padding: 0.59375rem 0; */ } .mypage__line{ diff --git a/src/pages/Mypage/MainMypage.jsx b/src/pages/Mypage/MainMypage.jsx index 9876476..159df15 100644 --- a/src/pages/Mypage/MainMypage.jsx +++ b/src/pages/Mypage/MainMypage.jsx @@ -60,6 +60,10 @@ const MainMypage = () => { }); }; + const handleKaKao = () => { + window.location.href = "http://pf.kakao.com/_ZxiEjG/chat"; + } + return (
@@ -76,7 +80,7 @@ const MainMypage = () => { 레디베리 상담 매일 09:00 ~ 18:00
-
+
kakao
diff --git a/src/pages/Sales/MainSales.jsx b/src/pages/Sales/MainSales.jsx index e9bf579..0f2ef39 100644 --- a/src/pages/Sales/MainSales.jsx +++ b/src/pages/Sales/MainSales.jsx @@ -1,43 +1,45 @@ import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew'; import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'; +import axios from 'axios'; import 'moment/locale/ko'; import moment from 'moment/moment'; -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import Chart from '../../components/views/Chart/Chart'; import "./MainSales.css"; const MainSales = () => { - const chartData = - [ - { - "day": "Mon", - "매출": 160, - }, - { - "day": "Tue", - "매출": 84, - }, - { - "day": "Wed", - "매출": 1, - }, - { - "day": "Thu", - "매출": 159, - }, - { - "day": "Fri", - "매출": 168, - }, - { - "day": "Sat", - "매출": 118, - }, - { - "day": "Sun", - "매출": 170, - } - ]; + const apiUrl = process.env.REACT_APP_API_ROOT; + // const chartData = + // [ + // { + // "day": "Mon", + // "매출": 160, + // }, + // { + // "day": "Tue", + // "매출": 84, + // }, + // { + // "day": "Wed", + // "매출": 1, + // }, + // { + // "day": "Thu", + // "매출": 159, + // }, + // { + // "day": "Fri", + // "매출": 168, + // }, + // { + // "day": "Sat", + // "매출": 118, + // }, + // { + // "day": "Sun", + // "매출": 170, + // } + // ]; const [currentDate, setCurrentDate] = useState({ monday: moment(moment()).startOf('isoWeek'), @@ -52,6 +54,8 @@ const MainSales = () => { monday: currentWeekStart, sunday: currentWeekEnd }); + + fetchSales(currentWeekStart.format("YYYY-MM-DD")); }; const handleNextWeek = () => { @@ -62,12 +66,59 @@ const MainSales = () => { monday: currentWeekStart, sunday: currentWeekEnd }); + + fetchSales(currentWeekStart.format("YYYY-MM-DD")); }; + const [totalSale, setTotalSale] = useState(0); + const [chartData, setChartData] = useState([]); + + + const fetchSales = (monday) => { + const config = { + withCredentials: true + }; + + const body = { + "monday": monday + }; + console.log(body); + + axios.post(`${apiUrl}/api/v1/sale/management`, body, config) + .then((res) => { + console.log(res); + if(res.data.success){ + setChartData(res.data.saleManagementList.map(item => { + console.log((item.sale / 1000).toFixed(1)); + return { + "day": item.day.slice(0, 3), + "매출": (item.sale / 1000).toFixed(1) + }})); + } + }) + .catch((err) => console.log(err)); + } + useEffect(() => { + const config = { + withCredentials: true + }; + + axios.get(`${apiUrl}/api/v1/sale/total`, config) + .then((res) => { + console.log(res); + if(res.data.success){ + setTotalSale(res.data.totalSale); + } + }) + .catch((err) => console.log(err)); + + fetchSales(currentDate.monday.format("YYYY-MM-DD")); + }, []); + return (
-
레디베리를 통해 누적 1,170,500원의 매출을 올렸습니다.
+
레디베리를 통해 누적 {totalSale.toString().replace(/\B(?의 매출을 올렸습니다.
매출 발생 후 최대 5영업일 이내에 중개 수수료 차감 후 입금 예정 ( 문의 : 오남택 010-9295-5340 ) (기준 {moment().format("M")}월 {moment().format("D")}일 {moment().format("HH")}:{moment().format("mm")})