@tipp/ui 2.2.3 → 2.2.4

package/dist/ui-props/index.js

@@ -1,7 +1,7 @@
 import {
   uiProps
 } from "../chunk-NVKNDAIN.js";
-import "../chunk-2NMEKWO5.js";
+import "../chunk-CRTRMMJ7.js";
 export {
   uiProps
 };

package/dist/utils/convert-button-size.cjs

@@ -32,7 +32,7 @@ var convertSizeStr = (size) => {
     case "medium":
       return "2";
     case "large":
-      return "3";
+      return "4";
     default:
       return "2";
   }

package/dist/utils/convert-button-size.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/convert-button-size.ts"],"sourcesContent":["import { type ButtonProps as RadixButtonProps } from '@radix-ui/themes';\nimport type { Breakpoint } from '@radix-ui/themes/props';\nimport type { ButtonProps } from '../atoms/button.type';\n\nexport const convertSizeStr = (\n  size: ButtonProps['size']\n): '1' | '2' | '3' | '4' => {\n  switch (size) {\n    case 'small':\n      return '1';\n    case 'medium':\n      return '2';\n    case 'large':\n      return '3';\n    default:\n      return '2';\n  }\n};\n\nexport const convertSizeResponse = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string' || typeof size === 'undefined') {\n    return convertSizeStr(size);\n  }\n  const radixSize: RadixButtonProps['size'] = {};\n  let key: Breakpoint = 'initial';\n  for (key in size) {\n    radixSize[key] = convertSizeStr(size[key]);\n  }\n  return radixSize;\n};\n\nexport const convertSize = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string') {\n    return convertSizeStr(size);\n  }\n  return convertSizeResponse(size);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIO,IAAM,iBAAiB,CAC5B,SAC0B;AAC1B,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEO,IAAM,sBAAsB,CACjC,SAC6B;AAC7B,MAAI,OAAO,SAAS,YAAY,OAAO,SAAS,aAAa;AAC3D,WAAO,eAAe,IAAI;AAAA,EAC5B;AACA,QAAM,YAAsC,CAAC;AAC7C,MAAI,MAAkB;AACtB,OAAK,OAAO,MAAM;AAChB,cAAU,GAAG,IAAI,eAAe,KAAK,GAAG,CAAC;AAAA,EAC3C;AACA,SAAO;AACT;AAEO,IAAM,cAAc,CACzB,SAC6B;AAC7B,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,eAAe,IAAI;AAAA,EAC5B;AACA,SAAO,oBAAoB,IAAI;AACjC;","names":[]}
+{"version":3,"sources":["../../src/utils/convert-button-size.ts"],"sourcesContent":["import { type ButtonProps as RadixButtonProps } from '@radix-ui/themes';\nimport type { Breakpoint } from '@radix-ui/themes/props';\nimport type { ButtonProps } from '../atoms/button.type';\n\nexport const convertSizeStr = (\n  size: ButtonProps['size']\n): '1' | '2' | '3' | '4' => {\n  switch (size) {\n    case 'small':\n      return '1';\n    case 'medium':\n      return '2';\n    case 'large':\n      return '4';\n    default:\n      return '2';\n  }\n};\n\nexport const convertSizeResponse = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string' || typeof size === 'undefined') {\n    return convertSizeStr(size);\n  }\n  const radixSize: RadixButtonProps['size'] = {};\n  let key: Breakpoint = 'initial';\n  for (key in size) {\n    radixSize[key] = convertSizeStr(size[key]);\n  }\n  return radixSize;\n};\n\nexport const convertSize = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string') {\n    return convertSizeStr(size);\n  }\n  return convertSizeResponse(size);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIO,IAAM,iBAAiB,CAC5B,SAC0B;AAC1B,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEO,IAAM,sBAAsB,CACjC,SAC6B;AAC7B,MAAI,OAAO,SAAS,YAAY,OAAO,SAAS,aAAa;AAC3D,WAAO,eAAe,IAAI;AAAA,EAC5B;AACA,QAAM,YAAsC,CAAC;AAC7C,MAAI,MAAkB;AACtB,OAAK,OAAO,MAAM;AAChB,cAAU,GAAG,IAAI,eAAe,KAAK,GAAG,CAAC;AAAA,EAC3C;AACA,SAAO;AACT;AAEO,IAAM,cAAc,CACzB,SAC6B;AAC7B,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,eAAe,IAAI;AAAA,EAC5B;AACA,SAAO,oBAAoB,IAAI;AACjC;","names":[]}

package/dist/utils/convert-button-size.js

@@ -2,8 +2,8 @@ import {
   convertSize,
   convertSizeResponse,
   convertSizeStr
-} from "../chunk-LQY4RKWI.js";
-import "../chunk-2NMEKWO5.js";
+} from "../chunk-FQJFXZ66.js";
+import "../chunk-CRTRMMJ7.js";
 export {
   convertSize,
   convertSizeResponse,

package/dist/utils/curriculum.utils.js

@@ -5,23 +5,23 @@ import {
   getCurriculumIconColor,
   getCurriculumQuestionIconColor,
   getCurriculumQuestionTypeDescription
-} from "../chunk-KQNWWP5M.js";
+} from "../chunk-K5DDPZ2B.js";
 import "../chunk-V5XKNSCK.js";
 import "../chunk-WJ34ZHTU.js";
-import "../chunk-PVL7SJYR.js";
-import "../chunk-ECVAWQXV.js";
-import "../chunk-D7EYDD4E.js";
-import "../chunk-2TPQQBUQ.js";
-import "../chunk-HLFTU725.js";
-import "../chunk-XD3KUE4Q.js";
-import "../chunk-MEKWBVXE.js";
-import "../chunk-25Q6QLSN.js";
-import "../chunk-TPEIE4IP.js";
-import "../chunk-QNWBUYV2.js";
-import "../chunk-XSX6K7SK.js";
-import "../chunk-UQN63IRS.js";
-import "../chunk-K25BYIJ7.js";
-import "../chunk-2NMEKWO5.js";
+import "../chunk-2O45FRFQ.js";
+import "../chunk-5KNRHIIF.js";
+import "../chunk-6JRAI4G5.js";
+import "../chunk-776WBOKL.js";
+import "../chunk-2FJ4LW7E.js";
+import "../chunk-ZQE7SP6P.js";
+import "../chunk-R6ARPREO.js";
+import "../chunk-YSYJCYHY.js";
+import "../chunk-5OM2H6RI.js";
+import "../chunk-ZUYCXCPW.js";
+import "../chunk-YVFNJE4E.js";
+import "../chunk-J2I3R3OV.js";
+import "../chunk-QO6KO6MN.js";
+import "../chunk-CRTRMMJ7.js";
 export {
   CurriculumListIcons,
   getCurriculumContentSubTypeText,

package/dist/utils/get-cell-align.js

@@ -1,7 +1,7 @@
 import {
   getCellAlign
 } from "../chunk-2BPFXK4L.js";
-import "../chunk-2NMEKWO5.js";
+import "../chunk-CRTRMMJ7.js";
 export {
   getCellAlign
 };

package/dist/utils/get-column-meta.js

@@ -1,8 +1,8 @@
 import {
   getColumnMeta
-} from "../chunk-ZM763HMC.js";
+} from "../chunk-NRPDVI76.js";
 import "../chunk-2BPFXK4L.js";
-import "../chunk-2NMEKWO5.js";
+import "../chunk-CRTRMMJ7.js";
 export {
   getColumnMeta
 };

package/dist/utils/get-time-options.js

@@ -3,7 +3,7 @@ import {
   getTimeOptions,
   parseTimeOption
 } from "../chunk-NWJSLIQ3.js";
-import "../chunk-2NMEKWO5.js";
+import "../chunk-CRTRMMJ7.js";
 export {
   getTimeOption,
   getTimeOptions,

package/dist/utils/index.js

@@ -1,7 +1,10 @@
 import "../chunk-V2DF2GUE.js";
+import {
+  scrollTo
+} from "../chunk-BXX3B3E4.js";
 import {
   getColumnMeta
-} from "../chunk-ZM763HMC.js";
+} from "../chunk-NRPDVI76.js";
 import {
   getCellAlign
 } from "../chunk-2BPFXK4L.js";
@@ -10,10 +13,7 @@ import {
   getTimeOptions,
   parseTimeOption
 } from "../chunk-NWJSLIQ3.js";
-import {
-  scrollTo
-} from "../chunk-BXX3B3E4.js";
-import "../chunk-2NMEKWO5.js";
+import "../chunk-CRTRMMJ7.js";
 export {
   getCellAlign,
   getColumnMeta,

package/dist/utils/map-with-responsive.js

@@ -1,7 +1,7 @@
 import {
   mapWithResponsive
 } from "../chunk-LDBWASUA.js";
-import "../chunk-2NMEKWO5.js";
+import "../chunk-CRTRMMJ7.js";
 export {
   mapWithResponsive
 };

package/dist/utils/scroll-to.js

@@ -1,7 +1,7 @@
 import {
   scrollTo
 } from "../chunk-BXX3B3E4.js";
-import "../chunk-2NMEKWO5.js";
+import "../chunk-CRTRMMJ7.js";
 export {
   scrollTo
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "private": false,
   "type": "module",
   "exports": {

package/src/molecules/dynamic-field.tsx

@@ -0,0 +1,150 @@
+import type { FormikProps } from 'formik';
+import type * as Yup from 'yup';
+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';
+}
+
+interface DynamicFormFieldRendererProps {
+  field: DynamicFormField;
+  formik: FormikProps<Record<string, unknown>>;
+}
+
+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 hasError = Boolean(error && touched);
+
+  const commonProps = {
+    name,
+    value: String(value || ''),
+    onChange: formik.handleChange,
+    onBlur: formik.handleBlur,
+    placeholder,
+    error: hasError,
+  };
+
+  switch (type) {
+    case 'text':
+    case 'email':
+    case 'password':
+      return <TextField.Root {...commonProps} type={type} />;
+    case 'number':
+      return (
+        <TextField.Root
+          {...commonProps}
+          inputMode="numeric"
+          pattern="[0-9]*"
+          type="number"
+        />
+      );
+    case 'textarea':
+      return <TextArea {...commonProps} rows={4} />;
+
+    case 'select':
+      return (
+        <Select.Root
+          onValueChange={(newValue: string) => {
+            void formik.setFieldValue(name, newValue);
+          }}
+          value={value as string}
+        >
+          <Select.Trigger placeholder={placeholder} />
+          <Select.Content>
+            {options?.map((option) => (
+              <Select.Item key={option.value} value={String(option.value)}>
+                {option.label}
+              </Select.Item>
+            ))}
+          </Select.Content>
+        </Select.Root>
+      );
+
+    case 'radio':
+      return (
+        <RadioGroup.Root
+          onValueChange={(newValue: string) => {
+            void formik.setFieldValue(name, newValue);
+          }}
+          orientation={orientation}
+          value={String(value || '')}
+        >
+          {options?.map((option) => (
+            <RadioGroup.Item key={option.value} value={String(option.value)}>
+              {option.label}
+            </RadioGroup.Item>
+          ))}
+        </RadioGroup.Root>
+      );
+
+    case 'checkbox':
+      return (
+        <CheckboxGroup.Root
+          onValueChange={(newValue: string[]) => {
+            void formik.setFieldValue(name, newValue);
+          }}
+          orientation={orientation}
+          value={Array.isArray(value) ? value.map(String) : []}
+        >
+          {options?.map((option) => (
+            <CheckboxGroup.Item key={option.value} value={String(option.value)}>
+              {option.label}
+            </CheckboxGroup.Item>
+          ))}
+        </CheckboxGroup.Root>
+      );
+
+    case 'single-checkbox':
+      return (
+        <div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
+          <Checkbox
+            checked={Boolean(value)}
+            onCheckedChange={(checked: boolean) => {
+              void formik.setFieldValue(name, checked);
+            }}
+          />
+          {field.description ? (
+            <div style={{ fontSize: '14px', color: '#666', lineHeight: '1.4' }}>
+              {field.description}
+            </div>
+          ) : null}
+        </div>
+      );
+
+    default:
+      return null;
+  }
+}

package/src/molecules/dynamic-form.tsx

@@ -0,0 +1,223 @@
+import React, { useMemo, useRef } from 'react';
+import { useFormik, type FormikProps } from 'formik';
+import * as Yup from 'yup';
+import { Box } from '@radix-ui/themes';
+import { Typo } from '@/atoms';
+import type {
+  DynamicFormJsonSchema,
+  ValidationRule,
+} from '@/types/dynamic-form-json';
+import { Button } from '../atoms/button';
+import { Form } from './form/form';
+import { DynamicFormField } from './dynamic-field';
+
+export interface DynamicFormProps {
+  fields: DynamicFormField[];
+  initialValues?: Record<string, unknown>;
+  onSubmit: (values: Record<string, unknown>) => void | Promise<void>;
+  submitButtonText?: string;
+  labelVariant?: 'title' | 'body' | 'caption';
+  className?: string;
+}
+
+export function DynamicForm({
+  fields,
+  initialValues = {},
+  onSubmit,
+  submitButtonText = '제출',
+  labelVariant = 'body',
+  className,
+}: 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;
+      } else if (field.required) {
+        // checkbox 타입은 배열 스키마로 처리
+        if (field.type === 'checkbox') {
+          schema[field.name] = Yup.array()
+            .min(1, `${field.label}을(를) 하나 이상 선택해주세요`)
+            .required(`${field.label}은(는) 필수입니다`);
+        } else {
+          schema[field.name] = Yup.string().required(
+            `${field.label}은(는) 필수입니다`
+          );
+        }
+      }
+    });
+    return Object.keys(schema).length > 0 ? Yup.object(schema) : undefined;
+  }, [fields]);
+
+  const formik: FormikProps<Record<string, unknown>> = useFormik({
+    initialValues: fields.reduce<Record<string, unknown>>((acc, field) => {
+      if (field.type === 'checkbox') {
+        acc[field.name] = initialValues[field.name] || [];
+      } else if (field.type === 'single-checkbox') {
+        acc[field.name] = initialValues[field.name] || false;
+      } else {
+        acc[field.name] = initialValues[field.name] || '';
+      }
+      return acc;
+    }, {}),
+    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);
+    },
+  });
+
+  return (
+    <Form.Root className={className} onSubmit={formik.handleSubmit}>
+      {fields.map((field) => {
+        const errorMessage =
+          formik.touched[field.name] && formik.errors[field.name]
+            ? String(formik.errors[field.name])
+            : undefined;
+
+        return (
+          <Box
+            key={field.name}
+            mb="2"
+            ref={(el) => {
+              fieldRefs.current[field.name] = el;
+            }}
+          >
+            <Form.FormItem
+              errorMessage={errorMessage}
+              label={field.label}
+              labelVariant={labelVariant}
+              name={field.name}
+              required={field.required}
+            >
+              <DynamicFormField field={field} formik={formik} />
+              {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 function createYupValidation(
+  validation?: ValidationRule
+): Yup.Schema<unknown> | undefined {
+  if (!validation) return undefined;
+
+  let schema: Yup.Schema<unknown>;
+
+  if (validation.type === 'number') {
+    schema = Yup.number();
+  } else if (validation.type === 'email') {
+    schema = Yup.string().email(
+      validation.message || '올바른 이메일 형식이 아닙니다'
+    );
+  } else if (validation.type === 'array') {
+    schema = Yup.array();
+  } else {
+    schema = Yup.string();
+  }
+
+  if (validation.required) {
+    schema = schema.required(validation.message || '필수 항목입니다') as Yup.Schema<unknown>;
+  }
+
+  if (validation.min !== undefined) {
+    if (validation.type === 'number') {
+      schema = (schema as Yup.NumberSchema).min(
+        validation.min,
+        validation.message || `최소 ${validation.min}이어야 합니다`
+      );
+    } else if (validation.type === 'array') {
+      schema = (schema as ReturnType<typeof Yup.array>).min(
+        validation.min,
+        validation.message || `최소 ${validation.min}개 이상 선택해주세요`
+      );
+    } else {
+      schema = (schema as Yup.StringSchema).min(
+        validation.min,
+        validation.message || `최소 ${validation.min}자 이상이어야 합니다`
+      );
+    }
+  }
+
+  if (validation.max !== undefined) {
+    if (validation.type === 'number') {
+      schema = (schema as Yup.NumberSchema).max(
+        validation.max,
+        validation.message || `최대 ${validation.max}이어야 합니다`
+      );
+    } else if (validation.type === 'array') {
+      schema = (schema as ReturnType<typeof Yup.array>).max(
+        validation.max,
+        validation.message || `최대 ${validation.max}개까지 선택 가능합니다`
+      );
+    } else {
+      schema = (schema as Yup.StringSchema).max(
+        validation.max,
+        validation.message || `최대 ${validation.max}자 이하여야 합니다`
+      );
+    }
+  }
+
+  return schema;
+}

package/src/molecules/index.ts

@@ -11,4 +11,6 @@ export * from './time-select';
 export * from './radio-button-card';
 export * from './download-card';
 export * from './ghost-post';
-export * from './curriculumV2';
+export * from './curriculumV2';
+export * from './dynamic-form';
+export * from './dynamic-field';