타입별 상세설정 추가

frontend/types/screen.ts

@@ -139,6 +139,7 @@ export interface BaseComponent {
   style?: ComponentStyle; // 스타일 속성 추가
   tableName?: string; // 테이블명 추가
   label?: string; // 라벨 추가
+  gridColumns?: number; // 그리드에서 차지할 컬럼 수 (1-12)
 }
 
 // 컨테이너 컴포넌트
@@ -194,7 +195,8 @@ export interface WidgetComponent extends BaseComponent {
   required: boolean;
   readonly: boolean;
   validationRules?: ValidationRule[];
-  displayProperties?: Record<string, any>;
+  displayProperties?: Record<string, any>; // 레거시 지원용 (향후 제거 예정)
+  webTypeConfig?: WebTypeConfig; // 웹타입별 상세 설정
 }
 
 // 컴포넌트 유니온 타입
@@ -388,3 +390,115 @@ export interface PaginatedResponse<T> {
   size: number;
   totalPages: number;
 }
+
+// ===== 웹타입별 상세 설정 인터페이스 =====
+
+// 날짜/시간 타입 설정
+export interface DateTypeConfig {
+  format: "YYYY-MM-DD" | "YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH:mm:ss";
+  showTime: boolean;
+  minDate?: string;
+  maxDate?: string;
+  defaultValue?: string;
+  placeholder?: string;
+}
+
+// 숫자 타입 설정
+export interface NumberTypeConfig {
+  min?: number;
+  max?: number;
+  step?: number;
+  format?: "integer" | "decimal" | "currency" | "percentage";
+  decimalPlaces?: number;
+  thousandSeparator?: boolean;
+  prefix?: string; // 접두사 (예: $, ₩)
+  suffix?: string; // 접미사 (예: %, kg)
+  placeholder?: string;
+}
+
+// 선택박스 타입 설정
+export interface SelectTypeConfig {
+  options: Array<{ label: string; value: string; disabled?: boolean }>;
+  multiple?: boolean;
+  searchable?: boolean;
+  placeholder?: string;
+  allowClear?: boolean;
+  maxSelections?: number; // 다중 선택 시 최대 선택 개수
+}
+
+// 텍스트 타입 설정
+export interface TextTypeConfig {
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string; // 정규식 패턴
+  format?: "none" | "email" | "phone" | "url" | "korean" | "english";
+  placeholder?: string;
+  autocomplete?: string;
+  spellcheck?: boolean;
+}
+
+// 파일 타입 설정
+export interface FileTypeConfig {
+  accept?: string; // MIME 타입 또는 확장자 (예: ".jpg,.png" 또는 "image/*")
+  multiple?: boolean;
+  maxSize?: number; // bytes
+  maxFiles?: number; // 다중 업로드 시 최대 파일 개수
+  preview?: boolean; // 미리보기 표시 여부
+  dragDrop?: boolean; // 드래그 앤 드롭 지원 여부
+}
+
+// 텍스트 영역 타입 설정
+export interface TextareaTypeConfig extends TextTypeConfig {
+  rows?: number;
+  cols?: number;
+  resize?: "none" | "both" | "horizontal" | "vertical";
+  wrap?: "soft" | "hard" | "off";
+}
+
+// 체크박스 타입 설정
+export interface CheckboxTypeConfig {
+  defaultChecked?: boolean;
+  trueValue?: string | number | boolean; // 체크 시 값
+  falseValue?: string | number | boolean; // 미체크 시 값
+  indeterminate?: boolean; // 불확실한 상태 지원
+}
+
+// 라디오 타입 설정
+export interface RadioTypeConfig {
+  options: Array<{ label: string; value: string; disabled?: boolean }>;
+  inline?: boolean; // 가로 배치 여부
+  defaultValue?: string;
+}
+
+// 코드 타입 설정 (공통코드 연계)
+export interface CodeTypeConfig {
+  codeCategory: string; // 공통코드 카테고리
+  displayFormat?: "label" | "value" | "both"; // 표시 형식
+  searchable?: boolean;
+  placeholder?: string;
+  allowClear?: boolean;
+}
+
+// 엔티티 타입 설정 (참조 테이블 연계)
+export interface EntityTypeConfig {
+  referenceTable: string;
+  referenceColumn: string;
+  displayColumn?: string; // 표시할 컬럼명 (기본값: referenceColumn)
+  searchable?: boolean;
+  placeholder?: string;
+  allowClear?: boolean;
+  filters?: Record<string, any>; // 추가 필터 조건
+}
+
+// 웹타입별 설정 유니온 타입
+export type WebTypeConfig =
+  | DateTypeConfig
+  | NumberTypeConfig
+  | SelectTypeConfig
+  | TextTypeConfig
+  | FileTypeConfig
+  | TextareaTypeConfig
+  | CheckboxTypeConfig
+  | RadioTypeConfig
+  | CodeTypeConfig
+  | EntityTypeConfig;