942eb079e8
- ScreenModal 컴포넌트의 모달 크기 조정을 위해 헤더 및 푸터 높이를 수정하고, 여백을 최소화하여 디자인 일치를 도모하였습니다. - V2 컴포넌트에서 라벨 높이를 계산하여 절대 위치로 배치하도록 변경하였으며, 입력 필드 및 선택 컴포넌트의 구조를 개선하여 일관된 사용자 경험을 제공하였습니다. - 플레이스홀더 기능을 추가하여 날짜 선택 시 사용자 편의성을 높였습니다. - 관련 CSS 클래스를 업데이트하여 반응형 디자인을 강화하였습니다.
70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
|
|
import { V2DateDefinition } from "./index";
|
|
import { V2Date } from "@/components/v2/V2Date";
|
|
|
|
/**
|
|
* V2Date 렌더러
|
|
* 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
|
|
*/
|
|
export class V2DateRenderer extends AutoRegisteringComponentRenderer {
|
|
static componentDefinition = V2DateDefinition;
|
|
|
|
render(): React.ReactElement {
|
|
const { component, formData, onFormDataChange, isDesignMode, isSelected, isInteractive, ...restProps } = this.props;
|
|
|
|
// 컴포넌트 설정 추출
|
|
const config = component.componentConfig || component.config || {};
|
|
const columnName = component.columnName;
|
|
|
|
// formData에서 현재 값 가져오기
|
|
const currentValue = formData?.[columnName] ?? component.value ?? "";
|
|
|
|
// 값 변경 핸들러
|
|
const handleChange = (value: any) => {
|
|
if (isInteractive && onFormDataChange && columnName) {
|
|
onFormDataChange(columnName, value);
|
|
}
|
|
};
|
|
|
|
// 라벨: style.labelText 우선, 없으면 component.label 사용
|
|
// style.labelDisplay가 false면 라벨 숨김
|
|
const style = component.style || {};
|
|
const effectiveLabel = style.labelDisplay === false ? undefined : (style.labelText || component.label);
|
|
|
|
return (
|
|
<V2Date
|
|
id={component.id}
|
|
label={effectiveLabel}
|
|
required={component.required}
|
|
readonly={config.readonly || component.readonly}
|
|
disabled={config.disabled || component.disabled}
|
|
value={currentValue}
|
|
onChange={handleChange}
|
|
config={{
|
|
dateType: config.dateType || config.webType || "date",
|
|
format: config.format || "YYYY-MM-DD",
|
|
placeholder: config.placeholder || style.placeholder || "날짜 선택",
|
|
showTime: config.showTime || false,
|
|
use24Hours: config.use24Hours ?? true,
|
|
minDate: config.minDate,
|
|
maxDate: config.maxDate,
|
|
}}
|
|
style={component.style}
|
|
size={component.size}
|
|
{...restProps}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
// 자동 등록 실행
|
|
V2DateRenderer.registerSelf();
|
|
|
|
// Hot Reload 지원 (개발 모드)
|
|
if (process.env.NODE_ENV === "development") {
|
|
V2DateRenderer.enableHotReload();
|
|
}
|