회원가입-멀티스탭폼-제작 (#71)

* Refactor : 회원가입 실패 이유 표출 * Refactor : 앱바 기본동작 추가 * Minor : Disable 버튼 스타일 추가 * New : FixedBottomCTA 버튼 추가 * Refactor : 회원가입 Multi-step-form 적용
potenday-project · Dec 4, 2023 · e42380a · e42380a
1 parent ffa54e6
commit e42380a
Show file tree

Hide file tree

Showing 9 changed files with 389 additions and 128 deletions.
diff --git a/client/src/app/(logoutOnly)/auth/signup/layout.tsx 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
@@ -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
@@ -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
@@ -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;