From 1c0b501d48e6cc26d30042f36cd49d7285596b8d Mon Sep 17 00:00:00 2001 From: jhLim97 Date: Fri, 4 Feb 2022 23:11:42 +0900 Subject: [PATCH 01/23] =?UTF-8?q?warning=EC=97=90=20=EB=94=B0=EB=A5=B8=20p?= =?UTF-8?q?rops=EB=AA=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Header/index.jsx | 6 +++--- frontend/src/components/Header/style.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/Header/index.jsx b/frontend/src/components/Header/index.jsx index 94339f4..a807fa1 100644 --- a/frontend/src/components/Header/index.jsx +++ b/frontend/src/components/Header/index.jsx @@ -22,13 +22,13 @@ const Header = ({ current }) => { - + 내역 - + 달력 - + 통계 diff --git a/frontend/src/components/Header/style.js b/frontend/src/components/Header/style.js index 1278cce..421c816 100644 --- a/frontend/src/components/Header/style.js +++ b/frontend/src/components/Header/style.js @@ -77,7 +77,7 @@ export const PageTarget = styled(Link)` color: ${({ theme }) => (props) => - props.isSelected ? theme.color.white : theme.color.black}; + props.selected ? theme.color.white : theme.color.black}; &:hover { cursor: pointer; From ad873eb1e8bff9f9032d93ac76c217016b4c8236 Mon Sep 17 00:00:00 2001 From: jhLim97 Date: Sat, 5 Feb 2022 22:50:31 +0900 Subject: [PATCH 02/23] =?UTF-8?q?fix:=20=ED=97=A4=EB=8D=94=EC=9D=98=20?= =?UTF-8?q?=EB=82=A0=EC=A7=9C=20=EB=B0=8F=20arrow=20=EB=B2=84=ED=8A=BC=20m?= =?UTF-8?q?argin=20=EA=B0=84=EA=B2=A9=20=EC=9E=AC=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Header/style.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Header/style.js b/frontend/src/components/Header/style.js index 421c816..be94aa7 100644 --- a/frontend/src/components/Header/style.js +++ b/frontend/src/components/Header/style.js @@ -37,7 +37,7 @@ export const Title = styled.h1` `; export const DateBox = styled.div` - margin-top: 7px; + margin: 7px 0px 0px 0px; display: flex; flex-direction: row; @@ -48,10 +48,12 @@ export const DateBox = styled.div` `; export const ArrowButton = styled.button` - margin-top: 3px; + margin: 3px 0px 0px 15px; `; export const Date = styled.strong` + margin-left: 15px; + font-weight: bold; color: ${({ theme }) => theme.color.white}; `; From 73a5a86edd040ea9963c6a830c9c23ddd7077368 Mon Sep 17 00:00:00 2001 From: jhLim97 Date: Sat, 5 Feb 2022 22:52:10 +0900 Subject: [PATCH 03/23] =?UTF-8?q?chore:=20theme=20color=20=EC=86=8D?= =?UTF-8?q?=EC=84=B1=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/styles/theme.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/styles/theme.js b/frontend/src/styles/theme.js index 1a8ddc7..c8b04e4 100644 --- a/frontend/src/styles/theme.js +++ b/frontend/src/styles/theme.js @@ -9,9 +9,11 @@ const fontSize = { const color = { mint: '#06d6a0', blue: '#0990d6', - white: '#FFFFFF', black: '#000000', + white: '#FFFFFF', + whiteSmoke: '#F5F5F5', + gray: '#808080', brigtenL1Gray: '#d7d7d7', brigtenL2Gray: '#f5f5f5', From 5e944568c7c5c64862c024b1e5f73e425cf3c6be Mon Sep 17 00:00:00 2001 From: jhLim97 Date: Sat, 5 Feb 2022 22:52:46 +0900 Subject: [PATCH 04/23] =?UTF-8?q?chore:=20GlobalStyles=20button=20padding?= =?UTF-8?q?=20=EC=B4=88=EA=B8=B0=ED=99=94=20=EC=86=8D=EC=84=B1=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/styles/GlobalStyle.js | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/styles/GlobalStyle.js b/frontend/src/styles/GlobalStyle.js index a27d6ac..2183007 100644 --- a/frontend/src/styles/GlobalStyle.js +++ b/frontend/src/styles/GlobalStyle.js @@ -134,6 +134,7 @@ const GlobalStyle = createGlobalStyle` } button { + padding: 0px; border: none; background: none; cursor: pointer; From 62b894a65f67e349a1d239a8316ab9394cc95303 Mon Sep 17 00:00:00 2001 From: jhLim97 Date: Sat, 5 Feb 2022 22:53:06 +0900 Subject: [PATCH 05/23] =?UTF-8?q?chore:=20=EB=92=A4=EB=A1=9C=EA=B0=80?= =?UTF-8?q?=EA=B8=B0=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/public/assets/back-button.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 frontend/public/assets/back-button.svg diff --git a/frontend/public/assets/back-button.svg b/frontend/public/assets/back-button.svg new file mode 100644 index 0000000..53ccca3 --- /dev/null +++ b/frontend/public/assets/back-button.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file From 2b45a4c61e6a489aa8749f2caa01d2903e9369f7 Mon Sep 17 00:00:00 2001 From: jhLim97 Date: Sat, 5 Feb 2022 23:08:43 +0900 Subject: [PATCH 06/23] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=EA=B4=80=EB=A6=AC=EB=A5=BC=20=EC=9C=84=ED=95=9C=20rec?= =?UTF-8?q?oil=20atom=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/recoil/modal/atom.js | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 frontend/src/recoil/modal/atom.js diff --git a/frontend/src/recoil/modal/atom.js b/frontend/src/recoil/modal/atom.js new file mode 100644 index 0000000..2be3fbf --- /dev/null +++ b/frontend/src/recoil/modal/atom.js @@ -0,0 +1,9 @@ +import { atom } from 'recoil'; + +export const modalState = atom({ + key: 'modalState', + default: { + current: null, + props: null, + }, +}); From da22f04bf967f2796a96d35e93dd795aafbd5ae6 Mon Sep 17 00:00:00 2001 From: jhLim97 Date: Sat, 5 Feb 2022 23:09:25 +0900 Subject: [PATCH 07/23] =?UTF-8?q?feat:=20=ED=8A=B9=EC=A0=95=20=EA=B1=B0?= =?UTF-8?q?=EB=9E=98=EB=82=B4=EC=97=AD=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20?= =?UTF-8?q?=ED=95=B4=EB=8B=B9=EB=82=B4=EC=97=AD=EC=97=90=20=EB=8C=80?= =?UTF-8?q?=ED=95=9C=20=EC=83=81=EC=84=B8=EB=82=B4=EC=97=AD=EC=9D=84=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=EB=A1=9C=20=EB=9D=84=EC=9A=B0=EA=B8=B0=20?= =?UTF-8?q?=EC=9C=84=ED=95=9C=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 특정 거래내역 클릭시 해당 내역을 모달창으로 띄우기 위한 상태관리 변경 핸들러를 추가했습니다. --- frontend/src/components/Transaction/index.jsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/Transaction/index.jsx b/frontend/src/components/Transaction/index.jsx index 5c09edd..c3c7b94 100644 --- a/frontend/src/components/Transaction/index.jsx +++ b/frontend/src/components/Transaction/index.jsx @@ -1,11 +1,23 @@ import React from 'react'; +import { useSetRecoilState } from 'recoil'; import PropTypes from 'prop-types'; +import { modalState } from '../../recoil/modal/atom'; import { Wrapper, OuterBox, Category, InnerBox, Content, Method, Cost } from './style'; const Transaction = ({ transaction }) => { + const setCurrentModal = useSetRecoilState(modalState); + + const changeModalState = () => { + const state = { + current: 'transaction', + props: transaction, + }; + setCurrentModal(state); + }; + return ( - + {transaction.category} From 21aec12d5800f7f5e31adf5ccb6212fe02905c51 Mon Sep 17 00:00:00 2001 From: jhLim97 Date: Sat, 5 Feb 2022 23:16:06 +0900 Subject: [PATCH 08/23] =?UTF-8?q?feat:=20=EA=B1=B0=EB=9E=98=EB=82=B4?= =?UTF-8?q?=EC=97=AD=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=ED=95=B4=EB=8B=B9?= =?UTF-8?q?=20=EA=B1=B0=EB=9E=98=EB=82=B4=EC=97=AD=EC=9D=98=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=EC=A0=95=EB=B3=B4=EB=A5=BC=20=EB=B3=B4=EC=97=AC?= =?UTF-8?q?=EC=A3=BC=EB=8A=94=20=EB=AA=A8=EB=8B=AC=EC=B0=BD=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 전역으로 관리하는 모달상태를 기반으로 해당하는 거래내역을 렌더링합니다. * 현재 UI만 구현된 상태이고, 삭제 및 수정과 같은 이벤트 핸들러는 미구현 상태입니다. --- .../src/components/TransactionModal/index.jsx | 154 ++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 frontend/src/components/TransactionModal/index.jsx diff --git a/frontend/src/components/TransactionModal/index.jsx b/frontend/src/components/TransactionModal/index.jsx new file mode 100644 index 0000000..f483512 --- /dev/null +++ b/frontend/src/components/TransactionModal/index.jsx @@ -0,0 +1,154 @@ +import React from 'react'; +import { useRecoilState } from 'recoil'; +import styled from 'styled-components'; + +import { modalState } from '../../recoil/modal/atom'; +import back from '../../../public/assets/back-button.svg'; + +const TransactionModal = () => { + const [modal, setModal] = useRecoilState(modalState); + + if (modal.props == null) return null; + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + 삭제 + 수정 + + + + ); +}; + +export default TransactionModal; + +const Wrapper = styled.div` + display: ${(props) => (props.active ? 'block' : 'none')}; +`; + +const BackgroundDim = styled.div` + position: fixed; + z-index: 1; + + top: 0; + left: 0; + width: 100vw; + height: 100vh; + + background-color: ${({ theme }) => theme.color.black}; + opacity: 0.57; +`; + +const Card = styled.form` + position: fixed; + z-index: 2; + + width: 700px; + height: 500px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + background-color: ${({ theme }) => theme.color.white}; + box-shadow: ${({ theme }) => theme.shadow.thick}; +`; + +const Element = styled.div` + margin-bottom: 10px; + width: 250px; + + display: flex; + flex-direction: column; + + font-weight: bold; +`; + +const BackImg = styled.img` + float: left; +`; + +const Input = styled.input` + margin-top: 5px; + padding: 10px; + + border: 1px solid ${({ theme }) => theme.color.brigtenL1Gray}; + border-radius: 10px; + background: ${({ theme }) => theme.color.whiteSmoke}; +`; + +const ButtonContainer = styled.div` + padding-left: 0px; + width: 250px; + + display: flex; + flex-direction: row; + justify-content: space-between; +`; + +const DecisionButton = styled.button` + font-weight: bold; + font-size: ${({ theme }) => theme.fontSize.default}; + color: ${(props) => (props.type === 'submit' ? '#0990d6' : '#ff000f')}; +`; From 3b1c869fb122e49f41f417313d9f3f743cbde996 Mon Sep 17 00:00:00 2001 From: jhLim97 Date: Sat, 5 Feb 2022 23:17:31 +0900 Subject: [PATCH 09/23] =?UTF-8?q?feat:=20=EA=B1=B0=EB=9E=98=EB=82=B4?= =?UTF-8?q?=EC=97=AD=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Transactions/index.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/Transactions/index.jsx b/frontend/src/components/Transactions/index.jsx index d21c3e0..1631bd4 100644 --- a/frontend/src/components/Transactions/index.jsx +++ b/frontend/src/components/Transactions/index.jsx @@ -3,6 +3,7 @@ import { useRecoilValue } from 'recoil'; import { nanoid } from 'nanoid'; import DailyTransaction from '../DailyTransaction'; +import TransactionModal from '../TransactionModal'; import { useFilterdTransactions } from './hooks'; import { checkState } from '../../recoil/check/atom'; import { TransactionsContainer } from './style'; @@ -30,7 +31,12 @@ const Transactions = () => { /> )); - return {shapedTransactions}; + return ( + <> + {shapedTransactions} + + + ); }; export default Transactions; From 22b5da353ac89876d42976a610202110cadd5635 Mon Sep 17 00:00:00 2001 From: jhLim97 Date: Sat, 5 Feb 2022 23:19:54 +0900 Subject: [PATCH 10/23] =?UTF-8?q?feat:=20=EA=B1=B0=EB=9E=98=EB=82=B4?= =?UTF-8?q?=EC=97=AD=20=EB=AA=A8=EB=8B=AC=EC=B0=BD=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95=20=EC=9A=94=EC=86=8C=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TransactionModal/index.jsx | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/frontend/src/components/TransactionModal/index.jsx b/frontend/src/components/TransactionModal/index.jsx index f483512..103d844 100644 --- a/frontend/src/components/TransactionModal/index.jsx +++ b/frontend/src/components/TransactionModal/index.jsx @@ -4,6 +4,7 @@ import styled from 'styled-components'; import { modalState } from '../../recoil/modal/atom'; import back from '../../../public/assets/back-button.svg'; +import { MAX_MOBILE_DEVICE } from '../../utils/constant/device-size'; const TransactionModal = () => { const [modal, setModal] = useRecoilState(modalState); @@ -113,6 +114,18 @@ const Card = styled.form` background-color: ${({ theme }) => theme.color.white}; box-shadow: ${({ theme }) => theme.shadow.thick}; + + @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { + width: 100vw; + height: 100vh; + top: 0; + left: 0; + transform: none; + + justify-content: space-evenly; + + box-shadow: none; + } `; const Element = styled.div` @@ -123,6 +136,13 @@ const Element = styled.div` flex-direction: column; font-weight: bold; + + @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { + width: 80vw; + height: 12vh; + + justify-content: center; + } `; const BackImg = styled.img` @@ -136,6 +156,10 @@ const Input = styled.input` border: 1px solid ${({ theme }) => theme.color.brigtenL1Gray}; border-radius: 10px; background: ${({ theme }) => theme.color.whiteSmoke}; + + @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { + height: 80%; + } `; const ButtonContainer = styled.div` @@ -145,6 +169,11 @@ const ButtonContainer = styled.div` display: flex; flex-direction: row; justify-content: space-between; + + @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { + width: 80vw; + height: 12vh; + } `; const DecisionButton = styled.button` From 41e8308562e3e3af24d4f997329ada068ce02668 Mon Sep 17 00:00:00 2001 From: jhLim97 Date: Sat, 5 Feb 2022 23:26:45 +0900 Subject: [PATCH 11/23] =?UTF-8?q?refactor:=20style=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TransactionModal/index.jsx | 114 ++---------------- .../src/components/TransactionModal/style.js | 105 ++++++++++++++++ 2 files changed, 115 insertions(+), 104 deletions(-) create mode 100644 frontend/src/components/TransactionModal/style.js diff --git a/frontend/src/components/TransactionModal/index.jsx b/frontend/src/components/TransactionModal/index.jsx index 103d844..c78f455 100644 --- a/frontend/src/components/TransactionModal/index.jsx +++ b/frontend/src/components/TransactionModal/index.jsx @@ -1,10 +1,18 @@ import React from 'react'; import { useRecoilState } from 'recoil'; -import styled from 'styled-components'; import { modalState } from '../../recoil/modal/atom'; import back from '../../../public/assets/back-button.svg'; -import { MAX_MOBILE_DEVICE } from '../../utils/constant/device-size'; +import { + Wrapper, + BackgroundDim, + Card, + Element, + BackImg, + Input, + ButtonContainer, + DecisionButton, +} from './style'; const TransactionModal = () => { const [modal, setModal] = useRecoilState(modalState); @@ -79,105 +87,3 @@ const TransactionModal = () => { }; export default TransactionModal; - -const Wrapper = styled.div` - display: ${(props) => (props.active ? 'block' : 'none')}; -`; - -const BackgroundDim = styled.div` - position: fixed; - z-index: 1; - - top: 0; - left: 0; - width: 100vw; - height: 100vh; - - background-color: ${({ theme }) => theme.color.black}; - opacity: 0.57; -`; - -const Card = styled.form` - position: fixed; - z-index: 2; - - width: 700px; - height: 500px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - background-color: ${({ theme }) => theme.color.white}; - box-shadow: ${({ theme }) => theme.shadow.thick}; - - @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { - width: 100vw; - height: 100vh; - top: 0; - left: 0; - transform: none; - - justify-content: space-evenly; - - box-shadow: none; - } -`; - -const Element = styled.div` - margin-bottom: 10px; - width: 250px; - - display: flex; - flex-direction: column; - - font-weight: bold; - - @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { - width: 80vw; - height: 12vh; - - justify-content: center; - } -`; - -const BackImg = styled.img` - float: left; -`; - -const Input = styled.input` - margin-top: 5px; - padding: 10px; - - border: 1px solid ${({ theme }) => theme.color.brigtenL1Gray}; - border-radius: 10px; - background: ${({ theme }) => theme.color.whiteSmoke}; - - @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { - height: 80%; - } -`; - -const ButtonContainer = styled.div` - padding-left: 0px; - width: 250px; - - display: flex; - flex-direction: row; - justify-content: space-between; - - @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { - width: 80vw; - height: 12vh; - } -`; - -const DecisionButton = styled.button` - font-weight: bold; - font-size: ${({ theme }) => theme.fontSize.default}; - color: ${(props) => (props.type === 'submit' ? '#0990d6' : '#ff000f')}; -`; diff --git a/frontend/src/components/TransactionModal/style.js b/frontend/src/components/TransactionModal/style.js new file mode 100644 index 0000000..254c2b6 --- /dev/null +++ b/frontend/src/components/TransactionModal/style.js @@ -0,0 +1,105 @@ +import styled from 'styled-components'; + +import { MAX_MOBILE_DEVICE } from '../../utils/constant/device-size'; + +export const Wrapper = styled.div` + display: ${(props) => (props.active ? 'block' : 'none')}; +`; + +export const BackgroundDim = styled.div` + position: fixed; + z-index: 1; + + top: 0; + left: 0; + width: 100vw; + height: 100vh; + + background-color: ${({ theme }) => theme.color.black}; + opacity: 0.57; +`; + +export const Card = styled.form` + position: fixed; + z-index: 2; + + width: 700px; + height: 500px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + background-color: ${({ theme }) => theme.color.white}; + box-shadow: ${({ theme }) => theme.shadow.thick}; + + @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { + width: 100vw; + height: 100vh; + top: 0; + left: 0; + transform: none; + + justify-content: space-evenly; + + box-shadow: none; + } +`; + +export const Element = styled.div` + margin-bottom: 10px; + width: 250px; + + display: flex; + flex-direction: column; + + font-weight: bold; + + @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { + width: 80vw; + height: 12vh; + + justify-content: center; + } +`; + +export const BackImg = styled.img` + float: left; +`; + +export const Input = styled.input` + margin-top: 5px; + padding: 10px; + + border: 1px solid ${({ theme }) => theme.color.brigtenL1Gray}; + border-radius: 10px; + background: ${({ theme }) => theme.color.whiteSmoke}; + + @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { + height: 80%; + } +`; + +export const ButtonContainer = styled.div` + padding-left: 0px; + width: 250px; + + display: flex; + flex-direction: row; + justify-content: space-between; + + @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { + width: 80vw; + height: 12vh; + } +`; + +export const DecisionButton = styled.button` + font-weight: bold; + font-size: ${({ theme }) => theme.fontSize.default}; + color: ${(props) => (props.type === 'submit' ? '#0990d6' : '#ff000f')}; +`; From 21555f81525e7f894fb633abdef6e5f0ec798de6 Mon Sep 17 00:00:00 2001 From: jhLim97 Date: Sat, 5 Feb 2022 23:45:53 +0900 Subject: [PATCH 12/23] =?UTF-8?q?refactor:=20Transaction=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=EC=9D=98=20Form=20=EC=9A=94=EC=86=8C=20=EB=B3=84?= =?UTF-8?q?=EB=8F=84=EC=9D=98=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TransactionForm/index.jsx | 76 ++++++++++++++++ .../src/components/TransactionForm/style.js | 88 +++++++++++++++++++ .../src/components/TransactionModal/index.jsx | 79 ++--------------- .../src/components/TransactionModal/style.js | 87 ------------------ 4 files changed, 169 insertions(+), 161 deletions(-) create mode 100644 frontend/src/components/TransactionForm/index.jsx create mode 100644 frontend/src/components/TransactionForm/style.js diff --git a/frontend/src/components/TransactionForm/index.jsx b/frontend/src/components/TransactionForm/index.jsx new file mode 100644 index 0000000..25c6894 --- /dev/null +++ b/frontend/src/components/TransactionForm/index.jsx @@ -0,0 +1,76 @@ +import React from 'react'; +import { useRecoilState } from 'recoil'; + +import { modalState } from '../../recoil/modal/atom'; +import back from '../../../public/assets/back-button.svg'; +import { Wrapper, Element, BackImg, Input, ButtonContainer, DecisionButton } from './style'; + +const TransactionForm = () => { + const [modal, setModal] = useRecoilState(modalState); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + 삭제 + 수정 + + + ); +}; + +export default TransactionForm; diff --git a/frontend/src/components/TransactionForm/style.js b/frontend/src/components/TransactionForm/style.js new file mode 100644 index 0000000..eea5561 --- /dev/null +++ b/frontend/src/components/TransactionForm/style.js @@ -0,0 +1,88 @@ +import styled from 'styled-components'; + +import { MAX_MOBILE_DEVICE } from '../../utils/constant/device-size'; + +export const Wrapper = styled.form` + position: fixed; + z-index: 2; + + width: 700px; + height: 500px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + background-color: ${({ theme }) => theme.color.white}; + box-shadow: ${({ theme }) => theme.shadow.thick}; + + @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { + width: 100vw; + height: 100vh; + top: 0; + left: 0; + transform: none; + + justify-content: space-evenly; + + box-shadow: none; + } +`; + +export const Element = styled.div` + margin-bottom: 10px; + width: 250px; + + display: flex; + flex-direction: column; + + font-weight: bold; + + @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { + width: 80vw; + height: 12vh; + + justify-content: center; + } +`; + +export const BackImg = styled.img` + float: left; +`; + +export const Input = styled.input` + margin-top: 5px; + padding: 10px; + + border: 1px solid ${({ theme }) => theme.color.brigtenL1Gray}; + border-radius: 10px; + background: ${({ theme }) => theme.color.whiteSmoke}; + + @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { + height: 80%; + } +`; + +export const ButtonContainer = styled.div` + padding-left: 0px; + width: 250px; + + display: flex; + flex-direction: row; + justify-content: space-between; + + @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { + width: 80vw; + height: 12vh; + } +`; + +export const DecisionButton = styled.button` + font-weight: bold; + font-size: ${({ theme }) => theme.fontSize.default}; + color: ${(props) => (props.type === 'submit' ? '#0990d6' : '#ff000f')}; +`; diff --git a/frontend/src/components/TransactionModal/index.jsx b/frontend/src/components/TransactionModal/index.jsx index c78f455..eaeee5c 100644 --- a/frontend/src/components/TransactionModal/index.jsx +++ b/frontend/src/components/TransactionModal/index.jsx @@ -1,87 +1,18 @@ import React from 'react'; -import { useRecoilState } from 'recoil'; +import { useRecoilValue } from 'recoil'; +import TransactionForm from '../TransactionForm'; import { modalState } from '../../recoil/modal/atom'; -import back from '../../../public/assets/back-button.svg'; -import { - Wrapper, - BackgroundDim, - Card, - Element, - BackImg, - Input, - ButtonContainer, - DecisionButton, -} from './style'; +import { Wrapper, BackgroundDim } from './style'; const TransactionModal = () => { - const [modal, setModal] = useRecoilState(modalState); + const modal = useRecoilValue(modalState); if (modal.props == null) return null; return ( - - - - - - - - - - - - - - - - - - - - - - - - - - 삭제 - 수정 - - + ); }; diff --git a/frontend/src/components/TransactionModal/style.js b/frontend/src/components/TransactionModal/style.js index 254c2b6..9e1113b 100644 --- a/frontend/src/components/TransactionModal/style.js +++ b/frontend/src/components/TransactionModal/style.js @@ -1,7 +1,5 @@ import styled from 'styled-components'; -import { MAX_MOBILE_DEVICE } from '../../utils/constant/device-size'; - export const Wrapper = styled.div` display: ${(props) => (props.active ? 'block' : 'none')}; `; @@ -18,88 +16,3 @@ export const BackgroundDim = styled.div` background-color: ${({ theme }) => theme.color.black}; opacity: 0.57; `; - -export const Card = styled.form` - position: fixed; - z-index: 2; - - width: 700px; - height: 500px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - background-color: ${({ theme }) => theme.color.white}; - box-shadow: ${({ theme }) => theme.shadow.thick}; - - @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { - width: 100vw; - height: 100vh; - top: 0; - left: 0; - transform: none; - - justify-content: space-evenly; - - box-shadow: none; - } -`; - -export const Element = styled.div` - margin-bottom: 10px; - width: 250px; - - display: flex; - flex-direction: column; - - font-weight: bold; - - @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { - width: 80vw; - height: 12vh; - - justify-content: center; - } -`; - -export const BackImg = styled.img` - float: left; -`; - -export const Input = styled.input` - margin-top: 5px; - padding: 10px; - - border: 1px solid ${({ theme }) => theme.color.brigtenL1Gray}; - border-radius: 10px; - background: ${({ theme }) => theme.color.whiteSmoke}; - - @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { - height: 80%; - } -`; - -export const ButtonContainer = styled.div` - padding-left: 0px; - width: 250px; - - display: flex; - flex-direction: row; - justify-content: space-between; - - @media screen and (max-width: ${MAX_MOBILE_DEVICE}px) { - width: 80vw; - height: 12vh; - } -`; - -export const DecisionButton = styled.button` - font-weight: bold; - font-size: ${({ theme }) => theme.fontSize.default}; - color: ${(props) => (props.type === 'submit' ? '#0990d6' : '#ff000f')}; -`; From fab4adadec8fe11be841a15380adc90d56782c38 Mon Sep 17 00:00:00 2001 From: jhLim97 Date: Sun, 6 Feb 2022 00:13:22 +0900 Subject: [PATCH 13/23] =?UTF-8?q?refactor:=20=ED=8A=B8=EB=9E=9C=EC=9E=AD?= =?UTF-8?q?=EC=85=98=20=EB=AA=A8=EB=8B=AC=EA=B4=80=EB=A0=A8=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=EB=AA=85=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20props=20?= =?UTF-8?q?=EC=9A=94=EC=86=8C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 거래내역 관련 모달 중 업데이트 및 삭제를 할 수 있는 모달에 대해서 컴포넌트명을 update가 들어가도록 수정했습니다. * form 컴포넌트의 경우 필요한 핸들러들을 상위요소에서 props로 내려받도록 수정했습니다. * form의 수정버튼의 type 속성을 update로 변경했습니다. --- .../src/components/TransactionModal/index.jsx | 17 +++++++++++++---- .../index.jsx | 18 +++++++++--------- .../style.js | 2 +- 3 files changed, 23 insertions(+), 14 deletions(-) rename frontend/src/components/{TransactionForm => TransactionUpdateForm}/index.jsx (83%) rename frontend/src/components/{TransactionForm => TransactionUpdateForm}/style.js (96%) diff --git a/frontend/src/components/TransactionModal/index.jsx b/frontend/src/components/TransactionModal/index.jsx index eaeee5c..9b43072 100644 --- a/frontend/src/components/TransactionModal/index.jsx +++ b/frontend/src/components/TransactionModal/index.jsx @@ -1,18 +1,27 @@ import React from 'react'; -import { useRecoilValue } from 'recoil'; +import { useRecoilState } from 'recoil'; -import TransactionForm from '../TransactionForm'; +import TransactionUpdateForm from '../TransactionUpdateForm'; import { modalState } from '../../recoil/modal/atom'; import { Wrapper, BackgroundDim } from './style'; const TransactionModal = () => { - const modal = useRecoilValue(modalState); + const [modal, setModal] = useRecoilState(modalState); + + const closeModal = () => { + setModal({ current: null, props: null }); + }; if (modal.props == null) return null; return ( - + ); }; diff --git a/frontend/src/components/TransactionForm/index.jsx b/frontend/src/components/TransactionUpdateForm/index.jsx similarity index 83% rename from frontend/src/components/TransactionForm/index.jsx rename to frontend/src/components/TransactionUpdateForm/index.jsx index 25c6894..c1ae123 100644 --- a/frontend/src/components/TransactionForm/index.jsx +++ b/frontend/src/components/TransactionUpdateForm/index.jsx @@ -1,17 +1,13 @@ import React from 'react'; -import { useRecoilState } from 'recoil'; -import { modalState } from '../../recoil/modal/atom'; import back from '../../../public/assets/back-button.svg'; import { Wrapper, Element, BackImg, Input, ButtonContainer, DecisionButton } from './style'; -const TransactionForm = () => { - const [modal, setModal] = useRecoilState(modalState); - +const TransactionUpdateForm = ({ modal, onUpdate, onDelete, onCancle }) => { return ( - @@ -66,11 +62,15 @@ const TransactionForm = () => { /> - 삭제 - 수정 + + 삭제 + + + 수정 + ); }; -export default TransactionForm; +export default TransactionUpdateForm; diff --git a/frontend/src/components/TransactionForm/style.js b/frontend/src/components/TransactionUpdateForm/style.js similarity index 96% rename from frontend/src/components/TransactionForm/style.js rename to frontend/src/components/TransactionUpdateForm/style.js index eea5561..a9f37a7 100644 --- a/frontend/src/components/TransactionForm/style.js +++ b/frontend/src/components/TransactionUpdateForm/style.js @@ -84,5 +84,5 @@ export const ButtonContainer = styled.div` export const DecisionButton = styled.button` font-weight: bold; font-size: ${({ theme }) => theme.fontSize.default}; - color: ${(props) => (props.type === 'submit' ? '#0990d6' : '#ff000f')}; + color: ${(props) => (props.type === 'update' ? '#0990d6' : '#ff000f')}; `; From a3ae07f3ff7b7abd88a8d21fc5929a560272f638 Mon Sep 17 00:00:00 2001 From: jhLim97 Date: Sun, 6 Feb 2022 01:42:18 +0900 Subject: [PATCH 14/23] =?UTF-8?q?feat:=20testid=20=EB=B0=8F=20form=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=EC=97=90=20aria-label=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/TransactionModal/index.jsx | 8 ++++---- frontend/src/components/TransactionUpdateForm/index.jsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/TransactionModal/index.jsx b/frontend/src/components/TransactionModal/index.jsx index 9b43072..126e08c 100644 --- a/frontend/src/components/TransactionModal/index.jsx +++ b/frontend/src/components/TransactionModal/index.jsx @@ -14,12 +14,12 @@ const TransactionModal = () => { if (modal.props == null) return null; return ( - - + + null} + onDelete={() => null} onCancle={closeModal} /> diff --git a/frontend/src/components/TransactionUpdateForm/index.jsx b/frontend/src/components/TransactionUpdateForm/index.jsx index c1ae123..cf3d27d 100644 --- a/frontend/src/components/TransactionUpdateForm/index.jsx +++ b/frontend/src/components/TransactionUpdateForm/index.jsx @@ -5,7 +5,7 @@ import { Wrapper, Element, BackImg, Input, ButtonContainer, DecisionButton } fro const TransactionUpdateForm = ({ modal, onUpdate, onDelete, onCancle }) => { return ( - + diff --git a/frontend/src/components/TransactionUpdateForm/test.js b/frontend/src/components/TransactionUpdateForm/test.js new file mode 100644 index 0000000..8a00bd6 --- /dev/null +++ b/frontend/src/components/TransactionUpdateForm/test.js @@ -0,0 +1,45 @@ +import React from 'react'; +import { render, screen } from '../../test-utils'; + +import TransactionUpdateForm from '.'; + +const TEST_DATA = { + category: '카페/간식', + color: '#D092E2', + content: '녹차 스무디', + method: '현금', + sign: '-', + cost: '5700', + date: '2022-01-28', +}; + +describe('TransactionUpateForm 테스트', () => { + it('기본 요소들이 표시된다.', () => { + render( + , + ); + + const backButton = screen.getByRole('button', { name: 'back' }); + const dateInput = screen.getByLabelText('날짜'); + const categoryInput = screen.getByLabelText('카테고리'); + const contentInput = screen.getByLabelText('내용'); + const methodInput = screen.getByLabelText('결제수단'); + const costInput = screen.getByLabelText('금액'); + const deleteButton = screen.getByRole('button', { name: '삭제' }); + const updateButton = screen.getByRole('button', { name: '수정' }); + + expect(backButton).toBeInTheDocument(); + expect(dateInput).toBeInTheDocument(); + expect(categoryInput).toBeInTheDocument(); + expect(contentInput).toBeInTheDocument(); + expect(methodInput).toBeInTheDocument(); + expect(costInput).toBeInTheDocument(); + expect(deleteButton).toBeInTheDocument(); + expect(updateButton).toBeInTheDocument(); + }); +}); From 8759b0b025104ea3c08090050d6e197de67d4c6d Mon Sep 17 00:00:00 2001 From: jhLim97 Date: Sun, 6 Feb 2022 02:49:04 +0900 Subject: [PATCH 19/23] =?UTF-8?q?test:=20=EA=B1=B0=EB=9E=98=EB=82=B4?= =?UTF-8?q?=EC=97=AD=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20form?= =?UTF-8?q?=EC=9D=98=20=EA=B2=BD=EC=9A=B0=20input=EC=97=90=20=EA=B0=92?= =?UTF-8?q?=EB=8F=84=20=EC=A0=81=EC=A0=88=ED=9E=88=20=EB=93=A4=EC=96=B4?= =?UTF-8?q?=EA=B0=94=EB=8A=94=EC=A7=80=EC=97=90=20=EB=8C=80=ED=95=9C=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=EC=BD=94=EB=93=9C=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/TransactionUpdateForm/test.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/TransactionUpdateForm/test.js b/frontend/src/components/TransactionUpdateForm/test.js index 8a00bd6..ed1923b 100644 --- a/frontend/src/components/TransactionUpdateForm/test.js +++ b/frontend/src/components/TransactionUpdateForm/test.js @@ -34,11 +34,11 @@ describe('TransactionUpateForm 테스트', () => { const updateButton = screen.getByRole('button', { name: '수정' }); expect(backButton).toBeInTheDocument(); - expect(dateInput).toBeInTheDocument(); - expect(categoryInput).toBeInTheDocument(); - expect(contentInput).toBeInTheDocument(); - expect(methodInput).toBeInTheDocument(); - expect(costInput).toBeInTheDocument(); + expect(dateInput.value).toEqual(TEST_DATA['date']); + expect(categoryInput.value).toEqual(TEST_DATA['category']); + expect(contentInput.value).toEqual(TEST_DATA['content']); + expect(methodInput.value).toEqual(TEST_DATA['method']); + expect(costInput.value).toEqual(TEST_DATA['cost']); expect(deleteButton).toBeInTheDocument(); expect(updateButton).toBeInTheDocument(); }); From a86f3007e605bb9c8fe9f126adef2b10f5a67162 Mon Sep 17 00:00:00 2001 From: jhLim97 Date: Sun, 6 Feb 2022 03:08:51 +0900 Subject: [PATCH 20/23] =?UTF-8?q?fix:=20=EB=B2=84=ED=8A=BC=20type=20?= =?UTF-8?q?=EC=A7=80=EC=A0=95=20=EB=B0=8F=20props=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/TransactionUpdateForm/index.jsx | 6 +++--- frontend/src/components/TransactionUpdateForm/style.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/TransactionUpdateForm/index.jsx b/frontend/src/components/TransactionUpdateForm/index.jsx index 8a3dd84..05fb268 100644 --- a/frontend/src/components/TransactionUpdateForm/index.jsx +++ b/frontend/src/components/TransactionUpdateForm/index.jsx @@ -7,7 +7,7 @@ const TransactionUpdateForm = ({ transaction, onUpdate, onDelete, onCancle }) => return ( - @@ -62,10 +62,10 @@ const TransactionUpdateForm = ({ transaction, onUpdate, onDelete, onCancle }) => /> - + 삭제 - + 수정 diff --git a/frontend/src/components/TransactionUpdateForm/style.js b/frontend/src/components/TransactionUpdateForm/style.js index a9f37a7..4bf5047 100644 --- a/frontend/src/components/TransactionUpdateForm/style.js +++ b/frontend/src/components/TransactionUpdateForm/style.js @@ -84,5 +84,5 @@ export const ButtonContainer = styled.div` export const DecisionButton = styled.button` font-weight: bold; font-size: ${({ theme }) => theme.fontSize.default}; - color: ${(props) => (props.type === 'update' ? '#0990d6' : '#ff000f')}; + color: ${(props) => (props.action === 'update' ? '#0990d6' : '#ff000f')}; `; From 36c0a9cc75dd62cd18cb57caf7b68e2cb1f749aa Mon Sep 17 00:00:00 2001 From: jhLim97 Date: Sun, 6 Feb 2022 03:09:31 +0900 Subject: [PATCH 21/23] =?UTF-8?q?test:=20=EB=92=A4=EB=A1=9C=EA=B0=80?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=EC=9D=84=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=ED=95=98=EB=8A=94=20=EB=A1=9C=EC=A7=81=EC=97=90=20=EB=8C=80?= =?UTF-8?q?=ED=95=9C=20=ED=85=8C=EC=8A=A4=ED=8A=B8=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/TransactionUpdateForm/test.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/TransactionUpdateForm/test.js b/frontend/src/components/TransactionUpdateForm/test.js index ed1923b..b7922a7 100644 --- a/frontend/src/components/TransactionUpdateForm/test.js +++ b/frontend/src/components/TransactionUpdateForm/test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '../../test-utils'; +import { render, screen, fireEvent } from '../../test-utils'; import TransactionUpdateForm from '.'; @@ -42,4 +42,20 @@ describe('TransactionUpateForm 테스트', () => { expect(deleteButton).toBeInTheDocument(); expect(updateButton).toBeInTheDocument(); }); + + it('뒤로가기 버튼을 누르면 onCancle 함수가 호출된다.', () => { + const onCancle = jest.fn(); + render( + , + ); + + const backButton = screen.getByRole('button', { name: 'back' }); + fireEvent.click(backButton); + expect(onCancle).toHaveBeenCalled(); + }); }); From ef628bc5e1adfdc596c262ee13b4c9f07a7170f8 Mon Sep 17 00:00:00 2001 From: jhLim97 Date: Sun, 6 Feb 2022 03:17:23 +0900 Subject: [PATCH 22/23] =?UTF-8?q?test:=20=EC=82=AD=EC=A0=9C=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=EC=9D=84=20=EB=88=84=EB=A5=B4=EB=8A=94=20=EA=B2=BD?= =?UTF-8?q?=EC=9A=B0=20=EB=A1=9C=EC=A7=81=EC=97=90=20=EB=8C=80=ED=95=9C=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=EC=BD=94=EB=93=9C=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TransactionUpdateForm/test.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/frontend/src/components/TransactionUpdateForm/test.js b/frontend/src/components/TransactionUpdateForm/test.js index b7922a7..5ebdd44 100644 --- a/frontend/src/components/TransactionUpdateForm/test.js +++ b/frontend/src/components/TransactionUpdateForm/test.js @@ -58,4 +58,20 @@ describe('TransactionUpateForm 테스트', () => { fireEvent.click(backButton); expect(onCancle).toHaveBeenCalled(); }); + + it('삭제 버튼을 누르면 onDelete 함수가 호출된다.', () => { + const onDelete = jest.fn(); + render( + , + ); + + const deleteButton = screen.getByRole('button', { name: '삭제' }); + fireEvent.click(deleteButton); + expect(onDelete).toHaveBeenCalled(); + }); }); From ae169da84207265d54b75b16c8178df1c5fb4ed5 Mon Sep 17 00:00:00 2001 From: jhLim97 Date: Sun, 6 Feb 2022 03:54:26 +0900 Subject: [PATCH 23/23] =?UTF-8?q?test:=20=EC=88=98=EC=A0=95=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=EC=9D=84=20=EB=88=84=EB=A5=B4=EB=8A=94=20=EA=B2=BD?= =?UTF-8?q?=EC=9A=B0=20form=20=EB=8D=B0=EC=9D=B4=ED=84=B0=EC=99=80=20?= =?UTF-8?q?=ED=95=A8=EA=BB=98=20=EC=88=98=ED=96=89=EB=90=98=EB=8A=94=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=EC=97=90=20=EB=8C=80=ED=95=9C=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=EC=BD=94=EB=93=9C=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TransactionUpdateForm/index.jsx | 24 ++++++++++++++++--- .../components/TransactionUpdateForm/test.js | 18 ++++++++++++-- 2 files changed, 37 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/TransactionUpdateForm/index.jsx b/frontend/src/components/TransactionUpdateForm/index.jsx index 05fb268..1b78411 100644 --- a/frontend/src/components/TransactionUpdateForm/index.jsx +++ b/frontend/src/components/TransactionUpdateForm/index.jsx @@ -4,8 +4,26 @@ import back from '../../../public/assets/back-button.svg'; import { Wrapper, Element, BackImg, Input, ButtonContainer, DecisionButton } from './style'; const TransactionUpdateForm = ({ transaction, onUpdate, onDelete, onCancle }) => { + const shapedForm = (elements) => { + const data = {}; + Array.from(elements).forEach((element) => { + if (element.value) { + data[element.id] = element.value; + } + }); + return data; + }; + + const handleUpdateSubmit = (e) => { + e.preventDefault(); + + const form = e.target; + const data = shapedForm(form.elements); + onUpdate(data); + }; + return ( - +