feat: dsId is valid user Id checking

JangAyeon · Feb 24, 2024 · ed7e599 · ed7e599
1 parent 855cb94
commit ed7e599
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 53 deletions.
diff --git a/apis/authApi.ts b/apis/authApi.ts
@@ -22,7 +22,11 @@ const getSession = () => supabaseClient.auth.getSession()
 const getUserProfile = () => supabaseClient.auth.getUser()
 
 const getDsIdValid = (dsId: FormDataEntryValue) =>
- supabaseClient.from("23_final_user").select("*").eq("dsTag", dsId)
+ supabase
+ .from("23_final_user")
+ .select("dsTag, dsGlobalName")
+ .eq("dsTag", dsId)
+ .single()
 
 const authApi = {
  signup,

diff --git a/components/atoms/button/FormButton.tsx b/components/atoms/button/FormButton.tsx
@@ -7,11 +7,18 @@ interface IFormButton {
  width: number
  text: string
  type?: "submit" | "button"
+ onClick?: () => void
 }
 
-const FormButton = ({ height, width, text, type = "submit" }: IFormButton) => {
+const FormButton = ({
+ height,
+ width,
+ text,
+ type = "submit",
+ onClick,
+}: IFormButton) => {
  return (
- <Button width={width} height={height} type={type}>
+ <Button width={width} height={height} type={type} onClick={onClick}>
  <Text weight="bold" size={1.6} color="--color-yellow-01" text={text} />
  </Button>
  )

diff --git a/components/forms/SignupForm.tsx b/components/forms/SignupForm.tsx
@@ -1,6 +1,13 @@
 import styled from "@emotion/styled"
-import { useRouter } from "next/router"
-import { FormEvent, useState } from "react"
+import router, { useRouter } from "next/router"
+import {
+ FormEvent,
+ MouseEvent,
+ MouseEventHandler,
+ useEffect,
+ useRef,
+ useState,
+} from "react"
 
 import BorderPointBtn from "@/components/atoms/button/BorderPointBtn"
 import FormButton from "@/components/atoms/button/FormButton"
@@ -10,11 +17,11 @@ import AuthModal, { AuthModalProps } from "@/components/modal/AuthModal"
 
 import { authApi } from "@/apis/authApi"
 
-import { ISignupForm } from "@/types/common/authProps"
+import { IAuthSBInfo, ISignupForm } from "@/types/common/authProps"
 import { ModalProps } from "@/types/common/modalProps"
 
 import { setUserInfo } from "@/utils/auth"
-import { SignUpValidation } from "@/utils/formValidation"
+import { SignUpValidation, dsIdCheck } from "@/utils/formValidation"
 
 const Input_Common = {
  width: 20.3,
@@ -56,6 +63,7 @@ const Input_List = [
  type: "text",
  name: "dsId",
  ...Input_Common,
+ width: 14,
  },
 ]
 
@@ -67,12 +75,29 @@ const SignupForm = () => {
  isOpen: false,
  })
 
- const handleDsIdCheck = (e: any) => {
- const signupForm = new FormData(e.target.form)
+ const [isDsIdValid, setIsDsIdValid] = useState(false)
+
+ const handleDsIdCheck = async (e: MouseEvent<HTMLButtonElement>) => {
+ const { form } = e.target as HTMLFormElement
+ const signupForm = new FormData(form)
  const dsId = signupForm.get("dsId")
- console.log(dsId)
+ const text = await dsIdCheck(dsId, setIsDsIdValid)
+ console.log(dsId, text)
+ if (text) {
+ setIsModalOpen({
+ state: isDsIdValid ? "success" : "fail",
+ text,
+ isOpen: true,
+ })
+ console.log(isDsIdValid)
+ if (!isDsIdValid) {
+ form.dsId.value = ""
+ }
+ }
  }
 
+ useEffect(() => {}, [isDsIdValid])
+
  const handleModalOpen = (text: string, state: AuthModalProps["state"]) => {
  // console.log("open")
  setIsModalOpen({ state, text, isOpen: true })
@@ -88,31 +113,31 @@ const SignupForm = () => {
  options: {
  data: {
  name: signupForm.get("name"),
- dsId: signupForm.get("dsId") || "",
+ dsId: isDsIdValid ? signupForm.get("dsId") : "",
  },
  },
  }
 
  SignUpValidation(params, setIsModalOpen)
 
- /*
- try {
- const {
- data: { user, session },
- error,
- } = await authApi.signup(params)
- if (user && session) {
- setUserInfo({ user, session } as IAuthSBInfo)
- handleModalOpen("회원가입에 성공하였습니다.", "success")
- router.replace("/")
- } else {
- handleModalOpen("사용 불가능한 이메일 및 비밀번호입니다.", "fail")
+ if (isModalOpen.state === "success" && !isModalOpen.isOpen) {
+ try {
+ const {
+ data: { user, session },
+ error,
+ } = await authApi.signup(params)
+ if (user && session) {
+ setUserInfo({ user, session } as IAuthSBInfo)
+ handleModalOpen("회원가입에 성공하였습니다.", "success")
+ router.replace("/")
+ } else {
+ handleModalOpen("사용 불가능한 이메일 및 비밀번호입니다.", "fail")
+ }
+ } catch (error) {
+ console.log(error)
+ alert(error)
  }
- } catch (error) {
- console.log(error)
- alert(error)
  }
- */
  }
 
  return (
@@ -126,7 +151,7 @@ const SignupForm = () => {
  onClose={() => setIsModalOpen({ ...isModalOpen, isOpen: false })}
  />
  )}
- <form onSubmit={handleSignup}>
+ <FormWrapper onSubmit={handleSignup}>
  {Input_List.map((item, idx) => (
  <FormInputWrapper key={idx}>
  <Text
@@ -138,33 +163,37 @@ const SignupForm = () => {
  <UnderLineInput {...item} key={idx} />
 
  {item.name === "dsId" && (
- <button onClick={(e) => handleDsIdCheck(e)}>이름 확인</button>
+ <DsIdCheckButton type="button" onClick={handleDsIdCheck}>
+ 존재 <br />
+ 확인
+ </DsIdCheckButton>
  )}
  </FormInputWrapper>
  ))}
 
  <FormButton width={28} height={4.0} type="submit" text="회원가입" />
- </form>
- </div>
- <div>
- <AuthTypeButton>
- <BorderPointBtn
- width={28.0}
- height={4.0}
- mainColor="transparent"
- text="로그인"
- textSize={1.6}
- textColor="--color-green-04"
- link="/auth?type=login"
- />
- </AuthTypeButton>
+ </FormWrapper>
  </div>
+
+ <AuthTypeButton>
+ <BorderPointBtn
+ width={28.0}
+ height={4.0}
+ mainColor="transparent"
+ text="로그인"
+ textSize={1.6}
+ textColor="--color-green-04"
+ link="/auth?type=login"
+ />
+ </AuthTypeButton>
  </>
  )
 }
 
 export default SignupForm
 
+const FormWrapper = styled.form``
+
 const FormInputWrapper = styled.div`
  display: flex;
  flex-direction: row;
@@ -177,3 +206,12 @@ const FormInputWrapper = styled.div`
 const AuthTypeButton = styled.div`
  margin-top: 1.2rem;
 `
+const DsIdCheckButton = styled.button`
+ width: 5.2rem;
+ height: 4rem;
+ background-color: var(--color-green-04);
+ border-radius: 0 1.5rem 1.5rem 1.5rem;
+ font-size: 1.2rem;
+ color: var(--color-yellow-01);
+ font-weight: bold;
+`
diff --git a/utils/formValidation.ts b/utils/formValidation.ts
@@ -28,12 +28,22 @@ const emailCheck = (email: FormDataEntryValue | null) => {
  }
 }
 
-export const dsIdCheck = async (dsId: FormDataEntryValue | null) => {
- if (dsId) {
+export const dsIdCheck = async (
+ dsId: FormDataEntryValue | null,
+ setIsDsIdValid: Dispatch<SetStateAction<boolean>>
+) => {
+ if (!dsId) {
+ setIsDsIdValid(false)
+ return "확인할 디스코드 아이디를 입력하시오"
+ } else {
  const { data, error } = await authApi.getDsIdValid(dsId)
- console.log("dsIdCheck", data)
- if (error || !data) {
- return "존재하지 않는 디스코드 아이디입니다"
+ if (error) {
+ setIsDsIdValid(false)
+ return "존재하지 않는 디스코드 아이디입니다."
+ } else if (data) {
+ const { dsTag, dsGlobalName } = data
+ setIsDsIdValid(true)
+ return `${dsTag}는 ${dsGlobalName}님으로\n확인되었습니다.`
  }
  }
 }
@@ -59,9 +69,9 @@ const LoginValidation = (
 
  console.log(isEmailValid, isPasswordValid)
  if (isEmailValid) {
- setIsModalOpen({ state: "fail", text: isEmailValid, isOpen: true })
+ SetAuthModalState("fail", isEmailValid, setIsModalOpen)
  } else if (isPasswordValid) {
- setIsModalOpen({ state: "fail", text: isPasswordValid, isOpen: true })
+ SetAuthModalState("fail", isPasswordValid, setIsModalOpen)
  }
 }
 
@@ -82,12 +92,21 @@ const SignUpValidation = async (
  const isNameValid = nameCheck(name)
 
  if (isEmailValid) {
- setIsModalOpen({ state: "fail", text: isEmailValid, isOpen: true })
+ SetAuthModalState("fail", isEmailValid, setIsModalOpen)
  } else if (isPasswordValid) {
- setIsModalOpen({ state: "fail", text: isPasswordValid, isOpen: true })
+ SetAuthModalState("fail", isPasswordValid, setIsModalOpen)
  } else if (isNameValid) {
- setIsModalOpen({ state: "fail", text: isNameValid, isOpen: true })
+ SetAuthModalState("fail", isNameValid, setIsModalOpen)
  }
 }
 
+const SetAuthModalState = (
+ state: AuthModalProps["state"],
+ text: string,
+
+ setIsModalOpen: Dispatch<SetStateAction<AuthModalProps>>
+) => {
+ setIsModalOpen({ state, text, isOpen: true })
+}
+
 export { LoginValidation, SignUpValidation }