Merge pull request #307 from boostcamp-2020/dev

12/14 배포
boostcamp-2020 · Dec 14, 2020 · ba2924a · ba2924a
2 parents af54c4d + 4d857df
commit ba2924a
Show file tree

Hide file tree

Showing 41 changed files with 330 additions and 95 deletions.
diff --git a/...c/__dummy-data__/store/formFilterStore.ts → ...c/__dummy-data__/store/filterFormStore.ts b/...c/__dummy-data__/store/formFilterStore.ts → ...c/__dummy-data__/store/filterFormStore.ts
diff --git a/client/src/__tests__/store/pieGraphStore.test.ts b/client/src/__tests__/store/pieGraphStore.test.ts
@@ -2,7 +2,6 @@ import { waitFor } from '@testing-library/react';
 import datePeriod from '../../constants/datePeriod';
 import PieGraphPageStore from '../../store/PieGraphPageStore';
 import RootStore from '../../store/RootStore';
-import { dateOptions } from '../../__dummy-data__/store/formFilterStore';
 
 describe('PieGraphStore Test', () => {
   let container: PieGraphPageStore;

diff --git a/client/src/components/accountbook-selection-page/accountbook-card/AccountbookCard.tsx b/client/src/components/accountbook-selection-page/accountbook-card/AccountbookCard.tsx
@@ -40,7 +40,7 @@ const ElementWrapper = styled.div`
 `;
 
 const TitleWrapper = styled.div`
-  font-size: 1.5rem;
+  font-size: 1.4rem;
   font-weight: 500;
   padding-bottom: 10px;
 `;

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
@@ -17,9 +17,13 @@ const DivWrapper = styled.div`
   }
 `;
 
-const AddAccountbookCard: React.FC = () => {
+interface Props {
+  onClick?: () => void;
+}
+
+const AddAccountbookCard: React.FC<Props> = ({ onClick }: Props) => {
   return (
-    <DivWrapper>
+    <DivWrapper onClick={onClick}>
       <PlusInCircle sideLength={'2rem'} />
     </DivWrapper>
   );

diff --git a/client/src/components/accountbook-social-page/search-bar/SearchBar.tsx b/client/src/components/accountbook-social-page/search-bar/SearchBar.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { LIGHT_BLUE, GRAY } from '../../../constants/color';
+import { GRAY } from '../../../constants/color';
 import SearchIcon from './SearchIcon';
 import useStore from '../../../hook/use-store/useStore';
 
@@ -19,6 +19,7 @@ const InputText = styled.input.attrs(() => ({
   border-radius: 5px 0px 0px 5px;
   border: 1px solid lightgray;
   outline: none;
+  font-family: 'Spoqa Han Sans';
 `;
 
 const SearchButton = styled.div`

diff --git a/client/src/components/accountbook-social-page/search-bar/SearchContainer.tsx b/client/src/components/accountbook-social-page/search-bar/SearchContainer.tsx
@@ -5,7 +5,6 @@ import useStore from '../../../hook/use-store/useStore';
 import { observer } from 'mobx-react';
 import UserItem from '../user-item/UserItem';
 import socialPage from '../../../constants/socialPage';
-import { SearchedUser } from '../../../types/social';
 import { RED } from '../../../constants/color';
 
 const Wrapper = styled.div`

diff --git a/client/src/components/common/header-navigation/HeaderNavigation.tsx b/client/src/components/common/header-navigation/HeaderNavigation.tsx
@@ -14,6 +14,7 @@ const NavigationItem = styled.div<{ currentPage: string }>`
   width: 24%;
   padding-top: 4px;
   text-align: center;
+  font-family: 'Spoqa Han Sans';
   &:nth-child(1) a {
     color: ${({ currentPage }) => (currentPage == 'transaction' ? BLUE : 'black')};
     font-weight: ${({ currentPage }) => (currentPage == 'transaction' ? 'bold' : 'normal')};
@@ -46,9 +47,6 @@ const NavigationItem = styled.div<{ currentPage: string }>`
   }
 `;
 
-const sampleProfileImage =
-  'https://media.istockphoto.com/vectors/profile-icon-man-icon-with-circle-shape-on-gray-background-vector-id1033334196?k=6&m=1033334196&s=170667a&w=0&h=wijawNlDG-1XWl-uXkYPKfJCv4mlNHb_QkqgtMwNSHY=';
-
 interface HeaderNavigationProps {
   currentPage: string;
 }
@@ -71,7 +69,7 @@ const HeaderNavigation = ({ currentPage }: HeaderNavigationProps): JSX.Element =
         </Link>
       </NavigationItem>
       <NavigationItem currentPage={''}>
-        <ProfileDropdown src={sampleProfileImage} />
+        <ProfileDropdown />
       </NavigationItem>
     </NavigationWrapper>
   );

diff --git a/client/src/components/common/inputs/input-datetime/InputDateTime.tsx b/client/src/components/common/inputs/input-datetime/InputDateTime.tsx
@@ -9,6 +9,7 @@ const InputDateTimeWrapper = styled.input.attrs({
   font-size: 1rem;
   border-radius: 5px;
   border: 1px solid lightgray;
+  font-family: 'Spoqa Han Sans';
 `;
 
 interface InputDateTimeProps {

diff --git a/client/src/components/common/inputs/input-text/InputText.tsx b/client/src/components/common/inputs/input-text/InputText.tsx
@@ -16,6 +16,7 @@ const InputTextContainer = styled.input.attrs((props) => ({
   font-size: 1rem;
   border-radius: 5px;
   border: 1px solid lightgray;
+  font-family: 'Spoqa Han Sans';
   &:focus {
     outline: none;
     border: 0.5px solid ${LIGHT_BLUE};

diff --git a/client/src/components/common/inputs/input-with-next-button/InputWithNextButton.tsx b/client/src/components/common/inputs/input-with-next-button/InputWithNextButton.tsx
@@ -31,6 +31,7 @@ const SmallInput = styled.input`
   background-color: white;
   border: 1px solid lightgray;
   border-radius: 5px;
+  font-family: 'Spoqa Han Sans';
 `;
 
 interface IInputWithNextButton {

diff --git a/client/src/components/common/menu-navigation/filter-button/FilterButton.tsx b/client/src/components/common/menu-navigation/filter-button/FilterButton.tsx
@@ -18,7 +18,7 @@ const FilterButton: React.FC<Props> = ({ width, height }: Props) => {
   const { modalStore } = useStore().rootStore;
 
   const onClickFilterButton = () => {
-    modalStore.formFilterStore.setShow(true);
+    modalStore.filterFormStore.setShow(true);
   };
 
   return (

diff --git a/client/src/components/common/modals/form-modal-account/FormModalUpdateAccount.tsx b/client/src/components/common/modals/form-modal-account/FormModalUpdateAccount.tsx
@@ -24,6 +24,7 @@ const FormModalUpdateAccount: React.FC = () => {
   const id = useGetParam();
   const updateAccountFormStore = rootStore.modalStore.updateAccountFormStore;
   const { show } = updateAccountFormStore;
+  const [colorCheck, setColorCheck] = useState(false);
   const [name, setName] = useState<string>((updateAccountFormStore.account as Account).name);
   const [inputColor, setInputColor] = useState<string>((updateAccountFormStore.account as Account).color);
   const { check, noChange } = rootStore.modalStore.updateAccountFormStore;
@@ -50,6 +51,11 @@ const FormModalUpdateAccount: React.FC = () => {
 
   const onChange = (color: { hex: string }): void => {
     setInputColor(color.hex);
+    if (inputColor.toLowerCase() === (updateAccountFormStore.account as Account).color.toLowerCase()) {
+      setColorCheck(false);
+    } else {
+      setColorCheck(true);
+    }
   };
 
   const modalToggle = (): void => {
@@ -85,8 +91,8 @@ const FormModalUpdateAccount: React.FC = () => {
     return (
       <ModalBackground show={show} closeModal={modalToggle}>
         <FormModalWrapper>
-          {check ? (
-            name && !noChange ? (
+          {check || noChange ? (
+            (name && !noChange) || (name && colorCheck) ? (
               <FormModalHeader
                 modalName={formModal.UPDATE_ACCOUNT_MODAL_NAME}
                 blueName={'완료'}

diff --git a/client/src/components/common/modals/form-modal-accountbook/FormModalCreateAccountbook.tsx b/client/src/components/common/modals/form-modal-accountbook/FormModalCreateAccountbook.tsx
@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import ModalBackground from '../modal-background/ModalBackground';
+import { MODAL_WHITE } from '../../../../constants/color';
+import useStore from '../../../../hook/use-store/useStore';
+import FormModalHeader from '../form-modal-header/FormModalHeader';
+import Preview from '../../preview/Preview';
+import InputText from '../../inputs/input-text/InputText';
+
+const FormModalWrapper = styled.div`
+  background-color: ${MODAL_WHITE};
+  width: 55%;
+  padding: 20px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  min-height: 400px;
+`;
+
+const ModalBody = styled.div`
+  margin: 0 auto;
+  width: 80%;
+  margin-bottom: 20px;
+`;
+
+const PreviewWrapper = styled.div`
+  margin-top: 1rem;
+  width: 90%;
+`;
+
+const Label = styled.div`
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 10px;
+`;
+
+const ContentWrapper = styled.div`
+  margin-top: 1rem;
+  width: 80%;
+`;
+
+const FormModalCreateAccountbook = (): JSX.Element => {
+  const { createAccountbookFormStore } = useStore().rootStore.modalStore;
+  const { accountbookStore } = useStore().rootStore;
+  const [inputColor, setInputColor] = useState<string>('#000000');
+  const [title, setTitle] = useState<string>('');
+  const [description, setDescription] = useState<string>('');
+
+  const onChangeColor = (color: { hex: string }): void => {
+    setInputColor(color.hex);
+  };
+
+  const onChangeTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setTitle(e.target.value);
+  };
+
+  const onChangeDescription = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setDescription(e.target.value);
+  };
+
+  const onClickCreate = () => {
+    if (!title) {
+      alert('가계부 이름을 입력해주세요.');
+      return;
+    }
+
+    accountbookStore.createAccountbook({ title, color: inputColor, description });
+    createAccountbookFormStore.setShow(false);
+  };
+
+  return (
+    <ModalBackground show={true} closeModal={() => createAccountbookFormStore.setShow(false)}>
+      <FormModalWrapper>
+        <FormModalHeader
+          modalName={'가계부 생성'}
+          blueName={'생성'}
+          clickBlue={onClickCreate}
+          closeModal={() => createAccountbookFormStore.setShow(false)}
+        />
+        <ModalBody>
+          <PreviewWrapper>
+            <Preview title={title} description={description} color={inputColor} onChange={onChangeColor} />
+          </PreviewWrapper>
+          <ContentWrapper>
+            <Label>가계부 별칭</Label>
+            <InputText
+              maxLength={15}
+              placeholder={'최대 15자의 가계부 별칭을 작성해주세요.'}
+              value={title}
+              onChange={onChangeTitle}
+            />
+          </ContentWrapper>
+          <ContentWrapper>
+            <Label>가계부 설명</Label>
+            <InputText
+              maxLength={30}
+              placeholder={'가계부에 대한 설명을 기재해주세요.'}
+              value={description}
+              onChange={onChangeDescription}
+            />
+          </ContentWrapper>
+        </ModalBody>
+      </FormModalWrapper>
+    </ModalBackground>
+  );
+};
+
+export default FormModalCreateAccountbook;
diff --git a/client/src/components/common/modals/form-modal-category/FormModalUpdateCategory.tsx b/client/src/components/common/modals/form-modal-category/FormModalUpdateCategory.tsx
@@ -25,6 +25,7 @@ const FormModalUpdateCategory: React.FC = () => {
   const updateCategoryFormStore = rootStore.modalStore.updateCategoryFormStore;
   const { show } = updateCategoryFormStore;
   const { check, noChange } = rootStore.modalStore.updateCategoryFormStore;
+  const [colorCheck, setColorCheck] = useState(false);
 
   const [name, setName] = useState<string>(
     updateCategoryFormStore.incomeFlag
@@ -61,7 +62,9 @@ const FormModalUpdateCategory: React.FC = () => {
       } else {
         updateCategoryFormStore.setNoChangeFalse();
       }
-    } else {
+    }
+
+    if (!updateCategoryFormStore.incomeFlag) {
       if (rootStore.categoryStore.expenditureCategoryNames.includes(e.target.value)) {
         updateCategoryFormStore.setCheckFalse();
       } else {
@@ -77,6 +80,21 @@ const FormModalUpdateCategory: React.FC = () => {
 
   const onChange = (color: { hex: string }): void => {
     setInputColor(color.hex);
+    if (updateCategoryFormStore.incomeFlag) {
+      if (inputColor.toLowerCase() === (updateCategoryFormStore.incomeCategory as Category).color.toLowerCase()) {
+        setColorCheck(false);
+      } else {
+        setColorCheck(true);
+      }
+    }
+
+    if (!updateCategoryFormStore.incomeFlag) {
+      if (inputColor.toLowerCase() === (updateCategoryFormStore.expenditureCategory as Category).color.toLowerCase()) {
+        setColorCheck(false);
+      } else {
+        setColorCheck(true);
+      }
+    }
   };
 
   const modalToggle = (): void => {
@@ -127,8 +145,8 @@ const FormModalUpdateCategory: React.FC = () => {
   return (
     <ModalBackground show={show} closeModal={modalToggle}>
       <FormModalWrapper>
-        {check ? (
-          name && !noChange ? (
+        {check || noChange ? (
+          (name && !noChange) || (name && colorCheck) ? (
             <FormModalHeader
               modalName={
                 updateCategoryFormStore.incomeFlag

diff --git a/client/src/components/common/modals/form-modal-filter/FormFilter.tsx b/client/src/components/common/modals/form-modal-filter/FormFilter.tsx
@@ -34,47 +34,47 @@ const DateRange = styled.div`
 `;
 
 const FormModalFilter: React.FC = () => {
-  const { formFilterStore } = useStore().rootStore.modalStore;
+  const { filterFormStore } = useStore().rootStore.modalStore;
 
   return useObserver(() => (
     <ItemWrapper>
       <InputWrapper>
         <InputLabel>기간</InputLabel>
         <SingleInputDropdown
           placeholder={'기간'}
-          items={formFilterStore.dateOptions}
-          onChange={formFilterStore.onChangeDate}
-          defaultSelectValue={formFilterStore.selectedDate}
+          items={filterFormStore.dateOptions}
+          onChange={filterFormStore.onChangeDate}
+          defaultSelectValue={filterFormStore.selectedDate}
         />
         <DateRange>
-          <p>{formFilterStore.startDate.text}</p>
-          <p>{formFilterStore.endDate.text}</p>
+          <p>{filterFormStore.startDate.text}</p>
+          <p>{filterFormStore.endDate.text}</p>
         </DateRange>
       </InputWrapper>
       <InputWrapper>
         <InputLabel>결제수단</InputLabel>
         <SelectPaymentMethod
           placeholder={'결제수단'}
-          items={formFilterStore.accountOptions}
-          onChange={formFilterStore.onChangeAcoount}
-          defaultValue={formFilterStore.selectedAccounts}
+          items={filterFormStore.accountOptions}
+          onChange={filterFormStore.onChangeAcoount}
+          defaultValue={filterFormStore.selectedAccounts}
         />
       </InputWrapper>
       <InputWrapper>
         <InputLabel>카테고리</InputLabel>
         <MultiInputDropdownWithCheckBox
           placeholder={'지출'}
           checkBoxName={'지출'}
-          items={formFilterStore.expenditureCategoryOptions}
-          onChange={formFilterStore.onChangeExpenditureCategory}
-          defaultValue={formFilterStore.selectedExpenditureCategories}
+          items={filterFormStore.expenditureCategoryOptions}
+          onChange={filterFormStore.onChangeExpenditureCategory}
+          defaultValue={filterFormStore.selectedExpenditureCategories}
         />
         <MultiInputDropdownWithCheckBox
           placeholder={'수입'}
           checkBoxName={'수입'}
-          items={formFilterStore.incomeCategoryOptions}
-          onChange={formFilterStore.onChangeIncomeCategory}
-          defaultValue={formFilterStore.selectedIncomeCategories}
+          items={filterFormStore.incomeCategoryOptions}
+          onChange={filterFormStore.onChangeIncomeCategory}
+          defaultValue={filterFormStore.selectedIncomeCategories}
         />
       </InputWrapper>
     </ItemWrapper>