[FE] 멤버 추가 시 제대로 작동하지 않는 문제 수정

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(
     {

client/src/components/Design/components/Input/Input.tsx

@@ -1,65 +1,85 @@
 /** @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>
   );
 });
 

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;