refactor: 기존 이름이 동일하거나 이름을 모두 지웠을 때는 api 통신 막기 추가

prgrms-web-devcourse · Dec 3, 2023 · ecc9dba · ecc9dba
1 parent 37244de
commit ecc9dba
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/src/pages/MyPage/hooks/useEditNameCheck.ts b/src/pages/MyPage/hooks/useEditNameCheck.ts
@@ -30,17 +30,21 @@ const useEditNameCheck = ({
   }
 
   const handleEditNameEndingClick = () => {
-    if (nameRef.current) {
-      nameRef.current.click()
-    }
     if (currentName === name || !name) {
       setEditNameButton(false)
+      setNameFailMessage('')
 
       return
     }
     if (nameFailMessage) {
       return
     }
+    if (nameRef.current) {
+      nameRef.current.click()
+    }
+  }
+
+  const handleChangeNameComplete = () => {
     editName(
       { name },
       {
@@ -52,6 +56,11 @@ const useEditNameCheck = ({
           }
 
           await refetch()
+
+          if (nameRef.current) {
+            nameRef.current.click()
+          }
+
           setEditNameButton(false)
           setName('')
           addToast({
@@ -68,6 +77,7 @@ const useEditNameCheck = ({
     editNameButton,
     handleEditNameStartingClick,
     handleEditNameEndingClick,
+    handleChangeNameComplete,
   }
 }
 

diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx
@@ -34,6 +34,7 @@ const MyPage = () => {
     editNameButton,
     handleEditNameStartingClick,
     handleEditNameEndingClick,
+    handleChangeNameComplete,
   } = useEditNameCheck({
     currentName: user?.name || '',
     name,
@@ -124,9 +125,11 @@ const MyPage = () => {
                 value={name}
               />
               <div className="absolute -right-8 flex h-6 w-6 items-center justify-center rounded-full border bg-white dark:bg-main-red-200">
-                <label htmlFor="edit-name" ref={nameRef}>
-                  <CheckIcon className="h-4 w-4 cursor-pointer fill-sub-green" />
-                </label>
+                <CheckIcon
+                  className="h-4 w-4 cursor-pointer fill-sub-green"
+                  onClick={handleEditNameEndingClick}
+                />
+                <label htmlFor="edit-name" className="hidden" ref={nameRef} />
               </div>
             </div>
           ) : (
@@ -190,7 +193,7 @@ const MyPage = () => {
         modalId="edit-name"
         content={`'${name}'로 이름을 변경하시겠습니까?`}
         label="변경"
-        handleClickLabel={handleEditNameEndingClick}
+        handleClickLabel={handleChangeNameComplete}
       />
       <Modal
         modalId="edit-password"