Merge pull request #72 from boostcamp-2020/feature/MainPage_DB

DB에서 가져온 데이터로 메인페이지 렌더링

.gitignore

@@ -13,6 +13,7 @@ dist
 .DS_Store
 .env.local
 .env.development.local
+.env.development
 .env.test.local
 .env.production.local
 

be/src/controllers/transaction/index.ts

@@ -2,7 +2,8 @@ import Koa from 'koa';
 import { getTransaction, createTransaction } from 'services/transaction';
 
 const get = async (ctx: Koa.Context) => {
-  const res = await getTransaction();
+  const { year, month } = ctx.query;
+  const res = await getTransaction({ year, month });
   ctx.status = 200;
   ctx.body = res;
 };

be/src/libs/date.ts

@@ -0,0 +1,14 @@
+const getOneMonthRange = (year: string, month: string) => {
+  if (month === '12') {
+    return {
+      start: `${year}-${month}`,
+      end: `${Number(year) + 1}-${1}`,
+    };
+  }
+  return {
+    start: `${year}-${month}`,
+    end: `${year}-${Number(month) + 1}`,
+  };
+};
+
+export default getOneMonthRange;

be/src/models/transaction.ts

@@ -35,9 +35,8 @@ const TransactionSchema = new Schema({
 export interface Transaction extends Document {
   client: String;
   method: String;
-  classification: String;
   category: String;
-  date: String;
+  date: Date;
   price: Number;
   memo?: String;
   excludeFromBudget?: Boolean;

be/src/seeds/transaction.ts

@@ -31,12 +31,17 @@ export const up = ({ methods, categories }: TransactionType) => {
         const categoryPosition =
           (getRandomNumber({ start: 0, end: 100 }) % METHOD_LENGTH) + base;
         const category = categories[categoryPosition]._id;
+        const price = getRandomNumber({
+          start: 1000,
+          end: 300000,
+        });
         transactionList.push({
           client,
           date,
           memo,
           method,
           category,
+          price,
         });
         return transactionList;
       }, []);

be/src/services/transaction/index.ts

@@ -1,12 +1,36 @@
 import { TransactionModel, Transaction } from 'models/transaction';
+import getOneMonthRange from 'libs/date';
 
-export const getTransaction = async () => {
-  return TransactionModel.find().populate('category').populate('method');
+const oneMonthTransactionsReducer = (acc: any, transaction: Transaction) => {
+  const year = transaction.date.getFullYear();
+  const month = transaction.date.getMonth() + 1;
+  const date = transaction.date.getDate();
+  const key = `${year}-${month}-${date}`;
+  return acc[key]
+    ? { ...acc, [key]: [...acc[key], transaction] }
+    : { ...acc, [key]: [transaction] };
+};
+export const getTransaction = async ({
+  year,
+  month,
+}: {
+  year: string;
+  month: string;
+}) => {
+  const oneMonthTransactions: Transaction[] = await TransactionModel.find()
+    .populate('category')
+    .populate('method')
+    .where('date')
+    .gte(new Date(getOneMonthRange(year, month).start))
+    .lt(new Date(getOneMonthRange(year, month).end))
+    .sort('date');
+
+  const result = oneMonthTransactions.reduce(oneMonthTransactionsReducer, {});
+  return result;
 };
 
 export const createTransaction = async ({
   client,
-  classification,
   date,
   memo,
   method,
@@ -16,7 +40,6 @@ export const createTransaction = async ({
 }: Transaction) => {
   const newTransaction = new TransactionModel({
     client,
-    classification,
     date,
     memo,
     method,

be/yarn.lock

@@ -1365,6 +1365,13 @@ eslint-plugin-import@^2.22.1:
     resolve "^1.17.0"
     tsconfig-paths "^3.9.0"
 
+eslint-plugin-prettier@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.4.tgz#168ab43154e2ea57db992a2cd097c828171f75c2"
+  integrity sha512-jZDa8z76klRqo+TdGDTFJSavwbnWK2ZpqGKNZ+VvweMW516pDUMmQ2koXvxEE4JhzNvTv+radye/bWGBmA6jmg==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 eslint-scope@^5.0.0, eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
@@ -1501,6 +1508,11 @@ fast-deep-equal@^3.1.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-glob@^3.1.1:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.4.tgz#d20aefbf99579383e7f3cc66529158c9b98554d3"
@@ -2137,11 +2149,6 @@ koa-convert@^1.2.0:
     co "^4.6.0"
     koa-compose "^3.0.0"
 
-koa-cors@^0.0.16:
-  version "0.0.16"
-  resolved "https://registry.yarnpkg.com/koa-cors/-/koa-cors-0.0.16.tgz#98107993a7909e34c042986c5ec6156d77f3432e"
-  integrity sha1-mBB5k6eQnjTAQphsXsYVbXfzQy4=
-
 koa-router@^10.0.0:
   version "10.0.0"
   resolved "https://registry.yarnpkg.com/koa-router/-/koa-router-10.0.0.tgz#7bc76a031085731e61fc92c1683687b2f44de6a4"
@@ -2799,6 +2806,13 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
 prettier@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.1.2.tgz#3050700dae2e4c8b67c4c3f666cdb8af405e1ce5"
@@ -3320,6 +3334,11 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
+styled-reset@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/styled-reset/-/styled-reset-4.3.1.tgz#7834a8fa843bb8f57e13396e3ef6c191248aa1ac"
+  integrity sha512-H8f2YsjUtJ+oc2y4fB3Jzm/BzByqC15o8DaBvdSMPktT6Q+Dmw74ZbOqhMR7Zzt01p6sN3MN14qqI17kfRCRiQ==
+
 supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"

fe/package.json

@@ -13,14 +13,15 @@
     "@types/react-dom": "^16.9.8",
     "@types/styled-components": "^5.1.4",
     "axios": "^0.21.0",
+    "dayjs": "^1.9.6",
     "mobx": "^6.0.4",
     "mobx-react": "^7.0.5",
-    "dayjs": "^1.9.6",
     "polished": "^4.0.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.0",
     "styled-components": "^5.2.1",
+    "styled-reset": "^4.3.1",
     "typescript": "~4.0.5",
     "web-vitals": "^0.2.4"
   },

fe/src/apis/axios.ts

@@ -0,0 +1,12 @@
+import axios from 'axios';
+
+const instance = axios.create({
+  baseURL: `${process.env.REACT_APP_API_URL}:${process.env.REACT_APP_API_PORT}`,
+  timeout: 1000,
+});
+
+instance.interceptors.response.use(
+  (response) => response.data,
+  (error) => Promise.reject(error),
+);
+export default instance;

fe/src/apis/urls/index.ts

@@ -1,3 +1,3 @@
 export default {
-  transaction: (accountObjId: string) => `api/transactions/${accountObjId}`,
+  transaction: (accountObjId: string) => `/api/transactions/${accountObjId}`,
 };

fe/src/components/organisms/NavBar/index.tsx

@@ -7,9 +7,9 @@ import tagSvg from 'assets/svg/tag.svg';
 import plusSvg from 'assets/svg/plus.svg';
 import * as S from './style';
 
-const NavBar = (): React.ReactElement => {
+const NavBar = ({ ...props }): React.ReactElement => {
   return (
-    <S.NavBar>
+    <S.NavBar {...props}>
       <IconButton icon={homeSvg}>홈</IconButton>
       <IconButton icon={graphSvg}>통계</IconButton>
       <S.PlusButton icon={plusSvg} />

fe/src/components/templates/HeaderNav/index.tsx

@@ -20,7 +20,7 @@ const HeaderNav = ({
       {HeaderBar}
       {SubHeaderBar}
       <S.ContentArea>{Contents}</S.ContentArea>
-      <S.Footer>{NavBar}</S.Footer>
+      <S.Nav>{NavBar}</S.Nav>
     </S.HeaderNav>
   );
 };

fe/src/components/templates/HeaderNav/style.ts

@@ -11,10 +11,17 @@ export const ContentArea = styled.div`
   margin: 0.6rem 0;
 `;
 
-export const Footer = styled.nav`
+export const Nav = styled.nav`
+  display: flex;
+  align-items: center;
   width: 100%;
+  height: 4rem;
+
+  background-color: ${({ theme }) => theme.color.white};
   position: fixed;
   bottom: 0;
   left: 0;
+
+  border-top: 2px solid ${({ theme }) => theme.color.lightBorder};
 `;
 export default {};

fe/src/pages/MainPage/index.tsx

@@ -37,11 +37,10 @@ const MainPage = ({ ...props }: Props) => {
     const accountDateListComponent = Object.entries(
       toJS(transactionStore.accountDateList),
     ).map(([date, oneAccountDate]) => {
-      const fullDate = `${transactionStore.year}-${transactionStore.month}-${date}`;
       return (
         <S.AccountDate
-          key={fullDate}
-          date={new Date(fullDate)}
+          key={date}
+          date={new Date(date)}
           transactionList={convertTransactionDBTypetoTransactionType(
             oneAccountDate as [],
           )}

fe/src/pages/MainPage/style.ts

@@ -13,4 +13,6 @@ export const HeaderBar = styled(HeaderBarComponent)``;
 export const MonthInfoHeader = styled(MonthInfoHeaderComponent)``;
 export const FilterBar = styled(FilterBarComponent)``;
 export const AccountDate = styled(AccountDateComponent)``;
-export const NavBar = styled(NavBarComponent)``;
+export const NavBar = styled(NavBarComponent)`
+  width: 100%;
+`;

fe/src/stores/Transaction/index.ts

@@ -1,4 +1,6 @@
-import { observable, makeObservable, computed } from 'mobx';
+import { toJS, observable, makeObservable, computed } from 'mobx';
+import axios from 'apis/axios';
+import urls from 'apis/urls';
 import { testAccountDateList } from './testData';
 
 interface PricesType {
@@ -43,28 +45,48 @@ export interface TransactionDBType {
 }
 
 class Transaction {
-  date = new Date('2020-11');
+  selectedDate = {
+    year: new Date().getFullYear(),
+    month: new Date().getMonth() + 1,
+  };
+
+  accountObjId = 'test';
 
   accountDateList: any = testAccountDateList;
 
   constructor() {
     makeObservable(this, {
-      date: observable,
+      accountObjId: observable,
       accountDateList: observable,
       totalPrices: computed,
     });
+
+    this.loadTransactions();
+  }
+
+  async loadTransactions() {
+    const queryString = `?year=${this.selectedDate.year}&month=${this.selectedDate.month}`;
+    const result = await axios.get(
+      `${urls.transaction(this.accountObjId)}${queryString}`,
+    );
+    this.accountDateList = result;
   }
 
   get year() {
-    return this.date.getFullYear();
+    return this.selectedDate.year;
   }
 
   get month() {
-    return this.date.getMonth() + 1;
+    return this.selectedDate.month;
+  }
+
+  set date({ year, month }: { year: number; month: number }) {
+    this.selectedDate.year = year;
+    this.selectedDate.month = month;
   }
 
   get totalPrices() {
-    return Object.entries(this.accountDateList).reduce(
+    return Object.entries(toJS(this.accountDateList)).reduce(
       (totalPrices: PricesType, [, oneAccountDate]) => {
         const res = (oneAccountDate as []).reduce(
           (subPrices: PricesType, transaction: any) => {

fe/src/styles/GlobalStyle.ts

@@ -1,12 +1,16 @@
 import { createGlobalStyle } from 'styled-components';
+import reset from 'styled-reset';
 
 const GlobalStyle = createGlobalStyle`
   @font-face {
-      font-family: 'BMEULJIRO';
-      src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/BMEULJIRO.woff') format('woff');
-      font-weight: normal;
-      font-style: normal;
+    font-family: 'BMEULJIRO';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/BMEULJIRO.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
   }
+
+  ${reset};
+  box-sizing: border-box;
 `;
 
 export default GlobalStyle;