짖ㅂ가자

woowacourse-teams · Sep 26, 2024 · 1ff1919 · 1ff1919
1 parent 3594ce3
commit 1ff1919
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 20 deletions.
diff --git a/client/src/components/Design/components/Input/Input.tsx b/client/src/components/Design/components/Input/Input.tsx
@@ -42,16 +42,20 @@ export const Input: React.FC<InputProps> = forwardRef<HTMLInputElement, InputPro
 
   return (
     <Flex flexDirection="column" gap="0.375rem">
-      <Flex justifyContent="spaceBetween" paddingInline="0.5rem" margin="0 0 0.375rem 0">
-        <Text size="caption" css={labelTextStyle(theme, hasFocus, hasValue)}>
-          {labelText}
-        </Text>
-        {errorText && (
-          <Text size="caption" css={errorTextStyle(theme, isError ?? false)}>
-            {errorText}
-          </Text>
-        )}
-      </Flex>
+      {(labelText || errorText) && (
+        <Flex justifyContent="spaceBetween" paddingInline="0.5rem" margin="0 0 0.375rem 0">
+          {labelText && (
+            <Text size="caption" css={labelTextStyle(theme, hasFocus, hasValue)}>
+              {labelText}
+            </Text>
+          )}
+          {errorText && (
+            <Text size="caption" css={errorTextStyle(theme, isError ?? false)}>
+              {errorText}
+            </Text>
+          )}
+        </Flex>
+      )}
       <Flex flexDirection="column" gap="0.5rem">
         <div css={inputBoxStyle(theme, hasFocus, isError)}>
           <input

diff --git a/client/src/hooks/useMembersStep.ts b/client/src/hooks/useMembersStep.ts
@@ -11,6 +11,7 @@ import REGEXP from '@constants/regExp';
 import useRequestPostMembers from './queries/member/useRequestPostMembers';
 import useRequestPostBill from './queries/bill/useRequestPostBill';
 import {BillStep} from './useAddBillFunnel';
+import {isIOS} from '@utils/detectDevice';
 
 interface Props {
   billInfo: BillInfo;
@@ -64,22 +65,16 @@ const useMembersStep = ({billInfo, setBillInfo, currentMembers, setStep}: Props)
     if (!billInfo.members.map(({name}) => name).includes(nameInput)) {
       setBillInfoMemberWithId(nameInput);
       setNameInput('');
-      hiddenRef.current?.focus();
-      inputRef.current?.focus();
+      if (isIOS()) {
+        hiddenRef.current?.focus();
+        inputRef.current?.focus();
+      }
     }
   };
 
-  useEffect(() => {
-    inputRef.current?.addEventListener('blur', () => addMembersFromInput());
-    return () => {
-      inputRef.current?.removeEventListener('blur', () => addMembersFromInput());
-    };
-  }, []);
-
   const handleNameInputEnter = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.nativeEvent.isComposing) return;
     if (event.key === 'Enter' && canAddMembers && inputRef.current) {
-      inputRef.current.style.backgroundColor = 'white';
       event.preventDefault();
       addMembersFromInput();
     }