@rchemist/listgrid 0.2.6

package/dist/listgrid/transfer/DataImportResultView.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Alert } from '../ui';
+import { Table } from '../ui';
+import { Box } from '../ui';
+import { Flex } from '../ui';
+import { Paper } from '../ui';
+import { getTranslation } from '../utils/i18n';
+import { isEmpty, isPositive } from '../misc';
+export const DataImportResultView = ({ result, fields }) => {
+    const { t } = getTranslation();
+    const successResult = getImportSuccessResult(result);
+    const message = getImportSuccessMessage(successResult);
+    const titleColor = successResult === 'FAILED' ? 'red' : 'teal';
+    const resultTableColor = successResult === 'FAILED' ? 'red' : 'teal';
+    return (_jsx(_Fragment, { children: _jsxs(Alert, { color: titleColor, message: message, children: [_jsx("p", { className: `text-sm font-bold mb-2 ${titleColor === 'red' ? 'text-red-500' : 'text-teal-500'}`, children: t('form.list.dataTransfer.tab.import.result.title') }), _jsxs(Table, { className: "mb-4 rounded-md", children: [_jsx(Table.Thead, { children: _jsxs(Table.Tr, { children: [_jsx(Table.Th, { className: `text-center w-40 border-l border-r border-b border-${resultTableColor}-500/20 text-sm font-bold bg-${resultTableColor}-400 text-white`, children: "\uAD6C\uBD84" }), _jsx(Table.Th, { className: `text-center border-r border-b border-${resultTableColor}-500/20 text-sm font-bold bg-${resultTableColor}-400 text-white`, children: "\uACB0\uACFC" })] }) }), _jsxs(Table.Tbody, { children: [_jsxs(Table.Tr, { children: [_jsx(Table.Td, { className: `text-center border-l border-r border-b border-${resultTableColor}-500/20`, children: t('form.list.dataTransfer.tab.import.result.requested') }), _jsx(Table.Td, { className: `text-center border-r border-b border-${resultTableColor}-500/20`, children: result.requested })] }), _jsxs(Table.Tr, { children: [_jsx(Table.Td, { className: `text-center border-l border-r border-b border-${resultTableColor}-500/20`, children: t('form.list.dataTransfer.tab.import.result.created') }), _jsx(Table.Td, { className: `text-center border-r border-b border-${resultTableColor}-500/20`, children: result.created })] }), isPositive(result.updated) && (_jsxs(Table.Tr, { children: [_jsx(Table.Td, { className: `text-center border-l border-r border-b border-${resultTableColor}-500/20`, children: t('form.list.dataTransfer.tab.import.result.updated') }), _jsx(Table.Td, { className: `text-center border-r border-b border-${resultTableColor}-500/20`, children: result.updated })] })), isPositive(result.failed) && (_jsxs(Table.Tr, { children: [_jsx(Table.Td, { className: `text-center border-l border-r border-b border-${resultTableColor}-500/20`, children: t('form.list.dataTransfer.tab.import.result.failed') }), _jsx(Table.Td, { className: `text-center border-r border-b border-${resultTableColor}-500/20`, children: result.failed })] }))] })] }), result.errors && !isEmpty(result.errors) && (_jsxs(Box, { style: { paddingTop: 10 }, children: [_jsx("p", { className: "text-sm font-bold text-red-500", children: t('form.list.dataTransfer.tab.import.result.error') }), result.errors && result.errors.length > 0 && (_jsxs(Table, { className: "mt-2 rounded-md", children: [_jsx(Table.Thead, { children: _jsxs(Table.Tr, { children: [_jsx(Table.Th, { className: "text-center w-20 border-l border-r border-b border-red-500/20 text-sm font-bold bg-red-400 text-white", children: "\uD589" }), _jsx(Table.Th, { className: "text-center w-40 border-r border-b border-red-500/20 text-sm font-bold bg-red-400 text-white", children: "\uD544\uB4DC" }), _jsx(Table.Th, { className: "text-center border-b border-r border-red-500/20 text-sm font-bold bg-red-400 text-white", children: "\uC5D0\uB7EC \uBA54\uC2DC\uC9C0" })] }) }), _jsx(Table.Tbody, { children: result.errors.map((value, errorIndex) => (_jsxs(Table.Tr, { children: [_jsx(Table.Td, { className: "text-center border-l border-r border-b border-red-500/20", children: value.row || '-' }), _jsx(Table.Td, { className: "text-center border-r border-b border-red-500/20", children: value.field ? getFieldLabel(value.field) : '-' }), _jsx(Table.Td, { className: "text-sm font-normal border-r border-b border-red-500/20", children: value.message })] }, `error-row-${errorIndex}`))) })] }))] }))] }) }));
+    function getFieldLabel(name) {
+        const field = fields.find((field) => field.getName() === name);
+        if (field) {
+            return field.getLabel();
+        }
+        return '';
+    }
+};
+export const ImportErrorView = (props) => {
+    const { t } = getTranslation();
+    const importError = props.importError;
+    const parseError = props.errorMessage;
+    const importErrorView = props.importErrorView;
+    return (_jsxs(Box, { style: { width: `100%` }, children: [importError && (_jsx(Flex, { align: 'center', justify: 'center', children: _jsx(Box, { style: { paddingTop: 5, paddingBottom: 5, width: `100%` }, children: _jsx(Alert, { color: 'red', message: importError, children: t('form.list.dataTransfer.tab.import.messages.retry') }) }) })), parseError && (_jsx(Paper, { style: { padding: 2, width: '100%' }, children: _jsx(Alert, { color: 'red', message: parseError, children: t('form.list.dataTransfer.tab.import.messages.retry') }) })), importErrorView] }));
+};
+function getImportSuccessResult(result) {
+    const created = getNumber(result.created);
+    const updated = getNumber(result.updated);
+    const failed = getNumber(result.failed);
+    if (created > 0 || updated > 0) {
+        if (failed > 0) {
+            return 'PARTIAL_SUCCESS';
+        }
+        return 'SUCCESS';
+    }
+    if (failed > 0) {
+        return 'FAILED';
+    }
+    return 'NOTHING';
+}
+function getNumber(value) {
+    if (value === undefined) {
+        return 0;
+    }
+    return value;
+}
+function getImportSuccessMessage(result) {
+    const { t } = getTranslation();
+    switch (result) {
+        case 'SUCCESS':
+            return t('form.list.dataTransfer.tab.import.messages.success');
+        case 'FAILED':
+            return t('form.list.dataTransfer.tab.import.messages.success.failed');
+        case 'PARTIAL_SUCCESS':
+            return t('form.list.dataTransfer.tab.import.messages.success.partial');
+        case 'NOTHING':
+            return t('form.list.dataTransfer.tab.import.messages.success.nothing');
+    }
+}

package/dist/listgrid/transfer/DataImportSample.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { DataField, SampleDataItem } from '../transfer/Type';
+export interface DataImportSampleProps {
+    sampleFileName?: string;
+    fields: DataField[];
+    sampleData?: SampleDataItem[][];
+    allowUpdate?: boolean;
+}
+export declare const DataImportSample: FC<DataImportSampleProps>;
+export default DataImportSample;

package/dist/listgrid/transfer/DataImportSample.js

@@ -0,0 +1,105 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Table } from '../ui';
+import { SafePerfectScrollbar } from '../ui';
+import { Modal } from '../ui';
+import { IconFile, IconHelpCircle } from '@tabler/icons-react';
+import clsx from 'clsx';
+import { DataField } from '../transfer/Type';
+import { DataExportProcessor } from '../transfer/DataExportProcessor';
+import { getTranslation } from '../utils/i18n';
+import { Tooltip } from '../ui';
+export const DataImportSample = ({ sampleFileName: exportFileName, sampleData: initialData, allowUpdate = true, ...props }) => {
+    const fields = props.fields.filter((field) => {
+        return initialData[0].find((item) => item.name === field.getName()) !== undefined;
+    });
+    // 업데이트 모드가 허용된 경우에만 id 필드를 노출한다.
+    if (allowUpdate && fields.find((field) => field.getName() === 'id') === undefined) {
+        // 첫번째 항목으로 추가한다.
+        fields.unshift(DataField.create({ name: 'id', label: '아이디', type: 'text' }));
+    }
+    const { t } = getTranslation();
+    const [exportKey, setExportKey] = useState(Date.now());
+    const [processing, setProcessing] = useState(false);
+    const [sampleData, setSampleData] = useState();
+    const hasRequired = fields.find((field) => field.isRequired()) !== undefined;
+    useEffect(() => {
+        if (initialData && initialData.length > 0) {
+            let shouldAddId = allowUpdate;
+            if (shouldAddId) {
+                const row = initialData[0];
+                for (const data of row) {
+                    if (data.name === 'id') {
+                        shouldAddId = false;
+                        break;
+                    }
+                }
+            }
+            if (shouldAddId && allowUpdate) {
+                const newData = { name: 'id', value: '' };
+                const newDataArray = [];
+                let index = 0;
+                for (const row of initialData) {
+                    const newRow = [];
+                    if (index === 0) {
+                        newRow.push(newData);
+                    }
+                    else {
+                        newRow.push({ name: 'id', value: '' });
+                    }
+                    for (const data of row) {
+                        newRow.push(data);
+                    }
+                    newDataArray.push(newRow);
+                    index++;
+                }
+                setSampleData(newDataArray);
+            }
+            else {
+                setSampleData(initialData);
+            }
+        }
+    }, []);
+    if (sampleData === undefined) {
+        return null;
+    }
+    return (_jsxs("div", { className: "rcm-import-sample", children: [_jsxs("div", { className: "rcm-import-sample-guide", children: [_jsx("p", { className: "rcm-text", "data-size": "sm", "data-tone": "muted", children: t('form.list.dataTransfer.tab.import.messages.guide') }), _jsx(SampleDataButton, { exportKey: exportKey, setExportKey: setExportKey, setProcessing: setProcessing, processing: processing, data: sampleData, fileName: exportFileName, fields: fields })] }), hasRequired && (_jsxs("div", { className: "rcm-import-sample-required-notice", children: [_jsx("span", { className: "rcm-import-sample-required-star", children: "*" }), _jsx("span", { className: "rcm-import-sample-required-text", children: "\uD45C\uC2DC\uAC00 \uC788\uB294 \uD544\uB4DC\uB294 \uD544\uC218 \uD56D\uBAA9\uC785\uB2C8\uB2E4. \uD544\uC218 \uD56D\uBAA9\uC744 \uC785\uB825\uD558\uC9C0 \uC54A\uC73C\uBA74 \uC5C5\uB85C\uB4DC \uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4." })] })), _jsx("div", { className: "rcm-import-sample-table-wrap", children: _jsx(SafePerfectScrollbar, { style: { minWidth: '100%' }, children: _jsxs(Table, { style: { minWidth: 650 }, "aria-label": "simple table", children: [_jsx(Table.Thead, { children: _jsx(Table.Tr, { children: fields.map((field, index) => {
+                                        return (_jsx(Table.Th, { className: clsx('rcm-import-sample-th', field.isRequired() && 'rcm-import-sample-th-required'), children: _jsxs("div", { className: "rcm-import-sample-th-inner", children: [_jsxs("div", { className: "rcm-import-sample-th-label-row", children: [field.isRequired() && (_jsx("span", { className: "rcm-import-sample-th-star", children: "*" })), _jsx("span", { className: "rcm-import-sample-th-label", children: field.getLabel() })] }), _jsxs("div", { className: "rcm-import-sample-th-name", children: ["[", field.getName(), "]"] })] }) }, `header_${field.getName()}_${index + 1}`));
+                                    }) }) }), _jsx(Table.Tbody, { children: sampleData.map((row, index) => {
+                                    return (_jsx(Table.Tr, { children: fields.map((field, index) => {
+                                            if (field.getName() === 'id') {
+                                                return (_jsx(Table.Td, { align: "center", className: "rcm-import-sample-td", children: _jsxs("div", { className: "rcm-import-sample-td-id", children: [_jsx("span", { className: "rcm-text", "data-size": "sm", "data-tone": "muted", style: { whiteSpace: 'nowrap' }, children: `ID 값` }), _jsx(Tooltip, { zIndex: 10000, label: "\uAC12\uC774 \uC788\uC73C\uBA74 UPDATE, \uC5C6\uC73C\uBA74 INSERT", children: _jsx(IconHelpCircle, { className: "rcm-import-sample-td-id-help" }) })] }) }, `body_${field.getName()}_${index + 1}`));
+                                            }
+                                            let value = '';
+                                            for (const data of row) {
+                                                if (data.name === field.getName()) {
+                                                    value = data.value;
+                                                    break;
+                                                }
+                                            }
+                                            return (_jsx(Table.Td, { align: "center", className: "rcm-import-sample-td rcm-import-sample-td-value", children: value }, `body_${field.getName()}_${index + 1}`));
+                                        }) }, `body_${index + 1}`));
+                                }) })] }) }) })] }));
+};
+export default DataImportSample;
+const SampleDataButton = (props) => {
+    const setProcessing = props.setProcessing ??
+        function (_processing) {
+            // no-op default
+        };
+    if (props.data === undefined) {
+        return _jsx(_Fragment, {});
+    }
+    const sampleData = props.data.map((row) => {
+        return row.filter((item) => props.fields.find((field) => field.getName() === item.name));
+    });
+    return (_jsxs(_Fragment, { children: [props.processing && (_jsx(Modal, { size: 'lg', opened: props.processing, closeOnClickOutside: false, zIndex: 10000, onClose: () => {
+                    setProcessing(false);
+                }, children: _jsx(DataExportProcessor, { fields: props.fields, exportFileName: props.fileName, process: props.processing, data: sampleData, onProcessed: () => {
+                        props.setExportKey(Date.now());
+                        setProcessing(false);
+                    } }, 'data_export_import_data' + props.exportKey) })), !props.processing && (_jsxs("button", { type: "button", className: "rcm-button rcm-import-sample-download-btn", "data-variant": "primary", onClick: () => {
+                    setProcessing(true);
+                }, children: [_jsx(IconFile, { className: "rcm-m2o-action-icon" }), "\uC0D8\uD50C \uD30C\uC77C \uB2E4\uC6B4\uB85C\uB4DC"] }))] }));
+};

package/dist/listgrid/transfer/DataImporter.d.ts

@@ -0,0 +1,8 @@
+import { ImportTransferConfig } from '../transfer/Type';
+interface ImporterProps {
+    config?: ImportTransferConfig;
+    sampleFileName: string;
+    onClose: (result: boolean) => void;
+}
+export declare const DataImporter: (props: ImporterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/listgrid/transfer/DataImporter.js

@@ -0,0 +1,335 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createFieldMap, } from '../transfer/Type';
+import { useState } from 'react';
+import { getTranslation } from '../utils/i18n';
+import { isTrue } from '../utils/BooleanUtil';
+import { isBlank, subStringBetween } from '../utils/StringUtil';
+import { isEmpty } from '../utils';
+import * as XLSX from 'xlsx-js-style';
+import { getAccessableAssetUrl, getExternalApiDataWithError } from '../misc';
+import DataImportSample from '../transfer/DataImportSample';
+import { Modal } from '../ui';
+import { DataImportProcessor } from '../transfer/DataImportProcessor';
+import { FileUploadInput } from '../ui';
+export const DataImporter = (props) => {
+    const [open, setOpen] = useState(false);
+    const [data, setData] = useState([]);
+    const [success, setSuccess] = useState(false);
+    const [errorMessage, setErrorMessage] = useState();
+    const [importError, setImportError] = useState();
+    const [importErrorView, setImportErrorView] = useState(_jsx(_Fragment, {}));
+    const [importResult, setImportResult] = useState();
+    const { t } = getTranslation();
+    const resultView = isTrue(success) && isBlank(errorMessage) && isBlank(importError) && importResult !== undefined;
+    const errorView = !isTrue(success) && (!isBlank(errorMessage) || !isBlank(importError));
+    const preview = !isTrue(success) && isBlank(errorMessage) && isBlank(importError);
+    function reset() {
+        setData([]);
+        setSuccess(false);
+        setErrorMessage(undefined);
+        setImportError(undefined);
+        setImportResult(undefined);
+    }
+    const fields = props.config?.fields ?? [];
+    const allowUpdate = props.config?.mode?.update !== false;
+    const addedImportFields = props.config?.addedFields;
+    const overrideFormData = props.config?.overrideFormData;
+    const url = props.config.url;
+    const overrideParseResult = props.config?.overrideParseResult;
+    const description = props.config?.description ?? '';
+    const sampleData = props.config?.sampleData ?? [];
+    function onFileUpload(fileValue) {
+        const currentFiles = fileValue.getCurrentFileList();
+        if (currentFiles.length === 0)
+            return;
+        const file = currentFiles[0];
+        if (!file)
+            return;
+        let result = [];
+        if (file instanceof File) {
+            // 사용자가 직접 업로드한 파일
+            const reader = new FileReader();
+            reset();
+            reader.onload = async (e) => {
+                try {
+                    const buffer = e.target?.result;
+                    const wb = XLSX.read(buffer, { type: 'array' });
+                    const wsname = wb.SheetNames[0] || '';
+                    const ws = wb.Sheets[wsname] || {};
+                    result = XLSX.utils.sheet_to_json(ws, { header: 1 });
+                    /*
+                    fields 정보와 비교해 불필요한 필드는 제거한다.
+                     */
+                    const cells = [];
+                    const header = {};
+                    const fieldMap = createFieldMap(...fields);
+                    if (isEmpty(result)) {
+                        setErrorMessage('업로드 대상 필드가 일치하지 않습니다.');
+                        return;
+                    }
+                    else {
+                        const row = result[0];
+                        row.findIndex((cell, excelColIndex) => {
+                            // cell 내용이 이름\n[필드이름] 형태라면
+                            if (cell.includes('[') && cell.includes(']')) {
+                                const fieldName = subStringBetween(cell, '[', ']')
+                                    .trim()
+                                    .replace(/\n/g, '')
+                                    .replace(' ', '');
+                                cell = fieldName;
+                            }
+                            if (fieldMap.has(cell)) {
+                                cells.push(excelColIndex);
+                                header[cell] = fieldMap.get(cell)?.getLabel();
+                            }
+                        });
+                    }
+                    if (cells.length === 0) {
+                        setErrorMessage('업로드 대상 필드가 일치하지 않습니다.');
+                        return;
+                    }
+                    else {
+                        const sheetData = [];
+                        sheetData.push(header);
+                        result.map(async (row, index) => {
+                            if (index > 0) {
+                                const newRow = [];
+                                cells.forEach(async (excelColIndex, arrayIndex) => {
+                                    const field = fields[arrayIndex];
+                                    if (field) {
+                                        const fieldName = field.getName();
+                                        newRow.push({
+                                            name: fieldName,
+                                            value: await field.getValueOnImport(row[excelColIndex]),
+                                        });
+                                    }
+                                });
+                                sheetData.push(newRow);
+                            }
+                        });
+                        if (sheetData.length > 1) {
+                            // append header and body
+                            setData(sheetData);
+                        }
+                        else {
+                            setErrorMessage('데이터가 존재하지 않습니다.');
+                            return;
+                        }
+                    }
+                    setOpen(true);
+                }
+                catch (err) {
+                    setErrorMessage('엑셀 파일을 읽는 중 오류가 발생했습니다. 파일 형식(xlsx)을 확인하세요.');
+                }
+            };
+            reader.readAsArrayBuffer(file);
+        }
+        else if (file.url) {
+            // 서버에 이미 업로드된 파일 (FileInfo)
+            reset();
+            const fileUrl = getAccessableAssetUrl(file.url);
+            fetch(fileUrl)
+                .then((response) => {
+                return response.arrayBuffer();
+            })
+                .then((buffer) => {
+                try {
+                    const wb = XLSX.read(buffer, { type: 'array' });
+                    const wsname = wb.SheetNames[0] || '';
+                    const ws = wb.Sheets[wsname] || {};
+                    result = XLSX.utils.sheet_to_json(ws, { header: 1 });
+                    /*
+                    fields 정보와 비교해 불필요한 필드는 제거한다.
+                     */
+                    const cells = [];
+                    const header = {};
+                    const fieldMap = createFieldMap(...fields);
+                    if (isEmpty(result)) {
+                        setErrorMessage('업로드 대상 필드가 일치하지 않습니다.');
+                        return;
+                    }
+                    else {
+                        const row = result[0];
+                        row.findIndex((cell, excelColIndex) => {
+                            // cell 내용이 이름\n[필드이름] 형태라면
+                            if (cell.includes('[') && cell.includes(']')) {
+                                const fieldName = subStringBetween(cell, '[', ']')
+                                    .trim()
+                                    .replace(/\n/g, '')
+                                    .replace(' ', '');
+                                cell = fieldName;
+                            }
+                            if (fieldMap.has(cell)) {
+                                cells.push(excelColIndex);
+                                header[cell] = fieldMap.get(cell)?.getLabel();
+                            }
+                        });
+                    }
+                    if (cells.length === 0) {
+                        setErrorMessage('업로드 대상 필드가 일치하지 않습니다.');
+                        return;
+                    }
+                    else {
+                        const sheetData = [];
+                        sheetData.push(header);
+                        result.map(async (row, index) => {
+                            if (index > 0) {
+                                const newRow = [];
+                                cells.forEach(async (excelColIndex, arrayIndex) => {
+                                    const field = fields[arrayIndex];
+                                    if (field) {
+                                        const fieldName = field.getName();
+                                        newRow.push({
+                                            name: fieldName,
+                                            value: await field.getValueOnImport(row[excelColIndex]),
+                                        });
+                                    }
+                                });
+                                sheetData.push(newRow);
+                            }
+                        });
+                        if (sheetData.length > 1) {
+                            // append header and body
+                            setData(sheetData);
+                        }
+                        else {
+                            setErrorMessage('데이터가 존재하지 않습니다.');
+                            return;
+                        }
+                    }
+                    setOpen(true);
+                }
+                catch (err) {
+                    setErrorMessage('엑셀 파일을 읽는 중 오류가 발생했습니다. 파일 형식(xlsx)을 확인하세요.');
+                }
+            })
+                .catch((error) => {
+                setErrorMessage('파일을 읽는 중 오류가 발생했습니다.');
+            });
+        }
+    }
+    async function onSubmit() {
+        try {
+            // data 의 첫번째 row 는 헤더필드 이므로 제거해야 한다.
+            const fileData = isEmpty(data) ? [] : data.slice(1);
+            let formData = [];
+            // formData 의 각 행, 각 셀의 데이터를 map 으로 변환해 전송한다.
+            if (fileData.length > 0) {
+                try {
+                    const rows = await Promise.all(fileData.map(async (row) => {
+                        try {
+                            let columns = [...row];
+                            if (addedImportFields !== undefined) {
+                                const addedColumns = await addedImportFields(columns);
+                                columns = [...columns, ...addedColumns];
+                            }
+                            return columns;
+                        }
+                        catch (error) {
+                            console.error('Error processing row:', error);
+                            throw error;
+                        }
+                    }));
+                    formData = rows;
+                }
+                catch (error) {
+                    console.error('Error processing rows:', error);
+                    throw error;
+                }
+            }
+            if (overrideFormData !== undefined) {
+                try {
+                    formData = await overrideFormData(formData);
+                }
+                catch (error) {
+                    console.error('Error in overrideFormData:', error);
+                    throw error;
+                }
+            }
+            // server 측 DTO 는 list 타입의 data 필드를 가지고 있어야 한다.
+            try {
+                // 서버에 전송하기 위한 데이터 형식으로 변환한다.
+                const importData = {
+                    rows: [],
+                };
+                const rows = [];
+                formData.forEach((row) => {
+                    const rowMap = new Map();
+                    row.forEach((column) => {
+                        rowMap.set(column.name, { name: column.name, value: column.value });
+                    });
+                    rows.push(rowMap);
+                    importData.rows.push({
+                        properties: rowMap,
+                    });
+                });
+                const response = await getExternalApiDataWithError({
+                    url: url,
+                    formData: importData,
+                });
+                if (overrideParseResult) {
+                    const overrideParseResultResult = overrideParseResult(formData, response.data);
+                    setImportResult(overrideParseResultResult.result);
+                    setSuccess(overrideParseResultResult.success);
+                    setImportError(overrideParseResultResult.error ?? '');
+                    setImportErrorView(overrideParseResultResult.errorView ?? _jsx(_Fragment, {}));
+                }
+                else {
+                    if (response.data) {
+                        const result = response.data;
+                        setImportResult(result);
+                        setSuccess(true);
+                    }
+                    else {
+                        throw new Error(response.error);
+                    }
+                }
+            }
+            catch (error) {
+                console.error('Error in API call:', error);
+                setSuccess(false);
+                const message = error instanceof Error ? error.message : '업로드에 실패하였습니다.';
+                setImportError(message);
+            }
+        }
+        catch (error) {
+            console.error('Error in onSubmit:', error);
+            setSuccess(false);
+            const message = error instanceof Error ? error.message : '업로드 중 오류가 발생했습니다.';
+            setErrorMessage(message);
+        }
+    }
+    let resultModalTitle = '';
+    if (resultView) {
+        resultModalTitle = t('form.list.dataTransfer.tab.import.messages.success');
+    }
+    else {
+        if (errorView) {
+            resultModalTitle = t('form.list.dataTransfer.tab.import.messages.error');
+        }
+        else if (preview) {
+            resultModalTitle = t('form.list.dataTransfer.tab.import.messages.preview');
+        }
+    }
+    return (_jsx(_Fragment, { children: _jsxs(Modal, { opened: true, size: '5xl', title: t('form.list.dataTransfer.tab.import.title'), onClose: () => {
+                props.onClose(false);
+            }, children: [_jsxs("div", { className: "rcm-importer-body", children: [_jsx(DataImportSample, { fields: fields, sampleData: sampleData, sampleFileName: props.sampleFileName, allowUpdate: allowUpdate }), _jsxs("div", { className: "rcm-importer-section", children: [_jsx("h3", { className: "rcm-text", "data-weight": "semibold", children: t('form.list.dataTransfer.tab.import.file.label') || '업로드할 파일 선택' }), _jsx(FileUploadInput, { name: 'file', value: undefined, onChange: onFileUpload, config: {
+                                        maxCount: 1,
+                                        fileTypes: [
+                                            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+                                            'application/vnd.ms-excel',
+                                        ],
+                                        extensions: ['xlsx', 'xls'],
+                                    } })] }), description && (_jsx("div", { className: "rcm-importer-description", style: { wordBreak: 'break-word', overflowWrap: 'break-word', whiteSpace: 'normal' }, children: description }))] }), open && (_jsx(Modal, { size: '5xl', title: resultModalTitle, zIndex: 11000, opened: open, closeOnClickOutside: false, closeOnEscape: false, onClose: () => {
+                        cancelImport();
+                    }, children: _jsx(DataImportProcessor, { fields: fields, data: data, preview: preview, errorMessage: errorMessage, importError: importError, importErrorView: importErrorView, viewError: errorView, importResult: importResult, cancelImport: cancelImport, resultView: resultView, onImportSuccess: onImportSuccess, onSubmit: onSubmit }) }))] }) }));
+    function cancelImport() {
+        setOpen(false);
+        setData([]);
+    }
+    function onImportSuccess() {
+        setOpen(false);
+        props.onClose(true);
+    }
+};

package/dist/listgrid/transfer/DynamicDataImporter.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps } from 'react';
+type DataImporterProps = ComponentProps<typeof import('./DataImporter').DataImporter>;
+export declare const LazyDataImporter: (props: DataImporterProps) => import("react/jsx-runtime").JSX.Element;
+export default LazyDataImporter;

package/dist/listgrid/transfer/DynamicDataImporter.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { dynamic } from '../utils/lazy';
+import { Skeleton } from '../ui';
+// DataImporter와 XLSX를 동적으로 로드
+const DynamicDataImporter = dynamic(() => import('./DataImporter').then((mod) => ({ default: mod.DataImporter })), {
+    loading: () => (_jsxs("div", { className: "rcm-skeleton-stack", children: [_jsx(Skeleton, { height: 40, width: 200, mb: "md" }), _jsx(Skeleton, { height: 200, width: "100%", mb: "md" }), _jsxs("div", { className: "rcm-row", children: [_jsx(Skeleton, { height: 32, width: 80 }), _jsx(Skeleton, { height: 32, width: 80 })] })] })),
+    ssr: false, // 클라이언트에서만 로드
+});
+export const LazyDataImporter = (props) => {
+    return _jsx(DynamicDataImporter, { ...props });
+};
+export default LazyDataImporter;

package/dist/listgrid/transfer/ExcelPasswordField.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ExcelPasswordFieldProps {
+    password: string;
+    onPasswordChange: (password: string) => void;
+    error?: string;
+    onErrorChange?: (error: string) => void;
+}
+export declare const ExcelPasswordField: React.FC<ExcelPasswordFieldProps>;
+export {};

package/dist/listgrid/transfer/ExcelPasswordField.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Tooltip } from '../ui';
+import { ShowError } from '../message';
+import { getTranslation } from '../utils/i18n';
+export const ExcelPasswordField = ({ password, onPasswordChange, error, onErrorChange, }) => {
+    const { t } = getTranslation();
+    const [usePassword, setUsePassword] = useState(false);
+    const usePasswordLabel = t('form.list.dataTransfer.tab.export.usepassword.label') || '비밀번호 설정';
+    const passwordLabel = t('form.list.dataTransfer.tab.export.password.label') || '비밀번호';
+    return (_jsxs("div", { className: "rcm-panel rcm-panel-muted rcm-stack", children: [_jsx("div", { className: "rcm-row-between", children: _jsx(Tooltip, { label: _jsx("div", { children: "\uD30C\uC77C\uC5D0 \uBE44\uBC00\uBC88\uD638\uB97C \uC124\uC815\uD558\uB294 \uACBD\uC6B0 \uB370\uC774\uD130 \uC591\uC774 \uB9CE\uC744 \uACBD\uC6B0 \uC554\uD638\uD654\uC5D0 \uB2E4\uC18C \uC2DC\uAC04\uC774 \uC18C\uC694\uB420 \uC218 \uC788\uC2B5\uB2C8\uB2E4." }), zIndex: 1100, color: "gray", withArrow: true, position: "top-start", children: _jsxs("label", { htmlFor: "usePassword", className: "rcm-row rcm-cursor-pointer", children: [_jsx("input", { type: "checkbox", id: "usePassword", name: "usePassword", checked: usePassword, onChange: (event) => {
+                                    const checked = event.target.checked;
+                                    setUsePassword(checked);
+                                    if (!checked) {
+                                        onPasswordChange('');
+                                    }
+                                    onErrorChange?.('');
+                                } }), _jsx("span", { className: "rcm-text-sm rcm-text-emphasis", children: usePasswordLabel })] }) }) }), usePassword && (_jsxs("div", { className: "rcm-field-root rcm-field-indent", children: [_jsx("label", { htmlFor: "excelPassword", className: "rcm-field-label", children: passwordLabel }), _jsx("input", { type: "text", className: "rcm-input rcm-field-input-compact", id: "excelPassword", name: "excelPassword", maxLength: 32, value: password, onChange: (event) => {
+                            onPasswordChange(event.target.value);
+                            onErrorChange?.('');
+                        } }), error && _jsx(ShowError, { message: error, gap: "0" })] }))] }));
+};

package/dist/listgrid/transfer/Provider/ExcelProvider.d.ts

@@ -0,0 +1,24 @@
+import * as XLSX from 'xlsx-js-style';
+import { DataField, DataRowSet } from '../Type';
+export interface ExcelDownloadLogOptions {
+    condition?: Record<string, any> | string | undefined;
+}
+export interface ExcelDownloadProps {
+    data: DataRowSet;
+    fileName: string;
+    excludeHeader?: boolean | undefined;
+    password?: string | undefined;
+    logOptions?: ExcelDownloadLogOptions | undefined;
+    fields?: DataField[] | undefined;
+}
+export declare function logExcelDownload(usePassword: boolean, condition?: Record<string, any> | string): Promise<void>;
+interface OfficeCrypto {
+    encrypt: (buffer: unknown, opts: {
+        password: string;
+    }) => Promise<unknown>;
+    isEncrypted: (data: unknown) => Promise<boolean>;
+}
+export declare function registerExcelCrypto(impl: OfficeCrypto): void;
+export declare const ExcelDownload: (props: ExcelDownloadProps) => Promise<void>;
+export declare function saveExcelFile(wb: XLSX.WorkBook, fileName: string, password?: string, logOptions?: ExcelDownloadLogOptions): Promise<void>;
+export default ExcelDownload;