Add. refactor delete button

ddok-ddak · Jan 11, 2024 · f0b1132 · f0b1132
1 parent a5826bc
commit f0b1132
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 63 deletions.
diff --git a/src/pages/auth/common/FormWrapper.tsx b/src/pages/auth/common/FormWrapper.tsx
@@ -28,7 +28,7 @@ const FormWrapper = ({children}: {children: ReactNode}) => {
           {instruction}
         </Typography>
         <form>
-        {children}
+          {children}
         </form>
       </Box>
       <BottomButton btnStyleProps={{}} textStyleProps={{}}/>

diff --git 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',
       }}
     >
       <Box
         sx={{
           width: '100%',
-          // display: 'flex',
-          // flexDirection: 'row',
-          // flex: '1 0 100%',
         }}
       >
-        {/* <PrevButton prevBtnText={prevBtnText} handlePrevBtn={handlePrevBtn} /> */}
         {headerComp}
       </Box>
       {children}

diff --git 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 (
     <Wrapper
-    headerComp={
-      <CommonHeader
-        title={mode === 'edit' ? '카테고리 수정하기' : '카테고리 추가하기'}
-        isShowPrevButton={true}
-        isShowNextButton={true}
-        prevButtonIcon={
-          <Typography sx={{ color: 'grey.500', fontSize: '13px' }}>
-            뒤로
-          </Typography>
-        }
-        nextButtonIcon={
-          <Typography
-            sx={{
-              color: isInputNameEmpty ? 'pink.700' : 'grey.500',
-              fontSize: '13px',
-            }}
-          >
-            완료
-          </Typography>
-        }
-        onClickNextButton={handleSave}
-      />
-    }
+      headerComp={
+        <CommonHeader
+          title={mode === 'edit' ? '카테고리 수정하기' : '카테고리 추가하기'}
+          isShowPrevButton={true}
+          isShowNextButton={true}
+          prevButtonIcon={
+            <Typography sx={{ color: 'grey.500', fontSize: '13px' }}>
+              뒤로
+            </Typography>
+          }
+          nextButtonIcon={
+            <Typography
+              sx={{
+                color: isInputNameEmpty ? 'pink.700' : 'grey.500',
+                fontSize: '13px',
+              }}
+            >
+              완료
+            </Typography>
+          }
+          onClickNextButton={handleSave}
+        />
+      }
     >
       <Box
         sx={{
@@ -242,17 +251,13 @@ const EditCategoryPage = () => {
             {getCategoryIcon()}
           </Box>
         </Container>
-        {mode === 'edit' && (
-          <Button
-            variant="contained"
-            color="error"
-            fullWidth
-            onClick={handleDelete}
-          >
-            삭제하기
-          </Button>
-        )}
       </Box>
+      {mode === 'edit' && (
+        <BottomButton
+        btnStyleProps={{ borderRadius: '0px', flex: '0 0 5vh' }}
+        textStyleProps={{}}
+        />
+      )}
     </Wrapper>
   );
 };

diff --git a/src/pages/record/EditRecordPage.tsx b/src/pages/record/EditRecordPage.tsx
@@ -580,10 +580,7 @@ const EditRecordPage = (): ReactElement => {
         />
       }
     >
-      <Box>
-        <Container sx={{ flexGrow: '1' }}>
-          <Spacer y={8} />
-
+        <Container sx={{ flex: '1 1 100vh', }}>
           {/* Selected Days */}
           <Box
             sx={{
@@ -747,16 +744,12 @@ const EditRecordPage = (): ReactElement => {
             />
           </Container>
         </Container>
-        {recordType === 'UPDATE' && (
-          <Container
-            sx={{
-              flex: '0 0 10vh',
-            }}
-          >
-            <BottomButton btnStyleProps={{}} textStyleProps={{}} />
-          </Container>
-        )}
-      </Box>
+      {recordType === 'UPDATE' && (
+        <BottomButton
+          btnStyleProps={{ borderRadius: '0px', flex: '0 0 5vh' }}
+          textStyleProps={{}}
+        />
+      )}
     </Wrapper>
   );
 };

diff --git a/src/pages/record/RecordPage.tsx b/src/pages/record/RecordPage.tsx
@@ -249,10 +249,10 @@ const RecordPage = () => {
     <Wrapper headerComp={<CommonHeader title={'일주일 기록하기'} />}>
       <Box
         sx={{
-          height: 'calc(100vh - 112px)',
+          width: '100vw',
+          height: '100vh',
         }}
       >
-        <Spacer y={10} />
         <LocalizationProvider dateAdapter={AdapterDayjs}>
           <Container
             sx={{
@@ -261,6 +261,9 @@ const RecordPage = () => {
               justifyContent: 'space-between',
               '& .fc': { justifyContent: 'center' },
               '& .fc-toolbar-chunk': { padding: '0px' },
+              mb: 0,
+              pb: 0,
+              height: '7vh',
             }}
           >
             <Chevron
@@ -299,7 +302,7 @@ const RecordPage = () => {
         </LocalizationProvider>
         <Container
           sx={{
-            height: '78vh',
+            height: '82vh',
           }}
         >
           <FullCalendar

diff --git a/src/store/category.ts b/src/store/category.ts
@@ -11,4 +11,13 @@ export const selectedMainCategoryState = atom({
 export const selectedSubCategoryState = atom({
   key: 'SelectedSubCategoryState',
   default: {} as SubCategoryProps,
+});
+
+export const deleteCategoryButtonState = atom({
+  key: 'DeleteCategoryButtonState',
+  default: {
+    isDisabled: true,
+    clickHandler: () => {},
+    text: '삭제하기',
+  },
 });
diff --git 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<FormType>({
   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);
     }