회원가입-서버통신-연결 (#24)

* Refactor : 모달 포커스 기능 제거

* Refactor : 패스 비교로직 개선

* New : 회원가입 Mutation 추가

* Refactor : Login 컴포넌트 분리

* New : 회원가입 서버통신 연결

* Refactor : 로그인 이후 라우트 캐시 제거

client/src/app/(logoutOnly)/auth/login/page.tsx

@@ -36,39 +36,52 @@ const LoginPage = () => {
           }}
         >
           {/* heading */}
-          <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
-            <LockOutlinedIcon />
-          </Avatar>
-          <Typography component="h1" variant="h1">
-            {nameOfApp}
-          </Typography>
+          <Heading />
           {/* form */}
           <SigninForm />
-          <Grid container>
-            <Grid item xs>
-              <Link href={FORGOTPASSWORD}>
-                <Typography variant="label">비밀번호 재설정</Typography>
-              </Link>
-            </Grid>
-            <Grid item>
-              <Typography variant="label">
-                계정이 없으신가요?{" "}
-                <Link href={SIGNUP}>
-                  <Typography
-                    variant="label"
-                    color="primary"
-                    sx={{ fontWeight: "bold" }}
-                  >
-                    회원가입
-                  </Typography>
-                </Link>
-              </Typography>
-            </Grid>
-          </Grid>
+          {/* CTA 하단 비밀번호 재설정, 회원가입 */}
+          <CTA />
         </Box>
       </Grid>
     </Grid>
   );
 };
 
-export default LoginPage;
+const CTA = () => (
+  <Grid container>
+    <Grid item xs>
+      <Link href={FORGOTPASSWORD}>
+        <Typography variant="label">비밀번호 재설정</Typography>
+      </Link>
+    </Grid>
+    <Grid item>
+      <Typography variant="label">
+        계정이 없으신가요?{" "}
+        <Link href={SIGNUP}>
+          <Typography
+            variant="label"
+            color="primary"
+            sx={{ fontWeight: "bold" }}
+          >
+            회원가입
+          </Typography>
+        </Link>
+      </Typography>
+    </Grid>
+  </Grid>
+);
+
+const Heading = () => (
+  <>
+    <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
+      <LockOutlinedIcon />
+    </Avatar>
+    <Typography component="h1" variant="h1">
+      {nameOfApp}
+    </Typography>
+  </>
+);
+
+
+
+export default Object.assign(LoginPage, { SigninForm, CTA, Heading });

client/src/app/(logoutOnly)/auth/signup/page.tsx

@@ -13,8 +13,24 @@ 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 useSignupMutation from "@/queries/auth/useSignupMutation";
 
 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();
+
   return (
     <Container component="main" maxWidth="xs">
       <CssBaseline />
@@ -29,17 +45,27 @@ export default function SignUpPage() {
         <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
           <LockOutlinedIcon />
         </Avatar>
-        <Typography variant="h1">Sign up</Typography>
-        <Box component="form" noValidate sx={{ mt: 3 }}>
+        <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}>
@@ -50,17 +76,18 @@ export default function SignUpPage() {
                 label="비밀번호"
                 type="password"
                 id="password"
+                onChange={(e) => changeHandler(e)}
                 autoComplete="new-password"
               />
             </Grid>
             <Grid item xs={12} sm={6}>
               <TextField
-                name="userId"
+                name="id"
                 required
                 fullWidth
-                id="userId"
+                id="id"
+                onChange={(e) => changeHandler(e)}
                 label="유저 아이디"
-                autoFocus
               />
             </Grid>
             <Grid item xs={12} sm={6}>
@@ -69,6 +96,7 @@ export default function SignUpPage() {
                 fullWidth
                 id="nickname"
                 label="닉네임"
+                onChange={(e) => changeHandler(e)}
                 name="nickname"
               />
             </Grid>
@@ -96,7 +124,7 @@ export default function SignUpPage() {
                     variant="label"
                     sx={{ color: "primary", fontWeight: "bold" }}
                   >
-                    Sign in
+                    로그인 하러가기
                   </Typography>
                 </Typography>
               </Link>

client/src/app/@Modal/(.)auth/login/page.tsx

@@ -0,0 +1,16 @@
+import LogoutOnlyLayout from "@/app/(logoutOnly)/layout";
+import ModalWrapper from "@/components/ModalWrapper";
+import LoginPage from "@/app/(logoutOnly)/auth/login/page";
+
+const LoginModalPage = () => {
+  return (
+    <LogoutOnlyLayout>
+      <ModalWrapper>
+        <LoginPage.SigninForm />
+        <LoginPage.CTA />
+      </ModalWrapper>
+    </LogoutOnlyLayout>
+  );
+};
+
+export default LoginModalPage;

client/src/app/@Modal/(.)new-post/page.tsx

@@ -1,12 +1,12 @@
+import AuthProtectorlayout from "@/app/(protectedRoute)/layout";
 import ModalWrapper from "@/components/ModalWrapper";
-import React, { ReactNode } from "react";
 
-type Props = {
-  children: ReactNode;
-};
-
-const NewPostPage = ({ children }: Props) => {
-  return <ModalWrapper>{children}</ModalWrapper>;
+const NewPostPage = () => {
+  return (
+    <AuthProtectorlayout>
+      <ModalWrapper>{"페이지"}</ModalWrapper>
+    </AuthProtectorlayout>
+  );
 };
 
 export default NewPostPage;

client/src/app/@Modal/layout.tsx

@@ -1,8 +1,13 @@
 "use client";
 
+import { NEW_POST, SIGNIN } from "@/const/clientPath";
 import { usePathname } from "next/navigation";
 
 export default function Layout({ children }: any) {
   const pathname = usePathname();
-  return pathname.startsWith("/post/") ? children : null;
+  const allowedPath = ["/post/", NEW_POST, SIGNIN];
+
+  return allowedPath.some((path) => pathname.startsWith(path))
+    ? children
+    : null;
 }

client/src/components/ModalWrapper.tsx

@@ -24,6 +24,7 @@ const ModalWrapper = ({ children, disableBox }: ModalInterface) => {
       open={true}
       onClick={() => back()}
       disablePortal
+      disableAutoFocus
       sx={{
         alignItems: "center",
         justifyContent: "center",
@@ -38,7 +39,7 @@ const ModalWrapper = ({ children, disableBox }: ModalInterface) => {
             p: disableBox ? 0 : 4,
             maxWidth: "90%",
             maxHeight: "90%",
-            overflowY: "scroll",
+            overflowY: "auto",
           }}
         >
           {children}

client/src/const/serverPath.ts

@@ -2,6 +2,11 @@
  * 로그인 API Path
  */
 export const LOGIN_API_PATH = '/user/login' as const
+
+/**
+ * 회원가입 API Path
+ */
+export const SIGNUP_API_PATH = '/user/signup' as const
 /**
  * 내 정보를 받아오는 Path
  */

client/src/queries/auth/useLoginMutation.tsx

@@ -21,6 +21,7 @@ const useLoginMutation = () => {
     onSuccess: async ({ token }) => {
       localStorage?.setItem("accessToken", token);
       queryClient.invalidateQueries({ queryKey: userInfoQueryKeys.all });
+      router.refresh();
       router.push(HOME);
     },
     onError: (error: AxiosError<{ detailMessage: string }>) =>

client/src/queries/auth/useSignupMutation.tsx

@@ -0,0 +1,40 @@
+// import { SIGNIN } from "@/const/clientPath";
+import { SIGNUP_API_PATH } from "@/const/serverPath";
+import axios from "@/libs/axios";
+import { SignupRequirement } from "@/types/auth/signupRequirement";
+import { useMutation } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import useLoginMutation from "./useLoginMutation";
+
+const useSignupMutation = () => {
+  const router = useRouter();
+  const { mutate: loginHandler } = useLoginMutation();
+
+  return useMutation({
+    mutationKey: signupMuataionKey.all,
+    mutationFn: async (formData: SignupRequirement) => {
+      const { id, password } = formData;
+      await signupHandler(formData);
+      return { id, password };
+    },
+    onSuccess: async ({ id, password }) => {
+      loginHandler({ id, password });
+    },
+  });
+};
+
+export const signupHandler = async (props: SignupRequirement) => {
+  const { data } = await axios.post<{ userNo: number }>(SIGNUP_API_PATH, {
+    ...props,
+  });
+  return data;
+};
+
+export const signupMuataionKey = {
+  /**
+   * 모든 회원가입 관련 키
+   */
+  all: ["signup"] as const,
+};
+
+export default useSignupMutation;