feat: publish FieldBox BottomAddon

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

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

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

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

packages/ui/FieldBox/index.ts

@@ -1,2 +1,3 @@
 export * from './FieldBox';
 export * from './Label';
+export * from './BottomAddon';

packages/ui/FieldBox/style.css.ts

@@ -1,21 +1,28 @@
 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',
   textAlign: 'left',
   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',
+});