@tipp/ui 2.2.2 → 2.2.4

package/dist/chunk-SKB3FXMJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/dynamic-field.tsx"],"sourcesContent":["import type { FormikProps } from 'formik';\nimport type * as Yup from 'yup';\nimport { TextField } from '../atoms/text-field';\nimport { TextArea } from '../atoms/text-area';\nimport { Select } from '../atoms/select';\nimport { CheckboxGroup } from '../atoms/check-box-group';\nimport { RadioGroup } from '../atoms/radio-group';\nimport { Checkbox } from '../atoms/check-box';\n\nexport type FieldType =\n  | 'text'\n  | 'number'\n  | 'email'\n  | 'password'\n  | 'textarea'\n  | 'select'\n  | 'radio'\n  | 'checkbox'\n  | 'single-checkbox';\n\nexport interface FieldOption {\n  label: string;\n  value: string | number;\n}\n\nexport interface DynamicFormField {\n  name: string;\n  type: FieldType;\n  label: string;\n  placeholder?: string;\n  description?: string;\n  required?: boolean;\n  options?: FieldOption[];\n  validation?: Yup.Schema<unknown>;\n  orientation?: 'horizontal' | 'vertical';\n}\n\ninterface DynamicFormFieldRendererProps {\n  field: DynamicFormField;\n  formik: FormikProps<Record<string, unknown>>;\n}\n\nexport function DynamicFormField({\n  field,\n  formik,\n}: DynamicFormFieldRendererProps): React.ReactElement | null {\n  const { name, type, placeholder, options, orientation = 'vertical' } = field;\n  const { value, error, touched } = formik.getFieldMeta(name);\n  const hasError = Boolean(error && touched);\n\n  const commonProps = {\n    name,\n    value: String(value || ''),\n    onChange: formik.handleChange,\n    onBlur: formik.handleBlur,\n    placeholder,\n    error: hasError,\n  };\n\n  switch (type) {\n    case 'text':\n    case 'email':\n    case 'password':\n      return <TextField.Root {...commonProps} type={type} />;\n    case 'number':\n      return (\n        <TextField.Root\n          {...commonProps}\n          type=\"text\"\n          inputMode=\"numeric\"\n          pattern=\"[0-9]*\"\n          onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n            // 숫자, 백스페이스, 삭제, 탭, 엔터, 화살표 키, 소수점만 허용\n            const allowedKeys = [\n              'Backspace', 'Delete', 'Tab', 'Enter', 'Escape',\n              'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',\n              'Home', 'End', '.', '-'\n            ];\n            \n            if (allowedKeys.includes(e.key)) {\n              return;\n            }\n            \n            // Ctrl/Cmd + A, C, V, X 허용\n            if ((e.ctrlKey || e.metaKey) && ['a', 'c', 'v', 'x'].includes(e.key.toLowerCase())) {\n              return;\n            }\n            \n            // 숫자가 아니면 입력 차단\n            if (!/^[0-9]$/.test(e.key)) {\n              e.preventDefault();\n            }\n          }}\n          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n            const value = e.target.value;\n            // 숫자, 소수점, 마이너스 부호만 허용\n            const numericValue = value.replace(/[^0-9.-]/g, '');\n            \n            // 소수점이 여러 개 있으면 첫 번째만 유지\n            const dotIndex = numericValue.indexOf('.');\n            if (dotIndex !== -1) {\n              const beforeDot = numericValue.substring(0, dotIndex);\n              const afterDot = numericValue.substring(dotIndex + 1).replace(/\\./g, '');\n              e.target.value = beforeDot + '.' + afterDot;\n            } else {\n              e.target.value = numericValue;\n            }\n            \n            // 마이너스 부호는 맨 앞에만 허용\n            if (e.target.value.includes('-') && !e.target.value.startsWith('-')) {\n              e.target.value = e.target.value.replace(/-/g, '');\n            }\n            \n            formik.handleChange(e);\n          }}\n        />\n      );\n    case 'textarea':\n      return <TextArea {...commonProps} rows={4} />;\n\n    case 'select':\n      return (\n        <Select.Root\n          onValueChange={(newValue: string) => {\n            void formik.setFieldValue(name, newValue);\n          }}\n          value={value as string}\n        >\n          <Select.Trigger placeholder={placeholder}>\n            {String(value || '') || placeholder}\n          </Select.Trigger>\n          <Select.Content>\n            {options?.map((option) => (\n              <Select.Item key={option.value} value={String(option.value)}>\n                {option.label}\n              </Select.Item>\n            ))}\n          </Select.Content>\n        </Select.Root>\n      );\n\n    case 'radio':\n      return (\n        <RadioGroup.Root\n          onValueChange={(newValue: string) => {\n            void formik.setFieldValue(name, newValue);\n          }}\n          orientation={orientation}\n          value={String(value || '')}\n        >\n          {options?.map((option) => (\n            <RadioGroup.Item key={option.value} value={String(option.value)}>\n              {option.label}\n            </RadioGroup.Item>\n          ))}\n        </RadioGroup.Root>\n      );\n\n    case 'checkbox':\n      return (\n        <CheckboxGroup.Root\n          onValueChange={(newValue: string[]) => {\n            void formik.setFieldValue(name, newValue);\n          }}\n          orientation={orientation}\n          value={Array.isArray(value) ? value.map(String) : []}\n        >\n          {options?.map((option) => (\n            <CheckboxGroup.Item key={option.value} value={String(option.value)}>\n              {option.label}\n            </CheckboxGroup.Item>\n          ))}\n        </CheckboxGroup.Root>\n      );\n\n    case 'single-checkbox':\n      return (\n        <div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}>\n          <Checkbox\n            checked={Boolean(value)}\n            onCheckedChange={(checked: boolean) => {\n              void formik.setFieldValue(name, checked);\n            }}\n          />\n          {field.description ? (\n            <div style={{ fontSize: '14px', color: '#666', lineHeight: '1.4' }}>\n              {field.description}\n            </div>\n          ) : null}\n        </div>\n      );\n\n    default:\n      return null;\n  }\n}\n"],"mappings":"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","names":["value"]}

package/dist/chunk-SKTN3GYR.js

@@ -0,0 +1,258 @@
+import {
+  Form
+} from "./chunk-2OMSNCRH.js";
+import {
+  TextArea
+} from "./chunk-5XYPLDI5.js";
+import {
+  TextField
+} from "./chunk-6NPTJBFE.js";
+import {
+  Select
+} from "./chunk-X2GMDZ7M.js";
+import {
+  RadioGroup
+} from "./chunk-6DJOIRMF.js";
+import {
+  CheckboxGroup
+} from "./chunk-W7X7KSJP.js";
+import {
+  Typo
+} from "./chunk-PMJIFLDT.js";
+import {
+  Button
+} from "./chunk-TSXRCXC6.js";
+import {
+  __async,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CRTRMMJ7.js";
+
+// src/molecules/dynamic-form.tsx
+import { useMemo, useRef } from "react";
+import { useFormik } from "formik";
+import * as Yup from "yup";
+import { Box } from "@radix-ui/themes";
+
+// src/molecules/dynamic-field.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function DynamicFormField({
+  field,
+  formik
+}) {
+  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":
+    case "number":
+      return /* @__PURE__ */ jsx(TextField.Root, __spreadProps(__spreadValues({}, commonProps), { type }));
+    case "textarea":
+      return /* @__PURE__ */ jsx(TextArea, __spreadProps(__spreadValues({}, commonProps), { rows: 4 }));
+    case "select":
+      return /* @__PURE__ */ jsxs(
+        Select.Root,
+        {
+          onValueChange: (newValue) => {
+            void formik.setFieldValue(name, newValue);
+          },
+          value,
+          children: [
+            /* @__PURE__ */ jsx(Select.Trigger, { placeholder, children: String(value || "") || placeholder }),
+            /* @__PURE__ */ jsx(Select.Content, { children: options == null ? void 0 : options.map((option) => /* @__PURE__ */ jsx(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
+          ]
+        }
+      );
+    case "radio":
+      return /* @__PURE__ */ jsx(
+        RadioGroup.Root,
+        {
+          onValueChange: (newValue) => {
+            void formik.setFieldValue(name, newValue);
+          },
+          orientation,
+          value: String(value || ""),
+          children: options == null ? void 0 : options.map((option) => /* @__PURE__ */ jsx(RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
+        }
+      );
+    case "checkbox":
+      return /* @__PURE__ */ jsx(
+        CheckboxGroup.Root,
+        {
+          onValueChange: (newValue) => {
+            void formik.setFieldValue(name, newValue);
+          },
+          orientation,
+          value: Array.isArray(value) ? value.map(String) : [],
+          children: options == null ? void 0 : options.map((option) => /* @__PURE__ */ jsx(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
+        }
+      );
+    default:
+      return null;
+  }
+}
+
+// src/molecules/dynamic-form.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function DynamicForm({
+  fields,
+  initialValues = {},
+  onSubmit,
+  submitButtonText = "\uC81C\uCD9C",
+  labelVariant = "body",
+  className
+}) {
+  const fieldRefs = useRef({});
+  const validationSchema = useMemo(() => {
+    const schema = {};
+    fields.forEach((field) => {
+      if (field.validation) {
+        schema[field.name] = field.validation;
+      } else if (field.required) {
+        schema[field.name] = Yup.string().required(
+          `${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`
+        );
+      }
+    });
+    return Object.keys(schema).length > 0 ? Yup.object(schema) : void 0;
+  }, [fields]);
+  const formik = useFormik({
+    initialValues: fields.reduce((acc, field) => {
+      acc[field.name] = initialValues[field.name] || "";
+      return acc;
+    }, {}),
+    validationSchema,
+    validateOnChange: true,
+    onSubmit: (values, formikHelpers) => __async(null, null, function* () {
+      const errors = yield formikHelpers.validateForm();
+      if (Object.keys(errors).length > 0) {
+        void formikHelpers.setTouched(
+          fields.reduce((acc, field) => {
+            acc[field.name] = true;
+            return acc;
+          }, {})
+        );
+        const firstErrorField = fields.find((field) => errors[field.name]);
+        if (firstErrorField) {
+          const fieldElement = fieldRefs.current[firstErrorField.name];
+          console.log("fieldElement", fieldElement);
+          if (fieldElement) {
+            fieldElement.scrollIntoView({
+              behavior: "smooth",
+              block: "center"
+            });
+            const focusableElement = fieldElement.querySelector(
+              "input, select, textarea, button"
+            );
+            if (focusableElement) {
+              focusableElement.focus();
+            }
+          }
+        }
+        return;
+      }
+      yield onSubmit(values);
+    })
+  });
+  return /* @__PURE__ */ jsxs2(Form.Root, { className, onSubmit: formik.handleSubmit, children: [
+    fields.map((field) => {
+      const errorMessage = formik.touched[field.name] && formik.errors[field.name] ? String(formik.errors[field.name]) : void 0;
+      return /* @__PURE__ */ jsx2(
+        Box,
+        {
+          mb: "2",
+          ref: (el) => {
+            fieldRefs.current[field.name] = el;
+          },
+          children: /* @__PURE__ */ jsxs2(
+            Form.FormItem,
+            {
+              errorMessage,
+              label: field.label,
+              labelVariant,
+              name: field.name,
+              required: field.required,
+              children: [
+                /* @__PURE__ */ jsx2(DynamicFormField, { field, formik }),
+                field.description ? /* @__PURE__ */ jsx2(Typo, { children: field.description }) : null
+              ]
+            }
+          )
+        },
+        field.name
+      );
+    }),
+    /* @__PURE__ */ jsx2(Button, { disabled: formik.isSubmitting, type: "submit", children: formik.isSubmitting ? "\uC81C\uCD9C \uC911..." : submitButtonText })
+  ] });
+}
+function convertJsonToFields(jsonData) {
+  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) : void 0
+  }));
+}
+function createYupValidation(validation) {
+  if (!validation) return void 0;
+  let schema = Yup.string();
+  if (validation.type === "number") {
+    schema = Yup.number();
+  } else if (validation.type === "email") {
+    schema = Yup.string().email(
+      validation.message || "\uC62C\uBC14\uB978 \uC774\uBA54\uC77C \uD615\uC2DD\uC774 \uC544\uB2D9\uB2C8\uB2E4"
+    );
+  }
+  if (validation.required) {
+    schema = schema.required(validation.message || "\uD544\uC218 \uD56D\uBAA9\uC785\uB2C8\uB2E4");
+  }
+  if (validation.min !== void 0) {
+    if (validation.type === "number") {
+      schema = schema.min(
+        validation.min,
+        validation.message || `\uCD5C\uC18C ${validation.min}\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`
+      );
+    } else {
+      schema = schema.min(
+        validation.min,
+        validation.message || `\uCD5C\uC18C ${validation.min}\uC790 \uC774\uC0C1\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`
+      );
+    }
+  }
+  if (validation.max !== void 0) {
+    if (validation.type === "number") {
+      schema = schema.max(
+        validation.max,
+        validation.message || `\uCD5C\uB300 ${validation.max}\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`
+      );
+    } else {
+      schema = schema.max(
+        validation.max,
+        validation.message || `\uCD5C\uB300 ${validation.max}\uC790 \uC774\uD558\uC5EC\uC57C \uD569\uB2C8\uB2E4`
+      );
+    }
+  }
+  return schema;
+}
+
+export {
+  DynamicForm,
+  convertJsonToFields,
+  createYupValidation
+};
+//# sourceMappingURL=chunk-SKTN3GYR.js.map

package/dist/chunk-SKTN3GYR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/dynamic-form.tsx","../src/molecules/dynamic-field.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { useFormik, type FormikProps } from 'formik';\nimport * as Yup from 'yup';\nimport { Box } from '@radix-ui/themes';\nimport { Typo } from '@/atoms';\nimport type {\n  DynamicFormJsonSchema,\n  ValidationRule,\n} from '@/types/dynamic-form-json';\nimport { Button } from '../atoms/button';\nimport { Form } from './form/form';\nimport { DynamicFormField } from './dynamic-field';\n\nexport type FieldType =\n  | 'text'\n  | 'number'\n  | 'email'\n  | 'password'\n  | 'textarea'\n  | 'select'\n  | 'radio'\n  | 'checkbox';\n\nexport interface FieldOption {\n  label: string;\n  value: string | number;\n}\n\nexport interface DynamicFormField {\n  name: string;\n  type: FieldType;\n  label: string;\n  placeholder?: string;\n  description?: string;\n  required?: boolean;\n  options?: FieldOption[];\n  validation?: Yup.Schema<unknown>;\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport interface DynamicFormProps {\n  fields: DynamicFormField[];\n  initialValues?: Record<string, unknown>;\n  onSubmit: (values: Record<string, unknown>) => void | Promise<void>;\n  submitButtonText?: string;\n  labelVariant?: 'title' | 'body' | 'caption';\n  className?: string;\n}\n\nexport function DynamicForm({\n  fields,\n  initialValues = {},\n  onSubmit,\n  submitButtonText = '제출',\n  labelVariant = 'body',\n  className,\n}: DynamicFormProps): React.ReactElement {\n  const fieldRefs = useRef<Record<string, HTMLElement | null>>({});\n\n  const validationSchema = useMemo(() => {\n    const schema: Record<string, Yup.Schema<unknown>> = {};\n    fields.forEach((field) => {\n      if (field.validation) {\n        schema[field.name] = field.validation;\n      } else if (field.required) {\n        schema[field.name] = Yup.string().required(\n          `${field.label}은(는) 필수입니다`\n        );\n      }\n    });\n    return Object.keys(schema).length > 0 ? Yup.object(schema) : undefined;\n  }, [fields]);\n\n  const formik: FormikProps<Record<string, unknown>> = useFormik({\n    initialValues: fields.reduce<Record<string, unknown>>((acc, field) => {\n      acc[field.name] = initialValues[field.name] || '';\n      return acc;\n    }, {}),\n    validationSchema,\n    validateOnChange: true,\n    onSubmit: async (values, formikHelpers) => {\n      // 1. 에러 체크 동기적 실행\n      const errors = await formikHelpers.validateForm();\n\n      // 2. 에러가 있으면 스크롤 이동, 아니면 submit 동기적 실행\n      if (Object.keys(errors).length > 0) {\n        void formikHelpers.setTouched(\n          fields.reduce<Record<string, boolean>>((acc, field) => {\n            acc[field.name] = true;\n            return acc;\n          }, {})\n        );\n\n        // 첫 번째 에러 필드로 스크롤\n        const firstErrorField = fields.find((field) => errors[field.name]);\n        if (firstErrorField) {\n          const fieldElement = fieldRefs.current[firstErrorField.name];\n          console.log('fieldElement', fieldElement);\n          if (fieldElement) {\n            fieldElement.scrollIntoView({\n              behavior: 'smooth',\n              block: 'center',\n            });\n            // 포커스도 함께 이동\n            const focusableElement = fieldElement.querySelector(\n              'input, select, textarea, button'\n            );\n            if (focusableElement) {\n              (focusableElement as HTMLElement).focus();\n            }\n          }\n        }\n        return;\n      }\n\n      await onSubmit(values);\n    },\n  });\n\n  return (\n    <Form.Root className={className} onSubmit={formik.handleSubmit}>\n      {fields.map((field) => {\n        const errorMessage =\n          formik.touched[field.name] && formik.errors[field.name]\n            ? String(formik.errors[field.name])\n            : undefined;\n\n        return (\n          <Box\n            key={field.name}\n            mb=\"2\"\n            ref={(el) => {\n              fieldRefs.current[field.name] = el;\n            }}\n          >\n            <Form.FormItem\n              errorMessage={errorMessage}\n              label={field.label}\n              labelVariant={labelVariant}\n              name={field.name}\n              required={field.required}\n            >\n              <DynamicFormField field={field} formik={formik} />\n              {field.description ? <Typo>{field.description}</Typo> : null}\n            </Form.FormItem>\n          </Box>\n        );\n      })}\n\n      <Button disabled={formik.isSubmitting} type=\"submit\">\n        {formik.isSubmitting ? '제출 중...' : submitButtonText}\n      </Button>\n    </Form.Root>\n  );\n}\n\n// JSON 데이터를 DynamicFormField 타입으로 변환하는 함수\nexport function convertJsonToFields(\n  jsonData: DynamicFormJsonSchema\n): DynamicFormField[] {\n  return jsonData.fields.map((field) => ({\n    name: field.name,\n    type: field.type,\n    label: field.label,\n    placeholder: field.placeholder,\n    description: field.description,\n    required: field.required,\n    orientation: field.orientation,\n    options: field.options,\n    validation: field.validation\n      ? createYupValidation(field.validation)\n      : undefined,\n  }));\n}\n\nexport function createYupValidation(\n  validation?: ValidationRule\n): Yup.Schema<unknown> | undefined {\n  if (!validation) return undefined;\n\n  let schema: Yup.StringSchema | Yup.NumberSchema = Yup.string();\n\n  if (validation.type === 'number') {\n    schema = Yup.number();\n  } else if (validation.type === 'email') {\n    schema = Yup.string().email(\n      validation.message || '올바른 이메일 형식이 아닙니다'\n    );\n  }\n\n  if (validation.required) {\n    schema = schema.required(validation.message || '필수 항목입니다');\n  }\n\n  if (validation.min !== undefined) {\n    if (validation.type === 'number') {\n      schema = (schema as Yup.NumberSchema).min(\n        validation.min,\n        validation.message || `최소 ${validation.min}이어야 합니다`\n      );\n    } else {\n      schema = (schema as Yup.StringSchema).min(\n        validation.min,\n        validation.message || `최소 ${validation.min}자 이상이어야 합니다`\n      );\n    }\n  }\n\n  if (validation.max !== undefined) {\n    if (validation.type === 'number') {\n      schema = (schema as Yup.NumberSchema).max(\n        validation.max,\n        validation.message || `최대 ${validation.max}이어야 합니다`\n      );\n    } else {\n      schema = (schema as Yup.StringSchema).max(\n        validation.max,\n        validation.message || `최대 ${validation.max}자 이하여야 합니다`\n      );\n    }\n  }\n\n  return schema;\n}\n","import type { FormikProps } from 'formik';\nimport { TextField } from '../atoms/text-field';\nimport { TextArea } from '../atoms/text-area';\nimport { Select } from '../atoms/select';\nimport { CheckboxGroup } from '../atoms/check-box-group';\nimport { RadioGroup } from '../atoms/radio-group';\nimport type { DynamicFormField } from './dynamic-form';\n\ninterface DynamicFormFieldRendererProps {\n  field: DynamicFormField;\n  formik: FormikProps<Record<string, unknown>>;\n}\n\nexport function DynamicFormField({\n  field,\n  formik,\n}: DynamicFormFieldRendererProps): React.ReactElement | null {\n  const { name, type, placeholder, options, orientation = 'vertical' } = field;\n  const { value, error, touched } = formik.getFieldMeta(name);\n  const hasError = Boolean(error && touched);\n\n  const commonProps = {\n    name,\n    value: String(value || ''),\n    onChange: formik.handleChange,\n    onBlur: formik.handleBlur,\n    placeholder,\n    error: hasError,\n  };\n\n  switch (type) {\n    case 'text':\n    case 'email':\n    case 'password':\n    case 'number':\n      return <TextField.Root {...commonProps} type={type} />; \n    case 'textarea':\n      return <TextArea {...commonProps} rows={4} />;\n      \n    case 'select':\n      return (\n        <Select.Root\n          onValueChange={(newValue: string) => {\n            void formik.setFieldValue(name, newValue);\n          }}\n          value={value as string}\n        >\n          <Select.Trigger placeholder={placeholder}>\n            {String(value || '') || placeholder}\n          </Select.Trigger>\n          <Select.Content>\n            {options?.map((option) => (\n              <Select.Item key={option.value} value={String(option.value)}>\n                {option.label}\n              </Select.Item>\n            ))}\n          </Select.Content>\n        </Select.Root>\n      );\n\n    case 'radio':\n      return (\n        <RadioGroup.Root\n          onValueChange={(newValue: string) => {\n            void formik.setFieldValue(name, newValue);\n          }}\n          orientation={orientation}\n          value={String(value || '')}\n        >\n          {options?.map((option) => (\n            <RadioGroup.Item key={option.value} value={String(option.value)}>\n              {option.label}\n            </RadioGroup.Item>\n          ))}\n        </RadioGroup.Root>\n      );\n\n    case 'checkbox':\n      return (\n        <CheckboxGroup.Root\n          onValueChange={(newValue: string[]) => {\n            void formik.setFieldValue(name, newValue);\n          }}\n          orientation={orientation}\n          value={Array.isArray(value) ? value.map(String) : []}\n        >\n          {options?.map((option) => (\n            <CheckboxGroup.Item key={option.value} value={String(option.value)}>\n              {option.label}\n            </CheckboxGroup.Item>\n          ))}\n        </CheckboxGroup.Root>\n      );\n\n    default:\n      return null;\n  }\n}\n"],"mappings":"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","names":["jsx","jsxs"]}

package/dist/chunk-SKVHLGC7.js

@@ -0,0 +1,54 @@
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+import {
+  Button
+} from "./chunk-EBBSXNIL.js";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  PaperPlaneIcon
+} from "./chunk-V5XKNSCK.js";
+
+// src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-footer.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ReviewQuestionFooter({
+  index,
+  onNext,
+  onPrev,
+  isLast,
+  isNextButtonDisabled,
+  onSubmit,
+  isLoading
+}) {
+  return /* @__PURE__ */ jsxs(Grid, { columns: "1fr 1fr", gap: "3", children: [
+    index > 0 ? /* @__PURE__ */ jsxs(Button, { onClick: onPrev, variant: "outline", children: [
+      /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+      "\uC774\uC804\uC73C\uB85C"
+    ] }) : /* @__PURE__ */ jsx(Box, {}),
+    isLast ? /* @__PURE__ */ jsxs(Button, { disabled: isNextButtonDisabled, loading: isLoading, onClick: onSubmit, children: [
+      /* @__PURE__ */ jsx(PaperPlaneIcon, {}),
+      "\uC81C\uCD9C\uD558\uAE30"
+    ] }) : /* @__PURE__ */ jsxs(
+      Button,
+      {
+        disabled: isNextButtonDisabled,
+        onClick: onNext,
+        variant: "surface",
+        children: [
+          /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+          "\uB2E4\uC74C\uC73C\uB85C"
+        ]
+      }
+    )
+  ] });
+}
+var review_question_footer_default = ReviewQuestionFooter;
+
+export {
+  review_question_footer_default
+};
+//# sourceMappingURL=chunk-SKVHLGC7.js.map

package/dist/chunk-SKVHLGC7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-footer.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Button, Grid } from '@/atoms';\nimport { ChevronLeftIcon, ChevronRightIcon, PaperPlaneIcon } from '@/icon';\n\ninterface ReviewQuestionFooterProps {\n  index: number;\n  onNext: () => void;\n  onPrev: () => void;\n  isLast: boolean;\n  isNextButtonDisabled?: boolean;\n  onSubmit: () => void;\n  isLoading?: boolean;\n}\n\nfunction ReviewQuestionFooter({\n  index,\n  onNext,\n  onPrev,\n  isLast,\n  isNextButtonDisabled,\n  onSubmit,\n  isLoading,\n}: ReviewQuestionFooterProps): React.ReactNode {\n  return (\n    <Grid columns=\"1fr 1fr\" gap=\"3\">\n      {index > 0 ? (\n        <Button onClick={onPrev} variant=\"outline\">\n          <ChevronLeftIcon />\n          이전으로\n        </Button>\n      ) : (\n        <Box />\n      )}\n      {isLast ? (\n        <Button disabled={isNextButtonDisabled} loading={isLoading} onClick={onSubmit}>\n          <PaperPlaneIcon />\n          제출하기\n        </Button>\n      ) : (\n        <Button\n          disabled={isNextButtonDisabled}\n          onClick={onNext}\n          variant=\"surface\"\n        >\n          <ChevronRightIcon />\n          다음으로\n        </Button>\n      )}\n    </Grid>\n  );\n}\n\nexport default ReviewQuestionFooter;\n"],"mappings":";;;;;;;;;;;;;;;;AA0BQ,SACE,KADF;AAZR,SAAS,qBAAqB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+C;AAC7C,SACE,qBAAC,QAAK,SAAQ,WAAU,KAAI,KACzB;AAAA,YAAQ,IACP,qBAAC,UAAO,SAAS,QAAQ,SAAQ,WAC/B;AAAA,0BAAC,mBAAgB;AAAA,MAAE;AAAA,OAErB,IAEA,oBAAC,OAAI;AAAA,IAEN,SACC,qBAAC,UAAO,UAAU,sBAAsB,SAAS,WAAW,SAAS,UACnE;AAAA,0BAAC,kBAAe;AAAA,MAAE;AAAA,OAEpB,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,SAAS;AAAA,QACT,SAAQ;AAAA,QAER;AAAA,8BAAC,oBAAiB;AAAA,UAAE;AAAA;AAAA;AAAA,IAEtB;AAAA,KAEJ;AAEJ;AAEA,IAAO,iCAAQ;","names":[]}

package/dist/chunk-SLZMX36C.js

@@ -0,0 +1,87 @@
+import {
+  ReviewQuestionContentHeader
+} from "./chunk-M2JJZ3OO.js";
+import {
+  TextArea
+} from "./chunk-5XYPLDI5.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+import {
+  Typo
+} from "./chunk-PMJIFLDT.js";
+import {
+  Callout
+} from "./chunk-B6XJN6EC.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
+import {
+  BellIcon
+} from "./chunk-V5XKNSCK.js";
+
+// src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-text.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ReviewQuestionText(props) {
+  const { question, answer, onChange } = props;
+  const minLengthNotMet = question.minLength && answer.length < question.minLength;
+  const remainingLength = question.minLength && answer.length < question.minLength ? question.minLength - answer.length : 0;
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      size: "2",
+      style: {
+        width: "100%",
+        height: "100%"
+      },
+      children: /* @__PURE__ */ jsxs(Grid, { height: "100%", rows: "1fr auto", children: [
+        /* @__PURE__ */ jsxs(Grid, { height: "100%", rows: "auto 1fr", width: "100%", children: [
+          /* @__PURE__ */ jsx(
+            ReviewQuestionContentHeader,
+            {
+              icon: question.icon,
+              question: question.question,
+              title: question.title,
+              type: question.type
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextArea,
+            {
+              mt: "2",
+              onChange: (e) => {
+                onChange(e.target.value);
+              },
+              placeholder: question.placeholder,
+              value: answer
+            }
+          )
+        ] }),
+        minLengthNotMet ? /* @__PURE__ */ jsxs(Box, { mt: "2", children: [
+          /* @__PURE__ */ jsx(Typo, { align: "right", as: "p", color: "red", variant: "caption", children: `${remainingLength}\uC790 \uB354 \uC791\uC131\uD574\uC8FC\uC138\uC694.` }),
+          question.minLengthInfoMessage ? /* @__PURE__ */ jsxs(
+            Callout.Root,
+            {
+              color: "iris",
+              mt: "2",
+              style: { alignItems: "center" },
+              children: [
+                /* @__PURE__ */ jsx(Callout.Icon, { children: /* @__PURE__ */ jsx(BellIcon, {}) }),
+                /* @__PURE__ */ jsx(Callout.Text, { children: /* @__PURE__ */ jsx(Typo, { as: "p", variant: "caption", children: question.minLengthInfoMessage }) })
+              ]
+            }
+          ) : null
+        ] }) : null
+      ] })
+    }
+  );
+}
+var review_question_text_default = ReviewQuestionText;
+
+export {
+  review_question_text_default
+};
+//# sourceMappingURL=chunk-SLZMX36C.js.map

package/dist/chunk-SLZMX36C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-text.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Card, Callout, Grid, TextArea, Typo } from '@/atoms';\nimport { BellIcon } from '@/icon';\nimport { type CurriculumReviewQuestionText } from '@/types/curriculumContents.type';\nimport { ReviewQuestionContentHeader } from './review-comp';\n\ninterface ReviewQuestionTextProps {\n  question: CurriculumReviewQuestionText;\n  answer: string;\n  error?: string;\n  onChange: (value: string) => void;\n}\n\nfunction ReviewQuestionText(props: ReviewQuestionTextProps): React.ReactNode {\n  const { question, answer, onChange } = props;\n\n  const minLengthNotMet =\n    question.minLength && answer.length < question.minLength;\n\n  const remainingLength =\n    question.minLength && answer.length < question.minLength\n      ? question.minLength - answer.length\n      : 0;\n\n  return (\n    <Card\n      size=\"2\"\n      style={{\n        width: '100%',\n        height: '100%',\n      }}\n    >\n      <Grid height=\"100%\" rows=\"1fr auto\">\n        <Grid height=\"100%\" rows=\"auto 1fr\" width=\"100%\">\n          <ReviewQuestionContentHeader\n            icon={question.icon}\n            question={question.question}\n            title={question.title}\n            type={question.type}\n          />\n\n          <TextArea\n            mt=\"2\"\n            onChange={(e) => {\n              onChange(e.target.value);\n            }}\n            placeholder={question.placeholder}\n            value={answer}\n          />\n        </Grid>\n        {minLengthNotMet ? (\n          <Box mt=\"2\">\n            <Typo align=\"right\" as=\"p\" color=\"red\" variant=\"caption\">\n              {`${remainingLength}자 더 작성해주세요.`}\n            </Typo>\n            {question.minLengthInfoMessage ? (\n              <Callout.Root\n                color=\"iris\"\n                mt=\"2\"\n                style={{ alignItems: 'center' }}\n              >\n                <Callout.Icon>\n                  <BellIcon />\n                </Callout.Icon>\n                <Callout.Text>\n                  <Typo as=\"p\" variant=\"caption\">\n                    {question.minLengthInfoMessage}\n                  </Typo>\n                </Callout.Text>\n              </Callout.Root>\n            ) : null}\n          </Box>\n        ) : null}\n      </Grid>\n    </Card>\n  );\n}\n\nexport default ReviewQuestionText;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiCQ,SACE,KADF;AApBR,SAAS,mBAAmB,OAAiD;AAC3E,QAAM,EAAE,UAAU,QAAQ,SAAS,IAAI;AAEvC,QAAM,kBACJ,SAAS,aAAa,OAAO,SAAS,SAAS;AAEjD,QAAM,kBACJ,SAAS,aAAa,OAAO,SAAS,SAAS,YAC3C,SAAS,YAAY,OAAO,SAC5B;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,MAEA,+BAAC,QAAK,QAAO,QAAO,MAAK,YACvB;AAAA,6BAAC,QAAK,QAAO,QAAO,MAAK,YAAW,OAAM,QACxC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,SAAS;AAAA,cACf,UAAU,SAAS;AAAA,cACnB,OAAO,SAAS;AAAA,cAChB,MAAM,SAAS;AAAA;AAAA,UACjB;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,UAAU,CAAC,MAAM;AACf,yBAAS,EAAE,OAAO,KAAK;AAAA,cACzB;AAAA,cACA,aAAa,SAAS;AAAA,cACtB,OAAO;AAAA;AAAA,UACT;AAAA,WACF;AAAA,QACC,kBACC,qBAAC,OAAI,IAAG,KACN;AAAA,8BAAC,QAAK,OAAM,SAAQ,IAAG,KAAI,OAAM,OAAM,SAAQ,WAC5C,aAAG,eAAe,uDACrB;AAAA,UACC,SAAS,uBACR;AAAA,YAAC,QAAQ;AAAA,YAAR;AAAA,cACC,OAAM;AAAA,cACN,IAAG;AAAA,cACH,OAAO,EAAE,YAAY,SAAS;AAAA,cAE9B;AAAA,oCAAC,QAAQ,MAAR,EACC,8BAAC,YAAS,GACZ;AAAA,gBACA,oBAAC,QAAQ,MAAR,EACC,8BAAC,QAAK,IAAG,KAAI,SAAQ,WAClB,mBAAS,sBACZ,GACF;AAAA;AAAA;AAAA,UACF,IACE;AAAA,WACN,IACE;AAAA,SACN;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,+BAAQ;","names":[]}

package/dist/chunk-SMEKBHMG.js

@@ -0,0 +1,70 @@
+import {
+  ThemeProvider
+} from "./chunk-7FKRQQYK.js";
+import {
+  Heading
+} from "./chunk-BESTU2AY.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Button
+} from "./chunk-EBBSXNIL.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CRTRMMJ7.js";
+
+// src/molecules/ghost-post.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function GhostPost(props) {
+  const { defaultThemeProps, html, onPageBack } = props;
+  return /* @__PURE__ */ jsx(
+    ThemeProvider,
+    __spreadProps(__spreadValues({}, defaultThemeProps), {
+      accentColor: "iris",
+      scaling: "110%",
+      style: {},
+      children: html ? /* @__PURE__ */ jsx(Box, { mt: "5", width: "100%", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "gh-content",
+          dangerouslySetInnerHTML: { __html: html }
+        }
+      ) }) : /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          align: "center",
+          direction: "column",
+          gap: "6",
+          height: "100%",
+          justify: "center",
+          width: "100%",
+          children: [
+            /* @__PURE__ */ jsx(Heading, { variant: "heading1", children: "\uCF58\uD150\uCE20\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." }),
+            /* @__PURE__ */ jsx(
+              Heading,
+              {
+                align: "center",
+                color: "gray",
+                variant: "heading4",
+                weight: "regular",
+                children: `\uC694\uCCAD\uD558\uC2E0 \uCF58\uD150\uCE20\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.
+        \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574\uC8FC\uC138\uC694.`
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { onClick: onPageBack, size: "large", children: "\uB4A4\uB85C\uAC00\uAE30" })
+          ]
+        }
+      )
+    })
+  );
+}
+
+export {
+  GhostPost
+};
+//# sourceMappingURL=chunk-SMEKBHMG.js.map

package/dist/chunk-SMEKBHMG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/ghost-post.tsx"],"sourcesContent":["import React from 'react';\nimport type { ThemeProviderProps } from '../theme/theme-provider';\nimport { ThemeProvider } from '../theme/theme-provider';\nimport { Flex } from '../atoms/flex';\nimport { Heading } from '../atoms/heading';\nimport { Box } from '../atoms/box';\nimport { Button } from '../atoms/button';\n\nexport interface GhostPostProps {\n  defaultThemeProps?: Partial<ThemeProviderProps>;\n  html?: string;\n  title?: string;\n  children?: React.ReactNode;\n  onPageBack?: () => void;\n}\n\nexport function GhostPost(props: GhostPostProps): React.ReactNode {\n  const { defaultThemeProps, html, onPageBack } = props;\n  return (\n    <ThemeProvider\n      {...defaultThemeProps}\n      accentColor=\"iris\"\n      scaling=\"110%\"\n      style={{}}\n    >\n      {html ? (\n        <Box mt=\"5\" width=\"100%\">\n          <div\n            className=\"gh-content\"\n            dangerouslySetInnerHTML={{ __html: html }}\n          />\n        </Box>\n      ) : (\n        <Flex\n          align=\"center\"\n          direction=\"column\"\n          gap=\"6\"\n          height=\"100%\"\n          justify=\"center\"\n          width=\"100%\"\n        >\n          <Heading variant=\"heading1\">콘텐츠를 찾을 수 없습니다.</Heading>\n          <Heading\n            align=\"center\"\n            color=\"gray\"\n            variant=\"heading4\"\n            weight=\"regular\"\n          >\n            {`요청하신 콘텐츠를 찾을 수 없습니다.\n        잠시 후 다시 시도해주세요.`}\n          </Heading>\n          <Button onClick={onPageBack} size=\"large\">\n            뒤로가기\n          </Button>\n        </Flex>\n      )}\n    </ThemeProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2BU,cAMF,YANE;AAXH,SAAS,UAAU,OAAwC;AAChE,QAAM,EAAE,mBAAmB,MAAM,WAAW,IAAI;AAChD,SACE;AAAA,IAAC;AAAA,qCACK,oBADL;AAAA,MAEC,aAAY;AAAA,MACZ,SAAQ;AAAA,MACR,OAAO,CAAC;AAAA,MAEP,iBACC,oBAAC,OAAI,IAAG,KAAI,OAAM,QAChB;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,yBAAyB,EAAE,QAAQ,KAAK;AAAA;AAAA,MAC1C,GACF,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,WAAU;AAAA,UACV,KAAI;AAAA,UACJ,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,OAAM;AAAA,UAEN;AAAA,gCAAC,WAAQ,SAAQ,YAAW,oFAAe;AAAA,YAC3C;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,QAAO;AAAA,gBAEN;AAAA;AAAA;AAAA,YAEH;AAAA,YACA,oBAAC,UAAO,SAAS,YAAY,MAAK,SAAQ,sCAE1C;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EAEJ;AAEJ;","names":[]}