Merge pull request #289 from boostcamp-2020/dev

12/14 오전 배포
boostcamp-2020 · Dec 14, 2020 · af54c4d · af54c4d
2 parents 6348f0e + 444bc25
commit af54c4d
Show file tree

Hide file tree

Showing 39 changed files with 348 additions and 159 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -7,7 +7,7 @@
     "@testing-library/react": "^11.2.0",
     "@testing-library/user-event": "^12.2.2",
     "@types/jest": "^26.0.15",
-    "@types/node": "^12.19.5",
+    "@types/node": "^12.19.9",
     "@types/react": "^16.9.56",
     "@types/react-dom": "^16.9.9",
     "@types/react-router-dom": "^5.1.6",

diff --git a/client/src/__dummy-data__/.keep b/client/src/__dummy-data__/.keep
diff --git a/...c/components/accountbook-selection-page/accontbook-setting/AccountbookSetting.stories.tsx b/...c/components/accountbook-selection-page/accontbook-setting/AccountbookSetting.stories.tsx
@@ -20,7 +20,7 @@ export const WhiteItem = (): JSX.Element => {
   const tempColor1 = '#000000';
   return (
     <TempDiv bgColor={tempColor1}>
-      <AccountbookSetting id={1} bgColor={tempColor1} />
+      <AccountbookSetting accountbookId={1} bgColor={tempColor1} />
     </TempDiv>
   );
 };
@@ -29,7 +29,7 @@ export const BlackItem = (): JSX.Element => {
   const tempColor2 = '#E0F8EC';
   return (
     <TempDiv bgColor={tempColor2}>
-      <AccountbookSetting id={2} bgColor={tempColor2} />
+      <AccountbookSetting accountbookId={2} bgColor={tempColor2} />
     </TempDiv>
   );
 };
diff --git a/client/src/components/accountbook-selection-page/accontbook-setting/AccountbookSetting.tsx b/client/src/components/accountbook-selection-page/accontbook-setting/AccountbookSetting.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import { getTextColor } from '../../../utils/color';
-import { BLUE, NAVER_GREEN } from '../../../constants/color';
+import { useHistory } from 'react-router-dom';
+import { BLUE } from '../../../constants/color';
 
 const Wrapper = styled.div<{ itemColor: string; bgColor: string }>`
   width: 1rem;
@@ -10,11 +11,6 @@ const Wrapper = styled.div<{ itemColor: string; bgColor: string }>`
   .setting {
     fill: ${({ itemColor }) => itemColor};
   }
-  /* &:hover .setting {
-    fill: ${({ bgColor }) => {
-    return bgColor === BLUE ? NAVER_GREEN : BLUE;
-  }};
-  } */
   &:hover .setting {
     fill: ${BLUE};
     stroke: ${({ bgColor, itemColor }) => {
@@ -26,15 +22,24 @@ const Wrapper = styled.div<{ itemColor: string; bgColor: string }>`
   }
 `;
 
-interface SettingProps {
-  id: number;
+interface props {
+  accountbookId: number | undefined;
   bgColor: string;
 }
 
-const AccountbookSetting = ({ id, bgColor }: SettingProps): JSX.Element => {
+const AccountbookSetting = ({ accountbookId, bgColor }: props): JSX.Element => {
+  const history = useHistory();
+
   const itemColor = getTextColor(bgColor);
   return (
-    <Wrapper itemColor={itemColor} bgColor={bgColor}>
+    <Wrapper
+      itemColor={itemColor}
+      bgColor={bgColor}
+      onClick={(e) => {
+        e.stopPropagation();
+        history.push(`/accountbooks/${accountbookId}/settings/accountbook`);
+      }}
+    >
       <svg viewBox="0 0 24 24" className="setting">
         <path d="m22.683 9.394-1.88-.239c-.155-.477-.346-.937-.569-1.374l1.161-1.495c.47-.605.415-1.459-.122-1.979l-1.575-1.575c-.525-.542-1.379-.596-1.985-.127l-1.493 1.161c-.437-.223-.897-.414-1.375-.569l-.239-1.877c-.09-.753-.729-1.32-1.486-1.32h-2.24c-.757 0-1.396.567-1.486 1.317l-.239 1.88c-.478.155-.938.345-1.375.569l-1.494-1.161c-.604-.469-1.458-.415-1.979.122l-1.575 1.574c-.542.526-.597 1.38-.127 1.986l1.161 1.494c-.224.437-.414.897-.569 1.374l-1.877.239c-.753.09-1.32.729-1.32 1.486v2.24c0 .757.567 1.396 1.317 1.486l1.88.239c.155.477.346.937.569 1.374l-1.161 1.495c-.47.605-.415 1.459.122 1.979l1.575 1.575c.526.541 1.379.595 1.985.126l1.494-1.161c.437.224.897.415 1.374.569l.239 1.876c.09.755.729 1.322 1.486 1.322h2.24c.757 0 1.396-.567 1.486-1.317l.239-1.88c.477-.155.937-.346 1.374-.569l1.495 1.161c.605.47 1.459.415 1.979-.122l1.575-1.575c.542-.526.597-1.379.127-1.985l-1.161-1.494c.224-.437.415-.897.569-1.374l1.876-.239c.753-.09 1.32-.729 1.32-1.486v-2.24c.001-.757-.566-1.396-1.316-1.486zm-10.683 7.606c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z" />
       </svg>

diff --git a/client/src/components/accountbook-selection-page/accountbook-card/AccountbookCard.tsx b/client/src/components/accountbook-selection-page/accountbook-card/AccountbookCard.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import AccountbookSetting from '../accontbook-setting/AccountbookSetting';
 import AccountbookElimination from '../accountbook-elimination/AccountbookElimination';
+import { useHistory } from 'react-router-dom';
 import { getTextColor } from '../../../utils/color';
 import useStore from '../../../hook/use-store/useStore';
 import { Accountbook } from '../../../types/accountbook';
@@ -19,6 +20,7 @@ const AccountbookWrapper = styled.div<{
   background-color: ${({ bgColor }) => bgColor};
   color: ${({ textColor }) => textColor};
   padding: 15px 15px 20px 15px;
+  margin-bottom: 15px;
   display: flex;
   cursor: pointer;
   &:hover {
@@ -50,8 +52,10 @@ const AccountbookCard = (accountbook: Accountbook): JSX.Element => {
     deleteAccountbookByUserStore,
     giveAdminStore,
   } = useStore().rootStore.modalStore;
+  const history = useHistory();
 
-  const onClickDelete = () => {
+  const onClickDelete = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    e.stopPropagation();
     if (userStore.isAdmin(accountbook.accountbookId as number)) {
       deleteAccountbookByAdminStore.setShow(true);
       giveAdminStore.selectedAccountbookId = accountbook.accountbookId as number;
@@ -63,13 +67,17 @@ const AccountbookCard = (accountbook: Accountbook): JSX.Element => {
 
   const textColor = getTextColor(accountbook.color);
   return (
-    <AccountbookWrapper bgColor={accountbook.color} textColor={textColor}>
+    <AccountbookWrapper
+      bgColor={accountbook.color}
+      textColor={textColor}
+      onClick={() => history.push(`/accountbooks/${accountbook.accountbookId}`)}
+    >
       <HeaderWrapper>
         <ElementWrapper>
-          <AccountbookSetting id={accountbook.id} bgColor={accountbook.color} />
+          <AccountbookSetting accountbookId={accountbook.accountbookId} bgColor={accountbook.color} />
         </ElementWrapper>
         <ElementWrapper>
-          <AccountbookElimination id={accountbook.id} bgColor={accountbook.color} onClick={onClickDelete} />
+          <AccountbookElimination bgColor={accountbook.color} onClick={onClickDelete} />
         </ElementWrapper>
       </HeaderWrapper>
       <TitleWrapper>{accountbook.title}</TitleWrapper>

diff --git a/...nts/accountbook-selection-page/accountbook-elimination/AccountbookElimination.stories.tsx b/...nts/accountbook-selection-page/accountbook-elimination/AccountbookElimination.stories.tsx
@@ -20,7 +20,7 @@ export const WhiteItem = (): JSX.Element => {
   const tempColor1 = '#000000';
   return (
     <TempDiv bgColor={tempColor1}>
-      <AccountbookElimination id={1} bgColor={tempColor1} />
+      <AccountbookElimination bgColor={tempColor1} />
     </TempDiv>
   );
 };
@@ -29,7 +29,7 @@ export const BlackItem = (): JSX.Element => {
   const tempColor2 = '#E0F8EC';
   return (
     <TempDiv bgColor={tempColor2}>
-      <AccountbookElimination id={2} bgColor={tempColor2} />
+      <AccountbookElimination bgColor={tempColor2} />
     </TempDiv>
   );
 };
diff --git a/.../components/accountbook-selection-page/accountbook-elimination/AccountbookElimination.tsx b/.../components/accountbook-selection-page/accountbook-elimination/AccountbookElimination.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { getTextColor } from '../../../utils/color';
-import { RED, NAVER_GREEN } from '../../../constants/color';
+import { RED } from '../../../constants/color';
 
 const Wrapper = styled.div<{ itemColor: string; bgColor: string }>`
   width: 1rem;
@@ -10,11 +10,7 @@ const Wrapper = styled.div<{ itemColor: string; bgColor: string }>`
   .elimination {
     fill: ${({ itemColor }) => itemColor};
   }
-  /* &:hover .elimination {
-    fill: ${({ bgColor }) => {
-    return bgColor === RED ? NAVER_GREEN : RED;
-  }};
-  } */
+
   &:hover .elimination {
     fill: ${RED};
     stroke: ${({ bgColor, itemColor }) => {
@@ -27,12 +23,11 @@ const Wrapper = styled.div<{ itemColor: string; bgColor: string }>`
 `;
 
 interface SettingProps {
-  id: number;
   bgColor: string;
-  onClick?: () => void;
+  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
 
-const AccountbookElimination = ({ id, bgColor, onClick }: SettingProps): JSX.Element => {
+const AccountbookElimination = ({ bgColor, onClick }: SettingProps): JSX.Element => {
   const itemColor = getTextColor(bgColor);
   return (
     <Wrapper itemColor={itemColor} bgColor={bgColor} onClick={onClick}>

diff --git a/client/src/components/accountbook-selection-page/add-accountbook-card/AddAccountbookCard.tsx b/client/src/components/accountbook-selection-page/add-accountbook-card/AddAccountbookCard.tsx
@@ -11,6 +11,7 @@ const DivWrapper = styled.div`
   justify-content: center;
   background-color: ${GRAY};
   cursor: pointer;
+  border-radius: 10px;
   &:hover {
     box-shadow: 2px 3px 7px gray;
   }

diff --git a/client/src/components/common/modals/form-modal-header/FormModalHeader.tsx b/client/src/components/common/modals/form-modal-header/FormModalHeader.tsx
@@ -80,7 +80,7 @@ const FormModalHeader: React.FC<IFormModalHeaderProps> = ({
       </CloseModalButtonWrapper>
       <ModalName>{modalName}</ModalName>
       <Right />
-      {sms && <SMSIcon />}
+      {sms && <SMSIcon onClick={clickSMS} />}
       {redName && <RedButton onClick={clickRed}>{redName}</RedButton>}
       {blueName && <BlueButton onClick={clickBlue}>{blueName}</BlueButton>}
       {disabledName && <DisabledButton>{disabledName}</DisabledButton>}

diff --git a/client/src/components/common/modals/form-modal-header/SMSIcon.tsx b/client/src/components/common/modals/form-modal-header/SMSIcon.tsx
@@ -32,7 +32,11 @@ const Description = styled.div`
   margin-right: 5px;
 `;
 
-const SMSIcon = (): JSX.Element => {
+interface ISMSIcon {
+  onClick?: () => void;
+}
+
+const SMSIcon = ({ onClick }: ISMSIcon): JSX.Element => {
   const [showDescription, setShowDescription] = useState(false);
 
   return (
@@ -44,7 +48,7 @@ const SMSIcon = (): JSX.Element => {
           <path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" />
         </svg>
       </QuestionWrapper>
-      <SMSWrapper>
+      <SMSWrapper onClick={onClick}>
         <svg viewBox="0 0 24 24">
           <path d="M0 0h24v24H0z" fill="none" />
           <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z" />

diff --git a/client/src/components/common/modals/form-modal-transaction/FormModalCreateTransaction.tsx b/client/src/components/common/modals/form-modal-transaction/FormModalCreateTransaction.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import TransactionInputList from './TransactionInputList';
 import UseTransactionForm from '../../../../hook/use-transaction-form/useTransactionForm';
 import FormModalWrapper from '../form-modal-template/FormModalWrapper';
@@ -8,9 +8,11 @@ import useStore from '../../../../hook/use-store/useStore';
 import { convertToIncome, convertToExpenditure } from '../formUtils';
 import { observer } from 'mobx-react';
 import useGetParam from '../../../../hook/use-get-param/useGetParam';
+import MMSInput from './MMSInput';
 
 const FormModalTransaction: React.FC = () => {
   const { rootStore } = useStore();
+  const [mmsMode, setMMSMode] = useState(false);
   const id = useGetParam();
   const toggle = rootStore.modalStore.createTransactionFormStore;
 
@@ -72,9 +74,12 @@ const FormModalTransaction: React.FC = () => {
           blueName={'완료'}
           closeModal={modalToggle}
           clickBlue={inputs.classify ? incomeClick : expenditureClick}
+          clickSMS={() => {
+            setMMSMode(!mmsMode);
+          }}
           sms={true}
         />
-        <TransactionInputList inputs={inputListInputs} changes={changes} />
+        {!mmsMode ? <TransactionInputList inputs={inputListInputs} changes={changes} /> : <MMSInput />}
       </FormModalWrapper>
     </ModalBackground>
   );

diff --git a/client/src/components/common/modals/form-modal-transaction/MMSInput.tsx b/client/src/components/common/modals/form-modal-transaction/MMSInput.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+import { InputListWrapper, InputWrapper } from './TransactionInputList';
+
+const SmallArea = styled.div`
+  width: 70%;
+  margin: 10px auto;
+`;
+
+const TextBox = styled.textarea`
+  width: 100%;
+  height: 200px;
+  margin: 10px auto;
+  resize: none;
+  border: 1px solid lightgray;
+`;
+
+const ButtonLayout = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 5px 0px;
+  justify-content: space-between;
+`;
+const MMSInput: React.FC = () => {
+  return (
+    <InputListWrapper>
+      <InputWrapper>
+        <SmallArea>
+          <TextBox placeholder="메시지를 입력하세요" />
+          <ButtonLayout>
+            <div>버튼1</div>
+            <div>버튼2</div>
+          </ButtonLayout>
+        </SmallArea>
+      </InputWrapper>
+    </InputListWrapper>
+  );
+};
+
+export default MMSInput;
diff --git a/client/src/components/common/modals/form-modal-transaction/TransactionInputList.tsx b/client/src/components/common/modals/form-modal-transaction/TransactionInputList.tsx
@@ -38,14 +38,14 @@ interface ITransactionInputList {
   };
 }
 
-const InputListWrapper = styled.div`
+export const InputListWrapper = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
 `;
 
-const InputWrapper = styled.div`
+export const InputWrapper = styled.div`
   width: 70%;
   padding: 0%;
   margin: 0%;

diff --git a/client/src/hook/use-transaction-form/useTransactionForm.tsx b/client/src/hook/use-transaction-form/useTransactionForm.tsx
@@ -67,7 +67,9 @@ const defaultState: ITransactionForm = {
   memo: '',
 };
 
-const UseTransactionForm = (initial: ITransactionForm = defaultState): [ITransactionForm, ITransactionFormChange] => {
+const UseTransactionForm = (
+  initial: ITransactionForm = defaultState,
+): [ITransactionForm, ITransactionFormChange, React.Dispatch<FormChangeAction>] => {
   const [state, dispatch] = useReducer(formReducer, initial);
   const changes: ITransactionFormChange = {
     classify: {
@@ -134,7 +136,7 @@ const UseTransactionForm = (initial: ITransactionForm = defaultState): [ITransac
       });
     },
   };
-  return [state, changes];
+  return [state, changes, dispatch];
 };
 
 export default UseTransactionForm;
diff --git a/client/src/pages/AccountbookDeleteTestPage.tsx b/client/src/pages/AccountbookDeleteTestPage.tsx