From e42380a3ec795dff75e68792ab8d31593af65fc4 Mon Sep 17 00:00:00 2001
From: Jungu Lee <100949102+jobkaeHenry@users.noreply.github.com>
Date: Tue, 5 Dec 2023 00:51:25 +0900
Subject: [PATCH] =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85-=EB=A9=80?=
 =?UTF-8?q?=ED=8B=B0=EC=8A=A4=ED=83=AD=ED=8F=BC-=EC=A0=9C=EC=9E=91=20(#71)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Refactor : 회원가입 실패 이유 표출

* Refactor : 앱바 기본동작 추가

* Minor : Disable 버튼 스타일 추가

* New : FixedBottomCTA 버튼 추가

* Refactor : 회원가입 Multi-step-form 적용
---
 .../app/(logoutOnly)/auth/signup/layout.tsx   |  38 +++
 .../src/app/(logoutOnly)/auth/signup/page.tsx | 289 ++++++++++--------
 client/src/components/CustomAppbar.tsx        |   8 +-
 client/src/components/FixedBottomCTA.tsx      |  33 ++
 .../src/components/auth/signup/SignupStep.tsx |  50 +++
 client/src/const/theme.ts                     |   8 +
 client/src/hooks/useMultistepForm.ts          |  62 ++++
 client/src/queries/auth/useSignupMutation.tsx |   6 +
 client/src/store/auth/SignupPageContext.ts    |  23 ++
 9 files changed, 389 insertions(+), 128 deletions(-)
 create mode 100644 client/src/app/(logoutOnly)/auth/signup/layout.tsx
 create mode 100644 client/src/components/FixedBottomCTA.tsx
 create mode 100644 client/src/components/auth/signup/SignupStep.tsx
 create mode 100644 client/src/hooks/useMultistepForm.ts
 create mode 100644 client/src/store/auth/SignupPageContext.ts

diff --git a/client/src/app/(logoutOnly)/auth/signup/layout.tsx b/client/src/app/(logoutOnly)/auth/signup/layout.tsx
new file mode 100644
index 0000000..5dfd381
--- /dev/null
+++ b/client/src/app/(logoutOnly)/auth/signup/layout.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import SignupPageContext from "@/store/auth/SignupPageContext";
+import { SignupRequirement } from "@/types/auth/signupRequirement";
+import { Container, Paper } from "@mui/material";
+import { ReactNode, useState } from "react";
+
+type layoutProps = {
+  children: ReactNode;
+};
+
+const layout = ({ children }: layoutProps) => {
+  const [disableBtn, setDisableBtn] = useState(false);
+  const [formData, setFormData] = useState<SignupRequirement>({
+    id: "",
+    email: "",
+    password: "",
+    nickname: "",
+  });
+  return (
+    <SignupPageContext.Provider value={{ formData, setFormData, disableBtn, setDisableBtn }}>
+      <Container sx={{ px: { xs: 0, sm: 4 } }} maxWidth={"lg"}>
+        <Paper component={'form'}
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            minHeight: "calc(100vh - 56px)",
+            overflowX:'hidden'
+          }}
+        >
+          {children}
+        </Paper>
+      </Container>
+    </SignupPageContext.Provider>
+  );
+};
+
+export default layout;
diff --git a/client/src/app/(logoutOnly)/auth/signup/page.tsx b/client/src/app/(logoutOnly)/auth/signup/page.tsx
index 42881d4..e8545f4 100644
--- a/client/src/app/(logoutOnly)/auth/signup/page.tsx
+++ b/client/src/app/(logoutOnly)/auth/signup/page.tsx
@@ -1,137 +1,174 @@
 "use client";
-import Avatar from "@mui/material/Avatar";
-import Button from "@mui/material/Button";
-import CssBaseline from "@mui/material/CssBaseline";
-import TextField from "@mui/material/TextField";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Checkbox from "@mui/material/Checkbox";
 
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
-import Typography from "@mui/material/Typography";
-import Container from "@mui/material/Container";
-import { SIGNIN } from "@/const/clientPath";
-import Link from "next/link";
-import { ChangeEvent, useState } from "react";
-import { SignupRequirement } from "@/types/auth/signupRequirement";
+import { ChangeEvent, useContext, useCallback, useState } from "react";
 import useSignupMutation from "@/queries/auth/useSignupMutation";
+import SignupPageContext from "@/store/auth/SignupPageContext";
+import useMultistepForm from "@/hooks/useMultistepForm";
+import SignupStep from "@/components/auth/signup/SignupStep";
+import { TextField, LinearProgress } from "@mui/material";
+import CustomAppbar from "@/components/CustomAppbar";
+import { useRouter } from "next/navigation";
+import HOME from "@/const/clientPath";
+import { HomeOutlined } from "@mui/icons-material";
+import { SignupRequirement } from "@/types/auth/signupRequirement";
+import FixedBottomCTA from "@/components/FixedBottomCTA";
 
 export default function SignUpPage() {
-  const [formData, setFormData] = useState<SignupRequirement>({
-    id: "",
-    email: "",
-    password: "",
-    nickname: "",
-  });
-  const changeHandler = ({
-    target,
-  }: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    setFormData((prev) => ({ ...prev, [target.name]: target.value }));
-  };
-  const { mutate: submitHandler } = useSignupMutation();
+  const { formData, setFormData, disableBtn } = useContext(SignupPageContext);
+  const router = useRouter();
+
+  const changeHandler = useCallback(
+    ({ target }: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      setFormData((prev) => ({ ...prev, [target.name]: target.value }));
+    },
+    []
+  );
+  const [doubleCheckPassword, setDoubleCheckPassword] = useState<string>("");
+
+  const { mutateAsync: signupHandler } = useSignupMutation();
+  const submitHandler = useCallback(async (data: SignupRequirement) => {
+    try {
+      await signupHandler(data);
+    } catch (err) {
+      goTo(0);
+    }
+  }, []);
+
+  const {
+    next,
+    MultistepForm,
+    isFirstStep,
+    isLastStep,
+    goTo,
+    totalPageNum,
+    currentIndex,
+  } = useMultistepForm(
+    [
+      <SignupStep
+        title={`원활한 환경을 위해\n이메일을 입력해 주세요😃`}
+        error={
+          !new RegExp(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/).test(
+            formData.email
+          )
+        }
+      >
+        <TextField
+          name="email"
+          label="이메일"
+          type="email"
+          value={formData.email}
+          helperText="이메일을 입력해 주세요."
+          onChange={changeHandler}
+        />
+      </SignupStep>,
+
+      <SignupStep
+        title={`🔐\n비밀번호를 입력해 주세요`}
+        error={
+          formData.password
+            ? !new RegExp(
+                /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/
+              ).test(formData.password)
+            : undefined
+        }
+      >
+        <TextField
+          name="password"
+          autoComplete="new-password"
+          label="비밀번호"
+          type="password"
+          value={formData.password}
+          placeholder="비밀번호를 입력해주세요"
+          helperText="8~20자 대소문자, 숫자, 특수기호가 들어가야해요"
+          onChange={changeHandler}
+        />
+      </SignupStep>,
+
+      <SignupStep
+        title={`🔒🔒\n한번 더 입력해 주세요`}
+        error={
+          doubleCheckPassword
+            ? !new RegExp(
+                /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/
+              ).test(doubleCheckPassword) ||
+              doubleCheckPassword !== formData.password
+            : undefined
+        }
+      >
+        <TextField
+          name="passwordcheck"
+          autoComplete="new-password"
+          label="비밀번호"
+          type="password"
+          value={doubleCheckPassword}
+          placeholder="비밀번호를 입력해주세요"
+          helperText="8~20자 대소문자, 숫자, 특수기호가 들어가야해요"
+          onChange={({ target }) => setDoubleCheckPassword(target.value)}
+        />
+      </SignupStep>,
+
+      <SignupStep
+        title={`거의 다 끝나가요!\n아이디와 닉네임을 설정해주세요🤓`}
+        error={
+          formData.id ? !!formData.id && !(formData.id.length > 2) : undefined
+        }
+      >
+        <TextField
+          name="id"
+          autoComplete="username"
+          label="아이디"
+          type="id"
+          placeholder="아이디를 입력해주세요"
+          helperText="이메일 노출없이 아이디로 대체해요"
+          value={formData.id}
+          onChange={changeHandler}
+        />
+      </SignupStep>,
+
+      <SignupStep
+        title={`거의 다 끝나가요!\n아이디와 닉네임을 설정해주세요🤓`}
+        error={
+          formData.nickname
+            ? !!formData.nickname && !(formData.nickname.length > 2)
+            : undefined
+        }
+      >
+        <TextField
+          name="nickname"
+          label="닉네임"
+          placeholder="닉네임을 입력해주세요"
+          value={formData.nickname}
+          autoComplete="off"
+          helperText="사용할 닉네임을 입력해 주세요."
+          onChange={changeHandler}
+        />
+      </SignupStep>,
+    ],
+    0
+  );
 
   return (
-    <Container component="main" maxWidth="xs">
-      <CssBaseline />
-      <Box
-        sx={{
-          marginTop: 8,
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
+    <>
+      <CustomAppbar
+        appendButton={"취소"}
+        prependButton={isFirstStep ? <HomeOutlined sx={{ p: 0 }} /> : undefined}
+        onClickPrepend={() => (isFirstStep ? router.push(HOME) : router.back())}
+        onClickAppend={() => router.push(HOME)}
+      />
+      <LinearProgress
+        variant="determinate"
+        value={(currentIndex / (totalPageNum - 1)) * 100}
+      />
+      {MultistepForm}
+      <FixedBottomCTA
+        onClick={() => {
+          !isLastStep ? next() : submitHandler(formData);
         }}
+        size="large"
+        disabled={disableBtn}
       >
-        <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
-          <LockOutlinedIcon />
-        </Avatar>
-        <Typography variant="h1">회원가입</Typography>
-        <Box
-          component="form"
-          onSubmit={(e) => {
-            e.preventDefault();
-            submitHandler(formData);
-          }}
-          noValidate
-          sx={{ mt: 3 }}
-        >
-          <Grid container spacing={2}>
-            <Grid item xs={12}>
-              <TextField
-                required
-                autoFocus
-                fullWidth
-                id="email"
-                label="이메일"
-                name="email"
-                autoComplete="email"
-                onChange={(e) => changeHandler(e)}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <TextField
-                required
-                fullWidth
-                name="password"
-                label="비밀번호"
-                type="password"
-                id="password"
-                onChange={(e) => changeHandler(e)}
-                autoComplete="new-password"
-              />
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <TextField
-                name="id"
-                required
-                fullWidth
-                id="id"
-                onChange={(e) => changeHandler(e)}
-                label="유저 아이디"
-              />
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <TextField
-                required
-                fullWidth
-                id="nickname"
-                label="닉네임"
-                onChange={(e) => changeHandler(e)}
-                name="nickname"
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <FormControlLabel
-                control={<Checkbox value="allowExtraEmails" color="primary" />}
-                label="유용한 정보를 받아볼게요."
-              />
-            </Grid>
-          </Grid>
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            sx={{ mt: 3, mb: 2 }}
-          >
-            회원가입
-          </Button>
-          <Grid container justifyContent="flex-end">
-            <Grid item>
-              <Link href={SIGNIN}>
-                <Typography variant="label">
-                  Already have an account?{" "}
-                  <Typography
-                    variant="label"
-                    sx={{ color: "primary", fontWeight: "bold" }}
-                  >
-                    로그인 하러가기
-                  </Typography>
-                </Typography>
-              </Link>
-            </Grid>
-          </Grid>
-        </Box>
-      </Box>
-    </Container>
+        {!isLastStep ? "다음" : "투파이아 시작하기"}
+      </FixedBottomCTA>
+    </>
   );
 }
diff --git a/client/src/components/CustomAppbar.tsx b/client/src/components/CustomAppbar.tsx
index 8a1fb5c..9c353ee 100644
--- a/client/src/components/CustomAppbar.tsx
+++ b/client/src/components/CustomAppbar.tsx
@@ -40,7 +40,11 @@ const CustomAppbar = ({
             {prependButton}
           </AppbarButton>
         ) : (
-          <IconButton onClick={() => router.back()}>
+          <IconButton
+            onClick={(e) =>
+              onClickPrepend ? onClickPrepend(e) : router.back()
+            }
+          >
             <GoBackIcon />
           </IconButton>
         )}
@@ -67,7 +71,7 @@ const CustomAppbar = ({
 const AppbarButton = styled(Button)(() => ({
   minWidth: 40,
   fontWeight: "medium",
-  fontSize:'18px'
+  fontSize: "18px",
 }));
 
 export default memo(CustomAppbar);
diff --git a/client/src/components/FixedBottomCTA.tsx b/client/src/components/FixedBottomCTA.tsx
new file mode 100644
index 0000000..bc0044c
--- /dev/null
+++ b/client/src/components/FixedBottomCTA.tsx
@@ -0,0 +1,33 @@
+import { Button, ButtonProps, Paper } from "@mui/material";
+
+const FixedBottomCTA = ({ ...props }: ButtonProps) => {
+  return (
+    <>
+      <Button
+        sx={{
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: 56,
+          borderRadius: 0,
+          fontSize: "1rem",
+          zIndex: 2,
+        }}
+        {...props}
+      />
+      <Paper
+        sx={{
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: 56,
+          zIndex: 1,
+        }}
+      ></Paper>
+    </>
+  );
+};
+
+export default FixedBottomCTA;
diff --git a/client/src/components/auth/signup/SignupStep.tsx b/client/src/components/auth/signup/SignupStep.tsx
new file mode 100644
index 0000000..dda903f
--- /dev/null
+++ b/client/src/components/auth/signup/SignupStep.tsx
@@ -0,0 +1,50 @@
+import { TextFieldProps, Typography } from "@mui/material";
+import {
+  JSXElementConstructor,
+  ReactElement,
+  cloneElement,
+  useContext,
+  useEffect,
+} from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import SignupPageContext from "@/store/auth/SignupPageContext";
+
+interface SignupStepProps extends Omit<TextFieldProps, "onChange"> {
+  title: string;
+  children?: ReactElement<any, string | JSXElementConstructor<any>>;
+  error?: boolean;
+}
+
+const SignupStep = ({ title, children, error }: SignupStepProps) => {
+  const { setDisableBtn } = useContext(SignupPageContext);
+
+  useEffect(() => setDisableBtn(error ?? true), [error]);
+
+  return (
+    <AnimatePresence mode="popLayout">
+      <motion.div
+        initial={{ translateY: "100%",opacity:0 }}
+        animate={{ translateY: 0,opacity:1 }}
+        exit={{ translateY: "-100%",opacity:0 }}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "32px",
+          padding: "16px",
+        }}
+      >
+        <Typography
+          variant="h2"
+          color="primary.main"
+          fontWeight="bold"
+          whiteSpace="pre-line"
+        >
+          {title}
+        </Typography>
+        {children && cloneElement(children, { error })}
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export default SignupStep;
diff --git a/client/src/const/theme.ts b/client/src/const/theme.ts
index 35dc03c..476a5a5 100644
--- a/client/src/const/theme.ts
+++ b/client/src/const/theme.ts
@@ -92,6 +92,14 @@ const theme = createTheme({
         disableElevation: true,
         variant: "contained",
       },
+      styleOverrides:{
+        contained:{
+          ':disabled':{
+            backgroundColor:'#F5F5F5',
+            color:'#8A8A8A'
+          }
+        }
+      }
     },
     MuiButtonBase: {
       styleOverrides: { root: { gap: 4, borderRadius: 8 } },
diff --git a/client/src/hooks/useMultistepForm.ts b/client/src/hooks/useMultistepForm.ts
new file mode 100644
index 0000000..0e6bcfa
--- /dev/null
+++ b/client/src/hooks/useMultistepForm.ts
@@ -0,0 +1,62 @@
+import { useRouter } from "next/navigation";
+import { ReactElement, cloneElement, useEffect, useState } from "react";
+
+const useMultistepForm = (steps: ReactElement[], initialPage: number) => {
+  const [currentIndex, setCurrentIndex] = useState(initialPage);
+
+  useEffect(() => {
+    window.addEventListener("popstate", back);
+    return () => {
+      window.removeEventListener("popstate", back);
+    };
+  }, []);
+
+
+  /** 현재 index 직후의 컴포넌트로 이동하게 하는 함수 */
+  const next = () => {
+    setCurrentIndex((prev) => {
+      history.pushState(
+        { ...window.history.state, isMultiStepForm: true },
+        "",
+        location.href
+      );
+      if (prev < steps.length - 1) {
+        return prev + 1;
+      } else return prev;
+    });
+  };
+  /** 현재 index 직전의 컴포넌트로 이동하게 하는 함수 */
+  const back = () => {
+    setCurrentIndex((prev) => {
+      if (prev > 0) {
+        return prev - 1;
+      } else {
+        return prev;
+      }
+    });
+  };
+
+  /** number 타입의 Index 를 받아서 해당 index의 해당 index에 해당하는 컴포넌트로 이동하게 하는 함수 */
+  const goTo = (index: number) => {
+    setCurrentIndex(index);
+  };
+
+  /** 현재페이지가 첫 페이지인지 여부 */
+  const isFirstStep = currentIndex === 0;
+
+  /** 현재페이지가 마지막 페이지인지 여부 */
+  const isLastStep = currentIndex === steps.length - 1;
+
+  return {
+    currentIndex,
+    totalPageNum: steps.length,
+    next,
+    back,
+    goTo,
+    MultistepForm: cloneElement(steps[currentIndex], { key: currentIndex }),
+    isFirstStep,
+    isLastStep,
+  };
+};
+
+export default useMultistepForm;
diff --git a/client/src/queries/auth/useSignupMutation.tsx b/client/src/queries/auth/useSignupMutation.tsx
index c3dd030..639746b 100644
--- a/client/src/queries/auth/useSignupMutation.tsx
+++ b/client/src/queries/auth/useSignupMutation.tsx
@@ -6,11 +6,14 @@ import { useMutation } from "@tanstack/react-query";
 import useLoginMutation from "./useLoginMutation";
 import { useGlobalLoadingStore } from "@/store/useGlobalLoadingStore";
 import { useErrorHandler } from "@/utils/errorHandler";
+import { isAxiosError } from "axios";
+import { useGlobalSnackbarStore } from "@/store/useGlobalSnackbarStore";
 
 const useSignupMutation = () => {
   const { mutate: loginHandler } = useLoginMutation();
   const { setLoading } = useGlobalLoadingStore();
   const errorHandler = useErrorHandler();
+  const fireToast = useGlobalSnackbarStore(({ fireToast }) => fireToast);
 
   return useMutation({
     mutationKey: signupMuataionKey.all,
@@ -30,6 +33,9 @@ const useSignupMutation = () => {
     },
     onError: (err) => {
       errorHandler(err);
+      if (isAxiosError(err) && err.response) {
+        fireToast(err.response.data.detailMessage,'warning');
+      }
     },
   });
 };
diff --git a/client/src/store/auth/SignupPageContext.ts b/client/src/store/auth/SignupPageContext.ts
new file mode 100644
index 0000000..e138315
--- /dev/null
+++ b/client/src/store/auth/SignupPageContext.ts
@@ -0,0 +1,23 @@
+import { SignupRequirement } from "@/types/auth/signupRequirement";
+import { Dispatch, SetStateAction, createContext } from "react";
+
+interface SignupPageContextInterface {
+  formData: SignupRequirement;
+  setFormData: Dispatch<SetStateAction<SignupRequirement>>;
+  disableBtn: boolean;
+  setDisableBtn: Dispatch<SetStateAction<boolean>>;
+}
+
+const SignupPageContext = createContext<SignupPageContextInterface>({
+  formData: {
+    id: "",
+    email: "",
+    password: "",
+    nickname: "",
+  },
+  setFormData: () => {},
+  disableBtn: false,
+  setDisableBtn: () => {},
+});
+
+export default SignupPageContext;