From e74c02da7e6516df66e83c8c1cd6250a84d07189 Mon Sep 17 00:00:00 2001
From: Brokyeom <goindol40@gmail.com>
Date: Fri, 11 Oct 2024 16:33:07 +0900
Subject: [PATCH 01/12] feat: add FieldBox

---
 packages/ui/FieldBox/FieldBox.tsx | 24 ++++++++++++++++++++++++
 packages/ui/FieldBox/context.ts   |  0
 packages/ui/FieldBox/style.css.ts |  0
 3 files changed, 24 insertions(+)
 create mode 100644 packages/ui/FieldBox/FieldBox.tsx
 create mode 100644 packages/ui/FieldBox/context.ts
 create mode 100644 packages/ui/FieldBox/style.css.ts

diff --git a/packages/ui/FieldBox/FieldBox.tsx b/packages/ui/FieldBox/FieldBox.tsx
new file mode 100644
index 0000000..4ac3d22
--- /dev/null
+++ b/packages/ui/FieldBox/FieldBox.tsx
@@ -0,0 +1,24 @@
+import { forwardRef } from 'react';
+import type { ReactNode } from 'react';
+
+export interface FieldBoxProps {
+  topAddon?: ReactNode;
+  bottomAddon?: ReactNode;
+  children: ReactNode;
+}
+
+const FieldBox = forwardRef<HTMLDivElement, FieldBoxProps>((props, forwardedRef) => {
+  const { topAddon, bottomAddon, children, ...restProps } = props;
+
+  return (
+    <div ref={forwardedRef} {...restProps}>
+      <div>{topAddon}</div>
+      <div>{children}</div>
+      <div>{bottomAddon}</div>
+    </div>
+  );
+});
+
+FieldBox.displayName = 'FieldBox';
+
+export default FieldBox;
diff --git a/packages/ui/FieldBox/context.ts b/packages/ui/FieldBox/context.ts
new file mode 100644
index 0000000..e69de29
diff --git a/packages/ui/FieldBox/style.css.ts b/packages/ui/FieldBox/style.css.ts
new file mode 100644
index 0000000..e69de29

From be5a46a9f0e297eb33bc04e0fdd422f96eb56940 Mon Sep 17 00:00:00 2001
From: Brokyeom <goindol40@gmail.com>
Date: Thu, 17 Oct 2024 20:34:57 +0900
Subject: [PATCH 02/12] feat: publish FieldBox.Label

---
 apps/docs/src/App.tsx             | 38 ++++++++++++++++---------------
 packages/ui/FieldBox/FieldBox.tsx | 16 +++++++------
 packages/ui/FieldBox/Label.tsx    | 27 ++++++++++++++++++++++
 packages/ui/FieldBox/index.ts     |  2 ++
 packages/ui/FieldBox/style.css.ts | 21 +++++++++++++++++
 packages/ui/index.ts              |  2 +-
 6 files changed, 80 insertions(+), 26 deletions(-)
 create mode 100644 packages/ui/FieldBox/Label.tsx
 create mode 100644 packages/ui/FieldBox/index.ts

diff --git a/apps/docs/src/App.tsx b/apps/docs/src/App.tsx
index 5762399..07dbbab 100644
--- a/apps/docs/src/App.tsx
+++ b/apps/docs/src/App.tsx
@@ -1,16 +1,16 @@
-import "./App.css";
+import './App.css';
 
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, useState } from 'react';
 
-import SearchField from "../../../packages/ui/Input/SearchField";
-import { Test } from "@sopt-makers/ui";
-import TextArea from "../../../packages/ui/Input/TextArea";
-import TextField from "../../../packages/ui/Input/TextField";
+import '@sopt-makers/ui/dist/index.css';
+
+import { FieldBox, SearchField, Test, TextArea, TextField } from '@sopt-makers/ui';
+import { colors } from '@sopt-makers/colors';
 
 function App() {
-  const [input, setInput] = useState("");
-  const [textarea, setTextarea] = useState("");
-  const [search, setSearch] = useState("");
+  const [input, setInput] = useState('');
+  const [textarea, setTextarea] = useState('');
+  const [search, setSearch] = useState('');
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     setInput(e.target.value);
@@ -43,39 +43,41 @@ function App() {
   };
 
   const handleSearchReset = () => {
-    setSearch("");
+    setSearch('');
   };
 
   return (
     <>
-      <Test text="Test Component" size="big" color="blue" />
+      <Test text='Test Component' size='big' color='blue' />
       <TextField<string>
-        placeholder="Placeholder..."
+        placeholder='Placeholder...'
         required
-        labelText="Label"
-        descriptionText="description"
+        labelText='Label'
+        descriptionText='description'
         validationFn={inputValidation}
         value={input}
         onChange={handleInputChange}
       />
       <TextArea
-        placeholder="Placeholder..."
+        placeholder='Placeholder...'
         required
-        topAddon={{ labelText: "Label", descriptionText: "description" }}
+        topAddon={{ labelText: 'Label', descriptionText: 'description' }}
         rightAddon={{ onClick: () => handleTextareaSubmit() }}
         validationFn={textareaValidation}
-        errorMessage="Error Message"
+        errorMessage='Error Message'
         value={textarea}
         onChange={handleTextareaChange}
         maxLength={300}
       />
       <SearchField
-        placeholder="Placeholder..."
+        placeholder='Placeholder...'
         value={search}
         onChange={handleSearchChange}
         onSubmit={handleSearchSubmit}
         onReset={handleSearchReset}
       />
+      <div style={{ padding: '20px', backgroundColor: colors.secondary }} />
+      <FieldBox topAddon={<FieldBox.Label label='안녕?' description='디스크립션' required />}>여긴 본문</FieldBox>
     </>
   );
 }
diff --git a/packages/ui/FieldBox/FieldBox.tsx b/packages/ui/FieldBox/FieldBox.tsx
index 4ac3d22..07e1675 100644
--- a/packages/ui/FieldBox/FieldBox.tsx
+++ b/packages/ui/FieldBox/FieldBox.tsx
@@ -1,24 +1,26 @@
 import { forwardRef } from 'react';
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { FieldBoxLabel } from './Label';
 
-export interface FieldBoxProps {
+export interface FieldBoxProps extends HTMLAttributes<HTMLDivElement> {
   topAddon?: ReactNode;
   bottomAddon?: ReactNode;
-  children: ReactNode;
 }
 
-const FieldBox = forwardRef<HTMLDivElement, FieldBoxProps>((props, forwardedRef) => {
+const FieldBoxImpl = forwardRef<HTMLDivElement, FieldBoxProps>((props, forwardedRef) => {
   const { topAddon, bottomAddon, children, ...restProps } = props;
 
   return (
     <div ref={forwardedRef} {...restProps}>
-      <div>{topAddon}</div>
+      {topAddon}
       <div>{children}</div>
       <div>{bottomAddon}</div>
     </div>
   );
 });
 
-FieldBox.displayName = 'FieldBox';
+FieldBoxImpl.displayName = 'FieldBoxImpl';
 
-export default FieldBox;
+export const FieldBox = Object.assign(FieldBoxImpl, {
+  Label: FieldBoxLabel,
+});
diff --git a/packages/ui/FieldBox/Label.tsx b/packages/ui/FieldBox/Label.tsx
new file mode 100644
index 0000000..5a08d74
--- /dev/null
+++ b/packages/ui/FieldBox/Label.tsx
@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import * as S from './style.css';
+
+export interface FieldBoxLabelProps extends HTMLAttributes<HTMLDivElement> {
+  label: string;
+  description: string;
+  required: boolean;
+}
+
+export const FieldBoxLabel = forwardRef<HTMLDivElement, FieldBoxLabelProps>((props, forwardedRef) => {
+  const { required, label, description } = props;
+
+  return (
+    <div ref={forwardedRef}>
+      <label className={S.label}>
+        <span>
+          {label}
+          {required ? <span className={S.required}>*</span> : null}
+        </span>
+        <p className={S.description}>{description}</p>
+      </label>
+    </div>
+  );
+});
+
+FieldBoxLabel.displayName = 'FieldBoxLabel';
diff --git a/packages/ui/FieldBox/index.ts b/packages/ui/FieldBox/index.ts
new file mode 100644
index 0000000..857636f
--- /dev/null
+++ b/packages/ui/FieldBox/index.ts
@@ -0,0 +1,2 @@
+export * from './FieldBox';
+export * from './Label';
diff --git a/packages/ui/FieldBox/style.css.ts b/packages/ui/FieldBox/style.css.ts
index e69de29..78acb56 100644
--- a/packages/ui/FieldBox/style.css.ts
+++ b/packages/ui/FieldBox/style.css.ts
@@ -0,0 +1,21 @@
+import { style } from '@vanilla-extract/css';
+import theme from '../theme.css';
+
+export const label = style({
+  ...theme.fontsObject.LABEL_3_14_SB,
+  display: 'flex',
+  flexDirection: 'column',
+  textAlign: 'left',
+  color: theme.colors.white,
+});
+
+export const description = style({
+  ...theme.fontsObject.LABEL_4_12_SB,
+  color: theme.colors.gray300,
+  marginBottom: '8px',
+});
+
+export const required = style({
+  color: theme.colors.secondary,
+  marginLeft: '4px',
+});
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index 3ca876a..b26bff0 100644
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -12,6 +12,6 @@ export { default as Tag } from './Tag';
 export { default as Chip } from './Chip';
 export { default as Callout } from './Callout';
 export { default as Tab } from './Tab';
-
+export * from './FieldBox';
 // test component
 export { default as Test } from './Test';

From 1018502a70e66bde2912bf1d5a222bd2e7813416 Mon Sep 17 00:00:00 2001
From: Brokyeom <goindol40@gmail.com>
Date: Thu, 17 Oct 2024 21:00:54 +0900
Subject: [PATCH 03/12] feat: publish FieldBox BottomAddon

---
 apps/docs/src/App.tsx                | 12 +++++++++++-
 packages/ui/FieldBox/BottomAddon.tsx | 21 +++++++++++++++++++++
 packages/ui/FieldBox/FieldBox.tsx    |  2 ++
 packages/ui/FieldBox/Label.tsx       |  8 ++++----
 packages/ui/FieldBox/index.ts        |  1 +
 packages/ui/FieldBox/style.css.ts    | 13 ++++++++++---
 6 files changed, 49 insertions(+), 8 deletions(-)
 create mode 100644 packages/ui/FieldBox/BottomAddon.tsx

diff --git a/apps/docs/src/App.tsx b/apps/docs/src/App.tsx
index 07dbbab..8054a7d 100644
--- a/apps/docs/src/App.tsx
+++ b/apps/docs/src/App.tsx
@@ -77,7 +77,17 @@ function App() {
         onReset={handleSearchReset}
       />
       <div style={{ padding: '20px', backgroundColor: colors.secondary }} />
-      <FieldBox topAddon={<FieldBox.Label label='안녕?' description='디스크립션' required />}>여긴 본문</FieldBox>
+      <FieldBox
+        topAddon={<FieldBox.Label label='안녕?' description='디스크립션' required />}
+        bottomAddon={
+          <FieldBox.BottomAddon
+            leftAddon={<div style={{ color: colors.white }}>레프트애드온</div>}
+            rightAddon={<div style={{ color: colors.white }}>롸이트애드온</div>}
+          />
+        }
+      >
+        <span style={{ color: colors.white }}>여긴 본문</span>
+      </FieldBox>
     </>
   );
 }
diff --git a/packages/ui/FieldBox/BottomAddon.tsx b/packages/ui/FieldBox/BottomAddon.tsx
new file mode 100644
index 0000000..73ab412
--- /dev/null
+++ b/packages/ui/FieldBox/BottomAddon.tsx
@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import { bottomAddonContainerStyle } from './style.css';
+
+export interface BottomAddon extends HTMLAttributes<HTMLDivElement> {
+  leftAddon?: ReactNode;
+  rightAddon?: ReactNode;
+}
+
+export const BottomAddon = forwardRef<HTMLDivElement, BottomAddon>((props, forwardedRef) => {
+  const { leftAddon, rightAddon } = props;
+
+  return (
+    <div className={bottomAddonContainerStyle} ref={forwardedRef}>
+      {leftAddon}
+      {rightAddon}
+    </div>
+  );
+});
+
+BottomAddon.displayName = 'BottomAddon';
diff --git a/packages/ui/FieldBox/FieldBox.tsx b/packages/ui/FieldBox/FieldBox.tsx
index 07e1675..f4a79b1 100644
--- a/packages/ui/FieldBox/FieldBox.tsx
+++ b/packages/ui/FieldBox/FieldBox.tsx
@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
 import type { HTMLAttributes, ReactNode } from 'react';
 import { FieldBoxLabel } from './Label';
+import { BottomAddon } from './BottomAddon';
 
 export interface FieldBoxProps extends HTMLAttributes<HTMLDivElement> {
   topAddon?: ReactNode;
@@ -23,4 +24,5 @@ FieldBoxImpl.displayName = 'FieldBoxImpl';
 
 export const FieldBox = Object.assign(FieldBoxImpl, {
   Label: FieldBoxLabel,
+  BottomAddon,
 });
diff --git a/packages/ui/FieldBox/Label.tsx b/packages/ui/FieldBox/Label.tsx
index 5a08d74..3255be4 100644
--- a/packages/ui/FieldBox/Label.tsx
+++ b/packages/ui/FieldBox/Label.tsx
@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as S from './style.css';
+import { requiredMarkStyle, TopAddonDescriptionStyle, TopAddonLabelStyle } from './style.css';
 
 export interface FieldBoxLabelProps extends HTMLAttributes<HTMLDivElement> {
   label: string;
@@ -13,12 +13,12 @@ export const FieldBoxLabel = forwardRef<HTMLDivElement, FieldBoxLabelProps>((pro
 
   return (
     <div ref={forwardedRef}>
-      <label className={S.label}>
+      <label className={TopAddonLabelStyle}>
         <span>
           {label}
-          {required ? <span className={S.required}>*</span> : null}
+          {required ? <span className={requiredMarkStyle}>*</span> : null}
         </span>
-        <p className={S.description}>{description}</p>
+        <p className={TopAddonDescriptionStyle}>{description}</p>
       </label>
     </div>
   );
diff --git a/packages/ui/FieldBox/index.ts b/packages/ui/FieldBox/index.ts
index 857636f..6436cb0 100644
--- a/packages/ui/FieldBox/index.ts
+++ b/packages/ui/FieldBox/index.ts
@@ -1,2 +1,3 @@
 export * from './FieldBox';
 export * from './Label';
+export * from './BottomAddon';
diff --git a/packages/ui/FieldBox/style.css.ts b/packages/ui/FieldBox/style.css.ts
index 78acb56..fc791b2 100644
--- a/packages/ui/FieldBox/style.css.ts
+++ b/packages/ui/FieldBox/style.css.ts
@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import theme from '../theme.css';
 
-export const label = style({
+export const TopAddonLabelStyle = style({
   ...theme.fontsObject.LABEL_3_14_SB,
   display: 'flex',
   flexDirection: 'column',
@@ -9,13 +9,20 @@ export const label = style({
   color: theme.colors.white,
 });
 
-export const description = style({
+export const TopAddonDescriptionStyle = style({
   ...theme.fontsObject.LABEL_4_12_SB,
   color: theme.colors.gray300,
   marginBottom: '8px',
 });
 
-export const required = style({
+export const requiredMarkStyle = style({
   color: theme.colors.secondary,
   marginLeft: '4px',
 });
+
+export const bottomAddonContainerStyle = style({
+  marginTop: '8px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});

From 9ed6eb5dbaa5284aa19f30659e3aeba67acdf52a Mon Sep 17 00:00:00 2001
From: Brokyeom <goindol40@gmail.com>
Date: Sat, 19 Oct 2024 16:30:55 +0900
Subject: [PATCH 04/12] refactor: move sub-components to components folder.

---
 packages/ui/FieldBox/FieldBox.tsx                     | 3 +--
 packages/ui/FieldBox/{ => components}/BottomAddon.tsx | 2 +-
 packages/ui/FieldBox/{ => components}/Label.tsx       | 2 +-
 packages/ui/FieldBox/components/index.ts              | 2 ++
 packages/ui/FieldBox/index.ts                         | 3 +--
 5 files changed, 6 insertions(+), 6 deletions(-)
 rename packages/ui/FieldBox/{ => components}/BottomAddon.tsx (90%)
 rename packages/ui/FieldBox/{ => components}/Label.tsx (96%)
 create mode 100644 packages/ui/FieldBox/components/index.ts

diff --git a/packages/ui/FieldBox/FieldBox.tsx b/packages/ui/FieldBox/FieldBox.tsx
index f4a79b1..1350f66 100644
--- a/packages/ui/FieldBox/FieldBox.tsx
+++ b/packages/ui/FieldBox/FieldBox.tsx
@@ -1,7 +1,6 @@
 import { forwardRef } from 'react';
 import type { HTMLAttributes, ReactNode } from 'react';
-import { FieldBoxLabel } from './Label';
-import { BottomAddon } from './BottomAddon';
+import { BottomAddon, FieldBoxLabel } from './components';
 
 export interface FieldBoxProps extends HTMLAttributes<HTMLDivElement> {
   topAddon?: ReactNode;
diff --git a/packages/ui/FieldBox/BottomAddon.tsx b/packages/ui/FieldBox/components/BottomAddon.tsx
similarity index 90%
rename from packages/ui/FieldBox/BottomAddon.tsx
rename to packages/ui/FieldBox/components/BottomAddon.tsx
index 73ab412..85a14e5 100644
--- a/packages/ui/FieldBox/BottomAddon.tsx
+++ b/packages/ui/FieldBox/components/BottomAddon.tsx
@@ -1,6 +1,6 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import { bottomAddonContainerStyle } from './style.css';
+import { bottomAddonContainerStyle } from '../style.css';
 
 export interface BottomAddon extends HTMLAttributes<HTMLDivElement> {
   leftAddon?: ReactNode;
diff --git a/packages/ui/FieldBox/Label.tsx b/packages/ui/FieldBox/components/Label.tsx
similarity index 96%
rename from packages/ui/FieldBox/Label.tsx
rename to packages/ui/FieldBox/components/Label.tsx
index 3255be4..179fc00 100644
--- a/packages/ui/FieldBox/Label.tsx
+++ b/packages/ui/FieldBox/components/Label.tsx
@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import { requiredMarkStyle, TopAddonDescriptionStyle, TopAddonLabelStyle } from './style.css';
+import { requiredMarkStyle, TopAddonDescriptionStyle, TopAddonLabelStyle } from '../style.css';
 
 export interface FieldBoxLabelProps extends HTMLAttributes<HTMLDivElement> {
   label: string;
diff --git a/packages/ui/FieldBox/components/index.ts b/packages/ui/FieldBox/components/index.ts
new file mode 100644
index 0000000..eb139ae
--- /dev/null
+++ b/packages/ui/FieldBox/components/index.ts
@@ -0,0 +1,2 @@
+export * from './Label';
+export * from './BottomAddon';
diff --git a/packages/ui/FieldBox/index.ts b/packages/ui/FieldBox/index.ts
index 6436cb0..321e98a 100644
--- a/packages/ui/FieldBox/index.ts
+++ b/packages/ui/FieldBox/index.ts
@@ -1,3 +1,2 @@
 export * from './FieldBox';
-export * from './Label';
-export * from './BottomAddon';
+export * from './components';

From ba396eda81949e33bd1c3b5e9a92f2fadb458de0 Mon Sep 17 00:00:00 2001
From: Brokyeom <goindol40@gmail.com>
Date: Sun, 20 Oct 2024 22:10:29 +0900
Subject: [PATCH 05/12] fix: interface name

---
 packages/ui/FieldBox/components/BottomAddon.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/FieldBox/components/BottomAddon.tsx b/packages/ui/FieldBox/components/BottomAddon.tsx
index 85a14e5..4067124 100644
--- a/packages/ui/FieldBox/components/BottomAddon.tsx
+++ b/packages/ui/FieldBox/components/BottomAddon.tsx
@@ -2,12 +2,12 @@ import type { HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
 import { bottomAddonContainerStyle } from '../style.css';
 
-export interface BottomAddon extends HTMLAttributes<HTMLDivElement> {
+export interface FieldBoxBottomAddonProps extends HTMLAttributes<HTMLDivElement> {
   leftAddon?: ReactNode;
   rightAddon?: ReactNode;
 }
 
-export const BottomAddon = forwardRef<HTMLDivElement, BottomAddon>((props, forwardedRef) => {
+export const BottomAddon = forwardRef<HTMLDivElement, FieldBoxBottomAddonProps>((props, forwardedRef) => {
   const { leftAddon, rightAddon } = props;
 
   return (

From 17fbd58a6426f25c1e7406c51a4ad64c60735916 Mon Sep 17 00:00:00 2001
From: Brokyeom <goindol40@gmail.com>
Date: Sun, 20 Oct 2024 23:10:03 +0900
Subject: [PATCH 06/12] feat: Add ErrorMessage Component.

---
 packages/ui/FieldBox/FieldBox.tsx             |  3 ++-
 .../ui/FieldBox/components/ErrorMessage.tsx   | 20 +++++++++++++++++++
 packages/ui/FieldBox/components/index.ts      |  1 +
 packages/ui/FieldBox/style.css.ts             |  8 ++++++++
 4 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/FieldBox/components/ErrorMessage.tsx

diff --git a/packages/ui/FieldBox/FieldBox.tsx b/packages/ui/FieldBox/FieldBox.tsx
index 1350f66..7bd1b9b 100644
--- a/packages/ui/FieldBox/FieldBox.tsx
+++ b/packages/ui/FieldBox/FieldBox.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import type { HTMLAttributes, ReactNode } from 'react';
-import { BottomAddon, FieldBoxLabel } from './components';
+import { BottomAddon, FieldBoxErrorMessage, FieldBoxLabel } from './components';
 
 export interface FieldBoxProps extends HTMLAttributes<HTMLDivElement> {
   topAddon?: ReactNode;
@@ -24,4 +24,5 @@ FieldBoxImpl.displayName = 'FieldBoxImpl';
 export const FieldBox = Object.assign(FieldBoxImpl, {
   Label: FieldBoxLabel,
   BottomAddon,
+  ErrorMessage: FieldBoxErrorMessage,
 });
diff --git a/packages/ui/FieldBox/components/ErrorMessage.tsx b/packages/ui/FieldBox/components/ErrorMessage.tsx
new file mode 100644
index 0000000..f411d1d
--- /dev/null
+++ b/packages/ui/FieldBox/components/ErrorMessage.tsx
@@ -0,0 +1,20 @@
+import AlertCircleIcon from 'Input/icons/AlertCircleIcon';
+import { forwardRef, type HTMLAttributes } from 'react';
+import { errorMessage } from '../style.css';
+
+export interface FieldBoxErrorMessageProps extends HTMLAttributes<HTMLDivElement> {
+  message: string;
+}
+
+export const FieldBoxErrorMessage = forwardRef<HTMLDivElement, FieldBoxErrorMessageProps>((props, forwardedRef) => {
+  const { message } = props;
+
+  return (
+    <div className={errorMessage} ref={forwardedRef}>
+      <AlertCircleIcon />
+      <p>{message}</p>
+    </div>
+  );
+});
+
+FieldBoxErrorMessage.displayName = 'FieldBoxErrorMessage';
diff --git a/packages/ui/FieldBox/components/index.ts b/packages/ui/FieldBox/components/index.ts
index eb139ae..1bb9a59 100644
--- a/packages/ui/FieldBox/components/index.ts
+++ b/packages/ui/FieldBox/components/index.ts
@@ -1,2 +1,3 @@
 export * from './Label';
 export * from './BottomAddon';
+export * from './ErrorMessage';
diff --git a/packages/ui/FieldBox/style.css.ts b/packages/ui/FieldBox/style.css.ts
index fc791b2..6621dfd 100644
--- a/packages/ui/FieldBox/style.css.ts
+++ b/packages/ui/FieldBox/style.css.ts
@@ -26,3 +26,11 @@ export const bottomAddonContainerStyle = style({
   justifyContent: 'space-between',
   alignItems: 'center',
 });
+
+export const errorMessage = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+  color: theme.colors.error,
+  ...theme.fontsObject.LABEL_4_12_SB,
+});

From 822d681fe832f45b857e23e78f5aac2abc21e628 Mon Sep 17 00:00:00 2001
From: Brokyeom <goindol40@gmail.com>
Date: Sun, 20 Oct 2024 23:10:22 +0900
Subject: [PATCH 07/12] docs: FieldBox Storybook docs

---
 apps/docs/src/stories/FieldBox.stories.tsx | 191 +++++++++++++++++++++
 1 file changed, 191 insertions(+)
 create mode 100644 apps/docs/src/stories/FieldBox.stories.tsx

diff --git a/apps/docs/src/stories/FieldBox.stories.tsx b/apps/docs/src/stories/FieldBox.stories.tsx
new file mode 100644
index 0000000..c7f9308
--- /dev/null
+++ b/apps/docs/src/stories/FieldBox.stories.tsx
@@ -0,0 +1,191 @@
+import { colors } from '@sopt-makers/colors';
+import {
+  FieldBox,
+  FieldBoxProps,
+  FieldBoxLabelProps,
+  FieldBoxBottomAddonProps,
+  FieldBoxLabel,
+  TextField,
+  TextArea,
+  Radio,
+  CheckBox,
+  Chip,
+  Button,
+} from '@sopt-makers/ui';
+import { Meta, StoryObj } from '@storybook/react';
+
+type FieldBoxStoryProps = FieldBoxProps & FieldBoxLabelProps & FieldBoxBottomAddonProps;
+
+/**
+ * FieldBox는 입력을 받는 각좀 필드류 컴포넌트(TextField, TextArea, Select등)의 Wrapper역할을 하는 컴포넌트로,<br/>
+ * 서브 컴포넌트로 `FieldBox.Label`, `FieldBox.BottomAddon`, FieldBox.ErrorMessage`컴포넌트를 제공합니다.<br/>
+ *
+ * #### 예시 코드
+ * ```tsx
+ * <FieldBox
+ *  topAddon={<FieldBox.Label label='안녕?' description='디스크립션' required />}
+ *  bottomAddon={
+ *   <FieldBox.BottomAddon
+ *    leftAddon={<div style={{ color: colors.white }}>레프트애드온</div>}
+ *    rightAddon={<div style={{ color: colors.white }}>롸이트애드온</div>}
+ *  />
+ * }>
+ *  <span style={{ color: colors.white }}>여긴 본문</span>
+ * </FieldBox>
+ * ```
+ */
+
+const meta: Meta<FieldBoxStoryProps> = {
+  title: 'Components/FieldBox',
+  component: FieldBox,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'string' },
+    description: { control: 'string' },
+    required: { control: 'boolean' },
+    style: { control: false },
+  },
+  args: { style: { width: '100%', minWidth: '335px' }, label: 'Label', description: 'Description', required: false },
+};
+
+export default meta;
+
+export const WithTextField: StoryObj<FieldBoxStoryProps> = {
+  render: (args) => {
+    return (
+      <FieldBox
+        topAddon={
+          <FieldBoxLabel label={args.label} description={args.description} required={args.required}></FieldBoxLabel>
+        }
+        bottomAddon={
+          <FieldBox.BottomAddon
+            leftAddon={<div style={{ color: colors.white }}>레프트애드온</div>}
+            rightAddon={<div style={{ color: colors.white }}>롸이트애드온</div>}
+          />
+        }
+        {...args}
+      >
+        <TextField value='value' />
+      </FieldBox>
+    );
+  },
+};
+
+export const WithTextArea: StoryObj<FieldBoxStoryProps> = {
+  render: (args) => {
+    return (
+      <FieldBox
+        topAddon={
+          <FieldBoxLabel label={args.label} description={args.description} required={args.required}></FieldBoxLabel>
+        }
+        bottomAddon={
+          <FieldBox.BottomAddon
+            leftAddon={<div style={{ color: colors.white }}>레프트애드온</div>}
+            rightAddon={<div style={{ color: colors.white }}>롸이트애드온</div>}
+          />
+        }
+        {...args}
+      >
+        <TextArea value='value' />
+      </FieldBox>
+    );
+  },
+};
+
+export const WithRadio: StoryObj<FieldBoxStoryProps> = {
+  args: { label: '파트', description: '파트를 선택해주세요.', required: true },
+  render: (args) => {
+    return (
+      <FieldBox
+        topAddon={
+          <FieldBoxLabel label={args.label} description={args.description} required={args.required}></FieldBoxLabel>
+        }
+        bottomAddon={
+          <FieldBox.BottomAddon
+            leftAddon={<div style={{ color: colors.white }}>레프트애드온</div>}
+            rightAddon={
+              <Button theme='blue' size='sm'>
+                입력 완료
+              </Button>
+            }
+          />
+        }
+        {...args}
+      >
+        <div style={{ display: 'flex', gap: '10px' }}>
+          <Radio label='기획' size='lg' checked />
+          <Radio label='디자인' size='lg' />
+          <Radio label='안드로이드' size='lg' />
+          <Radio label='iOS' size='lg' />
+          <Radio label='웹' size='lg' />
+          <Radio label='서버' size='lg' />
+        </div>
+      </FieldBox>
+    );
+  },
+};
+
+export const WithCheckBox: StoryObj<FieldBoxStoryProps> = {
+  render: (args) => {
+    return (
+      <FieldBox
+        topAddon={
+          <FieldBoxLabel label={args.label} description={args.description} required={args.required}></FieldBoxLabel>
+        }
+        bottomAddon={
+          <FieldBox.BottomAddon
+            leftAddon={<div style={{ color: colors.white }}>레프트애드온</div>}
+            rightAddon={
+              <Button theme='blue' size='sm'>
+                입력 완료
+              </Button>
+            }
+          />
+        }
+        {...args}
+      >
+        <div style={{ display: 'flex', gap: '10px' }}>
+          <CheckBox label='CheckBox1' size='lg' checked />
+          <CheckBox label='CheckBox2' size='lg' />
+          <CheckBox label='CheckBox3' size='lg' />
+        </div>
+      </FieldBox>
+    );
+  },
+};
+
+export const WithChip: StoryObj<FieldBoxStoryProps> = {
+  args: {
+    label: '경력',
+    description: '정규직으로 근무한 경력을 기준으로 선택해주세요.',
+    required: true,
+  },
+  render: (args) => {
+    return (
+      <FieldBox
+        topAddon={
+          <FieldBoxLabel label={args.label} description={args.description} required={args.required}></FieldBoxLabel>
+        }
+        bottomAddon={
+          <FieldBox.BottomAddon
+            leftAddon={<FieldBox.ErrorMessage message='경력을 선택해주세요' />}
+            rightAddon={
+              <Button theme='blue' size='sm' disabled>
+                선택 완료
+              </Button>
+            }
+          />
+        }
+        {...args}
+      >
+        <div style={{ display: 'flex', gap: '10px' }}>
+          <Chip size='sm'>아직 없어요</Chip>
+          <Chip size='sm'>인턴 경험만 있어요</Chip>
+          <Chip size='sm'>주니어(0~3년)</Chip>
+          <Chip size='sm'>미들(4~8년)</Chip>
+          <Chip size='sm'>시니어(9년 이상)</Chip>
+        </div>
+      </FieldBox>
+    );
+  },
+};

From 030e899d5f9e5d85dbc84bf2dbbc5242a346760c Mon Sep 17 00:00:00 2001
From: Brokyeom <goindol40@gmail.com>
Date: Sun, 20 Oct 2024 23:36:03 +0900
Subject: [PATCH 08/12] cs

---
 .changeset/four-ducks-develop.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/four-ducks-develop.md

diff --git a/.changeset/four-ducks-develop.md b/.changeset/four-ducks-develop.md
new file mode 100644
index 0000000..5306c14
--- /dev/null
+++ b/.changeset/four-ducks-develop.md
@@ -0,0 +1,5 @@
+---
+'@sopt-makers/ui': minor
+---
+
+Add FieldBox Component.

From 0c839b17f9798864ee9e57625cea7b2226566857 Mon Sep 17 00:00:00 2001
From: Brokyeom <goindol40@gmail.com>
Date: Sun, 20 Oct 2024 23:53:40 +0900
Subject: [PATCH 09/12] add accessibility arrts.

---
 packages/ui/FieldBox/components/Label.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/FieldBox/components/Label.tsx b/packages/ui/FieldBox/components/Label.tsx
index 179fc00..587bc85 100644
--- a/packages/ui/FieldBox/components/Label.tsx
+++ b/packages/ui/FieldBox/components/Label.tsx
@@ -12,7 +12,7 @@ export const FieldBoxLabel = forwardRef<HTMLDivElement, FieldBoxLabelProps>((pro
   const { required, label, description } = props;
 
   return (
-    <div ref={forwardedRef}>
+    <div aria-label={label} aria-required={required} ref={forwardedRef}>
       <label className={TopAddonLabelStyle}>
         <span>
           {label}

From bea327c9aaaf7bf7e23d9bc408ab4b2cdfbe0006 Mon Sep 17 00:00:00 2001
From: Brokyeom <goindol40@gmail.com>
Date: Thu, 24 Oct 2024 06:35:53 +0900
Subject: [PATCH 10/12] fix: remove context.ts

---
 packages/ui/FieldBox/context.ts | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 packages/ui/FieldBox/context.ts

diff --git a/packages/ui/FieldBox/context.ts b/packages/ui/FieldBox/context.ts
deleted file mode 100644
index e69de29..0000000

From 05301ab9cb0b6b2c3bd477dc0b42ac8f61670c03 Mon Sep 17 00:00:00 2001
From: Brokyeom <goindol40@gmail.com>
Date: Thu, 24 Oct 2024 14:46:48 +0900
Subject: [PATCH 11/12] Enhancing Storybook documentation.

---
 apps/docs/src/stories/FieldBox.stories.tsx | 36 ++++++++++++++++------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/apps/docs/src/stories/FieldBox.stories.tsx b/apps/docs/src/stories/FieldBox.stories.tsx
index c7f9308..c842a04 100644
--- a/apps/docs/src/stories/FieldBox.stories.tsx
+++ b/apps/docs/src/stories/FieldBox.stories.tsx
@@ -1,4 +1,3 @@
-import { colors } from '@sopt-makers/colors';
 import {
   FieldBox,
   FieldBoxProps,
@@ -33,6 +32,15 @@ type FieldBoxStoryProps = FieldBoxProps & FieldBoxLabelProps & FieldBoxBottomAdd
  *  <span style={{ color: colors.white }}>여긴 본문</span>
  * </FieldBox>
  * ```
+ *
+ * #### Sub-Components
+ *
+ * |컴포넌트명|설명
+ * |-------|--------|
+ * |FieldBox|FieldBox의 Root 컴포넌트.
+ * |FieldBox.Label|TopAddon 영역에 사용, Label과 description, required prop을 통해 제어가능.
+ * |FieldBox.BottomAddon|BottomAddon 속성에 사용할 수 있는 Wrapper 컴포넌트, leftAddon, rightAddon prop 제공.
+ * |FieldBox.ErrorMessage|BottomAddon > leftAddon에 사용하는 것을 권장, 에러메시지를 출력할 수 있는 텍스트 컴포넌트.
  */
 
 const meta: Meta<FieldBoxStoryProps> = {
@@ -40,9 +48,9 @@ const meta: Meta<FieldBoxStoryProps> = {
   component: FieldBox,
   tags: ['autodocs'],
   argTypes: {
-    label: { control: 'string' },
-    description: { control: 'string' },
-    required: { control: 'boolean' },
+    label: { controls: 'string', description: `<FieldBox.Label /> 컴포넌트의 label 영역을 설정합니다.` },
+    description: { controls: 'string', description: `<FieldBox.Label /> 컴포넌트의 description 영역을 설정합니다.` },
+    required: { controls: 'boolean', description: `<FieldBox.Label /> 컴포넌트의 required 속성을 설정합니다.` },
     style: { control: false },
   },
   args: { style: { width: '100%', minWidth: '335px' }, label: 'Label', description: 'Description', required: false },
@@ -59,8 +67,12 @@ export const WithTextField: StoryObj<FieldBoxStoryProps> = {
         }
         bottomAddon={
           <FieldBox.BottomAddon
-            leftAddon={<div style={{ color: colors.white }}>레프트애드온</div>}
-            rightAddon={<div style={{ color: colors.white }}>롸이트애드온</div>}
+            leftAddon={<FieldBox.ErrorMessage message='ErrorMessage' />}
+            rightAddon={
+              <Button theme='blue' size='sm'>
+                Button
+              </Button>
+            }
           />
         }
         {...args}
@@ -80,8 +92,12 @@ export const WithTextArea: StoryObj<FieldBoxStoryProps> = {
         }
         bottomAddon={
           <FieldBox.BottomAddon
-            leftAddon={<div style={{ color: colors.white }}>레프트애드온</div>}
-            rightAddon={<div style={{ color: colors.white }}>롸이트애드온</div>}
+            leftAddon={<FieldBox.ErrorMessage message='ErrorMessage' />}
+            rightAddon={
+              <Button theme='blue' size='sm'>
+                Button
+              </Button>
+            }
           />
         }
         {...args}
@@ -102,7 +118,7 @@ export const WithRadio: StoryObj<FieldBoxStoryProps> = {
         }
         bottomAddon={
           <FieldBox.BottomAddon
-            leftAddon={<div style={{ color: colors.white }}>레프트애드온</div>}
+            leftAddon={<FieldBox.ErrorMessage message='ErrorMessage' />}
             rightAddon={
               <Button theme='blue' size='sm'>
                 입력 완료
@@ -134,7 +150,7 @@ export const WithCheckBox: StoryObj<FieldBoxStoryProps> = {
         }
         bottomAddon={
           <FieldBox.BottomAddon
-            leftAddon={<div style={{ color: colors.white }}>레프트애드온</div>}
+            leftAddon={<FieldBox.ErrorMessage message='ErrorMessage' />}
             rightAddon={
               <Button theme='blue' size='sm'>
                 입력 완료

From 1082902bfc1b4dd941c4609e0d58090a169c4b89 Mon Sep 17 00:00:00 2001
From: Brokyeom <goindol40@gmail.com>
Date: Thu, 24 Oct 2024 14:49:17 +0900
Subject: [PATCH 12/12] fix

---
 apps/docs/src/stories/FieldBox.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/src/stories/FieldBox.stories.tsx b/apps/docs/src/stories/FieldBox.stories.tsx
index c842a04..8a6a5bb 100644
--- a/apps/docs/src/stories/FieldBox.stories.tsx
+++ b/apps/docs/src/stories/FieldBox.stories.tsx
@@ -21,7 +21,7 @@ type FieldBoxStoryProps = FieldBoxProps & FieldBoxLabelProps & FieldBoxBottomAdd
  *
  * #### 예시 코드
  * ```tsx
- * <FieldBox
+ * <FieldBox>
  *  topAddon={<FieldBox.Label label='안녕?' description='디스크립션' required />}
  *  bottomAddon={
  *   <FieldBox.BottomAddon