REV-400/회원가입 페이지 디자인 수정

src/apis/hooks/useSignUp.ts

@@ -7,19 +7,13 @@ interface User {
   password: string
 }
 
-interface SignUpSuccess {
+interface SignUp {
   success: boolean
 }
 
-interface SignUpFail {
-  status: string
-  errorCode: string
-  message: string
-}
-
 const useSignUp = () => {
   const signUp = async (user: User) => {
-    return await apiClient.post<SignUpSuccess | SignUpFail>('/sign-up', user)
+    return await apiClient.post<SignUp>('/sign-up', user)
   }
 
   return useMutation({ mutationFn: signUp })

src/components/Input/index.tsx

@@ -30,10 +30,10 @@ const Input = ({
 
   return (
     <div
-      className={`flex ${className} ${w} max-w-xs flex-col justify-center gap-[0.44rem] rounded-md border border-gray-100 bg-main-yellow px-[0.63rem] pb-[0.69rem] pt-[0.31rem] focus-within:border-black dark:bg-main-red-200 dark:focus-within:border-white`}
+      className={`flex ${className} ${w} max-w-xs flex-col justify-center gap-[0.44rem] rounded-md border border-gray-100 bg-main-yellow px-[0.63rem] pb-[0.69rem] pt-[0.31rem] focus-within:border-black dark:border-gray-300 dark:bg-main-red-200 dark:focus-within:border-white`}
     >
       <div className="flex flex-row justify-between">
-        <div className="h-4 text-xs text-gray-100 md:text-sm">
+        <div className="h-4 text-xs text-gray-200 dark:text-gray-100 md:text-sm">
           {INPUT_TYPE[type].TITLE}
         </div>
         {message && (
@@ -46,7 +46,7 @@ const Input = ({
         <input
           value={value}
           {...register}
-          className="h-4 flex-1 border-0 bg-transparent text-sm text-black focus:outline-none dark:text-white md:text-lg"
+          className="h-4 flex-1 border-0 bg-transparent text-sm text-black placeholder:text-gray-100 focus:outline-none dark:text-white md:text-lg"
           placeholder={placeholder}
           disabled={disabled}
           onChange={onChange}

src/pages/SignUpPage/index.tsx

@@ -5,6 +5,7 @@ import { Input, Header } from '@/components'
 import { useSignUp } from '@/apis/hooks'
 import { LogoColIcon } from '@/assets/icons'
 import { rangers } from '@/assets/images'
+import { SignUpFail } from './types'
 
 const SingUpPage = () => {
   const navigate = useNavigate()
@@ -16,8 +17,8 @@ const SingUpPage = () => {
     useNameCheck()
   const {
     password,
-    passwordConfirm,
     passwordFailMessage,
+    passwordConfirm,
     passwordConfirmFailMessage,
     handlePasswordChange,
     handlePasswordConfirmChange,
@@ -27,6 +28,10 @@ const SingUpPage = () => {
     e.preventDefault()
 
     if (
+      !name ||
+      !email ||
+      !password ||
+      !passwordConfirm ||
       emailFailMessage ||
       nameFailMessage ||
       passwordFailMessage ||
@@ -38,19 +43,16 @@ const SingUpPage = () => {
     signUp(
       { email, name, password },
       {
-        onSuccess: ({ data }) => {
-          if ('status' in data && data.status === 'CONFLICT') {
-            if (data.errorCode === 'EXIST_SAME_NAME') {
-              setNameFailMessage(data.message)
-            }
-            if (data.errorCode === 'EXIST_SAME_EMAIL') {
-              setEmailFailMessage(data.message)
+        onSuccess: () => navigate('/'),
+        onError: (error) => {
+          if ('response' in error) {
+            const message = (error.response as SignUpFail).data.message
+            if (message.includes('이메일')) {
+              setEmailFailMessage(message)
+            } else {
+              setNameFailMessage(message)
             }
-
-            return
           }
-
-          navigate('/')
         },
       },
     )
@@ -91,7 +93,6 @@ const SingUpPage = () => {
               message={passwordConfirmFailMessage}
             />
             <button
-              disabled={!email || !name || !password || !passwordConfirm}
               className="h-14 w-80 max-w-xs rounded-xl bg-active-orange text-lg text-white hover:border hover:border-black disabled:bg-opacity-50 dark:text-black md:text-xl"
               onClick={handleSignUpButtonClick}
             >

src/pages/SignUpPage/types/index.ts

@@ -0,0 +1,5 @@
+export interface SignUpFail {
+  data: {
+    message: string
+  }
+}