@rchemist/listgrid 0.2.6

package/dist/listgrid/components/fields/Preset.js

@@ -0,0 +1,306 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StringField } from './StringField';
+import { TextareaField } from './TextareaField';
+import { BooleanField } from './BooleanField';
+import { NumberField } from './NumberField';
+import { DatetimeField } from './DatetimeField';
+import { MarkdownField } from './MarkdownField';
+import { RevisionField } from '../revision/RevisionField';
+import { ADD_ONLY, checkDuplicateValueProcess, MODIFY_ONLY, STATUS_TAB_INFO, VIEW_HIDDEN, } from '../../config/Config';
+import { RegexValidation } from '../../validations/RegexValidation';
+import { RegexAlias, RegexUrlBody } from '../../misc';
+import { SelectField } from './SelectField';
+import { isTrue } from '../../utils/BooleanUtil';
+/*
+
+*/
+export const SeoMetadataFields = [
+    new StringField('metaTitle', 1100)
+        .withLabel('Title')
+        .withHelpText('Front 서비스에서 Html meta.title 태그 에 삽입됩니다.'),
+    new TextareaField('metaDescription', 1200)
+        .withLabel('Description')
+        .withHelpText('Front 서비스에서 Html meta.description 태그 에 삽입됩니다.')
+        .withLimit({ max: 500 }),
+    new TextareaField('metaHeader', 1300)
+        .withLabel('Meta')
+        .withHelpText('Front 서비스에서 Html meta 태그의 content 에 삽입될 값을 입력합니다.'),
+];
+export const AliasField = (props) => {
+    const label = props.label ?? '시스템 ID';
+    const order = props.order ?? 10;
+    const name = props.name ?? 'alias';
+    return new StringField(name, order)
+        .withLabel(`${label}`)
+        .withHelpText('시스템에서 사용하는 ID 입니다. 영문 소문자와 숫자, _만 입력할 수 있습니다.')
+        .withRequired(true)
+        .withCheckButtonValidation(checkDuplicateValueProcess({ url: props.fetchUrl, fieldName: 'alias', label: `${label}` }))
+        .withValidations(new RegexValidation('regex-alias', RegexAlias, '영문 소문자와 숫자, _를 사용해 최소 3자리 이상 입력해야 합니다.'))
+        .withViewPreset(ADD_ONLY)
+        .useListField();
+};
+export const ExternalIdField = (props) => {
+    const label = props.label ?? '외부 시스템 ID';
+    const order = props.order ?? 200;
+    return new StringField('externalId', order)
+        .withLabel(`${label}`)
+        .withHidden(true) // 외부 시스템 키는 기본 히든 처리한다.
+        .withHelpText('외부 시스템과 연동할 때 사용하는 외부 시스템의 ID 입니다. 영문 소문자와 숫자만 입력할 수 있습니다.')
+        .withCheckButtonValidation(checkDuplicateValueProcess({
+        url: props.fetchUrl,
+        fieldName: 'externalId',
+        label: `${label}`,
+    }));
+};
+export const NameField = (props) => {
+    const label = props?.label ?? '이름';
+    const order = props?.order ?? 100;
+    const name = props?.name ?? 'name';
+    return new StringField(name, order)
+        .withLabel(`${label}`)
+        .withRequired(true)
+        .withReadOnly(false)
+        .useListField();
+};
+export const LabelField = (props) => {
+    const label = props?.label ?? 'Label';
+    const order = props?.order ?? 110;
+    const name = props?.name ?? 'label';
+    return new StringField(name, order)
+        .withLabel(`${label}`)
+        .withHelpText('Front 서비스에 표시할 때 이름 대신 사용할 수 있습니다. 이 값을 입력하지 않으면 `이름` 값을 그대로 사용합니다.')
+        .useListField();
+};
+export const DescriptionField = (props) => {
+    const label = props?.label ?? '설명';
+    const order = props?.order ?? 200;
+    const name = props?.name ?? 'description';
+    return new MarkdownField(name, order)
+        .withLabel(`${label}`)
+        .withRequired(false)
+        .withHelpText(`관리자도구에서 이 데이터를 식별하기 위한 설명입니다.`)
+        .withReadOnly(false);
+};
+export const TitleField = (props) => {
+    const label = props?.label ?? '제목';
+    const order = props?.order ?? 100;
+    const name = props?.name ?? 'title';
+    return new StringField(name, order)
+        .withLabel(`${label}`)
+        .withRequired(true)
+        .useListField()
+        .withReadOnly(false);
+};
+export const ContentField = (props) => {
+    const label = props?.label ?? '내용';
+    const order = props?.order ?? 200;
+    const name = props?.name ?? 'content';
+    return new MarkdownField(name, order)
+        .withLabel(`${label}`)
+        .withRequired(true)
+        .withReadOnly(false);
+};
+export const SlugField = (props) => {
+    const label = props?.label ?? 'Slug';
+    const order = props?.order ?? 300;
+    const name = props?.name ?? 'slug';
+    return new StringField('slug', order)
+        .withLabel(`${label}`)
+        .withHelpText({
+        onUpdate: `Front 서비스에서 이 ${props.entityName} 데이터를 제공할 URL 을 /${props.entity}/{Slug} 로 지정할 수 있습니다. 한글,영문,숫자,-만 입력 가능합니다.`,
+    })
+        .withRequired(true)
+        .withCheckButtonValidation(checkDuplicateValueProcess({ url: props.fetchUrl, fieldName: 'slug', label: `${label}` }))
+        .withValidations(new RegexValidation('role-slug', RegexUrlBody, '영문,숫자,한글,-로 2~100자 이내로 입력할 수 있습니다.'))
+        .useListField();
+};
+export const AvailableDatetimeFields = (target, props) => {
+    const label = props?.label ?? '유효기간';
+    const availableAtLabel = props?.fieldLabel?.availableAt ?? `${label} 시작일`;
+    const availableUntilLabel = props?.fieldLabel?.availableUntil ?? `${label} 종료일`;
+    const availableAtOrder = props?.order ?? 300;
+    const availableUntilOrder = availableAtOrder + 10;
+    const availableAtName = props?.fieldName?.availableAt ?? 'availableAt';
+    const availableUntilName = props?.fieldName?.availableUntil ?? 'availableUntil';
+    return [
+        new DatetimeField(availableAtName, availableAtOrder)
+            .withLabel(`${availableAtLabel}`)
+            .withListConfig({
+            support: true,
+            sortable: true,
+            filterable: true,
+            viewRaw: true,
+            order: availableAtOrder,
+        })
+            .withHelpText(`이 ${target} ${label}의 시작일을 설정합니다. 시작일을 설정하지 않으면 현재 시점부터 사용 가능합니다. 시작일 ~ 종료일 사이에 있지 않은 경우 Front 사이트에서 이 ${target} 데이터에 접근할 수 없습니다.`),
+        new DatetimeField(availableUntilName, availableUntilOrder)
+            .withLabel(`${availableUntilLabel}`)
+            .withListConfig({
+            support: true,
+            sortable: true,
+            filterable: true,
+            viewRaw: true,
+            order: availableUntilOrder,
+        })
+            .withHelpText(`이 ${target} ${label}의 종료일을 설정합니다. 종료일을 설정하지 않으면 시작일 이후부터 계속 사용할 수 있습니다.`),
+    ];
+};
+export const StatusDateAndRevisionPreset = (useUpdatedAt = true, useRevision = true) => {
+    const items = [
+        new DatetimeField('createdAt', 100000)
+            .withLabel('등록일')
+            .withViewPreset(MODIFY_ONLY)
+            .withReadOnly(true)
+            .useListField(),
+    ];
+    if (useUpdatedAt) {
+        items.push(new DatetimeField('updatedAt', 100100)
+            .withLabel('수정일')
+            .withViewPreset(MODIFY_ONLY)
+            .withReadOnly(true));
+    }
+    if (useRevision) {
+        items.push(new RevisionField('entityForm-revision', 100200)
+            .withLabel('변경 내역')
+            .withViewPreset(MODIFY_ONLY)
+            .withReadOnly(true));
+    }
+    return {
+        tab: STATUS_TAB_INFO,
+        items: items,
+    };
+};
+export const StatusCreatedAtFieldPreset = StatusDateAndRevisionPreset(false, true);
+export const StatusCreatedAndUpdatedAtFieldPreset = StatusDateAndRevisionPreset(true, true);
+export const XrefAtFieldPreset = {
+    tab: STATUS_TAB_INFO,
+    items: [
+        new DatetimeField('xrefAt', 110000)
+            .withLabel('지정일')
+            .withViewPreset(VIEW_HIDDEN)
+            .withReadOnly(true)
+            .useListField(),
+    ],
+};
+export const DeviceTypes = [
+    { label: '웹', value: 'PC' },
+    { label: '모바일', value: 'MOBILE' },
+    { label: '앱', value: 'MOBILE_APP' },
+    { label: '기타', value: 'UNDEFINED' },
+];
+export const DeviceTypeField = (props) => {
+    const label = props?.label ?? '가입 채널';
+    const order = props?.order ?? 600;
+    return new SelectField('deviceType', order, [...DeviceTypes])
+        .withLabel(label)
+        .withRequired(false)
+        .withViewPreset(MODIFY_ONLY)
+        .withReadOnly(true)
+        .useListField();
+};
+export const HiddenField = (props) => {
+    const label = props?.label ?? '숨김 여부';
+    const order = props?.order ?? 700;
+    return new BooleanField('hidden', order).withLabel(label).withRequired(false).withReadOnly(false);
+};
+export const PriorityField = (props) => {
+    const label = props?.label ?? '우선순위';
+    const order = props?.order ?? 800;
+    return new NumberField('priority', order)
+        .withLabel(label)
+        .withRequired(false)
+        .withReadOnly(false)
+        .useListField();
+};
+export const ActiveField = (props) => {
+    const label = props?.label ?? '사용 여부';
+    const order = props?.order ?? 900;
+    const value = isTrue(props?.defaultValue);
+    return new BooleanField('active', order)
+        .withLabel(label)
+        .withRequired(true)
+        .withDefaultValue(value)
+        .withHelpText('이 값을 `아니오`로 설정하면 사용할 수 없습니다.')
+        .withReadOnly(false)
+        .useListField({ order: 10000000000 });
+};
+export const MarketingField = (props) => {
+    const messageOrder = props?.order !== undefined ? props.order + 10 : 100;
+    const linkOrder = props?.order !== undefined ? props.order + 20 : 110;
+    return [
+        new TextareaField('marketingMessage', messageOrder)
+            .withLabel('마케팅 메시지')
+            .withRequired(false)
+            .withReadOnly(false)
+            .withHelpText('이 오퍼가 적용될 때 주문서에 표시되는 메시지 입니다.'),
+        new StringField('marketingLink', linkOrder)
+            .withLabel('마케팅 링크')
+            .withRequired(false)
+            .withHelpText('주문서에 표시되는 메시지에 링크를 연결할 수 있습니다. 마케팅 메시지를 입력하지 않으면 적용되지 않습니다.')
+            .withReadOnly(false),
+    ];
+};
+export const TooltipDiv = (props) => {
+    return _jsx("div", { className: 'max-w-[300px] break-words whitespace-normal', children: props.children });
+};
+export const PublishStatusTypes = [
+    { label: '등록', value: 'PUBLISHED' },
+    { label: '임시 저장', value: 'DRAFT' },
+];
+export const DraftPublishStatusTypes = [
+    { label: '임시 저장', value: 'DRAFT' },
+    { label: '등록', value: 'PUBLISHED' },
+];
+export const PublishedPublishStatusTypes = [
+    { label: '등록', value: 'PUBLISHED' },
+    { label: '폐기', value: 'DISCARDED' },
+];
+export const DiscardedPublishStatusTypes = [{ label: '폐기', value: 'DISCARDED' }];
+export const PublishStatusFieldPreset = {
+    tab: STATUS_TAB_INFO,
+    items: [
+        new SelectField('publishStatus', 100000, PublishStatusTypes)
+            .withLabel('게시 상태')
+            .withHelpText('게시 상태를 선택합니다. 게시 상태를 `등록`으로 선택한 후에는 주요 정보를 변경할 수 없으니 주의하세요.')
+            .withRequired(true)
+            .withModifyOnly()
+            .useListField()
+            .withDefaultValue('DRAFT'),
+    ],
+};
+export function applyPublishStatusEntityForm(entityForm, ...readonlyOnPublishedFields) {
+    entityForm.addFields(PublishStatusFieldPreset);
+    entityForm.withOnInitialize(async (entityForm) => {
+        if (entityForm.getRenderType() === 'update') {
+            const publishStatus = entityForm.getField('publishStatus');
+            const publishStatusValue = await entityForm.getValue('publishStatus');
+            if (publishStatus && publishStatus instanceof SelectField) {
+                if (publishStatusValue === 'PUBLISHED') {
+                    publishStatus
+                        .withOptions(PublishedPublishStatusTypes)
+                        .withHelpText('현재 사용중인 상태 입니다. 게시 상태를 `폐기`로 변경하면 더 이상 사용할 수 없습니다.');
+                    if (readonlyOnPublishedFields.length > 0) {
+                        for (const field of readonlyOnPublishedFields) {
+                            entityForm.getField(field)?.withReadOnly(true);
+                        }
+                    }
+                }
+                else if (publishStatusValue === 'DRAFT') {
+                    publishStatus
+                        .withOptions(DraftPublishStatusTypes)
+                        .withHelpText('게시 상태를 선택합니다. 게시 상태를 `등록`으로 선택한 후에는 주요 정보를 변경할 수 없으니 주의하세요.');
+                }
+                else if (publishStatusValue === 'DISCARDED') {
+                    publishStatus
+                        .withOptions(DiscardedPublishStatusTypes)
+                        .withHelpText('게시 상태를 변경할 수 없습니다.');
+                    entityForm.setReadOnly();
+                }
+                entityForm.fields.set('publishStatus', publishStatus);
+            }
+            return entityForm.withShouldReload(true);
+        }
+        return entityForm;
+    });
+    return entityForm;
+}

package/dist/listgrid/components/fields/ProfileField.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { FieldRenderParameters } from '../../config/EntityField';
+import { FormField } from './abstract';
+export declare class ProfileField extends FormField<ProfileField> {
+    constructor(name: string, order: number);
+    /**
+     * ProfileField 핵심 렌더링 로직 (원본 render 로직 보존)
+     */
+    protected renderInstance(params: FieldRenderParameters): Promise<ReactNode | null | undefined>;
+    /**
+     * ProfileField 인스턴스 생성
+     */
+    protected createInstance(name: string, order: number): ProfileField;
+}

package/dist/listgrid/components/fields/ProfileField.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormField } from './abstract';
+import { getInputRendererParameters } from '../helper/FieldRendererHelper';
+import { UserView } from '../../ui';
+export class ProfileField extends FormField {
+    constructor(name, order) {
+        super(name, order, 'custom');
+        this.hideLabel = true;
+        this.readonly = true;
+    }
+    /**
+     * ProfileField 핵심 렌더링 로직 (원본 render 로직 보존)
+     */
+    renderInstance(params) {
+        return (async () => {
+            return _jsx(UserView, { ...await getInputRendererParameters(this, params) });
+        })();
+    }
+    /**
+     * ProfileField 인스턴스 생성
+     */
+    createInstance(name, order) {
+        return new ProfileField(name, order);
+    }
+}

package/dist/listgrid/components/fields/QrField.d.ts

@@ -0,0 +1,21 @@
+import { FormField } from './abstract';
+import { ReactNode } from 'react';
+import { FieldRenderParameters } from '../../config/EntityField';
+import { EntityForm } from '../../config/EntityForm';
+export declare class QrField extends FormField<QrField> {
+    findValue: (entityForm: EntityForm) => Promise<string>;
+    constructor(name: string, order: number, findValue: (entityForm: EntityForm) => Promise<string>);
+    /**
+     * QrField 핵심 렌더링 로직 (원본 render 로직 보존)
+     */
+    protected renderInstance(params: FieldRenderParameters): Promise<ReactNode | null | undefined>;
+    /**
+     * QrField 인스턴스 생성
+     */
+    protected createInstance(name: string, order: number): QrField;
+}
+interface QrViewerProps {
+    value: string;
+}
+export declare const QrViewer: (props: QrViewerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/listgrid/components/fields/QrField.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormField } from './abstract';
+import QRCode from 'qrcode.react';
+import { isBlank } from '../../utils/StringUtil';
+export class QrField extends FormField {
+    constructor(name, order, findValue) {
+        super(name, order, 'custom');
+        this.findValue = findValue;
+    }
+    /**
+     * QrField 핵심 렌더링 로직 (원본 render 로직 보존)
+     */
+    renderInstance(params) {
+        return (async () => {
+            const value = await this.findValue(params.entityForm);
+            if (isBlank(value)) {
+                return null;
+            }
+            return _jsx(QrViewer, { value: value });
+        })();
+    }
+    /**
+     * QrField 인스턴스 생성
+     */
+    createInstance(name, order) {
+        return new QrField(name, order, this.findValue);
+    }
+}
+export const QrViewer = (props) => {
+    return (_jsx("div", { className: `p-2`, children: _jsx(QRCode, { value: props.value }) }));
+};

package/dist/listgrid/components/fields/RuleField.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { FieldRenderParameters } from '../../config/EntityField';
+import { FormField } from './abstract';
+import { RuleFieldEntityForm } from './rule/Type';
+export declare class RuleField extends FormField<RuleField> {
+    entityForms: RuleFieldEntityForm[];
+    constructor(name: string, order: number, ...entityForms: RuleFieldEntityForm[]);
+    withEntityForms(entityForms: RuleFieldEntityForm[]): this;
+    protected createInstance(name: string, order: number): RuleField;
+    protected renderInstance(params: FieldRenderParameters): Promise<ReactNode | null | undefined>;
+}

package/dist/listgrid/components/fields/RuleField.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormField } from './abstract';
+import { getInputRendererParameters } from '../helper/FieldRendererHelper';
+import { RuleFieldView } from './rule/RuleFieldView';
+export class RuleField extends FormField {
+    constructor(name, order, ...entityForms) {
+        super(name, order, 'custom');
+        this.entityForms = entityForms;
+    }
+    withEntityForms(entityForms) {
+        this.entityForms = entityForms;
+        return this;
+    }
+    createInstance(name, order) {
+        return new RuleField(name, order, ...this.entityForms);
+    }
+    renderInstance(params) {
+        return (async () => {
+            return Promise.resolve(_jsx(RuleFieldView, { ...await getInputRendererParameters(this, { ...params }), entityForms: this.entityForms, onSubmit: (value) => {
+                    params.onChange(value);
+                } }));
+        })();
+    }
+}

package/dist/listgrid/components/fields/SelectField.d.ts

@@ -0,0 +1,223 @@
+import React from 'react';
+import { SelectOption } from '../../form/Type';
+import { FieldValue } from '../../config/Config';
+import { FieldRenderParameters, FilterRenderParameters } from '../../config/EntityField';
+import { OptionalField, OptionalFieldProps, UserListFieldProps as ListFieldProps, ViewListProps, ViewListResult, ViewRenderProps, ViewRenderResult } from './abstract';
+import { EntityForm } from '../../config/EntityForm';
+import { ValidateResult } from '../../validations/Validation';
+/**
+ * 상태 변경 사유 입력 필드 설정
+ */
+export interface StatusReason {
+    /** 상태 변경 사유 입력 필드의 안내 메시지 */
+    message: string;
+    /** 상태 변경 사유가 저장될 필드명 (entityForm.getField로 찾을 수 있음) */
+    fieldName: string;
+    /** 상태 변경 사유 입력 필수 여부 */
+    required?: boolean;
+}
+/**
+ * 특정 상태로 변경 시 적용할 사유 입력 설정
+ */
+export interface StatusChangeReason {
+    /**
+     * 어떤 상태로 변경할 때 이 설정을 적용할지 지정.
+     * 이 값이 없으면 모든 상태 변경에 대해 사유를 입력하게 함
+     */
+    targets?: string[];
+    /** 사유 입력 설정 */
+    config: StatusReason;
+}
+/**
+ * 상태 변경 시 수행할 검증 로직
+ */
+export interface StatusChangeValidation {
+    /** 상태 변경 시 실행할 검증 함수 */
+    validate: (entityForm: EntityForm, value: FieldValue) => Promise<ValidateResult>;
+    /** 검증 실패 시 표시할 에러 메시지 */
+    message?: string;
+    /** 검증 성공 후 실행할 콜백 */
+    success?: (entityForm: EntityForm) => Promise<void>;
+    /** 검증 실패 후 실행할 콜백 */
+    fail?: (entityForm: EntityForm) => Promise<void>;
+}
+/**
+ * 옵션 로드 함수 타입
+ * EntityForm을 받아서 SelectOption 배열을 반환하는 async 함수
+ */
+export type OptionsLoader = (entityForm: EntityForm) => Promise<SelectOption[]>;
+/**
+ * 즉시 변경(withImmediateChange) 확장 설정.
+ * "변경" 버튼 클릭 시 상태 필드 외에 추가 필드를 함께 전송하거나,
+ * 커스텀 전처리 로직을 실행할 수 있습니다.
+ */
+export interface ImmediateChangeProps {
+    /**
+     * 즉시 변경 시 함께 전송할 필드명 목록.
+     * EntityForm.validate({ fieldNames })로 표준 검증을 수행하고,
+     * field.isDirty()인 필드의 값을 수집하여 API 요청에 포함합니다.
+     */
+    requiredFields?: string[];
+    /**
+     * 즉시 변경 전 커스텀 전처리 콜백.
+     * requiredFields 검증/수집 및 withReason 사유 추가 이후에 호출됩니다.
+     * - false 반환: 변경 취소
+     * - Record 반환: 추가 데이터를 formData에 병합
+     * - void 반환: 기본 동작 진행
+     */
+    onSubmit?: (entityForm: EntityForm, submitData: {
+        targetValue: FieldValue;
+        formData: Record<string, any>;
+    }) => Promise<false | Record<string, any> | void>;
+}
+export interface SelectFieldProps extends OptionalFieldProps {
+    /**
+     * 즉시 변경 기능 활성화 여부.
+     * true로 설정하면 옵션 선택 즉시 API를 호출하여 상태를 변경합니다.
+     */
+    enableImmediateChange?: boolean;
+    /**
+     * 즉시 변경 확장 설정 (requiredFields, onSubmit 등).
+     */
+    immediateChangeProps?: ImmediateChangeProps;
+    /**
+     * 상태 변경 시 사유 입력 설정.
+     * 특정 상태로 변경 시 사유 입력을 요구할 수 있습니다.
+     */
+    reason?: StatusChangeReason[];
+    /**
+     * 상태 변경 시 검증 로직 설정.
+     * 상태 변경 전에 추가적인 검증을 수행할 수 있습니다.
+     */
+    validateStatusChange?: StatusChangeValidation;
+    /**
+     * 옵션을 동적으로 로드하는 함수.
+     * 설정하면 options 대신 이 함수를 통해 옵션을 비동기로 로드합니다.
+     */
+    loadOptions?: OptionsLoader;
+}
+export declare class SelectField extends OptionalField<SelectField> {
+    /** 즉시 변경 기능 활성화 여부 */
+    enableImmediateChange?: boolean;
+    /** 즉시 변경 확장 설정 */
+    immediateChangeProps?: ImmediateChangeProps;
+    /** 상태 변경 시 사유 입력 설정 */
+    reason?: StatusChangeReason[];
+    /** 상태 변경 시 검증 로직 */
+    validateStatusChange?: StatusChangeValidation;
+    /** 옵션을 동적으로 로드하는 함수 */
+    loadOptions?: OptionsLoader;
+    constructor(name: string, order: number, options?: SelectOption[], reason?: StatusChangeReason[], validateStatusChange?: StatusChangeValidation);
+    /**
+     * SelectField 핵심 렌더링 로직
+     * - loadOptions가 설정되면 DynamicSelectFieldView 사용 (동적 옵션 로드)
+     * - enableImmediateChange가 true이면 SelectFieldRenderer 사용 (즉시 변경 기능)
+     * - combo 설정이 있으면 RadioInput 사용
+     * - useChip(true)이고 조건 충족 시 RadioChip 사용
+     * - 그 외에는 SelectBox 사용
+     */
+    protected renderInstance(params: FieldRenderParameters): Promise<React.ReactNode | null>;
+    /**
+     * 즉시 변경 기능용 캐시 키 생성
+     */
+    private createStatusCacheKey;
+    /**
+     * SelectField 핵심 리스트 필터 렌더링 로직
+     * - loadOptions가 설정된 경우: 옵션을 먼저 로드한 후 렌더링
+     * - 옵션 1-9개: Checkbox 그룹으로 모든 옵션을 한눈에 표시
+     * - 옵션 10개 이상: MultiSelectBox(드롭다운)로 표시
+     */
+    protected renderListFilterInstance(params: FilterRenderParameters): Promise<React.ReactNode | null>;
+    /**
+     * SelectField 핵심 리스트 아이템 렌더링 로직
+     * loadOptions가 설정된 경우 캐시에서 옵션을 가져오거나 로드 후 renderListOptionalField 사용
+     * N+1 문제 방지를 위해 prefetchSelectFieldOptions가 미리 호출되어야 함
+     */
+    protected renderListItemInstance(props: ViewListProps): Promise<ViewListResult>;
+    /**
+     * loadOptions 캐시 키 생성
+     * 필드명 기반으로 캐시 키 생성 (동일 필드는 동일한 옵션을 반환한다고 가정)
+     */
+    getLoadOptionsCacheKey(): string;
+    /**
+     * SelectField View 모드 렌더링 - Badge 컴포넌트로 상태 표시
+     * options에서 value에 해당하는 label을 찾아 Badge로 렌더링
+     * cardIcon이 설정된 경우 아이콘과 함께 표시
+     */
+    protected renderViewInstance(props: ViewRenderProps): Promise<ViewRenderResult>;
+    /**
+     * SelectField 인스턴스 생성
+     */
+    protected createInstance(name: string, order: number): SelectField;
+    private createCacheKey;
+    static create(props: SelectFieldProps): SelectField;
+    /**
+     * 옵션을 동적으로 로드하는 함수 설정.
+     * 설정하면 options 대신 이 함수를 통해 옵션을 비동기로 로드합니다.
+     *
+     * @example
+     * ```tsx
+     * new SelectField('country', 100)
+     *   .withLabel('국가')
+     *   .withLoadOptions(async (entityForm) => {
+     *     const response = await fetch('/api/countries');
+     *     const data = await response.json();
+     *     return data.map((item: any) => ({
+     *       label: item.name,
+     *       value: item.code,
+     *     }));
+     *   })
+     * ```
+     */
+    withLoadOptions(loader: OptionsLoader): this;
+    /**
+     * 즉시 변경 기능 활성화.
+     * 옵션을 선택하면 즉시 API를 호출하여 상태를 변경합니다.
+     *
+     * @param propsOrEnable
+     *   - boolean: 활성화 여부 (하위호환, 기본값: true)
+     *   - ImmediateChangeProps: 확장 설정 (requiredFields, onSubmit)
+     *
+     * @example
+     * // 기존 방식 (하위호환)
+     * .withImmediateChange()
+     * .withImmediateChange(true)
+     *
+     * @example
+     * // 확장 방식: 변경 버튼 클릭 시 rejectReason 필드도 함께 검증/전송
+     * .withImmediateChange({
+     *   requiredFields: ['rejectReason'],
+     *   onSubmit: async (entityForm, { targetValue, formData }) => {
+     *     // 커스텀 전처리 로직
+     *     // return false; // 취소
+     *     // return { additionalField: 'value' }; // 추가 데이터 병합
+     *   }
+     * })
+     */
+    withImmediateChange(propsOrEnable?: boolean | ImmediateChangeProps): this;
+    /**
+     * 상태 변경 시 사유 입력 설정.
+     * 특정 상태로 변경할 때 사유 입력을 요구합니다.
+     * @param reason 사유 입력 설정 배열
+     */
+    withReason(reason?: StatusChangeReason[]): this;
+    /**
+     * 상태 변경 시 검증 로직 설정.
+     * 상태 변경 전에 추가적인 검증을 수행합니다.
+     * @param validateStatusChange 검증 로직 설정
+     */
+    withValidateStatusChange(validateStatusChange?: StatusChangeValidation): this;
+    useListField(props?: number | ListFieldProps): this;
+}
+/**
+ * 여러 SelectField의 loadOptions를 일괄 실행하여 캐시에 저장
+ * ViewListGrid에서 목록 렌더링 전에 호출하여 N+1 문제 방지
+ *
+ * @param fields loadOptions가 설정된 SelectField 배열
+ * @param entityForm 옵션 로드에 사용할 EntityForm
+ */
+export declare function prefetchSelectFieldOptions(fields: SelectField[], entityForm: EntityForm): Promise<void>;
+/**
+ * SelectField 옵션 캐시 초기화
+ */
+export declare function clearSelectFieldOptionsCache(): void;