diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
index dcd09b4..cd6d68a 100644
--- a/apps/docs/CHANGELOG.md
+++ b/apps/docs/CHANGELOG.md
@@ -1,5 +1,12 @@
 # docs
 
+## 0.0.13
+
+### Patch Changes
+
+- Updated dependencies [37b6b9b]
+  - @sopt-makers/ui@2.7.4
+
 ## 0.0.12
 
 ### Patch Changes
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 33baac3..824cf29 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -1,7 +1,7 @@
 {
   "name": "docs",
   "private": true,
-  "version": "0.0.12",
+  "version": "0.0.13",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/apps/docs/src/stories/TextField.stories.tsx b/apps/docs/src/stories/TextField.stories.tsx
index 3be37ca..491fd47 100644
--- a/apps/docs/src/stories/TextField.stories.tsx
+++ b/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,
   },
-};
\ No newline at end of file
+};
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index 25bd425..4d44587 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @sopt-makers/ui
 
+## 2.7.4
+
+### Patch Changes
+
+- 37b6b9b: TextField 컴포넌트를 FieldBox 기반으로 수정합니다.
+
 ## 2.7.3
 
 ### Patch Changes
diff --git a/packages/ui/FieldBox/components/Label.tsx b/packages/ui/FieldBox/components/Label.tsx
index 587bc85..dbff8ce 100644
--- a/packages/ui/FieldBox/components/Label.tsx
+++ b/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}>
diff --git a/packages/ui/Input/TextField.tsx b/packages/ui/Input/TextField.tsx
index e03ad8e..186e813 100644
--- a/packages/ui/Input/TextField.tsx
+++ b/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;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 157f56b..85b982c 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sopt-makers/ui",
-  "version": "2.7.3",
+  "version": "2.7.4",
   "description": "sopt-makers의 frontend repository에 사용되는 ui를 제공해요.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",