Add. refactoring - header

ddok-ddak · Dec 8, 2023 · 92fd5bf · 92fd5bf
1 parent 3567c24
commit 92fd5bf
Show file tree

Hide file tree

Showing 14 changed files with 335 additions and 313 deletions.
diff --git a/src/components/layout/CommonHeader.tsx b/src/components/layout/CommonHeader.tsx
@@ -1,69 +1,95 @@
-import CheckIcon from "@material-ui/icons/Check";
-import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
-import {
-  Box,
-  AppBar,
-  Toolbar,
-  IconButton,
-  Typography,
-} from '@mui/material';
-import { ReactElement } from 'react';
+import { AppBar, Box, IconButton, Typography } from '@mui/material';
+import { ReactElement, ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
-import Spacer from '../common/Spacer';
 
 export interface CommonHeaderProps {
   title: string;
-  isShowBackButton?: boolean;
-  rightButtonIcon?: ReactElement;
-  isShowRightButton?: boolean;
-  // onClickRightButton?: (event: React.MouseEvent<HTMLElement>) => {};
-  onClickRightButton?: (event: React.MouseEvent<HTMLElement>) => void;
+  isShowPrevButton?: boolean;
+  prevButtonIcon?: ReactNode;
+  prevButtonText?: string;
+  onClickPrevButton?: (event: React.MouseEvent<HTMLElement>) => void;
+  isShowNextButton?: boolean;
+  nextButtonIcon?: ReactElement;
+  nextButtonText?: string;
+  onClickNextButton?: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
 const CommonHeader = (props: CommonHeaderProps) => {
   const navigation = useNavigate();
-
   return (
-    // <Box sx={{ flexGrow: 1 }}>
-    <Box>
-      <AppBar position="static" color="transparent" elevation={0}>
-        <Toolbar>
-          {props.isShowBackButton ? (
-            <IconButton
-              size="large"
-              edge="start"
-              aria-label="menu"
-              sx={{ mr: 2 }}
-              onClick={() => navigation(-1)}
-            >
-              <ArrowBackIosNewIcon />
-            </IconButton>
-          ) : (
-            <Spacer />
-          )}
-          <Typography
-            component="div"
-            sx={{
-              flexGrow: 1,
-              textAlign: 'center',
-              fontSize: '16px',
-              fontWeight: '700',
-              lineHeight: '16px',
-              color: '#949494',
-            }}
+    <AppBar
+      position="static"
+      color="transparent"
+      elevation={0}
+      sx={{
+        display: 'flex',
+        width: '100%',
+        height: '7vh',
+        flexDirection: 'row',
+        flex: '0 0 10%',
+      }}
+    >
+      <Box sx={{ mr: 2, flex: '0 0 10vw' }}>
+        {props.isShowPrevButton && (
+          <IconButton
+            size="large"
+            edge="start"
+            aria-label="menu"
+            onClick={
+              (event) => {
+                if (props.onClickPrevButton) {
+                  props.onClickPrevButton(event);
+                } else {
+                  navigation(-1);
+                }
+              }
+            }
+          >
+            <Typography sx={{ fontSize: '13px', color: '#949494' }}>
+              {props.prevButtonText ?? '뒤로'}
+            </Typography>
+          </IconButton>
+        )}
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flex: '1 1 80vw',
+        }}
+      >
+        <Typography
+          component="div"
+          sx={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: '1 0 auto',
+            textAlign: 'center',
+            verticalAlign: 'center',
+            fontSize: '16px',
+            fontWeight: '700',
+            color: '#949494',
+          }}
+        >
+          {props.title}
+        </Typography>
+      </Box>
+      <Box sx={{ ml: 2, flex: '0 0 10vw' }}>
+        {props.isShowNextButton && (
+          <IconButton
+            size="large"
+            edge="start"
+            aria-label="menu"
+            onClick={props.onClickNextButton}
           >
-            {props.title}
-          </Typography>
-          {props.isShowRightButton && (
-            <IconButton onClick={props.onClickRightButton}>
-              {props.rightButtonIcon}
-              <CheckIcon />
-            </IconButton>
-          )}
-        </Toolbar>
-      </AppBar>
-    </Box>
+            <Typography sx={{ fontSize: '13px', color: '#949494' }}>
+              {props.nextButtonText ?? '완료'}
+            </Typography>
+          </IconButton>
+        )}
+      </Box>
+    </AppBar>
   );
 };
 
-export default CommonHeader;
+export default CommonHeader;
diff --git a/src/hooks/signUpSteps.ts b/src/hooks/signUpSteps.ts
@@ -21,6 +21,7 @@ export function useSignUpStepForm(steps: ReactElement[]) {
    */
   function handlePrevButton() {
     const currIdx = currentStepIndex;
+    console.log(currIdx)
     if (currIdx <= 0) {
       navigate('/login', { replace: true });
     } else {

diff --git a/src/pages/auth/common/Wrapper.tsx b/src/pages/auth/common/Wrapper.tsx
@@ -26,11 +26,13 @@ const Wrapper = ({
     >
       <Box
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
+          width: '100%',
+          // display: 'flex',
+          // flexDirection: 'row',
+          // flex: '1 0 100%',
         }}
       >
-        <PrevButton prevBtnText={prevBtnText} handlePrevBtn={handlePrevBtn} />
+        {/* <PrevButton prevBtnText={prevBtnText} handlePrevBtn={handlePrevBtn} /> */}
         {headerComp}
       </Box>
       {children}

diff --git a/src/pages/auth/resetPW/ResetPW.tsx b/src/pages/auth/resetPW/ResetPW.tsx
@@ -9,7 +9,6 @@ import InputForm, { InputItemType } from '../common/InputForm';
 const SetPW = (props: any) => {
   const [signUpData, setSignUpData] = useRecoilState(signUpDataState);
   const [nextButtonProps, setNextButtonProps] = useRecoilState(stepButtonProps);
-  // const setInstruction = useSetRecoilState(stepInstruction);
 
   const [pWChgMode, setPWChgMode] = useRecoilState(resetPWMode);
 

diff --git a/src/pages/auth/resetPW/ResetPWMode.tsx b/src/pages/auth/resetPW/ResetPWMode.tsx
@@ -51,12 +51,6 @@ const ResetPWMode = (props: any) => {
     });
   }, []);
 
-
-  useEffect(() => {
-
-
-  }, [pWChgMode]);
-
   return (
     <Container
       sx={{

diff --git a/src/pages/auth/resetPW/ResetPWSteps.tsx b/src/pages/auth/resetPW/ResetPWSteps.tsx
@@ -1,24 +1,18 @@
-import Typography from '@mui/material/Typography';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
 import { useResetPWSteps } from '@/hooks/resetPWSteps';
-import {
-  stepIndex,
-  currentFormType
-} from '@/store/common';
-import {
-  resetPWMode
-} from '@/store/resetPW';
+import { stepIndex, currentFormType } from '@/store/common';
+import { resetPWMode } from '@/store/resetPW';
 import React, { useEffect, useState } from 'react';
 import FormWrapper from '../common/FormWrapper';
 import VerifyCode from '../common/VerifyCode';
 import Wrapper from '../common/Wrapper';
 import ResetPW from './ResetPW';
 import ResetPWMode from './ResetPWMode';
 import VerifyPW from './VerifyPW';
+import CommonHeader from '@/components/layout/CommonHeader';
 
 const ResetPWStep = () => {
-
   const setStepType = useSetRecoilState(currentFormType);
   const [currentStepIndex, setCurrentStepIndex] = useRecoilState(stepIndex);
   const [pWChgMode, setPWChgMode] = useRecoilState(resetPWMode);
@@ -49,20 +43,12 @@ const ResetPWStep = () => {
 
   return (
     <Wrapper
-      prevBtnText={'뒤로'}
-      handlePrevBtn={handlePrevButton}
       headerComp={
-        <Typography
-          align={'center'}
-          sx={{
-            color: '#949494',
-            fontSize: '14px',
-            width: '100%',
-            fontWeight: '700',
-          }}
-        >
-          {'비밀번호 변경'}
-        </Typography>
+        <CommonHeader
+          title={'비밀번호 변경'}
+          isShowPrevButton={true}
+          onClickPrevButton={handlePrevButton}
+        />
       }
     >
       <FormWrapper

diff --git a/src/pages/auth/signup/SignUp.tsx b/src/pages/auth/signup/SignUp.tsx
@@ -1,8 +1,4 @@
-import {
-  Box,
-  LinearProgress,
-  LinearProgressProps
-} from '@mui/material';
+import { Box, LinearProgress, LinearProgressProps } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import React from 'react';
 import { useRecoilValue } from 'recoil';
@@ -16,6 +12,7 @@ import Wrapper from '../common/Wrapper';
 import CheckTermsAndConditions from './CheckTermsAndConditions';
 import SetEmail from './SetEmail';
 import SetNickname from './SetNickname';
+import CommonHeader from '@/components/layout/CommonHeader';
 
 const SignUp = () => {
   const currentStepIndex = useRecoilValue(stepIndex);
@@ -68,26 +65,30 @@ const SignUp = () => {
 
   return (
     <Wrapper
-      prevBtnText={'뒤로'}
-      handlePrevBtn={handlePrevButton}
       headerComp={
-        <>
-          <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-            <Typography
-              sx={{
-                justifyContent: 'flex-end',
-                color: '#222222',
-                fontWeight: '700',
-                fontSize: '18px',
-              }}
-            >
-              약관동의
-            </Typography>
-          </Box>
+        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+          <CommonHeader
+            title={''}
+            isShowPrevButton={true}
+            prevButtonText={'뒤로'}
+            onClickPrevButton={handlePrevButton}
+            isShowNextButton={false}
+          />
+          <Typography
+            sx={{
+              width: '100%',
+              textAlign: 'center',
+              color: '#222222',
+              fontWeight: '700',
+              fontSize: '18px',
+            }}
+          >
+            약관동의
+          </Typography>
           <LinearProgressWithLabel
             value={Math.round(((currentStepIndex + 1) / steps.length) * 100)}
           />
-        </>
+        </Box>
       }
     >
       <FormWrapper

diff --git a/src/pages/category/CategoryPage.tsx b/src/pages/category/CategoryPage.tsx
@@ -1,5 +1,5 @@
 import AddIcon from '@mui/icons-material/Add';
-import { Divider, Grid, Typography } from '@mui/material';
+import { Grid, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -11,6 +11,7 @@ import FolderTop from '../../components/common/FolderTop';
 import Spacer from '../../components/common/Spacer';
 import CommonHeader from '../../components/layout/CommonHeader';
 import { selectedSubCategoryState } from '../../store/category';
+import Wrapper from '../auth/common/Wrapper';
 
 export interface MainCategoryProps {
   categoryId: number;
@@ -48,8 +49,11 @@ const CategoryPage = () => {
   }, []);
 
   return (
-    <>
-      <CommonHeader title={'카테고리 설정하기'} isShowBackButton={true} />
+    <Wrapper
+      headerComp={
+        <CommonHeader title={'카테고리 설정하기'} isShowPrevButton={true} />
+      }
+    >
       <Spacer y={20} />
       <Box>
         {categories?.map((category, idx) => {
@@ -139,7 +143,7 @@ const CategoryPage = () => {
         })}
       </Box>
       <Spacer y={12} />
-    </>
+    </Wrapper>
   );
 };