Merge pull request #123 from woowa-techcamp-2021/develop

v0.4 release
woowa-techcamp-2021 · Aug 5, 2021 · 7367c36 · 7367c36
2 parents 4dd955c + 23974c9
commit 7367c36
Show file tree

Hide file tree

Showing 16 changed files with 304 additions and 134 deletions.
diff --git a/frontend/config/dotenv.ts b/frontend/config/dotenv.ts
@@ -0,0 +1,7 @@
+const dotenv = {
+  API_URL: process.env.API_URL as string,
+  GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID as string,
+  GITHUB_REDIRECT_URI: process.env.GITHUB_REDIRECT_URI as string
+};
+
+export default dotenv;
diff --git a/frontend/src/api/cash-history.ts b/frontend/src/api/cash-history.ts
@@ -1,57 +1,67 @@
+import dotenv from '../../config/dotenv';
 import { CashHistoriesResponse, CashHistoryRequest, CategoryExpenditureResponse } from '../types/cash-history';
+import authMiddleware from './middlewares/auth.middleware';
 import { getAccessToken, getRequest, postRequest, putRequest } from './request';
 
 class CashHistoryAPI {
   fetchCashHistories (year: number, month: number): Promise<CashHistoriesResponse> {
-    const token = getAccessToken();
-
-    return getRequest<CashHistoriesResponse>('http://localhost:8080/api/cash-history', {
-      query: {
-        year,
-        month
-      },
-      headers: {
-        Authorization: token
-      }
+    return authMiddleware(() => {
+      const token = getAccessToken();
+
+      return getRequest<CashHistoriesResponse>(`${dotenv.API_URL}/cash-history`, {
+        query: {
+          year,
+          month
+        },
+        headers: {
+          Authorization: token
+        }
+      });
     });
   }
 
   getTotalCashes (year: number, month: number, categoryId: number) {
-    const token = getAccessToken();
-
-    return getRequest<CategoryExpenditureResponse>('http://localhost:8080/api/cash-history/cashes', {
-      query: {
-        year,
-        month,
-        categoryId
-      },
-      headers: {
-        Authorization: token
-      }
+    return authMiddleware(() => {
+      const token = getAccessToken();
+
+      return getRequest<CategoryExpenditureResponse>(`${dotenv.API_URL}/cash-history/cashes`, {
+        query: {
+          year,
+          month,
+          categoryId
+        },
+        headers: {
+          Authorization: token
+        }
+      });
     });
   }
 
   createCashHistory (cashHistoryRequest: CashHistoryRequest) {
-    const token = getAccessToken();
-
-    postRequest<CashHistoryRequest>('http://localhost:8080/api/cash-history', {
-      body: cashHistoryRequest,
-      headers: {
-        Authorization: token,
-        'Content-Type': 'application/json'
-      }
+    return authMiddleware(() => {
+      const token = getAccessToken();
+
+      return postRequest<CashHistoryRequest>(`${dotenv.API_URL}/cash-history`, {
+        body: cashHistoryRequest,
+        headers: {
+          Authorization: token,
+          'Content-Type': 'application/json'
+        }
+      });
     });
   }
 
   updateCashHistory (id: number, cashHistoryRequest: CashHistoryRequest) {
-    const token = getAccessToken();
-
-    putRequest<CashHistoryRequest>(`http://localhost:8080/api/cash-history/${id}`, {
-      body: cashHistoryRequest,
-      headers: {
-        Authorization: token,
-        'Content-Type': 'application/json'
-      }
+    authMiddleware(() => {
+      const token = getAccessToken();
+
+      return putRequest<CashHistoryRequest>(`${dotenv.API_URL}/cash-history/${id}`, {
+        body: cashHistoryRequest,
+        headers: {
+          Authorization: token,
+          'Content-Type': 'application/json'
+        }
+      });
     });
   }
 }

diff --git a/frontend/src/api/category.ts b/frontend/src/api/category.ts
@@ -1,44 +1,50 @@
+import dotenv from '../../config/dotenv';
 import { CashHistories } from '../enums/cash-history.enum';
 import { CategoriesResponse } from '../types/category';
+import authMiddleware from './middlewares/auth.middleware';
 import { deleteRequest, getAccessToken, getRequest, postRequest } from './request';
 
-// const API_URL = process.env.API_URL as string;
-
 class CategoryAPI {
   fetchCategories (): Promise<CategoriesResponse> {
-    const token = getAccessToken();
-
-    return getRequest<CategoriesResponse>('http://localhost:8080/api/category/all', {
-      headers: {
-        Authorization: token
-      }
+    return authMiddleware<CategoriesResponse>(() => {
+      const token = getAccessToken();
+
+      return getRequest<CategoriesResponse>(`${dotenv.API_URL}/category/all`, {
+        headers: {
+          Authorization: token
+        }
+      });
     });
   }
 
   createCategory (value: string, color: string, type: CashHistories): Promise<void> {
-    const token = getAccessToken();
-
-    return postRequest('http://localhost:8080/api/category', {
-      body: {
-        name: value,
-        color,
-        type
-      },
-      headers: {
-        Authorization: token,
-        'Content-Type': 'application/json'
-      }
+    return authMiddleware<void>(() => {
+      const token = getAccessToken();
+
+      return postRequest(`${dotenv.API_URL}/category`, {
+        body: {
+          name: value,
+          color,
+          type
+        },
+        headers: {
+          Authorization: token,
+          'Content-Type': 'application/json'
+        }
+      });
     });
   }
 
   deleteCategory (id: number): Promise<void> {
-    const token = getAccessToken();
-
-    return deleteRequest('http://localhost:8080/api/category', {
-      param: id,
-      headers: {
-        Authorization: token
-      }
+    return authMiddleware<void>(() => {
+      const token = getAccessToken();
+
+      return deleteRequest(`${dotenv.API_URL}/category`, {
+        param: id,
+        headers: {
+          Authorization: token
+        }
+      });
     });
   }
 }

diff --git a/frontend/src/api/middlewares/auth.middleware.ts b/frontend/src/api/middlewares/auth.middleware.ts
@@ -0,0 +1,17 @@
+import Router from '../../core/router';
+
+const authMiddleware = async <T>(request: () => Promise<T>): Promise<T> => {
+  try {
+    return request();
+  } catch (error) {
+    const { status } = error;
+
+    if (status === 401 || status === 410) {
+      Router.instance.push('login');
+    }
+
+    throw error;
+  }
+};
+
+export default authMiddleware;
diff --git a/frontend/src/api/payment.ts b/frontend/src/api/payment.ts
@@ -1,41 +1,47 @@
+import dotenv from '../../config/dotenv';
 import { PaymentsResponse } from '../types/payment';
+import authMiddleware from './middlewares/auth.middleware';
 import { deleteRequest, getAccessToken, getRequest, postRequest } from './request';
 
-// const API_URL = process.env.API_URL as string;
-
 class PaymentAPI {
   fetchPayments (): Promise<PaymentsResponse> {
-    const token = getAccessToken();
-
-    return getRequest<PaymentsResponse>('http://localhost:8080/api/payment/all', {
-      headers: {
-        Authorization: token
-      }
+    return authMiddleware<PaymentsResponse>(() => {
+      const token = getAccessToken();
+
+      return getRequest<PaymentsResponse>(`${dotenv.API_URL}/payment/all`, {
+        headers: {
+          Authorization: token
+        }
+      });
     });
   }
 
   createPayment (value: string): Promise<void> {
-    const token = getAccessToken();
-
-    return postRequest('http://localhost:8080/api/payment', {
-      body: {
-        name: value
-      },
-      headers: {
-        Authorization: token,
-        'Content-Type': 'application/json'
-      }
+    return authMiddleware(() => {
+      const token = getAccessToken();
+
+      return postRequest(`${dotenv.API_URL}/payment`, {
+        body: {
+          name: value
+        },
+        headers: {
+          Authorization: token,
+          'Content-Type': 'application/json'
+        }
+      });
     });
   }
 
   deletePayment (id: number): Promise<void> {
-    const token = getAccessToken();
-
-    return deleteRequest('http://localhost:8080/api/payment', {
-      param: id,
-      headers: {
-        Authorization: token
-      }
+    return authMiddleware(() => {
+      const token = getAccessToken();
+
+      return authMiddleware(() => deleteRequest(`${dotenv.API_URL}/payment`, {
+        param: id,
+        headers: {
+          Authorization: token
+        }
+      }));
     });
   }
 }

diff --git a/frontend/src/core/router.ts b/frontend/src/core/router.ts
@@ -17,14 +17,14 @@ export const ROUTER_PATH = {
 
 class Router {
   private routes: { [key: string]: Page };
-  private static _router: Router;
+  static _router: Router;
 
   static init ($root: HTMLElement): void {
-    this._router = new Router($root);
+    Router._router = new Router($root);
   }
 
   static get instance (): Router {
-    return this._router;
+    return Router._router;
   }
 
   private constructor ($root: HTMLElement) {
@@ -35,14 +35,13 @@ class Router {
       [ROUTER_PATH.CHART]: new ChartPage($root),
       [ROUTER_PATH.NOT_FOUND]: new NotfoundPage($root)
     };
-    this.onStateChange();
   }
 
   listen (): void {
     window.addEventListener('popstate', this.onStateChange.bind(this));
   }
 
-  private onStateChange () {
+  onStateChange (): void {
     const path = parsePath(location.pathname);
     pubsub.clear();
     if (!(path in this.routes)) {
@@ -53,7 +52,6 @@ class Router {
   }
 
   push (path: string): void {
-    // todo: 필요 시 state 추가
     history.pushState({ }, '', `/${path}`);
     this.onStateChange();
   }

diff --git a/frontend/src/index.ts b/frontend/src/index.ts
@@ -7,4 +7,5 @@ import './assets/styles/common.css';
 const $root = $('#root');
 
 Router.init($root as HTMLElement);
+Router.instance.onStateChange();
 Router.instance.listen();
diff --git a/frontend/src/ui-elements/chart/pie-chart/index.ts b/frontend/src/ui-elements/chart/pie-chart/index.ts
@@ -40,8 +40,7 @@ class PieChartUIElement extends UIElement {
     this.height = height;
     this.centerX = this.width / 2;
     this.centerY = this.height / 2;
-    this.radius = this.width * 0.3;
-    console.log(chartInputData);
+    this.radius = this.width * 0.25;
     this.chartData = this.formatChartData(chartInputData);
   }
 

diff --git a/frontend/src/ui-elements/expenditure/expenditure-list/index.ts b/frontend/src/ui-elements/expenditure/expenditure-list/index.ts
@@ -1,3 +1,4 @@
+import colors from '../../../assets/styles/colors';
 import UIElement from '../../../core/ui-element';
 import { formatNumber } from '../../../utils/formatter';
 import { $ } from '../../../utils/selector';
@@ -47,8 +48,8 @@ class ExpenditureListUIElement extends UIElement {
         ${expenditureGroupedByCategory.map(({ index, category, rate, expenditure }) => {
           return `
             <div class="expenditure-item" data-index=${index}>
-              <div class="expenditure-item__category" style="background-color: ${category.color}">
-                ${category.name}
+              <div class="expenditure-item__category" style="background-color: ${category?.color ?? colors.primary}">
+                ${category?.name ?? '미분류'}
               </div>
 
               <div class="expenditure-item__statistic">

diff --git a/frontend/src/view-models/calendar.ts b/frontend/src/view-models/calendar.ts
@@ -7,6 +7,7 @@ import models from '../models';
 import { CashHistoriesData } from '../models/cash-histories';
 import { FocusDateData } from '../models/focus-date';
 import { CashHistoriesInDay, TotalPrices } from '../types/cash-history';
+import toast from '../utils/toast/toast';
 
 class CalendarViewModel extends ViewModel {
   private cashHistoriesModel: CashHistoriesData;
@@ -34,8 +35,16 @@ class CalendarViewModel extends ViewModel {
     const year = focusDate.getFullYear();
     const month = focusDate.getMonth() + 1;
 
-    const cashHistories = await cashHistoryAPI.fetchCashHistories(year, month);
-    this.cashHistoriesModel.cashHistories = cashHistories;
+    try {
+      const cashHistories = await cashHistoryAPI.fetchCashHistories(year, month);
+      this.cashHistoriesModel.cashHistories = cashHistories;
+    } catch (error) {
+      const { status } = error;
+
+      if (status === 500) {
+        toast.error('다시 시도해주세요');
+      }
+    }
   }
 
   get monthlyCashHistories (): CashHistoriesInDay[] | undefined {