@rchemist/listgrid 0.2.6

package/dist/listgrid/components/fields/address/PostCodeSelector.js

@@ -0,0 +1,125 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { isBlank } from '../../../utils/StringUtil';
+import { Box } from '../../../ui';
+import { Flex } from '../../../ui';
+import { Grid } from '../../../ui';
+import { Modal } from '../../../ui';
+import clsx from 'clsx';
+// CSS module removed in Stage 8 (host app supplies styling)
+const classes = {};
+import DaumPostcode from 'react-daum-postcode';
+export const PostCodeSelector = (props) => {
+    const [open, setOpen] = useState(false);
+    const [openDaumPostCode, setOpenDaumPostCode] = useState(false);
+    const [postalCode, setPostalCode] = useState();
+    const [state, setState] = useState();
+    const [city, setCity] = useState();
+    const [address1, setAddress1] = useState();
+    const [address2, setAddress2] = useState();
+    const [longitude, setLongitude] = useState();
+    const [latitude, setLatitude] = useState();
+    const [error, setError] = useState('');
+    const disabled = isBlank(postalCode);
+    const required = props.required;
+    useEffect(() => {
+        initializeData();
+    }, [props]);
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { gap: 10, children: [_jsx("button", { type: "button", className: "rcm-button", "data-variant": "primary", onClick: () => {
+                            setOpen(!open);
+                        }, children: "\uC8FC\uC18C \uCC3E\uAE30" }), !required && !isBlank(postalCode) && (_jsx("button", { type: "button", className: "rcm-button", "data-variant": "outline", onClick: () => {
+                            removeAddress();
+                        }, children: "\uC8FC\uC18C \uC81C\uAC70" }))] }), open && (_jsx(Modal, { opened: open, onClose: () => {
+                    initializeData();
+                    setOpen(false);
+                }, closeOnClickOutside: true, closeOnEscape: true, 
+                /* lockScroll={true} */
+                position: "center", size: 'lg', zIndex: 11000, title: "\uC8FC\uC18C \uAC80\uC0C9", children: _jsxs("div", { style: { padding: `2rem` }, children: [_jsxs(Grid, { className: classes.row, gutter: 16, align: "center", children: [_jsx(Grid.Col, { span: 2, className: clsx(classes.title, 'text-right pr-2'), children: "\uC6B0\uD3B8\uBC88\uD638" }), _jsx(Grid.Col, { span: 10, children: _jsxs("div", { className: "rcm-postcode-input-row", children: [_jsx("input", { type: "text", value: postalCode, disabled: true, readOnly: true, className: "rcm-input" }), _jsx("button", { type: "button", className: "rcm-button", "data-variant": "primary", onClick: () => {
+                                                    setOpenDaumPostCode(true);
+                                                }, children: "\uC8FC\uC18C \uAC80\uC0C9" })] }) })] }), _jsxs(Grid, { className: clsx(classes.row, classes.subRow), gutter: 16, align: "center", children: [_jsx(Grid.Col, { span: 2, className: clsx(classes.title, 'text-right pr-2'), children: "\uC8FC\uC18C" }), _jsx(Grid.Col, { span: 10, children: _jsx("input", { type: "text", value: address1, placeholder: '주소 검색을 눌러 주소를 선택하세요', readOnly: true, disabled: true, className: "rcm-input" }) })] }), !disabled && (_jsxs(Grid, { className: clsx(classes.row, classes.subRow), gutter: 16, align: "center", children: [_jsx(Grid.Col, { span: 2, className: clsx(classes.title, 'text-right pr-2'), children: "\uC0C1\uC138 \uC8FC\uC18C" }), _jsxs(Grid.Col, { span: 10, children: [_jsx("input", { type: "text", value: address2, placeholder: '상세 주소를 입력하세요', onChange: (e) => {
+                                                setAddress2(e.target.value ?? '');
+                                            }, className: "rcm-input" }), !isBlank(error) && _jsx(Box, { className: classes.error, children: error })] })] })), _jsx(Box, { className: classes.buttonContainer, children: _jsx("button", { type: "button", className: `px-4 py-2 rounded-md text-sm font-medium transition-colors ${disabled || isBlank(address2)
+                                    ? 'btn btn-outline-primary border border-gray-300 text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2'
+                                    : 'btn btn-outline-primary border border-blue-500 text-blue-500 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2'}`, disabled: disabled || isBlank(address2), onClick: () => {
+                                    validateAndSubmit();
+                                }, children: "\uC8FC\uC18C \uC785\uB825" }) })] }) })), openDaumPostCode && (_jsx(Modal, { opened: openDaumPostCode, onClose: () => {
+                    setOpenDaumPostCode(false);
+                }, closeOnClickOutside: false, closeOnEscape: true, 
+                /* lockScroll={true} */
+                position: "center", zIndex: 12000, children: _jsx(DaumPostcode, { onComplete: (data) => {
+                        setState(data.sido);
+                        setCity(data.sigungu);
+                        setAddress1(data.roadAddress);
+                        setAddress2('');
+                        setPostalCode(data.zonecode);
+                        setLongitude(data.longitude);
+                        setLatitude(data.latitude);
+                        setOpenDaumPostCode(false);
+                    } }) }))] }));
+    function removeAddress() {
+        if (!required) {
+            setState('');
+            setCity('');
+            setAddress1('');
+            setAddress2('');
+            setPostalCode('');
+            setLatitude(undefined);
+            setLongitude(undefined);
+            // onRemove 콜백이 있으면 사용, 없으면 기존 방식 사용
+            if (props.onRemove) {
+                props.onRemove();
+            }
+            else {
+                const address = {
+                    state: '',
+                    city: '',
+                    address1: '',
+                    address2: '',
+                    postalCode: '',
+                };
+                props.onSubmit(address);
+            }
+        }
+    }
+    function validateAndSubmit() {
+        let validated = true;
+        setError('');
+        if (isBlank(address1)) {
+            setError('주소 선택을 눌러 주소를 입력하세요');
+            validated = false;
+        }
+        if (validated) {
+            if (isBlank(address2)) {
+                setError('상세 주소를 반드시 입력해야 합니다.');
+                validated = false;
+            }
+        }
+        if (validated) {
+            const longitudeValue = isBlank(longitude) ? undefined : Number(longitude);
+            const latitudeValue = isBlank(latitude) ? undefined : Number(latitude);
+            const address = {
+                state: state ?? address1.split(' ')[0],
+                city: city ?? address1.split(' ')[1],
+                address1: address1,
+                address2: address2,
+                postalCode: postalCode,
+                ...(longitudeValue !== undefined ? { longitude: longitudeValue } : {}),
+                ...(latitudeValue !== undefined ? { latitude: latitudeValue } : {}),
+            };
+            props.onSubmit(address);
+            setOpen(false);
+        }
+    }
+    function initializeData() {
+        if (props.address) {
+            setCity(props.address.city);
+            setState(props.address.state);
+            setPostalCode(props.address.postalCode);
+            setAddress1(props.address.address1);
+            setAddress2(props.address.address2);
+            setLongitude(props.address.longitude);
+            setLatitude(props.address.latitude);
+        }
+    }
+};

package/dist/listgrid/components/fields/contentasset/ContentAssetField.d.ts

@@ -0,0 +1,61 @@
+import { FormField, FormFieldProps } from '../abstract';
+import React from 'react';
+import { FieldRenderParameters } from '../../../config/EntityField';
+import { ContentAsset } from './types';
+interface ContentAssetFieldProps extends FormFieldProps {
+    /** 최대 업로드 가능한 항목 수 */
+    maxItems?: number;
+    /** 허용된 파일 타입 (예: ['image/*', 'application/pdf']) */
+    acceptedFileTypes?: string[];
+    /** 최대 파일 크기 (bytes) */
+    maxFileSize?: number;
+}
+/**
+ * ContentAssetField
+ * 범용적인 파일 업로드 및 관리를 위한 ListGrid 커스텀 필드
+ *
+ * @extends FormField
+ */
+export declare class ContentAssetField extends FormField<ContentAssetField> {
+    /** 최대 업로드 가능한 항목 수 */
+    maxItems?: number;
+    /** 허용된 파일 타입 */
+    acceptedFileTypes?: string[];
+    /** 최대 파일 크기 (bytes) */
+    maxFileSize?: number;
+    constructor(name: string, order: number);
+    /**
+     * ContentAssetField 핵심 렌더링 로직
+     */
+    protected renderInstance(params: FieldRenderParameters): Promise<React.ReactNode | null>;
+    /**
+     * ContentAssetField 인스턴스 생성
+     */
+    protected createInstance(name: string, order: number): ContentAssetField;
+    /**
+     * 기본값 설정
+     * @param value ContentAsset 배열
+     */
+    withDefaultValue(value: ContentAsset[]): this;
+    /**
+     * 최대 항목 수 설정
+     * @param maxItems 최대 항목 수
+     */
+    withMaxItems(maxItems: number): this;
+    /**
+     * 허용된 파일 타입 설정
+     * @param acceptedFileTypes 파일 타입 배열
+     */
+    withAcceptedFileTypes(acceptedFileTypes: string[]): this;
+    /**
+     * 최대 파일 크기 설정
+     * @param maxFileSize 최대 파일 크기 (bytes)
+     */
+    withMaxFileSize(maxFileSize: number): this;
+    /**
+     * ContentAssetField 인스턴스 생성 헬퍼
+     * @param props ContentAssetFieldProps
+     */
+    static create(props: ContentAssetFieldProps): ContentAssetField;
+}
+export {};

package/dist/listgrid/components/fields/contentasset/ContentAssetField.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormField } from '../abstract';
+import { getInputRendererParameters } from '../../helper/FieldRendererHelper';
+import { ContentAssetItem } from './ContentAssetItem';
+/**
+ * ContentAssetField
+ * 범용적인 파일 업로드 및 관리를 위한 ListGrid 커스텀 필드
+ *
+ * @extends FormField
+ */
+export class ContentAssetField extends FormField {
+    constructor(name, order) {
+        super(name, order, 'contentAsset');
+    }
+    /**
+     * ContentAssetField 핵심 렌더링 로직
+     */
+    renderInstance(params) {
+        return (async () => {
+            const inputParams = await getInputRendererParameters(this, params);
+            return (_jsx(ContentAssetItem, { ...inputParams, entityForm: params.entityForm, ...(params.session !== undefined ? { session: params.session } : {}), ...(this.maxItems !== undefined ? { maxItems: this.maxItems } : {}), ...(this.acceptedFileTypes !== undefined
+                    ? { acceptedFileTypes: this.acceptedFileTypes }
+                    : {}), ...(this.maxFileSize !== undefined ? { maxFileSize: this.maxFileSize } : {}) }));
+        })();
+    }
+    /**
+     * ContentAssetField 인스턴스 생성
+     */
+    createInstance(name, order) {
+        return new ContentAssetField(name, order);
+    }
+    /**
+     * 기본값 설정
+     * @param value ContentAsset 배열
+     */
+    withDefaultValue(value) {
+        return super.withDefaultValue(value);
+    }
+    /**
+     * 최대 항목 수 설정
+     * @param maxItems 최대 항목 수
+     */
+    withMaxItems(maxItems) {
+        this.maxItems = maxItems;
+        return this;
+    }
+    /**
+     * 허용된 파일 타입 설정
+     * @param acceptedFileTypes 파일 타입 배열
+     */
+    withAcceptedFileTypes(acceptedFileTypes) {
+        this.acceptedFileTypes = acceptedFileTypes;
+        return this;
+    }
+    /**
+     * 최대 파일 크기 설정
+     * @param maxFileSize 최대 파일 크기 (bytes)
+     */
+    withMaxFileSize(maxFileSize) {
+        this.maxFileSize = maxFileSize;
+        return this;
+    }
+    /**
+     * ContentAssetField 인스턴스 생성 헬퍼
+     * @param props ContentAssetFieldProps
+     */
+    static create(props) {
+        const field = new ContentAssetField(props.name, props.order).copyFields(props, true);
+        if (props.maxItems !== undefined) {
+            field.withMaxItems(props.maxItems);
+        }
+        if (props.acceptedFileTypes) {
+            field.withAcceptedFileTypes(props.acceptedFileTypes);
+        }
+        if (props.maxFileSize !== undefined) {
+            field.withMaxFileSize(props.maxFileSize);
+        }
+        return field;
+    }
+}

package/dist/listgrid/components/fields/contentasset/ContentAssetItem.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { InputRendererProps } from '../../../config/Config';
+import { EntityForm } from '../../../config/EntityForm';
+import { Session } from '../../../auth/types';
+interface ContentAssetItemProps extends InputRendererProps {
+    entityForm: EntityForm;
+    session?: Session;
+    maxItems?: number;
+    acceptedFileTypes?: string[];
+    maxFileSize?: number;
+}
+/**
+ * ContentAssetItem
+ * ContentAssetField의 메인 렌더링 컴포넌트
+ */
+export declare const ContentAssetItem: React.FC<ContentAssetItemProps>;
+export {};

package/dist/listgrid/components/fields/contentasset/ContentAssetItem.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { useContentAsset } from './hooks/useContentAsset';
+import { ContentAssetItemUI } from './components/ContentAssetItemUI';
+import { AddContentDialog } from './components/AddContentDialog';
+import { useModalManagerStore } from '../../../store';
+/**
+ * ContentAssetItem
+ * ContentAssetField의 메인 렌더링 컴포넌트
+ */
+export const ContentAssetItem = (props) => {
+    const { assets, loading, errors, titleErrors, setTitleErrors, handleAddAsset, handleRemoveAsset, handleUpdateAsset, handleTitleBlur, handleFileUpload, validateAll, canAddMore, isEmpty, isReadonly, } = useContentAsset({
+        value: props.value,
+        onChange: props.onChange,
+        onError: props.onError,
+        clearError: props.clearError,
+        entityForm: props.entityForm,
+        maxItems: props.maxItems,
+        readonly: props.readonly,
+    });
+    // GlobalModalManager 사용
+    const { openModal } = useModalManagerStore();
+    // readonly 상태 확인
+    const readonly = isReadonly || props.readonly;
+    // 항목 추가 - 다이얼로그 열기
+    const handleAddItem = useCallback(() => {
+        openModal({
+            title: '컨텐츠 추가',
+            size: 'sm',
+            content: (_jsx(AddContentDialog, { onAdd: (title, content) => {
+                    // 새 항목 추가
+                    handleAddAsset();
+                    // 추가된 항목의 인덱스는 현재 길이
+                    const newIndex = assets.length;
+                    // 제목과 내용 설정
+                    handleUpdateAsset(newIndex, 'title', title);
+                    if (content) {
+                        handleUpdateAsset(newIndex, 'content', content);
+                    }
+                }, existingTitles: assets.map((asset) => asset.title) })),
+            closeOnEscape: true,
+            closeOnClickOutside: true,
+        });
+    }, [openModal, handleAddAsset, handleUpdateAsset, assets]);
+    // Title 변경 핸들러
+    const handleTitleChange = useCallback((index, value) => {
+        handleUpdateAsset(index, 'title', value);
+        // 타이핑 중에는 에러 제거
+        if (titleErrors[index]) {
+            setTitleErrors((prev) => {
+                const newErrors = { ...prev };
+                delete newErrors[index];
+                return newErrors;
+            });
+        }
+    }, [handleUpdateAsset, titleErrors, setTitleErrors]);
+    // Content 변경 핸들러
+    const handleContentChange = useCallback((index, value) => {
+        handleUpdateAsset(index, 'content', value);
+    }, [handleUpdateAsset]);
+    // 파일 업로드 진행률 핸들러
+    const handleUploadProgress = useCallback((_index) => (_progress) => {
+        // TODO: 진행률 UI 업데이트
+    }, []);
+    return (_jsx(ContentAssetItemUI, { items: assets, loading: loading, errors: errors, titleErrors: titleErrors, readonly: readonly || false, canAddMore: canAddMore, isEmpty: isEmpty, acceptedFileTypes: props.acceptedFileTypes, maxFileSize: props.maxFileSize, onUpdateAsset: handleUpdateAsset, onTitleBlur: handleTitleBlur, onTitleChange: handleTitleChange, onContentChange: handleContentChange, onRemoveItem: handleRemoveAsset, onAddItem: handleAddItem, onFileUpload: handleFileUpload, onUploadProgress: handleUploadProgress, fieldErrors: props.errors }));
+};

package/dist/listgrid/components/fields/contentasset/components/AddContentDialog.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface AddContentDialogProps {
+    onAdd: (title: string, content?: string) => void;
+    existingTitles: string[];
+}
+/**
+ * AddContentDialog
+ * ContentAsset 항목 추가를 위한 다이얼로그 컴포넌트
+ */
+export declare const AddContentDialog: React.FC<AddContentDialogProps>;
+export {};

package/dist/listgrid/components/fields/contentasset/components/AddContentDialog.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { TextInput } from '../../../../ui';
+import { Textarea } from '../../../../ui';
+import { useModalManagerStore } from '../../../../store';
+/**
+ * AddContentDialog
+ * ContentAsset 항목 추가를 위한 다이얼로그 컴포넌트
+ */
+export const AddContentDialog = ({ onAdd, existingTitles }) => {
+    const [title, setTitle] = useState('');
+    const [content, setContent] = useState('');
+    const [titleError, setTitleError] = useState('');
+    const { closeTopModal } = useModalManagerStore();
+    // 제목 유효성 검사
+    const validateTitle = useCallback((value) => {
+        const trimmedValue = value.trim();
+        if (!trimmedValue) {
+            return '제목은 필수 입력 항목입니다.';
+        }
+        // 중복 검사 (대소문자 구분 없이)
+        const titleLower = trimmedValue.toLowerCase();
+        const isDuplicate = existingTitles.some((existing) => existing.toLowerCase() === titleLower);
+        if (isDuplicate) {
+            return '동일한 제목이 이미 존재합니다.';
+        }
+        return '';
+    }, [existingTitles]);
+    // 제목 변경 핸들러
+    const handleTitleChange = useCallback((value) => {
+        setTitle(value);
+        // 타이핑 중에는 에러 메시지 제거
+        if (titleError) {
+            setTitleError('');
+        }
+    }, [titleError]);
+    // 제목 블러 핸들러
+    const handleTitleBlur = useCallback(() => {
+        const error = validateTitle(title);
+        setTitleError(error);
+    }, [title, validateTitle]);
+    // 추가 버튼 핸들러
+    const handleAdd = useCallback(() => {
+        // 제목 유효성 검사
+        const error = validateTitle(title);
+        if (error) {
+            setTitleError(error);
+            return;
+        }
+        // 콜백 호출
+        onAdd(title.trim(), content.trim() || undefined);
+        // 모달 닫기
+        closeTopModal();
+    }, [title, content, validateTitle, onAdd, closeTopModal]);
+    // 취소 버튼 핸들러
+    const handleCancel = useCallback(() => {
+        closeTopModal();
+    }, [closeTopModal]);
+    // Enter 키 핸들러
+    const handleKeyPress = useCallback((e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleAdd();
+        }
+    }, [handleAdd]);
+    return (_jsxs("div", { className: "rcm-ca-dialog", children: [_jsxs("div", { children: [_jsxs("label", { className: "rcm-label", children: ["\uC81C\uBAA9", ' ', _jsx("span", { className: "rcm-text", "data-color": "error", children: "*" })] }), _jsx("div", { onBlur: handleTitleBlur, onKeyPress: handleKeyPress, children: _jsx(TextInput, { name: "title", value: title, onChange: handleTitleChange, placeHolder: "\uC81C\uBAA9\uC744 \uC785\uB825\uD558\uC138\uC694", className: titleError ? 'rcm-ca-input-error' : '' }) }), titleError && (_jsx("p", { className: "rcm-text", "data-color": "error", "data-size": "sm", children: titleError }))] }), _jsxs("div", { children: [_jsxs("label", { className: "rcm-label", children: ["\uC124\uBA85", ' ', _jsx("span", { className: "rcm-text", "data-tone": "muted", "data-size": "xs", children: "(\uC120\uD0DD\uC0AC\uD56D)" })] }), _jsx(Textarea, { name: "content", value: content, onChange: setContent, placeHolder: "\uBD80\uAC00 \uC124\uBA85\uC744 \uC785\uB825\uD558\uC138\uC694", rows: 3 })] }), _jsxs("div", { className: "rcm-ca-dialog-footer", children: [_jsx("button", { type: "button", onClick: handleCancel, className: "rcm-button", "data-variant": "outline", children: "\uCDE8\uC18C" }), _jsx("button", { type: "button", onClick: handleAdd, disabled: !title.trim(), className: "rcm-button", "data-variant": "primary", children: "\uCD94\uAC00" })] })] }));
+};

package/dist/listgrid/components/fields/contentasset/components/ContentAssetItemUI.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ContentAsset, ContentAssetError } from '../types';
+interface ContentAssetItemUIProps {
+    items: ContentAsset[];
+    loading: boolean;
+    errors: ContentAssetError[];
+    titleErrors: {
+        [key: number]: string;
+    };
+    readonly: boolean;
+    canAddMore: boolean;
+    isEmpty: boolean;
+    acceptedFileTypes?: string[] | undefined;
+    maxFileSize?: number | undefined;
+    onUpdateAsset: (index: number, field: keyof ContentAsset, value: any) => void;
+    onTitleBlur: (index: number, value: string) => void;
+    onTitleChange: (index: number, value: string) => void;
+    onContentChange: (index: number, value: string) => void;
+    onRemoveItem: (index: number) => void;
+    onAddItem: () => void;
+    onFileUpload: (index: number, file: File, onProgress?: (progress: number) => void) => Promise<void>;
+    onUploadProgress: (index: number) => (progress: number) => void;
+    fieldErrors?: string[] | undefined;
+}
+/**
+ * ContentAssetItemUI
+ * ContentAsset 항목들의 UI 렌더링 컴포넌트
+ */
+export declare const ContentAssetItemUI: React.FC<ContentAssetItemUIProps>;
+export {};

package/dist/listgrid/components/fields/contentasset/components/ContentAssetItemUI.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileUploadInput } from '../../../../ui';
+import { TextInput } from '../../../../ui';
+import { Textarea } from '../../../../ui';
+import { IconPlus, IconTrash } from '@tabler/icons-react';
+import { Tooltip } from '../../../../ui';
+/**
+ * ContentAssetItemUI
+ * ContentAsset 항목들의 UI 렌더링 컴포넌트
+ */
+export const ContentAssetItemUI = ({ items, loading, errors, titleErrors, readonly, canAddMore, isEmpty, acceptedFileTypes, maxFileSize, onUpdateAsset, onTitleBlur, onTitleChange, onContentChange, onRemoveItem, onAddItem, onFileUpload, onUploadProgress, fieldErrors, }) => {
+    // 로딩 중일 때
+    if (loading) {
+        return (_jsx("div", { className: "rcm-ca-loading", children: _jsx("span", { className: "rcm-text", "data-tone": "muted", children: "\uB85C\uB529 \uC911..." }) }));
+    }
+    // 아이템이 없을 때
+    if (isEmpty) {
+        return (_jsxs("div", { className: "rcm-ca-wrap", children: [_jsxs("div", { className: "rcm-ca-empty", children: [_jsx("p", { className: "rcm-text", "data-tone": "muted", children: "\uB4F1\uB85D\uB41C \uCEE8\uD150\uCE20\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }), !readonly && canAddMore && (_jsxs("button", { type: "button", onClick: onAddItem, className: "rcm-ca-add-btn", children: [_jsx(IconPlus, { size: 16 }), _jsx("span", { children: "\uCEE8\uD150\uCE20 \uCD94\uAC00" })] }))] }), fieldErrors && fieldErrors.length > 0 && (_jsx("div", { className: "rcm-ca-errors", children: fieldErrors.map((error, index) => (_jsx("p", { className: "rcm-text", "data-color": "error", "data-size": "sm", children: error }, index))) }))] }));
+    }
+    return (_jsxs("div", { className: "rcm-ca-wrap", children: [items.map((item, index) => {
+                const itemErrors = errors.filter((err) => err.index === index);
+                const hasError = itemErrors.length > 0 || titleErrors[index];
+                return (_jsxs("div", { className: `rcm-ca-item ${hasError ? 'rcm-ca-item-error' : ''}`, children: [_jsxs("div", { className: "rcm-ca-item-header", children: [_jsxs("div", { className: "rcm-ca-item-title-col", children: [_jsxs("label", { className: "rcm-label", children: ["\uC81C\uBAA9", ' ', _jsx("span", { className: "rcm-text", "data-color": "error", children: "*" })] }), _jsx("div", { onBlur: (e) => {
+                                                const target = e.target;
+                                                if (target.tagName === 'INPUT') {
+                                                    onTitleBlur(index, target.value);
+                                                }
+                                            }, children: _jsx(TextInput, { name: `title_${index}`, value: item.title, onChange: (val) => onTitleChange(index, val), placeHolder: "\uC81C\uBAA9\uC744 \uC785\uB825\uD558\uC138\uC694", readonly: readonly, className: titleErrors[index] ? 'rcm-ca-input-error' : '' }) }), titleErrors[index] && (_jsx("p", { className: "rcm-text", "data-color": "error", "data-size": "sm", children: titleErrors[index] }))] }), !readonly && (_jsx("div", { className: "rcm-ca-item-remove-wrap", children: _jsx(Tooltip, { label: "\uC0AD\uC81C", children: _jsx("button", { type: "button", onClick: () => onRemoveItem(index), className: "rcm-icon-btn", "data-size": "md", "data-color": "error", children: _jsx(IconTrash, { className: "rcm-icon", "data-size": "lg" }) }) }) }))] }), _jsxs("div", { children: [_jsxs("label", { className: "rcm-label", children: ["\uC124\uBA85", ' ', _jsx("span", { className: "rcm-text", "data-tone": "muted", "data-size": "xs", children: "(\uC120\uD0DD\uC0AC\uD56D)" })] }), _jsx(Textarea, { name: `content_${index}`, value: item.content || '', onChange: (val) => onContentChange(index, val), placeHolder: "\uBD80\uAC00 \uC124\uBA85\uC744 \uC785\uB825\uD558\uC138\uC694", readonly: readonly, rows: 3 })] }), _jsxs("div", { children: [_jsxs("label", { className: "rcm-label", children: ["\uD30C\uC77C", ' ', _jsx("span", { className: "rcm-text", "data-color": "error", children: "*" })] }), _jsx(FileUploadInput, { name: `asset_${index}`, value: item.assetUrl || '', onChange: (val) => onUpdateAsset(index, 'assetUrl', val), readonly: readonly, viewSimple: false, config: {
+                                        maxCount: 1,
+                                        maxSize: maxFileSize ? maxFileSize / (1024 * 1024) : 10,
+                                        extensions: acceptedFileTypes
+                                            ? acceptedFileTypes.map((type) => type.replace('*', '').replace('.', ''))
+                                            : ['pdf', 'jpg', 'jpeg', 'png', 'doc', 'docx', 'xls', 'xlsx'],
+                                    } }), itemErrors
+                                    .filter((err) => err.field === 'assetUrl')
+                                    .map((err, errIndex) => (_jsx("p", { className: "rcm-text", "data-color": "error", "data-size": "sm", children: err.message }, errIndex)))] })] }, index));
+            }), !readonly && canAddMore && (_jsx("div", { className: "rcm-ca-add-btn-row", children: _jsxs("button", { type: "button", onClick: onAddItem, className: "rcm-ca-add-btn", children: [_jsx(IconPlus, { size: 16 }), _jsx("span", { children: "\uCEE8\uD150\uCE20 \uCD94\uAC00" })] }) })), fieldErrors && fieldErrors.length > 0 && (_jsx("div", { className: "rcm-ca-errors", children: fieldErrors.map((error, index) => (_jsx("p", { className: "rcm-text", "data-color": "error", "data-size": "sm", children: error }, index))) }))] }));
+};

package/dist/listgrid/components/fields/contentasset/hooks/useContentAsset.d.ts

@@ -0,0 +1,36 @@
+import { ContentAsset, ContentAssetError } from '../types';
+import { EntityForm } from '../../../../config/EntityForm';
+interface UseContentAssetProps {
+    value: ContentAsset[] | undefined;
+    onChange: (value: ContentAsset[]) => void;
+    onError?: ((message: string) => void) | undefined;
+    clearError?: (() => void) | undefined;
+    entityForm: EntityForm;
+    maxItems?: number | undefined;
+    readonly?: boolean | undefined;
+}
+/**
+ * ContentAsset 상태 관리 훅
+ * 범용적인 파일 업로드 및 관리를 위한 상태 관리
+ */
+export declare const useContentAsset: ({ value: initialValue, onChange, onError, clearError, entityForm, maxItems, readonly, }: UseContentAssetProps) => {
+    assets: ContentAsset[];
+    loading: boolean;
+    errors: ContentAssetError[];
+    titleErrors: {
+        [key: number]: string;
+    };
+    setTitleErrors: import("react").Dispatch<import("react").SetStateAction<{
+        [key: number]: string;
+    }>>;
+    handleAddAsset: () => void;
+    handleRemoveAsset: (index: number) => void;
+    handleUpdateAsset: (index: number, field: keyof ContentAsset, value: any) => void;
+    handleTitleBlur: (index: number, value: string) => void;
+    handleFileUpload: (index: number, file: File, onUploadProgress?: (progress: number) => void) => Promise<void>;
+    validateAll: () => boolean;
+    canAddMore: boolean;
+    isEmpty: boolean;
+    isReadonly: boolean;
+};
+export {};