From 5a567c4646e74f20af5b8cad05e012e14374bb64 Mon Sep 17 00:00:00 2001
From: Brokyeom <goindol40@gmail.com>
Date: Mon, 2 Dec 2024 16:53:40 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20TopAddon=20=EC=9D=84=20=ED=99=9C?=
 =?UTF-8?q?=EC=9A=A9=ED=95=9C=20=EB=B0=A9=EC=8B=9D=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=AC=B8=EC=84=9C=20=EC=88=98=EC=A0=95,?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/docs/src/stories/FieldBox.stories.tsx | 57 +++++++++++++++++++---
 packages/ui/FieldBox/FieldBox.tsx          |  4 +-
 packages/ui/FieldBox/components/Label.tsx  | 12 +++--
 packages/ui/FieldBox/style.css.ts          |  3 +-
 packages/ui/Input/TextField.tsx            | 10 ++--
 5 files changed, 67 insertions(+), 19 deletions(-)

diff --git a/apps/docs/src/stories/FieldBox.stories.tsx b/apps/docs/src/stories/FieldBox.stories.tsx
index 8a6a5bb5..46f31548 100644
--- a/apps/docs/src/stories/FieldBox.stories.tsx
+++ b/apps/docs/src/stories/FieldBox.stories.tsx
@@ -3,7 +3,6 @@ import {
   FieldBoxProps,
   FieldBoxLabelProps,
   FieldBoxBottomAddonProps,
-  FieldBoxLabel,
   TextField,
   TextArea,
   Radio,
@@ -22,7 +21,16 @@ type FieldBoxStoryProps = FieldBoxProps & FieldBoxLabelProps & FieldBoxBottomAdd
  * #### 예시 코드
  * ```tsx
  * <FieldBox>
- *  topAddon={<FieldBox.Label label='안녕?' description='디스크립션' required />}
+ * topAddon={
+ *          <FieldBox.TopAddon
+ *           leftAddon={<FieldBox.Label label={args.label} description={args.description} required={args.required} />}
+ *           rightAddon={
+ *             <Button variant='outlined' size='sm' disabled>
+ *               미리보기
+ *             </Button>
+ *           }
+ *         />
+ *       }
  *  bottomAddon={
  *   <FieldBox.BottomAddon
  *    leftAddon={<div style={{ color: colors.white }}>레프트애드온</div>}
@@ -63,7 +71,14 @@ export const WithTextField: StoryObj<FieldBoxStoryProps> = {
     return (
       <FieldBox
         topAddon={
-          <FieldBoxLabel label={args.label} description={args.description} required={args.required}></FieldBoxLabel>
+          <FieldBox.TopAddon
+            leftAddon={<FieldBox.Label label={args.label} description={args.description} required={args.required} />}
+            rightAddon={
+              <Button variant='outlined' size='sm' disabled>
+                미리보기
+              </Button>
+            }
+          />
         }
         bottomAddon={
           <FieldBox.BottomAddon
@@ -88,7 +103,14 @@ export const WithTextArea: StoryObj<FieldBoxStoryProps> = {
     return (
       <FieldBox
         topAddon={
-          <FieldBoxLabel label={args.label} description={args.description} required={args.required}></FieldBoxLabel>
+          <FieldBox.TopAddon
+            leftAddon={<FieldBox.Label label={args.label} description={args.description} required={args.required} />}
+            rightAddon={
+              <Button variant='outlined' size='sm' disabled>
+                미리보기
+              </Button>
+            }
+          />
         }
         bottomAddon={
           <FieldBox.BottomAddon
@@ -114,7 +136,14 @@ export const WithRadio: StoryObj<FieldBoxStoryProps> = {
     return (
       <FieldBox
         topAddon={
-          <FieldBoxLabel label={args.label} description={args.description} required={args.required}></FieldBoxLabel>
+          <FieldBox.TopAddon
+            leftAddon={<FieldBox.Label label={args.label} description={args.description} required={args.required} />}
+            rightAddon={
+              <Button variant='outlined' size='sm' disabled>
+                미리보기
+              </Button>
+            }
+          />
         }
         bottomAddon={
           <FieldBox.BottomAddon
@@ -146,7 +175,14 @@ export const WithCheckBox: StoryObj<FieldBoxStoryProps> = {
     return (
       <FieldBox
         topAddon={
-          <FieldBoxLabel label={args.label} description={args.description} required={args.required}></FieldBoxLabel>
+          <FieldBox.TopAddon
+            leftAddon={<FieldBox.Label label={args.label} description={args.description} required={args.required} />}
+            rightAddon={
+              <Button variant='outlined' size='sm' disabled>
+                미리보기
+              </Button>
+            }
+          />
         }
         bottomAddon={
           <FieldBox.BottomAddon
@@ -180,7 +216,14 @@ export const WithChip: StoryObj<FieldBoxStoryProps> = {
     return (
       <FieldBox
         topAddon={
-          <FieldBoxLabel label={args.label} description={args.description} required={args.required}></FieldBoxLabel>
+          <FieldBox.TopAddon
+            leftAddon={<FieldBox.Label label={args.label} description={args.description} required={args.required} />}
+            rightAddon={
+              <Button variant='outlined' size='sm' disabled>
+                미리보기
+              </Button>
+            }
+          />
         }
         bottomAddon={
           <FieldBox.BottomAddon
diff --git a/packages/ui/FieldBox/FieldBox.tsx b/packages/ui/FieldBox/FieldBox.tsx
index 08740568..20bc151b 100644
--- a/packages/ui/FieldBox/FieldBox.tsx
+++ b/packages/ui/FieldBox/FieldBox.tsx
@@ -13,8 +13,8 @@ const FieldBoxImpl = forwardRef<HTMLDivElement, FieldBoxProps>((props, forwarded
   return (
     <div ref={forwardedRef} {...restProps}>
       {topAddon}
-      <div>{children}</div>
-      <div>{bottomAddon}</div>
+      {children}
+      {bottomAddon}
     </div>
   );
 });
diff --git a/packages/ui/FieldBox/components/Label.tsx b/packages/ui/FieldBox/components/Label.tsx
index dbff8ce8..ba894650 100644
--- a/packages/ui/FieldBox/components/Label.tsx
+++ b/packages/ui/FieldBox/components/Label.tsx
@@ -14,11 +14,13 @@ export const FieldBoxLabel = forwardRef<HTMLDivElement, FieldBoxLabelProps>((pro
   return (
     <div aria-label={label} aria-required={required} ref={forwardedRef}>
       <label className={TopAddonLabelStyle}>
-        <span>
-          {label}
-          {required ? <span className={requiredMarkStyle}>*</span> : null}
-        </span>
-        <p className={TopAddonDescriptionStyle}>{description}</p>
+        {label ? (
+          <span>
+            {label}
+            {required ? <span className={requiredMarkStyle}>*</span> : null}
+          </span>
+        ) : null}
+        {description ? <p className={TopAddonDescriptionStyle}>{description}</p> : null}
       </label>
     </div>
   );
diff --git a/packages/ui/FieldBox/style.css.ts b/packages/ui/FieldBox/style.css.ts
index 2cdb09a1..38b911c1 100644
--- a/packages/ui/FieldBox/style.css.ts
+++ b/packages/ui/FieldBox/style.css.ts
@@ -4,6 +4,7 @@ import theme from '../theme.css';
 export const TopAddonLabelStyle = style({
   ...theme.fontsObject.LABEL_3_14_SB,
   display: 'flex',
+  gap: '8px',
   flexDirection: 'column',
   textAlign: 'left',
   color: theme.colors.white,
@@ -12,7 +13,6 @@ export const TopAddonLabelStyle = style({
 export const TopAddonDescriptionStyle = style({
   ...theme.fontsObject.LABEL_4_12_SB,
   color: theme.colors.gray300,
-  marginBottom: '8px',
 });
 
 export const requiredMarkStyle = style({
@@ -21,6 +21,7 @@ export const requiredMarkStyle = style({
 });
 
 export const topAddonContainerStyle = style({
+  marginBottom: '8px',
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
diff --git a/packages/ui/Input/TextField.tsx b/packages/ui/Input/TextField.tsx
index 49d2e5e7..bae5ea86 100644
--- a/packages/ui/Input/TextField.tsx
+++ b/packages/ui/Input/TextField.tsx
@@ -41,10 +41,12 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
   return (
     <FieldBox
       bottomAddon={
-        <FieldBox.BottomAddon
-          leftAddon={hasError() && errorMessage ? <FieldBox.ErrorMessage message={errorMessage} /> : null}
-          rightAddon={bottomAddon}
-        />
+        (hasError() && errorMessage) || bottomAddon ? (
+          <FieldBox.BottomAddon
+            leftAddon={hasError() && errorMessage ? <FieldBox.ErrorMessage message={errorMessage} /> : null}
+            rightAddon={bottomAddon}
+          />
+        ) : null
       }
       className={className}
       ref={ref}