@tipp/ui 2.3.21 → 2.3.23

package/src/constrant/dynamic-form-schema.json

@@ -34,6 +34,16 @@
       },
       "required": ["label", "value"]
     },
+    "ImageFieldOption": {
+      "type": "object",
+      "properties": {
+        "label": { "type": "string" },
+        "value": { "oneOf": [{ "type": "string" }, { "type": "number" }] },
+        "imageSrc": { "type": "string" },
+        "alt": { "type": "string" }
+      },
+      "required": ["label", "value", "imageSrc"]
+    },
     "ValidationRule": {
       "type": "object",
       "properties": {
@@ -57,6 +67,13 @@
       },
       "required": ["options"]
     },
+    "ImageOptionFieldCommon": {
+      "type": "object",
+      "properties": {
+        "options": { "type": "array", "items": { "$ref": "#/definitions/ImageFieldOption" } }
+      },
+      "required": ["options"]
+    },
     "OrientationFieldCommon": {
       "type": "object",
       "properties": {
@@ -137,6 +154,42 @@
         }
       ]
     },
+    "RadioCardsField": {
+      "allOf": [
+        { "$ref": "#/definitions/FieldBaseType" },
+        { "$ref": "#/definitions/OptionFieldCommon" },
+        {
+          "properties": {
+            "type": { "const": "radio_cards" }
+          },
+          "required": ["type"]
+        }
+      ]
+    },
+    "ImageRadioCardLayoutCommon": {
+      "type": "object",
+      "properties": {
+        "gridColumnsCount": { "type": "number", "minimum": 1, "default": 4 },
+        "gridItemHeight": { "type": "string", "default": "100px" },
+        "gridColumns": { "type": "string", "default": "repeat(4, 1fr)" },
+        "gridRows": { "type": "string", "default": "100px" },
+        "gridGap": { "type": "string", "default": "2" },
+        "imageFit": { "type": "string", "enum": ["cover", "contain"], "default": "cover" }
+      }
+    },
+    "ImageRadioCardField": {
+      "allOf": [
+        { "$ref": "#/definitions/FieldBaseType" },
+        { "$ref": "#/definitions/ImageOptionFieldCommon" },
+        { "$ref": "#/definitions/ImageRadioCardLayoutCommon" },
+        {
+          "properties": {
+            "type": { "const": "image_radio_card" }
+          },
+          "required": ["type"]
+        }
+      ]
+    },
     "ChoicesField": {
       "allOf": [
         { "$ref": "#/definitions/FieldBaseType" },
@@ -169,6 +222,8 @@
         { "$ref": "#/definitions/EmailField" },
         { "$ref": "#/definitions/DropdownField" },
         { "$ref": "#/definitions/ChoiceField" },
+        { "$ref": "#/definitions/RadioCardsField" },
+        { "$ref": "#/definitions/ImageRadioCardField" },
         { "$ref": "#/definitions/ChoicesField" },
         { "$ref": "#/definitions/YesNoField" }
       ]

package/src/icon.ts

@@ -65,7 +65,8 @@ export {
   QuoteIcon,
   FilePlusIcon,
   QuestionMarkCircledIcon,
-  FaceIcon
+  FaceIcon,
+  ImageIcon
 } from '@radix-ui/react-icons';
 
 export * from './icons';

package/src/molecules/curriculumV2/CurriculumContents/curriculum-video.tsx

@@ -43,15 +43,15 @@ function CurriculumVideo(props: CurriculumVideoProps): React.ReactNode {
       ) : null}
       <iframe
         allowFullScreen
+        onError={() => {
+          setIsLoading(false);
+        }} // 필요시 에러 메시지로 대체
         onLoad={() => {
           setIsLoading(false);
         }}
         src={`${url}?theme=light`}
         style={{ width: '100%', height: '100%', border: 'none' }}
         title="Curriculum Video"
-        onError={() => {
-          setIsLoading(false);
-        }} // 필요시 에러 메시지로 대체
       />
     </Flex>
   );

package/src/molecules/curriculumV2/curriculum-context.tsx

@@ -267,7 +267,6 @@ export function CurriculumProvider(
     if (!inBounds) return;
 
     const item: CurriculumListContents = list[selectedIndexState];
-    if (!item) return;
     if (item.type === 'sectionTitle') return;
 
     onChangeSelectedContent?.(item);

package/src/molecules/description-json-render.tsx

@@ -3,7 +3,7 @@ import { Box } from '@/atoms/box';
 import { Callout } from '@/atoms/call-out';
 import { List } from '@/atoms/list';
 import { Typo } from '@/atoms/typo';
-import { getCalloutIconComponent } from '@/utils/getCalloutIconComponent';
+import { getCalloutIconComponent } from '@/utils/get-callout-icon-component';
 
 export type DescriptionBlockType = 'callout' | 'typo' | 'bullet-list';
 

package/src/molecules/dynamic-field.tsx

@@ -8,8 +8,73 @@ import { Select } from '../atoms/select';
 import { CheckboxGroup } from '../atoms/check-box-group';
 import { RadioGroup } from '../atoms/radio-group';
 import { Checkbox } from '../atoms/check-box';
+import { RadioCards } from '../atoms/radio-cards';
+import { Grid } from '../atoms/grid';
+import { Inset } from '../atoms/inset';
 import type { DynamicFormFieldSchema } from '../types/dynamic-form-schema-generated';
 
+interface FieldOption {
+  label: string;
+  value: string | number;
+}
+
+interface ImageFieldOption extends FieldOption {
+  imageSrc: string;
+  alt?: string;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+
+function isFieldOption(value: unknown): value is FieldOption {
+  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: unknown): value is ImageFieldOption {
+  if (!isRecord(value)) return false;
+  if (!isFieldOption(value)) return false;
+  const imageSrc = value.imageSrc;
+  const alt = value.alt;
+  return (
+    typeof imageSrc === 'string' && (alt === undefined || typeof alt === 'string')
+  );
+}
+
+function getStringProp(obj: unknown, key: string, fallback: string): string {
+  if (!isRecord(obj)) return fallback;
+  const value = obj[key];
+  return typeof value === 'string' ? value : fallback;
+}
+
+function getNumberProp(obj: unknown, key: string, fallback: number): number {
+  if (!isRecord(obj)) return fallback;
+  const value = obj[key];
+  return typeof value === 'number' ? value : fallback;
+}
+
+function getOptions(field: unknown): FieldOption[] | null {
+  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: unknown): ImageFieldOption[] | null {
+  if (!isRecord(field)) return null;
+  const options = field.options;
+  if (!Array.isArray(options)) return null;
+  if (!options.every(isImageFieldOption)) return null;
+  return options;
+}
+
 interface DynamicFormFieldRendererProps {
   field: DynamicFormFieldSchema;
 }
@@ -26,7 +91,7 @@ export function DynamicFormField({
     handleBlur,
     readonly,
   } = useDynamicForm();
-  const { name, type } = field;
+  const name = field.name;
 
   const value = getFieldValue(name);
   const error = getFieldError(name);
@@ -42,14 +107,24 @@ export function DynamicFormField({
     disabled: readonly,
   };
 
-  switch (type) {
+  const selectedValue: string =
+    typeof value === 'string' || typeof value === 'number' ? String(value) : '';
+
+  switch (field.type) {
     case 'short_text':
+      return (
+        <TextField.Root
+          {...commonProps}
+          placeholder={field.placeholder}
+          type="text"
+        />
+      );
     case 'email':
       return (
-        <TextField.Root 
-          {...commonProps} 
+        <TextField.Root
+          {...commonProps}
           placeholder={field.placeholder}
-          type={type === 'short_text' ? 'text' : type}
+          type="email"
         />
       );
     case 'number':
@@ -72,9 +147,17 @@ export function DynamicFormField({
           onValueChange={readonly ? undefined : (newValue: string) => {
             void setFieldValue(name, newValue);
           }}
-          value={value as string}
+          value={selectedValue}
         >
-          <Select.Trigger placeholder={field.placeholder} />
+          <Select.Trigger
+            placeholder={field.placeholder}
+            style={{
+              alignSelf: 'flex-start',
+              width: 'fit-content',
+              minWidth: '180px',
+              maxWidth: '100%',
+            }}
+          />
           <Select.Content>
             {field.options.map((option) => (
               <Select.Item key={option.value} value={String(option.value)}>
@@ -103,6 +186,32 @@ export function DynamicFormField({
         </RadioGroup.Root>
       );
 
+    case 'radio_cards':
+      {
+        const options = getOptions(field);
+        if (!options) return null;
+
+        return (
+          <RadioCards.Root
+            disabled={readonly}
+            onValueChange={
+              readonly
+                ? undefined
+                : (newValue: string) => {
+                    void setFieldValue(name, newValue);
+                  }
+            }
+            value={selectedValue}
+          >
+            {options.map((option) => (
+              <RadioCards.Item key={option.value} value={String(option.value)}>
+                <Typo>{option.label}</Typo>
+              </RadioCards.Item>
+            ))}
+          </RadioCards.Root>
+        );
+      }
+
     case 'choices':
       return (
         <CheckboxGroup.Root
@@ -139,6 +248,73 @@ export function DynamicFormField({
         </Flex>
       );
 
+    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: 'cover' | 'contain' =
+        imageFitRaw === 'contain' ? 'contain' : 'cover';
+
+      const handleValueChange = (newValue: string): void => {
+        if (readonly) return;
+        const selectedOption = options.find(
+          (option) => String(option.value) === newValue
+        );
+        if (!selectedOption) return;
+        void setFieldValue(name, selectedOption.value);
+      };
+
+      return (
+        <RadioCards.Root
+          disabled={readonly}
+          onValueChange={readonly ? undefined : handleValueChange}
+          value={selectedValue}
+        >
+          <Grid columns={gridColumns} gap={gridGap} rows={gridRows}>
+            {options.map((option) => {
+              const optionValue = String(option.value);
+              const altText: string = option.alt || option.label;
+
+              return (
+                <RadioCards.Item
+                  key={optionValue}
+                  style={{
+                    padding: 0,
+                  }}
+                  value={optionValue}
+                >
+                  <Inset style={{ width: '100%', height: '100%', padding: 0 }}>
+                    <img
+                      alt={altText}
+                      src={option.imageSrc}
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        display: 'block',
+                        objectFit: imageFit,
+                        opacity: readonly ? 0.7 : 1,
+                      }}
+                    />
+                  </Inset>
+                </RadioCards.Item>
+              );
+            })}
+          </Grid>
+        </RadioCards.Root>
+      );
+    }
+
     default:
       return null;
   }