[FE] 모바일 환경에서 멤버 추가 시 전에 입력한 이름의 끝자리가 입력되는 문제

client/src/hooks/useMembersStep.ts

@@ -1,4 +1,4 @@
-import {useEffect, useState} from 'react';
+import {RefObject, useEffect, useRef, useState} from 'react';
 import {useNavigate} from 'react-router-dom';
 
 import {BillInfo} from '@pages/AddBillFunnel/AddBillFunnel';
@@ -22,6 +22,7 @@ interface Props {
 const useMembersStep = ({billInfo, setBillInfo, currentMembers, setStep}: Props) => {
   const [errorMessage, setErrorMessage] = useState('');
   const [nameInput, setNameInput] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const {postMembersAsync, isPending: isPendingPostMembers} = useRequestPostMembers();
 
@@ -59,15 +60,16 @@ const useMembersStep = ({billInfo, setBillInfo, currentMembers, setStep}: Props)
   };
 
   const handleNameInputEnter = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.nativeEvent.isComposing) {
-      return;
-    }
     if (event.key === 'Enter' && canAddMembers) {
       event.preventDefault();
       if (!billInfo.members.map(({name}) => name).includes(nameInput)) {
         setBillInfoMemberWithId(nameInput);
       }
       setNameInput('');
+      if (inputRef.current) {
+        inputRef.current.blur();
+        setTimeout(() => inputRef.current?.focus(), 0);
+      }
     }
   };
 
@@ -102,13 +104,18 @@ const useMembersStep = ({billInfo, setBillInfo, currentMembers, setStep}: Props)
     }
   }, [isSuccessPostBill]);
 
+  useEffect(() => {
+    console.log(nameInput);
+  }, [nameInput]);
+
   const handlePrevStep = () => {
     setStep('title');
   };
 
   return {
     errorMessage,
     nameInput,
+    inputRef,
     handleNameInputChange,
     handleNameInputEnter,
     isPendingPostBill,

client/src/pages/AddBillFunnel/steps/MembersStep.tsx

@@ -22,6 +22,7 @@ const MembersStep = ({billInfo, setBillInfo, currentMembers, setStep}: Props) =>
   const {
     errorMessage,
     nameInput,
+    inputRef,
     handleNameInputChange,
     handleNameInputEnter,
     isPendingPostBill,
@@ -46,6 +47,7 @@ const MembersStep = ({billInfo, setBillInfo, currentMembers, setStep}: Props) =>
           <Top.Line text="참여한 사람은 누구인가요?" emphasize={['참여한 사람']} />
         </Top>
         <LabelInput
+          ref={inputRef}
           labelText="이름"
           errorText={errorMessage ?? ''}
           value={nameInput}