@tipp/ui 2.3.21 → 2.3.23

package/src/molecules/dynamic-form-editor.tsx

@@ -0,0 +1,263 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Button } from '@/atoms/button';
+import { Flex } from '@/atoms/flex';
+import type {
+  DynamicFormFieldSchema,
+  DynamicFormSchema,
+} from '@/types/dynamic-form-schema-generated';
+import {
+  createDefaultField,
+  createUniqueFieldName,
+  duplicateField,
+  findFieldIndexByName,
+  getFieldTypes,
+  hasErrorIssues,
+  moveField,
+  normalizeSchema,
+  updateSchemaFields,
+  validateDynamicFormSchema,
+  type FieldType,
+  type SchemaIssue,
+} from './dynamic-form-editor-utils';
+import { DynamicFormEditorFieldEditorPanel } from './dynamic-form-editor-field-editor-panel';
+import { DynamicFormEditorFieldListPanel } from './dynamic-form-editor-field-list-panel';
+import { DynamicFormEditorIssuesPanel } from './dynamic-form-editor-issues-panel';
+import { DynamicFormEditorPreviewPanel } from './dynamic-form-editor-preview-panel';
+
+function getInitialSchema(
+  value: DynamicFormSchema | undefined,
+  defaultValue: DynamicFormSchema | undefined
+): DynamicFormSchema {
+  if (value !== undefined) return normalizeSchema(value);
+  return normalizeSchema(defaultValue);
+}
+
+function getSelectedField(
+  schema: DynamicFormSchema,
+  selectedFieldName: string | null
+): { field: DynamicFormFieldSchema | null; index: number } {
+  if (!selectedFieldName) return { field: null, index: -1 };
+  const index: number = findFieldIndexByName(schema.fields, selectedFieldName);
+  if (index < 0) return { field: null, index: -1 };
+  return { field: schema.fields[index], index };
+}
+
+export interface DynamicFormEditorProps {
+  value?: DynamicFormSchema;
+  defaultValue?: DynamicFormSchema;
+  onChange?: (next: DynamicFormSchema) => void;
+  onSave?: (next: DynamicFormSchema) => void | Promise<void>;
+  onCancel?: () => void;
+  readonly?: boolean;
+  showPreview?: boolean;
+}
+
+export function DynamicFormEditor(props: DynamicFormEditorProps): React.ReactElement {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    onSave,
+    onCancel,
+    readonly = false,
+    showPreview = false,
+  } = props;
+
+  const isControlled: boolean = value !== undefined;
+
+  const [uncontrolledSchema, setUncontrolledSchema] = useState<DynamicFormSchema>(() =>
+    getInitialSchema(undefined, defaultValue)
+  );
+
+  const effectiveSchema: DynamicFormSchema = useMemo(() => {
+    if (isControlled) return normalizeSchema(value);
+    return uncontrolledSchema;
+  }, [isControlled, uncontrolledSchema, value]);
+
+  const [selectedFieldName, setSelectedFieldName] = useState<string | null>(() => {
+    const initialSchema = getInitialSchema(value, defaultValue);
+    return initialSchema.fields[0]?.name ?? null;
+  });
+
+  const selected = useMemo(() => {
+    return getSelectedField(effectiveSchema, selectedFieldName);
+  }, [effectiveSchema, selectedFieldName]);
+
+  const issues: SchemaIssue[] = useMemo(() => {
+    return validateDynamicFormSchema(effectiveSchema);
+  }, [effectiveSchema]);
+
+  const errorFieldNameSet: Set<string> = useMemo(() => {
+    const set = new Set<string>();
+    issues.forEach((i) => {
+      if (i.level === 'error' && i.fieldName) set.add(i.fieldName);
+    });
+    return set;
+  }, [issues]);
+
+  const hasFieldError = useCallback(
+    (fieldName: string): boolean => {
+      return errorFieldNameSet.has(fieldName);
+    },
+    [errorFieldNameSet]
+  );
+
+  const fieldTypes: FieldType[] = useMemo(() => getFieldTypes(), []);
+
+  useEffect(() => {
+    if (selectedFieldName && selected.field) return;
+    setSelectedFieldName(effectiveSchema.fields[0]?.name ?? null);
+  }, [effectiveSchema.fields, selected.field, selectedFieldName]);
+
+  useEffect(() => {
+    if (isControlled) return;
+    setUncontrolledSchema(getInitialSchema(undefined, defaultValue));
+  }, [defaultValue, isControlled]);
+
+  const applySchema = useCallback(
+    (next: DynamicFormSchema): void => {
+      onChange?.(next);
+      if (!isControlled) setUncontrolledSchema(next);
+    },
+    [isControlled, onChange]
+  );
+
+  const handleAddField = useCallback(
+    (type: FieldType): void => {
+      if (readonly) return;
+      const nextField: DynamicFormFieldSchema = createDefaultField(type, effectiveSchema.fields);
+      const nextFields: DynamicFormFieldSchema[] = [...effectiveSchema.fields, nextField];
+      applySchema(updateSchemaFields(effectiveSchema, nextFields));
+      setSelectedFieldName(nextField.name);
+    },
+    [applySchema, effectiveSchema, readonly]
+  );
+
+  const handleUpdateSelectedField = useCallback(
+    (nextField: DynamicFormFieldSchema): void => {
+      if (readonly) return;
+      if (!selected.field || selected.index < 0) return;
+      const nextFields: DynamicFormFieldSchema[] = effectiveSchema.fields.map((f, i) =>
+        i === selected.index ? nextField : f
+      );
+      applySchema(updateSchemaFields(effectiveSchema, nextFields));
+    },
+    [applySchema, effectiveSchema, readonly, selected.field, selected.index]
+  );
+
+  const handleRenameSelected = useCallback(
+    (nextName: string): void => {
+      if (readonly) return;
+      const currentField = selected.field;
+      if (!currentField) return;
+
+      const others: DynamicFormFieldSchema[] = effectiveSchema.fields.filter(
+        (f) => f.name !== currentField.name
+      );
+      const uniqueName: string = createUniqueFieldName(others, nextName);
+      const nextField: DynamicFormFieldSchema = { ...currentField, name: uniqueName };
+      handleUpdateSelectedField(nextField);
+      setSelectedFieldName(uniqueName);
+    },
+    [effectiveSchema.fields, handleUpdateSelectedField, readonly, selected.field]
+  );
+
+  const handleDeleteSelected = useCallback((): void => {
+    if (readonly) return;
+    if (!selected.field || selected.index < 0) return;
+    const nextFields: DynamicFormFieldSchema[] = effectiveSchema.fields.filter(
+      (_, i) => i !== selected.index
+    );
+    applySchema(updateSchemaFields(effectiveSchema, nextFields));
+    let nextSelected: string | null = null;
+    if (nextFields.length > selected.index) nextSelected = nextFields[selected.index].name;
+    else if (nextFields.length > 0) nextSelected = nextFields[0].name;
+    setSelectedFieldName(nextSelected);
+  }, [applySchema, effectiveSchema, readonly, selected.field, selected.index]);
+
+  const handleMoveSelected = useCallback(
+    (direction: 'up' | 'down'): void => {
+      if (readonly) return;
+      if (!selected.field || selected.index < 0) return;
+      const toIndex: number = direction === 'up' ? selected.index - 1 : selected.index + 1;
+      const nextFields: DynamicFormFieldSchema[] = moveField(
+        effectiveSchema.fields,
+        selected.index,
+        toIndex
+      );
+      applySchema(updateSchemaFields(effectiveSchema, nextFields));
+    },
+    [applySchema, effectiveSchema, readonly, selected.field, selected.index]
+  );
+
+  const handleDuplicateSelected = useCallback((): void => {
+    if (readonly) return;
+    if (!selected.field || selected.index < 0) return;
+    const nextFields: DynamicFormFieldSchema[] = duplicateField(
+      effectiveSchema.fields,
+      selected.index
+    );
+    applySchema(updateSchemaFields(effectiveSchema, nextFields));
+    const duplicatedIndex: number = selected.index + 1;
+    const nextSelected: string =
+      nextFields.length > duplicatedIndex
+        ? nextFields[duplicatedIndex].name
+        : selected.field.name;
+    setSelectedFieldName(nextSelected);
+  }, [applySchema, effectiveSchema, readonly, selected.field, selected.index]);
+
+  const handleSave = useCallback((): void => {
+    if (!onSave) return;
+    const result = onSave(effectiveSchema);
+    void result;
+  }, [effectiveSchema, onSave]);
+
+  const disableSave: boolean = readonly || !onSave || hasErrorIssues(issues);
+
+  return (
+    <Flex align="start" gap="4" style={{ width: '100%' }}>
+      <DynamicFormEditorFieldListPanel
+        fieldTypes={fieldTypes}
+        fields={effectiveSchema.fields}
+        hasFieldError={hasFieldError}
+        onAddField={handleAddField}
+        onSelectFieldName={setSelectedFieldName}
+        readonly={readonly}
+        selectedFieldName={selectedFieldName}
+      />
+
+      <Flex direction="column" gap="3" style={{ flex: 1, minWidth: 520 }}>
+        <DynamicFormEditorFieldEditorPanel
+          field={selected.field}
+          fieldIndex={selected.index}
+          fieldTypes={fieldTypes}
+          fields={effectiveSchema.fields}
+          onDeleteField={handleDeleteSelected}
+          onDuplicateField={handleDuplicateSelected}
+          onMoveField={handleMoveSelected}
+          onRenameField={handleRenameSelected}
+          onUpdateField={handleUpdateSelectedField}
+          readonly={readonly}
+        />
+
+        <DynamicFormEditorIssuesPanel issues={issues} />
+
+        {(onSave || onCancel) ? <Flex gap="2" justify="end">
+            {onCancel ? (
+              <Button disabled={readonly} onClick={onCancel} variant="soft">
+                취소
+              </Button>
+            ) : null}
+            {onSave ? (
+              <Button disabled={disableSave} onClick={handleSave}>
+                저장
+              </Button>
+            ) : null}
+          </Flex> : null}
+      </Flex>
+
+      <DynamicFormEditorPreviewPanel fields={effectiveSchema.fields} show={showPreview} />
+    </Flex>
+  );
+}
+

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

@@ -6,17 +6,27 @@ interface DynamicFormResponseItemProps {
   config?: DynamicFormFieldSchema;
 }
 
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+
+function isFieldOption(value: unknown): value is { label: string; value: string | number } {
+  if (!isRecord(value)) return false;
+  const label = value.label;
+  const optionValue = value.value;
+  return (
+    typeof label === 'string' &&
+    (typeof optionValue === 'string' || typeof optionValue === 'number')
+  );
+}
+
 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;
+  const value: unknown =
+    isRecord(payload) && 'value' in payload ? payload.value : payload;
 
   // value가 없거나 빈 값인 경우
   if (value === undefined || value === null || value === '') {
@@ -27,14 +37,11 @@ export function DynamicFormResponseItem({
   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;
+    if (!isRecord(fieldConfig)) return undefined;
+    const options = fieldConfig.options;
+    if (!Array.isArray(options)) return undefined;
+    if (!options.every(isFieldOption)) return undefined;
+    return options;
   };
 
   const options = getOptions(config);
@@ -46,18 +53,22 @@ export function DynamicFormResponseItem({
     case 'radio':
     case 'select':
     case 'choice':
+    case 'radio_cards':
+    case 'image_radio_card':
       if (options) {
-        const option = options.find((opt) => opt.value === value);
+        const option = options.find((opt) => String(opt.value) === String(value));
         return option ? option.label : String(value);
       }
       return String(value);
     case 'checkbox':
-    case 'choices': 
+    case 'choices':
       if (Array.isArray(value)) {
         if (options) {
           return value
             .map((val) => {
-              const option = options.find((opt) => opt.value === val);
+              const option = options.find(
+                (opt) => String(opt.value) === String(val)
+              );
               return option ? option.label : String(val);
             })
             .join(', ');

package/src/molecules/dynamic-form.tsx

@@ -87,7 +87,7 @@ function DynamicFormRoot({
             `${field.label}에 동의해주세요`
           );
         } else {
-          // choice, dropdown, short_text, long_text, number, email 타입은 문자열 스키마로 처리
+          // choice, radio_cards, dropdown, short_text, long_text, number, email 타입은 문자열 스키마로 처리
           schema[field.name] = Yup.string().required(
             `${field.label}은(는) 필수입니다`
           );

package/src/molecules/index.ts

@@ -17,4 +17,5 @@ export * from './dynamic-field';
 export * from './dynamic-form-response-item';
 export * from './one-on-one-guide-list';
 export * from './description-json-render';
-export * from './training-info-guideline';
+export * from './training-info-guideline';
+export * from './dynamic-form-editor';

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

@@ -12,6 +12,8 @@ export type DynamicFormFieldSchema =
   | EmailField
   | DropdownField
   | ChoiceField
+  | RadioCardsField
+  | ImageRadioCardField
   | ChoicesField
   | YesNoField;
 export type ShortTextField = FieldBaseType &
@@ -46,6 +48,17 @@ export type ChoiceField = FieldBaseType &
     type: "choice";
     [k: string]: unknown;
   };
+export type RadioCardsField = FieldBaseType &
+  OptionFieldCommon & {
+    type: "radio_cards";
+    [k: string]: unknown;
+  };
+export type ImageRadioCardField = FieldBaseType &
+  ImageOptionFieldCommon &
+  ImageRadioCardLayoutCommon & {
+    type: "image_radio_card";
+    [k: string]: unknown;
+  };
 export type ChoicesField = FieldBaseType &
   OptionFieldCommon &
   OrientationFieldCommon & {
@@ -101,4 +114,24 @@ export interface OrientationFieldCommon {
   orientation?: "horizontal" | "vertical";
   [k: string]: unknown;
 }
+export interface ImageOptionFieldCommon {
+  options: ImageFieldOption[];
+  [k: string]: unknown;
+}
+export interface ImageFieldOption {
+  label: string;
+  value: string | number;
+  imageSrc: string;
+  alt?: string;
+  [k: string]: unknown;
+}
+export interface ImageRadioCardLayoutCommon {
+  gridColumnsCount?: number;
+  gridItemHeight?: string;
+  gridColumns?: string;
+  gridRows?: string;
+  gridGap?: string;
+  imageFit?: "cover" | "contain";
+  [k: string]: unknown;
+}
 

package/src/utils/index.ts

@@ -2,4 +2,4 @@ export * from './get-cell-align';
 export * from './get-column-meta';
 export * from './scroll-to';
 export * from './get-time-options';
-export * from './getCalloutIconComponent';
+export * from './get-callout-icon-component';

package/src/utils/{getCalloutIconComponent.ts → get-callout-icon-component.ts}

@@ -1,8 +1,7 @@
-
 import {
-  InfoCircledIcon,
-  ExclamationTriangleIcon,
   CheckCircledIcon,
+  ExclamationTriangleIcon,
+  InfoCircledIcon,
   QuestionMarkCircledIcon,
 } from '@/icon';
 
@@ -37,3 +36,4 @@ for (const opt of AI_CALLOUT_ICON_OPTIONS) {
 export function getCalloutIconComponent(iconName: string): SvgIconComponent {
   return iconByName[iconName] ?? DEFAULT_ICON;
 }
+