[SWM-339] Fix : ProfileDropdown input

4m9d · Oct 6, 2023 · 4345e98 · 4345e98
1 parent b5093a2
commit 4345e98
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 28 deletions.
diff --git a/src/components/gnb/NavBar.tsx b/src/components/gnb/NavBar.tsx
@@ -24,22 +24,21 @@ export default function NavBar({ logo, profileDropdown }: Props) {
   const [isEditMode, setIsEditMode] = useState(false);
 
   const [name, setName] = useState(session?.name ?? '');
-  const profile = session?.profile;
+  const profileImage = session?.profile;
 
   const navBarHidden = session ? '' : 'hidden';
 
-  const profileButtonClickHandler = async () => {
-    if (isEditMode) {
-      mutate();
-      await update({ ...session, name });
-    }
+  const profileButtonClickHandler = async (name: string) => {
     setIsEditMode((prev) => !prev);
+
+    mutate();
+    await update({ ...session, name });
   };
 
   const { mutate } = useMutation(() => updateUserProfile(name), {
     onSuccess: (data) => {
       setIsEditMode(false);
-      setName(data.name);
+      setName(() => data.name);
     }
   });
 
@@ -84,13 +83,13 @@ export default function NavBar({ logo, profileDropdown }: Props) {
           type='button'
           className={`${navBarHidden} dropdown dropdown-end md:dropdown-hover text-sroom-black-400`}
         >
-          {profile && (
+          {profileImage && (
             <ProfileDropdown
-              profile={profile}
+              profileImage={profileImage}
               name={name}
               profileDropdown={profileDropdown}
               isEditMode={isEditMode}
-              setName={setName}
+              setIsEditMode={setIsEditMode}
               profileButtonClickHandler={profileButtonClickHandler}
             />
           )}

diff --git a/src/components/gnb/ProfileDropdown.tsx b/src/components/gnb/ProfileDropdown.tsx
@@ -7,56 +7,78 @@ import Link from 'next/link';
 import { useCallback, useEffect, useRef } from 'react';
 
 type Props = {
-  profile: string;
-  name: string;
+  profileImage: string;
   isEditMode: boolean;
+  setIsEditMode: React.Dispatch<React.SetStateAction<boolean>>;
   profileDropdown?: ProfileDropdown[];
-  setName: React.Dispatch<React.SetStateAction<string>>;
-  profileButtonClickHandler: () => Promise<void>;
+  name: string;
+  profileButtonClickHandler: (name: string) => Promise<void>;
 };
 
 export default function ProfileDropdown({
-  profile,
-  name,
+  profileImage,
   isEditMode,
+  setIsEditMode,
   profileDropdown,
-  setName,
+  name,
   profileButtonClickHandler
 }: Props) {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const enterKeyDownHandler = useCallback(
-    async (e: string) => {
-      if (e === 'Enter') {
-        await profileButtonClickHandler();
+    (e: string) => {
+      if (inputRef.current && e === 'Enter') {
+        inputRef.current.value =
+          inputRef.current.value.trim().slice(0, 10) ?? '';
+
+        const name = inputRef.current.value;
+
+        if (name === '') return;
+        profileButtonClickHandler(inputRef.current.value);
       }
     },
     [profileButtonClickHandler]
   );
 
-  useEffect(() => {
-    if (inputRef.current === null) return;
+  const saveProfileButtonClickHandler = useCallback(async () => {
+    if (inputRef.current && isEditMode) {
+      inputRef.current.value = inputRef.current.value.trim().slice(0, 10) ?? '';
+      const name = inputRef.current.value;
 
-    if (isEditMode) {
+      if (name === '') return;
+
+      await profileButtonClickHandler(name);
+    } else {
+      setIsEditMode((prev) => !prev);
+    }
+  }, [isEditMode, setIsEditMode, profileButtonClickHandler]);
+
+  useEffect(() => {
+    if (inputRef.current && isEditMode) {
       inputRef.current.focus();
       inputRef.current.setSelectionRange(
         inputRef.current.value.length,
         inputRef.current.value.length
       );
+    }
+  }, [isEditMode]);
+
+  useEffect(() => {
+    if (inputRef.current) {
       inputRef.current.value = name;
     }
-  }, [name, isEditMode]);
+  }, [name]);
 
   return (
     <>
       <div
         tabIndex={0}
         className='z-20 flex items-center justify-between h-full gap-3 rounded-none btn btn-ghost hover:bg-sroom-gray-300'
       >
-        {profile && (
+        {profileImage && (
           <div className='w-9 h-9 lg:w-10 lg:h-10'>
             <Image
-              src={profile}
+              src={profileImage}
               className='rounded-full'
               alt='프로필'
               width={40}
@@ -70,7 +92,6 @@ export default function ProfileDropdown({
           defaultValue={name}
           disabled={isEditMode === false}
           spellCheck='false'
-          onChange={(e) => setName(e.target.value.trim())}
           onKeyDown={(e) => enterKeyDownHandler(e.key)}
           maxLength={10}
           className='hidden w-32 p-1 text-xs font-semibold leading-9 text-left resize-none sm:block md:text-sm lg:text-base disabled:bg-sroom-white'
@@ -84,7 +105,7 @@ export default function ProfileDropdown({
           <div className='p-2 shadow bg-sroom-white'>
             <li className='flex justify-center border-b h-11 border-sroom-gray-400'>
               <div
-                onClick={profileButtonClickHandler}
+                onClick={saveProfileButtonClickHandler}
                 className='rounded-none active:!text-sroom-black-400 hover:bg-sroom-gray-300 active:!bg-sroom-gray-400 focus:!bg-sroom-gray-300 flex justify-between items-center'
               >
                 {isEditMode ? '저장하기' : '닉네임 수정'}