@tipp/ui 2.3.22 → 2.3.24

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

@@ -1,4 +1,5 @@
 import type { DynamicFormFieldSchema } from '@/types/dynamic-form-schema-generated';
+import { getDynamicFormDisplayValue } from '@/utils/get-dynamic-form-display-value';
 
 interface DynamicFormResponseItemProps {
   payload: unknown;
@@ -6,38 +7,27 @@ interface DynamicFormResponseItemProps {
   config?: DynamicFormFieldSchema;
 }
 
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+
 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 === '') {
     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);
+  if (config) {
+    const displayValue: string = getDynamicFormDisplayValue(config, value);
+    return displayValue === '' ? '응답 없음' : displayValue;
+  }
 
   switch (questionType) {
     case 'text':
@@ -45,31 +35,14 @@ export function DynamicFormResponseItem({
       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': 
+    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 value.map((v) => String(v)).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);

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/get-dynamic-form-display-value.test.ts

@@ -0,0 +1,81 @@
+import type { DynamicFormFieldSchema } from '../types/dynamic-form-schema-generated';
+import { getDynamicFormDisplayValue } from './get-dynamic-form-display-value';
+
+describe('getDynamicFormDisplayValue', () => {
+  test('빈 값이면 빈 문자열을 반환한다', () => {
+    const field: DynamicFormFieldSchema = {
+      name: 'choiceField',
+      type: 'choice',
+      label: '선택',
+      options: [{ label: '일', value: 1 }],
+      orientation: 'vertical',
+    };
+
+    expect(getDynamicFormDisplayValue(field, undefined)).toBe('');
+    expect(getDynamicFormDisplayValue(field, null)).toBe('');
+    expect(getDynamicFormDisplayValue(field, '')).toBe('');
+  });
+
+  test('choice: value로 options.label을 찾는다', () => {
+    const field: DynamicFormFieldSchema = {
+      name: 'choiceField',
+      type: 'choice',
+      label: '선택',
+      options: [
+        { label: '일', value: 1 },
+        { label: '이', value: 2 },
+      ],
+      orientation: 'vertical',
+    };
+
+    expect(getDynamicFormDisplayValue(field, 1)).toBe('일');
+    expect(getDynamicFormDisplayValue(field, '2')).toBe('이');
+    expect(getDynamicFormDisplayValue(field, 999)).toBe('999');
+  });
+
+  test('choices: 배열이면 각 value를 label로 치환 후 join한다', () => {
+    const field: DynamicFormFieldSchema = {
+      name: 'choicesField',
+      type: 'choices',
+      label: '다중 선택',
+      options: [
+        { label: '일', value: 1 },
+        { label: '이', value: 2 },
+      ],
+      orientation: 'vertical',
+    };
+
+    expect(getDynamicFormDisplayValue(field, [1, 2])).toBe('일, 이');
+    expect(getDynamicFormDisplayValue(field, [1, 999])).toBe('일, 999');
+  });
+
+  test('image_radio_card: value로 options.label을 찾는다', () => {
+    const field: DynamicFormFieldSchema = {
+      name: 'imageRadio',
+      type: 'image_radio_card',
+      label: '이미지 선택',
+      options: [
+        { label: 'A', value: 'a', imageSrc: 'https://example.com/a.png' },
+        { label: 'B', value: 'b', imageSrc: 'https://example.com/b.png' },
+      ],
+    };
+
+    expect(getDynamicFormDisplayValue(field, 'a')).toBe('A');
+    expect(getDynamicFormDisplayValue(field, 'c')).toBe('c');
+  });
+
+  test('yes_no: boolean/문자열 값을 동의/비동의로 변환한다', () => {
+    const field: DynamicFormFieldSchema = {
+      name: 'agree',
+      type: 'yes_no',
+      label: '동의',
+    };
+
+    expect(getDynamicFormDisplayValue(field, true)).toBe('동의');
+    expect(getDynamicFormDisplayValue(field, 'yes')).toBe('동의');
+    expect(getDynamicFormDisplayValue(field, false)).toBe('비동의');
+    expect(getDynamicFormDisplayValue(field, 'no')).toBe('비동의');
+    expect(getDynamicFormDisplayValue(field, 'maybe')).toBe('maybe');
+  });
+});
+

package/src/utils/get-dynamic-form-display-value.ts

@@ -0,0 +1,74 @@
+import type {
+  DynamicFormFieldSchema,
+  FieldOption,
+  ImageFieldOption,
+} from '@/types/dynamic-form-schema-generated';
+
+function isEmptyDisplayValue(value: unknown): boolean {
+  return value === undefined || value === null || value === '';
+}
+
+function findOptionLabel(
+  options: FieldOption[] | ImageFieldOption[],
+  value: unknown
+): string | undefined {
+  const valueString = String(value);
+  const found: FieldOption | ImageFieldOption | undefined = options.find(
+    (option: FieldOption | ImageFieldOption) =>
+      String(option.value) === valueString
+  );
+  return found?.label;
+}
+
+function joinLabelsOrValues(
+  options: FieldOption[],
+  values: unknown[]
+): string {
+  const labels: string[] = values.map((v: unknown) => {
+    const label: string | undefined = findOptionLabel(options, v);
+    return label ?? String(v);
+  });
+  return labels.join(', ');
+}
+
+export function getDynamicFormDisplayValue(
+  field: DynamicFormFieldSchema,
+  value: unknown
+): string {
+  if (isEmptyDisplayValue(value)) return '';
+
+  switch (field.type) {
+    case 'dropdown':
+    case 'choice':
+    case 'radio_cards': {
+      const label: string | undefined = findOptionLabel(field.options, value);
+      return label ?? String(value);
+    }
+
+    case 'image_radio_card': {
+      const label: string | undefined = findOptionLabel(field.options, value);
+      return label ?? String(value);
+    }
+
+    case 'choices': {
+      if (Array.isArray(value)) {
+        return joinLabelsOrValues(field.options, value);
+      }
+      const label: string | undefined = findOptionLabel(field.options, value);
+      return label ?? String(value);
+    }
+
+    case 'yes_no': {
+      if (value === true || value === 'true' || value === 'yes') return '동의';
+      if (value === false || value === 'false' || value === 'no') return '비동의';
+      return String(value);
+    }
+
+    case 'short_text':
+    case 'long_text':
+    case 'number':
+    case 'email':
+    default:
+      return String(value);
+  }
+}

package/src/utils/index.ts

@@ -2,4 +2,5 @@ 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';
+export * from './get-dynamic-form-display-value';

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;
 }
+