fix: TopAddon 을 활용한 방식으로 문서 수정,

sopt-makers · Dec 2, 2024 · 5a567c4 · 5a567c4
1 parent dc0815a
commit 5a567c4
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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}