From 901174bc4f2f853db28b24040c54e5983b006136 Mon Sep 17 00:00:00 2001 From: rolled-potatoes Date: Wed, 16 Dec 2020 00:11:33 +0900 Subject: [PATCH 01/12] =?UTF-8?q?[FE]=20Style=20:=20console.log=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fe/src/components/atoms/Input/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/fe/src/components/atoms/Input/index.tsx b/fe/src/components/atoms/Input/index.tsx index 57a149d7..3e070c8b 100644 --- a/fe/src/components/atoms/Input/index.tsx +++ b/fe/src/components/atoms/Input/index.tsx @@ -26,8 +26,6 @@ const Input = ({ inputRef, ...props }: Props): React.ReactElement => { - console.log({ ...props }); - return ( Date: Wed, 16 Dec 2020 00:19:10 +0900 Subject: [PATCH 02/12] =?UTF-8?q?[FE]=20Refactor=20:=20=EA=B1=B0=EB=9E=98?= =?UTF-8?q?=EC=88=98=EB=8B=A8=20=EC=8A=A4=ED=86=A0=EC=96=B4=20=ED=95=A9?= =?UTF-8?q?=EA=B3=84=20=ED=95=A8=EC=88=98=20if=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fe/src/stores/Transaction/index.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/fe/src/stores/Transaction/index.ts b/fe/src/stores/Transaction/index.ts index 461c9419..ccf5a671 100644 --- a/fe/src/stores/Transaction/index.ts +++ b/fe/src/stores/Transaction/index.ts @@ -158,10 +158,9 @@ export const TransactionStore = makeAutoObservable({ return calTotalPriceByDateAndType(this.transactions, categoryType.EXPENSE); }, get totalPrices(): { income: number; expense: number } { - if (this.isFiltered) { - return sumAllPricesByType(this.filteredTransactionList); - } - return calTotalPrices(this.getTransactions()); + return this.isFiltered + ? sumAllPricesByType(this.filteredTransactionList) + : calTotalPrices(this.getTransactions()); }, get filteredTransactionList(): types.TransactionDBType[] { if (!this.isFiltered) return []; From 68a4a5077698083acf73458a20efdfabacf22e2c Mon Sep 17 00:00:00 2001 From: rolled-potatoes Date: Wed, 16 Dec 2020 00:28:52 +0900 Subject: [PATCH 03/12] =?UTF-8?q?[FE]=20Fix=20:=20=EA=B1=B0=EB=9E=98?= =?UTF-8?q?=EB=82=B4=EC=97=AD=20=ED=95=A9=EA=B3=84=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 미분류 카테고리 추가하여 따로 계산하도록 하였습니다. --- fe/src/stores/Category/index.ts | 2 +- fe/src/stores/Transaction/transactionStoreUtils.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/fe/src/stores/Category/index.ts b/fe/src/stores/Category/index.ts index d9285528..754e27a3 100644 --- a/fe/src/stores/Category/index.ts +++ b/fe/src/stores/Category/index.ts @@ -57,7 +57,7 @@ const categoryConverter = (input: string): string => { return categoryType.UNCLASSIFIED; } }; -export const categoryConvertBig2Small = (input: string): string => { +export const categoryConvertBig2Small = (input: string) => { switch (input) { case categoryType.EXPENSE: case 'expense': diff --git a/fe/src/stores/Transaction/transactionStoreUtils.ts b/fe/src/stores/Transaction/transactionStoreUtils.ts index 4c4a72ec..98df54cc 100644 --- a/fe/src/stores/Transaction/transactionStoreUtils.ts +++ b/fe/src/stores/Transaction/transactionStoreUtils.ts @@ -1,18 +1,18 @@ import math from 'utils/math'; import { IDateTotalprice, TransactionDBType, IDateTransactionObj } from 'types'; import { TransactionStore } from 'stores/Transaction'; -import { categoryConvertBig2Small, categoryType } from 'stores/Category'; +import { categoryConvertBig2Small } from 'stores/Category'; import dateUtil from 'utils/date'; export const initTotalPrice = { income: 0, expense: 0, + unclassified: 0, }; export const sumAllPricesByType = (transactions: TransactionDBType[]) => { return transactions.reduce((summedPriceByType, transaction) => { - const type = - transaction.category.type === categoryType.INCOME ? 'income' : 'expense'; + const type = categoryConvertBig2Small(transaction.category.type); return { ...summedPriceByType, [type]: summedPriceByType[type] + transaction.price, From 9d876d5d73827465b7ab83e8335c0f1bd5a00316 Mon Sep 17 00:00:00 2001 From: rolled-potatoes Date: Wed, 16 Dec 2020 00:32:03 +0900 Subject: [PATCH 04/12] =?UTF-8?q?[FE]=20Feat=20:=20=EB=AF=B8=EB=B6=84?= =?UTF-8?q?=EB=A5=98=20=ED=83=9C=EA=B7=B8=EB=8F=84=20=ED=95=A9=EA=B3=84=20?= =?UTF-8?q?=EA=B5=AC=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fe/src/stores/Transaction/transactionStoreUtils.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/fe/src/stores/Transaction/transactionStoreUtils.ts b/fe/src/stores/Transaction/transactionStoreUtils.ts index 98df54cc..36423bda 100644 --- a/fe/src/stores/Transaction/transactionStoreUtils.ts +++ b/fe/src/stores/Transaction/transactionStoreUtils.ts @@ -55,11 +55,12 @@ export const convertTransactionDBTypetoTransactionType = (input: any[]) => { export const calTotalPrices = (list: IDateTransactionObj) => { return Object.values(list).reduce( - (acc: { income: number; expense: number }, transactions) => { + (acc, transactions) => { const summedPrices = sumAllPricesByType(transactions); return { income: acc.income + summedPrices.income, expense: acc.expense + summedPrices.expense, + unclassified: acc.unclassified + summedPrices.unclassified, }; }, initTotalPrice, From 2320f7f3e12783027afa8d4dfd3b6a2089c3aa29 Mon Sep 17 00:00:00 2001 From: rolled-potatoes Date: Wed, 16 Dec 2020 00:44:05 +0900 Subject: [PATCH 05/12] =?UTF-8?q?[FE]=20Feat=20:=20=EC=B9=B4=ED=85=8C?= =?UTF-8?q?=EA=B3=A0=EB=A6=AC=EB=B3=84=20=ED=95=A9=EA=B3=84=20=EA=B5=AC?= =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=ED=95=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fe/src/components/organisms/TransactionList/index.tsx | 8 ++++++++ fe/src/stores/Transaction/transactionStoreUtils.ts | 1 + 2 files changed, 9 insertions(+) diff --git a/fe/src/components/organisms/TransactionList/index.tsx b/fe/src/components/organisms/TransactionList/index.tsx index 0fd0b420..46038176 100644 --- a/fe/src/components/organisms/TransactionList/index.tsx +++ b/fe/src/components/organisms/TransactionList/index.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { categoryConvertBig2Small as convert } from 'stores/Category'; import * as S from './style'; export interface Props { @@ -10,6 +11,9 @@ export interface Props { interface accType { transList: JSX.Element[]; totalPrice: number; + income: number; + expense: number; + unclassified: number; } const TransactionList = ({ date, transactionList, onClick }: Props) => { @@ -22,6 +26,7 @@ const TransactionList = ({ date, transactionList, onClick }: Props) => { />, ); acc.totalPrice += transEl.price; + acc[convert(transEl.categoryType)] = transEl.price; return acc; }; @@ -30,6 +35,9 @@ const TransactionList = ({ date, transactionList, onClick }: Props) => { { transList: [], totalPrice: 0, + income: 0, + expense: 0, + unclassified: 0, }, ); diff --git a/fe/src/stores/Transaction/transactionStoreUtils.ts b/fe/src/stores/Transaction/transactionStoreUtils.ts index 36423bda..660d2ade 100644 --- a/fe/src/stores/Transaction/transactionStoreUtils.ts +++ b/fe/src/stores/Transaction/transactionStoreUtils.ts @@ -48,6 +48,7 @@ export const convertTransactionDBTypetoTransactionType = (input: any[]) => { id: _id, category: category.title, method: method.title, + categoryType: category.type, }, ]; }, []); From 58091ffe9d96a242660e132fe6ff2f74593d64d9 Mon Sep 17 00:00:00 2001 From: rolled-potatoes Date: Wed, 16 Dec 2020 00:49:31 +0900 Subject: [PATCH 06/12] =?UTF-8?q?[FE]=20Feat=20:=20=EC=B9=B4=ED=85=8C?= =?UTF-8?q?=EA=B3=A0=EB=A6=AC=EB=B3=84=20=ED=95=A9=EA=B3=84=20=EB=84=98?= =?UTF-8?q?=EA=B2=A8=EC=A3=BC=EB=8F=84=EB=A1=9D=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DateMoneyHeader/index.stories.tsx | 12 +++++-- .../molecules/DateMoneyHeader/index.tsx | 12 ++++++- .../organisms/TransactionList/index.tsx | 31 ++++++++++++------- 3 files changed, 41 insertions(+), 14 deletions(-) diff --git a/fe/src/components/molecules/DateMoneyHeader/index.stories.tsx b/fe/src/components/molecules/DateMoneyHeader/index.stories.tsx index 33d5340c..91ad05bc 100644 --- a/fe/src/components/molecules/DateMoneyHeader/index.stories.tsx +++ b/fe/src/components/molecules/DateMoneyHeader/index.stories.tsx @@ -11,10 +11,18 @@ export default { export const DateMoneyHeaderSample = () => { const date = new Date(); const value = 1000000; - + const income = 400000; + const expense = 560000; + const unclassified = 0; return ( - + ); }; diff --git a/fe/src/components/molecules/DateMoneyHeader/index.tsx b/fe/src/components/molecules/DateMoneyHeader/index.tsx index 0d7cad24..ce9cfa5c 100644 --- a/fe/src/components/molecules/DateMoneyHeader/index.tsx +++ b/fe/src/components/molecules/DateMoneyHeader/index.tsx @@ -5,9 +5,19 @@ import { DateMoneyHeaderStyle, ReducedDate } from './style'; export interface Props { date: Date; totalPayment: number; + unclassified: number; + income: number; + expense: number; } -const DateMoneyHeader = ({ date, totalPayment, ...props }: Props) => { +const DateMoneyHeader = ({ + date, + totalPayment, + unclassified, + income, + expense, + ...props +}: Props) => { return ( diff --git a/fe/src/components/organisms/TransactionList/index.tsx b/fe/src/components/organisms/TransactionList/index.tsx index 46038176..75e7c6c5 100644 --- a/fe/src/components/organisms/TransactionList/index.tsx +++ b/fe/src/components/organisms/TransactionList/index.tsx @@ -30,20 +30,29 @@ const TransactionList = ({ date, transactionList, onClick }: Props) => { return acc; }; - const { transList, totalPrice } = transactionList.reduce( - reduceTransactionList, - { - transList: [], - totalPrice: 0, - income: 0, - expense: 0, - unclassified: 0, - }, - ); + const { + transList, + totalPrice, + income, + expense, + unclassified, + } = transactionList.reduce(reduceTransactionList, { + transList: [], + totalPrice: 0, + income: 0, + expense: 0, + unclassified: 0, + }); return ( - + {transList} ); From ae9f29fdc6e26837e5134414c4ee5b4f52ff8cac Mon Sep 17 00:00:00 2001 From: rolled-potatoes Date: Wed, 16 Dec 2020 00:51:03 +0900 Subject: [PATCH 07/12] =?UTF-8?q?[FE]=20Feat=20:=20PriceTag=200=EC=9B=90?= =?UTF-8?q?=EC=9D=BC=20=EB=95=8C=20=ED=91=9C=EC=8B=9C=20=EC=95=88=ED=95=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fe/src/components/atoms/PriceTag/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fe/src/components/atoms/PriceTag/index.tsx b/fe/src/components/atoms/PriceTag/index.tsx index 42d22d1f..70c855f7 100644 --- a/fe/src/components/atoms/PriceTag/index.tsx +++ b/fe/src/components/atoms/PriceTag/index.tsx @@ -17,7 +17,7 @@ const PriceTag: React.FC = ({ }): React.ReactElement => { return ( - {`${value.toLocaleString()}원`} + {value === 0 ? '' : `${value.toLocaleString()}원`} ); }; From cc1ae43bec773a5f8f2c57dda568e24ad129d7c2 Mon Sep 17 00:00:00 2001 From: rolled-potatoes Date: Wed, 16 Dec 2020 02:01:14 +0900 Subject: [PATCH 08/12] =?UTF-8?q?[FE]=20Feat=20:=20=ED=95=A9=EA=B3=84=20?= =?UTF-8?q?=EC=83=89=EC=83=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../molecules/DateMoneyHeader/index.tsx | 11 ++++++++++- .../molecules/DateMoneyHeader/style.ts | 17 +++++++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/fe/src/components/molecules/DateMoneyHeader/index.tsx b/fe/src/components/molecules/DateMoneyHeader/index.tsx index ce9cfa5c..7410ca31 100644 --- a/fe/src/components/molecules/DateMoneyHeader/index.tsx +++ b/fe/src/components/molecules/DateMoneyHeader/index.tsx @@ -21,7 +21,16 @@ const DateMoneyHeader = ({ return ( - +
+
+ {income === 0 ? '' : `+`} + +
+
+ {expense === 0 ? '' : '-'} + +
+
); }; diff --git a/fe/src/components/molecules/DateMoneyHeader/style.ts b/fe/src/components/molecules/DateMoneyHeader/style.ts index 546d0e5f..a9ea601b 100644 --- a/fe/src/components/molecules/DateMoneyHeader/style.ts +++ b/fe/src/components/molecules/DateMoneyHeader/style.ts @@ -16,4 +16,21 @@ export const ReducedDate = styled(DateAtom)` export const DateMoneyHeaderStyle = styled.div` display: flex; justify-content: space-between; + .price-container { + display: flex; + align-items: center; + &__price { + display: flex; + align-items: center; + &--income { + color: ${({ theme }) => theme.color.selectedBlue}; + } + &--expense { + color: ${({ theme }) => theme.color.red}; + } + } + } + .price-container__price + .price-container__price { + margin-left: 0.5em; + } `; From a4684fa731e533bcb582e28d7a16f7af1d468211 Mon Sep 17 00:00:00 2001 From: rolled-potatoes Date: Wed, 16 Dec 2020 02:25:23 +0900 Subject: [PATCH 09/12] =?UTF-8?q?[FE]=20Feat=20:=20=ED=83=80=EC=9E=85?= =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=B6=80=ED=98=B8=20+=20?= =?UTF-8?q?=EA=B0=80=EA=B2=A9=20=EC=BB=B4=ED=8F=AC=EB=84=88=ED=8A=B8=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../molecules/PriceWithSign/index.tsx | 30 +++++++++++++++++++ .../molecules/PriceWithSign/style.ts | 16 ++++++++++ 2 files changed, 46 insertions(+) create mode 100644 fe/src/components/molecules/PriceWithSign/index.tsx create mode 100644 fe/src/components/molecules/PriceWithSign/style.ts diff --git a/fe/src/components/molecules/PriceWithSign/index.tsx b/fe/src/components/molecules/PriceWithSign/index.tsx new file mode 100644 index 00000000..470ddf00 --- /dev/null +++ b/fe/src/components/molecules/PriceWithSign/index.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { categoryType } from 'stores/Category'; +import * as S from './style'; + +export interface Prop { + price: number; + type: 'income' | 'expense' | 'unclassified'; + children?: any; +} +const getPriceColor = (type: string) => { + switch (type) { + case categoryType.EXPENSE: + return 'red'; + case categoryType.INCOME: + return 'brandColor'; + default: + return 'black'; + } +}; + +const PriceWithSign = ({ price, type, children }: Prop) => { + const color = getPriceColor(type); + return ( + + {price === 0 ? '' : `+`} + {children} + + ); +}; +export default PriceWithSign; diff --git a/fe/src/components/molecules/PriceWithSign/style.ts b/fe/src/components/molecules/PriceWithSign/style.ts new file mode 100644 index 00000000..835ef257 --- /dev/null +++ b/fe/src/components/molecules/PriceWithSign/style.ts @@ -0,0 +1,16 @@ +import styled from 'styled-components'; + +export interface IPrice { + color: string; + theme: { + [propName: string]: any; + }; +} +export const Price = styled.div` + display: flex; + align-items: center; + color: ${({ theme, color }) => theme.color[color]}; + & + & { + margin-left: 0.5em; + } +`; From 14fa2456c6932a64de81f8548878d6eef90d9a89 Mon Sep 17 00:00:00 2001 From: rolled-potatoes Date: Wed, 16 Dec 2020 02:43:15 +0900 Subject: [PATCH 10/12] =?UTF-8?q?[FE]=20Feat=20:=20PriceWithSign=20?= =?UTF-8?q?=EC=97=90=20Price=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=82=BD=EC=9E=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 하위에 color 값을 같이 사용하기 떄문에 하나로 묶는 것이 적합하다 판단하여 변경. --- fe/src/components/atoms/PriceTag/index.tsx | 2 +- fe/src/components/molecules/PriceWithSign/index.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/fe/src/components/atoms/PriceTag/index.tsx b/fe/src/components/atoms/PriceTag/index.tsx index 70c855f7..48cf43ff 100644 --- a/fe/src/components/atoms/PriceTag/index.tsx +++ b/fe/src/components/atoms/PriceTag/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import PriceContainer from './style'; -interface Props { +export interface Props { value: number; bold?: boolean; size?: string; diff --git a/fe/src/components/molecules/PriceWithSign/index.tsx b/fe/src/components/molecules/PriceWithSign/index.tsx index 470ddf00..162ddd33 100644 --- a/fe/src/components/molecules/PriceWithSign/index.tsx +++ b/fe/src/components/molecules/PriceWithSign/index.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { categoryType } from 'stores/Category'; +import PriceTag, { Props } from 'components/atoms/PriceTag'; import * as S from './style'; -export interface Prop { +export interface Prop extends Omit { price: number; - type: 'income' | 'expense' | 'unclassified'; - children?: any; + type: string; } const getPriceColor = (type: string) => { switch (type) { @@ -18,12 +18,12 @@ const getPriceColor = (type: string) => { } }; -const PriceWithSign = ({ price, type, children }: Prop) => { +const PriceWithSign = ({ price, type, ...props }: Prop) => { const color = getPriceColor(type); return ( {price === 0 ? '' : `+`} - {children} + ); }; From 4d26f6c72d6199e546eb67c8b7682ca0837de24e Mon Sep 17 00:00:00 2001 From: rolled-potatoes Date: Wed, 16 Dec 2020 02:44:54 +0900 Subject: [PATCH 11/12] =?UTF-8?q?[FE]=20Refactor=20:=20Price=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20PriceWithSign=20?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/molecules/DateMoneyHeader/index.tsx | 13 ++++--------- .../components/molecules/DateMoneyHeader/style.ts | 13 ------------- fe/src/components/molecules/Transaction/index.tsx | 5 ++++- fe/src/components/molecules/Transaction/style.ts | 5 ----- 4 files changed, 8 insertions(+), 28 deletions(-) diff --git a/fe/src/components/molecules/DateMoneyHeader/index.tsx b/fe/src/components/molecules/DateMoneyHeader/index.tsx index 7410ca31..f66efb7e 100644 --- a/fe/src/components/molecules/DateMoneyHeader/index.tsx +++ b/fe/src/components/molecules/DateMoneyHeader/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import PriceTag from 'components/atoms/PriceTag'; +import PriceWithSign from 'components/molecules/PriceWithSign'; +import { categoryType } from 'stores/Category'; import { DateMoneyHeaderStyle, ReducedDate } from './style'; export interface Props { @@ -22,14 +23,8 @@ const DateMoneyHeader = ({
-
- {income === 0 ? '' : `+`} - -
-
- {expense === 0 ? '' : '-'} - -
+ +
); diff --git a/fe/src/components/molecules/DateMoneyHeader/style.ts b/fe/src/components/molecules/DateMoneyHeader/style.ts index a9ea601b..bf7a67f9 100644 --- a/fe/src/components/molecules/DateMoneyHeader/style.ts +++ b/fe/src/components/molecules/DateMoneyHeader/style.ts @@ -19,18 +19,5 @@ export const DateMoneyHeaderStyle = styled.div` .price-container { display: flex; align-items: center; - &__price { - display: flex; - align-items: center; - &--income { - color: ${({ theme }) => theme.color.selectedBlue}; - } - &--expense { - color: ${({ theme }) => theme.color.red}; - } - } - } - .price-container__price + .price-container__price { - margin-left: 0.5em; } `; diff --git a/fe/src/components/molecules/Transaction/index.tsx b/fe/src/components/molecules/Transaction/index.tsx index a1449932..e702775d 100644 --- a/fe/src/components/molecules/Transaction/index.tsx +++ b/fe/src/components/molecules/Transaction/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import doubleArrowIcon from 'assets/svg/doubleArrow.svg'; +import PriceWithSign from 'components/molecules/PriceWithSign'; import * as S from './style'; export interface Props { @@ -9,6 +10,8 @@ export interface Props { const Transaction = ({ trans, onClick }: Props) => { const classificationString = `${trans.category} | ${trans.method}`; + const type = trans.categoryType; + return ( onClick(trans.id)}> @@ -17,7 +20,7 @@ const Transaction = ({ trans, onClick }: Props) => { {trans.client} {classificationString} - + ); diff --git a/fe/src/components/molecules/Transaction/style.ts b/fe/src/components/molecules/Transaction/style.ts index 224ad227..922c4c3f 100644 --- a/fe/src/components/molecules/Transaction/style.ts +++ b/fe/src/components/molecules/Transaction/style.ts @@ -1,6 +1,5 @@ import styled from 'styled-components'; import Icon from 'components/atoms/Icons'; -import PriceTag from 'components/atoms/PriceTag'; export const TransactionStyle = styled.div` box-sizing: border-box; @@ -33,7 +32,3 @@ export const Classification = styled.div` margin-top: 0.5em; color: ${({ theme }) => theme.color.subText}; `; - -export const Price = styled(PriceTag)` - margin-left: 0.5rem; -`; From 709fc054126ccf8e64b821e2164e5728147d570b Mon Sep 17 00:00:00 2001 From: rolled-potatoes Date: Wed, 16 Dec 2020 02:50:04 +0900 Subject: [PATCH 12/12] =?UTF-8?q?[FE]=20Style=20:=20PriceWithSign=20?= =?UTF-8?q?=EB=B6=80=ED=98=B8=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 부호가 플러스로 고정된 것을 수정 하였습니다. --- .../components/molecules/PriceWithSign/index.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/fe/src/components/molecules/PriceWithSign/index.tsx b/fe/src/components/molecules/PriceWithSign/index.tsx index 162ddd33..4f04a364 100644 --- a/fe/src/components/molecules/PriceWithSign/index.tsx +++ b/fe/src/components/molecules/PriceWithSign/index.tsx @@ -17,12 +17,23 @@ const getPriceColor = (type: string) => { return 'black'; } }; - +const getSigin = ({ type, price }: { type: string; price: number }) => { + if (price === 0) return ''; + switch (type) { + case categoryType.EXPENSE: + return '-'; + case categoryType.INCOME: + return '+'; + default: + return ''; + } +}; const PriceWithSign = ({ price, type, ...props }: Prop) => { const color = getPriceColor(type); + const sign = getSigin({ type, price }); return ( - {price === 0 ? '' : `+`} + {sign} );