feat: 이름 변경 시 중복일 때 토스트 처리 (#112)

* feat: 이름 변경 중복 토스트 처리 * style: 인풋 타이틀 shrink 0 지정 * style: 마이페이지 폰트 크게 변경
prgrms-web-devcourse · Dec 4, 2023 · f866f3c · f866f3c
1 parent ad8e755
commit f866f3c
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 9 deletions.
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
@@ -32,8 +32,8 @@ const Input = ({
     <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: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-200 dark:text-gray-100 md:text-sm">
+      <div className="flex flex-row justify-between gap-2">
+        <div className="h-4 shrink-0 text-xs text-gray-200 dark:text-gray-100 md:text-sm">
           {INPUT_TYPE[type].TITLE}
         </div>
         {message && (

diff --git a/src/pages/MyPage/hooks/useEditNameCheck.ts b/src/pages/MyPage/hooks/useEditNameCheck.ts
@@ -1,3 +1,4 @@
+import { isAxiosError } from 'axios'
 import { Dispatch, SetStateAction, useRef, useState } from 'react'
 import { useToast } from '@/hooks'
 import { useEditName, useUser } from '@/apis/hooks'
@@ -57,17 +58,18 @@ const useEditNameCheck = ({
 
           await refetch()
 
-          if (nameRef.current) {
-            nameRef.current.click()
-          }
-
           setEditNameButton(false)
           setName('')
           addToast({
             message: '이름 변경이 완료되었습니다.',
             type: 'success',
           })
         },
+        onError: (error) => {
+          if (isAxiosError(error)) {
+            addToast({ message: error.response?.data.message, type: 'error' })
+          }
+        },
       },
     )
   }

diff --git a/src/pages/MyPage/hooks/useEditPasswordCheck.ts b/src/pages/MyPage/hooks/useEditPasswordCheck.ts
@@ -1,3 +1,4 @@
+import { isAxiosError } from 'axios'
 import { useRef, useState } from 'react'
 import { useToast } from '@/hooks'
 import { useEditPassword } from '@/apis/hooks'
@@ -46,6 +47,11 @@ const useEditPasswordCheck = ({
             type: 'success',
           })
         },
+        onError: (error) => {
+          if (isAxiosError(error)) {
+            addToast({ message: error.response?.data.message, type: 'error' })
+          }
+        },
       },
     )
   }

diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx
@@ -134,7 +134,7 @@ const MyPage = () => {
             </div>
           ) : (
             <div className="relative flex items-center">
-              <div className="text-xl text-black dark:text-white md:text-3xl">
+              <div className="text-2xl text-black dark:text-white md:text-3xl">
                 {user?.name}
               </div>
               <div className="absolute -right-8 flex h-6 w-6 items-center justify-center rounded-full border bg-white dark:bg-main-red-200 md:-right-9 md:h-7 md:w-7">
@@ -145,7 +145,7 @@ const MyPage = () => {
               </div>
             </div>
           )}
-          <div className="text-sm text-gray-300 dark:text-white md:text-lg">
+          <div className="text-base text-gray-300 dark:text-white md:text-xl">
             {user?.email}
           </div>
         </div>
@@ -193,7 +193,10 @@ const MyPage = () => {
         modalId="edit-name"
         content={`'${name}'로 이름을 변경하시겠습니까?`}
         label="변경"
-        handleClickLabel={handleChangeNameComplete}
+        handleClickLabel={() => {
+          nameRef.current?.click()
+          handleChangeNameComplete()
+        }}
       />
       <Modal
         modalId="edit-password"