From f0b1132bc9b0b3673a8023f31c8bfd7d7de0e02b Mon Sep 17 00:00:00 2001 From: choba Date: Thu, 11 Jan 2024 12:11:25 +0100 Subject: [PATCH] Add. refactor delete button --- src/pages/auth/common/FormWrapper.tsx | 2 +- src/pages/auth/common/Wrapper.tsx | 7 +-- src/pages/category/EditCategoryPage.tsx | 75 +++++++++++++------------ src/pages/record/EditRecordPage.tsx | 21 +++---- src/pages/record/RecordPage.tsx | 9 ++- src/store/category.ts | 9 +++ src/store/common.ts | 22 ++++++-- 7 files changed, 82 insertions(+), 63 deletions(-) diff --git a/src/pages/auth/common/FormWrapper.tsx b/src/pages/auth/common/FormWrapper.tsx index 4d02e10..2c86f3f 100644 --- a/src/pages/auth/common/FormWrapper.tsx +++ b/src/pages/auth/common/FormWrapper.tsx @@ -28,7 +28,7 @@ const FormWrapper = ({children}: {children: ReactNode}) => { {instruction}
- {children} + {children}
diff --git a/src/pages/auth/common/Wrapper.tsx b/src/pages/auth/common/Wrapper.tsx index 617d3a9..8636554 100644 --- a/src/pages/auth/common/Wrapper.tsx +++ b/src/pages/auth/common/Wrapper.tsx @@ -19,20 +19,17 @@ const Wrapper = ({ sx={{ display: 'flex', flexDirection: 'column', - justifyContent: 'center', + justifyContent: 'space-between', alignItems: 'center', padding: '0 16px 23px 16px', + height: '100vh', }} > - {/* */} {headerComp} {children} diff --git a/src/pages/category/EditCategoryPage.tsx b/src/pages/category/EditCategoryPage.tsx index 72f09dc..94c45ee 100644 --- a/src/pages/category/EditCategoryPage.tsx +++ b/src/pages/category/EditCategoryPage.tsx @@ -1,8 +1,8 @@ import { Box, Container } from '@mui/system'; -import { Button, TextField, Typography } from '@mui/material'; +import { TextField, Typography } from '@mui/material'; import { useEffect, useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; -import { useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue } from 'recoil'; import { addSubCategory, @@ -18,10 +18,13 @@ import { } from '../../store/category'; import { MainCategoryProps, SubCategoryProps } from './CategoryPage'; import Wrapper from '../auth/common/Wrapper'; +import BottomButton from '@/components/common/BottomButton'; +import { stepButtonProps } from '@/store/common'; const EditCategoryPage = () => { const selectedMainCategory = useRecoilValue(selectedMainCategoryState); const selectedSubCategory = useRecoilValue(selectedSubCategoryState); + const [nextButtonProps, setNextButtonProps] = useRecoilState(stepButtonProps); const [inputName, setInputName] = useState(selectedSubCategory.name); const [isInputNameEmpty, setIsInputNameEmpty] = useState(true); @@ -127,33 +130,39 @@ const EditCategoryPage = () => { useEffect(() => { getCategoryData(); setIsInputNameEmpty(!(mode === 'edit')); + setNextButtonProps({ + ...nextButtonProps, + text: '삭제하기', + isDisabled: false, + clickHandler: handleDelete, + }); }, []); return ( - 뒤로 - - } - nextButtonIcon={ - - 완료 - - } - onClickNextButton={handleSave} - /> - } + headerComp={ + + 뒤로 + + } + nextButtonIcon={ + + 완료 + + } + onClickNextButton={handleSave} + /> + } > { {getCategoryIcon()} - {mode === 'edit' && ( - - )} + {mode === 'edit' && ( + + )} ); }; diff --git a/src/pages/record/EditRecordPage.tsx b/src/pages/record/EditRecordPage.tsx index 28c96c7..587bb1a 100644 --- a/src/pages/record/EditRecordPage.tsx +++ b/src/pages/record/EditRecordPage.tsx @@ -580,10 +580,7 @@ const EditRecordPage = (): ReactElement => { /> } > - - - - + {/* Selected Days */} { /> - {recordType === 'UPDATE' && ( - - - - )} - + {recordType === 'UPDATE' && ( + + )} ); }; diff --git a/src/pages/record/RecordPage.tsx b/src/pages/record/RecordPage.tsx index 36f6609..c3ff12c 100644 --- a/src/pages/record/RecordPage.tsx +++ b/src/pages/record/RecordPage.tsx @@ -249,10 +249,10 @@ const RecordPage = () => { }> - { justifyContent: 'space-between', '& .fc': { justifyContent: 'center' }, '& .fc-toolbar-chunk': { padding: '0px' }, + mb: 0, + pb: 0, + height: '7vh', }} > { {}, + text: '삭제하기', + }, }); \ No newline at end of file diff --git a/src/store/common.ts b/src/store/common.ts index e226a88..24d9127 100644 --- a/src/store/common.ts +++ b/src/store/common.ts @@ -20,6 +20,7 @@ import { currentSelectedDateForStat, } from './statistics'; import { setModeNextButtonState } from './auth'; +import { deleteCategoryButtonState } from './category'; /* ============ STEP FORM (SignUp Pages / PW Reset Pages / Record Edit Page) ============ */ export interface INextButtonState { @@ -31,11 +32,18 @@ export interface INextButtonState { /** * SIGNUP 회원 가입 * LOGIN 로그인 - * RECORD 기록 + * RECORD 기록 (삭제) * RESETPW 비밀번호 재설정 * SETTEMPLATE 템플릿 모드 (유저 모드) 설정 + * CATEGORY 카테고리 (삭제) */ -export type FormType = 'SIGNUP' | 'LOGIN' | 'RECORD' | 'RESETPW' | 'SETTEMPLATE'; +export type FormType = + | 'SIGNUP' + | 'LOGIN' + | 'RECORD' + | 'RESETPW' + | 'SETTEMPLATE' + | 'CATEGORY'; export const currentFormType = atom({ key: 'CurrentFormType', @@ -54,6 +62,8 @@ export const stepButtonProps = selector({ return get(recordEditNextButtonState); } else if (type === 'SETTEMPLATE') { return get(setModeNextButtonState); + } else if (type === 'CATEGORY') { + return get(deleteCategoryButtonState); } else { return get(recordEditNextButtonState); } @@ -63,11 +73,13 @@ export const stepButtonProps = selector({ if (type === 'SIGNUP') { set(signInUpNextButtonState, newValue); } else if (type === 'LOGIN') { - set (resetPWNextButtonState, newValue); + set(resetPWNextButtonState, newValue); } else if (type === 'RECORD') { - set (recordEditNextButtonState, newValue); + set(recordEditNextButtonState, newValue); } else if (type === 'SETTEMPLATE') { - set (setModeNextButtonState, newValue); + set(setModeNextButtonState, newValue); + } else if (type === 'CATEGORY') { + set(deleteCategoryButtonState, newValue); } else { set(recordEditNextButtonState, newValue); }