@tipp/ui 2.2.8 → 2.2.9

package/src/molecules/dynamic-field.tsx

@@ -1,90 +1,77 @@
-import type { FormikProps } from 'formik';
-import type * as Yup from 'yup';
+
+import { useDynamicForm } from '../context/dynamic-form-context';
 import { TextField } from '../atoms/text-field';
 import { TextArea } from '../atoms/text-area';
 import { Select } from '../atoms/select';
 import { CheckboxGroup } from '../atoms/check-box-group';
 import { RadioGroup } from '../atoms/radio-group';
 import { Checkbox } from '../atoms/check-box';
-
-export type FieldType =
-  | 'text'
-  | 'number'
-  | 'email'
-  | 'password'
-  | 'textarea'
-  | 'select'
-  | 'radio'
-  | 'checkbox'
-  | 'single-checkbox';
-
-export interface FieldOption {
-  label: string;
-  value: string | number;
-}
-
-export interface DynamicFormField {
-  name: string;
-  type: FieldType;
-  label: string;
-  placeholder?: string;
-  description?: string;
-  required?: boolean;
-  options?: FieldOption[];
-  validation?: Yup.Schema<unknown>;
-  orientation?: 'horizontal' | 'vertical';
-}
+import type { DynamicFormFieldSchema } from '../types/dynamic-form-schema-generated';
 
 interface DynamicFormFieldRendererProps {
-  field: DynamicFormField;
-  formik: FormikProps<Record<string, unknown>>;
+  field: DynamicFormFieldSchema;
 }
 
 export function DynamicFormField({
   field,
-  formik,
 }: DynamicFormFieldRendererProps): React.ReactElement | null {
-  const { name, type, placeholder, options, orientation = 'vertical' } = field;
-  const { value, error, touched } = formik.getFieldMeta(name);
+  const {
+    getFieldValue,
+    getFieldError,
+    getFieldTouched,
+    setFieldValue,
+    handleChange,
+    handleBlur,
+  } = useDynamicForm();
+  const { name, type } = field;
+
+  const value = getFieldValue(name);
+  const error = getFieldError(name);
+  const touched = getFieldTouched(name);
   const hasError = Boolean(error && touched);
 
   const commonProps = {
     name,
     value: String(value || ''),
-    onChange: formik.handleChange,
-    onBlur: formik.handleBlur,
-    placeholder,
+    onChange: handleChange,
+    onBlur: handleBlur,
     error: hasError,
   };
 
   switch (type) {
-    case 'text':
+    case 'short_text':
     case 'email':
-    case 'password':
-      return <TextField.Root {...commonProps} type={type} />;
+      return (
+        <TextField.Root 
+          {...commonProps} 
+          placeholder={field.placeholder}
+          type={type === 'short_text' ? 'text' : type}
+        />
+      );
     case 'number':
       return (
         <TextField.Root
           {...commonProps}
           inputMode="numeric"
           pattern="[0-9]*"
+          placeholder={field.placeholder}
           type="number"
         />
       );
-    case 'textarea':
-      return <TextArea {...commonProps} rows={4} />;
+    case 'long_text':
+      return <TextArea {...commonProps} placeholder={field.placeholder} rows={4} />;
 
-    case 'select':
+    case 'dropdown':
       return (
         <Select.Root
           onValueChange={(newValue: string) => {
-            void formik.setFieldValue(name, newValue);
+            void setFieldValue(name, newValue);
           }}
           value={value as string}
         >
-          <Select.Trigger placeholder={placeholder} />
+          <Select.Trigger placeholder={field.placeholder} />
           <Select.Content>
-            {options?.map((option) => (
+            {field.options.map((option) => (
               <Select.Item key={option.value} value={String(option.value)}>
                 {option.label}
               </Select.Item>
@@ -93,16 +80,16 @@ export function DynamicFormField({
         </Select.Root>
       );
 
-    case 'radio':
+    case 'choice':
       return (
         <RadioGroup.Root
           onValueChange={(newValue: string) => {
-            void formik.setFieldValue(name, newValue);
+            void setFieldValue(name, newValue);
           }}
-          orientation={orientation}
+          orientation={field.orientation}
           value={String(value || '')}
         >
-          {options?.map((option) => (
+          {field.options.map((option) => (
             <RadioGroup.Item key={option.value} value={String(option.value)}>
               {option.label}
             </RadioGroup.Item>
@@ -110,16 +97,16 @@ export function DynamicFormField({
         </RadioGroup.Root>
       );
 
-    case 'checkbox':
+    case 'choices':
       return (
         <CheckboxGroup.Root
           onValueChange={(newValue: string[]) => {
-            void formik.setFieldValue(name, newValue);
+            void setFieldValue(name, newValue);
           }}
-          orientation={orientation}
+          orientation={field.orientation}
           value={Array.isArray(value) ? value.map(String) : []}
         >
-          {options?.map((option) => (
+          {field.options.map((option) => (
             <CheckboxGroup.Item key={option.value} value={String(option.value)}>
               {option.label}
             </CheckboxGroup.Item>
@@ -127,13 +114,13 @@ export function DynamicFormField({
         </CheckboxGroup.Root>
       );
 
-    case 'single-checkbox':
+    case 'yes_no':
       return (
         <div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
           <Checkbox
             checked={Boolean(value)}
             onCheckedChange={(checked: boolean) => {
-              void formik.setFieldValue(name, checked);
+              void setFieldValue(name, checked);
             }}
           />
           {field.description ? (

package/src/molecules/dynamic-form-response-item.tsx

@@ -0,0 +1,87 @@
+import type { DynamicFormFieldSchema } from '@/types/dynamic-form-schema-generated';
+
+interface DynamicFormResponseItemProps {
+  payload: unknown;
+  questionType: string;
+  config?: DynamicFormFieldSchema;
+}
+
+export function DynamicFormResponseItem({
+  payload,
+  questionType,
+  config,
+}: DynamicFormResponseItemProps): string {
+  if (!payload || typeof payload !== 'object') {
+    return String(payload || '응답 없음');
+  }
+
+  const payloadObj = payload as { value?: unknown };
+  const value = payloadObj.value;
+
+  // value가 없거나 빈 값인 경우
+  if (value === undefined || value === null || value === '') {
+    return '응답 없음';
+  }
+
+  // options가 있는 필드 타입들 확인
+  const getOptions = (
+    fieldConfig?: DynamicFormFieldSchema
+  ): { label: string; value: string | number }[] | undefined => {
+    if (!fieldConfig || typeof fieldConfig !== 'object') return undefined;
+    if ('options' in fieldConfig && Array.isArray(fieldConfig.options)) {
+      return fieldConfig.options as {
+        label: string;
+        value: string | number;
+      }[];
+    }
+    return undefined;
+  };
+
+  const options = getOptions(config);
+
+  switch (questionType) {
+    case 'text':
+    case 'textarea':
+      return String(value);
+    case 'radio':
+    case 'select':
+    case 'choice':
+      if (options) {
+        const option = options.find((opt) => opt.value === value);
+        return option ? option.label : String(value);
+      }
+      return String(value);
+    case 'checkbox':
+    case 'choices': 
+      if (Array.isArray(value)) {
+        if (options) {
+          return value
+            .map((val) => {
+              const option = options.find((opt) => opt.value === val);
+              return option ? option.label : String(val);
+            })
+            .join(', ');
+        }
+        return value.join(', ');
+      }
+      return String(value);
+    case 'rating':
+      if (options) {
+        const option = options.find((opt) => opt.value === value);
+        return option ? option.label : String(value);
+      }
+      return String(value);
+    case 'number':
+      return String(value);
+    case 'yes_no':
+      if (value === true || value === 'true' || value === 'yes') {
+        return '동의';
+      }
+      if (value === false || value === 'false' || value === 'no') {
+        return '비동의';
+      }
+      return String(value);
+    default:
+      return String(value);
+  }
+}

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';