@tipp/ui 2.2.8 → 2.2.10

package/dist/chunk-WMFMBVWB.js

@@ -0,0 +1,220 @@
+import {
+  DynamicFormField
+} from "./chunk-3JEVYSX3.js";
+import {
+  DynamicFormProvider,
+  useDynamicForm
+} from "./chunk-O2S7S5B4.js";
+import {
+  Form
+} from "./chunk-2OMSNCRH.js";
+import {
+  Typo
+} from "./chunk-PMJIFLDT.js";
+import {
+  __async
+} from "./chunk-CRTRMMJ7.js";
+
+// src/molecules/dynamic-form.tsx
+import { useMemo, useCallback, useEffect } from "react";
+import { useFormik } from "formik";
+import * as Yup from "yup";
+import { Box } from "@radix-ui/themes";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function scrollToFirstError(errors, _fields) {
+  const firstErrorFieldName = Object.keys(errors)[0];
+  if (!firstErrorFieldName) return;
+  let fieldElement = document.querySelector(`[name="${firstErrorFieldName}"]`);
+  if (!fieldElement) {
+    fieldElement = document.querySelector(`[data-field-name="${firstErrorFieldName}"]`);
+  }
+  if (!fieldElement) {
+    fieldElement = document.querySelector(`[data-error-field="${firstErrorFieldName}"]`);
+  }
+  if (fieldElement) {
+    fieldElement.scrollIntoView({
+      behavior: "smooth",
+      block: "center"
+    });
+    const focusableElement = fieldElement.querySelector("input, textarea, select, button");
+    if (focusableElement instanceof HTMLElement) {
+      focusableElement.focus();
+    }
+  }
+}
+function DynamicFormRoot({
+  fields,
+  initialValues = {},
+  onSubmit,
+  children
+}) {
+  const validationSchema = useMemo(() => {
+    const schema = {};
+    fields.forEach((field) => {
+      if (field.validation) {
+        const validation = createYupValidation(field, field.validation);
+        if (validation) {
+          schema[field.name] = validation;
+        }
+      } else if (field.required) {
+        if (field.type === "choices") {
+          schema[field.name] = Yup.array().min(1, `${field.label}\uC744(\uB97C) \uD558\uB098 \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`).required(`${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`);
+        } else if (field.type === "yes_no") {
+          schema[field.name] = Yup.boolean().oneOf([true], `${field.label}\uC5D0 \uB3D9\uC758\uD574\uC8FC\uC138\uC694`);
+        } else {
+          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 handleSubmit = useCallback((values) => __async(null, null, function* () {
+    yield onSubmit(values);
+  }), [onSubmit]);
+  const formik = useFormik({
+    initialValues: fields.reduce((acc, field) => {
+      if (field.type === "choices") {
+        acc[field.name] = initialValues[field.name] || [];
+      } else if (field.type === "yes_no") {
+        acc[field.name] = initialValues[field.name] || false;
+      } else {
+        acc[field.name] = initialValues[field.name] || "";
+      }
+      return acc;
+    }, {}),
+    validationSchema,
+    validateOnBlur: true,
+    validateOnChange: true,
+    onSubmit: handleSubmit
+  });
+  useEffect(() => {
+    if (formik.submitCount > 0 && Object.keys(formik.errors).length > 0) {
+      const timeoutId = setTimeout(() => {
+        scrollToFirstError(formik.errors, fields);
+      }, 100);
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [formik.submitCount, formik.errors, fields]);
+  return /* @__PURE__ */ jsx(DynamicFormProvider, { fields, formik, children });
+}
+function DynamicFormFieldList({
+  fields: fieldsProp,
+  labelVariant
+}) {
+  const { formik, fields: fieldsFromContext } = useDynamicForm();
+  const fields = fieldsProp || fieldsFromContext;
+  return /* @__PURE__ */ jsx(Fragment, { children: fields.map((field) => {
+    const errorMessage = formik.touched[field.name] && formik.errors[field.name] ? String(formik.errors[field.name]) : void 0;
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        "data-error-field": errorMessage ? field.name : void 0,
+        "data-field-name": field.name,
+        mb: "2",
+        children: /* @__PURE__ */ jsxs(
+          Form.FormItem,
+          {
+            errorMessage,
+            label: field.label,
+            labelVariant,
+            name: field.name,
+            required: field.required,
+            children: [
+              /* @__PURE__ */ jsx(DynamicFormField, { field }),
+              field.description ? /* @__PURE__ */ jsx(Typo, { children: field.description }) : null
+            ]
+          }
+        )
+      },
+      field.name
+    );
+  }) });
+}
+var DynamicForm = {
+  Root: DynamicFormRoot,
+  FieldList: DynamicFormFieldList
+};
+function createYupValidation(field, validation) {
+  if (!validation) return void 0;
+  let schema;
+  if (field.type === "number") {
+    schema = Yup.number();
+  } else if (field.type === "email") {
+    schema = Yup.string().email(
+      validation.message || "\uC62C\uBC14\uB978 \uC774\uBA54\uC77C \uD615\uC2DD\uC774 \uC544\uB2D9\uB2C8\uB2E4"
+    );
+  } else if (field.type === "choices") {
+    schema = Yup.array();
+  } else if (field.type === "yes_no") {
+    schema = Yup.boolean();
+  } else {
+    schema = Yup.string();
+  }
+  if (validation.min !== void 0) {
+    if (field.type === "number") {
+      schema = schema.min(
+        validation.min,
+        validation.message || `\uCD5C\uC18C ${validation.min}\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`
+      );
+    } else if (field.type === "choices") {
+      schema = schema.min(
+        validation.min,
+        validation.message || `\uCD5C\uC18C ${validation.min}\uAC1C \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`
+      );
+    } else if (field.type === "yes_no") {
+    } 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 (field.type === "number") {
+      schema = schema.max(
+        validation.max,
+        validation.message || `\uCD5C\uB300 ${validation.max}\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`
+      );
+    } else if (field.type === "choices") {
+      schema = schema.max(
+        validation.max,
+        validation.message || `\uCD5C\uB300 ${validation.max}\uAC1C\uAE4C\uC9C0 \uC120\uD0DD \uAC00\uB2A5\uD569\uB2C8\uB2E4`
+      );
+    } else if (field.type === "yes_no") {
+    } else {
+      schema = schema.max(
+        validation.max,
+        validation.message || `\uCD5C\uB300 ${validation.max}\uC790 \uC774\uD558\uC5EC\uC57C \uD569\uB2C8\uB2E4`
+      );
+    }
+  }
+  if (validation.pattern) {
+    if (field.type === "yes_no") {
+    } else {
+      schema = schema.matches(
+        new RegExp(validation.pattern),
+        validation.message || "\uC62C\uBC14\uB978 \uD615\uC2DD\uC774 \uC544\uB2D9\uB2C8\uB2E4"
+      );
+    }
+  }
+  if (field.required) {
+    if (field.type === "yes_no") {
+      schema = schema.oneOf([true], validation.message || `${field.label}\uC5D0 \uB3D9\uC758\uD574\uC8FC\uC138\uC694`);
+    } else if (field.type === "choices") {
+      schema = schema.min(1, validation.message || `${field.label}\uC744(\uB97C) \uD558\uB098 \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`);
+    } else {
+      schema = schema.required(validation.message || `${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`);
+    }
+  }
+  return schema;
+}
+
+export {
+  DynamicForm,
+  createYupValidation
+};
+//# sourceMappingURL=chunk-WMFMBVWB.js.map

package/dist/chunk-WMFMBVWB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/dynamic-form.tsx"],"sourcesContent":["import React, { useMemo, useCallback, useEffect } from 'react';\nimport { useFormik, type FormikProps } from 'formik';\nimport * as Yup from 'yup';\nimport { Box } from '@radix-ui/themes';\nimport { Typo } from '@/atoms';\nimport {\n  DynamicFormProvider,\n  useDynamicForm,\n} from '@/context/dynamic-form-context';\nimport type {\n  DynamicFormFieldSchema,\n  ValidationRule,\n} from '@/types/dynamic-form-schema-generated';\nimport { Form } from './form/form';\nimport { DynamicFormField } from './dynamic-field';\n\nexport interface DynamicFormProps {\n  fields: DynamicFormFieldSchema[];\n  initialValues?: Record<string, unknown>;\n  onSubmit: (values: Record<string, unknown>) => void | Promise<void>;\n  children: React.ReactNode;\n}\n\n/**\n * 첫 번째 에러 필드로 스크롤하는 함수\n */\nfunction scrollToFirstError(errors: Record<string, unknown>, _fields: DynamicFormFieldSchema[]): void {\n  const firstErrorFieldName = Object.keys(errors)[0];\n  if (!firstErrorFieldName) return;\n\n  // 해당 필드의 DOM 요소를 찾기 (여러 선택자 시도)\n  let fieldElement = document.querySelector(`[name=\"${firstErrorFieldName}\"]`);\n  \n  // input 요소를 찾지 못한 경우, 해당 필드의 컨테이너를 찾기\n  if (!fieldElement) {\n    fieldElement = document.querySelector(`[data-field-name=\"${firstErrorFieldName}\"]`);\n  }\n  \n  // 여전히 찾지 못한 경우, FormItem의 에러 메시지 영역을 찾기\n  if (!fieldElement) {\n    fieldElement = document.querySelector(`[data-error-field=\"${firstErrorFieldName}\"]`);\n  }\n\n  if (fieldElement) {\n    fieldElement.scrollIntoView({\n      behavior: 'smooth',\n      block: 'center',\n    });\n    \n    // 포커스 가능한 요소인 경우에만 포커스\n    const focusableElement = fieldElement.querySelector('input, textarea, select, button');\n    if (focusableElement instanceof HTMLElement) {\n      focusableElement.focus();\n    }\n  }\n}\n\nfunction DynamicFormRoot({\n  fields,\n  initialValues = {},\n  onSubmit,\n  children,\n}: DynamicFormProps): React.ReactElement {\n  const validationSchema = useMemo(() => {\n    const schema: Record<string, Yup.Schema<unknown>> = {};\n    fields.forEach((field) => {\n      if (field.validation) {\n        const validation = createYupValidation(field, field.validation);\n        if (validation) {\n          schema[field.name] = validation;\n        }\n      } else if (field.required) {\n        // choices 타입은 배열 스키마로 처리\n        if (field.type === 'choices') {\n          schema[field.name] = Yup.array()\n            .min(1, `${field.label}을(를) 하나 이상 선택해주세요`)\n            .required(`${field.label}은(는) 필수입니다`);\n        } else if (field.type === 'yes_no') {\n          // yes_no 타입은 boolean 스키마로 처리\n          schema[field.name] = Yup.boolean().oneOf([true], `${field.label}에 동의해주세요`);\n        } else {\n          // choice, dropdown, short_text, long_text, number, email 타입은 문자열 스키마로 처리\n          schema[field.name] = Yup.string().required(\n            `${field.label}은(는) 필수입니다`\n          );\n        }\n      }\n    });\n    return Object.keys(schema).length > 0 ? Yup.object(schema) : undefined;\n  }, [fields]);\n\n  const handleSubmit = useCallback(async (values: Record<string, unknown>) => {\n    await onSubmit(values);\n  }, [onSubmit]);\n\n  const formik: FormikProps<Record<string, unknown>> = useFormik({\n    initialValues: fields.reduce<Record<string, unknown>>((acc, field) => {\n      if (field.type === 'choices') {\n        acc[field.name] = initialValues[field.name] || [];\n      } else if (field.type === 'yes_no') {\n        acc[field.name] = initialValues[field.name] || false;\n      } else {\n        acc[field.name] = initialValues[field.name] || '';\n      }\n      return acc;\n    }, {}),\n    validationSchema,\n    validateOnBlur: true,\n    validateOnChange: true,\n    onSubmit: handleSubmit,\n  });\n\n  // submit 시 validation 에러가 있으면 첫 번째 에러 필드로 스크롤\n  useEffect(() => {\n    if (formik.submitCount > 0 && Object.keys(formik.errors).length > 0) {\n      // 약간의 지연을 두어 DOM 업데이트 후 스크롤 실행\n      const timeoutId = setTimeout(() => {\n        scrollToFirstError(formik.errors, fields);\n      }, 100);\n      \n      return () => {\n        clearTimeout(timeoutId);\n      };\n    }\n  }, [formik.submitCount, formik.errors, fields]);\n\n  return (\n    <DynamicFormProvider fields={fields} formik={formik}>\n      {children}\n    </DynamicFormProvider>\n  );\n}\n\ninterface DynamicFormFieldListProps {\n  fields?: DynamicFormFieldSchema[];\n  labelVariant?: 'title' | 'body' | 'caption';\n}\nfunction DynamicFormFieldList({\n  fields: fieldsProp,\n  labelVariant,\n}: DynamicFormFieldListProps): React.ReactElement {\n  const { formik, fields: fieldsFromContext } = useDynamicForm();\n  const fields = fieldsProp || fieldsFromContext;\n\n  return (\n    <>\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            data-error-field={errorMessage ? field.name : undefined}\n            data-field-name={field.name}\n            key={field.name}\n            mb=\"2\"\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} />\n              {field.description ? <Typo>{field.description}</Typo> : null}\n            </Form.FormItem>\n          </Box>\n        );\n      })}\n    </>\n  );\n}\n\nexport const DynamicForm = {\n  Root: DynamicFormRoot,\n  FieldList: DynamicFormFieldList,\n};\n\nexport function createYupValidation(\n  field: DynamicFormFieldSchema,\n  validation?: ValidationRule\n): Yup.Schema<unknown> | undefined {\n  if (!validation) return undefined;\n\n  let schema: Yup.Schema<unknown>;\n\n  // field.type을 기준으로 기본 스키마 생성\n  if (field.type === 'number') {\n    schema = Yup.number();\n  } else if (field.type === 'email') {\n    schema = Yup.string().email(\n      validation.message || '올바른 이메일 형식이 아닙니다'\n    );\n  } else if (field.type === 'choices') {\n    schema = Yup.array();\n  } else if (field.type === 'yes_no') {\n    schema = Yup.boolean();\n  } else {\n    // choice, dropdown, short_text, long_text 타입은 문자열 스키마로 처리\n    schema = Yup.string();\n  }\n\n  if (validation.min !== undefined) {\n    if (field.type === 'number') {\n      schema = (schema as Yup.NumberSchema).min(\n        validation.min,\n        validation.message || `최소 ${validation.min}이어야 합니다`\n      );\n    } else if (field.type === 'choices') {\n      schema = (schema as ReturnType<typeof Yup.array>).min(\n        validation.min,\n        validation.message || `최소 ${validation.min}개 이상 선택해주세요`\n      );\n    } else if (field.type === 'yes_no') {\n      // yes_no 타입은 boolean이므로 min/max 검증 불가\n      // 대신 required 검증만 적용\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 (field.type === 'number') {\n      schema = (schema as Yup.NumberSchema).max(\n        validation.max,\n        validation.message || `최대 ${validation.max}이어야 합니다`\n      );\n    } else if (field.type === 'choices') {\n      schema = (schema as ReturnType<typeof Yup.array>).max(\n        validation.max,\n        validation.message || `최대 ${validation.max}개까지 선택 가능합니다`\n      );\n    } else if (field.type === 'yes_no') {\n      // yes_no 타입은 boolean이므로 min/max 검증 불가\n      // 대신 required 검증만 적용\n    } else {\n      schema = (schema as Yup.StringSchema).max(\n        validation.max,\n        validation.message || `최대 ${validation.max}자 이하여야 합니다`\n      );\n    }\n  }\n\n  if (validation.pattern) {\n    if (field.type === 'yes_no') {\n      // yes_no 타입은 boolean이므로 pattern 검증 불가\n      // 대신 required 검증만 적용\n    } else {\n      schema = (schema as Yup.StringSchema).matches(\n        new RegExp(validation.pattern),\n        validation.message || '올바른 형식이 아닙니다'\n      );\n    }\n  }\n\n  // field.required가 true인 경우 required 검증 추가\n  if (field.required) {\n    if (field.type === 'yes_no') {\n      schema = (schema as Yup.BooleanSchema).oneOf([true], validation.message || `${field.label}에 동의해주세요`);\n    } else if (field.type === 'choices') {\n      schema = (schema as ReturnType<typeof Yup.array>).min(1, validation.message || `${field.label}을(를) 하나 이상 선택해주세요`);\n    } else {\n      schema = (schema as Yup.StringSchema).required(validation.message || `${field.label}은(는) 필수입니다`);\n    }\n  }\n\n  return schema;\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-WOWKGZBO.js

@@ -0,0 +1,61 @@
+import {
+  sidebar_item_default
+} from "./chunk-67D7M4LH.js";
+import {
+  useCurriculumContext
+} from "./chunk-IYQJIEVM.js";
+import {
+  Tabs
+} from "./chunk-5ZITU5L7.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+
+// src/molecules/curriculumV2/CurriculumSidebar/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var TAB_LIST = [
+  {
+    label: "\uAC15\uC758 \uBAA9\uCC28",
+    value: "curriculum"
+  }
+];
+function CurriculumSidebar() {
+  const { curriculum, selectedIndex, setSelectedIndex, scrollAreaRef, curriculumCompleteMap } = useCurriculumContext();
+  const list = curriculum.contents.list;
+  return /* @__PURE__ */ jsx(Tabs.Root, { asChild: true, defaultValue: TAB_LIST[0].value, children: /* @__PURE__ */ jsxs(Grid, { height: "100%", overflowY: "auto", rows: "auto 1fr ", width: "100%", children: [
+    /* @__PURE__ */ jsx(Tabs.List, { style: { padding: "0 var(--space-3)" }, children: TAB_LIST.map((tab) => /* @__PURE__ */ jsx(Tabs.Trigger, { value: tab.value, children: tab.label }, tab.value)) }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        height: "100%",
+        overflowY: "auto",
+        position: "relative",
+        ref: scrollAreaRef,
+        width: "100%",
+        children: /* @__PURE__ */ jsxs(
+          Tabs.Content,
+          {
+            style: {
+              position: "absolute",
+              height: "100%",
+              width: "100%"
+            },
+            value: TAB_LIST[0].value,
+            children: [
+              list.map((item, index) => /* @__PURE__ */ jsx(sidebar_item_default, { done: curriculumCompleteMap[item.uuid], index, item, selectedIndex, setSelectedIndex }, item.uuid)),
+              /* @__PURE__ */ jsx(Box, { height: "150px" })
+            ]
+          }
+        )
+      }
+    )
+  ] }) });
+}
+
+export {
+  CurriculumSidebar
+};
+//# sourceMappingURL=chunk-WOWKGZBO.js.map

package/dist/chunk-WOWKGZBO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumSidebar/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Grid, Tabs } from '@/atoms';\nimport { useCurriculumContext } from '../curriculum-context'; \nimport SidebarItem from './sidebar-item';\n\nconst TAB_LIST = [\n  {\n    label: '강의 목차',\n    value: 'curriculum',\n  },\n];\nexport function CurriculumSidebar(): React.ReactNode {\n  const { curriculum, selectedIndex, setSelectedIndex, scrollAreaRef, curriculumCompleteMap } =\n    useCurriculumContext();\n  const list = curriculum.contents.list;\n \n\n  return (\n    <Tabs.Root asChild defaultValue={TAB_LIST[0].value}>\n      <Grid height=\"100%\" overflowY=\"auto\" rows=\"auto 1fr \" width=\"100%\">\n        <Tabs.List style={{ padding: '0 var(--space-3)' }}>\n          {TAB_LIST.map((tab) => (\n            <Tabs.Trigger key={tab.value} value={tab.value}>\n              {tab.label}\n            </Tabs.Trigger>\n          ))}\n        </Tabs.List>\n        <Box\n          height=\"100%\"\n          overflowY=\"auto\"\n          position=\"relative\"\n          ref={scrollAreaRef}\n          width=\"100%\"\n        >\n          <Tabs.Content\n            style={{\n              position: 'absolute',\n              height: '100%',\n              width: '100%',\n            }}\n            value={TAB_LIST[0].value}\n          >\n            {list.map((item, index) => (\n              <SidebarItem done={curriculumCompleteMap[item.uuid]} index={index} item={item} key={item.uuid} selectedIndex={selectedIndex} setSelectedIndex={setSelectedIndex} />\n            ))}\n            <Box height=\"150px\" />\n          </Tabs.Content>\n        </Box>\n      </Grid>\n    </Tabs.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBY,cAYF,YAZE;AAjBZ,IAAM,WAAW;AAAA,EACf;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;AACO,SAAS,oBAAqC;AACnD,QAAM,EAAE,YAAY,eAAe,kBAAkB,eAAe,sBAAsB,IACxF,qBAAqB;AACvB,QAAM,OAAO,WAAW,SAAS;AAGjC,SACE,oBAAC,KAAK,MAAL,EAAU,SAAO,MAAC,cAAc,SAAS,CAAC,EAAE,OAC3C,+BAAC,QAAK,QAAO,QAAO,WAAU,QAAO,MAAK,aAAY,OAAM,QAC1D;AAAA,wBAAC,KAAK,MAAL,EAAU,OAAO,EAAE,SAAS,mBAAmB,GAC7C,mBAAS,IAAI,CAAC,QACb,oBAAC,KAAK,SAAL,EAA6B,OAAO,IAAI,OACtC,cAAI,SADY,IAAI,KAEvB,CACD,GACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,QAAO;AAAA,QACP,WAAU;AAAA,QACV,UAAS;AAAA,QACT,KAAK;AAAA,QACL,OAAM;AAAA,QAEN;AAAA,UAAC,KAAK;AAAA,UAAL;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,QAAQ;AAAA,cACR,OAAO;AAAA,YACT;AAAA,YACA,OAAO,SAAS,CAAC,EAAE;AAAA,YAElB;AAAA,mBAAK,IAAI,CAAC,MAAM,UACf,oBAAC,wBAAY,MAAM,sBAAsB,KAAK,IAAI,GAAG,OAAc,MAA4B,eAA8B,oBAAzC,KAAK,IAAwE,CAClK;AAAA,cACD,oBAAC,OAAI,QAAO,SAAQ;AAAA;AAAA;AAAA,QACtB;AAAA;AAAA,IACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/chunk-WPT6SMYT.js

@@ -0,0 +1,89 @@
+import {
+  start_review_default
+} from "./chunk-FOVNEX2D.js";
+import {
+  ReviewQuestion_default
+} from "./chunk-FZX3ZNP5.js";
+import {
+  complete_review_default
+} from "./chunk-MS255EOS.js";
+import {
+  CurriculumReviewProvider,
+  useCurriculumReviewContext
+} from "./chunk-GMKRNFH5.js";
+
+// src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/index.tsx
+import { jsx } from "react/jsx-runtime";
+function CurriculumReviewStepsInner() {
+  const {
+    formik,
+    step,
+    handleStart,
+    handleNext,
+    handlePrev,
+    onClickReviewMyAnswer,
+    handleSubmit,
+    currentQuestion,
+    currentAnswer,
+    currentError,
+    reviewContents,
+    handleAnswerChange
+  } = useCurriculumReviewContext();
+  const { questions } = reviewContents;
+  if (step === 0) {
+    return /* @__PURE__ */ jsx(start_review_default, { onStart: handleStart });
+  }
+  if (step > 0 && step <= questions.length && currentQuestion) {
+    return /* @__PURE__ */ jsx(
+      ReviewQuestion_default,
+      {
+        answer: currentAnswer,
+        error: currentError,
+        index: step - 1,
+        isLast: step === questions.length,
+        isLoading: formik.isSubmitting,
+        isNextDisabled: currentError !== void 0,
+        onChange: handleAnswerChange,
+        onNext: handleNext,
+        onPrev: handlePrev,
+        onSubmit: handleSubmit,
+        question: currentQuestion,
+        total: questions.length
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(complete_review_default, { onClickReviewMyAnswer });
+}
+function CurriculumReviewSteps({
+  contents,
+  title,
+  onClickEndReview,
+  onSubmit,
+  defaultValues,
+  curriculum,
+  onReviewValueChange,
+  mode,
+  done
+}) {
+  return /* @__PURE__ */ jsx(
+    CurriculumReviewProvider,
+    {
+      curriculum,
+      defaultValues,
+      done,
+      mode,
+      onClickEndReview,
+      onReviewValueChange,
+      onSubmit,
+      reviewContents: contents,
+      sectionTitle: title,
+      children: /* @__PURE__ */ jsx(CurriculumReviewStepsInner, {})
+    }
+  );
+}
+var CurriculumReviewSteps_default = CurriculumReviewSteps;
+
+export {
+  CurriculumReviewSteps_default
+};
+//# sourceMappingURL=chunk-WPT6SMYT.js.map

package/dist/chunk-WPT6SMYT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/index.tsx"],"sourcesContent":["import React  from 'react';\nimport { type CurriculumReviewContents } from '@/types/curriculumContents.type';\nimport type { Curriculum } from '@/types'; \nimport {\n  CurriculumReviewProvider,\n  useCurriculumReviewContext,\n} from './curriculum-review-context';\nimport StartReview from './start-review';\nimport CompleteReview from './complete-review';\nimport ReviewQuestion from './ReviewQuestion';\n \nfunction CurriculumReviewStepsInner(): React.ReactNode {\n  const {\n    formik,\n    step,\n    handleStart,\n    handleNext,\n    handlePrev,\n    onClickReviewMyAnswer,\n    handleSubmit,\n    currentQuestion,\n    currentAnswer,\n    currentError,\n    reviewContents,\n    handleAnswerChange,\n  } = useCurriculumReviewContext();\n  const { questions } = reviewContents;\n\n  if (step === 0) {\n    return <StartReview onStart={handleStart} />;\n  }\n  if (step > 0 && step <= questions.length && currentQuestion) {\n    return (\n      <ReviewQuestion\n        answer={currentAnswer}\n        error={currentError}\n        index={step - 1}\n        isLast={step === questions.length}\n        isLoading={formik.isSubmitting}\n        isNextDisabled={currentError !== undefined}\n        onChange={handleAnswerChange}\n        onNext={handleNext}\n        onPrev={handlePrev}\n        onSubmit={handleSubmit}\n        question={currentQuestion}\n        total={questions.length}\n      />\n    );\n  }\n  return <CompleteReview onClickReviewMyAnswer={onClickReviewMyAnswer} />;\n}\n\ninterface CurriculumReviewStepsProps {\n  contents: CurriculumReviewContents;\n  title: string | undefined;\n  onClickEndReview: () => void;\n  onSubmit: (values: Record<string, string>) => Promise<boolean>;\n  defaultValues?: Record<string, string>;\n  curriculum: Curriculum;\n  onReviewValueChange: ({\n    reviewId,\n    answer,\n  }: {\n    reviewId: string;\n    answer: Record<string, string>;\n  }) => void;\n  mode: 'edit' | 'create';\n  done: boolean; \n}\n\nfunction CurriculumReviewSteps({\n  contents,\n  title,\n  onClickEndReview,\n  onSubmit,\n  defaultValues,\n  curriculum,\n  onReviewValueChange,\n  mode,\n  done,\n}: CurriculumReviewStepsProps): React.ReactNode { \n\n  return (\n    <CurriculumReviewProvider\n      curriculum={curriculum}\n      defaultValues={defaultValues}\n      done={done}\n      mode={mode}\n      onClickEndReview={onClickEndReview}\n      onReviewValueChange={onReviewValueChange}\n      onSubmit={onSubmit}\n      reviewContents={contents}\n      sectionTitle={title}\n    >\n      <CurriculumReviewStepsInner />\n    </CurriculumReviewProvider>\n  );\n}\n\nexport default CurriculumReviewSteps;\n"],"mappings":";;;;;;;;;;;;;;;AA6BW;AAlBX,SAAS,6BAA8C;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,2BAA2B;AAC/B,QAAM,EAAE,UAAU,IAAI;AAEtB,MAAI,SAAS,GAAG;AACd,WAAO,oBAAC,wBAAY,SAAS,aAAa;AAAA,EAC5C;AACA,MAAI,OAAO,KAAK,QAAQ,UAAU,UAAU,iBAAiB;AAC3D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,OAAO,OAAO;AAAA,QACd,QAAQ,SAAS,UAAU;AAAA,QAC3B,WAAW,OAAO;AAAA,QAClB,gBAAgB,iBAAiB;AAAA,QACjC,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,OAAO,UAAU;AAAA;AAAA,IACnB;AAAA,EAEJ;AACA,SAAO,oBAAC,2BAAe,uBAA8C;AACvE;AAoBA,SAAS,sBAAsB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgD;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,cAAc;AAAA,MAEd,8BAAC,8BAA2B;AAAA;AAAA,EAC9B;AAEJ;AAEA,IAAO,gCAAQ;","names":[]}

package/dist/chunk-WQKPAM7P.js

@@ -0,0 +1,49 @@
+import {
+  ReviewQuestionContentHeader
+} from "./chunk-FBXX5W2A.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  TextArea
+} from "./chunk-5XYPLDI5.js";
+
+// src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-text.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ReviewQuestionSatisfisText(props) {
+  var _a, _b;
+  const { question, answer, onChange } = props;
+  return /* @__PURE__ */ jsx(Card, { size: "2", style: { height: "100%", width: "100%" }, children: /* @__PURE__ */ jsxs(Grid, { height: "100%", rows: "auto 1fr", children: [
+    /* @__PURE__ */ jsx(
+      ReviewQuestionContentHeader,
+      {
+        icon: question.icon,
+        question: (_a = question.question) != null ? _a : "\uC774\uBC88 \uD559\uC2B5\uC5D0 \uB300\uD574 \uCD94\uAC00\uB85C \uB0A8\uAE38 \uC758\uACAC\uC774 \uC788\uB2E4\uBA74 \uACF5\uC720\uD574\uC8FC\uC138\uC694.",
+        title: (_b = question.title) != null ? _b : "\uB9CC\uC871\uB3C4 \uC870\uC0AC",
+        type: question.type
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TextArea,
+      {
+        mt: "2",
+        onChange: (e) => {
+          onChange(e.target.value);
+        },
+        placeholder: question.placeholder,
+        style: {
+          height: "100%"
+        },
+        value: answer
+      }
+    )
+  ] }) });
+}
+
+export {
+  ReviewQuestionSatisfisText
+};
+//# sourceMappingURL=chunk-WQKPAM7P.js.map

package/dist/chunk-WQKPAM7P.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-text.tsx"],"sourcesContent":["import React from 'react';\nimport { Card, Grid, TextArea } from '@/atoms';\nimport { type CurriculumReviewQuestionSatisfactionText } from '@/types/curriculumContents.type';\nimport { ReviewQuestionContentHeader } from './review-comp';\n\ninterface ReviewQuestionSatisfactionTextProps {\n  question: CurriculumReviewQuestionSatisfactionText;\n  answer: string;\n  error?: string;\n  onChange: (value: string) => void;\n}\n\nexport default function ReviewQuestionSatisfisText(\n  props: ReviewQuestionSatisfactionTextProps\n): React.ReactNode {\n  const { question, answer, onChange } = props;\n\n  return (\n    <Card size=\"2\" style={{ height: '100%', width: '100%' }}>\n      <Grid height=\"100%\" rows=\"auto 1fr\">\n        <ReviewQuestionContentHeader\n          icon={question.icon}\n          question={\n            question.question ??\n            '이번 학습에 대해 추가로 남길 의견이 있다면 공유해주세요.'\n          }\n          title={question.title ?? '만족도 조사'}\n          type={question.type}\n        />\n        <TextArea\n          mt=\"2\"\n          onChange={(e) => {\n            onChange(e.target.value);\n          }}\n          placeholder={question.placeholder}\n          style={{\n            height: '100%',\n          }}\n          value={answer}\n        />\n      </Grid>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAmBM,SACE,KADF;AAPS,SAAR,2BACL,OACiB;AAdnB;AAeE,QAAM,EAAE,UAAU,QAAQ,SAAS,IAAI;AAEvC,SACE,oBAAC,QAAK,MAAK,KAAI,OAAO,EAAE,QAAQ,QAAQ,OAAO,OAAO,GACpD,+BAAC,QAAK,QAAO,QAAO,MAAK,YACvB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,SAAS;AAAA,QACf,WACE,cAAS,aAAT,YACA;AAAA,QAEF,QAAO,cAAS,UAAT,YAAkB;AAAA,QACzB,MAAM,SAAS;AAAA;AAAA,IACjB;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,UAAU,CAAC,MAAM;AACf,mBAAS,EAAE,OAAO,KAAK;AAAA,QACzB;AAAA,QACA,aAAa,SAAS;AAAA,QACtB,OAAO;AAAA,UACL,QAAQ;AAAA,QACV;AAAA,QACA,OAAO;AAAA;AAAA,IACT;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/chunk-WUJNAA43.js

@@ -0,0 +1,135 @@
+import {
+  TextArea
+} from "./chunk-5XYPLDI5.js";
+import {
+  TextField
+} from "./chunk-6NPTJBFE.js";
+import {
+  RadioGroup
+} from "./chunk-6DJOIRMF.js";
+import {
+  Select
+} from "./chunk-X2GMDZ7M.js";
+import {
+  CheckboxGroup
+} from "./chunk-W7X7KSJP.js";
+import {
+  Checkbox
+} from "./chunk-VYCYVN3L.js";
+import {
+  useDynamicForm
+} from "./chunk-UD5FDS7X.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CRTRMMJ7.js";
+
+// src/molecules/dynamic-field.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function DynamicFormField({
+  field
+}) {
+  var _a, _b;
+  const {
+    getFieldValue,
+    getFieldError,
+    getFieldTouched,
+    setFieldValue,
+    handleChange,
+    handleBlur
+  } = useDynamicForm();
+  const { name, type } = field;
+  const value = getFieldValue(name);
+  const error = getFieldError(name);
+  const touched = getFieldTouched(name);
+  const hasError = Boolean(error && touched);
+  const commonProps = {
+    name,
+    value: String(value || ""),
+    onChange: handleChange,
+    onBlur: handleBlur,
+    error: hasError
+  };
+  switch (type) {
+    case "short_text":
+    case "email":
+    case "password":
+      return /* @__PURE__ */ jsx(
+        TextField.Root,
+        __spreadProps(__spreadValues({}, commonProps), {
+          placeholder: field.placeholder,
+          type: type === "short_text" ? "text" : type
+        })
+      );
+    case "number":
+      return /* @__PURE__ */ jsx(
+        TextField.Root,
+        __spreadProps(__spreadValues({}, commonProps), {
+          inputMode: "numeric",
+          pattern: "[0-9]*",
+          placeholder: field.placeholder,
+          type: "number"
+        })
+      );
+    case "long_text":
+      return /* @__PURE__ */ jsx(TextArea, __spreadProps(__spreadValues({}, commonProps), { placeholder: field.placeholder, rows: 4 }));
+    case "dropdown":
+      return /* @__PURE__ */ jsxs(
+        Select.Root,
+        {
+          onValueChange: (newValue) => {
+            void setFieldValue(name, newValue);
+          },
+          value,
+          children: [
+            /* @__PURE__ */ jsx(Select.Trigger, { placeholder: field.placeholder }),
+            /* @__PURE__ */ jsx(Select.Content, { children: (_a = field.options) == null ? void 0 : _a.map((option) => /* @__PURE__ */ jsx(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
+          ]
+        }
+      );
+    case "choice":
+      return /* @__PURE__ */ jsx(
+        RadioGroup.Root,
+        {
+          onValueChange: (newValue) => {
+            void setFieldValue(name, newValue);
+          },
+          orientation: field.orientation,
+          value: String(value || ""),
+          children: field.options.map((option) => /* @__PURE__ */ jsx(RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
+        }
+      );
+    case "choices":
+      return /* @__PURE__ */ jsx(
+        CheckboxGroup.Root,
+        {
+          onValueChange: (newValue) => {
+            void setFieldValue(name, newValue);
+          },
+          orientation: field.orientation,
+          value: Array.isArray(value) ? value.map(String) : [],
+          children: (_b = field.options) == null ? void 0 : _b.map((option) => /* @__PURE__ */ jsx(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
+        }
+      );
+    case "boolean":
+      return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "8px" }, children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: Boolean(value),
+            onCheckedChange: (checked) => {
+              void setFieldValue(name, checked);
+            }
+          }
+        ),
+        field.description ? /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", color: "#666", lineHeight: "1.4" }, children: field.description }) : null
+      ] });
+    default:
+      return null;
+  }
+}
+
+export {
+  DynamicFormField
+};
+//# sourceMappingURL=chunk-WUJNAA43.js.map

package/dist/chunk-WUJNAA43.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/dynamic-field.tsx"],"sourcesContent":["import type * as Yup from 'yup';\nimport { useDynamicForm } from '../context/dynamic-form-context';\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';\nimport { DynamicFormFieldSchema } from '../types/dynamic-form-schema-generated';\n\n// 기존 DynamicFormField 타입을 새로운 스키마 타입으로 대체\nexport type DynamicFormField = DynamicFormFieldSchema;\n\ninterface DynamicFormFieldRendererProps {\n  field: DynamicFormField;\n}\n\nexport function DynamicFormField({\n  field,\n}: DynamicFormFieldRendererProps): React.ReactElement | null {\n  const {\n    getFieldValue,\n    getFieldError,\n    getFieldTouched,\n    setFieldValue,\n    handleChange,\n    handleBlur,\n  } = useDynamicForm();\n  const { name, type } = field;\n\n  const value = getFieldValue(name);\n  const error = getFieldError(name);\n  const touched = getFieldTouched(name);\n  const hasError = Boolean(error && touched);\n\n  const commonProps = {\n    name,\n    value: String(value || ''),\n    onChange: handleChange,\n    onBlur: handleBlur,\n    error: hasError,\n  };\n\n  switch (type) {\n    case 'short_text':\n    case 'email':\n    case 'password':\n      return (\n        <TextField.Root \n          {...commonProps} \n          placeholder={field.placeholder}\n          type={type === 'short_text' ? 'text' : type}\n        />\n      );\n    case 'number':\n      return (\n        <TextField.Root\n          {...commonProps}\n          inputMode=\"numeric\"\n          pattern=\"[0-9]*\"\n          placeholder={field.placeholder}\n          type=\"number\"\n        />\n      );\n    case 'long_text':\n      return <TextArea {...commonProps} placeholder={field.placeholder} rows={4} />;\n\n    case 'dropdown':\n      return (\n        <Select.Root\n          onValueChange={(newValue: string) => {\n            void setFieldValue(name, newValue);\n          }}\n          value={value as string}\n        >\n          <Select.Trigger placeholder={field.placeholder} />\n          <Select.Content>\n            {field.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 'choice':\n      return (\n        <RadioGroup.Root\n          onValueChange={(newValue: string) => {\n            void setFieldValue(name, newValue);\n          }}\n          orientation={field.orientation}\n          value={String(value || '')}\n        >\n          {field.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 'choices':\n      return (\n        <CheckboxGroup.Root\n          onValueChange={(newValue: string[]) => {\n            void setFieldValue(name, newValue);\n          }}\n          orientation={field.orientation}\n          value={Array.isArray(value) ? value.map(String) : []}\n        >\n          {field.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 'boolean':\n      return (\n        <div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}>\n          <Checkbox\n            checked={Boolean(value)}\n            onCheckedChange={(checked: boolean) => {\n              void 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":[]}