feat(FieldBox): FieldBox 컴포넌트에 TopAddon을 추가합니다.

.changeset/violet-ducks-juggle.md

@@ -0,0 +1,5 @@
+---
+'@sopt-makers/ui': minor
+---
+
+Add FieldBox/TopAddon

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

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,
 });

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>
   );

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';

packages/ui/FieldBox/components/index.ts

@@ -1,3 +1,4 @@
 export * from './Label';
+export * from './TopAddon';
 export * from './BottomAddon';
 export * from './ErrorMessage';

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,14 +13,20 @@ export const TopAddonLabelStyle = style({
 export const TopAddonDescriptionStyle = style({
   ...theme.fontsObject.LABEL_4_12_SB,
   color: theme.colors.gray300,
-  marginBottom: '8px',
 });
 
 export const requiredMarkStyle = style({
   color: theme.colors.secondary,
   marginLeft: '4px',
 });
 
+export const topAddonContainerStyle = style({
+  marginBottom: '8px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
 export const bottomAddonContainerStyle = style({
   marginTop: '8px',
   display: 'flex',

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}