[FE] Input 컴포넌트 관련한 기능 수정, useDynamic-* 훅 관련 오류 수정, 네이밍 통일, 의미를 명확하게 담도록 네이밍 수정

HDesign/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haengdong-design",
-  "version": "0.1.36",
+  "version": "0.1.52",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

HDesign/src/components/Input/Input.stories.tsx

@@ -1,26 +1,20 @@
 import type {Meta, StoryObj} from '@storybook/react';
 
+import React, {useEffect, useState} from 'react';
+
 import Input from '@components/Input/Input';
 
 const meta = {
   title: 'Components/Input',
   component: Input,
   tags: ['autodocs'],
-  parameters: {
-    // layout: 'centered',
-  },
   argTypes: {
-    value: {
-      description: '',
-      control: {type: 'text'},
-    },
     inputType: {
       // TODO: (@cookie) 스토리북 라디오버튼 보이도록 설정해야 함
       control: {type: 'radio'},
     },
   },
   args: {
-    disabled: false,
     placeholder: 'placeholder',
   },
 } satisfies Meta<typeof Input>;
@@ -29,4 +23,23 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Playground: Story = {};
+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);
+      }
+    };
+    const handleBlur = () => {
+      console.log('blur');
+    };
+
+    return <Input value={value} onChange={e => handleChange(e)} isError={isError} onBlur={handleBlur} {...args} />;
+  },
+};

HDesign/src/components/Input/Input.style.ts

@@ -4,7 +4,7 @@ import {Theme} from '@theme/theme.type';
 
 import {InputType} from './Input.type';
 
-const inputBoxBackgroundColorByInputType = (theme: Theme, inputType: InputType = 'input') => {
+const getBackgroundColorStyle = (theme: Theme, inputType: InputType = 'input') => {
   switch (inputType) {
     case 'input':
       return theme.colors.lightGrayContainer;
@@ -17,6 +17,9 @@ const inputBoxBackgroundColorByInputType = (theme: Theme, inputType: InputType =
   }
 };
 
+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,
   inputType: InputType = 'input',
@@ -26,13 +29,13 @@ export const inputBoxStyle = (
   css({
     display: 'flex',
     justifyContent: 'space-between',
-
+    gap: '1rem',
     padding: '0.75rem 1rem',
     borderRadius: '1rem',
-    backgroundColor: inputBoxBackgroundColorByInputType(theme, inputType),
+    backgroundColor: getBackgroundColorStyle(theme, inputType),
 
     boxSizing: 'border-box',
-    outline: isFocus ? `1px solid ${theme.colors.primary}` : isError ? `1px solid ${theme.colors.error}` : 'none',
+    boxShadow: getBorderStyle(isFocus, theme, isError),
   });
 
 export const inputStyle = (theme: Theme) =>

HDesign/src/components/Input/Input.tsx

@@ -1,23 +1,28 @@
 /** @jsxImportSource @emotion/react */
-import React, {forwardRef, useImperativeHandle, useRef, useState} from 'react';
+import React, {forwardRef, useImperativeHandle, useRef} from 'react';
 
-import IconButton from '@components/IconButton/IconButton';
-import {InputProps} from '@components/Input/Input.type';
-import {inputBoxStyle, inputStyle} from '@components/Input/Input.style';
-import {useInput} from '@components/Input/useInput';
+import {useTheme} from '@/theme/HDesignProvider';
 
-import {useTheme} from '@theme/HDesignProvider';
+import IconButton from '../IconButton/IconButton';
+
+import {useInput} from './useInput';
+import {InputProps} from './Input.type';
+import {inputBoxStyle, inputStyle} from './Input.style';
 
 export const Input: React.FC<InputProps> = forwardRef<HTMLInputElement, InputProps>(function Input(
-  {value: propsValue, onChange, inputType, isError, ...htmlProps}: InputProps,
+  {value: propsValue, onChange, onFocus, onBlur, inputType, isError, placeholder, ...htmlProps}: InputProps,
   ref,
 ) {
   const {theme} = useTheme();
-  const inputRef = useRef<HTMLInputElement>(null);
-
   useImperativeHandle(ref, () => inputRef.current!);
-
-  const {value, hasFocus, handleChange, handleClickDelete, toggleFocus} = useInput({propsValue, onChange, inputRef});
+  const inputRef = useRef<HTMLInputElement>(null);
+  const {value, handleChange, hasFocus, handleClickDelete, handleBlur, handleFocus, handleKeyDown} = useInput({
+    propsValue,
+    onChange,
+    onBlur,
+    onFocus,
+    inputRef,
+  });
 
   return (
     <div css={inputBoxStyle(theme, inputType, hasFocus, isError)}>
@@ -26,8 +31,10 @@ export const Input: React.FC<InputProps> = forwardRef<HTMLInputElement, InputPro
         ref={inputRef}
         value={value}
         onChange={handleChange}
-        onFocus={toggleFocus}
-        onBlur={toggleFocus}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        placeholder={inputRef.current === document.activeElement ? '' : placeholder}
+        onKeyDown={handleKeyDown}
         {...htmlProps}
       />
       {value && hasFocus && <IconButton iconType="inputDelete" onClick={handleClickDelete} />}

HDesign/src/components/Input/useInput.ts

@@ -3,39 +3,66 @@ import {RefObject, useEffect, useState} from 'react';
 interface UseInputProps<T> {
   propsValue: T;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
   inputRef: RefObject<HTMLInputElement>;
+  autoFocus?: boolean;
 }
 
-export const useInput = <T>({propsValue, onChange, inputRef}: UseInputProps<T>) => {
-  const [value, setValue] = useState(propsValue || '');
-  const [hasFocus, setHasFocus] = useState(false);
+export const useInput = <T>({propsValue, onChange, onBlur, onFocus, inputRef, autoFocus}: UseInputProps<T>) => {
+  const [value, setValue] = useState<T>(propsValue);
+  const [hasFocus, setHasFocus] = useState(inputRef.current === document.activeElement);
 
   useEffect(() => {
-    setValue(propsValue || '');
-  }, [propsValue]);
+    setHasFocus(inputRef.current === document.activeElement);
+  }, []);
 
-  const handleClickDelete = () => {
-    setValue('');
-
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
+  useEffect(() => {
+    setValue(propsValue);
+  }, [value]);
 
+  const handleClickDelete = (event: React.MouseEvent) => {
+    event.preventDefault();
+    setValue('' as T);
     if (onChange) {
       onChange({target: {value: ''}} as React.ChangeEvent<HTMLInputElement>);
     }
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
+    setValue(e.target.value as T);
     if (onChange) {
       onChange(e);
     }
   };
 
-  const toggleFocus = () => {
-    setHasFocus(!hasFocus);
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    setHasFocus(false);
+    if (onBlur) {
+      onBlur(e);
+    }
+  };
+
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    setHasFocus(true);
+    if (onFocus) {
+      onFocus(e);
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.nativeEvent.isComposing) return;
+
+    if (event.key === 'Enter' || event.key === 'Escape') {
+      setHasFocus(false);
+      if (inputRef.current) {
+        inputRef.current.blur();
+      }
+    }
   };
 
-  return {value, hasFocus, handleChange, handleClickDelete, toggleFocus};
+  return {value, handleChange, hasFocus, handleClickDelete, handleBlur, handleFocus, handleKeyDown};
 };

HDesign/src/components/LabelGroupInput/Element.tsx

@@ -0,0 +1,62 @@
+/** @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, ...htmlProps}: ElementProps,
+
+  ref,
+) {
+  useImperativeHandle(ref, () => inputRef.current!);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const {setHasAnyFocus, values, setValues, hasAnyErrors, setHasAnyErrors} = 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(() => {
+    setHasAnyErrors({...hasAnyErrors, [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}
+      {...htmlProps}
+    />
+  );
+});
+
+export default Element;

HDesign/src/components/LabelGroupInput/Element.type.ts

@@ -0,0 +1,10 @@
+export interface ElementStyleProps {}
+
+export interface ElementCustomProps {
+  elementKey: string;
+  isError?: boolean;
+}
+
+export type ElementOptionProps = ElementStyleProps & ElementCustomProps;
+
+export type ElementProps = React.ComponentProps<'input'> & ElementOptionProps;

HDesign/src/components/LabelGroupInput/GroupInputContext.tsx

@@ -0,0 +1,32 @@
+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}>>;
+  hasAnyErrors: {[key: string]: boolean};
+  setHasAnyErrors: 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 [hasAnyErrors, setHasAnyErrors] = useState<{[key: string]: boolean}>({});
+
+  return (
+    <GroupInputContext.Provider value={{hasAnyFocus, setHasAnyFocus, values, setValues, hasAnyErrors, setHasAnyErrors}}>
+      {children}
+    </GroupInputContext.Provider>
+  );
+};