Merge pull request #355 from boostcamp-2020/dev

12/17 배포
boostcamp-2020 · Dec 17, 2020 · 21c962e · 21c962e
2 parents 53bfd58 + 855cafe
commit 21c962e
Show file tree

Hide file tree

Showing 55 changed files with 3,834 additions and 670 deletions.
diff --git a/client/src/api/axios.ts b/client/src/api/axios.ts
@@ -12,6 +12,7 @@ instance.interceptors.response.use(
   (error) => {
     if (error.response.status === 401) {
       window.location.href = '/login';
+      window.sessionStorage.clear();
     }
     return Promise.reject(error);
   },

diff --git a/client/src/components/accountbook-social-page/user-item/UserItem.tsx b/client/src/components/accountbook-social-page/user-item/UserItem.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import styled from 'styled-components';
-import ProfileImage from '../../common/profile-image/ProfileImage';
 import AdminSettingButton from '../admin-setting-button/AdminSettingButton';
 import DeleteButton from '../delete-button/DeleteButton';
 import { GRAY, LIGHT_GREEN } from '../../../constants/color';
@@ -19,6 +18,12 @@ const UserItemWrapper = styled.div<{ type: string | undefined }>`
   color: ${({ type }) => (type === 'admin' ? LIGHT_GREEN : 'black')};
 `;
 
+const ProfileImage = styled.img`
+  width: 30px;
+  height: 30px;
+  border-radius: 15px;
+`;
+
 const Cell = styled.div`
   width: 15%;
   justify-content: center;
@@ -27,18 +32,28 @@ const Cell = styled.div`
     margin-right: 1rem;
   }
   &:nth-child(2) {
+    padding-top: 0.4rem;
+
     width: 45%;
   }
   &:nth-child(3) {
+    padding-top: 0.4rem;
+
     width: 12%;
   }
   &:nth-child(4) {
+    padding-top: 0.4rem;
+
     width: 25%;
   }
   &:nth-child(5) {
+    padding-top: 0.4rem;
+
     width: 6%;
   }
   &:nth-child(6) {
+    padding-top: 0.4rem;
+
     width: 6%;
   }
 `;

diff --git a/client/src/components/common/category/Category.tsx b/client/src/components/common/category/Category.tsx
@@ -29,7 +29,7 @@ export const CategoryWrapper = styled.div<{
   overflow: hidden;
   text-overflow: ellipsis;
   pointer-events: ${({ preview }) => preview};
-
+  cursor: pointer;
   &:hover {
     box-shadow: ${({ shadow }) => (shadow === true ? '2px 3px 7px gray' : 0)};
   }

diff --git a/client/src/components/common/header-navigation/HeaderNavigation.stories.tsx b/client/src/components/common/header-navigation/HeaderNavigation.stories.tsx
@@ -10,10 +10,6 @@ export const TransactionPage = (): JSX.Element => {
   return <HeaderNavigation currentPage={'transaction'} />;
 };
 
-export const CalendarPage = (): JSX.Element => {
-  return <HeaderNavigation currentPage={'calendar'} />;
-};
-
 export const statisticsPage = (): JSX.Element => {
   return <HeaderNavigation currentPage={'statistics'} />;
 };
diff --git a/client/src/components/common/header-navigation/HeaderNavigation.tsx b/client/src/components/common/header-navigation/HeaderNavigation.tsx
@@ -7,28 +7,29 @@ import useGetParam from '../../../hook/use-get-param/useGetParam';
 
 const NavigationWrapper = styled.div`
   display: flex;
-  width: 200px;
+  align-items: center;
+  top: 2%;
+  width: 190px;
+  margin-right: -20px;
 `;
 
 const NavigationItem = styled.div<{ currentPage: string }>`
-  width: 24%;
-  padding-top: 4px;
+  width: 34%;
   text-align: center;
   font-family: 'Spoqa Han Sans';
+  font-size: 1.2rem;
+  margin-right: 15px;
   &:nth-child(1) a {
     color: ${({ currentPage }) => (currentPage == 'transaction' ? BLUE : 'black')};
     font-weight: ${({ currentPage }) => (currentPage == 'transaction' ? 'bold' : 'normal')};
   }
   &:nth-child(2) a {
-    color: ${({ currentPage }) => (currentPage == 'calendar' ? BLUE : 'black')};
-    font-weight: ${({ currentPage }) => (currentPage == 'calendar' ? 'bold' : 'normal')};
-  }
-  &:nth-child(3) a {
     color: ${({ currentPage }) => (currentPage == 'statistics' ? BLUE : 'black')};
     font-weight: ${({ currentPage }) => (currentPage == 'statistics' ? 'bold' : 'normal')};
+    margin-right: 12px;
   }
-  &:nth-child(4) a {
-    width: 28%;
+  &:nth-child(3) a {
+    width: 40%;
     display: flex;
     flex-direction: row-reverse;
     padding: 0;
@@ -60,11 +61,6 @@ const HeaderNavigation = ({ currentPage }: HeaderNavigationProps): JSX.Element =
           <span className="text">내역</span>
         </Link>
       </NavigationItem>
-      <NavigationItem currentPage={currentPage}>
-        <Link to={`/accountbooks/${id}/test`} className="text">
-          <span className="text">달력</span>
-        </Link>
-      </NavigationItem>
       <NavigationItem currentPage={currentPage}>
         <Link to={`/accountbooks/${id}/statistics`} className="text">
           <span className="text">통계</span>

diff --git a/client/src/components/common/modals/form-modal-account/FormModalCreateAccount.tsx b/client/src/components/common/modals/form-modal-account/FormModalCreateAccount.tsx
@@ -19,6 +19,26 @@ import CheckFailText from '../../check/check-text/CheckFailText';
 import CheckNoAction from '../../check/check-no-action/CheckNoAction';
 import CheckNoActionText from '../../check/check-text/CheckNoActionText';
 
+interface CheckNameType {
+  (First: React.ReactChild, Second: React.ReactChild, Third: React.ReactChild): React.ReactChild;
+}
+
+export function formModalCheckNameMessage(check: boolean, name: string): CheckNameType {
+  return function nameTemplate(
+    First: React.ReactChild,
+    Second: React.ReactChild,
+    Third: React.ReactChild,
+  ): React.ReactChild {
+    if (!check) {
+      return Third;
+    }
+    if (name) {
+      return First;
+    }
+    return Second;
+  };
+}
+
 const FormModalAccount: React.FC = () => {
   const { rootStore } = useStore();
   const id = useGetParam();
@@ -61,65 +81,60 @@ const FormModalAccount: React.FC = () => {
     }
   };
 
+  const messageWithCheckAndName = formModalCheckNameMessage(check, name);
+
   return (
     <ModalBackground show={show} closeModal={modalToggle}>
       <FormModalWrapper>
-        {check ? (
-          name ? (
-            <FormModalHeader
-              modalName={formModal.CREATE_ACCOUNT_MODAL_NAME}
-              blueName={'생성'}
-              closeModal={modalToggle}
-              clickBlue={onCreate}
-            />
-          ) : (
-            <FormModalHeader
-              modalName={formModal.CREATE_ACCOUNT_MODAL_NAME}
-              closeModal={modalToggle}
-              disabledName={'생성'}
-            />
-          )
-        ) : (
+        {messageWithCheckAndName(
+          <FormModalHeader
+            modalName={formModal.CREATE_ACCOUNT_MODAL_NAME}
+            blueName={'생성'}
+            closeModal={modalToggle}
+            clickBlue={onCreate}
+          />,
+          <FormModalHeader
+            modalName={formModal.CREATE_ACCOUNT_MODAL_NAME}
+            closeModal={modalToggle}
+            disabledName={'생성'}
+          />,
           <FormModalHeader
             modalName={formModal.CREATE_ACCOUNT_MODAL_NAME}
             closeModal={modalToggle}
             disabledName={'생성'}
-          />
+          />,
         )}
+
         <FormModalItem>
           <AccountPreview name={name} color={inputColor} onChange={onChange} />
         </FormModalItem>
         <FormModalItem>
           <FormModalLabel>{formModal.ACCOUNT_LABEL_NAME}</FormModalLabel>
-          {check ? (
-            name ? (
-              <InputText
-                maxLength={8}
-                placeholder={formModal.ACCOUNT_PLACEHOLDER}
-                value={name}
-                onChange={onChangeName}
-                focusColor={LIGHT_GREEN}
-              />
-            ) : (
-              <InputText
-                maxLength={8}
-                placeholder={formModal.ACCOUNT_PLACEHOLDER}
-                value={name}
-                onChange={onChangeName}
-              />
-            )
-          ) : (
+          {messageWithCheckAndName(
+            <InputText
+              maxLength={8}
+              placeholder={formModal.ACCOUNT_PLACEHOLDER}
+              value={name}
+              onChange={onChangeName}
+              focusColor={LIGHT_GREEN}
+            />,
+            <InputText
+              maxLength={8}
+              placeholder={formModal.ACCOUNT_PLACEHOLDER}
+              value={name}
+              onChange={onChangeName}
+            />,
             <InputText
               maxLength={8}
               placeholder={formModal.ACCOUNT_PLACEHOLDER}
               value={name}
               onChange={onChangeName}
               focusColor={FAIL_RED}
-            />
+            />,
           )}
-          {check ? name ? <CheckSuccess /> : <CheckNoAction /> : <CheckFail />}
+          {messageWithCheckAndName(<CheckSuccess />, <CheckNoAction />, <CheckFail />)}
         </FormModalItem>
-        {check ? name ? <CheckSuccessText /> : <CheckNoActionText /> : <CheckFailText />}
+        {messageWithCheckAndName(<CheckSuccessText />, <CheckNoActionText />, <CheckFailText />)}
       </FormModalWrapper>
     </ModalBackground>
   );

diff --git a/client/src/components/common/modals/form-modal-account/FormModalUpdateAccount.tsx b/client/src/components/common/modals/form-modal-account/FormModalUpdateAccount.tsx
@@ -19,6 +19,7 @@ import CheckFailText from '../../check/check-text/CheckFailText';
 import CheckNoActionText from '../../check/check-text/CheckNoActionText';
 import CheckNoAction from '../../check/check-no-action/CheckNoAction';
 import { LIGHT_GREEN, FAIL_RED } from '../../../../constants/color';
+import { nameCheckValidationHeader, nameCheckValidationMessage } from '../../../../utils/form/validation';
 
 const FormModalUpdateAccount: React.FC = () => {
   const { rootStore } = useStore();
@@ -85,103 +86,69 @@ const FormModalUpdateAccount: React.FC = () => {
     }
   };
 
+  const nameCheckChangeValidation = nameCheckValidationHeader(check, noChange, name, colorCheck);
+  const nameCheckMessage = nameCheckValidationMessage(check, name, noChange);
   if (
     updateAccountFormStore.convertAccount?.name !== undefined &&
     updateAccountFormStore.convertAccount?.color !== undefined
   ) {
     return (
       <ModalBackground show={show} closeModal={modalToggle}>
         <FormModalWrapper>
-          {check || noChange ? (
-            (name && !noChange) || (name && colorCheck) ? (
-              <FormModalHeader
-                modalName={formModal.UPDATE_ACCOUNT_MODAL_NAME}
-                blueName={'완료'}
-                redName={'삭제'}
-                closeModal={modalToggle}
-                clickRed={deleteAccount}
-                clickBlue={updateAccount}
-              />
-            ) : (
-              <FormModalHeader
-                modalName={formModal.UPDATE_ACCOUNT_MODAL_NAME}
-                closeModal={modalToggle}
-                redName={'삭제'}
-                clickRed={deleteAccount}
-                disabledName={'완료'}
-              />
-            )
-          ) : (
+          {nameCheckChangeValidation(
+            <FormModalHeader
+              modalName={formModal.UPDATE_ACCOUNT_MODAL_NAME}
+              blueName={'완료'}
+              redName={'삭제'}
+              closeModal={modalToggle}
+              clickRed={deleteAccount}
+              clickBlue={updateAccount}
+            />,
             <FormModalHeader
               modalName={formModal.UPDATE_ACCOUNT_MODAL_NAME}
               closeModal={modalToggle}
               redName={'삭제'}
               clickRed={deleteAccount}
               disabledName={'완료'}
-            />
+            />,
           )}
 
           <FormModalItem>
             <AccountPreview name={name} color={inputColor} onChange={onChange} />
           </FormModalItem>
           <FormModalItem>
             <FormModalLabel>{formModal.ACCOUNT_LABEL_NAME}</FormModalLabel>
-            {check ? (
-              name && !noChange ? (
-                <InputText
-                  maxLength={8}
-                  placeholder={formModal.ACCOUNT_PLACEHOLDER}
-                  value={name}
-                  onChange={onChangeName}
-                  focusColor={LIGHT_GREEN}
-                />
-              ) : (
-                <InputText
-                  maxLength={8}
-                  placeholder={formModal.ACCOUNT_PLACEHOLDER}
-                  value={name}
-                  onChange={onChangeName}
-                />
-              )
-            ) : !noChange ? (
+            {nameCheckMessage(
+              <InputText
+                maxLength={8}
+                placeholder={formModal.ACCOUNT_PLACEHOLDER}
+                value={name}
+                onChange={onChangeName}
+                focusColor={LIGHT_GREEN}
+              />,
               <InputText
                 maxLength={8}
                 placeholder={formModal.ACCOUNT_PLACEHOLDER}
                 value={name}
                 onChange={onChangeName}
                 focusColor={FAIL_RED}
-              />
-            ) : (
+              />,
               <InputText
                 maxLength={8}
                 placeholder={formModal.ACCOUNT_PLACEHOLDER}
                 value={name}
                 onChange={onChangeName}
-              />
-            )}
-            {check ? (
-              name && !noChange ? (
-                <CheckSuccess />
-              ) : (
-                <CheckNoAction />
-              )
-            ) : !noChange ? (
-              <CheckFail />
-            ) : (
-              <CheckNoAction />
+              />,
+              <InputText
+                maxLength={8}
+                placeholder={formModal.ACCOUNT_PLACEHOLDER}
+                value={name}
+                onChange={onChangeName}
+              />,
             )}
+            {nameCheckMessage(<CheckSuccess />, <CheckFail />, <CheckNoAction />, <CheckNoAction />)}
           </FormModalItem>
-          {check ? (
-            name && !noChange ? (
-              <CheckSuccessText />
-            ) : (
-              <CheckNoActionText />
-            )
-          ) : !noChange ? (
-            <CheckFailText />
-          ) : (
-            <CheckNoActionText />
-          )}
+          {nameCheckMessage(<CheckSuccessText />, <CheckFailText />, <CheckNoActionText />, <CheckNoActionText />)}
         </FormModalWrapper>
       </ModalBackground>
     );