feat: 회원가입 페이지 디자인 수정 (#108)

* style: 회원가입 input 컴포넌트 디자인 수정 * refactor: 회원가입 api 조건 수정 * fix: 회원가입 중복 검사 에러 처리 수정 * refactor: onError 타입 부분 수정
prgrms-web-devcourse · Dec 3, 2023 · dc8f0c4 · dc8f0c4
1 parent 8bbff5a
commit dc8f0c4
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 24 deletions.
diff --git a/src/apis/hooks/useSignUp.ts b/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 })

diff --git a/src/components/Input/index.tsx b/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}

diff --git a/src/pages/SignUpPage/index.tsx b/src/pages/SignUpPage/index.tsx
@@ -1,3 +1,4 @@
+import { isAxiosError } from 'axios'
 import { MouseEvent } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useEmailCheck, useNameCheck, usePasswordCheck } from '@/hooks'
@@ -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 (isAxiosError(error)) {
+            const message = error.response?.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}
             >