@tipp/ui 2.2.8 → 2.2.10

package/src/molecules/dynamic-form.tsx

@@ -1,47 +1,79 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useMemo, useCallback, useEffect } from 'react';
 import { useFormik, type FormikProps } from 'formik';
 import * as Yup from 'yup';
 import { Box } from '@radix-ui/themes';
 import { Typo } from '@/atoms';
+import {
+  DynamicFormProvider,
+  useDynamicForm,
+} from '@/context/dynamic-form-context';
 import type {
-  DynamicFormJsonSchema,
+  DynamicFormFieldSchema,
   ValidationRule,
-} from '@/types/dynamic-form-json';
-import { Button } from '../atoms/button';
+} from '@/types/dynamic-form-schema-generated';
 import { Form } from './form/form';
 import { DynamicFormField } from './dynamic-field';
 
 export interface DynamicFormProps {
-  fields: DynamicFormField[];
+  fields: DynamicFormFieldSchema[];
   initialValues?: Record<string, unknown>;
   onSubmit: (values: Record<string, unknown>) => void | Promise<void>;
-  submitButtonText?: string;
-  labelVariant?: 'title' | 'body' | 'caption';
-  className?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * 첫 번째 에러 필드로 스크롤하는 함수
+ */
+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}"]`);
+  }
+  
+  // 여전히 찾지 못한 경우, FormItem의 에러 메시지 영역을 찾기
+  if (!fieldElement) {
+    fieldElement = document.querySelector(`[data-error-field="${firstErrorFieldName}"]`);
+  }
+
+  if (fieldElement) {
+    fieldElement.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+    });
+  }
 }
 
-export function DynamicForm({
+function DynamicFormRoot({
   fields,
   initialValues = {},
   onSubmit,
-  submitButtonText = '제출',
-  labelVariant = 'body',
-  className,
+  children,
 }: DynamicFormProps): React.ReactElement {
-  const fieldRefs = useRef<Record<string, HTMLElement | null>>({});
-
   const validationSchema = useMemo(() => {
     const schema: Record<string, Yup.Schema<unknown>> = {};
     fields.forEach((field) => {
       if (field.validation) {
-        schema[field.name] = field.validation;
+        const validation = createYupValidation(field, field.validation);
+        if (validation) {
+          schema[field.name] = validation;
+        }
       } else if (field.required) {
-        // checkbox 타입은 배열 스키마로 처리
-        if (field.type === 'checkbox') {
+        // choices 타입은 배열 스키마로 처리
+        if (field.type === 'choices') {
           schema[field.name] = Yup.array()
             .min(1, `${field.label}을(를) 하나 이상 선택해주세요`)
             .required(`${field.label}은(는) 필수입니다`);
+        } else if (field.type === 'yes_no') {
+          // yes_no 타입은 boolean 스키마로 처리
+          schema[field.name] = Yup.boolean().oneOf([true], `${field.label}에 동의해주세요`);
         } else {
+          // choice, dropdown, short_text, long_text, number, email 타입은 문자열 스키마로 처리
           schema[field.name] = Yup.string().required(
             `${field.label}은(는) 필수입니다`
           );
@@ -51,11 +83,15 @@ export function DynamicForm({
     return Object.keys(schema).length > 0 ? Yup.object(schema) : undefined;
   }, [fields]);
 
+  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) => {
-      if (field.type === 'checkbox') {
+      if (field.type === 'choices') {
         acc[field.name] = initialValues[field.name] || [];
-      } else if (field.type === 'single-checkbox') {
+      } else if (field.type === 'yes_no') {
         acc[field.name] = initialValues[field.name] || false;
       } else {
         acc[field.name] = initialValues[field.name] || '';
@@ -64,46 +100,44 @@ export function DynamicForm({
     }, {}),
     validationSchema,
     validateOnBlur: true,
-    onSubmit: async (values, formikHelpers) => {
-      // 1. 에러 체크 동기적 실행
-      // const errors = await formikHelpers.validateForm();
-
-      // // 2. 에러가 있으면 스크롤 이동, 아니면 submit 동기적 실행
-      // if (Object.keys(errors).length > 0) {
-      //   void formikHelpers.setTouched(
-      //     fields.reduce<Record<string, boolean>>((acc, field) => {
-      //       acc[field.name] = true;
-      //       return acc;
-      //     }, {})
-      //   );
-
-      //   // 첫 번째 에러 필드로 스크롤
-      //   const firstErrorField = fields.find((field) => errors[field.name]);
-      //   if (firstErrorField) {
-      //     const fieldElement = fieldRefs.current[firstErrorField.name];
-      //     if (fieldElement) {
-      //       fieldElement.scrollIntoView({
-      //         behavior: 'smooth',
-      //         block: 'center',
-      //       });
-      //       // 포커스도 함께 이동
-      //       const focusableElement = fieldElement.querySelector(
-      //         'input, select, textarea, button'
-      //       );
-      //       if (focusableElement) {
-      //         (focusableElement as HTMLElement).focus();
-      //       }
-      //     }
-      //   }
-      //   return;
-      // }
-
-      await onSubmit(values);
-    },
+    validateOnChange: true,
+    onSubmit: handleSubmit,
   });
 
+  // submit 시 validation 에러가 있으면 첫 번째 에러 필드로 스크롤
+  useEffect(() => {
+    if (formik.submitCount > 0 && Object.keys(formik.errors).length > 0) {
+      // 약간의 지연을 두어 DOM 업데이트 후 스크롤 실행
+      const timeoutId = setTimeout(() => {
+        scrollToFirstError(formik.errors, fields);
+      }, 100);
+      
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [formik.submitCount, formik.errors, fields]);
+
+  return (
+    <DynamicFormProvider fields={fields} formik={formik}>
+      {children}
+    </DynamicFormProvider>
+  );
+}
+
+interface DynamicFormFieldListProps {
+  fields?: DynamicFormFieldSchema[];
+  labelVariant?: 'title' | 'body' | 'caption';
+}
+function DynamicFormFieldList({
+  fields: fieldsProp,
+  labelVariant,
+}: DynamicFormFieldListProps): React.ReactElement {
+  const { formik, fields: fieldsFromContext } = useDynamicForm();
+  const fields = fieldsProp || fieldsFromContext;
+
   return (
-    <Form.Root className={className} onSubmit={formik.handleSubmit}>
+    <>
       {fields.map((field) => {
         const errorMessage =
           formik.touched[field.name] && formik.errors[field.name]
@@ -112,11 +146,10 @@ export function DynamicForm({
 
         return (
           <Box
+            data-error-field={errorMessage ? field.name : undefined}
+            data-field-name={field.name}
             key={field.name}
             mb="2"
-            ref={(el) => {
-              fieldRefs.current[field.name] = el;
-            }}
           >
             <Form.FormItem
               errorMessage={errorMessage}
@@ -125,73 +158,59 @@ export function DynamicForm({
               name={field.name}
               required={field.required}
             >
-              <DynamicFormField field={field} formik={formik} />
+              <DynamicFormField field={field} />
               {field.description ? <Typo>{field.description}</Typo> : null}
             </Form.FormItem>
           </Box>
         );
       })}
-
-      <Button disabled={formik.isSubmitting} type="submit">
-        {formik.isSubmitting ? '제출 중...' : submitButtonText}
-      </Button>
-    </Form.Root>
+    </>
   );
 }
 
-// JSON 데이터를 DynamicFormField 타입으로 변환하는 함수
-export function convertJsonToFields(
-  jsonData: DynamicFormJsonSchema
-): DynamicFormField[] {
-  return jsonData.fields.map((field) => ({
-    name: field.name,
-    type: field.type,
-    label: field.label,
-    placeholder: field.placeholder,
-    description: field.description,
-    required: field.required,
-    orientation: field.orientation,
-    options: field.options,
-    validation: field.validation
-      ? createYupValidation(field.validation)
-      : undefined,
-  }));
-}
+export const DynamicForm = {
+  Root: DynamicFormRoot,
+  FieldList: DynamicFormFieldList,
+};
 
 export function createYupValidation(
+  field: DynamicFormFieldSchema,
   validation?: ValidationRule
 ): Yup.Schema<unknown> | undefined {
   if (!validation) return undefined;
 
   let schema: Yup.Schema<unknown>;
 
-  if (validation.type === 'number') {
+  // field.type을 기준으로 기본 스키마 생성
+  if (field.type === 'number') {
     schema = Yup.number();
-  } else if (validation.type === 'email') {
+  } else if (field.type === 'email') {
     schema = Yup.string().email(
       validation.message || '올바른 이메일 형식이 아닙니다'
     );
-  } else if (validation.type === 'array') {
+  } else if (field.type === 'choices') {
     schema = Yup.array();
+  } else if (field.type === 'yes_no') {
+    schema = Yup.boolean();
   } else {
+    // choice, dropdown, short_text, long_text 타입은 문자열 스키마로 처리
     schema = Yup.string();
   }
 
-  if (validation.required) {
-    schema = schema.required(validation.message || '필수 항목입니다') as Yup.Schema<unknown>;
-  }
-
   if (validation.min !== undefined) {
-    if (validation.type === 'number') {
+    if (field.type === 'number') {
       schema = (schema as Yup.NumberSchema).min(
         validation.min,
         validation.message || `최소 ${validation.min}이어야 합니다`
       );
-    } else if (validation.type === 'array') {
+    } else if (field.type === 'choices') {
       schema = (schema as ReturnType<typeof Yup.array>).min(
         validation.min,
         validation.message || `최소 ${validation.min}개 이상 선택해주세요`
       );
+    } else if (field.type === 'yes_no') {
+      // yes_no 타입은 boolean이므로 min/max 검증 불가
+      // 대신 required 검증만 적용
     } else {
       schema = (schema as Yup.StringSchema).min(
         validation.min,
@@ -201,16 +220,19 @@ export function createYupValidation(
   }
 
   if (validation.max !== undefined) {
-    if (validation.type === 'number') {
+    if (field.type === 'number') {
       schema = (schema as Yup.NumberSchema).max(
         validation.max,
         validation.message || `최대 ${validation.max}이어야 합니다`
       );
-    } else if (validation.type === 'array') {
+    } else if (field.type === 'choices') {
       schema = (schema as ReturnType<typeof Yup.array>).max(
         validation.max,
         validation.message || `최대 ${validation.max}개까지 선택 가능합니다`
       );
+    } else if (field.type === 'yes_no') {
+      // yes_no 타입은 boolean이므로 min/max 검증 불가
+      // 대신 required 검증만 적용
     } else {
       schema = (schema as Yup.StringSchema).max(
         validation.max,
@@ -219,5 +241,28 @@ export function createYupValidation(
     }
   }
 
+  if (validation.pattern) {
+    if (field.type === 'yes_no') {
+      // yes_no 타입은 boolean이므로 pattern 검증 불가
+      // 대신 required 검증만 적용
+    } else {
+      schema = (schema as Yup.StringSchema).matches(
+        new RegExp(validation.pattern),
+        validation.message || '올바른 형식이 아닙니다'
+      );
+    }
+  }
+
+  // field.required가 true인 경우 required 검증 추가
+  if (field.required) {
+    if (field.type === 'yes_no') {
+      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}을(를) 하나 이상 선택해주세요`);
+    } else {
+      schema = (schema as Yup.StringSchema).required(validation.message || `${field.label}은(는) 필수입니다`);
+    }
+  }
+
   return schema;
 }

package/src/molecules/index.ts

@@ -13,4 +13,5 @@ export * from './download-card';
 export * from './ghost-post';
 export * from './curriculumV2';
 export * from './dynamic-form';
-export * from './dynamic-field';
+export * from './dynamic-field';
+export * from './dynamic-form-response-item';

package/src/types/dynamic-form-schema-generated.ts

@@ -0,0 +1,103 @@
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+
+export type DynamicFormFieldSchema =
+  | ShortTextField
+  | LongTextField
+  | NumberField
+  | EmailField
+  | DropdownField
+  | ChoiceField
+  | ChoicesField
+  | YesNoField;
+export type ShortTextField = FieldBaseType &
+  TextFieldCommon & {
+    type: "short_text";
+    [k: string]: unknown;
+  };
+export type LongTextField = FieldBaseType &
+  TextFieldCommon & {
+    type: "long_text";
+    [k: string]: unknown;
+  };
+export type NumberField = FieldBaseType &
+  TextFieldCommon & {
+    type: "number";
+    [k: string]: unknown;
+  };
+export type EmailField = FieldBaseType &
+  TextFieldCommon & {
+    type: "email";
+    [k: string]: unknown;
+  };
+export type DropdownField = FieldBaseType &
+  TextFieldCommon &
+  OptionFieldCommon & {
+    type: "dropdown";
+    [k: string]: unknown;
+  };
+export type ChoiceField = FieldBaseType &
+  OptionFieldCommon &
+  OrientationFieldCommon & {
+    type: "choice";
+    [k: string]: unknown;
+  };
+export type ChoicesField = FieldBaseType &
+  OptionFieldCommon &
+  OrientationFieldCommon & {
+    type: "choices";
+    [k: string]: unknown;
+  };
+export type YesNoField = FieldBaseType & {
+  type: "yes_no";
+  [k: string]: unknown;
+};
+
+/**
+ * JSON 스키마 for DynamicForm 컴포넌트
+ */
+export interface DynamicFormSchema {
+  /**
+   * 폼 필드 정의 배열
+   */
+  fields: DynamicFormFieldSchema[];
+  [k: string]: unknown;
+}
+export interface FieldBaseType {
+  name: string;
+  type: string;
+  label: string;
+  description?: string;
+  required?: boolean;
+  validation?: ValidationRule;
+  [k: string]: unknown;
+}
+export interface ValidationRule {
+  min?: number;
+  max?: number;
+  pattern?: string;
+  message?: string;
+  oneOf?: unknown[];
+  [k: string]: unknown;
+}
+export interface TextFieldCommon {
+  placeholder?: string;
+  [k: string]: unknown;
+}
+export interface OptionFieldCommon {
+  options: FieldOption[];
+  [k: string]: unknown;
+}
+export interface FieldOption {
+  label: string;
+  value: string | number;
+  [k: string]: unknown;
+}
+export interface OrientationFieldCommon {
+  orientation?: "horizontal" | "vertical";
+  [k: string]: unknown;
+}

package/src/types/index.ts

@@ -1,3 +1,3 @@
 export * from './curriculumContents.type';
 export * from './curriculum.type';
-export * from './dynamic-form-json';
+export * from './dynamic-form-schema-generated';

package/src/types/dynamic-form-json.ts

@@ -1,143 +0,0 @@
-// DynamicForm JSON Schema를 위한 TypeScript 타입 정의
-
-export interface DynamicFormJsonSchema {
-  fields: DynamicFormFieldJson[];
-  initialValues?: Record<string, unknown>;
-  layout?: {
-    columns?: 1 | 2 | 3 | 4;
-    spacing?: 'compact' | 'normal' | 'relaxed';
-    sections?: FormSection[];
-  };
-  actions?: {
-    submit?: {
-      text?: string;
-      loadingText?: string;
-      disabled?: boolean;
-    };
-    reset?: {
-      text?: string;
-      show?: boolean;
-    };
-    cancel?: {
-      text?: string;
-      show?: boolean;
-      url?: string;
-    };
-  };
-}
-
-export interface DynamicFormFieldJson {
-  name: string;
-  type: 'text' | 'number' | 'email' | 'password' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'single-checkbox';
-  label: string;
-  placeholder?: string;
-  description?: string;
-  required?: boolean;
-  labelVariant?: 'title' | 'body' | 'caption';
-  orientation?: 'horizontal' | 'vertical';
-  options?: FieldOptionJson[];
-  validation?: ValidationRule;
-  defaultValue?: unknown;
-  disabled?: boolean;
-  readonly?: boolean;
-  hidden?: boolean;
-  conditional?: ConditionalRule;
-}
-
-export interface FieldOptionJson {
-  label: string;
-  value: string | number;
-}
-
-export interface ValidationRule {
-  type?: 'string' | 'number' | 'email' | 'array' | 'object';
-  required?: boolean;
-  min?: number;
-  max?: number;
-  pattern?: string;
-  message?: string;
-  oneOf?: unknown[];
-}
-
-export interface ConditionalRule {
-  field: string;
-  operator: 'equals' | 'notEquals' | 'contains' | 'notContains' | 'greaterThan' | 'lessThan';
-  value: unknown;
-}
-
-export interface FormSection {
-  title: string;
-  description?: string;
-  fields: string[];
-  collapsible?: boolean;
-}
-
-// JSON 스키마를 DynamicForm 컴포넌트 props로 변환하는 유틸리티 함수
-export function convertJsonToDynamicFormProps(jsonSchema: DynamicFormJsonSchema) {
-  const fields = jsonSchema.fields.map(field => ({
-    name: field.name,
-    type: field.type,
-    label: field.label,
-    placeholder: field.placeholder,
-    description: field.description,
-    required: field.required,
-    labelVariant: field.labelVariant,
-    orientation: field.orientation,
-    options: field.options,
-    validation: field.validation ? createYupSchema(field.validation) : undefined,
-  }));
-
-  return {
-    fields,
-    initialValues: jsonSchema.initialValues || {},
-    submitButtonText: '제출',
-  };
-}
-
-// ValidationRule을 Yup 스키마로 변환하는 함수
-function createYupSchema(rule: ValidationRule) {
-  // 실제 구현에서는 Yup 스키마를 동적으로 생성
-  // 여기서는 예시로 간단한 구조만 보여줌
-  return {
-    type: rule.type,
-    required: rule.required,
-    min: rule.min,
-    max: rule.max,
-    pattern: rule.pattern,
-    message: rule.message,
-    oneOf: rule.oneOf,
-  };
-}
-
-// 사용 예시
-export const exampleJsonSchema: DynamicFormJsonSchema = {
-  fields: [
-    {
-      name: "name",
-      type: "text",
-      label: "이름",
-      required: true,
-      validation: {
-        type: "string",
-        required: true,
-        min: 2,
-        message: "이름은 최소 2자 이상이어야 합니다"
-      }
-    },
-    {
-      name: "email",
-      type: "email",
-      label: "이메일",
-      required: true,
-      validation: {
-        type: "email",
-        required: true,
-        message: "올바른 이메일 형식이 아닙니다"
-      }
-    }
-  ],
-  initialValues: {
-    name: "",
-    email: ""
-  }
-};