@rchemist/listgrid 0.2.6

package/dist/listgrid/components/fields/contentasset/hooks/useContentAsset.js

@@ -0,0 +1,188 @@
+'use client';
+import { useCallback, useEffect, useState } from 'react';
+import { validateContentAssets } from '../types';
+/**
+ * ContentAsset 상태 관리 훅
+ * 범용적인 파일 업로드 및 관리를 위한 상태 관리
+ */
+export const useContentAsset = ({ value: initialValue, onChange, onError, clearError, entityForm, maxItems, readonly = false, }) => {
+    // 초기값 설정 - 빈 배열로 시작
+    const [assets, setAssets] = useState(() => {
+        return initialValue || [];
+    });
+    const [loading, setLoading] = useState(false);
+    const [errors, setErrors] = useState([]);
+    const [titleErrors, setTitleErrors] = useState({});
+    // props.value 변경 시 상태 업데이트
+    useEffect(() => {
+        if (initialValue && JSON.stringify(initialValue) !== JSON.stringify(assets)) {
+            setAssets(initialValue);
+        }
+    }, [initialValue]); // assets는 의존성에서 제거 (무한 루프 방지)
+    // 자산 추가
+    const handleAddAsset = useCallback(() => {
+        // 최대 항목 수 체크
+        if (maxItems && assets.length >= maxItems) {
+            if (onError) {
+                onError(`최대 ${maxItems}개까지만 추가할 수 있습니다.`);
+            }
+            return;
+        }
+        const newAsset = {
+            title: '',
+            content: '',
+            assetUrl: '',
+        };
+        const newAssets = [...assets, newAsset];
+        setAssets(newAssets);
+        onChange(newAssets);
+        if (clearError) {
+            clearError();
+        }
+    }, [assets, maxItems, onChange, onError, clearError]);
+    // 자산 삭제
+    const handleRemoveAsset = useCallback((index) => {
+        const newAssets = assets.filter((_, i) => i !== index);
+        setAssets(newAssets);
+        onChange(newAssets);
+        // titleErrors 재정렬
+        const newTitleErrors = {};
+        Object.keys(titleErrors).forEach((key) => {
+            const oldIndex = parseInt(key);
+            const err = titleErrors[oldIndex];
+            if (err === undefined)
+                return;
+            if (oldIndex < index) {
+                newTitleErrors[oldIndex] = err;
+            }
+            else if (oldIndex > index) {
+                newTitleErrors[oldIndex - 1] = err;
+            }
+        });
+        setTitleErrors(newTitleErrors);
+        // 유효성 재검사
+        const validation = validateContentAssets(newAssets);
+        setErrors(validation.errors);
+        if (clearError) {
+            clearError();
+        }
+    }, [assets, titleErrors, onChange, clearError]);
+    // 자산 업데이트
+    const handleUpdateAsset = useCallback((index, field, value) => {
+        const newAssets = [...assets];
+        newAssets[index] = {
+            ...newAssets[index],
+            [field]: value,
+        };
+        setAssets(newAssets);
+        onChange(newAssets);
+        // title 변경 시 중복 검사는 handleTitleBlur에서 처리
+        if (field !== 'title') {
+            // 유효성 검사
+            const validation = validateContentAssets(newAssets);
+            setErrors(validation.errors);
+            if (validation.errors.length > 0 && onError) {
+                const firstError = validation.errors[0];
+                onError(firstError.message);
+            }
+            else if (clearError) {
+                clearError();
+            }
+        }
+    }, [assets, onChange, onError, clearError]);
+    // 제목 필드 blur 시 중복 검증
+    const handleTitleBlur = useCallback((index, value) => {
+        const trimmedValue = value.trim();
+        // 빈 값 체크
+        if (!trimmedValue) {
+            setTitleErrors((prev) => ({
+                ...prev,
+                [index]: '제목을 입력해주세요.',
+            }));
+            return;
+        }
+        // 중복 체크 - 자기 자신을 제외한 다른 모든 제목과 비교
+        const otherTitles = assets.filter((_, i) => i !== index).map((asset) => asset.title.trim());
+        // 대소문자 구분 없이 비교
+        const titleLower = trimmedValue.toLowerCase();
+        const isDuplicate = otherTitles.some((title) => title.toLowerCase() === titleLower);
+        if (isDuplicate) {
+            setTitleErrors((prev) => ({
+                ...prev,
+                [index]: '동일한 제목이 이미 존재합니다.',
+            }));
+        }
+        else {
+            // 검증 통과 - 에러 제거
+            setTitleErrors((prev) => {
+                const newErrors = { ...prev };
+                delete newErrors[index];
+                return newErrors;
+            });
+        }
+    }, [assets]);
+    // 파일 업로드 핸들러
+    const handleFileUpload = useCallback(async (index, file, onUploadProgress) => {
+        setLoading(true);
+        try {
+            // TODO: 실제 파일 업로드 로직 구현
+            // 현재는 임시로 로컬 URL 생성
+            const fileUrl = URL.createObjectURL(file);
+            // 진행률 시뮬레이션 (실제 구현시 제거)
+            if (onUploadProgress) {
+                for (let i = 0; i <= 100; i += 10) {
+                    await new Promise((resolve) => setTimeout(resolve, 100));
+                    onUploadProgress(i);
+                }
+            }
+            handleUpdateAsset(index, 'assetUrl', fileUrl);
+            if (clearError) {
+                clearError();
+            }
+        }
+        catch (error) {
+            if (onError) {
+                onError('파일 업로드 중 오류가 발생했습니다.');
+            }
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [handleUpdateAsset, onError, clearError]);
+    // 전체 유효성 검사
+    const validateAll = useCallback(() => {
+        const validation = validateContentAssets(assets);
+        setErrors(validation.errors);
+        // 제목 에러도 함께 체크
+        const hasTitleErrors = Object.keys(titleErrors).length > 0;
+        if (!validation.isValid || hasTitleErrors) {
+            if (onError) {
+                if (validation.errors.length > 0) {
+                    onError(validation.errors[0].message);
+                }
+                else if (hasTitleErrors) {
+                    const firstErrorIndex = Object.keys(titleErrors)[0];
+                    onError(titleErrors[parseInt(firstErrorIndex)]);
+                }
+            }
+            return false;
+        }
+        return true;
+    }, [assets, titleErrors, onError]);
+    return {
+        assets,
+        loading,
+        errors,
+        titleErrors,
+        setTitleErrors,
+        handleAddAsset,
+        handleRemoveAsset,
+        handleUpdateAsset,
+        handleTitleBlur,
+        handleFileUpload,
+        validateAll,
+        canAddMore: !maxItems || assets.length < maxItems,
+        isEmpty: assets.length === 0,
+        isReadonly: readonly,
+    };
+};

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

@@ -0,0 +1,2 @@
+export { ContentAssetField } from './ContentAssetField';
+export type { ContentAsset, ContentAssetFieldConfig } from './types';

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

@@ -0,0 +1 @@
+export { ContentAssetField } from './ContentAssetField';

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

@@ -0,0 +1,50 @@
+/**
+ * ContentAsset 인터페이스
+ * 범용적인 파일 업로드 및 관리를 위한 자산 타입
+ */
+export interface ContentAsset {
+    /** 백엔드 서버에서 받은 고유 식별자 */
+    id?: string;
+    /** 컨텐츠 제목 (필수, 중복 불가) */
+    title: string;
+    /** 부가 설명 텍스트 */
+    content?: string;
+    /** 업로드된 파일의 URL */
+    assetUrl: string;
+}
+/**
+ * ContentAsset 유효성 검사 결과
+ */
+export interface ContentAssetValidation {
+    isValid: boolean;
+    errors: ContentAssetError[];
+}
+/**
+ * ContentAsset 에러 타입
+ */
+export interface ContentAssetError {
+    index: number;
+    field: keyof ContentAsset;
+    message: string;
+}
+/**
+ * ContentAsset 유효성 검사 함수
+ */
+export declare const validateContentAssets: (assets: ContentAsset[]) => ContentAssetValidation;
+/**
+ * 빈 ContentAsset 생성
+ */
+export declare const createEmptyContentAsset: () => ContentAsset;
+/**
+ * ContentAssetField 설정 옵션
+ */
+export interface ContentAssetFieldConfig {
+    /** 최대 업로드 가능한 항목 수 */
+    maxItems?: number;
+    /** 허용된 파일 타입 (예: ['image/*', 'application/pdf']) */
+    acceptedFileTypes?: string[];
+    /** 최대 파일 크기 (bytes) */
+    maxFileSize?: number;
+    /** 읽기 전용 모드 */
+    readonly?: boolean;
+}

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

@@ -0,0 +1,48 @@
+/**
+ * ContentAsset 유효성 검사 함수
+ */
+export const validateContentAssets = (assets) => {
+    const errors = [];
+    const titles = new Set();
+    assets.forEach((asset, index) => {
+        // 제목 필수 검사
+        if (!asset.title || asset.title.trim() === '') {
+            errors.push({
+                index,
+                field: 'title',
+                message: '제목은 필수 입력 항목입니다.',
+            });
+        }
+        // 제목 중복 검사
+        if (asset.title && titles.has(asset.title.trim())) {
+            errors.push({
+                index,
+                field: 'title',
+                message: '동일한 제목이 이미 존재합니다.',
+            });
+        }
+        else if (asset.title) {
+            titles.add(asset.title.trim());
+        }
+        // 파일 URL 필수 검사
+        if (!asset.assetUrl || asset.assetUrl.trim() === '') {
+            errors.push({
+                index,
+                field: 'assetUrl',
+                message: '파일을 업로드해주세요.',
+            });
+        }
+    });
+    return {
+        isValid: errors.length === 0,
+        errors,
+    };
+};
+/**
+ * 빈 ContentAsset 생성
+ */
+export const createEmptyContentAsset = () => ({
+    title: '',
+    content: '',
+    assetUrl: '',
+});

package/dist/listgrid/components/fields/filter/DatetimeFilter.d.ts

@@ -0,0 +1,7 @@
+import { FilterRenderParameters } from '../../../config/EntityField';
+import { MinMaxStringLimit } from '../../../form/Type';
+export interface DatetimeFilterProps extends FilterRenderParameters {
+    name: string;
+    limit?: MinMaxStringLimit | undefined;
+}
+export declare const DatetimeFilter: (props: DatetimeFilterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/listgrid/components/fields/filter/DatetimeFilter.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { fDate, getDefinedDates } from '../../../misc';
+import { FlatPickrDateField } from '../../../ui';
+import { SafePerfectScrollbar } from '../../../ui';
+export const DatetimeFilter = (props) => {
+    // value is either a Promise<any> from filter framework or Date[] from handleValueChange
+    const [value, setValue] = useState();
+    function handleValueChange(type) {
+        const values = getDefinedDates(type);
+        props.onChange(values, 'BETWEEN');
+        setValue(values);
+    }
+    useEffect(() => {
+        setValue(props.value);
+    }, [props.value]);
+    return (_jsxs("div", { children: [_jsx(FlatPickrDateField, { type: 'date', name: props.name, onChange: (val) => {
+                    if (Array.isArray(val) && val.length === 2) {
+                        if (val[0] === val[1]) {
+                            const until = new Date(val[1]);
+                            until.setDate(until.getDate() + 1);
+                            props.onChange([val[0], fDate(until, `yyyy-MM-dd`)], 'BETWEEN');
+                        }
+                        else {
+                            props.onChange(val, 'BETWEEN');
+                        }
+                        return;
+                    }
+                }, limit: props.limit, range: true, value: value }), _jsx("div", { className: "rcm-show-below-md", children: _jsx(SafePerfectScrollbar, { className: "perfect-scrollbar relative w-full -mr-3 pr-3", children: showButtons() }) }), _jsx("div", { className: "rcm-show-from-md", children: showButtons() })] }));
+    function showButtons() {
+        return (_jsxs("div", { className: 'flex gap-3 mt-2', children: [_jsx("button", { className: 'btn-sm border rounded-md flex items-center max-h-[24px] btn-outline-primary whitespace-nowrap', onClick: () => {
+                        handleValueChange('TODAY');
+                    }, children: "\uC624\uB298" }), _jsx("button", { className: 'btn-sm border rounded-md flex items-center max-h-[24px] btn-outline-primary whitespace-nowrap', onClick: () => {
+                        handleValueChange('WEEK');
+                    }, children: "1\uC8FC\uC77C" }), _jsx("button", { className: 'btn-sm border rounded-md flex items-center max-h-[24px] btn-outline-primary whitespace-nowrap', onClick: () => {
+                        handleValueChange('MONTH');
+                    }, children: "1\uAC1C\uC6D4" }), _jsx("button", { className: 'btn-sm border rounded-md flex items-center max-h-[24px] btn-outline-primary whitespace-nowrap', onClick: () => {
+                        handleValueChange('MONTH3');
+                    }, children: "3\uAC1C\uC6D4" }), _jsx("button", { className: 'btn-sm border rounded-md flex items-center max-h-[24px] btn-outline-primary whitespace-nowrap', onClick: () => {
+                        handleValueChange('MONTH6');
+                    }, children: "6\uAC1C\uC6D4" }), _jsx("button", { className: 'btn-sm border rounded-md flex items-center max-h-[24px] btn-outline-primary whitespace-nowrap', onClick: () => {
+                        handleValueChange('YEAR');
+                    }, children: "1\uB144" })] }));
+    }
+};

package/dist/listgrid/components/fields/filter/NumberFilter.d.ts

@@ -0,0 +1,7 @@
+import { QueryConditionType } from '../../../form/SearchForm';
+interface NumberFilterProps {
+    onRemove: () => void;
+    onChange: (queryConditionType: QueryConditionType, value: number | number[]) => void;
+}
+export declare const NumberFilter: (props: NumberFilterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/listgrid/components/fields/filter/NumberFilter.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { SelectBox } from '../../../ui';
+import { TextInput } from '../../../ui';
+import { isBlank } from '../../../utils/StringUtil';
+export const NumberFilter = (props) => {
+    const [type, setType] = useState('BETWEEN');
+    const [start, setStart] = useState();
+    const [end, setEnd] = useState();
+    const filterType = getNumberFilterType(type);
+    function setValue(valueType, value) {
+        let startValue = start;
+        let endValue = end;
+        if (valueType === 'start') {
+            const start = value ? Number(value) : undefined;
+            setStart(start);
+            startValue = start;
+        }
+        else {
+            const end = value ? Number(value) : undefined;
+            setEnd(end);
+            endValue = end;
+        }
+        if (filterType.showEnd) {
+            if (startValue !== undefined && endValue !== undefined) {
+                props.onChange(type, [startValue, endValue]);
+                return;
+            }
+            else {
+                props.onRemove();
+            }
+        }
+        else {
+            if (startValue !== undefined) {
+                props.onChange(type, startValue);
+            }
+            else {
+                props.onRemove();
+            }
+        }
+    }
+    function changeType(type) {
+        setType(type);
+        setStart(undefined);
+        setEnd(undefined);
+        props.onRemove();
+    }
+    return (_jsxs("div", { className: 'flex w-full space-x-2', children: [_jsx("div", { className: 'w-[140px]', children: _jsx(SelectBox, { value: type, required: true, name: 'type', options: [...NumberFilterTypes], onChange: (value) => {
+                        changeType(value);
+                    } }) }), _jsxs("div", { className: 'w-full flex space-x-2 items-center', children: [_jsx(TextInput, { name: 'start', type: 'number', value: start ?? '', onChange: (value) => {
+                            if (!isBlank(value) && isNaN(Number(value))) {
+                                return;
+                            }
+                            setValue('start', value);
+                        } }), filterType.showEnd && (_jsxs(React.Fragment, { children: [_jsx("span", { children: "~" }), _jsx(TextInput, { name: 'end', type: 'number', value: end ?? '', onChange: (value) => {
+                                    if (!isBlank(value) && isNaN(Number(value))) {
+                                        return;
+                                    }
+                                    setValue('end', value);
+                                } })] }))] })] }));
+};
+const NumberFilterTypes = [
+    { value: 'BETWEEN', label: '범위', showEnd: true },
+    { value: 'EQUAL', label: '일치', showEnd: false },
+    { value: 'NOT_EQUAL', label: '불일치', showEnd: false },
+    { value: 'LESS_THAN', label: '미만', showEnd: false },
+    { value: 'LESS_THAN_EQUAL', label: '이하', showEnd: false },
+    { value: 'GREATER', label: '초과', showEnd: false },
+    { value: 'GREATER_THAN_EQUAL', label: '이상', showEnd: false },
+];
+function getNumberFilterType(type) {
+    return NumberFilterTypes.find((value) => value.value === type);
+}

package/dist/listgrid/components/fields/rule/RuleBasedFieldView.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { ResultByCount, ResultByRuleCondition, RuleBasedFieldProps, RuleFieldEntityForm, RuleFieldType } from './Type';
+interface RuleBasedFieldViewProps extends RuleBasedFieldProps {
+    onCancel: () => void;
+    apiUrl?: string | undefined;
+    label?: ReactNode | undefined;
+    helpText?: ReactNode | undefined;
+    onSubmitField?: ResultByRuleCondition | undefined;
+    onSubmitSelector?: ResultByCount | undefined;
+    viewType: 'selector' | 'field';
+    type?: RuleFieldType | undefined;
+    entityForms: RuleFieldEntityForm[];
+}
+export declare const RuleBasedFieldsView: (props: RuleBasedFieldViewProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};