Merge pull request #19 from wecode-bootcamp-korea/fix/modifyEnv

[50기 황수현]Modify:코드일부 수정

src/components/MenuBar/MenuBar.js

@@ -12,10 +12,10 @@ const MenuBar = () => {
 
   // 로고 클릭시 메인페이지로 이동
   const goToMain = () => {
-    navigate('/');
+    navigate('/main');
   };
 
-  const TOKEN = localStorage.getItem('TOKEN');
+  const TOKEN = localStorage.getItem('TOKEN') || '';
 
   // 로그아웃
   const logout = () => {
@@ -28,7 +28,7 @@ const MenuBar = () => {
 
   // 버튼 데이터
   const BUTTONS = [
-    { text: 'Home', onClick: () => navigate('/') },
+    { text: 'Home', onClick: () => navigate('/main') },
     { text: '가계부 조회', onClick: () => navigate('/table') },
     { text: '가계부 설정', onClick: () => navigate('/setting') },
     { text: '금융상품 안내', onClick: () => {} },
@@ -37,7 +37,7 @@ const MenuBar = () => {
   ];
   // 사용자 정보(이름, 권한)
   useEffect(() => {
-    fetch(`${API.UserInfo}`, {
+    fetch(API.UserInfo, {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json;charset=utf-8',
@@ -70,16 +70,19 @@ const MenuBar = () => {
       </div>
       <div className="menuBarButtonFrame">
         <ul>
-          {BUTTONS.map((button, index) => (
-            <li key={index} className="buttonList">
-              <button
-                className={`menuBarButton${button.isRed ? ' red' : ''}`}
-                onClick={button.onClick}
-              >
-                {button.text}
-              </button>
-            </li>
-          ))}
+          {BUTTONS.map(
+            (button, index) =>
+              !(setUserRole === 0 && button.text === '가계부 설정') && ( //userRole이 0이면서, button.text가 가계부 설정이면 렌더링하지않음
+                <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

@@ -77,6 +77,7 @@
 
         &:focus {
           background-color: #3dd980;
+          outline: none;
         }
 
         &.red {

src/components/MenuWrapper/MenuWrapper.js

@@ -3,7 +3,13 @@ import { useLocation } from 'react-router-dom';
 import MenuBar from '../MenuBar/MenuBar';
 import './MenuWrapper.scss';
 
-const EXCEPTIONAL_PATH = ['/login', '/users/auth', '/Setting', '/'];
+const EXCEPTIONAL_PATH = [
+  '/login',
+  '/users/auth',
+  '/Setting',
+  '/',
+  '/user-signup',
+];
 
 const MenuWrapper = ({ children }) => {
   const { pathname } = useLocation();

src/components/MenuWrapper/MenuWrapper.scss

@@ -14,9 +14,3 @@
     max-width: 90%;
   }
 }
-
-@media screen and (min-width: 570px) {
-  .mainContent {
-    max-width: 82%;
-  }
-}

src/config.js

@@ -1,10 +1,10 @@
-const BASE_URL = 'http://43.202.56.239:8000/';
+const BASE_URL = 'http://10.58.52.81:8000';
 
 const API = {
   Login: `${BASE_URL}/Login`,
-  UserSignUp: `${BASE_URL}/users/update'`,
-  UserAuth: `${BASE_URL}/users/auth'`,
-  UserInfo: `${BASE_URL}/users/info'`,
+  UserSignUp: `${BASE_URL}/users/update`,
+  UserAuth: `${BASE_URL}/users/auth`,
+  UserInfo: `${BASE_URL}/users/info`,
   MainJoin: `${BASE_URL}/family/join`,
   MainCreate: `${BASE_URL}/family/book`,
   MainFlow: `${BASE_URL}/flow`,
@@ -15,6 +15,9 @@ const API = {
   SettingCategory: `${BASE_URL}/category`,
   SettingAuthCode: `${BASE_URL}/family/auth-code`,
   TableFlow: `${BASE_URL}/flow`,
+  Allowance: `${BASE_URL}/allowance`,
+  FamilyUser: `${BASE_URL}/family/user`,
+  Budget: `${BASE_URL}/budget`,
 };
 
 export default API;

src/pages/Auth/Auth.js

@@ -1,16 +1,13 @@
-import React from 'react';
-import { useNavigate, useParams, useLocation } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import API from '../../config';
 
 const Auth = () => {
   const navigate = useNavigate();
-  const location = useLocation();
-  const { code } = useParams();
+  const [searchParams] = useSearchParams();
 
-  const searchParams = new URLSearchParams(location.search);
   const codeKakao = searchParams.get('code');
 
-  fetch(`${API.UserAuth}`, {
+  fetch(API.UserAuth, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',

src/pages/Main/GraphBarChart.js

@@ -26,6 +26,8 @@ const GraphBarChart = ({ data }) => {
     transformedData.push(newData);
   }
 
+  const tickFormatY = (tickItem) => tickItem.toLocaleString();
+
   return (
     <BarChart
       width={580}
@@ -40,11 +42,22 @@ const GraphBarChart = ({ data }) => {
     >
       <CartesianGrid strokeDasharray="3 3" />
       <XAxis dataKey="name" />
-      <YAxis />
+      <YAxis tickFormatter={tickFormatY} />
       <Tooltip />
       <Legend />
-      <Bar dataKey="수입" fill="#8884d8" />
-      <Bar dataKey="지출" fill="#82ca9d" />
+      <Bar
+        dataKey="수입"
+        fill="#8884d8"
+        position="top"
+        formatter={(value) => new Intl.NumberFormat('ko-KR').format(value)}
+      />
+
+      <Bar
+        dataKey="지출"
+        fill="#82ca9d"
+        position="top"
+        formatter={(value) => new Intl.NumberFormat('ko-KR').format(value)}
+      />
     </BarChart>
   );
 };

src/pages/Main/GraphCircularChart.js

@@ -36,7 +36,7 @@ const GraphCircularChart = ({ data }) => {
     });
   });
 
-  const total = data.reduce((acc, entry) => acc + entry.value, 0);
+  // const total = data.reduce((acc, entry) => acc + entry.value, 0);
 
   return (
     <PieChart width={900} height={500}>