125 lines
3.1 KiB
TypeScript
125 lines
3.1 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { ComponentRendererProps } from "@/types/component";
|
||
|
|
import { TextInputConfig } from "./types";
|
||
|
|
|
||
|
|
export interface TextInputComponentProps extends ComponentRendererProps {
|
||
|
|
config?: TextInputConfig;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* TextInput 컴포넌트
|
||
|
|
* text-input 컴포넌트입니다
|
||
|
|
*/
|
||
|
|
export const TextInputComponent: React.FC<TextInputComponentProps> = ({
|
||
|
|
component,
|
||
|
|
isDesignMode = false,
|
||
|
|
isSelected = false,
|
||
|
|
onClick,
|
||
|
|
onDragStart,
|
||
|
|
onDragEnd,
|
||
|
|
config,
|
||
|
|
className,
|
||
|
|
style,
|
||
|
|
...props
|
||
|
|
}) => {
|
||
|
|
// 컴포넌트 설정
|
||
|
|
const componentConfig = {
|
||
|
|
...config,
|
||
|
|
...component.config,
|
||
|
|
} as TextInputConfig;
|
||
|
|
|
||
|
|
// 스타일 계산 (위치는 RealtimePreviewDynamic에서 처리하므로 제외)
|
||
|
|
const componentStyle: React.CSSProperties = {
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
...component.style,
|
||
|
|
...style,
|
||
|
|
};
|
||
|
|
|
||
|
|
// 디자인 모드 스타일
|
||
|
|
if (isDesignMode) {
|
||
|
|
componentStyle.border = "1px dashed #cbd5e1";
|
||
|
|
componentStyle.borderColor = isSelected ? "#3b82f6" : "#cbd5e1";
|
||
|
|
}
|
||
|
|
|
||
|
|
// 이벤트 핸들러
|
||
|
|
const handleClick = (e: React.MouseEvent) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
onClick?.();
|
||
|
|
};
|
||
|
|
|
||
|
|
// DOM에 전달하면 안 되는 React-specific props 필터링
|
||
|
|
const {
|
||
|
|
selectedScreen,
|
||
|
|
onZoneComponentDrop,
|
||
|
|
onZoneClick,
|
||
|
|
componentConfig: _componentConfig,
|
||
|
|
component: _component,
|
||
|
|
isSelected: _isSelected,
|
||
|
|
onClick: _onClick,
|
||
|
|
onDragStart: _onDragStart,
|
||
|
|
onDragEnd: _onDragEnd,
|
||
|
|
size: _size,
|
||
|
|
position: _position,
|
||
|
|
style: _style,
|
||
|
|
...domProps
|
||
|
|
} = props;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={componentStyle} className={className} {...domProps}>
|
||
|
|
{/* 라벨 렌더링 */}
|
||
|
|
{component.label && (
|
||
|
|
<label
|
||
|
|
style={{
|
||
|
|
position: "absolute",
|
||
|
|
top: "-25px",
|
||
|
|
left: "0px",
|
||
|
|
fontSize: component.style?.labelFontSize || "14px",
|
||
|
|
color: component.style?.labelColor || "#374151",
|
||
|
|
fontWeight: "500",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{component.label}
|
||
|
|
{component.required && <span style={{ color: "#ef4444" }}>*</span>}
|
||
|
|
</label>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={component.value || ""}
|
||
|
|
placeholder={componentConfig.placeholder || ""}
|
||
|
|
disabled={componentConfig.disabled || false}
|
||
|
|
required={componentConfig.required || false}
|
||
|
|
readOnly={componentConfig.readonly || false}
|
||
|
|
style={{
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
border: "1px solid #d1d5db",
|
||
|
|
borderRadius: "4px",
|
||
|
|
padding: "8px 12px",
|
||
|
|
fontSize: "14px",
|
||
|
|
outline: "none",
|
||
|
|
}}
|
||
|
|
onClick={handleClick}
|
||
|
|
onDragStart={onDragStart}
|
||
|
|
onDragEnd={onDragEnd}
|
||
|
|
onChange={(e) => {
|
||
|
|
if (props.onChange) {
|
||
|
|
props.onChange(e.target.value);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* TextInput 래퍼 컴포넌트
|
||
|
|
* 추가적인 로직이나 상태 관리가 필요한 경우 사용
|
||
|
|
*/
|
||
|
|
export const TextInputWrapper: React.FC<TextInputComponentProps> = (props) => {
|
||
|
|
return <TextInputComponent {...props} />;
|
||
|
|
};
|