diff --git a/client/src/components/Design/components/Input/Input.style.ts b/client/src/components/Design/components/Input/Input.style.ts
index 666508cf8..71b5fc156 100644
--- a/client/src/components/Design/components/Input/Input.style.ts
+++ b/client/src/components/Design/components/Input/Input.style.ts
@@ -5,12 +5,35 @@ import {Theme} from '@theme/theme.type';
 const getBorderStyle = (isFocus: boolean, theme: Theme, isError?: boolean) =>
   isError ? `0 0 0 1px ${theme.colors.error} inset` : isFocus ? `0 0 0 1px ${theme.colors.primary} inset` : 'none';
 
-export const inputBoxStyle = (
-  theme: Theme,
-  isFocus: boolean,
-  isError: boolean | undefined,
-  isAlwaysOnBorder: boolean,
-) =>
+export const labelTextStyle = (theme: Theme, hasFocus: boolean, hasValue: boolean) =>
+  css([
+    {
+      height: '1.125rem',
+      color: theme.colors.gray,
+    },
+    labelTextAnimationStyle(hasFocus, hasValue),
+  ]);
+
+export const labelTextAnimationStyle = (hasFocus: boolean, hasValue: boolean) =>
+  css({
+    opacity: hasFocus || hasValue ? '1' : '0',
+
+    transition: '0.2s',
+    transitionTimingFunction: 'cubic-bezier(0.7, 0.62, 0.62, 1.16)',
+  });
+
+export const errorTextStyle = (theme: Theme, isError: boolean) =>
+  css({
+    height: '1.125rem',
+    color: theme.colors.onErrorContainer,
+
+    opacity: isError ? '1' : '0',
+
+    transition: '0.2s',
+    transitionTimingFunction: 'cubic-bezier(0.7, 0.62, 0.62, 1.16)',
+  });
+
+export const inputBoxStyle = (theme: Theme, isFocus: boolean, isError: boolean | undefined) =>
   css([
     {
       display: 'flex',
@@ -22,7 +45,7 @@ export const inputBoxStyle = (
       boxSizing: 'border-box',
       boxShadow: getBorderStyle(isFocus, theme, isError),
     },
-    isAlwaysOnBorder ? inputBoxAlwaysBorderStyle(theme) : inputBoxAnimationStyle(),
+    inputBoxAnimationStyle(),
   ]);
 
 export const inputBoxAnimationStyle = () =>
@@ -31,11 +54,6 @@ export const inputBoxAnimationStyle = () =>
     transitionTimingFunction: 'cubic-bezier(0.7, 0.62, 0.62, 1.16)',
   });
 
-export const inputBoxAlwaysBorderStyle = (theme: Theme) =>
-  css({
-    boxShadow: `0 0 0 1px ${theme.colors.primary} inset`,
-  });
-
 export const inputStyle = (theme: Theme) =>
   css(
     {
diff --git a/client/src/components/Design/components/Input/Input.tsx b/client/src/components/Design/components/Input/Input.tsx
index 08d879c6a..f9cbe0858 100644
--- a/client/src/components/Design/components/Input/Input.tsx
+++ b/client/src/components/Design/components/Input/Input.tsx
@@ -1,65 +1,87 @@
 /** @jsxImportSource @emotion/react */
-import React, {forwardRef, useImperativeHandle, useRef} from 'react';
+import React, {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
 
 import IconButton from '@HDcomponents/IconButton/IconButton';
 import {InputProps} from '@HDcomponents/Input/Input.type';
-import {inputBoxStyle, inputStyle} from '@HDcomponents/Input/Input.style';
-import {useInput} from '@HDcomponents/Input/useInput';
 import Icon from '@HDcomponents/Icon/Icon';
 import {useTheme} from '@theme/HDesignProvider';
 
+import Flex from '../Flex/Flex';
+import Text from '../Text/Text';
+
+import {inputBoxStyle, inputStyle, labelTextStyle, errorTextStyle} from './Input.style';
+
 export const Input: React.FC<InputProps> = forwardRef<HTMLInputElement, InputProps>(function Input(
   {
-    value: propsValue,
+    value,
     onChange,
-    onFocus,
-    onBlur,
-    inputType,
-    isError,
+    onDelete,
     placeholder,
-    autoFocus,
-    isAlwaysOnBorder = false,
+    autoFocus = false,
+    labelText,
+    errorText = '',
+    inputType = 'input',
+    isError,
     ...htmlProps
   }: InputProps,
   ref,
 ) {
   const {theme} = useTheme();
   const inputRef = useRef<HTMLInputElement>(null);
-  const {value, handleChange, hasFocus, handleClickDelete, handleBlur, handleFocus, handleKeyDown} = useInput({
-    propsValue,
-    onChange,
-    onBlur,
-    onFocus,
-    inputRef,
-    autoFocus,
-  });
+  const [hasFocus, setHasFocus] = useState(autoFocus);
+  const hasValue = !!value;
+
   useImperativeHandle(ref, () => inputRef.current!);
 
+  useEffect(() => {
+    inputRef.current?.addEventListener('focus', () => setHasFocus(true));
+    inputRef.current?.addEventListener('blur', () => setHasFocus(false));
+    return () => {
+      inputRef.current?.removeEventListener('focus', () => setHasFocus(true));
+      inputRef.current?.removeEventListener('blur', () => setHasFocus(false));
+    };
+  }, []);
+
   return (
-    <div css={inputBoxStyle(theme, hasFocus, isError, isAlwaysOnBorder)}>
-      <input
-        css={inputStyle(theme)}
-        ref={inputRef}
-        value={value}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        onFocus={handleFocus}
-        placeholder={value ? '' : placeholder}
-        onKeyDown={handleKeyDown}
-        autoFocus={autoFocus}
-        {...htmlProps}
-      />
-      {inputType === 'input' && value && hasFocus && (
-        <IconButton tabIndex={-1} variants="none" onMouseDown={handleClickDelete}>
-          <Icon iconType="inputDelete" />
-        </IconButton>
-      )}
-      {inputType === 'search' && (
-        <IconButton tabIndex={-1} variants="none">
-          <Icon iconType="search" />
-        </IconButton>
+    <Flex flexDirection="column" gap="0.375rem">
+      {(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>
       )}
-    </div>
+      <Flex flexDirection="column" gap="0.5rem">
+        <div css={inputBoxStyle(theme, hasFocus, isError)}>
+          <input
+            css={inputStyle(theme)}
+            ref={inputRef}
+            value={value}
+            onChange={onChange}
+            placeholder={value ? '' : placeholder}
+            autoFocus={autoFocus}
+            {...htmlProps}
+          />
+          {onDelete && value && hasFocus && (
+            <IconButton tabIndex={-1} variants="none" onMouseDown={onDelete}>
+              <Icon iconType="inputDelete" />
+            </IconButton>
+          )}
+          {inputType === 'search' && (
+            <IconButton tabIndex={-1} variants="none">
+              <Icon iconType="search" />
+            </IconButton>
+          )}
+        </div>
+      </Flex>
+    </Flex>
   );
 });
 
diff --git a/client/src/components/Design/components/Input/Input.type.ts b/client/src/components/Design/components/Input/Input.type.ts
index 7360c1061..d706b644f 100644
--- a/client/src/components/Design/components/Input/Input.type.ts
+++ b/client/src/components/Design/components/Input/Input.type.ts
@@ -2,14 +2,16 @@ import {Theme} from '@theme/theme.type';
 
 export interface InputStyleProps {
   theme?: Theme;
-  isAlwaysOnBorder?: boolean;
+  isError?: boolean;
 }
 
 export type InputType = 'input' | 'search';
 
 export interface InputCustomProps {
   inputType?: InputType;
-  isError?: boolean;
+  labelText?: string;
+  errorText?: string | null;
+  onDelete?: () => void;
 }
 
 export type InputOptionProps = InputStyleProps & InputCustomProps;
diff --git a/client/src/components/Design/components/LabelGroupInput/Element.tsx b/client/src/components/Design/components/LabelGroupInput/Element.tsx
deleted file mode 100644
index 5ffd852bd..000000000
--- a/client/src/components/Design/components/LabelGroupInput/Element.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-/** @jsxImportSource @emotion/react */
-
-import {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
-
-import Input from '../Input/Input';
-
-import {ElementProps} from './Element.type';
-import {useGroupInputContext} from './GroupInputContext';
-
-const Element: React.FC<ElementProps> = forwardRef<HTMLInputElement, ElementProps>(function Element(
-  {elementKey, value: propsValue, onChange, onBlur, onFocus, isError, autoFocus, ...htmlProps}: ElementProps,
-
-  ref,
-) {
-  useImperativeHandle(ref, () => inputRef.current!);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const {setHasAnyFocus, values, setValues, errors, setErrors} = useGroupInputContext();
-
-  useEffect(() => {
-    setValues({...values, [elementKey]: `${propsValue}`});
-  }, [propsValue]);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value;
-    setValues({...values, [elementKey]: newValue});
-    if (onChange) {
-      onChange(e);
-    }
-  };
-
-  useEffect(() => {
-    setErrors({...errors, [elementKey]: isError ?? false});
-  }, [isError]);
-
-  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    setHasAnyFocus(false);
-    if (onBlur) {
-      onBlur(e);
-    }
-  };
-
-  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
-    setHasAnyFocus(true);
-    if (onFocus) {
-      onFocus(e);
-    }
-  };
-
-  return (
-    <Input
-      ref={inputRef}
-      isError={isError}
-      value={propsValue}
-      onChange={handleChange}
-      onBlur={handleBlur}
-      onFocus={handleFocus}
-      autoFocus={autoFocus}
-      {...htmlProps}
-    />
-  );
-});
-
-export default Element;
diff --git a/client/src/components/Design/components/LabelGroupInput/Element.type.ts b/client/src/components/Design/components/LabelGroupInput/Element.type.ts
deleted file mode 100644
index 2ec2ef9ed..000000000
--- a/client/src/components/Design/components/LabelGroupInput/Element.type.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface ElementStyleProps {}
-
-export interface ElementCustomProps {
-  elementKey: string;
-  isError?: boolean;
-}
-
-export type ElementOptionProps = ElementStyleProps & ElementCustomProps;
-
-export type ElementProps = React.ComponentProps<'input'> & ElementOptionProps;
diff --git a/client/src/components/Design/components/LabelGroupInput/GroupInputContext.tsx b/client/src/components/Design/components/LabelGroupInput/GroupInputContext.tsx
deleted file mode 100644
index 142183e6b..000000000
--- a/client/src/components/Design/components/LabelGroupInput/GroupInputContext.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, {createContext, PropsWithChildren, useContext, useState} from 'react';
-
-interface GroupInputContextProps {
-  hasAnyFocus: boolean;
-  setHasAnyFocus: React.Dispatch<React.SetStateAction<boolean>>;
-  values: {[key: string]: string};
-  setValues: React.Dispatch<React.SetStateAction<{[key: string]: string}>>;
-  errors: {[key: string]: boolean};
-  setErrors: React.Dispatch<React.SetStateAction<{[key: string]: boolean}>>;
-}
-
-const GroupInputContext = createContext<GroupInputContextProps | undefined>(undefined);
-
-export const useGroupInputContext = () => {
-  const context = useContext(GroupInputContext);
-  if (!context) {
-    throw new Error('useGroupInputContext must be used within an GroupInputProvider');
-  }
-  return context;
-};
-
-export const GroupInputProvider: React.FC<PropsWithChildren> = ({children}: React.PropsWithChildren) => {
-  const [hasAnyFocus, setHasAnyFocus] = useState(false);
-  const [values, setValues] = useState<{[key: string]: string}>({});
-  const [errors, setErrors] = useState<{[key: string]: boolean}>({});
-
-  return (
-    <GroupInputContext.Provider value={{hasAnyFocus, setHasAnyFocus, values, setValues, errors, setErrors}}>
-      {children}
-    </GroupInputContext.Provider>
-  );
-};
diff --git a/client/src/components/Design/components/LabelGroupInput/LabelGroupInput.stories.tsx b/client/src/components/Design/components/LabelGroupInput/LabelGroupInput.stories.tsx
deleted file mode 100644
index a2b873060..000000000
--- a/client/src/components/Design/components/LabelGroupInput/LabelGroupInput.stories.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import type {Meta, StoryObj} from '@storybook/react';
-
-import {useState} from 'react';
-
-import LabelGroupInput from '@HDcomponents/LabelGroupInput/LabelGroupInput';
-
-const meta = {
-  title: 'Components/LabelGroupInput',
-  component: LabelGroupInput,
-  tags: ['autodocs'],
-  parameters: {
-    // layout: 'centered',
-  },
-  argTypes: {
-    labelText: {
-      description: 'label에 들어갈 텍스트를 작성',
-      control: {type: 'text'},
-    },
-    errorText: {
-      description: 'error에 들어갈 텍스트를 작성',
-      control: {type: 'text'},
-    },
-  },
-  args: {
-    labelText: '지출내역 / 금액',
-    errorText: 'error가 발생했을 때 나타납니다!',
-  },
-} satisfies Meta<typeof LabelGroupInput>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  render: ({...args}) => {
-    const [name, setName] = useState('');
-    const [price, setPrice] = useState('');
-    const [isError, setIsError] = useState(false);
-    const handleChangeName = (event: React.ChangeEvent<HTMLInputElement>) => {
-      if (event.target.value.length < 4) {
-        setName(event.target.value);
-        setIsError(false);
-      } else {
-        event.target.value = name;
-        setIsError(true);
-      }
-    };
-    const handleChangePrice = (event: React.ChangeEvent<HTMLInputElement>) => {
-      setPrice(event.target.value);
-    };
-    return (
-      <LabelGroupInput {...args}>
-        <LabelGroupInput.Element
-          elementKey="name"
-          placeholder="지출내역"
-          value={name}
-          onChange={e => handleChangeName(e)}
-          onBlur={() => console.log('!!!')}
-          isError={isError}
-          autoFocus
-        />
-        <LabelGroupInput.Element
-          value={price}
-          onChange={handleChangePrice}
-          elementKey="price"
-          placeholder="금액"
-          onBlur={() => console.log('!!!')}
-          isError={false}
-          autoFocus
-        />
-      </LabelGroupInput>
-    );
-  },
-};
diff --git a/client/src/components/Design/components/LabelGroupInput/LabelGroupInput.style.ts b/client/src/components/Design/components/LabelGroupInput/LabelGroupInput.style.ts
deleted file mode 100644
index df64636e9..000000000
--- a/client/src/components/Design/components/LabelGroupInput/LabelGroupInput.style.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import {css} from '@emotion/react';
-
-import {Theme} from '@theme/theme.type';
-
-export const labelTextStyle = (theme: Theme, hasFocus: boolean, hasValue: boolean) =>
-  css({
-    height: '1.125rem',
-    color: theme.colors.gray,
-
-    opacity: hasFocus || hasValue ? '1' : '0',
-
-    transition: '0.2s',
-    transitionTimingFunction: 'cubic-bezier(0.7, 0.62, 0.62, 1.16)',
-  });
-
-export const errorTextStyle = (theme: Theme, isError: boolean) =>
-  css({
-    height: '1.125rem',
-    color: theme.colors.onErrorContainer,
-
-    opacity: isError ? '1' : '0',
-
-    transition: '0.2s',
-    transitionTimingFunction: 'cubic-bezier(0.7, 0.62, 0.62, 1.16)',
-  });
diff --git a/client/src/components/Design/components/LabelGroupInput/LabelGroupInput.tsx b/client/src/components/Design/components/LabelGroupInput/LabelGroupInput.tsx
deleted file mode 100644
index 3c60e14a6..000000000
--- a/client/src/components/Design/components/LabelGroupInput/LabelGroupInput.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/** @jsxImportSource @emotion/react */
-
-import Text from '@HDcomponents/Text/Text';
-import {useTheme} from '@theme/HDesignProvider';
-
-import Flex from '../Flex/Flex';
-
-import {LabelGroupInputProps} from './LabelGroupInput.type';
-import {errorTextStyle, labelTextStyle} from './LabelGroupInput.style';
-import Element from './Element';
-import {GroupInputProvider, useGroupInputContext} from './GroupInputContext';
-
-const LabelGroupInput: React.FC<LabelGroupInputProps> = ({labelText, errorText, children}: LabelGroupInputProps) => {
-  const {theme} = useTheme();
-  const {hasAnyFocus, values, errors} = useGroupInputContext();
-
-  const hasAnyValue = !Object.values(values).every(value => value === '');
-  const hasAnyError = !Object.values(errors).every(error => !error);
-
-  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, hasAnyFocus, hasAnyValue)}>
-          {labelText}
-        </Text>
-        {errorText && (
-          <Text size="caption" css={errorTextStyle(theme, hasAnyError)}>
-            {errorText}
-          </Text>
-        )}
-      </Flex>
-      <Flex flexDirection="column" gap="0.5rem">
-        {children}
-      </Flex>
-    </Flex>
-  );
-};
-
-const LabelGroupInputContainer = (props: LabelGroupInputProps) => (
-  <GroupInputProvider>
-    <LabelGroupInput {...props} />
-  </GroupInputProvider>
-);
-
-LabelGroupInputContainer.Element = Element;
-
-export default LabelGroupInputContainer;
diff --git a/client/src/components/Design/components/LabelGroupInput/LabelGroupInput.type.ts b/client/src/components/Design/components/LabelGroupInput/LabelGroupInput.type.ts
deleted file mode 100644
index 8507311b5..000000000
--- a/client/src/components/Design/components/LabelGroupInput/LabelGroupInput.type.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface LabelGroupInputStyleProps {}
-
-export interface LabelGroupInputCustomProps {
-  labelText: string;
-  errorText: string | null;
-}
-
-export type LabelGroupInputOptionProps = LabelGroupInputStyleProps & LabelGroupInputCustomProps;
-
-export type LabelGroupInputProps = React.ComponentProps<'input'> & LabelGroupInputOptionProps;
diff --git a/client/src/components/Design/components/LabelGroupInput/index.ts b/client/src/components/Design/components/LabelGroupInput/index.ts
deleted file mode 100644
index c31f35eaf..000000000
--- a/client/src/components/Design/components/LabelGroupInput/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import LabelGroupInputContainer from './LabelGroupInput';
-
-export {LabelGroupInputContainer as LabelGroupInput};
diff --git a/client/src/components/Design/components/LabelInput/LabelInput.stories.tsx b/client/src/components/Design/components/LabelInput/LabelInput.stories.tsx
deleted file mode 100644
index 9bff764ef..000000000
--- a/client/src/components/Design/components/LabelInput/LabelInput.stories.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import type {Meta, StoryObj} from '@storybook/react';
-
-import {useEffect, useState} from 'react';
-
-import LabelInput from '@HDcomponents/LabelInput/LabelInput';
-
-const meta = {
-  title: 'Components/LabelInput',
-  component: LabelInput,
-  tags: ['autodocs'],
-  parameters: {
-    // layout: 'centered',
-  },
-  argTypes: {
-    labelText: {
-      description: 'label에 들어갈 텍스트를 작성',
-      control: {type: 'text'},
-    },
-    isError: {
-      description: '',
-      control: {type: 'boolean'},
-    },
-    errorText: {
-      description: 'error에 들어갈 텍스트를 작성',
-      control: {type: 'text'},
-    },
-  },
-  args: {
-    // value: '',
-    labelText: '이름',
-    errorText: 'error가 발생했을 때 나타납니다!',
-    autoFocus: true,
-  },
-} satisfies Meta<typeof LabelInput>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  render: ({...args}) => {
-    const [value, setValue] = useState('');
-    const [isError, setIsError] = useState(false);
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      if (event.target.value.length < 4) {
-        setValue(event.target.value);
-        setIsError(false);
-      } else {
-        event.target.value = value;
-        setIsError(true);
-      }
-    };
-    return <LabelInput value={value} onChange={e => handleChange(e)} isError={isError} {...args} />;
-  },
-};
diff --git a/client/src/components/Design/components/LabelInput/LabelInput.style.ts b/client/src/components/Design/components/LabelInput/LabelInput.style.ts
deleted file mode 100644
index e6f00284d..000000000
--- a/client/src/components/Design/components/LabelInput/LabelInput.style.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {css} from '@emotion/react';
-
-import {Theme} from '@theme/theme.type';
-
-export const labelTextStyle = (theme: Theme, hasFocus: boolean, hasValue: boolean, isAlwaysOnLabel: boolean) =>
-  css([
-    {
-      height: '1.125rem',
-      color: theme.colors.gray,
-    },
-    !isAlwaysOnLabel && labelTextAnimationStyle(hasFocus, hasValue),
-  ]);
-
-export const labelTextAnimationStyle = (hasFocus: boolean, hasValue: boolean) =>
-  css({
-    opacity: hasFocus || hasValue ? '1' : '0',
-
-    transition: '0.2s',
-    transitionTimingFunction: 'cubic-bezier(0.7, 0.62, 0.62, 1.16)',
-  });
-
-export const errorTextStyle = (theme: Theme, isError: boolean) =>
-  css({
-    height: '1.125rem',
-    color: theme.colors.onErrorContainer,
-
-    opacity: isError ? '1' : '0',
-
-    transition: '0.2s',
-    transitionTimingFunction: 'cubic-bezier(0.7, 0.62, 0.62, 1.16)',
-  });
diff --git a/client/src/components/Design/components/LabelInput/LabelInput.tsx b/client/src/components/Design/components/LabelInput/LabelInput.tsx
deleted file mode 100644
index 8f7b1b5e3..000000000
--- a/client/src/components/Design/components/LabelInput/LabelInput.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-/** @jsxImportSource @emotion/react */
-
-import {forwardRef, useImperativeHandle, useRef} from 'react';
-
-import Text from '@HDcomponents/Text/Text';
-import {useTheme} from '@theme/HDesignProvider';
-
-import Input from '../Input/Input';
-import Flex from '../Flex/Flex';
-
-import {errorTextStyle, labelTextStyle} from './LabelInput.style';
-import {useLabelInput} from './useLabelInput';
-import {LabelInputProps} from './LabelInput.type';
-
-const LabelInput: React.FC<LabelInputProps> = forwardRef<HTMLInputElement, LabelInputProps>(function LabelInput(
-  {
-    labelText,
-    errorText,
-    isError,
-    isAlwaysOnLabel = false,
-    isAlwaysOnInputBorder = false,
-    ...htmlProps
-  }: LabelInputProps,
-  ref,
-) {
-  useImperativeHandle(ref, () => inputRef.current!);
-
-  const {theme} = useTheme();
-  const inputRef = useRef<HTMLInputElement>(null);
-  const {hasFocus} = useLabelInput({inputRef});
-
-  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, !!htmlProps.value, isAlwaysOnLabel)}>
-          {labelText}
-        </Text>
-        {errorText && (
-          <Text size="caption" css={errorTextStyle(theme, isError ?? false)}>
-            {errorText}
-          </Text>
-        )}
-      </Flex>
-      <Flex flexDirection="column" gap="0.5rem">
-        <Input
-          ref={inputRef}
-          isError={isError}
-          placeholder={labelText}
-          isAlwaysOnBorder={isAlwaysOnInputBorder}
-          {...htmlProps}
-        />
-      </Flex>
-    </Flex>
-  );
-});
-
-export default LabelInput;
diff --git a/client/src/components/Design/components/LabelInput/LabelInput.type.ts b/client/src/components/Design/components/LabelInput/LabelInput.type.ts
deleted file mode 100644
index 84bfc7279..000000000
--- a/client/src/components/Design/components/LabelInput/LabelInput.type.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export interface LabelInputStyleProps {
-  isAlwaysOnLabel?: boolean;
-  isAlwaysOnInputBorder?: boolean;
-}
-
-export interface LabelInputCustomProps {
-  labelText: string;
-  errorText: string | null;
-  isError?: boolean;
-  autoFocus: boolean;
-}
-
-export type LabelInputOptionProps = LabelInputCustomProps & LabelInputStyleProps;
-
-export type LabelInputProps = React.ComponentProps<'input'> & LabelInputOptionProps;
diff --git a/client/src/components/Design/components/LabelInput/useLabelInput.ts b/client/src/components/Design/components/LabelInput/useLabelInput.ts
deleted file mode 100644
index e967c5f89..000000000
--- a/client/src/components/Design/components/LabelInput/useLabelInput.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {RefObject, useEffect, useState} from 'react';
-
-interface UseLabelInput<T> {
-  inputRef: RefObject<HTMLInputElement>;
-  autoFocus?: boolean;
-}
-
-export const useLabelInput = <T>({inputRef, autoFocus}: UseLabelInput<T>) => {
-  const [hasFocus, setHasFocus] = useState(inputRef.current === document.activeElement);
-
-  useEffect(() => {
-    setHasFocus(inputRef.current === document.activeElement);
-  }, []);
-
-  useEffect(() => {
-    inputRef.current?.addEventListener('focus', () => setHasFocus(true));
-    inputRef.current?.addEventListener('blur', () => setHasFocus(false));
-
-    return () => {
-      inputRef.current?.removeEventListener('focus', () => setHasFocus(true));
-      inputRef.current?.removeEventListener('blur', () => setHasFocus(false));
-    };
-  }, []);
-
-  return {hasFocus};
-};
diff --git a/client/src/components/Design/index.tsx b/client/src/components/Design/index.tsx
index a75245994..aaada3e57 100644
--- a/client/src/components/Design/index.tsx
+++ b/client/src/components/Design/index.tsx
@@ -14,9 +14,7 @@ import Flex from './components/Flex/Flex';
 import Icon from './components/Icon/Icon';
 import IconButton from './components/IconButton/IconButton';
 import Input from './components/Input/Input';
-import LabelInput from './components/LabelInput/LabelInput';
 import ListButton from './components/ListButton/ListButton';
-import LabelGroupInput from './components/LabelGroupInput/LabelGroupInput';
 import Top from './components/Top/Top';
 import Tab from './components/Tabs/Tab';
 import Tabs from './components/Tabs/Tabs';
@@ -43,9 +41,7 @@ export {
   Icon,
   IconButton,
   Input,
-  LabelInput,
   ListButton,
-  LabelGroupInput,
   Top,
   Tab,
   Tabs,
diff --git a/client/src/hooks/useMembersStep.ts b/client/src/hooks/useMembersStep.ts
index 86c42b0b6..869af8bc1 100644
--- a/client/src/hooks/useMembersStep.ts
+++ b/client/src/hooks/useMembersStep.ts
@@ -5,6 +5,7 @@ import {BillInfo} from '@pages/AddBillFunnel/AddBillFunnel';
 import {Member} from 'types/serviceType';
 
 import getEventIdByUrl from '@utils/getEventIdByUrl';
+import {isIOS} from '@utils/detectDevice';
 
 import REGEXP from '@constants/regExp';
 
@@ -23,6 +24,7 @@ const useMembersStep = ({billInfo, setBillInfo, currentMembers, setStep}: Props)
   const [errorMessage, setErrorMessage] = useState('');
   const [nameInput, setNameInput] = useState('');
   const inputRef = useRef<HTMLInputElement>(null);
+  const hiddenRef = useRef<HTMLInputElement>(null);
 
   const {postMembersAsync, isPending: isPendingPostMembers} = useRequestPostMembers();
 
@@ -59,24 +61,25 @@ const useMembersStep = ({billInfo, setBillInfo, currentMembers, setStep}: Props)
     }
   };
 
-  const handleNameInputEnter = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter' && canAddMembers) {
-      if (!billInfo.members.map(({name}) => name).includes(nameInput)) {
-        setBillInfoMemberWithId(nameInput);
-      }
+  const addMembersFromInput = () => {
+    if (!billInfo.members.map(({name}) => name).includes(nameInput)) {
+      setBillInfoMemberWithId(nameInput);
       setNameInput('');
-      if (inputRef.current) {
-        inputRef.current.blur();
-        setTimeout(() => {
-          inputRef.current?.focus();
-        }, 0);
-      }
-      if (event.nativeEvent.isComposing) {
-        return;
+      if (isIOS()) {
+        hiddenRef.current?.focus();
+        inputRef.current?.focus();
       }
     }
   };
 
+  const handleNameInputEnter = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.nativeEvent.isComposing) return;
+    if (event.key === 'Enter' && canAddMembers && inputRef.current) {
+      event.preventDefault();
+      addMembersFromInput();
+    }
+  };
+
   const handlePostBill = async () => {
     if (billInfo.members.map(({id}) => id).includes(-1)) {
       const newMembers = await postMembersAsync({
@@ -116,6 +119,7 @@ const useMembersStep = ({billInfo, setBillInfo, currentMembers, setStep}: Props)
     errorMessage,
     nameInput,
     inputRef,
+    hiddenRef,
     handleNameInputChange,
     handleNameInputEnter,
     isPendingPostBill,
diff --git a/client/src/pages/AccountPage/Account.tsx b/client/src/pages/AccountPage/Account.tsx
index 0490ead31..5939ae364 100644
--- a/client/src/pages/AccountPage/Account.tsx
+++ b/client/src/pages/AccountPage/Account.tsx
@@ -5,7 +5,7 @@ import BankSelectModal from '@components/Modal/BankSelectModal/BankSelectModal';
 
 import useAccount from '@hooks/useAccount';
 
-import {FixedButton, Flex, FunnelLayout, LabelInput, MainLayout, Top, TopNav} from '@components/Design';
+import {FixedButton, Flex, FunnelLayout, Input, MainLayout, Top, TopNav} from '@components/Design';
 
 import getDeletedLastPath from '@utils/getDeletedLastPath';
 
@@ -42,17 +42,16 @@ const Account = () => {
           <Top.Line text="어떤 계좌로 받을까요?" emphasize={['어떤 계좌']} />
         </Top>
         <Flex flexDirection="column" gap="1rem">
-          <LabelInput
+          <Input
             labelText="은행"
             placeholder="은행을 선택해주세요"
             value={bankName ?? ''}
             errorText={null}
             autoFocus={false}
-            isAlwaysOnLabel
             readOnly
             onClick={() => setIsBottomSheetOpen(true)}
           />
-          <LabelInput
+          <Input
             labelText="계좌번호"
             placeholder="ex) 030302-04-191806"
             errorText={accountNumberErrorMessage}
@@ -61,7 +60,6 @@ const Account = () => {
             onChange={handleAccount}
             onPaste={handleAccountOnPaste}
             autoFocus={false}
-            isAlwaysOnLabel
           />
           {isBottomSheetOpen && (
             <BankSelectModal
diff --git a/client/src/pages/AddBillFunnel/steps/MembersStep.tsx b/client/src/pages/AddBillFunnel/steps/MembersStep.tsx
index fe4052d8e..5baf92ecf 100644
--- a/client/src/pages/AddBillFunnel/steps/MembersStep.tsx
+++ b/client/src/pages/AddBillFunnel/steps/MembersStep.tsx
@@ -1,4 +1,5 @@
 import {css} from '@emotion/react';
+import {useRef} from 'react';
 
 import Top from '@components/Design/components/Top/Top';
 import ChipButton from '@components/Design/components/ChipButton/ChipButton';
@@ -7,7 +8,9 @@ import {Member} from 'types/serviceType';
 import useMembersStep from '@hooks/useMembersStep';
 import {BillStep} from '@hooks/useAddBillFunnel';
 
-import {FixedButton, Flex, LabelInput, Text} from '@components/Design';
+import {FixedButton, Flex, Input, Text} from '@components/Design';
+
+import {isIOS} from '@utils/detectDevice';
 
 import {BillInfo} from '../AddBillFunnel';
 
@@ -23,6 +26,7 @@ const MembersStep = ({billInfo, setBillInfo, currentMembers, setStep}: Props) =>
     errorMessage,
     nameInput,
     inputRef,
+    hiddenRef,
     handleNameInputChange,
     handleNameInputEnter,
     isPendingPostBill,
@@ -46,7 +50,8 @@ const MembersStep = ({billInfo, setBillInfo, currentMembers, setStep}: Props) =>
           <Top.Line text={`${billInfo.title}에`} />
           <Top.Line text="참여한 사람은 누구인가요?" emphasize={['참여한 사람']} />
         </Top>
-        <LabelInput
+
+        <Input
           ref={inputRef}
           labelText="이름"
           errorText={errorMessage ?? ''}
@@ -89,6 +94,24 @@ const MembersStep = ({billInfo, setBillInfo, currentMembers, setStep}: Props) =>
           </div>
         </div>
       </div>
+      {isIOS() && (
+        <input
+          ref={hiddenRef}
+          css={css`
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            margin: -1px;
+            border: 0;
+            padding: 0;
+
+            white-space: nowrap;
+            clip-path: inset(100%);
+            clip: rect(0 0 0 0);
+            overflow: hidden;
+          `}
+        />
+      )}
       <FixedButton
         variants={isPendingPostBill || isPendingPostMembers ? 'loading' : 'primary'}
         disabled={!canSubmitMembers}
diff --git a/client/src/pages/AddBillFunnel/steps/TitleStep.tsx b/client/src/pages/AddBillFunnel/steps/TitleStep.tsx
index eb910991f..7e811aedf 100644
--- a/client/src/pages/AddBillFunnel/steps/TitleStep.tsx
+++ b/client/src/pages/AddBillFunnel/steps/TitleStep.tsx
@@ -5,7 +5,7 @@ import Top from '@components/Design/components/Top/Top';
 import useTitleStep from '@hooks/useTitleStep';
 import {BillStep} from '@hooks/useAddBillFunnel';
 
-import {FixedButton, LabelInput} from '@components/Design';
+import {FixedButton, Input} from '@components/Design';
 
 import {BillInfo} from '../AddBillFunnel';
 
@@ -43,7 +43,7 @@ export const TitleStep = ({billInfo, setBillInfo, setStep}: Props) => {
           <Top.Line text={`${billInfo.price}원을`} />
           <Top.Line text="어떤 곳에서 사용했나요??" emphasize={['어떤 곳']} />
         </Top>
-        <LabelInput
+        <Input
           labelText="결제 내용"
           errorText={errorMessage ?? ''}
           value={billInfo.title}
diff --git a/client/src/pages/CreateEventPage/SetEventNameStep.tsx b/client/src/pages/CreateEventPage/SetEventNameStep.tsx
index 924c4b79d..704857456 100644
--- a/client/src/pages/CreateEventPage/SetEventNameStep.tsx
+++ b/client/src/pages/CreateEventPage/SetEventNameStep.tsx
@@ -4,7 +4,7 @@ import Top from '@components/Design/components/Top/Top';
 
 import {UseSetEventNameStepReturnType} from '@hooks/useSetEventNameStep';
 
-import {FixedButton, Flex, LabelInput} from '@HDesign/index';
+import {FixedButton, Flex, Input} from '@HDesign/index';
 
 type SetEventNamePageProps = UseSetEventNameStepReturnType & {
   moveToNextStep: () => void;
@@ -37,7 +37,7 @@ const SetEventNameStep = ({
         <Top.Line text="행사의 이름은 무엇인가요?" emphasize={['행사의 이름']} />
       </Top>
       <form onSubmit={onSubmit}>
-        <LabelInput
+        <Input
           labelText="행사 이름"
           errorText={errorMessage ?? ''}
           value={eventName}
diff --git a/client/src/pages/CreateEventPage/SetEventPasswordStep.tsx b/client/src/pages/CreateEventPage/SetEventPasswordStep.tsx
index 45370fd01..6c29fcac3 100644
--- a/client/src/pages/CreateEventPage/SetEventPasswordStep.tsx
+++ b/client/src/pages/CreateEventPage/SetEventPasswordStep.tsx
@@ -4,7 +4,7 @@ import Top from '@components/Design/components/Top/Top';
 
 import useSetEventPasswordStep, {UseSetEventPasswordStepReturnType} from '@hooks/useSetEventPasswordStep';
 
-import {FixedButton, LabelInput} from '@HDesign/index';
+import {FixedButton, Input} from '@HDesign/index';
 
 import RULE from '@constants/rule';
 
@@ -41,7 +41,7 @@ const SetEventPasswordStep = ({eventName, moveToNextStep, setEventToken}: SetEve
         <Top.Line text="비밀번호는 무엇으로 할까요?" emphasize={['비밀번호']} />
       </Top>
       <form onSubmit={submit}>
-        <LabelInput
+        <Input
           labelText="비밀번호"
           errorText={errorMessage}
           value={password}
diff --git a/client/src/pages/EventPage/AdminPage/EventLoginPage.tsx b/client/src/pages/EventPage/AdminPage/EventLoginPage.tsx
index 03e189fc1..734db75b4 100644
--- a/client/src/pages/EventPage/AdminPage/EventLoginPage.tsx
+++ b/client/src/pages/EventPage/AdminPage/EventLoginPage.tsx
@@ -4,7 +4,7 @@ import Top from '@components/Design/components/Top/Top';
 
 import useEventLogin from '@hooks/useEventLogin';
 
-import {FixedButton, LabelInput} from '@HDesign/index';
+import {FixedButton, Input} from '@HDesign/index';
 
 import RULE from '@constants/rule';
 
@@ -28,7 +28,7 @@ const EventLoginPage = () => {
         <Top.Line text="숫자 비밀번호를 입력해 주세요." emphasize={['비밀번호']} />
       </Top>
       <form onSubmit={submitPassword}>
-        <LabelInput
+        <Input
           labelText="비밀번호"
           errorText={errorMessage}
           value={password}
@@ -38,7 +38,7 @@ const EventLoginPage = () => {
           onChange={e => handleChange(e)}
           isError={!!errorMessage}
           autoFocus
-        ></LabelInput>
+        ></Input>
         <FixedButton disabled={!canSubmit}>관리 페이지로</FixedButton>
       </form>
     </div>