Merge pull request #2 from wecode-bootcamp-korea/feature/DashBoard

[50기 김성호] DashBoard- Add. 수입/지출, 참여&생성하기 버튼 및 기능(모달창)구현

package.json

@@ -8,11 +8,15 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.1",
+    "date-fns": "^2.30.0",
     "react": "^18.2.0",
     "react-datepicker": "^4.21.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.18.0",
+    "react-modal": "^3.16.1",
+    "react-responsive": "^9.0.2",
+    "react-router-dom": "^6.19.0",
     "react-scripts": "5.0.1",
+    "recharts": "^2.9.3",
     "sass": "^1.69.3",
     "web-vitals": "^2.1.4"
   },

src/Router.js

@@ -4,22 +4,21 @@ import MenuWrapper from './components/MenuWrapper/MenuWrapper';
 import Main from './pages/Main/Main';
 import Login from './pages/Login/Login';
 import Setting from './pages/Setting/Setting';
-import Table from './pages/Table/Table';
 import UserSignUp from './pages/UserSignUp/UserSignUp';
 import Auth from './pages/Auth/Auth';
 
 const Router = () => {
   return (
     <BrowserRouter>
-      <Nav />
-      <Routes>
-        <Route path="/" element={<Main />} />
-        <Route path="/login" element={<Login />} />
-        <Route path="/setting" element={<Setting />} />
-        <Route path="/table" element={<Table />} />
-        <Route path="/user-signup" element={<UserSignUp />} />
-        <Route path="/users/auth" element={<Auth />} />
-      </Routes>
+      <MenuWrapper>
+        <Routes>
+          <Route path="/" element={<Main />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/setting" element={<Setting />} />
+          <Route path="/user-signup" element={<UserSignUp />} />
+          <Route path="/users/auth" element={<Auth />} />
+        </Routes>
+      </MenuWrapper>
     </BrowserRouter>
   );
 };

src/components/MenuBar/MenuBar.js

@@ -1,39 +1,84 @@
-import React from 'react';
-import wonBookLogo1 from './onebooklogo_preview_rev_1.png';
-import adminImage from './adminImage.png';
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import './MenuBar.scss';
 
 const MenuBar = () => {
+  // 페이지 이동
+  const navigate = useNavigate();
+  // 사용자 이름, 권한 상태 지정
+  const [userName, setUserName] = useState('');
+  const [userRole, setUserRole] = useState('');
+
+  // 토큰
+  const token =
+    'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imp3azIzNDVAbmF2ZXIuY29tIiwiaWQiOjEsImlhdCI6MTcwMDIxNjc5NX0.e2jdqf0UD-W8J7VmiEpgO18WgyDEkydWC50DZmWHRvM';
+  // 로고 클릭시 메인페이지로 이동
+  const goToMain = () => {
+    navigate('/');
+  };
+  // 로그아웃
+  const logout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('userName');
+    localStorage.removeItem('userRole');
+    alert('로그아웃 되었습니다.');
+    navigate('/login');
+  };
+
+  // 버튼 데이터
+  const BUTTONS = [
+    { text: 'Main', onClick: () => navigate('/') },
+    { text: '가계부', onClick: () => navigate('/table') },
+    { text: '커뮤니티', onClick: () => {} },
+    { text: '상품 안내(가입)', onClick: () => {} },
+    { text: '설정', onClick: () => navigate('/setting') },
+    { text: '로그아웃', onClick: logout, isRed: true },
+  ];
+  // 사용자 정보(이름, 권한)
+  useEffect(() => {
+    fetch('http://10.58.52.143:8000/users/info', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json;charset=utf-8',
+        authorization: token,
+      },
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        setUserName(data.userName);
+        setUserRole(data.userRole === 1 ? '관리자' : '참여자');
+      })
+      .catch((error) => {
+        console.error('로그인 정보를 불러오는 중 에러:', error);
+      });
+  }, []);
+
   return (
     <div className="menuBarFrame">
       <div className="logoFrame">
-        <img className="wonBookLogo" src={wonBookLogo1}></img>
+        <img
+          className="wonBookLogo"
+          src="/../images/onebooklogo_preview_rev_1.png"
+          alt="WonBook 로고"
+          onClick={goToMain}
+        />
       </div>
       <div className="userInfoFrame">
-        <img className="adminImage" src={adminImage}></img>
-        <p className="nameText">김성호님</p>
-        <p className="adminText">Administrator</p>
+        <p className="nameText">{userName}</p>
+        <p className="adminText">{userRole}</p>
       </div>
       <div className="menuBarButtonFrame">
         <ul>
-          <li className="buttonList">
-            <button className="menuBarButton">Main</button>
-          </li>
-          <li className="buttonList">
-            <button className="menuBarButton">가계부</button>
-          </li>
-          <li className="buttonList">
-            <button className="menuBarButton">커뮤니티</button>
-          </li>
-          <li className="buttonList">
-            <button className="menuBarButton">상품 안내(가입)</button>
-          </li>
-          <li className="buttonList">
-            <button className="menuBarButton">설정</button>
-          </li>
-          <li className="buttonList">
-            <button className="menuBarButton red">로그아웃</button>
-          </li>
+          {BUTTONS.map((button, index) => (
+            <li key={index} className="buttonList">
+              <button
+                className={`menuBarButton${button.isRed ? ' red' : ''}`}
+                onClick={button.onClick}
+              >
+                {button.text}
+              </button>
+            </li>
+          ))}
         </ul>
       </div>
     </div>

src/components/MenuBar/MenuBar.scss

@@ -11,10 +11,11 @@
     align-items: center;
 
     .wonBookLogo {
-      width: 180px;
-      height: 130px;
       position: relative;
       bottom: -5px;
+      width: 180px;
+      height: 130px;
+      cursor: pointer;
     }
   }
 
@@ -62,7 +63,7 @@
       }
 
       .menuBarButton {
-        width: 170px;
+        width: 150px;
         height: 40px;
         font-size: 16px;
         font-weight: 700;

src/components/MenuWrapper/MenuWrapper.js

@@ -1,8 +1,17 @@
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 import MenuBar from '../MenuBar/MenuBar';
 import './MenuWrapper.scss';
 
 const MenuWrapper = ({ children }) => {
+  const location = useLocation();
+  const isLoginPage = location.pathname === '/login';
+
+  // 로그인 페이지인 경우에는 MenuBar를 렌더링하지 않습니다.
+  if (isLoginPage) {
+    return <>{children}</>;
+  }
+
   return (
     <div className="menuWrapper">
       <MenuBar />

src/components/MenuWrapper/MenuWrapper.scss

@@ -3,6 +3,8 @@
   align-items: flex-start;
 
   .mainContent {
+    max-width: 1170px;
+    min-width: 570px;
     flex: 1;
   }
 }

src/pages/Main/GraphBarChart.js

@@ -0,0 +1,52 @@
+import React, { PureComponent } from 'react';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+} from 'recharts';
+
+const GraphBarChart = ({ data }) => {
+  const transformedData = [];
+
+  for (let month = 1; month <= 12; month++) {
+    const monthName = month + '월';
+    const income = data.INCOME[monthName];
+    const spending = data.SPENDING[monthName];
+
+    const newData = {
+      name: monthName,
+      수입: income,
+      지출: spending,
+    };
+
+    transformedData.push(newData);
+  }
+
+  return (
+    <BarChart
+      width={580}
+      height={280}
+      data={transformedData}
+      margin={{
+        top: 25,
+        right: 10,
+        left: 40,
+        bottom: 5,
+      }}
+    >
+      <CartesianGrid strokeDasharray="3 3" />
+      <XAxis dataKey="name" />
+      <YAxis />
+      <Tooltip />
+      <Legend />
+      <Bar dataKey="수입" fill="#8884d8" />
+      <Bar dataKey="지출" fill="#82ca9d" />
+    </BarChart>
+  );
+};
+
+export default GraphBarChart;

src/pages/Main/GraphCircularChart.js

@@ -0,0 +1,52 @@
+import React, { PureComponent } from 'react';
+import { PieChart, Pie, Cell, Tooltip, LabelList, Label, Bar } from 'recharts';
+
+const GraphCircularChart = ({ data }) => {
+  const transformedData = [];
+
+  data.forEach((item) => {
+    let value = 0;
+    if (item.spending !== '0%') {
+      const percentage = parseInt(item.spending);
+      value = Math.round((percentage / 100) * 100);
+    }
+
+    transformedData.push({
+      name: item.category,
+      value: value,
+    });
+  });
+
+  const total = data.reduce((acc, entry) => acc + entry.value, 0);
+  return (
+    <PieChart width={900} height={500}>
+      <Pie
+        data={transformedData}
+        dataKey="value"
+        isAnimationActive={true}
+        cx={300}
+        cy={140}
+        innerRadius={45}
+        outerRadius={110}
+        fill="#82ca9d"
+        paddingAngle={5}
+        label
+      >
+        {transformedData.map((entry, index) => (
+          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+        ))}
+        <LabelList dataKey="name" position="inside" />
+      </Pie>
+      <Label
+        content={({ percent }) => `${(percent * total).toFixed(0)}%`}
+        position="center"
+        fontSize={20}
+      />
+      <Tooltip />
+    </PieChart>
+  );
+};
+
+export default GraphCircularChart;
+
+const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];