@rchemist/listgrid 0.2.6

package/dist/listgrid/components/form/ui/ViewEntityError.d.ts

@@ -0,0 +1,13 @@
+import { FieldError } from '../../../config/EntityFormTypes';
+import { EntityForm } from '../../../config/EntityForm';
+interface ViewEntityErrorProps {
+    errors?: Map<string, FieldError[]>;
+    onTabChange?: (tabIndex: number) => void;
+    tabs?: Array<{
+        id: string;
+        label: string;
+    }>;
+    entityForm?: EntityForm;
+}
+export declare const ViewEntityError: (props: ViewEntityErrorProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/listgrid/components/form/ui/ViewEntityError.js

@@ -0,0 +1,90 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isEmpty } from '../../../utils';
+import { useState } from 'react';
+import { IconChevronDown, IconChevronUp, IconInfoTriangle } from '@tabler/icons-react';
+import { getTranslation } from '../../../utils/i18n';
+export const ViewEntityError = (props) => {
+    const { t } = getTranslation();
+    const [isExpanded, setIsExpanded] = useState(false);
+    if (props.errors === undefined || isEmpty(props.errors) || props.errors.size === 0)
+        return null;
+    const totalErrorCount = Array.from(props.errors.values()).reduce((sum, errors) => sum + errors.length, 0);
+    // 탭 이름으로 탭 인덱스를 찾는 함수
+    const findTabIndexByLabel = (tabLabel) => {
+        if (!props.tabs)
+            return -1;
+        return props.tabs.findIndex((tab) => tab.label === tabLabel);
+    };
+    // 에러 클릭 시 해당 탭으로 이동하는 함수
+    const handleErrorClick = (tabLabel) => {
+        const tabIndex = findTabIndexByLabel(tabLabel);
+        if (tabIndex !== -1 && props.onTabChange) {
+            props.onTabChange(tabIndex);
+        }
+    };
+    // 필드 링크 클릭 시 탭 전환 및 스크롤 처리
+    const handleFieldClick = (error, tabLabel) => {
+        // 해당 필드가 속한 탭 찾기
+        const fieldTabId = error.tabId;
+        let targetTabIndex = -1;
+        if (props.tabs && fieldTabId) {
+            // 탭 ID로 탭 인덱스 찾기
+            targetTabIndex = props.tabs.findIndex((tab) => tab.id === fieldTabId);
+        }
+        // 탭 전환이 필요한 경우
+        if (targetTabIndex !== -1 && props.onTabChange) {
+            props.onTabChange(targetTabIndex);
+            // 탭 전환 후 필드로 스크롤하기 위해 약간의 지연 후 스크롤
+            setTimeout(() => {
+                const fieldElement = document.querySelector(`[data-field-name="${error.name}"]`);
+                if (fieldElement) {
+                    fieldElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    // 필드에 포커스 효과 추가
+                    fieldElement.classList.add('ring-2', 'ring-primary', 'ring-opacity-50');
+                    setTimeout(() => {
+                        fieldElement.classList.remove('ring-2', 'ring-primary', 'ring-opacity-50');
+                    }, 2000);
+                }
+            }, 100);
+        }
+        else {
+            // 현재 탭의 필드인 경우 바로 스크롤
+            const fieldElement = document.querySelector(`[data-field-name="${error.name}"]`);
+            if (fieldElement) {
+                fieldElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                // 필드에 포커스 효과 추가
+                fieldElement.classList.add('ring-2', 'ring-primary', 'ring-opacity-50');
+                setTimeout(() => {
+                    fieldElement.classList.remove('ring-2', 'ring-primary', 'ring-opacity-50');
+                }, 2000);
+            }
+        }
+    };
+    const errorView = [];
+    try {
+        props.errors.forEach((value, key) => {
+            const tabError = [];
+            value.forEach((error, index) => {
+                const label = error.label ?? '저장 오류';
+                const errorMessageView = [];
+                if (error.errors === undefined ||
+                    error.errors.length === 0 ||
+                    !Array.isArray(error.errors)) {
+                    errorMessageView.push(_jsx("div", { children: t('form.save.error.invalid') }, `error-message-${index}-undefined`));
+                }
+                else {
+                    error.errors.forEach((message, i) => {
+                        errorMessageView.push(_jsx("div", { children: t(message) }, `error-message-${index}-${i}`));
+                    });
+                }
+                tabError.push(_jsx("div", { className: '', children: _jsxs("button", { type: "button", onClick: () => handleFieldClick(error, key), className: 'flex space-x-2 items-center cursor-pointer hover:underline text-left w-full', children: [_jsx(IconInfoTriangle, { className: 'h-4 w-4' }), _jsxs("span", { children: [label, ":"] }), _jsx("span", { children: errorMessageView })] }) }, `errorDetail${index}`));
+            });
+            errorView.push(_jsxs("div", { className: 'text-danger bg-danger-light dark:bg-danger-dark-light p-4 mb-2', children: [_jsx("div", { className: 'py-2 font-bold text-[16px] cursor-pointer hover:underline', onClick: () => handleErrorClick(key), children: t(key) }), _jsx("div", { className: 'space-y-1 text-[15px]', children: tabError })] }, `error_${key}`));
+        });
+    }
+    catch (e) {
+        console.error(e);
+    }
+    return (_jsxs("div", { className: 'mt-4 w-full', children: [_jsxs("button", { type: "button", onClick: () => setIsExpanded(!isExpanded), className: `flex w-full items-center justify-between p-3 bg-danger text-white ${isExpanded ? 'rounded-t-lg' : 'rounded-lg'} hover:bg-danger/90 transition-colors`, children: [_jsxs("div", { className: 'flex items-center space-x-2', children: [_jsx(IconInfoTriangle, { className: 'ml-2 h-5 w-5' }), _jsx("span", { className: 'font-semibold', children: t(`form.save.error.invalid.${isExpanded ? 'expanded' : 'collapsed'}`) }), _jsxs("span", { className: 'text-sm bg-white/20 px-2 py-1 rounded-full', children: [totalErrorCount, "\uAC1C \uC624\uB958"] })] }), isExpanded ? (_jsx(IconChevronUp, { className: 'h-5 w-5' })) : (_jsx(IconChevronDown, { className: 'h-5 w-5' }))] }), isExpanded && _jsx("div", { className: 'space-y-2', children: errorView })] }));
+};

package/dist/listgrid/components/form/ui/ViewEntityFormAlerts.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ViewEntityFormAlertsProps } from '../types/ViewEntityFormAlerts.types';
+export declare const ViewEntityFormAlerts: React.NamedExoticComponent<ViewEntityFormAlertsProps>;

package/dist/listgrid/components/form/ui/ViewEntityFormAlerts.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { IconChevronDown, IconChevronUp } from '@tabler/icons-react';
+import { getTranslation } from '../../../utils/i18n';
+import { getIndicatorTone, useAlertManager } from '../hooks/useAlertManager';
+import { AlertItem } from './AlertItem';
+export const ViewEntityFormAlerts = React.memo(function ViewEntityFormAlerts({ alertMessages, onRemove, onTabChange, onFieldFocus, }) {
+    const { t } = getTranslation();
+    const { visibleAlerts, isCollapsed, handleLinkClick, handleCloseAlert, toggleCollapse, getDominantColor, } = useAlertManager(alertMessages, onRemove, onTabChange, onFieldFocus);
+    // 조건부 return은 모든 hooks 호출 이후에
+    if (!alertMessages || alertMessages.length === 0 || visibleAlerts.length === 0) {
+        return null;
+    }
+    const dominantColor = getDominantColor();
+    // 알림이 1개일 때는 헤더 없이 직접 렌더링
+    if (visibleAlerts.length === 1) {
+        return (_jsx("div", { className: "rcm-alerts-single", children: _jsx(AlertItem, { alert: visibleAlerts[0], onLinkClick: handleLinkClick, onClose: handleCloseAlert, t: t }, 'alert-' + visibleAlerts[0].key) }));
+    }
+    // 알림이 2개 이상일 때만 헤더와 함께 렌더링
+    return (_jsxs("div", { className: isCollapsed ? '' : 'rcm-alerts-multi', children: [_jsxs("div", { className: `rcm-alerts-header ${isCollapsed ? 'rcm-alerts-header-collapsed' : 'rcm-alerts-header-expanded'}`, onClick: toggleCollapse, children: [_jsxs("div", { className: "rcm-alerts-header-left", children: [_jsx("span", { className: "rcm-icon-frame rcm-alerts-indicator", "data-shape": "circle", "data-size": "xs", "data-tone": getIndicatorTone(dominantColor), "aria-hidden": "true" }), _jsxs("span", { className: "rcm-text", "data-weight": "medium", children: ["\uC54C\uB9BC (", visibleAlerts.length, ")"] })] }), _jsx("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            toggleCollapse();
+                        }, className: "rcm-icon-btn", "data-size": "sm", "aria-label": isCollapsed ? '알림 펼치기' : '알림 접기', children: isCollapsed ? (_jsx(IconChevronDown, { className: "rcm-icon", "data-size": "sm" })) : (_jsx(IconChevronUp, { className: "rcm-icon", "data-size": "sm" })) })] }), _jsx("div", { className: `rcm-alerts-body ${isCollapsed ? 'rcm-alerts-body-collapsed' : 'rcm-alerts-body-expanded'}`, children: _jsx("div", { className: "rcm-alerts-list", children: visibleAlerts.map((alert) => (_jsx(AlertItem, { alert: alert, onLinkClick: handleLinkClick, onClose: handleCloseAlert, t: t }, 'alert-' + alert.key))) }) })] }));
+});

package/dist/listgrid/components/form/ui/ViewEntityFormButtons.d.ts

@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+import { EntityFormButton } from '../../../config/EntityFormButton';
+import { ViewEntityFormButtonsProps } from '../types/ViewEntityFormButtons.types';
+/**
+ * ViewEntityFormButtons 컴포넌트
+ * - EntityForm의 버튼 영역만 렌더링합니다.
+ * - 버튼 그룹을 flex row로 배치합니다.
+ *
+ * @param props.buttons - 버튼(ReactNode)
+ */
+interface ViewButtonsProps {
+    buttons: ReactNode;
+}
+export declare const ViewEntityFormButtons: React.NamedExoticComponent<ViewButtonsProps>;
+export declare function getOverwriteButton(buttons: EntityFormButton[] | undefined, id: string): boolean;
+/**
+ * responsive screen 크기에 따라 버튼 사이즈와 위치를 조정하기 위해 별도의 functions 으로 분리한다.
+ * row-reverse 를 사용하기 위해 단일 element 를 리턴하지 않고 reactnode[] 를 리턴할 수 있게 함수로 만들었다.
+ * @param router
+ * @param pathname
+ * @param props
+ */
+export declare function getEntityFormButtons(props: ViewEntityFormButtonsProps): Promise<ReactNode[]>;
+export {};

package/dist/listgrid/components/form/ui/ViewEntityFormButtons.js

@@ -0,0 +1,208 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { SaveButton } from './buttons/SaveButton';
+import { ListButton } from './buttons/ListButton';
+import { DeleteButton } from './buttons/DeleteButton';
+import { ClosePopupButton } from './buttons/ClosePopupButton';
+import { EntityFormButton, } from '../../../config/EntityFormButton';
+import { isTrue } from '../../../utils/BooleanUtil';
+import { Tooltip } from '../../../ui';
+import { useEntityFormTheme } from '../context/EntityFormThemeContext';
+export const ViewEntityFormButtons = React.memo(function ViewEntityFormButtons({ buttons, }) {
+    const { classNames } = useEntityFormTheme();
+    return (_jsx("div", { className: `rcm-form-buttons-scroll ${classNames.buttons?.container ?? ''}`, style: {
+            WebkitOverflowScrolling: 'touch',
+            direction: 'rtl',
+        }, children: _jsx("div", { className: `rcm-form-buttons-row ${classNames.buttons?.innerWrapper ?? ''}`, style: { direction: 'ltr' }, children: buttons }) }));
+});
+export function getOverwriteButton(buttons, id) {
+    return buttons !== undefined && buttons.find((button) => button.isOverwrite(id)) !== undefined;
+}
+/**
+ * responsive screen 크기에 따라 버튼 사이즈와 위치를 조정하기 위해 별도의 functions 으로 분리한다.
+ * row-reverse 를 사용하기 위해 단일 element 를 리턴하지 않고 reactnode[] 를 리턴할 수 있게 함수로 만들었다.
+ * @param router
+ * @param pathname
+ * @param props
+ */
+export async function getEntityFormButtons(props) {
+    const { router, pathname, entityForm, setErrors, setNotifications, postSave, useCreateStep, showModal, closeModal, closeTopModal, getModalData, updateModalData, } = props;
+    if (!entityForm)
+        return [];
+    const readonly = isTrue(props.readonly) || isTrue(entityForm?.readonly);
+    const result = [];
+    // entityForm의 buttons를 처리
+    let entityFormButtons = [];
+    let entityFormReactNodes = [];
+    const processedButtonIds = new Set(); // 중복 방지를 위한 ID 추적
+    if (entityForm.buttons && entityForm.buttons.length > 0) {
+        // entityForm.buttons는 함수 배열이므로 실행하여 버튼들을 가져옴
+        const buttonsFromFunctions = await Promise.all(entityForm.buttons.map((buttonFunc) => buttonFunc(entityForm)));
+        // 결과를 flat하고 null/undefined 필터링
+        const flatButtons = buttonsFromFunctions
+            .flat()
+            .filter((item) => item !== null && item !== undefined);
+        flatButtons.forEach((item) => {
+            if (item instanceof EntityFormButton) {
+                // EntityFormButton 인스턴스
+                const buttonId = item.getId();
+                if (!processedButtonIds.has(buttonId)) {
+                    entityFormButtons.push(item);
+                    processedButtonIds.add(buttonId);
+                }
+            }
+            else if (typeof item === 'object' && 'id' in item && 'button' in item) {
+                // EntityFormReactNodeButton 타입
+                const reactNodeButton = item;
+                if (!processedButtonIds.has(reactNodeButton.id)) {
+                    entityFormReactNodes.push(reactNodeButton.button);
+                    processedButtonIds.add(reactNodeButton.id);
+                }
+            }
+        });
+    }
+    // props.buttons와 entityFormButtons를 합치되, ID 중복 제거
+    let allButtons = [];
+    const buttonIds = new Set();
+    // props.buttons 먼저 추가
+    if (props.buttons) {
+        props.buttons.forEach((button) => {
+            const buttonId = button.getId();
+            if (!buttonIds.has(buttonId)) {
+                allButtons.push(button);
+                buttonIds.add(buttonId);
+            }
+        });
+    }
+    // entityFormButtons 추가 (ID 중복 체크)
+    entityFormButtons.forEach((button) => {
+        const buttonId = button.getId();
+        // 기존 버튼과 ID가 중복되는지 체크
+        const isDuplicate = buttonIds.has(buttonId) ||
+            // save, delete, list override 체크
+            allButtons.some((b) => {
+                return ['save', 'delete', 'list'].some((id) => button.isOverwrite(id) && b.isOverwrite(id));
+            });
+        if (!isDuplicate) {
+            allButtons.push(button);
+            buttonIds.add(buttonId);
+        }
+    });
+    const buttons = allButtons.length > 0 ? allButtons : undefined;
+    const excludeButtons = props.excludeButtons ?? [];
+    const isCreatable = entityForm.isCreatable();
+    const isUpdatable = entityForm.isUpdatable();
+    const isDeletable = entityForm.isDeletable();
+    if (!isCreatable || !isUpdatable || useCreateStep) {
+        excludeButtons.push('save');
+    }
+    if (!isDeletable) {
+        excludeButtons.push('delete');
+    }
+    // entityForm에 visible하고 readonly가 아닌 필드가 하나 이상 있는지 확인
+    const hasEditableFields = async () => {
+        const fields = Array.from(entityForm.fields.values());
+        for (const field of fields) {
+            const isHidden = await field.isHidden({ entityForm, renderType: entityForm.getRenderType() });
+            const isFieldReadonly = await field.isReadonly({
+                entityForm,
+                renderType: entityForm.getRenderType(),
+            });
+            if (!isHidden && !isFieldReadonly) {
+                return true;
+            }
+        }
+        return false;
+    };
+    const canShowSaveButton = await hasEditableFields();
+    if (!readonly &&
+        canShowSaveButton &&
+        !excludeButtons.includes('save') &&
+        !getOverwriteButton(buttons, 'save')) {
+        result.push(_createElement(SaveButton, { ...props, key: 'button_save' }));
+    }
+    // 새창(팝업) 모드에서는 목록 버튼 대신 닫기 버튼 표시
+    if (props.popupMode) {
+        result.push(_createElement(ClosePopupButton, { ...props, key: 'button_close_popup' }));
+    }
+    else if (!excludeButtons.includes('list') && !getOverwriteButton(buttons, 'list')) {
+        result.push(_createElement(ListButton, { ...props, key: 'button_list' }));
+    }
+    if (!readonly &&
+        !excludeButtons.includes('delete') &&
+        !getOverwriteButton(buttons, 'delete') &&
+        entityForm.getRenderType() === 'update') {
+        result.push(_createElement(DeleteButton, { ...props, key: 'button_delete' }));
+    }
+    if (buttons && buttons.length > 0) {
+        // 모든 버튼의 비동기 속성을 병렬로 처리
+        const buttonElements = await Promise.all(buttons.map(async (button, index) => {
+            // 버튼 클래스: button.className > props.buttonClassNames?.custom > 기본값
+            const buttonClassName = button.className ?? props.buttonClassNames?.custom ?? `btn btn-primary gap-2`;
+            const buttonProps = {
+                entityForm,
+                router,
+                pathname,
+                setErrors,
+                setNotifications,
+                ...(useCreateStep && {
+                    step: {
+                        useCreateStep: true,
+                        currentStep: props.currentStep ?? 0,
+                        maxStep: props.maxStep ?? 0,
+                        createStepFields: props.createStepFields ?? [],
+                    },
+                }),
+                ...(showModal !== undefined ? { showModal } : {}),
+                ...(closeModal !== undefined ? { closeModal } : {}),
+                ...(closeTopModal !== undefined ? { closeTopModal } : {}),
+                ...(getModalData !== undefined ? { getModalData } : {}),
+                ...(updateModalData !== undefined ? { updateModalData } : {}),
+            };
+            const hidden = button.hidden ? await button.hidden(buttonProps) : false;
+            // hidden 이 true 일 때는 버튼을 렌더링하지 않는다.
+            if (hidden) {
+                return null;
+            }
+            const disabled = button.disabled ? await button.disabled(buttonProps) : false;
+            const tooltip = button.tooltip ? await button.tooltip(buttonProps) : null;
+            const buttonElement = (_jsxs("button", { type: "button", className: `${buttonClassName}`, disabled: disabled, hidden: hidden, onClick: async (e) => {
+                    e.stopPropagation();
+                    if (button.onClick !== undefined) {
+                        const form = await button.onClick(buttonProps);
+                        if (form.errors && form.errors.length > 0) {
+                            // 에러가 있으면 에러 메시지를 표시한다.
+                            const errorMessages = form.errors.flatMap((error) => error.errors);
+                            setErrors(errorMessages);
+                            return;
+                        }
+                        else {
+                            if (button.isOverwrite('save')) {
+                                await postSave?.(form);
+                            }
+                        }
+                    }
+                }, children: [button.icon, button.label] }, `custom_button_${index}`));
+            if (tooltip) {
+                return (_jsx(Tooltip, { label: tooltip, usePortal: true, children: buttonElement }, `custom_button_${index}`));
+            }
+            return buttonElement;
+        }));
+        result.push(...buttonElements.filter(Boolean));
+    }
+    // entityForm에서 가져온 ReactNode들도 추가
+    if (entityFormReactNodes.length > 0) {
+        entityFormReactNodes.forEach((node, index) => {
+            // React.cloneElement를 사용하여 key prop 추가
+            if (React.isValidElement(node)) {
+                result.push(React.cloneElement(node, { key: `entity_form_button_${index}` }));
+            }
+            else {
+                // string이나 number인 경우 span으로 감싸서 key 추가
+                result.push(_jsx("span", { children: node }, `entity_form_button_${index}`));
+            }
+        });
+    }
+    return result;
+}

package/dist/listgrid/components/form/ui/ViewEntityFormErrors.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { EntityForm } from '../../../config/EntityForm';
+import { FieldError } from '../../../config/EntityFormTypes';
+import { EntityTab } from '../../../config/EntityTab';
+/**
+ * ViewEntityFormErrors 컴포넌트
+ * - EntityForm의 에러 및 알림 메시지 영역만 렌더링합니다.
+ *
+ * @param props.errors - 에러 메시지 배열
+ * @param props.entityErrorMap - 필드별 에러 맵 (Map<string, FieldError[]>)
+ * @param props.notifications - 알림 메시지 배열
+ * @param props.onTabChange - 탭 변경 콜백 함수
+ * @param props.tabs - 탭 정보 배열
+ * @param props.entityForm - EntityForm 인스턴스
+ */
+interface ViewEntityFormErrorsProps {
+    errors: string[];
+    entityErrorMap: Map<string, FieldError[]>;
+    notifications: string[];
+    onTabChange?: (tabIndex: number) => void;
+    tabs?: EntityTab[];
+    entityForm?: EntityForm;
+}
+export declare const ViewEntityFormErrors: React.NamedExoticComponent<ViewEntityFormErrorsProps>;
+export {};

package/dist/listgrid/components/form/ui/ViewEntityFormErrors.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ShowNotifications } from '../../../components/helper/ShowNotifications';
+import { ViewEntityError } from '../ui/ViewEntityError';
+export const ViewEntityFormErrors = React.memo(function ViewEntityFormErrors({ errors, entityErrorMap, notifications, onTabChange, tabs, entityForm, }) {
+    // EntityTab 배열을 ViewEntityError에서 사용할 수 있는 형태로 변환
+    const tabInfo = tabs?.map((tab) => ({ id: tab.id, label: tab.label }));
+    return (_jsxs(_Fragment, { children: [entityErrorMap.size === 0 && _jsx(ShowNotifications, { messages: errors, error: true }), _jsx(ViewEntityError, { errors: entityErrorMap, ...(onTabChange !== undefined ? { onTabChange } : {}), ...(tabInfo !== undefined ? { tabs: tabInfo } : {}), ...(entityForm !== undefined ? { entityForm } : {}) }), _jsx(ShowNotifications, { messages: notifications, timeout: 10000, showClose: true })] }));
+});

package/dist/listgrid/components/form/ui/ViewEntityFormFields.d.ts

@@ -0,0 +1,38 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { EntityTab } from '../../../config/EntityTab';
+import { EntityForm } from '../../../config/EntityForm';
+import { Session } from '../../../auth/types';
+/**
+ * ViewEntityFormFields 컴포넌트
+ * - EntityForm의 필드(Tab/Panel) 영역만 렌더링합니다.
+ * - Tab.Group, Tab.List, Tab.Panels 구조를 그대로 사용합니다.
+ *
+ * @param props.tabs - 탭 목록
+ * @param props.tabIndex - 현재 탭 인덱스
+ * @param props.setTabIndex - 탭 인덱스 setter
+ * @param props.entityForm - EntityForm 인스턴스
+ * @param props.setEntityForm - EntityForm 상태 setter (useState와 동일)
+ * @param props.readonly - 읽기 전용 여부
+ * @param props.subCollectionEntity - 서브 콜렉션 여부
+ * @param props.session - 세션 정보
+ * @param props.createStepFields - 생성 단계 필드명 배열
+ * @param props.cacheKey - 캐시 키(리렌더링 트리거)
+ * @param props.selectedTabIndex - 선택된 탭 인덱스(숫자)
+ * @param props.setSelectedTabIndex - 선택 탭 setter
+ */
+interface ViewEntityFormFieldsProps {
+    tabs: EntityTab[];
+    tabIndex: string;
+    setTabIndex: (tabIndex: string) => void;
+    entityForm: EntityForm;
+    setEntityForm: Dispatch<SetStateAction<EntityForm | undefined>>;
+    readonly: boolean;
+    subCollectionEntity: boolean;
+    session: Session;
+    createStepFields: string[];
+    cacheKey: string;
+    selectedTabIndex: number;
+    setSelectedTabIndex: (idx: number) => void;
+}
+export declare const ViewEntityFormFields: React.NamedExoticComponent<ViewEntityFormFieldsProps>;
+export {};

package/dist/listgrid/components/form/ui/ViewEntityFormFields.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Tab } from '@headlessui/react';
+import { SafePerfectScrollbar } from '../../../ui';
+import { ViewTab } from '../ViewTab';
+import { ViewTabPanel } from '../ViewTabPanel';
+export const ViewEntityFormFields = React.memo(function ViewEntityFormFields({ tabs, tabIndex, setTabIndex, entityForm, setEntityForm, readonly, subCollectionEntity, session, createStepFields, cacheKey, selectedTabIndex, setSelectedTabIndex, }) {
+    // 단순하게 원래 tabs를 그대로 사용하고, 개별 컴포넌트에서 표시 여부 결정
+    React.useEffect(() => {
+        if (tabs && tabs.length > 0) {
+            const currentTabIndex = tabs.findIndex((tab) => tab.id === tabIndex);
+            if (currentTabIndex !== -1 && currentTabIndex !== selectedTabIndex) {
+                setSelectedTabIndex(currentTabIndex);
+            }
+        }
+    }, [tabIndex, tabs]);
+    const handleTabChange = (index) => {
+        if (tabs && tabs[index]) {
+            setSelectedTabIndex(index);
+            setTabIndex(tabs[index].id);
+        }
+    };
+    return (_jsx(React.Fragment, { children: _jsxs(Tab.Group, { selectedIndex: selectedTabIndex, onChange: handleTabChange, children: [tabs.length > 1 && (_jsx(SafePerfectScrollbar, { className: `relative w-full whitespace-nowrap`, children: _jsx(Tab.List, { className: "rcm-tab-list", children: tabs.map((tab, index) => (_jsx(ViewTab, { id: tab.id, label: tab.label, tabIndex: tabIndex, description: tab.description, entityForm: entityForm, createStepFields: createStepFields, setTabIndex: setTabIndex }, `${tab.id}_${cacheKey}_${createStepFields.join(',')}_tab`))) }) })), _jsx(Tab.Panels, { children: tabs.map((tab, index) => (_jsx(ViewTabPanel, { id: tab.id, tabIndex: tabIndex, readonly: readonly, subCollectionEntity: subCollectionEntity, session: session, createStepFields: createStepFields, entityForm: entityForm, setEntityForm: setEntityForm }, `${tab.id}_${cacheKey}_${createStepFields.join(',')}_panel`))) })] }) }));
+});

package/dist/listgrid/components/form/ui/ViewEntityFormSkeleton.d.ts

@@ -0,0 +1,16 @@
+import { EntityForm } from '../../../config/EntityForm';
+interface ViewEntityFormSkeletonProps {
+    entityForm?: EntityForm;
+    /** 인라인 모드 여부 */
+    inlineMode?: boolean;
+    /** SubCollection 모드 여부 */
+    subCollectionEntity?: boolean;
+}
+/**
+ * EntityForm 구조 기반 스켈레톤 컴포넌트
+ *
+ * EntityForm의 Tab, FieldGroup, Field 메타데이터를 분석하여
+ * 실제 레이아웃과 동일한 스켈레톤을 생성합니다.
+ */
+export declare const ViewEntityFormSkeleton: ({ entityForm, inlineMode, subCollectionEntity, }: ViewEntityFormSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export default ViewEntityFormSkeleton;

package/dist/listgrid/components/form/ui/ViewEntityFormSkeleton.js

@@ -0,0 +1,79 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEntityFormTheme } from '../context/EntityFormThemeContext';
+// Inline sizing for skeleton blocks — keeps the CSS surface small while the
+// component decides per-placeholder shape. Library-provided `rcm-skeleton` /
+// `rcm-skeleton-accent` / `rcm-skeleton-danger` classes own the pulse and
+// color; host CSS overrides either by redefining those classes or by re-
+// targeting `.rcm-skeleton` via an unlayered selector.
+const size = (height, width) => ({
+    height: typeof height === 'number' ? `${height}px` : height,
+    ...(width !== undefined ? { width: typeof width === 'number' ? `${width}px` : width } : {}),
+});
+/**
+ * EntityForm 구조 기반 스켈레톤 컴포넌트
+ *
+ * EntityForm의 Tab, FieldGroup, Field 메타데이터를 분석하여
+ * 실제 레이아웃과 동일한 스켈레톤을 생성합니다.
+ */
+export const ViewEntityFormSkeleton = ({ entityForm, inlineMode = false, subCollectionEntity = false, }) => {
+    const { classNames, cn } = useEntityFormTheme();
+    // EntityForm이 없으면 기본 스켈레톤
+    if (!entityForm) {
+        return _jsx(DefaultSkeleton, { inlineMode: inlineMode });
+    }
+    // 탭 정보 추출
+    const tabs = Array.from(entityForm.tabs.values())
+        .filter((tab) => !tab.hidden)
+        .sort((a, b) => a.order - b.order);
+    const showTabs = tabs.length > 1;
+    return (_jsxs("div", { className: cn('rcm-pulse', classNames.root), children: [!inlineMode && (_jsx("div", { className: "rcm-skeleton-row", children: _jsx("div", { className: "rcm-skeleton", style: size(28, 192) }) })), _jsx("div", { className: cn(inlineMode ? 'rcm-panel rcm-panel-compact' : 'rcm-skeleton-panel', inlineMode ? '' : classNames.panel?.container), children: _jsxs("div", { className: cn(inlineMode ? '' : 'rcm-skeleton-inner', inlineMode ? '' : classNames.panel?.inner), children: [inlineMode && (_jsxs("div", { className: showTabs
+                                ? 'rcm-row-between rcm-skeleton-tab-bar'
+                                : 'rcm-row-between rcm-skeleton-row', children: [_jsx("div", { className: "rcm-row rcm-flex-1", children: showTabs &&
+                                        tabs.map((tab, index) => (_jsx("div", { className: index === 0 ? 'rcm-skeleton rcm-skeleton-accent' : 'rcm-skeleton', style: size(32, index === 0 ? 80 : 64) }, tab.id))) }), _jsxs("div", { className: "rcm-row", children: [_jsx("div", { className: "rcm-skeleton rcm-skeleton-accent", style: size(28, 56) }), _jsx("div", { className: "rcm-skeleton rcm-skeleton-danger", style: size(28, 56) })] })] })), !inlineMode && showTabs && (_jsx("div", { className: "rcm-row rcm-skeleton-tab-bar", children: tabs.map((tab, index) => (_jsx("div", { className: index === 0
+                                    ? 'rcm-skeleton rcm-skeleton-accent rcm-skeleton-tab-active'
+                                    : 'rcm-skeleton', style: size(40, index === 0 ? 96 : 80) }, tab.id))) })), tabs.length > 0 && (_jsx(FieldGroupsSkeleton, { fieldGroups: tabs[0].fieldGroups, entityForm: entityForm, subCollectionEntity: subCollectionEntity })), !inlineMode && (_jsxs("div", { className: "rcm-action-bar-end", children: [_jsx("div", { className: "rcm-skeleton rcm-skeleton-accent", style: size(40, 80) }), _jsx("div", { className: "rcm-skeleton", style: size(40, 80) }), _jsx("div", { className: "rcm-skeleton rcm-skeleton-danger", style: size(40, 80) })] }))] }) })] }));
+};
+const FieldGroupsSkeleton = ({ fieldGroups, entityForm, subCollectionEntity, }) => {
+    const sortedGroups = [...fieldGroups].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    return (_jsx("div", { className: "rcm-stack", children: sortedGroups.map((group) => {
+            const containerClass = subCollectionEntity
+                ? 'rcm-panel rcm-panel-muted rcm-panel-compact'
+                : 'rcm-panel';
+            return (_jsxs("div", { className: containerClass, children: [_jsx("div", { className: "rcm-skeleton-row", children: _jsx("div", { className: "rcm-skeleton", style: size(20, 96) }) }), _jsx("div", { className: "rcm-stack", children: [...group.fields]
+                            .sort((a, b) => a.order - b.order)
+                            .map((fieldItem) => {
+                            const field = entityForm.fields.get(fieldItem.name);
+                            return (_jsx(FieldSkeleton, { fieldName: fieldItem.name, ...(field !== undefined ? { field } : {}) }, fieldItem.name));
+                        }) })] }, group.id));
+        }) }));
+};
+const FieldSkeleton = ({ fieldName: _fieldName, field }) => {
+    const getFieldHeight = () => {
+        if (!field)
+            return 40;
+        // Subclass-specific config access (e.g. CustomOptionField.config.fieldType);
+        // EntityField base has no `config`, so we probe via a narrow structural cast.
+        const fieldType = field.config?.fieldType;
+        switch (fieldType) {
+            case 'HTML':
+            case 'RICH_TEXT':
+                return 128;
+            case 'TEXT_AREA':
+                return 96;
+            case 'CHECKBOX':
+            case 'RADIO':
+                return 24;
+            default:
+                return 40;
+        }
+    };
+    return (_jsxs("div", { className: "rcm-field-root", children: [_jsx("div", { className: "rcm-skeleton", style: size(16, 80) }), _jsx("div", { className: "rcm-skeleton", style: size(getFieldHeight()) })] }));
+};
+/**
+ * 기본 스켈레톤 (EntityForm 정보 없을 때)
+ */
+const DefaultSkeleton = ({ inlineMode }) => {
+    return (_jsxs("div", { className: "rcm-pulse", children: [!inlineMode && (_jsx("div", { className: "rcm-skeleton-row", children: _jsx("div", { className: "rcm-skeleton", style: size(28, 192) }) })), _jsxs("div", { className: inlineMode ? 'rcm-panel' : '', children: [_jsxs("div", { className: "rcm-row rcm-skeleton-tab-bar", children: [_jsx("div", { className: "rcm-skeleton", style: size(32, 80) }), _jsx("div", { className: "rcm-skeleton", style: size(32, 64) })] }), _jsx("div", { className: "rcm-stack", children: [1, 2, 3, 4].map((i) => (_jsxs("div", { className: "rcm-field-root", children: [_jsx("div", { className: "rcm-skeleton", style: size(16, 80) }), _jsx("div", { className: "rcm-skeleton", style: size(40) })] }, i))) }), !inlineMode && (_jsxs("div", { className: "rcm-action-bar-end", children: [_jsx("div", { className: "rcm-skeleton", style: size(40, 80) }), _jsx("div", { className: "rcm-skeleton", style: size(40, 80) })] }))] })] }));
+};
+export default ViewEntityFormSkeleton;

package/dist/listgrid/components/form/ui/ViewEntityFormTitle.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+/**
+ * ViewEntityFormTitle 컴포넌트
+ * - EntityForm의 제목 영역만 렌더링합니다.
+ * - 20자 이상이면 Tooltip으로 감싸서 표시합니다.
+ *
+ * @param props.title - 제목(ReactNode)
+ * @param props.hideTitle - 제목 숨김 여부
+ */
+interface ViewEntityFormTitleProps {
+    title: ReactNode;
+    hideTitle?: boolean;
+}
+export declare const ViewEntityFormTitle: React.NamedExoticComponent<ViewEntityFormTitleProps>;
+export {};

package/dist/listgrid/components/form/ui/ViewEntityFormTitle.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Tooltip } from '../../../ui';
+import { getTranslation } from '../../../utils/i18n';
+import { useEntityFormTheme } from '../context/EntityFormThemeContext';
+export const ViewEntityFormTitle = React.memo(function ViewEntityFormTitle({ title, hideTitle, }) {
+    const { t } = getTranslation();
+    const { classNames, cn } = useEntityFormTheme();
+    if (hideTitle)
+        return null;
+    if (typeof title === 'string') {
+        const titleText = t(title);
+        const titleView = (_jsx("div", { className: cn('flex items-center mt-2 min-h-[60px] truncate py-3 pt-2 md:mt-0', classNames.title?.container), children: _jsx("span", { className: cn('text-[1.8rem] font-bold dark:text-white-light', classNames.title?.text), children: titleText }) }));
+        if (titleText.length > 20) {
+            return (_jsx(Tooltip, { label: titleText, usePortal: true, position: "top-start", children: titleView }));
+        }
+        return titleView;
+    }
+    // ReactNode가 string이 아니면 JSX.Element로 강제 변환
+    return _jsx(_Fragment, { children: title });
+});

package/dist/listgrid/components/form/ui/ViewFieldError.d.ts

@@ -0,0 +1,5 @@
+interface ViewErrorProps {
+    errors?: string[];
+}
+export declare const ViewFieldError: (props: ViewErrorProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/listgrid/components/form/ui/ViewFieldError.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { getTranslation } from '../../../utils/i18n';
+export const ViewFieldError = (props) => {
+    const { t } = getTranslation();
+    if (!props.errors || props.errors.length === 0)
+        return null;
+    const errors = [];
+    props.errors?.forEach((error, index) => {
+        errors.push(_jsx("div", { className: "rcm-field-error", children: t(error ?? '') }, index));
+    });
+    return _jsx(_Fragment, { children: errors });
+};

package/dist/listgrid/components/form/ui/ViewHelpIcon.d.ts

@@ -0,0 +1,5 @@
+interface ViewHelpIconProps {
+    helpText?: string;
+}
+export declare const ViewHelpIcon: (props: ViewHelpIconProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};