feat: login, signup modal을 auth modal로 통합

client/components/Header/AuthButton.tsx

@@ -21,7 +21,7 @@ const AuthButton = ({ isLoggedIn }: AuthButtonProps) => {
     if (isLoggedIn) {
       logoutMutate();
     } else {
-      openOverlay(OVERLAYS.LOGIN_MODAL);
+      openOverlay(OVERLAYS.AUTH_MODAL, { type: "LOGIN" });
     }
   };
 

client/components/shared/Overlays/AuthModal/AuthModal.tsx

@@ -0,0 +1,44 @@
+import ModalView from "@components/shared/ModalView";
+import SwitchCase from "@components/shared/SwitchCase";
+import React, { useState } from "react";
+import LoginForm from "./LoginForm";
+import SignUpForm from "./SignUpForm";
+import { SocialLoginArea } from "@components/shared/SocialLoginArea";
+
+interface Props {
+  type: "LOGIN" | "SIGN_UP";
+  onExit: (time: number) => void;
+}
+
+const AuthModal = ({ type, onExit }: Props) => {
+  const [mode, setMode] = useState(type);
+  const [isClose, setIsClose] = useState(false);
+
+  const closeWithAnimation = () => {
+    setIsClose(true);
+    onExit(500);
+  };
+  return (
+    <ModalView
+      title={mode === "LOGIN" ? "로그인" : "회원가입"}
+      onClose={closeWithAnimation}
+      isClose={isClose}
+    >
+      <SwitchCase
+        value={mode}
+        caseBy={{
+          LOGIN: (
+            <LoginForm
+              onClose={closeWithAnimation}
+              openSignUpModal={() => setMode("SIGN_UP")}
+            />
+          ),
+          SIGN_UP: <SignUpForm onClose={closeWithAnimation} />,
+        }}
+      />
+      <SocialLoginArea />
+    </ModalView>
+  );
+};
+
+export default AuthModal;

client/components/shared/Overlays/LoginModal/LoginModal.tsx → client/components/shared/Overlays/AuthModal/LoginForm.tsx

@@ -1,33 +1,23 @@
-import React, { useState, type FormEventHandler } from "react";
+import React, { FormEventHandler } from "react";
 import styles from "./styles.module.scss";
+import { useInput } from "@hooks";
 import { useLogin } from "@hooks/query";
 import { toast } from "react-toastify";
 import { MESSAGE } from "@constants";
-import { SocialLoginArea } from "@components/shared/SocialLoginArea";
-import { useOverlay, useInput } from "@hooks";
-import { OVERLAYS } from "../Overlays";
-import ModalView from "@components/shared/ModalView";
 
 interface Props {
   onClose: () => void;
-  onExit: (time: number) => void;
+  openSignUpModal: () => void;
 }
 
-const LoginModal = ({ onClose, onExit }: Props) => {
-  const [isClose, setIsClose] = useState(false);
-  const { openOverlay } = useOverlay();
+const LoginForm = ({ onClose, openSignUpModal }: Props) => {
   const [email, , onChangeEmail] = useInput("");
   const [password, , onChangePassword] = useInput("");
 
-  const closeWithAnimation = () => {
-    setIsClose(true);
-    onExit(500);
-  };
-
   const { mutate: loginMutate } = useLogin({
     onSuccess: () => {
       toast.success(MESSAGE.LOGIN_SUCCESS);
-      closeWithAnimation();
+      onClose();
     },
     onError: (error) => {
       toast.error(error.message);
@@ -48,7 +38,7 @@ const LoginModal = ({ onClose, onExit }: Props) => {
   };
 
   return (
-    <ModalView title="로그인" onClose={closeWithAnimation} isClose={isClose}>
+    <>
       <form className={styles.Form} onSubmit={onSubmit}>
         <input
           value={email}
@@ -65,18 +55,11 @@ const LoginModal = ({ onClose, onExit }: Props) => {
         />
         <button>로그인</button>
       </form>
-      <button
-        className={styles.SignUpButton}
-        onClick={() => {
-          onClose();
-          openOverlay(OVERLAYS.SIGNUP_MODAL);
-        }}
-      >
+      <button className={styles.SignUpButton} onClick={openSignUpModal}>
         회원가입
       </button>
-      <SocialLoginArea />
-    </ModalView>
+    </>
   );
 };
 
-export default LoginModal;
+export default LoginForm;

client/components/shared/Overlays/SignUpModal/SignUpModal.tsx → client/components/shared/Overlays/AuthModal/SignUpForm.tsx

@@ -1,33 +1,23 @@
-import React, { FormEventHandler, useState } from "react";
-import styles from "./styles.module.scss";
+import React, { FormEventHandler } from "react";
 import { useInput } from "@hooks";
-import { StateUpdater } from "@Types/utils";
-import { SocialLoginArea } from "@components/shared/SocialLoginArea";
+import styles from "./styles.module.scss";
 import { useSignUp } from "@hooks/query";
 import { toast } from "react-toastify";
 import { MESSAGE } from "@constants";
-import ModalView from "@components/shared/ModalView";
 
 interface Props {
   onClose: () => void;
-  onExit: (time: number) => void;
 }
 
-const SignUpModal = ({ onClose, onExit }: Props) => {
-  const [isClose, setIsClose] = useState(false);
+const SignUpForm = ({ onClose }: Props) => {
   const [email, , onChangeEmail] = useInput("");
   const [password, , onChangePassword] = useInput("");
   const [passwordCheck, , onChangePasswordCheck] = useInput("");
   const [nickname, , onChangeNickname] = useInput("");
 
-  const closeWithAnimation = () => {
-    setIsClose(true);
-    onExit(500);
-  };
-
   const { mutate: signUpMutate } = useSignUp({
     onSuccess: () => {
-      closeWithAnimation();
+      onClose();
       toast.success(MESSAGE.SIGHUP_SUCCESS);
     },
     onError: (error) => {
@@ -46,7 +36,7 @@ const SignUpModal = ({ onClose, onExit }: Props) => {
   };
 
   return (
-    <ModalView title="회원가입" onClose={closeWithAnimation} isClose={isClose}>
+    <>
       <form className={styles.Form} onSubmit={onSubmit}>
         <input
           value={email}
@@ -76,9 +66,8 @@ const SignUpModal = ({ onClose, onExit }: Props) => {
         />
         <button>회원가입</button>
       </form>
-      <SocialLoginArea />
-    </ModalView>
+    </>
   );
 };
 
-export default SignUpModal;
+export default SignUpForm;

client/components/shared/Overlays/AuthModal/index.ts

@@ -0,0 +1 @@
+export { default } from "./AuthModal";

client/components/shared/Overlays/LoginModal/styles.module.scss → client/components/shared/Overlays/AuthModal/styles.module.scss

@@ -31,11 +31,3 @@
     color: var(--primary1);
   }
 }
-
-.Overlay {
-  background-color: rgba(0, 0, 0, 0.6);
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  cursor: pointer;
-}

client/components/shared/Overlays/MobileMenu/MobileMenu.tsx

@@ -27,12 +27,12 @@ const MobileMenu = ({ onClose, onExit }: Props) => {
 
   const handleClickLoginButton = () => {
     onClose();
-    openOverlay(OVERLAYS.LOGIN_MODAL);
+    openOverlay(OVERLAYS.AUTH_MODAL, { type: "LOGIN" });
   };
 
   const handleClickSignUpButton = () => {
     onClose();
-    openOverlay(OVERLAYS.SIGNUP_MODAL);
+    openOverlay(OVERLAYS.AUTH_MODAL, { type: "SIGN_UP" });
   };
 
   return (

client/components/shared/Overlays/Overlays.tsx

@@ -5,11 +5,7 @@ import { useOverlay } from "@hooks";
 import React from "react";
 import dynamic from "next/dynamic";
 
-const LoginModal = dynamic(() => import("./LoginModal"), {
-  ssr: false,
-});
-
-const SignUpModal = dynamic(() => import("./SignUpModal"), {
+const AuthModal = dynamic(() => import("./AuthModal"), {
   ssr: false,
 });
 
@@ -22,8 +18,7 @@ const MobileMenuModal = dynamic(() => import("./MobileMenu"), {
 });
 
 export const OVERLAYS = {
-  LOGIN_MODAL: LoginModal,
-  SIGNUP_MODAL: SignUpModal,
+  AUTH_MODAL: AuthModal,
   SERIES_FORM_MODAL: SeriesFormModal,
   MOBILE_MENU: MobileMenuModal,
 };