Merge pull request #24 from JangAyeon/feat/modal-auth

Feat/modal-auth: 로그인/회원가입 상황에 따른 안내 모달
JangAyeon · Feb 24, 2024 · 68f14ef · 68f14ef
2 parents d511124 + 4cae1f5
commit 68f14ef
Show file tree

Hide file tree

Showing 29 changed files with 639 additions and 109 deletions.
diff --git a/apis/authApi.ts b/apis/authApi.ts
@@ -20,13 +20,22 @@ const setSession = (data: object) =>
 const getSession = () => supabaseClient.auth.getSession()
 
 const getUserProfile = () => supabaseClient.auth.getUser()
+
+const getDsIdValid = (dsId: FormDataEntryValue) =>
+  supabase
+    .from("23_final_user")
+    .select("dsTag, dsGlobalName")
+    .eq("dsTag", dsId)
+    .single()
+
 const authApi = {
   signup,
   login,
   logout,
   setSession,
   getSession,
   getUserProfile,
+  getDsIdValid,
 }
 
 export { authApi }
diff --git a/components/atoms/button/FormButton.tsx b/components/atoms/button/FormButton.tsx
@@ -0,0 +1,37 @@
+import styled from "@emotion/styled"
+
+import Text from "@/components/atoms/typo/Text"
+
+interface IFormButton {
+  height: number
+  width: number
+  text: string
+  type?: "submit" | "button"
+  onClick?: () => void
+}
+
+const FormButton = ({
+  height,
+  width,
+  text,
+  type = "submit",
+  onClick,
+}: IFormButton) => {
+  return (
+    <Button width={width} height={height} type={type} onClick={onClick}>
+      <Text weight="bold" size={1.6} color="--color-yellow-01" text={text} />
+    </Button>
+  )
+}
+
+export default FormButton
+
+type FormButtonStyle = Pick<IFormButton, "height" | "width">
+
+const Button = styled.button<FormButtonStyle>`
+  width: ${({ width }) => `${width}rem`};
+  height: ${({ height }) => `${height}rem`};
+  color: var(--color-yellow-01);
+  background-color: var(--color-green-04);
+  border-radius: 0 1.5rem 1.5rem 1.5rem;
+`
diff --git a/components/atoms/input/TextInput.tsx b/components/atoms/input/TextInput.tsx
@@ -10,14 +10,15 @@ export interface ITextInput {
   name: string
   autoComplete?: string
   width: number
-  height: number
+  height?: number
   color: string
   backgroundColor: string
   imgSrc?: string
   imgWidth?: number
   imgHeigth?: number
   fontSize: number
-  padding: number
+  padding?: number
+  margin?: number
   btnType?: "submit"
 }
 
@@ -38,13 +39,15 @@ const TextInput = ({
   fontSize,
   padding,
   btnType,
+  margin,
 }: ITextInput) => {
   return (
     <InputWrapper
       backgroundColor={backgroundColor}
       padding={padding}
       width={width}
       height={height}
+      margin={margin}
     >
       <Input
         value={value}
@@ -72,7 +75,7 @@ const TextInput = ({
 
 export type InputWrapperStyle = Pick<
   ITextInput,
-  "backgroundColor" | "padding" | "width" | "height"
+  "backgroundColor" | "padding" | "width" | "height" | "margin"
 >
 export type InputStyle = Pick<ITextInput, "color" | "fontSize">
 
@@ -81,7 +84,9 @@ export const InputWrapper = styled.div<InputWrapperStyle>`
   height: ${({ height }) => `${height}rem`};
   background-color: ${({ backgroundColor }) => `var(${backgroundColor})`};
   padding: ${({ padding }) => `0 ${padding}rem`};
+  margin-bottom: ${({ margin }) => (margin ? `${margin}rem` : 0)};
   display: flex;
+
   flex-direction: row;
   justify-items: space-between;
   align-items: center;

diff --git a/components/atoms/input/UnderLineInput.tsx b/components/atoms/input/UnderLineInput.tsx
@@ -28,14 +28,15 @@ const UnderLineInput = ({
   padding,
   borderColor,
   opacity,
+  margin,
 }: IUnderLineInput) => {
   return (
     <UnderLineInputWrapper
-      height={height}
       width={width}
       backgroundColor={backgroundColor}
       padding={padding}
       borderColor={borderColor}
+      margin={margin}
     >
       <Input
         value={value}
@@ -64,6 +65,7 @@ type UnderLineInputStyle = InputStyle & {
 
 const UnderLineInputWrapper = styled(InputWrapper)<UnderLineWrapperStyle>`
   border-bottom: ${({ borderColor }) => `0.1rem solid var(${borderColor})`};
+  margin-bottom: ${({ margin }) => (margin ? `${margin}rem` : "0")};
 `
 
 const Input = styled(Input_)<UnderLineInputStyle>`

diff --git a/components/atoms/logo/Logo.tsx b/components/atoms/logo/Logo.tsx
@@ -1,21 +1,22 @@
 import styled from "@emotion/styled"
 import Image from "next/image"
 
-interface ILogoSrc {
+interface ILogo {
   width: number
   height: number
   alt: string
   type: "main" | "header"
+  padding?: number
 }
 
 const LogoSrc = {
   main: "/assets/logo/vertical.svg",
   header: "/assets/logo/horizontal.svg",
 }
-const Logo = ({ width, height, alt, type }: ILogoSrc) => {
+const Logo = ({ width, height, alt, type, padding }: ILogo) => {
   return (
     <>
-      <LogoWrapper>
+      <LogoWrapper padding={padding}>
         <Image src={LogoSrc[type]} width={width} height={height} alt={alt} />
       </LogoWrapper>
     </>
@@ -24,7 +25,9 @@ const Logo = ({ width, height, alt, type }: ILogoSrc) => {
 
 export default Logo
 
-const LogoWrapper = styled.div`
+type LogoWrapperStyle = Pick<ILogo, "padding">
+const LogoWrapper = styled.div<LogoWrapperStyle>`
   width: fit-content;
   height: fit-content;
+  padding-top: ${({ padding }) => (padding ? `${padding}rem` : "0")};
 `
diff --git a/components/forms/LoginForm.tsx b/components/forms/LoginForm.tsx
@@ -3,22 +3,43 @@ 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 Text from "@/components/atoms/typo/Text"
+import AuthModal, {
+  AuthModalProps,
+  IAuthModal,
+} from "@/components/modal/AuthModal"
 
 import { useInput } from "@/hooks/useInput"
 
 import { authApi } from "@/apis/authApi"
 
+import { ILoginForm } from "@/types/common/authProps"
+
+import { LoginValidation } from "@/utils/formValidation"
+
 const TextInputStyles = {
   color: "--color-green-04",
   backgroundColor: "--color-yellow-01",
   width: 28.0,
   height: 4.0,
   fontSize: 1.6,
   padding: 1.6,
+  margin: 2.4,
 }
 
-const SignupForm = () => {
+const LoginForm = () => {
+  const [isModalOpen, setIsModalOpen] = useState<AuthModalProps>({
+    state: "success",
+    text: "",
+    isOpen: false,
+  })
+
+  const handleModalOpen = (text: string, state: IAuthModal["state"]) => {
+    // console.log("open")
+    setIsModalOpen({ state, text, isOpen: true })
+  }
   const [email, onChangeEmail, setEmail] = useInput("")
   const [emailFlagCheck, setEmailFlagCheck] = useState(false)
   const LS_EMAIL = localStorage.getItem("LS_EMAIL")
@@ -40,25 +61,29 @@ const SignupForm = () => {
     e.preventDefault()
 
     const loginForm = new FormData(e.currentTarget)
-    const params = {
+    const params: ILoginForm = {
       email: loginForm.get("email"),
       password: loginForm.get("password"),
     }
+    LoginValidation(params, setIsModalOpen)
 
     handleLocalStorageEmail()
-
-    try {
-      const {
-        data: { user, session },
-        error,
-      } = await authApi.login(params)
-      if (user && session) {
-        alert("로그인에 성공함")
-
-        router.reload() // middleware.ts 거쳐 가기 위함
+    if (isModalOpen.state === "success" && !isModalOpen.isOpen) {
+      try {
+        const {
+          data: { user, session },
+          error,
+        } = await authApi.login(params)
+        if (user && session) {
+          handleModalOpen("로그인에 성공하였습니다.", "success")
+          router.reload() // middleware.ts 거쳐 가기 위함
+        } else {
+          // alert(error?.message)
+          handleModalOpen("아이디 또는 비밀번호가 올바르지 않습니다", "fail")
+        }
+      } catch (error: any) {
+        handleModalOpen(error.message, "fail")
       }
-    } catch (error) {
-      alert(error)
     }
   }
 
@@ -72,12 +97,20 @@ const SignupForm = () => {
   return (
     <>
       <div>
-        <form onSubmit={handleLogin}>
+        {isModalOpen && (
+          <AuthModal
+            state={isModalOpen.state}
+            text={isModalOpen.text}
+            isOpen={isModalOpen.isOpen}
+            onClose={() => setIsModalOpen({ ...isModalOpen, isOpen: false })}
+          />
+        )}
+        <FormWrapper onSubmit={handleLogin}>
           <TextInput
             value={email}
             onChange={onChangeEmail}
             placeholder="이메일"
-            type="email"
+            type="string"
             name="email"
             autoComplete="email"
             {...TextInputStyles}
@@ -89,22 +122,27 @@ const SignupForm = () => {
             autoComplete="current-password"
             {...TextInputStyles}
           />
-          <div>
+          <CheckBoxWrapper>
             <CheckBox
               type="checkbox"
               id="rememberEmail"
               checked={emailFlagCheck}
               onChange={() => handleEmailFlagCheck()}
             />
-            <label htmlFor="rememberId"> 아이디 저장</label>
-          </div>
-          <Button width={28} height={4.0} type="submit">
-            로그인{" "}
-          </Button>
-        </form>
+            <label htmlFor="rememberId">
+              <Text
+                text={"아이디 기억하기"}
+                size={1.2}
+                weight="normal"
+                color={"--color-green-04"}
+              />
+            </label>
+          </CheckBoxWrapper>
+          <FormButton width={28} height={4.0} type="submit" text="로그인" />
+        </FormWrapper>
       </div>
       <div>
-        <div>
+        <AuthTypeButton>
           <BorderPointBtn
             width={28.0}
             height={4.0}
@@ -114,21 +152,38 @@ const SignupForm = () => {
             textColor="--color-green-04"
             link="/auth?type=signup"
           />
-        </div>
+        </AuthTypeButton>
       </div>
     </>
   )
 }
 
-export default SignupForm
+export default LoginForm
 
-const Button = styled.button<{ height: number; width: number }>`
-  width: ${({ width }) => `${width}rem`};
-  height: ${({ height }) => `${height}rem`};
-  color: var(--color-yellow-01);
-  background-color: var(--color-green-04);
+type CheckBoxStyle = {
+  checked: boolean
+}
+
+const CheckBox = styled.input<CheckBoxStyle>`
+  border: solid 0.3rem var(--color-green-04);
+  width: 1rem;
+  height: 1rem;
+  background-color: ${({ checked }) =>
+    checked ? `var(--color-green-04)` : "transparent"};
+`
+
+const FormWrapper = styled.form``
+
+const CheckBoxWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 1.2rem;
+  label {
+    margin-left: 0.8rem;
+  }
 `
 
-const CheckBox = styled.input`
-  border: solid 0.7rem black;
+const AuthTypeButton = styled.div`
+  margin-top: 1.2rem;
 `