feat: form-label에 required props 및 ui 추가

Central-MakeUs · Jan 18, 2025 · 22f41b5 · 22f41b5
1 parent 6c8fd1d
commit 22f41b5
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 deletions.
diff --git a/src/ui/form/form-item.stories.tsx b/src/ui/form/form-item.stories.tsx
@@ -47,6 +47,8 @@ const meta: Meta<typeof FormField> = {
                 control: form.control as any,
               }}
             />
+            {/* 
+            // error State는 이렇게 관리, storybook에선 보여주기 힘듬
             <FormField
               control={form.control}
               name="username"
@@ -71,7 +73,7 @@ const meta: Meta<typeof FormField> = {
                   <FormErrorMessage />
                 </FormItem>
               )}
-            />
+            /> */}
             <button hidden />
           </form>
         </Form>
@@ -106,6 +108,29 @@ export const First: Story = {
   ),
 };
 
+export const required: Story = {
+  render: (args) => (
+    <FormField
+      control={args.control}
+      name="username"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel required>폼 라밸</FormLabel>
+          <InputContainer>
+            <Input {...field} />
+            {field.value && (
+              <InputRightElement>
+                <DeleteCir />
+              </InputRightElement>
+            )}
+          </InputContainer>
+          <FormErrorMessage />
+        </FormItem>
+      )}
+    />
+  ),
+};
+
 export const WithoutLabel: Story = {
   render: (args) => (
     <FormField

diff --git a/src/ui/form/form-label.styles.css.ts b/src/ui/form/form-label.styles.css.ts
@@ -6,5 +6,11 @@ export const formLabelBase = style([
   typography('body_2_14_sb'),
   {
     color: globalVars.color.grey800,
+    display: 'flex',
+    gap: 4,
   },
 ]);
+
+export const requiredIcon = style({
+  color: globalVars.color.mainblue500,
+});
diff --git a/src/ui/form/form-label.tsx b/src/ui/form/form-label.tsx
@@ -3,11 +3,12 @@ import { cx } from '../util.ts';
 import { useFormField } from './form-field.tsx';
 import * as styles from './form-label.styles.css.ts';
 
-export type FormLabelProps = ComponentProps<'label'>;
+export type FormLabelProps = ComponentProps<'label'> & {
+  required?: boolean;
+};
 
-// TODO required 속성 지원 필요
 export const FormLabel = (props: FormLabelProps) => {
-  const { children, className, ...restProps } = props;
+  const { children, className, required, ...restProps } = props;
 
   const { formItemId } = useFormField();
   return (
@@ -17,6 +18,7 @@ export const FormLabel = (props: FormLabelProps) => {
       className={cx(styles.formLabelBase, className)}
     >
       {children}
+      {required && <span className={styles.requiredIcon}>*</span>}
     </label>
   );
 };