@rchemist/listgrid 0.2.6

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

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { readonlyClass } from '../../../ui';
+import { Tooltip } from '../../../ui';
+import { IconExternalLink } from '@tabler/icons-react';
+import { isBlank } from '../../../utils/StringUtil';
+import { normalizeUrl } from '../../../misc';
+export const LinkFieldView = (props) => {
+    const [value, setValue] = useState(props.value ?? '');
+    useEffect(() => {
+        setValue(props.value);
+    }, [props.value]);
+    const input = (_jsx("input", { type: 'text', className: readonlyClass(props.readonly, `rcm-input${!isBlank(value) ? ' rcm-link-input-grouped' : ''}${props.className ? ' ' + props.className : ''}`), id: `${props.name}`, value: value ?? '', placeholder: props.placeHolder, disabled: props.readonly, min: props.min, max: props.max, onChange: (e) => {
+            const value = e.target.value ?? '';
+            setValidatedValue(props, value, setValue);
+        } }));
+    if (props.tooltip !== undefined) {
+        return (_jsx(Tooltip, { label: props.tooltip.label, color: props.tooltip.color, children: _jsx("div", { className: "rcm-input-group-full", children: _jsxs("div", { className: "rcm-input-group-full-center", children: [_jsx("div", { className: "rcm-input-group-full-relative", children: _jsx("div", { className: "rcm-input-group-full", children: input }) }), !isBlank(value) && (_jsx("button", { type: "button", className: "rcm-link-button rcm-input-addon-btn", onClick: () => {
+                                window.open(normalizeUrl(value), '_blank');
+                            }, children: _jsx(IconExternalLink, { className: "rcm-m2o-action-icon" }) }))] }) }) }));
+    }
+    return (_jsx("div", { className: "rcm-input-group-full", children: _jsxs("div", { className: "rcm-input-group-full-center", children: [_jsx("div", { className: "rcm-input-group-full-relative", children: _jsx("div", { className: "rcm-m2o-input-wrap", children: input }) }), !isBlank(value) && (_jsx("button", { type: "button", className: "rcm-link-button rcm-input-addon-btn", onClick: () => {
+                        window.open(normalizeUrl(value), '_blank');
+                    }, children: _jsx(IconExternalLink, { className: "rcm-m2o-action-icon" }) }))] }) }));
+};
+function setValidatedValue(props, value, setValue) {
+    let acceptable = true;
+    let errorMessage = 'form.save.error.invalid';
+    if (props.regex !== undefined) {
+        acceptable = props.regex.pattern.test(value);
+        errorMessage = props.regex.message;
+    }
+    setValue(value);
+    props.onChange(value, false);
+    if (!acceptable) {
+        setTimeout(() => {
+            props.onError?.(errorMessage);
+        }, 50);
+    }
+}

package/dist/listgrid/components/fields/view/ManyToOneListView.d.ts

@@ -0,0 +1,8 @@
+import { EntityForm } from '../../../config/EntityForm';
+interface ManyToOneListViewProps {
+    id?: string;
+    value: string;
+    entityForm: EntityForm;
+}
+export declare const ManyToOneListView: ({ value, id, entityForm }: ManyToOneListViewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ViewEntityForm } from '../../form/ViewEntityForm';
+import { IconExternalLink } from '@tabler/icons-react';
+import { useModalManagerStore } from '../../../store';
+export const ManyToOneListView = ({ value, id, entityForm }) => {
+    const { openModal, closeModal } = useModalManagerStore();
+    return (_jsx("div", { children: _jsxs("div", { className: 'flex space-x-1 items-center', children: [_jsx("span", { children: value }), id && (_jsx("button", { className: 'w-6 h-6', onClick: (e) => {
+                        e.stopPropagation();
+                        const modalId = `many-to-one-list-view-${id}`;
+                        const viewEntityForm = entityForm.clone(true).withId(id);
+                        if (viewEntityForm.title === undefined) {
+                            viewEntityForm.withTitle('정보 조회');
+                        }
+                        openModal({
+                            modalId,
+                            title: `View ${value}`,
+                            size: '5xl',
+                            content: (_jsx(ViewEntityForm, { entityForm: viewEntityForm, buttonLinks: {
+                                    onClickList: async () => {
+                                        closeModal(modalId);
+                                    },
+                                }, subCollection: true, readonly: true })),
+                        });
+                    }, children: _jsx(IconExternalLink, { className: 'w-4 h-4' }) }))] }) }));
+};

package/dist/listgrid/components/fields/view/ManyToOneMultiFilterView.d.ts

@@ -0,0 +1,12 @@
+import { ManyToOneConfig } from '../../../config/Config';
+import { EntityForm } from '../../../config/EntityForm';
+interface ManyToOneMultiFilterViewProps {
+    name: string;
+    label?: string | undefined;
+    config: ManyToOneConfig;
+    parentEntityForm: EntityForm;
+    value?: string[] | undefined;
+    onChange: (value: string[]) => void;
+}
+export declare const ManyToOneMultiFilterView: ({ name, label, config, parentEntityForm, value, onChange, }: ManyToOneMultiFilterViewProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,142 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { IconPlus, IconX } from '@tabler/icons-react';
+import { ViewListGrid } from '../../list/ViewListGrid';
+import { ListGrid } from '../../../config/ListGrid';
+import { TreeSelectView } from './TreeSelectView';
+import { SearchForm } from '../../../form/SearchForm';
+import { useModalManagerStore } from '../../../store';
+export const ManyToOneMultiFilterView = ({ name, label, config, parentEntityForm, value, onChange, }) => {
+    const { openModal, closeModal } = useModalManagerStore();
+    const entityForm = config.entityForm;
+    const [selectedItems, setSelectedItems] = useState([]);
+    const [searchForm, setSearchForm] = useState();
+    const [mount, setMount] = useState(false);
+    // Initialize selected items from value (array of IDs)
+    useEffect(() => {
+        (async () => {
+            if (value && Array.isArray(value) && value.length > 0) {
+                const items = [];
+                for (const id of value) {
+                    try {
+                        const fetchEntityForm = entityForm.clone(true);
+                        fetchEntityForm.id = id;
+                        const response = await fetchEntityForm.fetchData();
+                        const data = response.data.data;
+                        if (data) {
+                            const displayName = await getDisplayName(data);
+                            items.push({
+                                id: id,
+                                name: displayName,
+                                data: data,
+                            });
+                        }
+                    }
+                    catch (e) {
+                        // If fetch fails, still add with ID as name
+                        items.push({
+                            id: id,
+                            name: id,
+                            data: { id },
+                        });
+                    }
+                }
+                setSelectedItems(items);
+            }
+            else {
+                setSelectedItems([]);
+            }
+            // Initialize search form with filters
+            const filter = config.filter ?? [];
+            const newSearchForm = SearchForm.create();
+            if (filter.length > 0) {
+                for (const filterItem of filter) {
+                    if (filterItem) {
+                        newSearchForm.withFilter('AND', ...(await filterItem(parentEntityForm)));
+                    }
+                }
+                if (entityForm.neverDelete) {
+                    newSearchForm.handleAndFilter('active', 'true');
+                }
+            }
+            setSearchForm(newSearchForm);
+            setMount(true);
+        })();
+    }, [value]);
+    const getDisplayName = async (data) => {
+        if (config.displayFunc) {
+            return await config.displayFunc(data);
+        }
+        if (config.field?.name) {
+            if (config.field.name instanceof Function) {
+                return config.field.name(data);
+            }
+            return data[config.field.name] ?? '';
+        }
+        return data.name ?? data.id ?? '';
+    };
+    const handleAddItem = (item) => {
+        const idField = config.field?.id ?? 'id';
+        const itemId = item[idField];
+        // Check if already selected
+        if (selectedItems.some((selected) => selected.id === itemId)) {
+            return;
+        }
+        (async () => {
+            const displayName = await getDisplayName(item);
+            const newItems = [
+                ...selectedItems,
+                {
+                    id: itemId,
+                    name: displayName,
+                    data: item,
+                },
+            ];
+            setSelectedItems(newItems);
+            onChange(newItems.map((i) => i.id));
+        })();
+    };
+    const handleRemoveItem = (itemId) => {
+        const newItems = selectedItems.filter((item) => item.id !== itemId);
+        setSelectedItems(newItems);
+        onChange(newItems.map((i) => i.id));
+    };
+    const handleSelectModal = () => {
+        const modalId = `manytoone-multi-select-${name}`;
+        // Clone searchForm and exclude already selected items
+        const modalSearchForm = searchForm?.clone() ?? SearchForm.create();
+        const idField = config.field?.id ?? 'id';
+        // Add NOT_IN filter to exclude already selected items
+        if (selectedItems.length > 0) {
+            const selectedIds = selectedItems.map((item) => item.id);
+            modalSearchForm.handleAndFilter(idField, selectedIds, 'NOT_IN');
+        }
+        openModal({
+            modalId,
+            title: `${label ?? name} 선택`,
+            size: '5xl',
+            content: (_jsx("div", { className: "rcm-modal-content-scroll", children: config.tree ? (_jsx(TreeSelectView, { entityForm: entityForm, tree: config.tree, onSelect: (item) => {
+                        handleAddItem(item);
+                        closeModal(modalId);
+                    } })) : (_jsx(ViewListGrid, { listGrid: new ListGrid(entityForm).withSearchForm(modalSearchForm), options: {
+                        popup: true,
+                        ...(config.filterable !== undefined ? { filterable: config.filterable } : {}),
+                        readonly: true,
+                        selection: {
+                            enabled: false,
+                        },
+                        manyToOne: {
+                            onSelect: (item) => {
+                                handleAddItem(item);
+                                closeModal(modalId);
+                            },
+                        },
+                    } })) })),
+        });
+    };
+    if (!mount) {
+        return null;
+    }
+    return (_jsxs("div", { className: "rcm-m2o-multi-wrap", children: [_jsxs("div", { className: "rcm-m2o-multi-chips", children: [selectedItems.map((item) => (_jsxs("div", { className: "rcm-m2o-multi-chip", children: [_jsx("span", { className: "rcm-m2o-multi-chip-label", children: item.name }), _jsx("button", { type: "button", onClick: () => handleRemoveItem(item.id), className: "rcm-m2o-multi-chip-remove", children: _jsx(IconX, { className: "rcm-m2o-multi-chip-remove-icon" }) })] }, item.id))), _jsxs("button", { type: "button", onClick: handleSelectModal, className: "rcm-m2o-multi-add", children: [_jsx(IconPlus, { className: "rcm-m2o-multi-add-icon" }), _jsx("span", { children: "\uCD94\uAC00" })] })] }), selectedItems.length === 0 && (_jsxs("p", { className: "rcm-m2o-multi-helper", children: ["\uCD94\uAC00 \uBC84\uD2BC\uC744 \uD074\uB9AD\uD558\uC5EC ", label ?? name, "\uC744(\uB97C) \uC120\uD0DD\uD558\uC138\uC694. \uC5EC\uB7EC \uAC1C\uB97C \uC120\uD0DD\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4."] }))] }));
+};

package/dist/listgrid/components/fields/view/ManyToOneView.d.ts

@@ -0,0 +1,8 @@
+import { InputRendererProps, ManyToOneConfig } from '../../../config/Config';
+import { EntityForm } from '../../../config/EntityForm';
+interface ManyToOneViewProps extends InputRendererProps {
+    config: ManyToOneConfig;
+    parentEntityForm: EntityForm;
+}
+export declare const ManyToOneView: ({ config, required, parentEntityForm, ...props }: ManyToOneViewProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,322 @@
+'use client';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Tooltip } from '../../../ui';
+import { IconCircleX, IconPlus, IconSearch, IconSettings2 } from '@tabler/icons-react';
+import { Dropdown } from '../../../ui';
+import { isTrue } from '../../../utils/BooleanUtil';
+import { isBlank } from '../../../utils/StringUtil';
+import { ViewListGrid } from '../../list/ViewListGrid';
+import { ListGrid } from '../../../config/ListGrid';
+import { TreeSelectView } from './TreeSelectView';
+import { SearchForm } from '../../../form/SearchForm';
+import { getManyToOneEntityValue } from '../ManyToOneField';
+import { ViewEntityForm } from '../../form/ViewEntityForm';
+import { useModalManagerStore } from '../../../store';
+import { useSession } from '../../../auth';
+// Value ID 추출 헬퍼
+function getValueId(val) {
+    if (!val)
+        return undefined;
+    if (typeof val === 'string')
+        return val;
+    if (typeof val === 'object' && val.id)
+        return val.id;
+    return undefined;
+}
+export const ManyToOneView = ({ config, required, parentEntityForm, ...props }) => {
+    const readonly = isTrue(props.readonly);
+    const { openModal, closeModal } = useModalManagerStore();
+    const session = useSession();
+    const entityForm = config.entityForm;
+    const menuUrl = config.entityForm.menuUrl; // 선택된 item 이 있는 경우 해당 item 으로 링크 처리
+    const subCollectionEntity = isTrue(props.subCollectionEntity, false);
+    const [name, setName] = useState('');
+    const [value, setValue] = useState();
+    const [defaultValue, setDefaultValue] = useState();
+    const [mount, setMount] = useState(false);
+    const [searchForm, setSearchForm] = useState();
+    // 로컬에서 선택한 값의 ID를 추적하여 불필요한 재처리 방지
+    const localValueIdRef = useRef(undefined);
+    // modifiable 권한 체크 함수
+    const checkModifiable = () => {
+        if (config.modifiable === true) {
+            return true;
+        }
+        if (typeof config.modifiable === 'object' && config.modifiable.roles) {
+            // session이 없으면 false
+            const userRoles = session?.getUser?.()?.roles;
+            if (!userRoles) {
+                return false;
+            }
+            return config.modifiable.roles.some((role) => userRoles.includes(role));
+        }
+        return false;
+    };
+    const isModifiable = checkModifiable();
+    useEffect(() => {
+        const propsValueId = getValueId(props.value);
+        // 로컬에서 이미 동일한 값을 선택한 경우, 재처리 스킵 (깜빡임 방지)
+        if (propsValueId && propsValueId === localValueIdRef.current && mount) {
+            return;
+        }
+        if (mount) {
+            setMount(false);
+        }
+        (async () => {
+            // props.value 를 json 에서 parse 된 object 타입이어야 한다.
+            if (props.value) {
+                let value = await getManyToOneEntityValue(props.name, props.value, config);
+                // Case 1: value가 문자열인 경우 (ID만 전달된 경우 - 상세검색 필터 등)
+                // getManyToOneEntityValue가 fetch하지 못하고 문자열 그대로 반환한 경우
+                if (typeof value === 'string' && value) {
+                    const fetchEntityForm = config.entityForm.clone(true);
+                    fetchEntityForm.id = value;
+                    try {
+                        const fetchedData = (await fetchEntityForm.fetchData()).data.data;
+                        if (fetchedData) {
+                            value = fetchedData;
+                        }
+                    }
+                    catch (e) {
+                        // fetch 실패 시 기존 value 사용
+                    }
+                }
+                // Case 2: value가 객체이고 id만 있는 경우 (name 등 display 정보가 없는 경우)
+                else if (value && typeof value === 'object' && value.id) {
+                    const hasDisplayInfo = config.displayFunc ||
+                        config.field?.name instanceof Function ||
+                        (config.field?.name && value[config.field.name]) ||
+                        value.name;
+                    if (!hasDisplayInfo) {
+                        // display 정보가 없으면 id로 fetch
+                        const fetchEntityForm = config.entityForm.clone(true);
+                        fetchEntityForm.id = value.id;
+                        try {
+                            const fetchedData = (await fetchEntityForm.fetchData()).data.data;
+                            if (fetchedData) {
+                                value = fetchedData;
+                            }
+                        }
+                        catch (e) {
+                            // fetch 실패 시 기존 value 사용
+                        }
+                    }
+                }
+                setManyToOneValue(value, true);
+            }
+            else {
+                // 값이 없을 때 name과 value 모두 초기화
+                setName('');
+                setValue('');
+                localValueIdRef.current = undefined;
+            }
+            const filter = [];
+            if (config.filter !== undefined) {
+                for (const filterItem of config.filter) {
+                    if (filterItem) {
+                        filter.push(filterItem);
+                    }
+                }
+            }
+            const searchForm = SearchForm.create();
+            if (filter !== undefined && filter.length > 0) {
+                for (const filterItem of filter) {
+                    searchForm.withFilter('AND', ...(await filterItem(parentEntityForm)));
+                }
+                if (entityForm.neverDelete) {
+                    searchForm.handleAndFilter('active', 'true');
+                }
+            }
+            setSearchForm(searchForm);
+            setMount(true);
+        })();
+    }, [props.value]);
+    if (!mount) {
+        // 아직 useEffect 가 실행되지 않았다면
+        return null;
+    }
+    // 선택 모달 핸들러
+    const handleSelectModal = () => {
+        const modalId = `manytoone-select-${props.name}`;
+        const isTree = !!config.tree;
+        const maxHeightValue = isTree ? undefined : '90vh';
+        openModal({
+            modalId,
+            title: `${props.label} 검색`,
+            size: isTree ? 'lg' : '5xl',
+            fullHeight: isTree ? false : true,
+            ...(maxHeightValue !== undefined ? { maxHeight: maxHeightValue } : {}),
+            content: (_jsx("div", { className: `modal-content flex flex-col overflow-hidden ${isTree ? '' : 'max-h-[85vh]'}`, children: isTree ? (_jsx(TreeSelectView, { entityForm: entityForm, tree: config.tree, onSelect: (item) => {
+                        setManyToOneValue(item);
+                        closeModal(modalId);
+                    } })) : (_jsx(ViewListGrid, { listGrid: new ListGrid(entityForm).withSearchForm(searchForm), options: {
+                        popup: true,
+                        ...(config.filterable !== undefined ? { filterable: config.filterable } : {}),
+                        readonly: true,
+                        ...(config.hideAdvancedSearch !== undefined
+                            ? { hideAdvancedSearch: config.hideAdvancedSearch }
+                            : {}),
+                        selection: {
+                            enabled: false,
+                        },
+                        manyToOne: {
+                            onSelect: (item) => {
+                                setManyToOneValue(item);
+                                closeModal(modalId);
+                            },
+                        },
+                    } })) })),
+        });
+    };
+    // 생성 모달 핸들러
+    const handleCreateModal = () => {
+        const modalId = `manytoone-create-${props.name}`;
+        openModal({
+            modalId,
+            title: `${props.label} 생성`,
+            size: '5xl',
+            content: (_jsx(ViewEntityForm, { entityForm: entityForm.clone(true), postSave: async (savedForm) => {
+                    const savedData = await savedForm.getValues();
+                    savedData.id = savedForm.id;
+                    setManyToOneValue(savedData);
+                    closeModal(modalId);
+                    return savedForm;
+                }, buttonLinks: {
+                    onClickList: async () => closeModal(modalId),
+                }, subCollection: true, readonly: false })),
+        });
+    };
+    // 수정 모달 핸들러
+    const handleEditModal = () => {
+        const modalId = `manytoone-edit-${props.name}-${value.id}`;
+        openModal({
+            modalId,
+            title: `${props.label} 수정`,
+            size: '5xl',
+            content: (_jsx(ViewEntityForm, { entityForm: entityForm.clone(true).withId(value.id), postSave: async (updatedForm) => {
+                    const updatedData = await updatedForm.getValues();
+                    setManyToOneValue(updatedData);
+                    closeModal(modalId);
+                    return updatedForm;
+                }, buttonLinks: {
+                    onClickList: async () => closeModal(modalId),
+                }, subCollection: true, readonly: false })),
+        });
+    };
+    // 보기 모달 핸들러
+    const handleViewModal = () => {
+        const modalId = `manytoone-view-${props.name}-${value.id}`;
+        const viewEntityForm = entityForm
+            .clone(true)
+            .withId(value.id)
+            .withTitle(value.id === undefined
+            ? undefined
+            : {
+                view: async () => (name ? `정보 조회 > ${name}` : '정보 조회'),
+            });
+        openModal({
+            modalId,
+            title: `${props.label} 조회`,
+            size: '5xl',
+            content: (_jsx(ViewEntityForm, { entityForm: viewEntityForm, buttonLinks: {
+                    onClickList: async () => closeModal(modalId),
+                }, subCollection: true, readonly: true })),
+        });
+    };
+    return (_jsx("div", { className: "rcm-input-group-full", children: _jsxs("div", { className: "rcm-input-group-full-center", children: [_jsx("div", { className: "rcm-input-group-full-relative", children: _jsx("div", { className: "rcm-m2o-input-wrap", children: _jsx("input", { type: "text", className: "rcm-input rcm-m2o-input", placeholder: !readonly ? `찾기 버튼을 눌러 ${props.label} 을(를) 선택해 주세요` : '', value: name, disabled: readonly, readOnly: true, onClick: () => {
+                                if (!isBlank(value)) {
+                                    if (isModifiable && !readonly) {
+                                        handleEditModal();
+                                    }
+                                    else {
+                                        handleViewModal();
+                                    }
+                                }
+                                else if (!readonly) {
+                                    if (isModifiable) {
+                                        handleCreateModal();
+                                    }
+                                    else {
+                                        handleSelectModal();
+                                    }
+                                }
+                            } }) }) }), !isBlank(value) && (_jsx("div", { className: "rcm-m2o-addon", children: _jsx(Tooltip, { label: isModifiable && !readonly ? `정보 수정` : `정보 보기`, children: _jsx("button", { type: "button", className: "rcm-m2o-addon-btn", onClick: () => {
+                                if (isBlank(menuUrl) || !subCollectionEntity) {
+                                    if (isModifiable && !readonly) {
+                                        handleEditModal();
+                                    }
+                                    else {
+                                        handleViewModal();
+                                    }
+                                }
+                                else {
+                                    window.open(menuUrl + '/' + value.id, '_blank');
+                                }
+                            }, children: _jsx(IconSearch, { className: "rcm-m2o-addon-icon" }) }) }) })), !readonly && !isBlank(value) && (_jsx("div", { className: "rcm-m2o-addon", children: _jsx(Tooltip, { label: `선택 해제`, children: _jsx("button", { type: "button", className: "rcm-m2o-addon-btn", onClick: () => {
+                                setManyToOneValue('');
+                            }, children: _jsx(IconCircleX, { className: "rcm-m2o-addon-icon" }) }) }) })), isModifiable && !readonly ? (_jsx(Dropdown, { placement: "bottom-end", btnClassName: "rcm-m2o-action-btn", button: _jsxs(_Fragment, { children: [_jsx(IconSettings2, { className: "rcm-m2o-action-icon" }), _jsx("span", { children: "\uAD00\uB9AC" })] }), children: _jsxs("ul", { className: "rcm-m2o-dropdown-list", children: [_jsx("li", { children: _jsxs("button", { type: "button", className: "rcm-m2o-dropdown-item", onClick: handleSelectModal, children: [_jsx(IconSearch, { className: "rcm-m2o-action-icon" }), _jsx("span", { children: "\uCC3E\uAE30" })] }) }), _jsx("li", { children: _jsxs("button", { type: "button", className: "rcm-m2o-dropdown-item", onClick: handleCreateModal, children: [_jsx(IconPlus, { className: "rcm-m2o-action-icon" }), _jsx("span", { children: "\uB4F1\uB85D" })] }) })] }) })) : (_jsxs("button", { type: "button", disabled: readonly, className: "rcm-m2o-action-btn", onClick: handleSelectModal, children: [_jsx(IconSearch, { className: "rcm-m2o-action-icon" }), _jsx("span", { children: "\uCC3E\uAE30" })] }))] }) }));
+    function setManyToOneValue(value, initialize) {
+        (async () => {
+            let finalValue;
+            // 빈 문자열 처리 - 명시적으로 clear하는 경우
+            if (value === '') {
+                value = undefined;
+            }
+            if (value === undefined) {
+                // Initialize 시에만 defaultValue 사용, 사용자가 명시적으로 clear한 경우는 제외
+                if (isTrue(initialize) && defaultValue !== undefined && isTrue(required)) {
+                    const currentValue = await getViewName(defaultValue);
+                    setName(currentValue);
+                    setValue(defaultValue);
+                    finalValue = defaultValue;
+                    // localValueIdRef 업데이트
+                    localValueIdRef.current = getValueId(defaultValue);
+                }
+                else {
+                    // 명시적 clear이거나 초기화가 아닌 경우 무조건 clear
+                    setName('');
+                    setValue(undefined);
+                    finalValue = undefined;
+                    // localValueIdRef 초기화
+                    localValueIdRef.current = undefined;
+                }
+            }
+            else {
+                const currentValue = await getViewName(value);
+                setName(currentValue);
+                setValue(value);
+                finalValue = value;
+                // localValueIdRef 업데이트 - 선택된 값의 ID 추적
+                localValueIdRef.current = getValueId(value);
+            }
+            if (isTrue(initialize)) {
+                if (defaultValue === undefined) {
+                    setDefaultValue(finalValue);
+                }
+            }
+            else {
+                // onChange value 처리
+                props.onChange(finalValue, true);
+            }
+        })();
+    }
+    async function getViewName(value) {
+        if (config.displayFunc !== undefined) {
+            return await config.displayFunc(value);
+        }
+        if (config.field?.name) {
+            if (config.field.name instanceof Function) {
+                return config.field.name(value);
+            }
+            else {
+                return value[config.field.name];
+            }
+        }
+        else {
+            // 설정된 정보가 없으면 name 필드를 우선 사용한다.
+            return value['name'] ?? '';
+        }
+    }
+};

package/dist/listgrid/components/fields/view/MultipleAssetUpload.d.ts

@@ -0,0 +1,7 @@
+interface ProductAssetUploadProps {
+    url?: string | undefined;
+    onChange: (url: string) => void;
+    fileTypes?: string[] | undefined;
+}
+export declare const MultipleAssetUpload: (props: ProductAssetUploadProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,47 @@
+'use client';
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ASSET_SERVER_URL, removeAssetServerPrefix } from '../../../misc';
+import { getTranslation } from '../../../utils/i18n';
+import { FileFieldValue, FileUploadInput } from '../../../ui';
+import { useEffect, useState } from 'react';
+const assetProcessUrl = '/asset/upload-file';
+const assetServerUrl = ASSET_SERVER_URL;
+const ASSET_PREFIX = '/static-resource/';
+export const MultipleAssetUpload = (props) => {
+    const maxFiles = 1;
+    const [fileValue, setFileValue] = useState(FileFieldValue.create());
+    const { t } = getTranslation();
+    // 초기 URL이 있으면 FileFieldValue에 설정
+    useEffect(() => {
+        if (props.url) {
+            const url = removeAssetServerPrefix(props.url);
+            const newValue = FileFieldValue.create();
+            newValue.addExistValue({
+                url: url,
+                id: url, // 임시 ID로 URL 사용
+                fileName: url.split('/').pop() || '파일',
+            });
+            setFileValue(newValue);
+        }
+    }, [props.url]);
+    const handleFileChange = (value) => {
+        setFileValue(value);
+        const currentFiles = value.getCurrentFileList();
+        if (currentFiles.length > 0) {
+            const file = currentFiles[0];
+            props.onChange(file.url);
+        }
+        else {
+            props.onChange('');
+        }
+    };
+    const fileTypes = props.fileTypes ?? ['image/*'];
+    return (_jsx(FileUploadInput, { name: 'file', value: fileValue, onChange: handleFileChange, config: {
+            maxCount: maxFiles,
+            fileTypes: fileTypes,
+            extensions: fileTypes.includes('image/*')
+                ? ['jpg', 'jpeg', 'png', 'gif', 'webp']
+                : undefined,
+        } }));
+};

package/dist/listgrid/components/fields/view/PhoneNumberFieldView.d.ts

@@ -0,0 +1,19 @@
+import { Session } from '../../../auth';
+import { RenderType } from '../../../config/Config';
+interface PhoneNumberFieldViewProps {
+    name: string;
+    value: string | null | undefined;
+    onChange: (value: string, commit?: boolean | undefined) => void;
+    onError?: ((message: string) => void) | undefined;
+    readonly?: boolean | undefined;
+    placeHolder?: string | undefined;
+    regex?: {
+        pattern: RegExp;
+        message: string;
+    } | undefined;
+    enableSms?: boolean | undefined;
+    session?: Session | undefined;
+    renderType?: RenderType | undefined;
+}
+export declare const PhoneNumberFieldView: ({ name, value, onChange, onError, readonly, placeHolder, regex, enableSms, session, renderType, }: PhoneNumberFieldViewProps) => import("react/jsx-runtime").JSX.Element;
+export {};