Add. SignUp / ResetPW Bug

ddok-ddak · Jan 15, 2024 · 29794d3 · 29794d3
1 parent 56ddd08
commit 29794d3
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 79 deletions.
diff --git a/src/hooks/signUpSteps.ts b/src/hooks/signUpSteps.ts
@@ -1,17 +1,18 @@
-import { signUpStep } from '@/store/signUp';
+import { stepIndex } from '@/store/common';
 import { ReactElement } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 
 export function useSignUpStepForm(steps: ReactElement[]) {
 
-  const [currentStepIndex, setCurrentStepIndex] = useRecoilState(signUpStep);
+  const [currentStepIndex, setCurrentStepIndex] = useRecoilState(stepIndex);
   const navigate = useNavigate();
 
   /**
    * handle next button
    */
   function handleNextButton() {
+
     const currIdx = currentStepIndex;
     setCurrentStepIndex(() => (currIdx < steps.length - 1) ? (currIdx + 1) : currIdx);
   }

diff --git a/src/pages/auth/resetPW/ResetPWMode.tsx b/src/pages/auth/resetPW/ResetPWMode.tsx
@@ -1,12 +1,14 @@
+import { currentFormType, stepButtonProps } from '@/store/common';
 import { resetPWMode, resetPWNextButtonState } from '@/store/resetPW';
 import { Button, Container } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import { useEffect } from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useSetRecoilState } from 'recoil';
 
 const ResetPWMode = (props: any) => {
-  const [nextButtonProps, setNextButtonProps] = useRecoilState(resetPWNextButtonState);
+  const [nextButtonProps, setNextButtonProps] = useRecoilState(stepButtonProps);
   const [pWChgMode, setPWChgMode] = useRecoilState(resetPWMode);
+  const setStepType = useSetRecoilState(currentFormType);
 
   const getSelectModeButton = (
     text: string,
@@ -44,8 +46,10 @@ const ResetPWMode = (props: any) => {
   };
 
   useEffect(() => {
+    setStepType('RESETPW');
     setNextButtonProps({
       ...nextButtonProps,
+      text: '다음',
       isDisabled: false,
       clickHandler: props.handleNextButton,
     });

diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx
@@ -2,35 +2,26 @@
 import {
   Box,
   Button,
-  Container,
-  Fade,
-  Icon,
-  List,
+  Container, List,
   ListItemButton,
   ListItemText,
   ListSubheader,
-  Typography,
+  Typography
 } from '@mui/material';
 import React, { useEffect } from 'react';
 
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 
-import Spacer from '@/components/common/Spacer';
 import ListIcon from '@/components/settings/ListIcon';
 import UserAvatar from '@/components/settings/UserAvatar';
 import { stepIndex } from '@/store/common';
-import { resetPWCompletePopupShow } from '@/store/resetPW';
 import { useNavigate } from 'react-router-dom';
-import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 import SettingWrapper from '../auth/common/Wrapper';
 
 const SettingPage = () => {
   const navigation = useNavigate();
 
-  const [completePopupShow, setCompletePopupShow] = useRecoilState(
-    resetPWCompletePopupShow,
-  );
-
   const setStepIndex = useSetRecoilState(stepIndex);
 
   const [open1, setOpen1] = React.useState(true);
@@ -62,68 +53,6 @@ const SettingPage = () => {
     );
   };
 
-  const completePopupComponent = () => {
-    return (
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          width: '90%',
-          height: '8vh',
-          borderRadius: '15px',
-          backgroundColor: '#D1F1E4',
-        }}
-      >
-        <Fade onClick={() => setCompletePopupShow(false)}>
-          <>
-            <Icon>
-              <svg
-                width="18"
-                height="18"
-                viewBox="0 0 18 18"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <circle cx="9" cy="9" r="9" fill="#16B978" />
-                <g clipPath="url(#clip0_1168_926)">
-                  <path
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                    d="M13.6016 5.67781C13.7372 5.81343 13.8134 5.99735 13.8134 6.18912C13.8134 6.38089 13.7372 6.56481 13.6016 6.70043L8.18091 12.1212C8.10927 12.1928 8.02422 12.2497 7.93062 12.2884C7.83701 12.3272 7.73669 12.3472 7.63536 12.3472C7.53404 12.3472 7.43372 12.3272 7.34011 12.2884C7.24651 12.2497 7.16146 12.1928 7.08982 12.1212L4.39657 9.4284C4.3275 9.36168 4.2724 9.28188 4.2345 9.19365C4.19659 9.10541 4.17664 9.01051 4.17581 8.91448C4.17497 8.81845 4.19327 8.72322 4.22964 8.63434C4.266 8.54546 4.3197 8.46471 4.38761 8.39681C4.45551 8.3289 4.53626 8.2752 4.62514 8.23884C4.71402 8.20248 4.80925 8.18418 4.90528 8.18501C5.00131 8.18585 5.09621 8.2058 5.18444 8.2437C5.27268 8.2816 5.35248 8.3367 5.41919 8.40577L7.63512 10.6217L12.5785 5.67781C12.6457 5.6106 12.7254 5.55729 12.8132 5.52092C12.901 5.48454 12.9951 5.46582 13.0901 5.46582C13.1851 5.46582 13.2792 5.48454 13.367 5.52092C13.4547 5.55729 13.5345 5.6106 13.6016 5.67781Z"
-                    fill="white"
-                  />
-                </g>
-                <defs>
-                  <clipPath id="clip0_1168_926">
-                    <rect
-                      width="11.5714"
-                      height="11.5714"
-                      fill="white"
-                      transform="translate(3.21387 3.21387)"
-                    />
-                  </clipPath>
-                </defs>
-              </svg>
-            </Icon>
-            <Spacer x={5} />
-            <Typography
-              sx={{
-                pt: '3px',
-                color: 'grey.700',
-                lineHeight: '24px',
-                fontSize: '13px',
-              }}
-            >
-              {'비밀번호가 변경되었습니다.'}
-            </Typography>
-          </>
-        </Fade>
-      </Box>
-    );
-  };
-
-
   useEffect(() => {
     setStepIndex(0);
   });
@@ -205,7 +134,6 @@ const SettingPage = () => {
           </Typography>
         </Button>
       </SettingWrapper>
-      {completePopupShow && completePopupComponent()}
     </Container>
   );
 };