@tipp/ui 2.3.19 → 2.3.21

package/src/molecules/dynamic-form.tsx

@@ -26,21 +26,28 @@ export interface DynamicFormProps {
 /**
  * 첫 번째 에러 필드로 스크롤하는 함수
  */
-function scrollToFirstError(errors: Record<string, unknown>, _fields: DynamicFormFieldSchema[]): void {
+function scrollToFirstError(
+  errors: Record<string, unknown>,
+  _fields: DynamicFormFieldSchema[]
+): void {
   const firstErrorFieldName = Object.keys(errors)[0];
   if (!firstErrorFieldName) return;
 
   // 해당 필드의 DOM 요소를 찾기 (여러 선택자 시도)
   let fieldElement = document.querySelector(`[name="${firstErrorFieldName}"]`);
-  
+
   // input 요소를 찾지 못한 경우, 해당 필드의 컨테이너를 찾기
   if (!fieldElement) {
-    fieldElement = document.querySelector(`[data-field-name="${firstErrorFieldName}"]`);
+    fieldElement = document.querySelector(
+      `[data-field-name="${firstErrorFieldName}"]`
+    );
   }
-  
+
   // 여전히 찾지 못한 경우, FormItem의 에러 메시지 영역을 찾기
   if (!fieldElement) {
-    fieldElement = document.querySelector(`[data-error-field="${firstErrorFieldName}"]`);
+    fieldElement = document.querySelector(
+      `[data-error-field="${firstErrorFieldName}"]`
+    );
   }
 
   if (fieldElement) {
@@ -75,7 +82,10 @@ function DynamicFormRoot({
             .required(`${field.label}은(는) 필수입니다`);
         } else if (field.type === 'yes_no') {
           // yes_no 타입은 boolean 스키마로 처리
-          schema[field.name] = Yup.boolean().oneOf([true], `${field.label}에 동의해주세요`);
+          schema[field.name] = Yup.boolean().oneOf(
+            [true],
+            `${field.label}에 동의해주세요`
+          );
         } else {
           // choice, dropdown, short_text, long_text, number, email 타입은 문자열 스키마로 처리
           schema[field.name] = Yup.string().required(
@@ -87,9 +97,12 @@ function DynamicFormRoot({
     return Object.keys(schema).length > 0 ? Yup.object(schema) : undefined;
   }, [fields]);
 
-  const handleSubmit = useCallback(async (values: Record<string, unknown>) => {
-    await onSubmit(values);
-  }, [onSubmit]);
+  const handleSubmit = useCallback(
+    async (values: Record<string, unknown>) => {
+      await onSubmit(values);
+    },
+    [onSubmit]
+  );
 
   const formik: FormikProps<Record<string, unknown>> = useFormik({
     initialValues: fields.reduce<Record<string, unknown>>((acc, field) => {
@@ -115,7 +128,7 @@ function DynamicFormRoot({
       const timeoutId = setTimeout(() => {
         scrollToFirstError(formik.errors, fields);
       }, 100);
-      
+
       return () => {
         clearTimeout(timeoutId);
       };
@@ -123,7 +136,12 @@ function DynamicFormRoot({
   }, [formik.submitCount, formik.errors, fields]);
 
   return (
-    <DynamicFormProvider fields={fields} formStyle={formStyle} formik={formik} readonly={readonly}>
+    <DynamicFormProvider
+      fields={fields}
+      formStyle={formStyle}
+      formik={formik}
+      readonly={readonly}
+    >
       {children}
     </DynamicFormProvider>
   );
@@ -161,9 +179,12 @@ function DynamicFormFieldList({
               labelVariant={labelVariant}
               name={field.name}
               required={field.required}
+              
             >
+              {field.description && field.type !== 'yes_no' ? (
+                <Typo variant="caption">{field.description}</Typo>
+              ) : null}
               <DynamicFormField field={field} />
-              {field.description && field.type !== 'yes_no' ? <Typo color="gray" variant="caption">{field.description}</Typo> : null}
             </Form.FormItem>
           </Box>
         );
@@ -260,11 +281,19 @@ export function createYupValidation(
   // field.required가 true인 경우 required 검증 추가
   if (field.required) {
     if (field.type === 'yes_no') {
-      schema = (schema as Yup.BooleanSchema).oneOf([true], validation.message || `${field.label}에 동의해주세요`);
+      schema = (schema as Yup.BooleanSchema).oneOf(
+        [true],
+        validation.message || `${field.label}에 동의해주세요`
+      );
     } else if (field.type === 'choices') {
-      schema = (schema as ReturnType<typeof Yup.array>).min(1, validation.message || `${field.label}을(를) 하나 이상 선택해주세요`);
+      schema = (schema as ReturnType<typeof Yup.array>).min(
+        1,
+        validation.message || `${field.label}을(를) 하나 이상 선택해주세요`
+      );
     } else {
-      schema = (schema as Yup.StringSchema).required(validation.message || `${field.label}은(는) 필수입니다`);
+      schema = (schema as Yup.StringSchema).required(
+        validation.message || `${field.label}은(는) 필수입니다`
+      );
     }
   }
 

package/src/molecules/form/form.tsx

@@ -57,7 +57,15 @@ function HeadingLabel(props: HeadingProps): React.ReactNode {
 
 function CaptionLabel(props: TypoProps): React.ReactNode {
   return (
-    <Typo color="gray" variant="caption" {...props}>
+    <Typo color="gray" variant="caption" weight="bold" {...props}>
+      {props.children}
+    </Typo>
+  );
+}
+
+function BodyLabel(props: TypoProps): React.ReactNode {
+  return (
+    <Typo variant="body" weight="bold" {...props}>
       {props.children}
     </Typo>
   );
@@ -73,7 +81,7 @@ const Label = forwardRef<HTMLLabelElement, FormLabelProps>(
           return CaptionLabel;
         case 'body':
         default:
-          return Typo;
+          return BodyLabel;
       }
     }, [variant]);
 

package/src/molecules/training-info-guideline.tsx

@@ -53,7 +53,7 @@ function TrainingInfoGuidelineItem({
   if (value.type === 'file') {
     return (
       <TrainingInfoGuidelineButton
-        description={value.filename}
+        description="파일 다운로드"
         icon={<FileTextIcon />}
         onClick={() => {
           onClickFileDownload({ url: value.url, filename: value.filename });
@@ -69,7 +69,7 @@ function TrainingInfoGuidelineItem({
       <Dialog.Root>
         <Dialog.Trigger>
           <TrainingInfoGuidelineButton
-            description="영상"
+            description="영상 자료"
             icon={<VideoIcon />}
             title={value.videoTitle}
           />