Merge pull request #17 from hhbb0081/test

Feat: 매출관리 페이지 추가

.env

@@ -4,3 +4,4 @@ WDS_SOCKET_PORT=0
 NODE_PATH=src/
 REACT_APP_API_ROOT=http://localhost:8080
 REACT_APP_HOME_URL=http://localhost:3000
+REACT_APP_API_URL=http://readyvery.com/api/v1

package.json

@@ -3,11 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.18",
+    "@mui/material": "^5.14.18",
+    "@nivo/bar": "^0.83.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "axios": "^1.5.1",
+    "axios": "^1.6.2",
     "bootstrap": "^5.3.2",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-bootstrap": "^2.9.1",
     "react-dom": "^18.2.0",

src/components/views/Chart/Chart.jsx

@@ -0,0 +1,32 @@
+import { ResponsiveBar } from '@nivo/bar'
+
+export default function Chart ({ data }) {
+    return(
+    <ResponsiveBar
+        data={data}
+        keys={[
+            '매출',
+        ]}
+        indexBy="day"
+        margin={{ top: 20, right: 0, bottom: 30, left: 30 }}
+        padding={0.5}
+        width={812}
+        height={390}
+        valueScale={{ type: 'linear' }}
+        indexScale={{ type: 'band', round: true }}
+        colors="#D82356"
+        axisLeft={{
+            tickSize: 5,
+            tickPadding: 5,
+            tickRotation: 0,
+            legendPosition: 'middle',
+            legendOffset: -40,
+            truncateTickAt: 0,
+        }}
+        labelSkipWidth={12}
+        labelSkipHeight={12}
+        labelTextColor="#fff"
+
+    />
+    )
+}

src/index.css

@@ -5,6 +5,11 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  -webkit-user-select:none;
+  -moz-user-select:none;
+  -ms-user-select:none;
+  user-select:none;
 }
 
 code {

src/pages/Inventory/MainInven.css

@@ -75,6 +75,7 @@
     height: calc(46.25rem - 5.0625rem);
     /* height: calc(42.5rem - 5.0625rem); */
     overflow-y: auto;
+    overflow-x: hidden;
 }
 
 .mainInven-category-content__wrapper::-webkit-scrollbar {

src/pages/Mypage/MainMypage.jsx

@@ -1,9 +1,18 @@
-import React from "react";
+import React, { useEffect } from "react";
 import kakao from "../../assets/icons/icon_kakao.svg";
 import readyvery from "../../assets/icons/img_readyVery.svg";
 import "./MainMypage.css";
 
 const MainMypage = () => {
+  const fetchData = async () => {
+    // const response = await axios.get(`${process.env.REACT_APP_API_URL}/user/info`);
+    // console.log(response);
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
   return (
     <div className="mypage-main__wrapper">
       <div className="mypage-top__wrapper">

src/pages/Mypage/Mypage.css

@@ -1,6 +1,5 @@
 .mypage-wrapper{
     display: flex;
-
 }
 
 nav{

src/pages/Sales/MainSales.css

@@ -0,0 +1,76 @@
+.sales-main__wrapper{
+    width: 100%;
+}
+
+.sales-top__wrapper{
+    margin: 2rem 0 1.75rem 0;
+}
+
+.sales-total-revenue{
+    font-size: 2.1875rem;
+    font-family: "Bold";
+    color: #000;
+    white-space: nowrap;
+}
+
+.sales-total-txt__wrapper{
+    display: flex;
+    justify-content: space-between;
+    width: 56.25rem;
+    margin: 0 auto;
+}
+
+.sales-total-txt{
+    font-size: 0.875rem;
+    font-family: "Regular";
+    color: #838383;
+    line-height: 1.25rem;
+}
+
+.sales-total-date{
+    font-size: 1.25rem;
+    font-family: "Medium";
+    color: #4f4f4f;
+}
+
+.sales-revenue__wrapper{
+    width: 56.25rem; /* 900px */
+    height: 34.8125rem; /* 557px */
+    border-radius: 0.625rem;
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
+    margin: 0 auto;
+    padding: 1.65625rem 2.625rem;
+}
+
+.sales-revenue-title{
+    font-size: 1.875rem;
+    font-family: "Bold";
+    color: #000;
+}
+
+.sales-revenue-week__wrapper{
+    display: flex;
+    justify-content: space-around;
+}
+
+.sales-revenue-img__wrapper{
+    display: flex;
+    align-items: center;
+}
+
+.sales-revenue-week__title{
+    font-size: 1.25rem;
+    font-family: "SemiBold";
+    color: #4F4F4F;
+}
+
+.sales-revenue-week__date{
+    font-size: 1rem;
+    font-family: "SemiBold";
+    color: #4F4F4F;
+}
+
+.sales-chart__wrapper{
+    width: 100%;
+    height: 80%;
+}

src/pages/Sales/MainSales.jsx

@@ -1,11 +1,94 @@
-import React from "react";
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import 'moment/locale/ko';
+import moment from 'moment/moment';
+import React, { 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 [currentDate, setCurrentDate] = useState({
+    monday: moment(moment()).startOf('isoWeek'),
+    sunday: moment(moment()).endOf('isoWeek')
+  });
+
+  const handlePrevWeek = () => {
+    const currentWeekStart = moment(currentDate.monday).startOf('isoWeek').add(-1, 'weeks');
+    const currentWeekEnd = moment(currentWeekStart).endOf('isoWeek');
+
+    setCurrentDate({
+      monday: currentWeekStart,
+      sunday: currentWeekEnd
+    });
+  };
+
+  const handleNextWeek = () => {
+    const currentWeekStart = moment(currentDate.monday).startOf('isoWeek').add(1, 'weeks');
+    const currentWeekEnd = moment(currentWeekStart).endOf('isoWeek');
+
+    setCurrentDate({
+      monday: currentWeekStart,
+      sunday: currentWeekEnd
+    });
+  };
+
   return (
-    <div className="sales-main__wrapper">
-      <h1>Sales</h1>
-    </div>
+    <section className="sales-main__wrapper">
+      <div className='sales-top__wrapper'>
+        <div className="sales-total-revenue">레디베리를 통해 누적 <span style={{ 'color': '#d82356', "fontSize": "2.8125rem" }}>1,170,500원</span>의 매출을 올렸습니다.</div>
+        <div className='sales-total-txt__wrapper'>
+          <span className='sales-total-txt'>매출 발생 후 최대 5영업일 이내에 중개 수수료 차감 후 입금 예정 ( 문의 : 오남택 010-9295-5340 )</span>
+          <span className='sales-total-date'>(기준 {moment().format("M")}월 {moment().format("D")}일 {moment().format("HH")}:{moment().format("mm")})</span>
+        </div>
+      </div>
+
+      <div className="sales-revenue__wrapper">
+        <div className="sales-revenue-title">주간매출</div>
+        <div className="sales-revenue-week__wrapper">
+          <span className='sales-revenue-img__wrapper' onClick={handlePrevWeek}><ArrowBackIosNewIcon /></span>
+          <span>
+            <div className="sales-revenue-week__title">{currentDate.monday.format("YYYY-MM-DD")} ~ {currentDate.sunday.format("YYYY-MM-DD")}</div>
+            {/* <div className="sales-revenue-week__date">{currentDate.monday.format("YYYY-MM-DD")} ~ {currentDate.sunday.format("YYYY-MM-DD")}</div> */}
+          </span>
+          <span className='sales-revenue-img__wrapper' onClick={handleNextWeek}><ArrowForwardIosIcon/></span>
+        </div>
+        <div className="sales-chart__wrapper">
+          <Chart data={chartData} />
+        </div>
+      </div>
+    </section>
   );
 };
 

src/pages/Sales/Sales.css

@@ -1,13 +1,15 @@
-.mypage-wrapper{
+.sales-wrapper{
     display: flex;
 
 }
 
 nav{
     width: 8.875rem;
     height: 46.25rem;
+    padding-top: 5.5rem;
 }
 
 main{
     width: calc(100vw - 8.875rem);
+    margin-top: 5.5rem;
 }

src/pages/Sales/Sales.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import Header from "../../components/views/Header/Header2";
 import NavBar from "../../components/views/NavBar/NavBar";
 import MainSales from "./MainSales";
+import "./Sales.css";
 
 const Sales = () => {
   return (