@tipp/ui 2.3.21 → 2.3.23

package/src/molecules/dynamic-form-editor-field-list-panel.tsx

@@ -0,0 +1,116 @@
+import React, { useMemo } from 'react';
+import { Box } from '@radix-ui/themes';
+import { Card } from '@/atoms/card';
+import { Flex } from '@/atoms/flex';
+import { Select } from '@/atoms/select';
+import { Typo } from '@/atoms/typo';
+import type { DynamicFormFieldSchema } from '@/types/dynamic-form-schema-generated';
+import { getFieldTypeLabel, type FieldType } from './dynamic-form-editor-utils';
+
+function isFieldType(value: string, types: FieldType[]): value is FieldType {
+  return types.some((t) => t === value);
+}
+
+export interface DynamicFormEditorFieldListPanelProps {
+  fields: DynamicFormFieldSchema[];
+  selectedFieldName: string | null;
+  readonly: boolean;
+  fieldTypes: FieldType[];
+  hasFieldError: (fieldName: string) => boolean;
+  onSelectFieldName: (fieldName: string) => void;
+  onAddField: (type: FieldType) => void;
+}
+
+export function DynamicFormEditorFieldListPanel(
+  props: DynamicFormEditorFieldListPanelProps
+): React.ReactElement {
+  const {
+    fields,
+    selectedFieldName,
+    readonly,
+    fieldTypes,
+    hasFieldError,
+    onSelectFieldName,
+    onAddField,
+  } = props;
+
+  const isEmpty: boolean = fields.length === 0;
+
+  const triggerPlaceholder: string = useMemo(() => {
+    return readonly ? '추가(읽기 전용)' : '추가';
+  }, [readonly]);
+
+  return (
+    <Card style={{ width: 340, padding: 12 }}>
+      <Flex direction="column" gap="3">
+        <Flex align="center" justify="between">
+          <Typo variant="body">필드</Typo>
+          <Select.Root
+            disabled={readonly}
+            onValueChange={(v: string): void => {
+              if (!isFieldType(v, fieldTypes)) return;
+              onAddField(v);
+            }}
+            value=""
+          >
+            <Select.Trigger placeholder={triggerPlaceholder} />
+            <Select.Content>
+              {fieldTypes.map((t) => (
+                <Select.Item key={t} value={t}>
+                  {getFieldTypeLabel(t)}
+                </Select.Item>
+              ))}
+            </Select.Content>
+          </Select.Root>
+        </Flex>
+
+        <Flex direction="column" gap="2">
+          {isEmpty ? (
+            <Typo color="gray" variant="caption">
+              아직 필드가 없습니다.
+            </Typo>
+          ) : null}
+
+          {fields.map((field) => {
+            const isSelected: boolean = field.name === selectedFieldName;
+            const hasError: boolean = hasFieldError(field.name);
+
+            return (
+              <Card
+                error={isSelected ? hasError : undefined}
+                key={field.name}
+                onClick={(): void => { onSelectFieldName(field.name); }}
+                style={{
+                  padding: 10,
+                  cursor: 'pointer',
+                  opacity: readonly ? 0.8 : 1,
+                  border: isSelected
+                    ? '1px solid var(--accent-9)'
+                    : '1px solid transparent',
+                }}
+              >
+                <Box style={{ minWidth: 0 }}>
+                  <Typo
+                    style={{
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                    variant="body"
+                  >
+                    {field.label}
+                  </Typo>
+                  <Typo color="gray" variant="caption">
+                    {field.name} · {field.type}
+                    {field.required ? ' · required' : ''}
+                  </Typo>
+                </Box>
+              </Card>
+            );
+          })}
+        </Flex>
+      </Flex>
+    </Card>
+  );
+}
+

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Card } from '@/atoms/card';
+import { Flex } from '@/atoms/flex';
+import { Typo } from '@/atoms/typo';
+import type { SchemaIssue } from './dynamic-form-editor-utils';
+
+export interface DynamicFormEditorIssuesPanelProps {
+  issues: SchemaIssue[];
+}
+
+export function DynamicFormEditorIssuesPanel(
+  props: DynamicFormEditorIssuesPanelProps
+): React.ReactElement | null {
+  const { issues } = props;
+  if (issues.length === 0) return null;
+
+  return (
+    <Card style={{ padding: 12 }}>
+      <Flex direction="column" gap="2">
+        <Typo variant="caption">스키마 이슈</Typo>
+        {issues.map((i) => (
+          <Typo
+            color={i.level === 'error' ? 'red' : 'gray'}
+            key={i.id}
+            variant="caption"
+          >
+            [{i.level}] {i.message}
+            {i.fieldName ? ` (field: ${i.fieldName})` : ''}
+          </Typo>
+        ))}
+      </Flex>
+    </Card>
+  );
+}
+

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Card } from '@/atoms/card';
+import { Flex } from '@/atoms/flex';
+import { Typo } from '@/atoms/typo';
+import type { DynamicFormFieldSchema } from '@/types/dynamic-form-schema-generated';
+import { DynamicForm } from './dynamic-form';
+
+export interface DynamicFormEditorPreviewPanelProps {
+  show: boolean;
+  fields: DynamicFormFieldSchema[];
+}
+
+export function DynamicFormEditorPreviewPanel(
+  props: DynamicFormEditorPreviewPanelProps
+): React.ReactElement | null {
+  const { show, fields } = props;
+  if (!show) return null;
+
+  return (
+    <Card style={{ width: 420, padding: 12 }}>
+      <Flex direction="column" gap="3">
+        <Typo variant="body">프리뷰</Typo>
+        <DynamicForm.Root fields={fields} onSubmit={(): void => undefined} readonly>
+          <DynamicForm.FieldList labelVariant="body" />
+        </DynamicForm.Root>
+      </Flex>
+    </Card>
+  );
+}
+

package/src/molecules/dynamic-form-editor-utils.ts

@@ -0,0 +1,433 @@
+import type {
+  DynamicFormFieldSchema,
+  DynamicFormSchema,
+  FieldOption,
+  ImageFieldOption,
+  ValidationRule,
+} from '@/types/dynamic-form-schema-generated';
+
+export type FieldType =
+  | 'short_text'
+  | 'long_text'
+  | 'number'
+  | 'email'
+  | 'dropdown'
+  | 'choice'
+  | 'radio_cards'
+  | 'image_radio_card'
+  | 'choices'
+  | 'yes_no';
+
+export type SchemaIssueLevel = 'error' | 'warning';
+
+export interface SchemaIssue {
+  id: string;
+  level: SchemaIssueLevel;
+  message: string;
+  fieldName?: string;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+
+function isNonEmptyTrimmedString(value: unknown): value is string {
+  return typeof value === 'string' && value.trim().length > 0;
+}
+
+function isFiniteNumber(value: unknown): value is number {
+  return typeof value === 'number' && Number.isFinite(value);
+}
+
+function canCompileRegExp(pattern: string): boolean {
+  try {
+    // eslint-disable-next-line no-new -- 정규식 컴파일 가능 여부만 확인
+    new RegExp(pattern);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function getFieldTypes(): FieldType[] {
+  return [
+    'short_text',
+    'long_text',
+    'number',
+    'email',
+    'dropdown',
+    'choice',
+    'radio_cards',
+    'image_radio_card',
+    'choices',
+    'yes_no',
+  ];
+}
+
+export function getFieldTypeLabel(type: FieldType): string {
+  const map: Record<FieldType, string> = {
+    short_text: '짧은 텍스트',
+    long_text: '긴 텍스트',
+    number: '숫자',
+    email: '이메일',
+    dropdown: '드롭다운',
+    choice: '단일 선택(라디오)',
+    radio_cards: '라디오 카드',
+    image_radio_card: '이미지 라디오 카드',
+    choices: '다중 선택(체크)',
+    yes_no: '동의(체크)',
+  };
+  return map[type];
+}
+
+export function findFieldIndexByName(
+  fields: DynamicFormFieldSchema[],
+  fieldName: string
+): number {
+  return fields.findIndex((field) => field.name === fieldName);
+}
+
+function toCamelFromSnake(value: string): string {
+  const parts: string[] = value.split('_').filter(Boolean);
+  if (parts.length === 0) return 'field';
+  const [first, ...rest] = parts;
+  const firstLower = first.toLowerCase();
+  const restCamel = rest
+    .map((p) => (p.length === 0 ? '' : p[0].toUpperCase() + p.slice(1)))
+    .join('');
+  return `${firstLower}${restCamel}`;
+}
+
+export function createUniqueFieldName(
+  fields: DynamicFormFieldSchema[],
+  baseName: string
+): string {
+  const used = new Set<string>(fields.map((f) => f.name));
+  if (!used.has(baseName)) return baseName;
+  let i = 2;
+  while (used.has(`${baseName}${i}`)) i += 1;
+  return `${baseName}${i}`;
+}
+
+export function createDefaultField(
+  type: FieldType,
+  currentFields: DynamicFormFieldSchema[]
+): DynamicFormFieldSchema {
+  const baseName: string = toCamelFromSnake(type);
+  const name: string = createUniqueFieldName(currentFields, baseName);
+  const label: string = getFieldTypeLabel(type);
+
+  if (type === 'short_text') return { name, type, label, placeholder: '' };
+  if (type === 'long_text') return { name, type, label, placeholder: '' };
+  if (type === 'number') return { name, type, label, placeholder: '' };
+  if (type === 'email') return { name, type, label, placeholder: '' };
+  if (type === 'dropdown')
+    return {
+      name,
+      type,
+      label,
+      placeholder: '',
+      options: [{ label: '옵션 1', value: 'option1' }],
+    };
+  if (type === 'choice')
+    return {
+      name,
+      type,
+      label,
+      orientation: 'vertical',
+      options: [{ label: '옵션 1', value: 'option1' }],
+    };
+  if (type === 'radio_cards')
+    return { name, type, label, options: [{ label: '옵션 1', value: 'option1' }] };
+  if (type === 'choices')
+    return {
+      name,
+      type,
+      label,
+      orientation: 'vertical',
+      options: [{ label: '옵션 1', value: 'option1' }],
+    };
+  if (type === 'yes_no') return { name, type, label, description: '' };
+
+  return {
+    name,
+    type,
+    label,
+    gridColumnsCount: 4,
+    gridItemHeight: '160px',
+    gridGap: '2',
+    imageFit: 'cover',
+    options: [
+      {
+        label: '이미지 1',
+        value: 'option1',
+        imageSrc: 'https://placehold.co/300x300/png?text=1',
+      },
+    ],
+  };
+}
+
+export function normalizeSchema(value: DynamicFormSchema | undefined): DynamicFormSchema {
+  const fallback: DynamicFormSchema = { fields: [] };
+  if (!value) return fallback;
+  if (!Array.isArray(value.fields)) return fallback;
+  return { fields: value.fields };
+}
+
+export function validateDynamicFormSchema(schema: DynamicFormSchema): SchemaIssue[] {
+  const issues: SchemaIssue[] = [];
+
+  const nameToCount = new Map<string, number>();
+  schema.fields.forEach((field) => {
+    const prev = nameToCount.get(field.name) || 0;
+    nameToCount.set(field.name, prev + 1);
+  });
+
+  schema.fields.forEach((field, index) => {
+    const fieldKey = `${index}:${field.name}`;
+
+    if (!isNonEmptyTrimmedString(field.name)) {
+      issues.push({
+        id: `field.name.required.${fieldKey}`,
+        level: 'error',
+        message: '필드 name은 필수입니다',
+        fieldName: field.name,
+      });
+    } else if (field.name.trim() !== field.name) {
+      issues.push({
+        id: `field.name.trim.${fieldKey}`,
+        level: 'warning',
+        message: '필드 name 앞/뒤 공백은 제거하는 것을 권장합니다',
+        fieldName: field.name,
+      });
+    }
+
+    if (isNonEmptyTrimmedString(field.name)) {
+      const count = nameToCount.get(field.name) || 0;
+      if (count > 1) {
+        issues.push({
+          id: `field.name.duplicate.${fieldKey}`,
+          level: 'error',
+          message: `중복된 name입니다: ${field.name}`,
+          fieldName: field.name,
+        });
+      }
+    }
+
+    if (!isNonEmptyTrimmedString(field.label)) {
+      issues.push({
+        id: `field.label.required.${fieldKey}`,
+        level: 'error',
+        message: '필드 label은 필수입니다',
+        fieldName: field.name,
+      });
+    }
+
+    const type = field.type;
+    const isOptionType =
+      type === 'dropdown' ||
+      type === 'choice' ||
+      type === 'radio_cards' ||
+      type === 'choices';
+
+    if (isOptionType) {
+      const optionsRaw: unknown = field.options;
+      if (!Array.isArray(optionsRaw) || optionsRaw.length === 0) {
+        issues.push({
+          id: `field.options.required.${fieldKey}`,
+          level: 'error',
+          message: 'options는 1개 이상 필요합니다',
+          fieldName: field.name,
+        });
+      }
+    }
+
+    if (type === 'image_radio_card') {
+      const optionsRaw: unknown = field.options;
+      if (!Array.isArray(optionsRaw) || optionsRaw.length === 0) {
+        issues.push({
+          id: `field.imageOptions.required.${fieldKey}`,
+          level: 'error',
+          message: 'options는 1개 이상 필요합니다',
+          fieldName: field.name,
+        });
+      } else {
+        optionsRaw.forEach((opt, optIndex) => {
+          const imageSrc = isRecord(opt) ? opt.imageSrc : undefined;
+          if (!isNonEmptyTrimmedString(imageSrc)) {
+            issues.push({
+              id: `field.imageOptions.imageSrc.required.${fieldKey}.${optIndex}`,
+              level: 'error',
+              message: 'imageSrc는 필수입니다',
+              fieldName: field.name,
+            });
+          }
+        });
+      }
+    }
+
+    const validation: ValidationRule | undefined = field.validation;
+    if (validation) {
+      if (isFiniteNumber(validation.min) && isFiniteNumber(validation.max)) {
+        if (validation.min > validation.max) {
+          issues.push({
+            id: `field.validation.minmax.${fieldKey}`,
+            level: 'error',
+            message: 'validation.min은 validation.max 이하이어야 합니다',
+            fieldName: field.name,
+          });
+        }
+      }
+      if (isNonEmptyTrimmedString(validation.pattern)) {
+        if (!canCompileRegExp(validation.pattern)) {
+          issues.push({
+            id: `field.validation.pattern.${fieldKey}`,
+            level: 'error',
+            message: 'validation.pattern이 올바른 정규식이 아닙니다',
+            fieldName: field.name,
+          });
+        }
+      }
+    }
+  });
+
+  return issues;
+}
+
+export function hasErrorIssues(issues: SchemaIssue[]): boolean {
+  return issues.some((i) => i.level === 'error');
+}
+
+export function updateSchemaFields(
+  schema: DynamicFormSchema,
+  nextFields: DynamicFormFieldSchema[]
+): DynamicFormSchema {
+  return { fields: nextFields };
+}
+
+export function moveField(
+  fields: DynamicFormFieldSchema[],
+  fromIndex: number,
+  toIndex: number
+): DynamicFormFieldSchema[] {
+  if (fromIndex < 0 || fromIndex >= fields.length) return fields;
+  if (toIndex < 0 || toIndex >= fields.length) return fields;
+  if (fromIndex === toIndex) return fields;
+
+  const next: DynamicFormFieldSchema[] = [...fields];
+  const [item] = next.splice(fromIndex, 1);
+  next.splice(toIndex, 0, item);
+  return next;
+}
+
+export function duplicateField(fields: DynamicFormFieldSchema[], index: number): DynamicFormFieldSchema[] {
+  if (index < 0 || index >= fields.length) return fields;
+  const target = fields[index];
+  const nextName: string = createUniqueFieldName(fields, target.name);
+  const cloned: DynamicFormFieldSchema = { ...target, name: nextName };
+  const next: DynamicFormFieldSchema[] = [...fields];
+  next.splice(index + 1, 0, cloned);
+  return next;
+}
+
+export function updateFieldCommonProps(
+  field: DynamicFormFieldSchema,
+  next: {
+    name?: string;
+    label?: string;
+    description?: string | undefined;
+    required?: boolean;
+  }
+): DynamicFormFieldSchema {
+  const { name, label, description, required } = next;
+  return {
+    ...field,
+    ...(name !== undefined ? { name } : {}),
+    ...(label !== undefined ? { label } : {}),
+    ...(description !== undefined ? { description } : {}),
+    ...(required !== undefined ? { required } : {}),
+  };
+}
+
+export function updateFieldValidation(
+  field: DynamicFormFieldSchema,
+  next: ValidationRule | undefined
+): DynamicFormFieldSchema {
+  if (!next) {
+    const { validation: _validation, ...rest } = field;
+    return rest;
+  }
+  return { ...field, validation: next };
+}
+
+export function updateTextPlaceholder(
+  field: DynamicFormFieldSchema,
+  placeholder: string
+): DynamicFormFieldSchema {
+  const type = field.type;
+  if (type === 'short_text' || type === 'long_text' || type === 'number' || type === 'email' || type === 'dropdown') {
+    return { ...field, placeholder };
+  }
+  return field;
+}
+
+export function updateOrientation(
+  field: DynamicFormFieldSchema,
+  orientation: 'horizontal' | 'vertical'
+): DynamicFormFieldSchema {
+  const type = field.type;
+  if (type === 'choice' || type === 'choices') return { ...field, orientation };
+  return field;
+}
+
+export function updateOptions(
+  field: DynamicFormFieldSchema,
+  options: FieldOption[]
+): DynamicFormFieldSchema {
+  const type = field.type;
+  if (type === 'dropdown' || type === 'choice' || type === 'radio_cards' || type === 'choices') {
+    return { ...field, options };
+  }
+  return field;
+}
+
+export function updateImageOptions(
+  field: DynamicFormFieldSchema,
+  options: ImageFieldOption[]
+): DynamicFormFieldSchema {
+  if (field.type === 'image_radio_card') {
+    return { ...field, options };
+  }
+  return field;
+}
+
+export function updateImageLayout(
+  field: DynamicFormFieldSchema,
+  next: {
+    gridColumnsCount?: number | undefined;
+    gridItemHeight?: string | undefined;
+    gridColumns?: string | undefined;
+    gridRows?: string | undefined;
+    gridGap?: string | undefined;
+    imageFit?: 'cover' | 'contain' | undefined;
+  }
+): DynamicFormFieldSchema {
+  if (field.type !== 'image_radio_card') return field;
+  return { ...field, ...next };
+}
+
+export function resetFieldType(
+  field: DynamicFormFieldSchema,
+  nextType: FieldType,
+  allFields: DynamicFormFieldSchema[]
+): DynamicFormFieldSchema {
+  const base: DynamicFormFieldSchema = createDefaultField(nextType, allFields);
+  return {
+    ...base,
+    name: field.name,
+    label: field.label,
+    description: field.description,
+    required: field.required,
+    validation: field.validation,
+  };
+}