Conflict Resolved: 컨플픽트 해결

package.json

@@ -8,12 +8,14 @@
     "@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-modal": "^3.16.1",
     "react-router-dom": "^6.19.0",
     "react-scripts": "5.0.1",
+    "recharts": "^2.10.1",
     "sass": "^1.69.3",
     "web-vitals": "^2.1.4"
   },

src/Router.js

@@ -4,7 +4,6 @@ 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';
 

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 goToMain = () => {
+    navigate('/');
+  };
+
+  const token = localStorage.getItem('token');
+
+  // 로그아웃
+  const logout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('userName');
+    localStorage.removeItem('userRole');
+    alert('로그아웃 되었습니다.');
+    navigate('/login');
+  };
+
+  // 버튼 데이터
+  const BUTTONS = [
+    { text: 'Home', onClick: () => navigate('/') },
+    { text: '가계부 조회', onClick: () => navigate('/table') },
+    { text: '가계부 설정', onClick: () => navigate('/setting') },
+    { text: '금융상품 안내', onClick: () => {} },
+    { text: '개인정보 수정', onClick: () => {} },
+    { 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: `Bearer ${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/OneBook_Logo_Small.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

@@ -1,20 +1,22 @@
 .menuBarFrame {
-  position: sticky;
-  top: 0;
   width: 279px;
   height: 100vh;
-  background-color: #94ad9f;
+  background-color: #fcfcfc;
+  position: sticky;
+  top: 0;
+  box-shadow: 0 10px 10px #d9d9d9;
 
   .logoFrame {
     display: flex;
     justify-content: center;
     align-items: center;
 
     .wonBookLogo {
-      width: 180px;
-      height: 130px;
       position: relative;
       bottom: -5px;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
     }
   }
 
@@ -62,20 +64,24 @@
       }
 
       .menuBarButton {
-        width: 170px;
+        width: 150px;
         height: 40px;
         font-size: 16px;
         font-weight: 700;
-        color: #94ad9f;
-        background-color: white;
-        border: 1px solid white;
+        color: #14213d;
+        background-color: #ecfbf2;
+        border: none;
         border-radius: 10px;
-        margin-top: 15px;
-        margin-bottom: 15px;
+        margin: 15px 0px 15px 15px;
         cursor: pointer;
 
+        &:focus {
+          background-color: #3dd980;
+        }
+
         &.red {
-          color: red;
+          font-weight: 700;
+          color: rgb(227, 116, 116);
         }
       }
     }

src/components/MenuWrapper/MenuWrapper.js

@@ -1,11 +1,20 @@
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 import MenuBar from '../MenuBar/MenuBar';
 import './MenuWrapper.scss';
 
+const EXCEPTIONAL_PATH = ['/login', '/users/auth', '/Setting'];
+
 const MenuWrapper = ({ children }) => {
+  const { pathname } = useLocation();
+
+  const isExceptionalPath = EXCEPTIONAL_PATH.some(
+    (path) => path === pathname.toLocaleLowerCase(),
+  );
+
   return (
     <div className="menuWrapper">
-      <MenuBar />
+      {!isExceptionalPath && <MenuBar />}
       <main className="mainContent">{children}</main>
     </div>
   );

src/components/MenuWrapper/MenuWrapper.scss

@@ -1,8 +1,22 @@
 .menuWrapper {
   display: flex;
   align-items: flex-start;
+  padding: 10px;
+  border-radius: 6px;
 
   .mainContent {
     flex: 1;
   }
 }
+
+@media screen and (max-width: 1170px) {
+  .mainContent {
+    max-width: 90%;
+  }
+}
+
+@media screen and (min-width: 570px) {
+  .mainContent {
+    max-width: 82%;
+  }
+}

src/config.js

@@ -0,0 +1,17 @@
+const BASE_URL = 'http://43.202.56.239:8000/';
+
+const API = {
+  Login: `${BASE_URL}/Login`,
+  UserSignUp: `${BASE_URL}/users/update'`,
+  MainJoin: `${BASE_URL}/family/join`,
+  MainCreate: `${BASE_URL}/family/book`,
+  MainFlow: `${BASE_URL}/flow`,
+  MainBarChart: `${BASE_URL}/flow/view`,
+  MainPieChart: `${BASE_URL}/flow/view`,
+  SettingFixed: `${BASE_URL}/flow/fixed`,
+  SettingFlowType: `${BASE_URL}/flow-type`,
+  SettingCategory: `${BASE_URL}/category`,
+  SettingAuthCode: `${BASE_URL}/family/auth-code`,
+};
+
+export default API;

src/pages/Login/Login.js

@@ -12,7 +12,7 @@ const Login = () => {
       <div className="serviceInfoContainer">
         <img
           className="onebookLogo"
-          src="/images/OneBook_Logo.png"
+          src="/images/OneBook_Logo_Small.png"
           alt="OneBook"
         />
       </div>

src/pages/Login/Login.scss

@@ -1,23 +1,33 @@
 .Login {
   height: 100vh;
   width: 100vw;
+  background-color: #fcfcfc;
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #fcfcfc;
   margin: 0 auto;
+  flex-direction: column-reverse;
 
   .loginWrapper {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 300px;
+    width: 50%;
+  }
+
+  .serviceInfoContainer {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    width: 80%;
   }
 
   .onebookLogo {
     display: flex;
     object-fit: contain;
     flex-shrink: 1;
     width: 480px;
+    margin-bottom: 30px;
   }
 }

src/pages/Main/GraphBarChart.js

@@ -0,0 +1,52 @@
+import React 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;