@tipp/ui 2.3.21 → 2.3.23

package/dist/chunk-7CRTGYJE.js

@@ -0,0 +1,80 @@
+// src/molecules/dynamic-form-response-item.tsx
+function isRecord(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function isFieldOption(value) {
+  if (!isRecord(value)) return false;
+  const label = value.label;
+  const optionValue = value.value;
+  return typeof label === "string" && (typeof optionValue === "string" || typeof optionValue === "number");
+}
+function DynamicFormResponseItem({
+  payload,
+  questionType,
+  config
+}) {
+  const value = isRecord(payload) && "value" in payload ? payload.value : payload;
+  if (value === void 0 || value === null || value === "") {
+    return "\uC751\uB2F5 \uC5C6\uC74C";
+  }
+  const getOptions = (fieldConfig) => {
+    if (!isRecord(fieldConfig)) return void 0;
+    const options2 = fieldConfig.options;
+    if (!Array.isArray(options2)) return void 0;
+    if (!options2.every(isFieldOption)) return void 0;
+    return options2;
+  };
+  const options = getOptions(config);
+  switch (questionType) {
+    case "text":
+    case "textarea":
+      return String(value);
+    case "radio":
+    case "select":
+    case "choice":
+    case "radio_cards":
+    case "image_radio_card":
+      if (options) {
+        const option = options.find((opt) => String(opt.value) === String(value));
+        return option ? option.label : String(value);
+      }
+      return String(value);
+    case "checkbox":
+    case "choices":
+      if (Array.isArray(value)) {
+        if (options) {
+          return value.map((val) => {
+            const option = options.find(
+              (opt) => String(opt.value) === String(val)
+            );
+            return option ? option.label : String(val);
+          }).join(", ");
+        }
+        return value.join(", ");
+      }
+      return String(value);
+    case "rating":
+      if (options) {
+        const option = options.find((opt) => opt.value === value);
+        return option ? option.label : String(value);
+      }
+      return String(value);
+    case "number":
+      return String(value);
+    case "yes_no":
+      if (value === true || value === "true" || value === "yes") {
+        return "\uB3D9\uC758";
+      }
+      if (value === false || value === "false" || value === "no") {
+        return "\uBE44\uB3D9\uC758";
+      }
+      return String(value);
+    default:
+      return String(value);
+  }
+}
+
+export {
+  DynamicFormResponseItem
+};
+//# sourceMappingURL=chunk-7CRTGYJE.js.map

package/dist/chunk-7CRTGYJE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/dynamic-form-response-item.tsx"],"sourcesContent":["import type { DynamicFormFieldSchema } from '@/types/dynamic-form-schema-generated';\n\ninterface DynamicFormResponseItemProps {\n  payload: unknown;\n  questionType: string;\n  config?: DynamicFormFieldSchema;\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return Boolean(value) && typeof value === 'object' && !Array.isArray(value);\n}\n\nfunction isFieldOption(value: unknown): value is { label: string; value: string | number } {\n  if (!isRecord(value)) return false;\n  const label = value.label;\n  const optionValue = value.value;\n  return (\n    typeof label === 'string' &&\n    (typeof optionValue === 'string' || typeof optionValue === 'number')\n  );\n}\n\nexport function DynamicFormResponseItem({\n  payload,\n  questionType,\n  config,\n}: DynamicFormResponseItemProps): string {\n  const value: unknown =\n    isRecord(payload) && 'value' in payload ? payload.value : payload;\n\n  // value가 없거나 빈 값인 경우\n  if (value === undefined || value === null || value === '') {\n    return '응답 없음';\n  }\n\n  // options가 있는 필드 타입들 확인\n  const getOptions = (\n    fieldConfig?: DynamicFormFieldSchema\n  ): { label: string; value: string | number }[] | undefined => {\n    if (!isRecord(fieldConfig)) return undefined;\n    const options = fieldConfig.options;\n    if (!Array.isArray(options)) return undefined;\n    if (!options.every(isFieldOption)) return undefined;\n    return options;\n  };\n\n  const options = getOptions(config);\n\n  switch (questionType) {\n    case 'text':\n    case 'textarea':\n      return String(value);\n    case 'radio':\n    case 'select':\n    case 'choice':\n    case 'radio_cards':\n    case 'image_radio_card':\n      if (options) {\n        const option = options.find((opt) => String(opt.value) === String(value));\n        return option ? option.label : String(value);\n      }\n      return String(value);\n    case 'checkbox':\n    case 'choices':\n      if (Array.isArray(value)) {\n        if (options) {\n          return value\n            .map((val) => {\n              const option = options.find(\n                (opt) => String(opt.value) === String(val)\n              );\n              return option ? option.label : String(val);\n            })\n            .join(', ');\n        }\n        return value.join(', ');\n      }\n      return String(value);\n    case 'rating':\n      if (options) {\n        const option = options.find((opt) => opt.value === value);\n        return option ? option.label : String(value);\n      }\n      return String(value);\n    case 'number':\n      return String(value);\n    case 'yes_no':\n      if (value === true || value === 'true' || value === 'yes') {\n        return '동의';\n      }\n      if (value === false || value === 'false' || value === 'no') {\n        return '비동의';\n      }\n      return String(value);\n    default:\n      return String(value);\n  }\n}\n"],"mappings":";AAQA,SAAS,SAAS,OAAkD;AAClE,SAAO,QAAQ,KAAK,KAAK,OAAO,UAAU,YAAY,CAAC,MAAM,QAAQ,KAAK;AAC5E;AAEA,SAAS,cAAc,OAAoE;AACzF,MAAI,CAAC,SAAS,KAAK,EAAG,QAAO;AAC7B,QAAM,QAAQ,MAAM;AACpB,QAAM,cAAc,MAAM;AAC1B,SACE,OAAO,UAAU,aAChB,OAAO,gBAAgB,YAAY,OAAO,gBAAgB;AAE/D;AAEO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,GAAyC;AACvC,QAAM,QACJ,SAAS,OAAO,KAAK,WAAW,UAAU,QAAQ,QAAQ;AAG5D,MAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,IAAI;AACzD,WAAO;AAAA,EACT;AAGA,QAAM,aAAa,CACjB,gBAC4D;AAC5D,QAAI,CAAC,SAAS,WAAW,EAAG,QAAO;AACnC,UAAMA,WAAU,YAAY;AAC5B,QAAI,CAAC,MAAM,QAAQA,QAAO,EAAG,QAAO;AACpC,QAAI,CAACA,SAAQ,MAAM,aAAa,EAAG,QAAO;AAC1C,WAAOA;AAAA,EACT;AAEA,QAAM,UAAU,WAAW,MAAM;AAEjC,UAAQ,cAAc;AAAA,IACpB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,UAAI,SAAS;AACX,cAAM,SAAS,QAAQ,KAAK,CAAC,QAAQ,OAAO,IAAI,KAAK,MAAM,OAAO,KAAK,CAAC;AACxE,eAAO,SAAS,OAAO,QAAQ,OAAO,KAAK;AAAA,MAC7C;AACA,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AAAA,IACL,KAAK;AACH,UAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,YAAI,SAAS;AACX,iBAAO,MACJ,IAAI,CAAC,QAAQ;AACZ,kBAAM,SAAS,QAAQ;AAAA,cACrB,CAAC,QAAQ,OAAO,IAAI,KAAK,MAAM,OAAO,GAAG;AAAA,YAC3C;AACA,mBAAO,SAAS,OAAO,QAAQ,OAAO,GAAG;AAAA,UAC3C,CAAC,EACA,KAAK,IAAI;AAAA,QACd;AACA,eAAO,MAAM,KAAK,IAAI;AAAA,MACxB;AACA,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AACH,UAAI,SAAS;AACX,cAAM,SAAS,QAAQ,KAAK,CAAC,QAAQ,IAAI,UAAU,KAAK;AACxD,eAAO,SAAS,OAAO,QAAQ,OAAO,KAAK;AAAA,MAC7C;AACA,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AACH,aAAO,OAAO,KAAK;AAAA,IACrB,KAAK;AACH,UAAI,UAAU,QAAQ,UAAU,UAAU,UAAU,OAAO;AACzD,eAAO;AAAA,MACT;AACA,UAAI,UAAU,SAAS,UAAU,WAAW,UAAU,MAAM;AAC1D,eAAO;AAAA,MACT;AACA,aAAO,OAAO,KAAK;AAAA,IACrB;AACE,aAAO,OAAO,KAAK;AAAA,EACvB;AACF;","names":["options"]}

package/dist/chunk-7ITDAUWI.js

@@ -0,0 +1,287 @@
+import {
+  TextArea
+} from "./chunk-5XYPLDI5.js";
+import {
+  TextField
+} from "./chunk-6NPTJBFE.js";
+import {
+  RadioCards
+} from "./chunk-6IVCARWS.js";
+import {
+  RadioGroup
+} from "./chunk-6DJOIRMF.js";
+import {
+  Select
+} from "./chunk-X2GMDZ7M.js";
+import {
+  Inset
+} from "./chunk-XQOL7UBI.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  CheckboxGroup
+} from "./chunk-W7X7KSJP.js";
+import {
+  Checkbox
+} from "./chunk-VYCYVN3L.js";
+import {
+  useDynamicForm
+} from "./chunk-4U6DFH7Z.js";
+import {
+  Typo
+} from "./chunk-PMJIFLDT.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CRTRMMJ7.js";
+
+// src/molecules/dynamic-field.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function isRecord(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function isFieldOption(value) {
+  if (!isRecord(value)) return false;
+  const label = value.label;
+  const optionValue = value.value;
+  return typeof label === "string" && (typeof optionValue === "string" || typeof optionValue === "number");
+}
+function isImageFieldOption(value) {
+  if (!isRecord(value)) return false;
+  if (!isFieldOption(value)) return false;
+  const imageSrc = value.imageSrc;
+  const alt = value.alt;
+  return typeof imageSrc === "string" && (alt === void 0 || typeof alt === "string");
+}
+function getStringProp(obj, key, fallback) {
+  if (!isRecord(obj)) return fallback;
+  const value = obj[key];
+  return typeof value === "string" ? value : fallback;
+}
+function getNumberProp(obj, key, fallback) {
+  if (!isRecord(obj)) return fallback;
+  const value = obj[key];
+  return typeof value === "number" ? value : fallback;
+}
+function getOptions(field) {
+  if (!isRecord(field)) return null;
+  const options = field.options;
+  if (!Array.isArray(options)) return null;
+  if (!options.every(isFieldOption)) return null;
+  return options;
+}
+function getImageOptions(field) {
+  if (!isRecord(field)) return null;
+  const options = field.options;
+  if (!Array.isArray(options)) return null;
+  if (!options.every(isImageFieldOption)) return null;
+  return options;
+}
+function DynamicFormField({
+  field
+}) {
+  const {
+    getFieldValue,
+    getFieldError,
+    getFieldTouched,
+    setFieldValue,
+    handleChange,
+    handleBlur,
+    readonly
+  } = useDynamicForm();
+  const name = field.name;
+  const value = getFieldValue(name);
+  const error = getFieldError(name);
+  const touched = getFieldTouched(name);
+  const hasError = Boolean(error && touched);
+  const commonProps = {
+    name,
+    value: String(value || ""),
+    onChange: readonly ? void 0 : handleChange,
+    onBlur: readonly ? void 0 : handleBlur,
+    error: hasError,
+    disabled: readonly
+  };
+  const selectedValue = typeof value === "string" || typeof value === "number" ? String(value) : "";
+  switch (field.type) {
+    case "short_text":
+      return /* @__PURE__ */ jsx(
+        TextField.Root,
+        __spreadProps(__spreadValues({}, commonProps), {
+          placeholder: field.placeholder,
+          type: "text"
+        })
+      );
+    case "email":
+      return /* @__PURE__ */ jsx(
+        TextField.Root,
+        __spreadProps(__spreadValues({}, commonProps), {
+          placeholder: field.placeholder,
+          type: "email"
+        })
+      );
+    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({ rows: 4 }, commonProps), { placeholder: field.placeholder }));
+    case "dropdown":
+      return /* @__PURE__ */ jsxs(
+        Select.Root,
+        {
+          disabled: readonly,
+          onValueChange: readonly ? void 0 : (newValue) => {
+            void setFieldValue(name, newValue);
+          },
+          value: selectedValue,
+          children: [
+            /* @__PURE__ */ jsx(
+              Select.Trigger,
+              {
+                placeholder: field.placeholder,
+                style: {
+                  alignSelf: "flex-start",
+                  width: "fit-content",
+                  minWidth: "180px",
+                  maxWidth: "100%"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(Select.Content, { children: field.options.map((option) => /* @__PURE__ */ jsx(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
+          ]
+        }
+      );
+    case "choice":
+      return /* @__PURE__ */ jsx(
+        RadioGroup.Root,
+        {
+          disabled: readonly,
+          onValueChange: readonly ? void 0 : (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 "radio_cards": {
+      const options = getOptions(field);
+      if (!options) return null;
+      return /* @__PURE__ */ jsx(
+        RadioCards.Root,
+        {
+          disabled: readonly,
+          onValueChange: readonly ? void 0 : (newValue) => {
+            void setFieldValue(name, newValue);
+          },
+          value: selectedValue,
+          children: options.map((option) => /* @__PURE__ */ jsx(RadioCards.Item, { value: String(option.value), children: /* @__PURE__ */ jsx(Typo, { children: option.label }) }, option.value))
+        }
+      );
+    }
+    case "choices":
+      return /* @__PURE__ */ jsx(
+        CheckboxGroup.Root,
+        {
+          disabled: readonly,
+          onValueChange: readonly ? void 0 : (newValue) => {
+            void setFieldValue(name, newValue);
+          },
+          orientation: field.orientation,
+          value: Array.isArray(value) ? value.map(String) : [],
+          children: field.options.map((option) => /* @__PURE__ */ jsx(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
+        }
+      );
+    case "yes_no":
+      return /* @__PURE__ */ jsxs(Flex, { gap: "2", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: Boolean(value),
+            disabled: readonly,
+            onCheckedChange: readonly ? void 0 : (checked) => {
+              void setFieldValue(name, checked);
+            }
+          }
+        ),
+        field.description ? /* @__PURE__ */ jsx(Typo, { color: "gray", variant: "caption", children: field.description }) : null
+      ] });
+    case "image_radio_card": {
+      const options = getImageOptions(field);
+      if (!options) return null;
+      const gridColumnsCount = Math.max(1, getNumberProp(field, "gridColumnsCount", 4));
+      const gridColumns = getStringProp(
+        field,
+        "gridColumns",
+        `repeat(${gridColumnsCount}, 1fr)`
+      );
+      const gridItemHeight = getStringProp(field, "gridItemHeight", "100px");
+      const gridRows = getStringProp(field, "gridRows", gridItemHeight);
+      const gridGap = getStringProp(field, "gridGap", "2");
+      const imageFitRaw = getStringProp(field, "imageFit", "cover");
+      const imageFit = imageFitRaw === "contain" ? "contain" : "cover";
+      const handleValueChange = (newValue) => {
+        if (readonly) return;
+        const selectedOption = options.find(
+          (option) => String(option.value) === newValue
+        );
+        if (!selectedOption) return;
+        void setFieldValue(name, selectedOption.value);
+      };
+      return /* @__PURE__ */ jsx(
+        RadioCards.Root,
+        {
+          disabled: readonly,
+          onValueChange: readonly ? void 0 : handleValueChange,
+          value: selectedValue,
+          children: /* @__PURE__ */ jsx(Grid, { columns: gridColumns, gap: gridGap, rows: gridRows, children: options.map((option) => {
+            const optionValue = String(option.value);
+            const altText = option.alt || option.label;
+            return /* @__PURE__ */ jsx(
+              RadioCards.Item,
+              {
+                style: {
+                  padding: 0
+                },
+                value: optionValue,
+                children: /* @__PURE__ */ jsx(Inset, { style: { width: "100%", height: "100%", padding: 0 }, children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    alt: altText,
+                    src: option.imageSrc,
+                    style: {
+                      width: "100%",
+                      height: "100%",
+                      display: "block",
+                      objectFit: imageFit,
+                      opacity: readonly ? 0.7 : 1
+                    }
+                  }
+                ) })
+              },
+              optionValue
+            );
+          }) })
+        }
+      );
+    }
+    default:
+      return null;
+  }
+}
+
+export {
+  DynamicFormField
+};
+//# sourceMappingURL=chunk-7ITDAUWI.js.map

package/dist/chunk-7ITDAUWI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/dynamic-field.tsx"],"sourcesContent":["\nimport { Flex } from '@/atoms/flex';\nimport { Typo } from '@/atoms/typo';\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 { RadioCards } from '../atoms/radio-cards';\nimport { Grid } from '../atoms/grid';\nimport { Inset } from '../atoms/inset';\nimport type { DynamicFormFieldSchema } from '../types/dynamic-form-schema-generated';\n\ninterface FieldOption {\n  label: string;\n  value: string | number;\n}\n\ninterface ImageFieldOption extends FieldOption {\n  imageSrc: string;\n  alt?: string;\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return Boolean(value) && typeof value === 'object' && !Array.isArray(value);\n}\n\nfunction isFieldOption(value: unknown): value is FieldOption {\n  if (!isRecord(value)) return false;\n  const label = value.label;\n  const optionValue = value.value;\n  return (\n    typeof label === 'string' &&\n    (typeof optionValue === 'string' || typeof optionValue === 'number')\n  );\n}\n\nfunction isImageFieldOption(value: unknown): value is ImageFieldOption {\n  if (!isRecord(value)) return false;\n  if (!isFieldOption(value)) return false;\n  const imageSrc = value.imageSrc;\n  const alt = value.alt;\n  return (\n    typeof imageSrc === 'string' && (alt === undefined || typeof alt === 'string')\n  );\n}\n\nfunction getStringProp(obj: unknown, key: string, fallback: string): string {\n  if (!isRecord(obj)) return fallback;\n  const value = obj[key];\n  return typeof value === 'string' ? value : fallback;\n}\n\nfunction getNumberProp(obj: unknown, key: string, fallback: number): number {\n  if (!isRecord(obj)) return fallback;\n  const value = obj[key];\n  return typeof value === 'number' ? value : fallback;\n}\n\nfunction getOptions(field: unknown): FieldOption[] | null {\n  if (!isRecord(field)) return null;\n  const options = field.options;\n  if (!Array.isArray(options)) return null;\n  if (!options.every(isFieldOption)) return null;\n  return options;\n}\n\nfunction getImageOptions(field: unknown): ImageFieldOption[] | null {\n  if (!isRecord(field)) return null;\n  const options = field.options;\n  if (!Array.isArray(options)) return null;\n  if (!options.every(isImageFieldOption)) return null;\n  return options;\n}\n\ninterface DynamicFormFieldRendererProps {\n  field: DynamicFormFieldSchema;\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    readonly,\n  } = useDynamicForm();\n  const name = field.name;\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: readonly ? undefined : handleChange,\n    onBlur: readonly ? undefined : handleBlur,\n    error: hasError,\n    disabled: readonly,\n  };\n\n  const selectedValue: string =\n    typeof value === 'string' || typeof value === 'number' ? String(value) : '';\n\n  switch (field.type) {\n    case 'short_text':\n      return (\n        <TextField.Root\n          {...commonProps}\n          placeholder={field.placeholder}\n          type=\"text\"\n        />\n      );\n    case 'email':\n      return (\n        <TextField.Root\n          {...commonProps}\n          placeholder={field.placeholder}\n          type=\"email\"\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 rows={4} {...commonProps} placeholder={field.placeholder}  />;\n\n    case 'dropdown':\n      return (\n        <Select.Root\n          disabled={readonly}\n          onValueChange={readonly ? undefined : (newValue: string) => {\n            void setFieldValue(name, newValue);\n          }}\n          value={selectedValue}\n        >\n          <Select.Trigger\n            placeholder={field.placeholder}\n            style={{\n              alignSelf: 'flex-start',\n              width: 'fit-content',\n              minWidth: '180px',\n              maxWidth: '100%',\n            }}\n          />\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          disabled={readonly}\n          onValueChange={readonly ? undefined : (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 'radio_cards':\n      {\n        const options = getOptions(field);\n        if (!options) return null;\n\n        return (\n          <RadioCards.Root\n            disabled={readonly}\n            onValueChange={\n              readonly\n                ? undefined\n                : (newValue: string) => {\n                    void setFieldValue(name, newValue);\n                  }\n            }\n            value={selectedValue}\n          >\n            {options.map((option) => (\n              <RadioCards.Item key={option.value} value={String(option.value)}>\n                <Typo>{option.label}</Typo>\n              </RadioCards.Item>\n            ))}\n          </RadioCards.Root>\n        );\n      }\n\n    case 'choices':\n      return (\n        <CheckboxGroup.Root\n          disabled={readonly}\n          onValueChange={readonly ? undefined : (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 'yes_no':\n      return (\n        <Flex gap=\"2\">\n          <Checkbox\n            checked={Boolean(value)}\n            disabled={readonly}\n            onCheckedChange={readonly ? undefined : (checked: boolean) => {\n              void setFieldValue(name, checked);\n            }}\n          />\n          {field.description ? (\n            <Typo color=\"gray\" variant=\"caption\">\n              {field.description}\n            </Typo>\n          ) : null}\n        </Flex>\n      );\n\n    case 'image_radio_card': {\n      const options = getImageOptions(field);\n      if (!options) return null;\n\n      const gridColumnsCount = Math.max(1, getNumberProp(field, 'gridColumnsCount', 4));\n      const gridColumns = getStringProp(\n        field,\n        'gridColumns',\n        `repeat(${gridColumnsCount}, 1fr)`\n      );\n\n      const gridItemHeight = getStringProp(field, 'gridItemHeight', '100px');\n      const gridRows = getStringProp(field, 'gridRows', gridItemHeight);\n      const gridGap = getStringProp(field, 'gridGap', '2');\n      const imageFitRaw = getStringProp(field, 'imageFit', 'cover');\n      const imageFit: 'cover' | 'contain' =\n        imageFitRaw === 'contain' ? 'contain' : 'cover';\n\n      const handleValueChange = (newValue: string): void => {\n        if (readonly) return;\n        const selectedOption = options.find(\n          (option) => String(option.value) === newValue\n        );\n        if (!selectedOption) return;\n        void setFieldValue(name, selectedOption.value);\n      };\n\n      return (\n        <RadioCards.Root\n          disabled={readonly}\n          onValueChange={readonly ? undefined : handleValueChange}\n          value={selectedValue}\n        >\n          <Grid columns={gridColumns} gap={gridGap} rows={gridRows}>\n            {options.map((option) => {\n              const optionValue = String(option.value);\n              const altText: string = option.alt || option.label;\n\n              return (\n                <RadioCards.Item\n                  key={optionValue}\n                  style={{\n                    padding: 0,\n                  }}\n                  value={optionValue}\n                >\n                  <Inset style={{ width: '100%', height: '100%', padding: 0 }}>\n                    <img\n                      alt={altText}\n                      src={option.imageSrc}\n                      style={{\n                        width: '100%',\n                        height: '100%',\n                        display: 'block',\n                        objectFit: imageFit,\n                        opacity: readonly ? 0.7 : 1,\n                      }}\n                    />\n                  </Inset>\n                </RadioCards.Item>\n              );\n            })}\n          </Grid>\n        </RadioCards.Root>\n      );\n    }\n\n    default:\n      return null;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-7PQGETJT.js

@@ -0,0 +1,69 @@
+import {
+  review_question_radio_default
+} from "./chunk-GXG26SHU.js";
+import {
+  review_question_satisfaction_option_default
+} from "./chunk-JFJ3N4V5.js";
+import {
+  ReviewQuestionSatisfisText
+} from "./chunk-W7TBPRHG.js";
+import {
+  review_question_text_default
+} from "./chunk-O6LH7P6V.js";
+
+// src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-body.tsx
+import { jsx } from "react/jsx-runtime";
+function ReviewQuestionBody(props) {
+  const { question, answer, error, onChange } = props;
+  if (question.type === "question_radio") {
+    return /* @__PURE__ */ jsx(
+      review_question_radio_default,
+      {
+        answer,
+        error,
+        onChange,
+        question
+      }
+    );
+  }
+  if (question.type === "question_text") {
+    return /* @__PURE__ */ jsx(
+      review_question_text_default,
+      {
+        answer,
+        error,
+        onChange,
+        question
+      }
+    );
+  }
+  if (question.type === "question_satisfaction_option") {
+    return /* @__PURE__ */ jsx(
+      review_question_satisfaction_option_default,
+      {
+        answer,
+        error,
+        onChange,
+        question
+      }
+    );
+  }
+  if (question.type === "question_satisfaction_text") {
+    return /* @__PURE__ */ jsx(
+      ReviewQuestionSatisfisText,
+      {
+        answer,
+        error,
+        onChange,
+        question
+      }
+    );
+  }
+  return null;
+}
+var review_question_body_default = ReviewQuestionBody;
+
+export {
+  review_question_body_default
+};
+//# sourceMappingURL=chunk-7PQGETJT.js.map

package/dist/chunk-7PQGETJT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-body.tsx"],"sourcesContent":["import React from 'react'; \nimport type { ReviewQuestionElement } from '@/types/curriculum.type';\nimport ReviewQuestionRadio from './review-question-radio';\nimport ReviewQuestionText from './review-question-text';\nimport ReviewQuestionSatisfactionOption from './review-question-satisfaction-option';\nimport ReviewQuestionSatisfactionText from './review-question-satisfaction-text';\n\ninterface ReviewQuestionBodyProps {\n  question: ReviewQuestionElement;\n  answer: string;\n  error?: string;\n  onChange: (value: string) => void;\n}\n\nfunction ReviewQuestionBody(props: ReviewQuestionBodyProps): React.ReactNode {\n  const { question, answer, error, onChange } = props;\n  \n  if (question.type === 'question_radio') {\n    return (\n      <ReviewQuestionRadio\n        answer={answer}\n        error={error}\n        onChange={onChange}\n        question={question}\n      />\n    );\n  }\n  if (question.type === 'question_text') {\n    return (\n      <ReviewQuestionText\n        answer={answer}\n        error={error}\n        onChange={onChange}\n        question={question}\n      />\n    );\n  }\n  if (question.type === 'question_satisfaction_option') {\n    return (\n      <ReviewQuestionSatisfactionOption\n        answer={answer}\n        error={error}\n        onChange={onChange}\n        question={question}\n      />\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- 그 외의 타입이 있을 경우 있음\n  if (question.type === 'question_satisfaction_text') {\n    return (\n      <ReviewQuestionSatisfactionText\n        answer={answer}\n        error={error}\n        onChange={onChange}\n        question={question}\n      />\n    );\n  }\n\n  return null;\n}\nexport default ReviewQuestionBody;\n"],"mappings":";;;;;;;;;;;;;;AAmBM;AALN,SAAS,mBAAmB,OAAiD;AAC3E,QAAM,EAAE,UAAU,QAAQ,OAAO,SAAS,IAAI;AAE9C,MAAI,SAAS,SAAS,kBAAkB;AACtC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AACA,MAAI,SAAS,SAAS,iBAAiB;AACrC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AACA,MAAI,SAAS,SAAS,gCAAgC;AACpD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AAGA,MAAI,SAAS,SAAS,8BAA8B;AAClD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SAAO;AACT;AACA,IAAO,+BAAQ;","names":[]}

package/dist/chunk-7R65MUL6.js

@@ -0,0 +1,106 @@
+import {
+  getFieldTypeLabel
+} from "./chunk-Z7WNKARH.js";
+import {
+  Select
+} from "./chunk-X2GMDZ7M.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
+import {
+  Typo
+} from "./chunk-PMJIFLDT.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+
+// src/molecules/dynamic-form-editor-field-list-panel.tsx
+import { useMemo } from "react";
+import { Box } from "@radix-ui/themes";
+import { jsx, jsxs } from "react/jsx-runtime";
+function isFieldType(value, types) {
+  return types.some((t) => t === value);
+}
+function DynamicFormEditorFieldListPanel(props) {
+  const {
+    fields,
+    selectedFieldName,
+    readonly,
+    fieldTypes,
+    hasFieldError,
+    onSelectFieldName,
+    onAddField
+  } = props;
+  const isEmpty = fields.length === 0;
+  const triggerPlaceholder = useMemo(() => {
+    return readonly ? "\uCD94\uAC00(\uC77D\uAE30 \uC804\uC6A9)" : "\uCD94\uAC00";
+  }, [readonly]);
+  return /* @__PURE__ */ jsx(Card, { style: { width: 340, padding: 12 }, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "3", children: [
+    /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", children: [
+      /* @__PURE__ */ jsx(Typo, { variant: "body", children: "\uD544\uB4DC" }),
+      /* @__PURE__ */ jsxs(
+        Select.Root,
+        {
+          disabled: readonly,
+          onValueChange: (v) => {
+            if (!isFieldType(v, fieldTypes)) return;
+            onAddField(v);
+          },
+          value: "",
+          children: [
+            /* @__PURE__ */ jsx(Select.Trigger, { placeholder: triggerPlaceholder }),
+            /* @__PURE__ */ jsx(Select.Content, { children: fieldTypes.map((t) => /* @__PURE__ */ jsx(Select.Item, { value: t, children: getFieldTypeLabel(t) }, t)) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+      isEmpty ? /* @__PURE__ */ jsx(Typo, { color: "gray", variant: "caption", children: "\uC544\uC9C1 \uD544\uB4DC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : null,
+      fields.map((field) => {
+        const isSelected = field.name === selectedFieldName;
+        const hasError = hasFieldError(field.name);
+        return /* @__PURE__ */ jsx(
+          Card,
+          {
+            error: isSelected ? hasError : void 0,
+            onClick: () => {
+              onSelectFieldName(field.name);
+            },
+            style: {
+              padding: 10,
+              cursor: "pointer",
+              opacity: readonly ? 0.8 : 1,
+              border: isSelected ? "1px solid var(--accent-9)" : "1px solid transparent"
+            },
+            children: /* @__PURE__ */ jsxs(Box, { style: { minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx(
+                Typo,
+                {
+                  style: {
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis"
+                  },
+                  variant: "body",
+                  children: field.label
+                }
+              ),
+              /* @__PURE__ */ jsxs(Typo, { color: "gray", variant: "caption", children: [
+                field.name,
+                " \xB7 ",
+                field.type,
+                field.required ? " \xB7 required" : ""
+              ] })
+            ] })
+          },
+          field.name
+        );
+      })
+    ] })
+  ] }) });
+}
+
+export {
+  DynamicFormEditorFieldListPanel
+};
+//# sourceMappingURL=chunk-7R65MUL6.js.map

package/dist/chunk-7R65MUL6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/dynamic-form-editor-field-list-panel.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Box } from '@radix-ui/themes';\nimport { Card } from '@/atoms/card';\nimport { Flex } from '@/atoms/flex';\nimport { Select } from '@/atoms/select';\nimport { Typo } from '@/atoms/typo';\nimport type { DynamicFormFieldSchema } from '@/types/dynamic-form-schema-generated';\nimport { getFieldTypeLabel, type FieldType } from './dynamic-form-editor-utils';\n\nfunction isFieldType(value: string, types: FieldType[]): value is FieldType {\n  return types.some((t) => t === value);\n}\n\nexport interface DynamicFormEditorFieldListPanelProps {\n  fields: DynamicFormFieldSchema[];\n  selectedFieldName: string | null;\n  readonly: boolean;\n  fieldTypes: FieldType[];\n  hasFieldError: (fieldName: string) => boolean;\n  onSelectFieldName: (fieldName: string) => void;\n  onAddField: (type: FieldType) => void;\n}\n\nexport function DynamicFormEditorFieldListPanel(\n  props: DynamicFormEditorFieldListPanelProps\n): React.ReactElement {\n  const {\n    fields,\n    selectedFieldName,\n    readonly,\n    fieldTypes,\n    hasFieldError,\n    onSelectFieldName,\n    onAddField,\n  } = props;\n\n  const isEmpty: boolean = fields.length === 0;\n\n  const triggerPlaceholder: string = useMemo(() => {\n    return readonly ? '추가(읽기 전용)' : '추가';\n  }, [readonly]);\n\n  return (\n    <Card style={{ width: 340, padding: 12 }}>\n      <Flex direction=\"column\" gap=\"3\">\n        <Flex align=\"center\" justify=\"between\">\n          <Typo variant=\"body\">필드</Typo>\n          <Select.Root\n            disabled={readonly}\n            onValueChange={(v: string): void => {\n              if (!isFieldType(v, fieldTypes)) return;\n              onAddField(v);\n            }}\n            value=\"\"\n          >\n            <Select.Trigger placeholder={triggerPlaceholder} />\n            <Select.Content>\n              {fieldTypes.map((t) => (\n                <Select.Item key={t} value={t}>\n                  {getFieldTypeLabel(t)}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select.Root>\n        </Flex>\n\n        <Flex direction=\"column\" gap=\"2\">\n          {isEmpty ? (\n            <Typo color=\"gray\" variant=\"caption\">\n              아직 필드가 없습니다.\n            </Typo>\n          ) : null}\n\n          {fields.map((field) => {\n            const isSelected: boolean = field.name === selectedFieldName;\n            const hasError: boolean = hasFieldError(field.name);\n\n            return (\n              <Card\n                error={isSelected ? hasError : undefined}\n                key={field.name}\n                onClick={(): void => { onSelectFieldName(field.name); }}\n                style={{\n                  padding: 10,\n                  cursor: 'pointer',\n                  opacity: readonly ? 0.8 : 1,\n                  border: isSelected\n                    ? '1px solid var(--accent-9)'\n                    : '1px solid transparent',\n                }}\n              >\n                <Box style={{ minWidth: 0 }}>\n                  <Typo\n                    style={{\n                      whiteSpace: 'nowrap',\n                      overflow: 'hidden',\n                      textOverflow: 'ellipsis',\n                    }}\n                    variant=\"body\"\n                  >\n                    {field.label}\n                  </Typo>\n                  <Typo color=\"gray\" variant=\"caption\">\n                    {field.name} · {field.type}\n                    {field.required ? ' · required' : ''}\n                  </Typo>\n                </Box>\n              </Card>\n            );\n          })}\n        </Flex>\n      </Flex>\n    </Card>\n  );\n}\n\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,SAAgB,eAAe;AAC/B,SAAS,WAAW;AA6CV,cACA,YADA;AArCV,SAAS,YAAY,OAAe,OAAwC;AAC1E,SAAO,MAAM,KAAK,CAAC,MAAM,MAAM,KAAK;AACtC;AAYO,SAAS,gCACd,OACoB;AACpB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,UAAmB,OAAO,WAAW;AAE3C,QAAM,qBAA6B,QAAQ,MAAM;AAC/C,WAAO,WAAW,4CAAc;AAAA,EAClC,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE,oBAAC,QAAK,OAAO,EAAE,OAAO,KAAK,SAAS,GAAG,GACrC,+BAAC,QAAK,WAAU,UAAS,KAAI,KAC3B;AAAA,yBAAC,QAAK,OAAM,UAAS,SAAQ,WAC3B;AAAA,0BAAC,QAAK,SAAQ,QAAO,0BAAE;AAAA,MACvB;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,UAAU;AAAA,UACV,eAAe,CAAC,MAAoB;AAClC,gBAAI,CAAC,YAAY,GAAG,UAAU,EAAG;AACjC,uBAAW,CAAC;AAAA,UACd;AAAA,UACA,OAAM;AAAA,UAEN;AAAA,gCAAC,OAAO,SAAP,EAAe,aAAa,oBAAoB;AAAA,YACjD,oBAAC,OAAO,SAAP,EACE,qBAAW,IAAI,CAAC,MACf,oBAAC,OAAO,MAAP,EAAoB,OAAO,GACzB,4BAAkB,CAAC,KADJ,CAElB,CACD,GACH;AAAA;AAAA;AAAA,MACF;AAAA,OACF;AAAA,IAEA,qBAAC,QAAK,WAAU,UAAS,KAAI,KAC1B;AAAA,gBACC,oBAAC,QAAK,OAAM,QAAO,SAAQ,WAAU,uEAErC,IACE;AAAA,MAEH,OAAO,IAAI,CAAC,UAAU;AACrB,cAAM,aAAsB,MAAM,SAAS;AAC3C,cAAM,WAAoB,cAAc,MAAM,IAAI;AAElD,eACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,aAAa,WAAW;AAAA,YAE/B,SAAS,MAAY;AAAE,gCAAkB,MAAM,IAAI;AAAA,YAAG;AAAA,YACtD,OAAO;AAAA,cACL,SAAS;AAAA,cACT,QAAQ;AAAA,cACR,SAAS,WAAW,MAAM;AAAA,cAC1B,QAAQ,aACJ,8BACA;AAAA,YACN;AAAA,YAEA,+BAAC,OAAI,OAAO,EAAE,UAAU,EAAE,GACxB;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO;AAAA,oBACL,YAAY;AAAA,oBACZ,UAAU;AAAA,oBACV,cAAc;AAAA,kBAChB;AAAA,kBACA,SAAQ;AAAA,kBAEP,gBAAM;AAAA;AAAA,cACT;AAAA,cACA,qBAAC,QAAK,OAAM,QAAO,SAAQ,WACxB;AAAA,sBAAM;AAAA,gBAAK;AAAA,gBAAI,MAAM;AAAA,gBACrB,MAAM,WAAW,mBAAgB;AAAA,iBACpC;AAAA,eACF;AAAA;AAAA,UA1BK,MAAM;AAAA,QA2Bb;AAAA,MAEJ,CAAC;AAAA,OACH;AAAA,KACF,GACF;AAEJ;","names":[]}