@rchemist/listgrid 0.2.6

package/dist/listgrid/components/fields/view/XrefPriorityMappingView.js

@@ -0,0 +1,180 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Paper } from '../../../ui';
+import { ViewListGrid } from '../../list/ViewListGrid';
+import { ListGrid } from '../../../config/ListGrid';
+import { SearchForm } from '../../../form/SearchForm';
+import { isEmpty } from '../../../utils';
+import { isTrue } from '../../../utils/BooleanUtil';
+import { useModalManagerStore } from '../../../store';
+export const XrefPriorityMappingView = ({ entityForm, excludeId, add, parentEntityForm, ...props }) => {
+    const readonly = props.readonly ?? false;
+    const label = props.label;
+    const { openModal, closeModal } = useModalManagerStore();
+    const [value, setValue] = useState(props.value);
+    const [listKey, setListKey] = useState('init');
+    const mappingValue = {};
+    if (value !== undefined) {
+        mappingValue.mapped = value.mapped ?? [];
+    }
+    const [filters, setFilters] = useState([]);
+    useEffect(() => {
+        if (props.filters) {
+            (async () => {
+                if (typeof props.filters === 'function') {
+                    const filters = await props.filters(entityForm, parentEntityForm);
+                    setFilters(filters);
+                }
+                else {
+                    setFilters(props.filters ?? []);
+                }
+            })();
+        }
+    }, [props.filters]);
+    // Lookup 으로 찾기를 실행했을 때 표시할 그리드
+    const searchForm = new SearchForm();
+    if (excludeId) {
+        // excludeId 값이 있다면 해당 조건을 추가한다.
+        searchForm.withFilter('AND', { name: 'id', queryConditionType: 'NOT_EQUAL', value: excludeId });
+    }
+    // 현재 매핑된 정보만 표시하는 서치폼
+    const viewSearchForm = new SearchForm().withPageSize(1000);
+    if (mappingValue.mapped !== undefined && mappingValue.mapped.length > 0) {
+        // 이미 매핑된 정보는 확인할 수 없게 한다.
+        const idList = mappingValue.mapped.map((m) => m.id);
+        searchForm.withFilter('AND', { name: 'id', queryConditionType: 'NOT_IN', values: idList });
+        // viewSearchForm 에서는 이미 매핑된 정보만 표시되도록 한다.
+        viewSearchForm.withFilter('AND', { name: 'id', queryConditionType: 'IN', values: idList });
+    }
+    else {
+        // viewSearchForm 은 반드시 empty 를 리턴하게 한다.
+        viewSearchForm.withShouldReturnEmpty(true);
+    }
+    if (filters.length > 0) {
+        searchForm.withFilter('AND', ...filters);
+        viewSearchForm.withFilter('AND', ...filters);
+    }
+    return (_jsx("div", { className: 'w-full', children: _jsx(ViewListGrid, { listGrid: new ListGrid(entityForm).withSearchForm(viewSearchForm), options: {
+                hideTitle: true,
+                filterable: false,
+                sortable: false,
+                onFetched: async (pageResult) => {
+                    if (!isEmpty(pageResult.list)) {
+                        // mappingValue 의 순서대로 결과를 재정렬한다.
+                        const newList = [];
+                        mappingValue.mapped?.forEach((mapped) => {
+                            for (const item of pageResult.list) {
+                                if (mapped.id === item.id) {
+                                    newList.push(item);
+                                    break;
+                                }
+                            }
+                        });
+                        pageResult.list = newList;
+                    }
+                    return pageResult;
+                },
+                onDrag: (idList) => {
+                    if (!isEmpty(idList)) {
+                        const newValue = { mapped: value.mapped };
+                        // how to sort mapped.id === idList[index]
+                        newValue.mapped = newValue.mapped?.sort((a, b) => {
+                            const aIndex = idList.indexOf(a.id);
+                            const bIndex = idList.indexOf(b.id);
+                            return aIndex - bIndex;
+                            // return a.priority - b.priority;
+                        });
+                        newValue.mapped?.forEach((m, index) => {
+                            m.priority = index + 1;
+                        });
+                        setValue(newValue);
+                        props.onChange(newValue, false);
+                    }
+                },
+                delete: {
+                    onDelete: async (_entityForm, _rows, checkedItems) => {
+                        if (!isEmpty(checkedItems)) {
+                            onDelete(checkedItems);
+                        }
+                        return Promise.resolve({ entityForm: _entityForm });
+                    },
+                },
+                subCollection: {
+                    add: readonly ? false : isTrue(add),
+                    delete: !readonly,
+                    modifyOnView: false,
+                    buttons: [
+                        () => readonly ? null : (_jsx("button", { type: "button", className: `btn btn-outline-secondary h-[34px]`, disabled: readonly, onClick: () => {
+                                const modalId = `xref-priority-mapping-${props.name}`;
+                                openModal({
+                                    modalId,
+                                    title: String(label || '선택'),
+                                    size: '2xl',
+                                    content: (_jsx(Paper, { children: _jsx(ViewListGrid, { listGrid: new ListGrid(entityForm).withSearchForm(searchForm), options: {
+                                                readonly: true,
+                                                popup: true,
+                                                hideTitle: true,
+                                                onSelect: (item) => {
+                                                    // Single row click: add one item and close modal
+                                                    onChange(item.id);
+                                                    closeModal(modalId);
+                                                },
+                                                selection: {
+                                                    enabled: true,
+                                                    actions: [
+                                                        {
+                                                            label: '선택 완료',
+                                                            onClick: async (_entityForm, checkedItems) => {
+                                                                onChangeMultiple(checkedItems);
+                                                                closeModal(modalId);
+                                                            },
+                                                            color: 'primary',
+                                                        },
+                                                    ],
+                                                    deleteButton: false,
+                                                },
+                                            } }) })),
+                                });
+                            }, children: "\uC120\uD0DD" })),
+                    ],
+                },
+            } }, listKey) }));
+    function onChange(id) {
+        if (mappingValue.mapped === undefined) {
+            mappingValue.mapped = [];
+        }
+        mappingValue.mapped = mappingValue.mapped.filter((x) => x.id !== id);
+        const newPriority = mappingValue.mapped.length + 1;
+        mappingValue.mapped = [...mappingValue.mapped, { id: id, priority: newPriority }];
+        setValue({ ...mappingValue });
+        setListKey(new Date().getTime().toString());
+        props.onChange(mappingValue, false);
+    }
+    function onChangeMultiple(ids) {
+        if (mappingValue.mapped === undefined) {
+            mappingValue.mapped = [];
+        }
+        for (const id of ids) {
+            mappingValue.mapped = mappingValue.mapped.filter((x) => x.id !== id);
+            const newPriority = mappingValue.mapped.length + 1;
+            mappingValue.mapped = [...mappingValue.mapped, { id: id, priority: newPriority }];
+        }
+        setValue({ ...mappingValue });
+        setListKey(new Date().getTime().toString());
+        props.onChange(mappingValue, false);
+    }
+    function onDelete(idList) {
+        if (mappingValue.mapped === undefined) {
+            mappingValue.mapped = [];
+        }
+        mappingValue.mapped = mappingValue.mapped.filter((x) => !idList.includes(x.id));
+        // priority 재설정
+        mappingValue.mapped.forEach((m, index) => {
+            m.priority = index + 1;
+        });
+        setValue({ ...mappingValue });
+        setListKey(new Date().getTime().toString());
+        props.onChange(mappingValue, false);
+    }
+};

package/dist/listgrid/components/form/FieldRenderer.d.ts

@@ -0,0 +1,23 @@
+import { FormField } from '../fields/abstract';
+import { EntityFormManageable } from './types/ViewEntityForm.types';
+import { Session } from '../../auth/types';
+/**
+ * FieldRenderer component
+ * - Renders a single FormField in EntityForm, including label, tooltip, help, error, and value view.
+ * - Handles value change, validation, error display, and many-to-one link rendering.
+ *
+ * FieldRenderer 컴포넌트
+ * - EntityForm의 단일 FormField를 렌더링합니다. (라벨, 툴팁, 도움말, 에러, 값 뷰 포함)
+ * - 값 변경, 검증, 에러 표시, many-to-one 링크 렌더링을 처리합니다.
+ *
+ * @param props {FieldRendererProps} - 필드, EntityForm, 상태 setter 등
+ * @returns {JSX.Element} - 렌더링 결과
+ */
+interface FieldRendererProps extends EntityFormManageable {
+    field: FormField<any>;
+    subCollectionEntity?: boolean;
+    session?: Session;
+    resetEntityForm?: (delay?: number, preserveState?: boolean) => Promise<void>;
+}
+export declare const FieldRenderer: (props: FieldRendererProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/listgrid/components/form/FieldRenderer.js

@@ -0,0 +1,292 @@
+'use client';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AbstractManyToOneField } from '../fields/abstract';
+import React, { useCallback, useEffect, useId, useState } from 'react';
+import { ViewFieldError } from './ui/ViewFieldError';
+import { ViewHelpText } from './ui/ViewHelpText';
+import { Icon } from '@iconify/react';
+import { isTrue } from '../../utils/BooleanUtil';
+import { isBlank } from '../../utils/StringUtil';
+import { IconHelp } from '@tabler/icons-react';
+import { Tooltip } from '../../ui';
+import { useLoadingStore } from '../../loading';
+import { getTranslation } from '../../utils/i18n';
+import { getManyToOneLink } from '../helper/FieldRendererHelper';
+import { useEntityFormTheme } from './context/EntityFormThemeContext';
+export const FieldRenderer = (props) => {
+    const { t } = getTranslation();
+    const { classNames, cn, getFieldRenderer } = useEntityFormTheme();
+    const entityForm = props.entityForm;
+    const setEntityForm = props.setEntityForm;
+    const field = props.field;
+    const subCollectionEntity = isTrue(props.subCollectionEntity, false);
+    const { setOpenBaseLoading } = useLoadingStore();
+    // Generate unique ID per component instance to prevent ID collision between parent and modal forms
+    const instanceId = useId();
+    // 필드 렌더링에 필요한 상태들
+    // State for rendering the field
+    const [version, setVersion] = React.useState();
+    const [view, setView] = useState();
+    const [errors, setErrors] = useState([]);
+    const [required, setRequired] = useState(false);
+    const [_readonly, setReadonly] = useState();
+    const [tooltip, setTooltip] = useState('');
+    const [helpText, setHelpText] = useState('');
+    const [_placeHolder, setPlaceHolder] = useState('');
+    const [manyToOneLink, setManyToOneLink] = useState(null);
+    const [dirty, setDirty] = useState(false);
+    // 커스텀 렌더러용 현재 필드 값
+    const [currentValue, setCurrentValue] = useState();
+    // 커스텀 필드 렌더러 확인
+    const CustomFieldRenderer = getFieldRenderer(field.getName());
+    // 커스텀 렌더러용 onChange 핸들러
+    const handleFieldChange = useCallback((value, propagation) => {
+        (async () => {
+            const fieldName = field.getName();
+            const currentScroll = window.scrollY;
+            setErrors([]);
+            setCurrentValue(value);
+            const isPropagation = isTrue(propagation, true);
+            let cloned = entityForm.clone(true);
+            cloned.setValue(fieldName, value);
+            cloned.clearAlertMessages(false);
+            const updatedField = cloned.fields.get(fieldName);
+            setDirty(updatedField?.isDirty() ?? false);
+            const validationErrors = await cloned.validate({
+                fieldNames: [fieldName],
+                ...(props.session !== undefined ? { session: props.session } : {}),
+            });
+            cloned.mergeError(fieldName, validationErrors);
+            let changed = false;
+            if (isPropagation) {
+                if (cloned.onChanges && cloned.onChanges.length > 0) {
+                    for (const onChange of cloned.onChanges) {
+                        try {
+                            cloned = await onChange(cloned, fieldName);
+                            if (isTrue(cloned.shouldReload)) {
+                                changed = true;
+                            }
+                        }
+                        catch (e) {
+                            console.error(e);
+                        }
+                    }
+                }
+            }
+            const manyToOneField = cloned.getField(fieldName);
+            setManyToOneLink(await getManyToOneLink(cloned.getRenderType(), manyToOneField));
+            if (changed || manyToOneField instanceof AbstractManyToOneField) {
+                setEntityForm?.(cloned);
+            }
+            else {
+                entityForm.merge(cloned);
+                setEntityForm?.(entityForm);
+            }
+            requestAnimationFrame(() => {
+                if (Math.abs(window.scrollY - currentScroll) > 0) {
+                    setOpenBaseLoading(true);
+                    window.scrollTo({
+                        top: currentScroll,
+                        behavior: 'instant',
+                    });
+                    setTimeout(() => {
+                        setOpenBaseLoading(false);
+                    }, 50);
+                }
+            });
+        })();
+    }, [entityForm, setEntityForm, field, props.session, setOpenBaseLoading]);
+    // 커스텀 렌더러용 onError 핸들러
+    const handleFieldError = useCallback((message) => {
+        if (isBlank(message))
+            return;
+        const newErrors = [message];
+        setErrors(newErrors);
+        const errors = entityForm.errors ? [...entityForm.errors] : [];
+        errors.push({
+            name: field.name,
+            label: field.label,
+            errors: newErrors,
+        });
+        const cloned = entityForm.clone(true).withErrors(errors);
+        setEntityForm?.(cloned);
+    }, [entityForm, setEntityForm, field]);
+    // 커스텀 렌더러용 clearError 핸들러
+    const handleClearError = useCallback(() => {
+        setErrors([]);
+    }, []);
+    const name = field.getName();
+    const label = field.getLabel();
+    const showTooltip = !isBlank(tooltip);
+    const hideLabel = isTrue(field.hideLabel);
+    useEffect(() => {
+        if (entityForm) {
+            setVersion(entityForm.version);
+            const fieldInstance = entityForm.fields.get(name);
+            setDirty(fieldInstance?.isDirty() ?? false);
+            // 커스텀 렌더러용 현재 값 설정
+            setCurrentValue(entityForm.getValue(name));
+            (async () => {
+                // 필드 에러, 필수, 읽기전용, 툴팁, 도움말, placeholder 등 비동기 조회 및 상태 반영
+                // Fetch field errors, required, readonly, tooltip, helpText, placeholder, etc. asynchronously
+                const messages = new Set();
+                const fieldErrors = entityForm?.errors;
+                if (fieldErrors && fieldErrors.length > 0) {
+                    fieldErrors.forEach((error) => {
+                        if (error.name === field.getName() && error.errors.length > 0) {
+                            error.errors.forEach((error) => {
+                                messages.add(error);
+                            });
+                        }
+                    });
+                }
+                setErrors([...messages]);
+                const fieldInfoParams = {
+                    entityForm,
+                    ...(props.session !== undefined ? { session: props.session } : {}),
+                };
+                const required = await field.isRequired(fieldInfoParams);
+                const readonly = await field.isReadonly(fieldInfoParams);
+                setRequired(required);
+                setReadonly(readonly);
+                const tooltip = await field.getTooltip(fieldInfoParams);
+                setTooltip(tooltip);
+                const helpText = await field.getHelpText(fieldInfoParams);
+                setHelpText(helpText);
+                const placeHolder = await field.getPlaceHolder(fieldInfoParams);
+                setPlaceHolder(placeHolder);
+                // 필드 렌더링 파라미터 구성 및 view 생성
+                // Build field render parameters and generate view
+                const viewParams = {
+                    entityForm: entityForm,
+                    ...(props.session !== undefined ? { session: props.session } : {}),
+                    subCollectionEntity: subCollectionEntity,
+                    updateEntityForm: async (updater) => {
+                        // EntityForm을 업데이트하고 상태를 반영
+                        const updatedEntityForm = await updater(entityForm.clone(true));
+                        setEntityForm?.(updatedEntityForm);
+                    },
+                    ...(props.resetEntityForm !== undefined
+                        ? { resetEntityForm: props.resetEntityForm }
+                        : {}),
+                    onChange: (value, propagation) => {
+                        (async () => {
+                            // 값 변경 시 에러 초기화, 값 반영, 검증, onChanges 콜백, manyToOneLink 갱신 등 처리
+                            // On value change: clear errors, update value, validate, run onChanges, update manyToOneLink, etc.
+                            const name = field.getName();
+                            const currentScroll = window.scrollY; // 현재 스크롤 위치 저장
+                            setErrors([]);
+                            const isPropagation = isTrue(propagation, true);
+                            let cloned = entityForm.clone(true);
+                            cloned.setValue(name, value);
+                            // persistent가 false인 alert 메시지들을 제거
+                            cloned.clearAlertMessages(false);
+                            // dirty 상태 즉시 계산 및 업데이트
+                            const updatedField = cloned.fields.get(name);
+                            setDirty(updatedField?.isDirty() ?? false);
+                            // 현재 value 에 대해서만 다시 error 검사하기
+                            // Validate only the current value
+                            const errors = await cloned.validate({
+                                fieldNames: [name],
+                                ...(props.session !== undefined ? { session: props.session } : {}),
+                            });
+                            cloned.mergeError(name, errors);
+                            let changed = false;
+                            if (isPropagation) {
+                                if (cloned.onChanges && cloned.onChanges.length > 0) {
+                                    for (const onChange of cloned.onChanges) {
+                                        try {
+                                            cloned = await onChange(cloned, name);
+                                            if (isTrue(cloned.shouldReload)) {
+                                                changed = true;
+                                            }
+                                        }
+                                        catch (e) {
+                                            console.error(e);
+                                        }
+                                    }
+                                }
+                            }
+                            const manyToOneField = cloned.getField(name);
+                            setManyToOneLink(await getManyToOneLink(cloned.getRenderType(), manyToOneField));
+                            if (changed || manyToOneField instanceof AbstractManyToOneField) {
+                                setEntityForm?.(cloned);
+                            }
+                            else {
+                                entityForm.merge(cloned);
+                                setEntityForm?.(entityForm);
+                            }
+                            // entityForm 갱신으로 스크롤에 변화가 생겼다면 해당 위치로 스크롤을 자동 이동하는 구문
+                            // If entityForm update changes scroll, auto-scroll to previous position
+                            requestAnimationFrame(() => {
+                                if (Math.abs(window.scrollY - currentScroll) > 0) {
+                                    setOpenBaseLoading(true);
+                                    window.scrollTo({
+                                        top: currentScroll,
+                                        behavior: 'instant',
+                                    });
+                                    setTimeout(() => {
+                                        setOpenBaseLoading(false);
+                                    }, 50);
+                                }
+                            });
+                        })();
+                    },
+                    onError: (message) => {
+                        // 필드 에러 발생 시 에러 상태 및 EntityForm 에러 갱신
+                        // On field error: update error state and EntityForm errors
+                        if (isBlank(message)) {
+                            return;
+                        }
+                        const newErrors = [];
+                        newErrors.push(message);
+                        setErrors(newErrors);
+                        const errors = [];
+                        if (entityForm.errors) {
+                            errors.push(...entityForm.errors);
+                        }
+                        errors.push({
+                            name: field.name,
+                            label: field.label,
+                            errors: newErrors,
+                        });
+                        const cloned = entityForm.clone(true).withErrors(errors);
+                        setEntityForm?.(cloned);
+                    },
+                    clearError: () => {
+                        // 에러 상태 초기화
+                        // Clear error state
+                        setErrors([]);
+                    },
+                    required: required,
+                    readonly: readonly,
+                    placeHolder: placeHolder,
+                    helpText: helpText,
+                };
+                setView(await field.view(viewParams));
+            })();
+        }
+    }, [entityForm, setEntityForm]);
+    useEffect(() => {
+        (async () => {
+            // manyToOneLink(상세보기 등) 렌더링용 상태 갱신
+            // Update manyToOneLink (for detail view, etc.)
+            setManyToOneLink(await getManyToOneLink(entityForm.getRenderType(), field));
+        })();
+    }, []);
+    return (_jsxs("div", { id: `field-${instanceId}-${name}`, "data-field-name": name, className: classNames.field?.container, children: [_jsxs("div", { id: `field-${instanceId}-${name}-${version}`, className: cn(`rcm-field-label-wrapper ${showTooltip ? 'rcm-field-label-wrapper-with-tooltip' : ''}`, classNames.field?.labelWrapper), children: [_jsxs("div", { className: "rcm-field-label-row", children: [!hideLabel && (_jsx("label", { className: cn('rcm-field-label', classNames.field?.label), children: viewLabel(label) })), manyToOneLink, required && (_jsx(Tooltip, { label: '필수값', color: 'red', withArrow: true, children: _jsx("div", { className: "rcm-field-icon-wrap", children: _jsx(Icon, { icon: "healthicons:star-small", className: cn('rcm-field-icon rcm-field-icon-required', classNames.field?.requiredIcon) }) }) })), dirty && (_jsx(Tooltip, { label: '수정됨', color: 'yellow', withArrow: true, children: _jsx("div", { className: "rcm-field-icon-wrap", children: _jsx(Icon, { icon: "healthicons:star-small-outline", className: cn('rcm-field-icon rcm-field-icon-dirty', classNames.field?.dirtyIcon) }) }) }, `tooltip-${name}-${version}-dirty`))] }), showTooltip && (_jsx("div", { className: "rcm-row", children: _jsx(Tooltip, { label: tooltip, color: 'gray', withArrow: true, position: 'top-end', children: _jsx("div", { className: cn('rcm-field-tooltip-icon', classNames.field?.tooltipIcon), children: _jsx(IconHelp, { className: "rcm-field-icon" }) }) }) }))] }), _jsx("div", { className: cn('rcm-field-value', classNames.field?.valueContainer), children: CustomFieldRenderer ? (_jsx(CustomFieldRenderer, { field: field, entityForm: entityForm, ...(setEntityForm !== undefined ? { setEntityForm } : {}), value: currentValue, onChange: handleFieldChange, onError: handleFieldError, clearError: handleClearError, required: required, readonly: _readonly ?? false, ...(props.session !== undefined ? { session: props.session } : {}), helpText: helpText, placeholder: _placeHolder, subCollectionEntity: subCollectionEntity, ...(props.resetEntityForm !== undefined
+                        ? { resetEntityForm: props.resetEntityForm }
+                        : {}) })) : (view) }), _jsx(ViewFieldError, { errors: errors }), _jsx(ViewHelpText, { helpText: helpText })] }));
+    /**
+     * viewLabel
+     * - 라벨이 string이면 번역, 아니면 그대로 반환
+     * - If label is string, translate; otherwise, return as is
+     */
+    function viewLabel(label) {
+        if (typeof label === 'string') {
+            return t(label);
+        }
+        return label;
+    }
+};

package/dist/listgrid/components/form/SubCollectionRenderer.d.ts

@@ -0,0 +1,22 @@
+import { SubCollectionField } from '../../config/SubCollectionField';
+import { EntityForm } from '../../config/EntityForm';
+import { Session } from '../../auth/types';
+/**
+ * SubCollectionRenderer component
+ * - Renders a sub-collection field in EntityForm, including label, help text, and loading state.
+ * - Handles async rendering and label translation.
+ *
+ * SubCollectionRenderer 컴포넌트
+ * - EntityForm의 서브콜렉션 필드를 렌더링합니다. (라벨, 도움말, 로딩 상태 포함)
+ * - 비동기 렌더링 및 라벨 번역을 처리합니다.
+ *
+ * @param props {SubCollectionRendererProps} - 서브콜렉션, EntityForm, 세션 등
+ * @returns {JSX.Element} - 렌더링 결과
+ */
+interface SubCollectionRendererProps {
+    collection: SubCollectionField;
+    entityForm: EntityForm;
+    session?: Session;
+}
+export declare const SubCollectionRenderer: ({ collection, entityForm, session, }: SubCollectionRendererProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/listgrid/components/form/SubCollectionRenderer.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { getTranslation } from '../../utils/i18n';
+import { LoadingOverlay } from '../../ui';
+import { ViewHelpText } from './ui/ViewHelpText';
+import { isTrue } from '../../utils/BooleanUtil';
+export const SubCollectionRenderer = ({ collection, entityForm, session, }) => {
+    const { t } = getTranslation();
+    // 서브콜렉션 렌더링, 마운트 상태, 도움말 상태
+    // State for sub-collection view, mounted state, and help text
+    const [view, setView] = useState(null);
+    const [mounted, setMounted] = useState(false);
+    const [helpText, setHelpText] = useState(null);
+    useEffect(() => {
+        if (!mounted) {
+            (async () => {
+                // 서브콜렉션 렌더링 및 도움말 비동기 조회
+                // Async fetch for sub-collection view and help text
+                const params = { entityForm, ...(session !== undefined ? { session } : {}) };
+                setView(await collection.render(params));
+                setHelpText(await collection.getHelpText(params));
+                setMounted(true);
+            })();
+        }
+    }, []);
+    const label = collection.getLabel();
+    const hideLabel = isTrue(collection.hideLabel);
+    // 마운트 전에는 로딩 오버레이 표시
+    // Show loading overlay before mount
+    if (!mounted) {
+        return (_jsxs("div", { className: 'relative', children: [_jsx(LoadingOverlay, { visible: true }), _jsx("div", { className: 'w-full h-[400px]' })] }));
+    }
+    return (_jsxs("div", { children: [!hideLabel && (_jsx("div", { children: _jsx("label", { children: viewLabel(label) }) })), _jsx("div", { children: view }), _jsx(ViewHelpText, { helpText: helpText })] }));
+    /**
+     * viewLabel
+     * - 라벨이 string이면 번역, 아니면 그대로 반환
+     * - If label is string, translate; otherwise, return as is
+     */
+    function viewLabel(label) {
+        if (typeof label === 'string') {
+            return t(label);
+        }
+        return label;
+    }
+};

package/dist/listgrid/components/form/ViewEntityForm.d.ts

@@ -0,0 +1,14 @@
+import { ViewEntityFormProps } from './types/ViewEntityForm.types';
+/**
+ * ViewEntityForm component (render-only structure)
+ * - All state/handlers/logic are managed by the useEntityFormLogic hook.
+ * - This component is responsible only for rendering structure.
+ *
+ * ViewEntityForm 컴포넌트 (최소 렌더링 구조)
+ * - 모든 상태/핸들러/로직은 useEntityFormLogic 훅에서 관리
+ * - 이 컴포넌트는 렌더링 구조만 담당
+ *
+ * @param props {ViewEntityFormProps} - EntityForm 렌더링에 필요한 모든 속성
+ * @returns {JSX.Element|null} - 렌더링 결과 또는 로딩 상태
+ */
+export declare const ViewEntityForm: (props: ViewEntityFormProps) => import("react/jsx-runtime").JSX.Element;