feat: make Auth re-usable for form state

components/forms/LoginForm.tsx

@@ -1,11 +1,12 @@
 import styled from "@emotion/styled"
+import { fail } from "assert"
 import { useRouter } from "next/router"
 import { FormEvent, useEffect, useState } from "react"
 
 import BorderPointBtn from "@/components/atoms/button/BorderPointBtn"
 import FormButton from "@/components/atoms/button/FormButton"
 import TextInput from "@/components/atoms/input/TextInput"
-import AuthModal from "@/components/modal/AuthModal"
+import AuthModal, { IAuthModal } from "@/components/modal/AuthModal"
 
 import { useInput } from "@/hooks/useInput"
 
@@ -20,12 +21,18 @@ const TextInputStyles = {
  padding: 1.6,
 }
 
+type ModalProps = Pick<IAuthModal, "isOpen" | "state" | "text">
+
 const SignupForm = () => {
- const [isModalOpen, setIsModalOpen] = useState(false)
+ const [isModalOpen, setIsModalOpen] = useState<ModalProps>({
+ state: "fail",
+ text: "",
+ isOpen: false,
+ })
 
- const handleModalOpen = () => {
+ const handleModalOpen = (text: string, state: IAuthModal["state"]) => {
  // console.log("open")
- setIsModalOpen(true)
+ setIsModalOpen({ state, text, isOpen: true })
  }
  const [email, onChangeEmail, setEmail] = useInput("")
  const [emailFlagCheck, setEmailFlagCheck] = useState(false)
@@ -66,7 +73,7 @@ const SignupForm = () => {
  router.reload() // middleware.ts 거쳐 가기 위함
  } else {
  // alert(error?.message)
- handleModalOpen()
+ handleModalOpen("아이디 또는 비밀번호가 올바르지 않습니다", "fail")
  }
  } catch (error) {
  alert(error)
@@ -85,10 +92,10 @@ const SignupForm = () => {
  <div>
  {isModalOpen && (
  <AuthModal
- state="fail"
- text="아이디 또는 비밀번호가 올바르지 않씁니다"
- isOpen={isModalOpen}
- onClose={() => setIsModalOpen(false)}
+ state={isModalOpen.state}
+ text={isModalOpen.text}
+ isOpen={isModalOpen.isOpen}
+ onClose={() => setIsModalOpen({ ...isModalOpen, isOpen: false })}
  />
  )}
  <form onSubmit={handleLogin}>

components/modal/AuthModal.tsx

@@ -8,7 +8,7 @@ import Modal from "@/components/modal/Modal"
 import { ModalProps } from "@/types/common/modalProps"
 import { Color } from "@/types/common/styleProps"
 
-interface IAuthModal extends ModalProps {
+export interface IAuthModal extends ModalProps {
  text: string
  state: "fail" | "success"
 }