diff --git a/apis/authApi.ts b/apis/authApi.ts
index 4fded8f..939a56a 100644
--- 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
index 5ceffc9..2e121c1 100644
--- 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
index 73c3b45..bc8699f 100644
--- 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
index f7dc616..e0e5d97 100644
--- 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 }