@rchemist/listgrid 0.2.6

package/dist/listgrid/components/form/context/index.js

@@ -0,0 +1 @@
+export { EntityFormThemeProvider, useEntityFormTheme, EntityFormThemeContext, } from './EntityFormThemeContext';

package/dist/listgrid/components/form/hooks/useAlertManager.d.ts

@@ -0,0 +1,12 @@
+import { AlertMessage, AlertMessageLink } from '../../../config/EntityFormTypes';
+import { AlertStyles } from '../types/ViewEntityFormAlerts.types';
+export declare const useAlertManager: (alertMessages: AlertMessage[], onRemove?: (key: string) => void, onTabChange?: (tabId: string) => void, onFieldFocus?: (fieldName: string) => void) => {
+    visibleAlerts: AlertMessage[];
+    isCollapsed: boolean;
+    handleLinkClick: (link: AlertMessageLink) => void;
+    handleCloseAlert: (key: string) => void;
+    toggleCollapse: () => void;
+    getDominantColor: () => "info" | "success" | "warning" | "danger";
+};
+export declare const getAlertStyles: (color: AlertMessage["color"]) => AlertStyles;
+export declare const getIndicatorTone: (color: string) => "info" | "success" | "warning" | "error";

package/dist/listgrid/components/form/hooks/useAlertManager.js

@@ -0,0 +1,103 @@
+'use client';
+import { useCallback, useEffect, useState } from 'react';
+import { useModalManagerStore } from '../../../store';
+import { IconAlertTriangle, IconCheck, IconInfoCircle } from '@tabler/icons-react';
+export const useAlertManager = (alertMessages, onRemove, onTabChange, onFieldFocus) => {
+    const { openModal } = useModalManagerStore();
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const [closedAlerts, setClosedAlerts] = useState(new Set());
+    // alertMessages가 변경되면 닫힌 알림 초기화
+    useEffect(() => {
+        setClosedAlerts(new Set());
+    }, [alertMessages.length]);
+    // 닫히지 않은 알림들
+    const visibleAlerts = alertMessages.filter((alert) => !closedAlerts.has(alert.key));
+    const handleLinkClick = useCallback((link) => {
+        const linkType = link.type || 'tab';
+        switch (linkType) {
+            case 'tab':
+                if (typeof link.value === 'string' && onTabChange) {
+                    onTabChange(link.value);
+                }
+                break;
+            case 'field':
+                if (typeof link.value === 'string' && onFieldFocus) {
+                    onFieldFocus(link.value);
+                }
+                break;
+            case 'external':
+                if (typeof link.value === 'string') {
+                    window.open(link.value, link.target || '_blank');
+                }
+                break;
+            case 'modal':
+                if (typeof link.value === 'object' && link.value !== null) {
+                    openModal(link.value);
+                }
+                break;
+        }
+    }, [onTabChange, onFieldFocus, openModal]);
+    const handleCloseAlert = useCallback((key) => {
+        setClosedAlerts((prev) => new Set(prev).add(key));
+        if (onRemove) {
+            onRemove(key);
+        }
+    }, [onRemove]);
+    const toggleCollapse = useCallback(() => {
+        setIsCollapsed((prev) => !prev);
+    }, []);
+    // 주요 알림 색상 결정 (우선순위 기반)
+    const getDominantColor = useCallback(() => {
+        const hasColor = (color) => visibleAlerts.some((alert) => alert.color === color);
+        // 우선순위: danger > warning > success > info
+        if (hasColor('danger'))
+            return 'danger';
+        if (hasColor('warning'))
+            return 'warning';
+        if (hasColor('success'))
+            return 'success';
+        return 'info';
+    }, [visibleAlerts]);
+    return {
+        visibleAlerts,
+        isCollapsed,
+        handleLinkClick,
+        handleCloseAlert,
+        toggleCollapse,
+        getDominantColor,
+    };
+};
+// 알림 스타일 가져오기 — rcm-notice 기본 + data-tone 반환
+// className / dataTone 을 분리해 consumer 에서 data 속성으로 전달합니다.
+export const getAlertStyles = (color) => {
+    const base = { className: 'rcm-notice' };
+    switch (color) {
+        case 'success':
+            return { ...base, dataTone: 'success', icon: IconCheck };
+        case 'danger':
+            return { ...base, dataTone: 'error', icon: IconAlertTriangle };
+        case 'warning':
+            return { ...base, dataTone: 'warning', icon: IconAlertTriangle };
+        case 'info':
+            return { ...base, dataTone: 'info', icon: IconInfoCircle };
+        case 'secondary':
+        case 'primary':
+        case 'dark':
+            return { ...base, icon: IconInfoCircle };
+        default:
+            return { ...base, dataTone: 'info', icon: IconInfoCircle };
+    }
+};
+// 색상 → data-tone 값 매핑 (알림 요약 헤더의 인디케이터 점)
+export const getIndicatorTone = (color) => {
+    switch (color) {
+        case 'danger':
+            return 'error';
+        case 'warning':
+            return 'warning';
+        case 'success':
+            return 'success';
+        default:
+            return 'info';
+    }
+};

package/dist/listgrid/components/form/hooks/useEntityFormAutoSave.d.ts

@@ -0,0 +1,23 @@
+import { EntityForm } from '../../../config/EntityForm';
+interface UseEntityFormAutoSaveOptions {
+    entityForm?: EntityForm;
+    enabled: boolean;
+    autoSaveKey?: string;
+}
+/**
+ * EntityForm 자동 저장 훅
+ * - sessionStorage에 필드 값을 자동 저장
+ * - 새로고침 시 저장된 값 복원
+ * - 탭/브라우저 닫으면 자동 삭제 (sessionStorage 특성)
+ */
+export declare function useEntityFormAutoSave({ entityForm, enabled, autoSaveKey, }: UseEntityFormAutoSaveOptions): {
+    /** 현재 상태를 즉시 저장 */
+    saveNow: () => Promise<void>;
+    /** 디바운스된 저장 (필드 변경 시 호출) */
+    triggerSave: () => void;
+    /** 저장된 데이터 삭제 */
+    clearAutoSave: () => void;
+    /** 저장된 데이터 복원 */
+    restore: () => Promise<boolean>;
+};
+export {};

package/dist/listgrid/components/form/hooks/useEntityFormAutoSave.js

@@ -0,0 +1,145 @@
+'use client';
+import { useCallback, useEffect, useRef } from 'react';
+const AUTO_SAVE_PREFIX = 'entityform_autosave_';
+const AUTO_SAVE_DEBOUNCE_MS = 1000; // 1초 디바운스
+/**
+ * EntityForm 자동 저장 훅
+ * - sessionStorage에 필드 값을 자동 저장
+ * - 새로고침 시 저장된 값 복원
+ * - 탭/브라우저 닫으면 자동 삭제 (sessionStorage 특성)
+ */
+export function useEntityFormAutoSave({ entityForm, enabled, autoSaveKey, }) {
+    const debounceTimerRef = useRef(null);
+    const isRestoredRef = useRef(false);
+    // 스토리지 키 생성
+    const getStorageKey = useCallback(() => {
+        if (!entityForm)
+            return null;
+        const entityName = entityForm.name;
+        const entityId = entityForm.id ?? 'create';
+        const suffix = autoSaveKey ? `_${autoSaveKey}` : '';
+        return `${AUTO_SAVE_PREFIX}${entityName}_${entityId}${suffix}`;
+    }, [entityForm, autoSaveKey]);
+    // 현재 필드 값들을 가져오기
+    const getFieldValues = useCallback(async () => {
+        if (!entityForm)
+            return {};
+        const values = {};
+        const fields = entityForm.getFields();
+        for (const field of fields) {
+            try {
+                const fieldName = field.name;
+                const value = await field.getCurrentValue('update');
+                // undefined나 null이 아닌 값만 저장
+                if (value !== undefined && value !== null) {
+                    values[fieldName] = value;
+                }
+            }
+            catch (e) {
+                // 값을 가져올 수 없는 필드는 건너뜀
+            }
+        }
+        return values;
+    }, [entityForm]);
+    // sessionStorage에 저장
+    const saveToStorage = useCallback(async () => {
+        if (!enabled || !entityForm || typeof window === 'undefined')
+            return;
+        const storageKey = getStorageKey();
+        if (!storageKey)
+            return;
+        try {
+            const values = await getFieldValues();
+            // 저장할 값이 없으면 스킵
+            if (Object.keys(values).length === 0)
+                return;
+            const data = {
+                values,
+                savedAt: Date.now(),
+                entityName: entityForm.name,
+                ...(entityForm.id !== undefined ? { entityId: entityForm.id } : {}),
+            };
+            sessionStorage.setItem(storageKey, JSON.stringify(data));
+        }
+        catch (e) {
+            console.error('Failed to auto-save EntityForm:', e);
+        }
+    }, [enabled, entityForm, getStorageKey, getFieldValues]);
+    // sessionStorage에서 복원
+    const restoreFromStorage = useCallback(async () => {
+        if (!enabled || !entityForm || typeof window === 'undefined')
+            return false;
+        const storageKey = getStorageKey();
+        if (!storageKey)
+            return false;
+        try {
+            const saved = sessionStorage.getItem(storageKey);
+            if (!saved)
+                return false;
+            const data = JSON.parse(saved);
+            // 엔티티 이름이 일치하는지 확인
+            if (data.entityName !== entityForm.name) {
+                sessionStorage.removeItem(storageKey);
+                return false;
+            }
+            // 저장된 값을 필드에 적용
+            for (const [fieldName, value] of Object.entries(data.values)) {
+                const field = entityForm.getField(fieldName);
+                if (field && value !== undefined) {
+                    // withDefaultValue를 사용하여 초기값으로 설정
+                    field.withDefaultValue(value);
+                }
+            }
+            return true;
+        }
+        catch (e) {
+            console.error('Failed to restore EntityForm from auto-save:', e);
+            return false;
+        }
+    }, [enabled, entityForm, getStorageKey]);
+    // sessionStorage에서 삭제
+    const clearStorage = useCallback(() => {
+        if (typeof window === 'undefined')
+            return;
+        const storageKey = getStorageKey();
+        if (storageKey) {
+            sessionStorage.removeItem(storageKey);
+        }
+    }, [getStorageKey]);
+    // 디바운스된 저장 함수
+    const debouncedSave = useCallback(() => {
+        if (!enabled)
+            return;
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        debounceTimerRef.current = setTimeout(() => {
+            saveToStorage();
+        }, AUTO_SAVE_DEBOUNCE_MS);
+    }, [enabled, saveToStorage]);
+    // 컴포넌트 언마운트 시 타이머 정리
+    useEffect(() => {
+        return () => {
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
+            }
+        };
+    }, []);
+    // 초기 복원 (한 번만 실행)
+    useEffect(() => {
+        if (enabled && entityForm && !isRestoredRef.current) {
+            isRestoredRef.current = true;
+            restoreFromStorage();
+        }
+    }, [enabled, entityForm, restoreFromStorage]);
+    return {
+        /** 현재 상태를 즉시 저장 */
+        saveNow: saveToStorage,
+        /** 디바운스된 저장 (필드 변경 시 호출) */
+        triggerSave: debouncedSave,
+        /** 저장된 데이터 삭제 */
+        clearAutoSave: clearStorage,
+        /** 저장된 데이터 복원 */
+        restore: restoreFromStorage,
+    };
+}

package/dist/listgrid/components/form/hooks/useEntityFormInitializer.d.ts

@@ -0,0 +1,24 @@
+import { EntityForm } from '../../../config/EntityForm';
+import { EntityTab } from '../../../config/EntityTab';
+import { Session } from '../../../auth/types';
+import { EntityButtonLinkProps } from '../../../config/Config';
+/**
+ * Custom hook for initializing EntityForm state and tabs.
+ * EntityForm 상태 및 탭 초기화를 위한 커스텀 훅
+ * @param params - 초기화에 필요한 파라미터 객체
+ */
+export declare const useEntityFormInitializer: ({ entityForm: initialEntityForm, isSubCollectionEntity, pathname, session, buttonLinks, onInitialize, setTabs, setTabIndex, setEntityForm, setTitleText, setLoadingError, }: {
+    entityForm: EntityForm;
+    isSubCollectionEntity: boolean;
+    pathname: string;
+    session?: Session;
+    buttonLinks?: EntityButtonLinkProps;
+    onInitialize?: (entityForm: EntityForm) => Promise<EntityForm>;
+    setTabs: (tabs: EntityTab[]) => void;
+    setTabIndex: (tabId: string) => void;
+    setEntityForm: (entityForm: EntityForm) => void;
+    setTitleText: (entityForm: EntityForm) => void;
+    setLoadingError: (error: boolean) => void;
+}) => (options?: {
+    preserveTabIndex?: boolean;
+}) => Promise<void>;

package/dist/listgrid/components/form/hooks/useEntityFormInitializer.js

@@ -0,0 +1,109 @@
+'use client';
+import { useCallback } from 'react';
+import { useRouter } from '../../../router';
+import { isEmpty } from '../../../utils';
+import { removeTrailingSeparator } from '../../../utils/StringUtil';
+import { showAlert } from '../../../message';
+import { isTrue } from '../../../utils/BooleanUtil';
+/**
+ * Custom hook for initializing EntityForm state and tabs.
+ * EntityForm 상태 및 탭 초기화를 위한 커스텀 훅
+ * @param params - 초기화에 필요한 파라미터 객체
+ */
+export const useEntityFormInitializer = ({ entityForm: initialEntityForm, isSubCollectionEntity, pathname, session, buttonLinks, onInitialize, setTabs, setTabIndex, setEntityForm, setTitleText, setLoadingError, }) => {
+    const router = useRouter();
+    /**
+     * EntityForm을 초기화하고 탭/타이틀/상태를 세팅합니다.
+     * @param options - 초기화 옵션 (preserveTabIndex: 탭 인덱스 보존 여부)
+     * @returns Promise<void>
+     */
+    const initializeEntityForm = useCallback(async (options) => {
+        try {
+            const actionResult = await initialEntityForm.initialize(session !== undefined ? { session } : {});
+            let entityForm = actionResult.entityForm;
+            if (actionResult.errors && !isEmpty(actionResult.errors)) {
+                const listUrl = removeTrailingSeparator(pathname ?? '', '/') || '/';
+                setLoadingError(true);
+                showAlert({
+                    message: `데이터 조회 중 오류가 발생 했습니다.\n${actionResult.errors[0]}`,
+                    title: '오류',
+                    icon: 'error',
+                    topLayer: true,
+                });
+                // 에러 메시지 표시 후 목록으로 이동
+                setTimeout(async () => {
+                    if (buttonLinks?.onClickList) {
+                        await buttonLinks.onClickList();
+                    }
+                    else {
+                        router.push(listUrl);
+                    }
+                }, 1000);
+            }
+            else {
+                if (onInitialize) {
+                    entityForm = await onInitialize(entityForm);
+                }
+                let tabId = '';
+                // main entity에만 revisionEntityName을 설정
+                if (!isSubCollectionEntity) {
+                    if (typeof window !== 'undefined') {
+                        let revisionPath = '';
+                        if (entityForm?.id) {
+                            const id = entityForm.id;
+                            const idIndex = pathname.lastIndexOf(`/${id}`);
+                            if (idIndex !== -1) {
+                                revisionPath = pathname.substring(0, idIndex);
+                            }
+                            else {
+                                revisionPath = pathname;
+                            }
+                        }
+                        else {
+                            revisionPath = pathname;
+                        }
+                        entityForm?.setRevisionEntityNameIfBlank(revisionPath);
+                    }
+                }
+                // createStep 이 있다면 첫 단계에 대한 필드만 추출한다.
+                const createStepFields = [];
+                if (entityForm.getCreateStep()) {
+                    // entityForm.createStep 을 order 로 sort 한다.
+                    createStepFields.push(...entityForm.getCreateStep()[0].fields);
+                }
+                const tabs = await entityForm.getViewableTabs(false, createStepFields);
+                setTabs(tabs);
+                // preserveTabIndex 옵션이 true가 아닐 때만 탭 인덱스 초기화
+                if (!options?.preserveTabIndex) {
+                    for (const tab of tabs) {
+                        if (!isTrue(tab.hidden)) {
+                            tabId = tab.id;
+                            break;
+                        }
+                    }
+                    setTabIndex(tabId);
+                }
+                setEntityForm(entityForm);
+                setTitleText(entityForm);
+            }
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Error in initializeEntityForm:', error);
+        }
+    }, [
+        initialEntityForm,
+        isSubCollectionEntity,
+        pathname,
+        session,
+        buttonLinks,
+        onInitialize,
+        setTabs,
+        setTabIndex,
+        setEntityForm,
+        setTitleText,
+        setLoadingError,
+        router,
+    ]);
+    return initializeEntityForm;
+};

package/dist/listgrid/components/form/hooks/useEntityFormLogic.d.ts

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+import { ModalOptions } from '../../../store';
+import { EntityForm } from '../../../config/EntityForm';
+import { EntityTab } from '../../../config/EntityTab';
+import { RenderType } from '../../../config/Config';
+import { Session } from '../../../auth/types';
+import { ViewEntityFormProps } from '../types/ViewEntityForm.types';
+/**
+ * useEntityFormLogic 훅
+ * - ViewEntityForm의 모든 상태/핸들러/로직을 관리하는 커스텀 훅
+ * - 렌더링에 필요한 모든 값/함수만 반환
+ *
+ * @param props ViewEntityFormProps
+ */
+export declare function useEntityFormLogic(props: ViewEntityFormProps): {
+    entityForm: EntityForm<any> | undefined;
+    setEntityForm: import("react").Dispatch<import("react").SetStateAction<EntityForm<any> | undefined>>;
+    tabIndex: string | undefined;
+    setTabIndex: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    cacheKey: string | undefined;
+    setCacheKey: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    loadingError: boolean;
+    initialized: boolean;
+    errors: string[];
+    setErrors: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+    notifications: string[];
+    setNotifications: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+    title: ReactNode;
+    setTitle: import("react").Dispatch<import("react").SetStateAction<ReactNode>>;
+    renderType: RenderType | undefined;
+    setRenderType: import("react").Dispatch<import("react").SetStateAction<RenderType | undefined>>;
+    selectedTabIndex: number;
+    setSelectedTabIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    currentStep: number;
+    setCurrentStep: (stepNumber: number) => void;
+    showStepper: boolean;
+    setShowStepper: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    tabs: EntityTab[];
+    setTabs: import("react").Dispatch<import("react").SetStateAction<EntityTab[]>>;
+    isSubCollectionEntity: boolean;
+    isInlineMode: boolean;
+    readonly: boolean;
+    popupMode: boolean;
+    session: Session | null;
+    useCreateStep: boolean;
+    maxStep: number;
+    createStepFields: string[];
+    buttons: ReactNode[];
+    headerAreaContent: ReactNode;
+    postSave: (entityForm: EntityForm) => Promise<EntityForm>;
+    postDelete: (entityForm: EntityForm) => Promise<void>;
+    updateTitle: (form?: EntityForm) => Promise<void>;
+    onClickSaveButton: () => Promise<void>;
+    showModal: (options: ModalOptions) => string;
+    closeModal: (id: string) => Promise<void>;
+    closeTopModal: () => Promise<void>;
+    getModalData: (id: string) => unknown;
+    updateModalData: (id: string, data: Partial<ModalOptions>) => void;
+    resetEntityForm: (delay?: number, preserveState?: boolean) => Promise<void>;
+    triggerAutoSave: () => void;
+    clearAutoSave: () => void;
+    saveAutoSaveNow: () => Promise<void>;
+};