feat: publish FieldBox.Label

apps/docs/src/App.tsx

@@ -1,16 +1,16 @@
-import "./App.css";
+import './App.css';
 
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, useState } from 'react';
 
-import SearchField from "../../../packages/ui/Input/SearchField";
-import { Test } from "@sopt-makers/ui";
-import TextArea from "../../../packages/ui/Input/TextArea";
-import TextField from "../../../packages/ui/Input/TextField";
+import '@sopt-makers/ui/dist/index.css';
+
+import { FieldBox, SearchField, Test, TextArea, TextField } from '@sopt-makers/ui';
+import { colors } from '@sopt-makers/colors';
 
 function App() {
-  const [input, setInput] = useState("");
-  const [textarea, setTextarea] = useState("");
-  const [search, setSearch] = useState("");
+  const [input, setInput] = useState('');
+  const [textarea, setTextarea] = useState('');
+  const [search, setSearch] = useState('');
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     setInput(e.target.value);
@@ -43,39 +43,41 @@ function App() {
   };
 
   const handleSearchReset = () => {
-    setSearch("");
+    setSearch('');
   };
 
   return (
     <>
-      <Test text="Test Component" size="big" color="blue" />
+      <Test text='Test Component' size='big' color='blue' />
       <TextField<string>
-        placeholder="Placeholder..."
+        placeholder='Placeholder...'
         required
-        labelText="Label"
-        descriptionText="description"
+        labelText='Label'
+        descriptionText='description'
         validationFn={inputValidation}
         value={input}
         onChange={handleInputChange}
       />
       <TextArea
-        placeholder="Placeholder..."
+        placeholder='Placeholder...'
         required
-        topAddon={{ labelText: "Label", descriptionText: "description" }}
+        topAddon={{ labelText: 'Label', descriptionText: 'description' }}
         rightAddon={{ onClick: () => handleTextareaSubmit() }}
         validationFn={textareaValidation}
-        errorMessage="Error Message"
+        errorMessage='Error Message'
         value={textarea}
         onChange={handleTextareaChange}
         maxLength={300}
       />
       <SearchField
-        placeholder="Placeholder..."
+        placeholder='Placeholder...'
         value={search}
         onChange={handleSearchChange}
         onSubmit={handleSearchSubmit}
         onReset={handleSearchReset}
       />
+      <div style={{ padding: '20px', backgroundColor: colors.secondary }} />
+      <FieldBox topAddon={<FieldBox.Label label='안녕?' description='디스크립션' required />}>여긴 본문</FieldBox>
     </>
   );
 }

packages/ui/FieldBox/FieldBox.tsx

@@ -1,24 +1,26 @@
 import { forwardRef } from 'react';
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { FieldBoxLabel } from './Label';
 
-export interface FieldBoxProps {
+export interface FieldBoxProps extends HTMLAttributes<HTMLDivElement> {
   topAddon?: ReactNode;
   bottomAddon?: ReactNode;
-  children: ReactNode;
 }
 
-const FieldBox = forwardRef<HTMLDivElement, FieldBoxProps>((props, forwardedRef) => {
+const FieldBoxImpl = forwardRef<HTMLDivElement, FieldBoxProps>((props, forwardedRef) => {
   const { topAddon, bottomAddon, children, ...restProps } = props;
 
   return (
     <div ref={forwardedRef} {...restProps}>
-      <div>{topAddon}</div>
+      {topAddon}
       <div>{children}</div>
       <div>{bottomAddon}</div>
     </div>
   );
 });
 
-FieldBox.displayName = 'FieldBox';
+FieldBoxImpl.displayName = 'FieldBoxImpl';
 
-export default FieldBox;
+export const FieldBox = Object.assign(FieldBoxImpl, {
+  Label: FieldBoxLabel,
+});

packages/ui/FieldBox/Label.tsx

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import * as S from './style.css';
+
+export interface FieldBoxLabelProps extends HTMLAttributes<HTMLDivElement> {
+  label: string;
+  description: string;
+  required: boolean;
+}
+
+export const FieldBoxLabel = forwardRef<HTMLDivElement, FieldBoxLabelProps>((props, forwardedRef) => {
+  const { required, label, description } = props;
+
+  return (
+    <div ref={forwardedRef}>
+      <label className={S.label}>
+        <span>
+          {label}
+          {required ? <span className={S.required}>*</span> : null}
+        </span>
+        <p className={S.description}>{description}</p>
+      </label>
+    </div>
+  );
+});
+
+FieldBoxLabel.displayName = 'FieldBoxLabel';

packages/ui/FieldBox/index.ts

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

packages/ui/FieldBox/style.css.ts

@@ -0,0 +1,21 @@
+import { style } from '@vanilla-extract/css';
+import theme from '../theme.css';
+
+export const label = style({
+  ...theme.fontsObject.LABEL_3_14_SB,
+  display: 'flex',
+  flexDirection: 'column',
+  textAlign: 'left',
+  color: theme.colors.white,
+});
+
+export const description = style({
+  ...theme.fontsObject.LABEL_4_12_SB,
+  color: theme.colors.gray300,
+  marginBottom: '8px',
+});
+
+export const required = style({
+  color: theme.colors.secondary,
+  marginLeft: '4px',
+});

packages/ui/index.ts

@@ -12,6 +12,6 @@ export { default as Tag } from './Tag';
 export { default as Chip } from './Chip';
 export { default as Callout } from './Callout';
 export { default as Tab } from './Tab';
-
+export * from './FieldBox';
 // test component
 export { default as Test } from './Test';