FIX: Pull main & Error fix

develop-pix · Oct 27, 2023 · dae4aaf · dae4aaf
2 parents 83cd0f3 + ed50632
commit dae4aaf
Show file tree

Hide file tree

Showing 17 changed files with 1,066 additions and 22 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "@mui/material": "^5.14.12",
     "@mui/styled-engine-sc": "^5.14.12",
     "@mui/x-date-pickers": "^6.16.3",
+    "@types/recharts": "^1.8.26",
     "axios": "^1.5.1",
     "dayjs": "^1.11.10",
     "draft-js": "^0.11.7",
@@ -24,6 +25,7 @@
     "react-dom": "^18.2.0",
     "react-draft-wysiwyg": "^1.15.0",
     "react-router-dom": "^6.16.0",
+    "recharts": "^2.9.0",
     "recoil": "^0.7.7"
   },
   "devDependencies": {

diff --git a/src/components/branch-manage/BranchManage.tsx b/src/components/branch-manage/BranchManage.tsx
@@ -82,7 +82,7 @@ export default function EventManage() {
               borderBottom: "none",
               padding: "13px 10px 5px 10px",
               borderRadius: "10px 10px 0 0",
-              backgroundColor: `${customColors.main}`,
+              backgroundColor: `${customColors.sub_pink}`,
               fontSize: "18px",
             }}
           >

diff --git a/src/components/dashboard/DashBoard.tsx b/src/components/dashboard/DashBoard.tsx
@@ -0,0 +1,24 @@
+import Box from "@mui/material/Box";
+import DashBoardChart from "./DashBoardChart";
+import DashBoardTable from "./DashBoardTable";
+import { DashBoardData } from "../../interface/DashBoard.interface";
+
+export default function DashBoard() {
+  // 최근 일주일간의 데이터
+  const data: DashBoardData[] = [
+    { date: "2023-10-20", visitors: 100, signups: 25, reviews: 10 },
+    { date: "2023-10-21", visitors: 150, signups: 30, reviews: 15 },
+    { date: "2023-10-22", visitors: 120, signups: 20, reviews: 12 },
+    { date: "2023-10-23", visitors: 200, signups: 50, reviews: 20 },
+    { date: "2023-10-24", visitors: 180, signups: 40, reviews: 18 },
+    { date: "2023-10-25", visitors: 220, signups: 60, reviews: 25 },
+    { date: "2023-10-26", visitors: 250, signups: 70, reviews: 30 },
+  ];
+
+  return (
+    <Box sx={{ display: "flex" }}>
+      <DashBoardChart data={data} />
+      <DashBoardTable data={data} />
+    </Box>
+  );
+}
diff --git a/src/components/dashboard/DashBoardChart.tsx b/src/components/dashboard/DashBoardChart.tsx
@@ -0,0 +1,54 @@
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
+import { Paper, Typography } from "@mui/material";
+import { customColors } from "../../styles/base/Variable.style";
+import { DashBoardProps } from "../../interface/DashBoard.interface";
+import Box from "@mui/material/Box";
+
+export default function DashBoardChart({ data }: DashBoardProps) {
+  return (
+    <Paper
+      elevation={3}
+      style={{
+        padding: "20px",
+        width: "35vw",
+        margin: "40px 0px 40px 40px",
+        border: `2px solid ${customColors.sub_pink}`,
+      }}
+    >
+      <Box sx={{ marginBottom: "20px" }}>
+        <Typography variant="h6">회원가입 / 방문자 현황</Typography>
+      </Box>
+
+      <ResponsiveContainer width="100%" aspect={1.8}>
+        <LineChart data={data}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="date" tickFormatter={(date) => date.substring(5)} />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Line
+            type="linear"
+            dataKey="visitors"
+            stroke={customColors.main_blue}
+            name="방문자 수"
+          />
+          <Line
+            type="linear"
+            dataKey="signups"
+            stroke={customColors.sub_blue}
+            name="회원가입 수"
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </Paper>
+  );
+}
diff --git a/src/components/dashboard/DashBoardForm.tsx b/src/components/dashboard/DashBoardForm.tsx
@@ -1,12 +1,13 @@
 import SideBar from "../reuse/sidebar/SideBar";
 import Box from "@mui/material/Box";
+import DashBoard from "./DashBoard";
 
 // 대시보드 페이지
 export default function DashBoardForm() {
   return (
     <Box sx={{ display: "flex" }}>
       <SideBar />
-      대시보드 페이지
+      <DashBoard />
     </Box>
   );
 }
diff --git a/src/components/dashboard/DashBoardTable.tsx b/src/components/dashboard/DashBoardTable.tsx
@@ -0,0 +1,98 @@
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import { customColors } from "../../styles/base/Variable.style";
+import {
+  DashBoardProps,
+  DashBoardMonthData,
+} from "../../interface/DashBoard.interface";
+
+import Box from "@mui/material/Box";
+
+export default function DashBoardTable({ data }: DashBoardProps) {
+  // 이번달 합계 데이터
+  const sum_data: DashBoardMonthData = {
+    visitors: 10000,
+    signups: 400,
+    reviews: 3000,
+  };
+
+  // 주간 방문자 수, 회원가입 수, 리뷰 수
+  const weekVisitors = data.reduce((total, item) => total + item.visitors, 0);
+  const weekSignups = data.reduce((total, item) => total + item.signups, 0);
+  const weekReviews = data.reduce((total, item) => total + item.reviews, 0);
+
+  // 월간 합계 데이터
+  const thisMonthData = {
+    date: "이번 달 합계",
+    visitors: sum_data ? sum_data.visitors : 0,
+    signups: sum_data ? sum_data.signups : 0,
+    reviews: sum_data ? sum_data.reviews : 0,
+  };
+
+  // 주간 합계 데이터
+  const thisWeekData = {
+    date: "최근 7일 합계",
+    visitors: weekVisitors,
+    signups: weekSignups,
+    reviews: weekReviews,
+  };
+
+  return (
+    <Paper
+      elevation={3}
+      style={{
+        padding: "20px",
+        width: "35vw",
+        margin: "40px 0px 40px 40px",
+        border: `2px solid ${customColors.sub_pink}`,
+      }}
+    >
+      <Box sx={{ marginBottom: "20px" }}>
+        <Typography variant="h6">일자별 요약</Typography>
+      </Box>
+      <TableContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>일자</TableCell>
+              <TableCell>방문자</TableCell>
+              <TableCell>가입자</TableCell>
+              <TableCell>리뷰</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {data.map((item) => (
+              <TableRow key={item.date}>
+                <TableCell>{item.date}</TableCell>
+                <TableCell>{item.visitors}</TableCell>
+                <TableCell>{item.signups}</TableCell>
+                <TableCell>{item.reviews}</TableCell>
+              </TableRow>
+            ))}
+
+            <TableRow key={thisWeekData.date}>
+              <TableCell>{thisWeekData.date}</TableCell>
+              <TableCell>{thisWeekData.visitors}</TableCell>
+              <TableCell>{thisWeekData.signups}</TableCell>
+              <TableCell>{thisWeekData.reviews}</TableCell>
+            </TableRow>
+            <TableRow key={thisMonthData.date}>
+              <TableCell>{thisMonthData.date}</TableCell>
+              <TableCell>{thisMonthData.visitors}</TableCell>
+              <TableCell>{thisMonthData.signups}</TableCell>
+              <TableCell>{thisMonthData.reviews}</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </Paper>
+  );
+}
diff --git a/src/components/event-manage/EventManage.tsx b/src/components/event-manage/EventManage.tsx
@@ -208,7 +208,7 @@ export default function EventManage() {
               borderBottom: "none",
               padding: "13px 10px 5px 10px",
               borderRadius: "10px 10px 0 0",
-              backgroundColor: `${customColors.main}`,
+              backgroundColor: `${customColors.sub_pink}`,
               fontSize: "18px",
             }}
           >

diff --git a/src/components/reuse/sidebar/SideBar.tsx b/src/components/reuse/sidebar/SideBar.tsx
@@ -26,7 +26,7 @@ export default function SideBar() {
         flexShrink: 0,
         "& .MuiDrawer-paper": {
           width: 200,
-          backgroundColor: customColors.main,
+          backgroundColor: customColors.main_pink,
           color: customColors.white,
         },
       }}

diff --git a/src/components/reuse/table/Table.tsx b/src/components/reuse/table/Table.tsx
@@ -27,7 +27,7 @@ export default function Table({ columns, rows, page, setPage }: TableProps) {
         display: "inline-block", // display 속성을 "inline-block"으로 설정
         overflow: "hidden",
         border: "2px solid",
-        borderColor: `${customColors.main}`,
+        borderColor: `${customColors.sub_pink}`,
         borderRadius: "0px 10px 10px 10px",
       }}
     >

diff --git a/src/components/review-manage/ReviewManage.tsx b/src/components/review-manage/ReviewManage.tsx
@@ -106,7 +106,7 @@ export default function EventManage() {
               borderBottom: "none",
               padding: "13px 10px 5px 10px",
               borderRadius: "10px 10px 0 0",
-              backgroundColor: `${customColors.main}`,
+              backgroundColor: `${customColors.sub_pink}`,
               fontSize: "18px",
             }}
           >

diff --git a/src/components/user-manage/UserManage.tsx b/src/components/user-manage/UserManage.tsx
@@ -70,7 +70,7 @@ export default function UserManage() {
                 borderBottom: "none",
                 padding: "13px 10px 5px 10px",
                 borderRadius: "10px 10px 0 0",
-                backgroundColor: `${customColors.main}`,
+                backgroundColor: `${customColors.sub_pink}`,
                 fontSize: "18px",
               }}
             >
@@ -108,7 +108,7 @@ export default function UserManage() {
           justifyContent: "center",
           margin: "50px 40px 0 40px",
           border: "2px solid",
-          borderColor: `${customColors.main}`,
+          borderColor: `${customColors.sub_pink}`,
           borderRadius: "10px",
           padding: "10px",
           alignItems: "center",

diff --git a/src/interface/DashBoard.interface.ts b/src/interface/DashBoard.interface.ts
@@ -0,0 +1,16 @@
+export interface DashBoardProps {
+  data: DashBoardData[];
+}
+
+export interface DashBoardData {
+  date: string;
+  visitors: number;
+  signups: number;
+  reviews: number;
+}
+
+export interface DashBoardMonthData {
+  visitors: number;
+  signups: number;
+  reviews: number;
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 

diff --git a/src/styles/base/Variable.style.ts b/src/styles/base/Variable.style.ts
@@ -10,8 +10,10 @@ export const customColors = {
   color_invalid: red["A700"],
   color_border_gray: grey[300],
   color_bgcolor_grey: grey[50],
-  main: "#ef7870",
-  sub_pink: "FFB6B2",
+  main_pink: "#ef7870",
+  sub_pink: "#FFB6B2",
+  main_blue: "#67A3DA",
+  sub_blue: "#225381",
   black: grey[800],
   grey: grey[400],
   white: grey[50],

diff --git a/src/styles/reuse/Modal.style.ts b/src/styles/reuse/Modal.style.ts
@@ -8,7 +8,7 @@ export const DeleteModalStyle = {
   width: 400,
   height: 150,
   bgcolor: `${customColors.color_bgcolor_grey}`,
-  border: `3px solid ${customColors.main}`,
+  border: `3px solid ${customColors.main_pink}`,
   borderRadius: "15px",
   boxShadow: 24,
   padding: "20px 30px 20px 30px",