refactor(ui): TextField 컴포넌트, FieldBox를 사용한 형태로 리팩토링. (#195)

* refactor: FieldBox 기반의 컴포넌트로 리팩토링

* docs: TextField Storybook 문서 수정

* fix: FieldBox.Label Optional prop으로 수정

* cs

* feat: add bottomAddon prop.

.changeset/tiny-days-hammer.md

@@ -0,0 +1,5 @@
+---
+'@sopt-makers/ui': patch
+---
+
+TextField 컴포넌트를 FieldBox 기반으로 수정합니다.

apps/docs/src/stories/TextField.stories.tsx

@@ -15,22 +15,22 @@ const useTextField = (props: TextFieldProps) => {
 
   const handleTextChange = (e: ChangeEvent<HTMLInputElement>) => {
     setText(e.target.value);
-  }
+  };
 
-  return <TextField<string> {...props} value={text} onChange={handleTextChange} />
-}
+  return <TextField<string> {...props} value={text} onChange={handleTextChange} />;
+};
 
 export default {
   title: 'Components/Input/TextField',
   component: useTextField,
   tags: ['autodocs'],
   args: {
-    style: { width: '335px' }
+    style: { width: '335px' },
   },
   argTypes: {
-    style: { control: false }
-  }
-}
+    style: { control: false },
+  },
+};
 
 export const Default: StoryObj<TextFieldProps> = {
   args: {
@@ -52,7 +52,7 @@ export const NoLabel: StoryObj<TextFieldProps> = {
     placeholder: 'Placeholder...',
     isError: false,
     errorMessage: 'error message',
-    required: true,
+    required: false,
     readOnly: false,
     disabled: false,
   },
@@ -136,4 +136,4 @@ export const Error: StoryObj<TextFieldProps> = {
     readOnly: false,
     disabled: false,
   },
-};
+};

packages/ui/FieldBox/components/Label.tsx

@@ -3,13 +3,13 @@ import { forwardRef } from 'react';
 import { requiredMarkStyle, TopAddonDescriptionStyle, TopAddonLabelStyle } from '../style.css';
 
 export interface FieldBoxLabelProps extends HTMLAttributes<HTMLDivElement> {
-  label: string;
-  description: string;
-  required: boolean;
+  label?: string;
+  description?: string;
+  required?: boolean;
 }
 
 export const FieldBoxLabel = forwardRef<HTMLDivElement, FieldBoxLabelProps>((props, forwardedRef) => {
-  const { required, label, description } = props;
+  const { required = false, label, description } = props;
 
   return (
     <div aria-label={label} aria-required={required} ref={forwardedRef}>

packages/ui/Input/TextField.tsx

@@ -1,11 +1,14 @@
-import { type InputHTMLAttributes } from 'react';
+import type { ReactNode, InputHTMLAttributes } from 'react';
+import { FieldBox } from 'index';
 import * as S from './style.css';
-import AlertCircleIcon from './icons/AlertCircleIcon';
 
 interface TextFieldProps<T> extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> {
   className?: string;
+  topAddon?: ReactNode;
+  bottomAddon?: ReactNode;
   labelText?: string;
   descriptionText?: string;
+  required?: boolean;
   errorMessage?: string;
   value: T;
   // isError -> validationFn 순서로 적용
@@ -14,23 +17,47 @@ interface TextFieldProps<T> extends Omit<InputHTMLAttributes<HTMLInputElement>,
 }
 
 function TextField<T extends string | number>(props: TextFieldProps<T>) {
-  const { className, labelText, descriptionText, errorMessage, value, isError, validationFn, ...inputProps } = props;
+  const {
+    className,
+    topAddon,
+    bottomAddon,
+    labelText,
+    descriptionText,
+    required,
+    errorMessage,
+    value,
+    isError,
+    validationFn,
+    ...inputProps
+  } = props;
 
   const hasError = () => {
     if (inputProps.disabled || inputProps.readOnly) return false;
     if (isError !== undefined) return isError;
     if (validationFn && !validationFn(value)) return true;
     return false;
-  }
+  };
 
-  const required = inputProps.required ? <span className={S.required}>*</span> : null;
-  const description = descriptionText ? <p className={S.description}>{descriptionText}</p> : null;
-  const input = <input {...inputProps} className={`${S.input} ${hasError() ? S.inputError : ''}`} value={value} />;
-
-  return <div className={className}>
-    {labelText ? <label className={S.label}><span>{labelText}{required}</span>{description}{input}</label> : <div className={S.inputWrap}>{description}{input}</div>}
-    {hasError() ? <div className={S.inputBottom}><div className={S.errorMessage}><AlertCircleIcon /><p>{errorMessage ?? 'error'}</p></div></div> : null}
-  </div>
+  return (
+    <FieldBox
+      bottomAddon={
+        <FieldBox.BottomAddon
+          leftAddon={hasError() && errorMessage ? <FieldBox.ErrorMessage message={errorMessage} /> : null}
+          rightAddon={bottomAddon}
+        />
+      }
+      className={className}
+      topAddon={
+        labelText || descriptionText ? (
+          <FieldBox.Label description={descriptionText} label={labelText} required={required} />
+        ) : (
+          topAddon
+        )
+      }
+    >
+      <input {...inputProps} className={`${S.input} ${hasError() ? S.inputError : ''}`} value={value} />
+    </FieldBox>
+  );
 }
 
 export default TextField;