feat: Enhance TextField component with additional props and rightAddo…

…n support

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

@@ -1,13 +1,21 @@
-import { ChangeEvent, useState, type InputHTMLAttributes } from 'react';
+import { ChangeEvent, ReactNode, useState, type InputHTMLAttributes } from 'react';
 import { StoryObj } from '@storybook/react';
 import { TextField } from '@sopt-makers/ui';
+import { IconSend } from '@sopt-makers/icons';
 
 interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> {
+  className?: string;
+  topAddon?: ReactNode;
+  bottomAddon?: ReactNode;
+  rightAddon?: ReactNode;
   labelText?: string;
   descriptionText?: string;
-  value: string;
+  required?: boolean;
   errorMessage?: string;
+  value?: string;
+  // isError -> validationFn 순서로 적용
   isError?: boolean;
+  validationFn?: (input: string) => boolean;
 }
 
 const useTextField = (props: TextFieldProps) => {
@@ -20,6 +28,10 @@ const useTextField = (props: TextFieldProps) => {
   return <TextField {...props} value={text} onChange={handleTextChange} />;
 };
 
+/**
+ * `TextField` 컴포넌트는 **[FieldBox](https://main--6571c88390d085ed7efcce84.chromatic.com/?path=/docs/components-fieldbox--docs)**를 부모 컴포넌트로 삼는 Input 컴포넌트입니다.
+ */
+
 export default {
   title: 'Components/Input/TextField',
   component: useTextField,
@@ -137,3 +149,15 @@ export const Error: StoryObj<TextFieldProps> = {
     disabled: false,
   },
 };
+
+export const HasRightAddon: StoryObj<TextFieldProps> = {
+  args: {
+    labelText: 'Label',
+    descriptionText: 'Description',
+    placeholder: 'Placeholder...',
+    rightAddon: <IconSend style={{ width: '24px', height: '24px' }} />,
+    required: true,
+    readOnly: false,
+    disabled: false,
+  },
+};