From 17897dc0b351c88effbd869a4cd4d7eebdab17eb Mon Sep 17 00:00:00 2001
From: HyeongKyeom Kim <97586683+Brokyeom@users.noreply.github.com>
Date: Mon, 2 Dec 2024 18:12:05 +0900
Subject: [PATCH] =?UTF-8?q?feat(FieldBox):=20FieldBox=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=20TopAddon=EC=9D=84=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=ED=95=A9=EB=8B=88=EB=8B=A4.=20(#223)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: Add FieldBox/TopAddon

* cs

* fix: TopAddon 을 활용한 방식으로 문서 수정,
---
 .changeset/violet-ducks-juggle.md            |  5 ++
 apps/docs/src/stories/FieldBox.stories.tsx   | 57 +++++++++++++++++---
 packages/ui/FieldBox/FieldBox.tsx            |  7 +--
 packages/ui/FieldBox/components/Label.tsx    | 12 +++--
 packages/ui/FieldBox/components/TopAddon.tsx | 21 ++++++++
 packages/ui/FieldBox/components/index.ts     |  1 +
 packages/ui/FieldBox/style.css.ts            |  9 +++-
 packages/ui/Input/TextField.tsx              | 10 ++--
 8 files changed, 102 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/violet-ducks-juggle.md
 create mode 100644 packages/ui/FieldBox/components/TopAddon.tsx

diff --git a/.changeset/violet-ducks-juggle.md b/.changeset/violet-ducks-juggle.md
new file mode 100644
index 0000000..cf67946
--- /dev/null
+++ b/.changeset/violet-ducks-juggle.md
@@ -0,0 +1,5 @@
+---
+'@sopt-makers/ui': minor
+---
+
+Add FieldBox/TopAddon
diff --git a/apps/docs/src/stories/FieldBox.stories.tsx b/apps/docs/src/stories/FieldBox.stories.tsx
index 8a6a5bb..46f3154 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 7bd1b9b..20bc151 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, FieldBoxErrorMessage, FieldBoxLabel } from './components';
+import { TopAddon, BottomAddon, FieldBoxErrorMessage, FieldBoxLabel } from './components';
 
 export interface FieldBoxProps extends HTMLAttributes<HTMLDivElement> {
   topAddon?: ReactNode;
@@ -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>
   );
 });
@@ -23,6 +23,7 @@ FieldBoxImpl.displayName = 'FieldBoxImpl';
 
 export const FieldBox = Object.assign(FieldBoxImpl, {
   Label: FieldBoxLabel,
+  TopAddon,
   BottomAddon,
   ErrorMessage: FieldBoxErrorMessage,
 });
diff --git a/packages/ui/FieldBox/components/Label.tsx b/packages/ui/FieldBox/components/Label.tsx
index dbff8ce..ba89465 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/components/TopAddon.tsx b/packages/ui/FieldBox/components/TopAddon.tsx
new file mode 100644
index 0000000..dfb58f3
--- /dev/null
+++ b/packages/ui/FieldBox/components/TopAddon.tsx
@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import { topAddonContainerStyle } from '../style.css';
+
+export interface FieldBoxTopAddonProps extends HTMLAttributes<HTMLDivElement> {
+  leftAddon?: ReactNode;
+  rightAddon?: ReactNode;
+}
+
+export const TopAddon = forwardRef<HTMLDivElement, FieldBoxTopAddonProps>((props, forwardedRef) => {
+  const { leftAddon, rightAddon } = props;
+
+  return (
+    <div className={topAddonContainerStyle} ref={forwardedRef}>
+      {leftAddon}
+      {rightAddon}
+    </div>
+  );
+});
+
+TopAddon.displayName = 'TopAddon';
diff --git a/packages/ui/FieldBox/components/index.ts b/packages/ui/FieldBox/components/index.ts
index 1bb9a59..f394be4 100644
--- a/packages/ui/FieldBox/components/index.ts
+++ b/packages/ui/FieldBox/components/index.ts
@@ -1,3 +1,4 @@
 export * from './Label';
+export * from './TopAddon';
 export * from './BottomAddon';
 export * from './ErrorMessage';
diff --git a/packages/ui/FieldBox/style.css.ts b/packages/ui/FieldBox/style.css.ts
index 6621dfd..38b911c 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({
@@ -20,6 +20,13 @@ export const requiredMarkStyle = style({
   marginLeft: '4px',
 });
 
+export const topAddonContainerStyle = style({
+  marginBottom: '8px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
 export const bottomAddonContainerStyle = style({
   marginTop: '8px',
   display: 'flex',
diff --git a/packages/ui/Input/TextField.tsx b/packages/ui/Input/TextField.tsx
index 49d2e5e..bae5ea8 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}