diff --git a/src/pages/Mypage/Mypage.css b/src/pages/Mypage/Mypage.css
index 0a5ce43..89dda7d 100644
--- a/src/pages/Mypage/Mypage.css
+++ b/src/pages/Mypage/Mypage.css
@@ -1,6 +1,5 @@
.mypage-wrapper{
display: flex;
-
}
nav{
diff --git a/src/pages/Sales/MainSales.css b/src/pages/Sales/MainSales.css
index e69de29..17ef6bb 100644
--- a/src/pages/Sales/MainSales.css
+++ b/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%;
+}
\ No newline at end of file
diff --git a/src/pages/Sales/MainSales.jsx b/src/pages/Sales/MainSales.jsx
index 46476af..e9bf579 100644
--- a/src/pages/Sales/MainSales.jsx
+++ b/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 (
-
-
Sales
-
+
+
+
레디베리를 통해 누적 1,170,500원의 매출을 올렸습니다.
+
+ 매출 발생 후 최대 5영업일 이내에 중개 수수료 차감 후 입금 예정 ( 문의 : 오남택 010-9295-5340 )
+ (기준 {moment().format("M")}월 {moment().format("D")}일 {moment().format("HH")}:{moment().format("mm")})
+
+
+
주간매출
+
+
+
+ {currentDate.monday.format("YYYY-MM-DD")} ~ {currentDate.sunday.format("YYYY-MM-DD")}
+ {/* {currentDate.monday.format("YYYY-MM-DD")} ~ {currentDate.sunday.format("YYYY-MM-DD")}
*/}
+
+
+
+
+
+
+
);
};
diff --git a/src/pages/Sales/Sales.css b/src/pages/Sales/Sales.css
index 27c1e43..8f1d94a 100644
--- a/src/pages/Sales/Sales.css
+++ b/src/pages/Sales/Sales.css
@@ -1,4 +1,4 @@
-.mypage-wrapper{
+.sales-wrapper{
display: flex;
}
@@ -6,8 +6,10 @@
nav{
width: 8.875rem;
height: 46.25rem;
+ padding-top: 5.5rem;
}
main{
width: calc(100vw - 8.875rem);
+ margin-top: 5.5rem;
}
\ No newline at end of file
diff --git a/src/pages/Sales/Sales.jsx b/src/pages/Sales/Sales.jsx
index 288369b..d86129e 100644
--- a/src/pages/Sales/Sales.jsx
+++ b/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 (