eac2fa63b1
- Added support for custom border, background, and text styles in V2Input and V2Select components, allowing for greater flexibility in styling based on user-defined configurations. - Updated the input and select components to conditionally apply styles based on the presence of custom properties, improving the overall user experience and visual consistency. - Refactored the FileUploadComponent to handle chunked file uploads, enhancing the file upload process by allowing multiple files to be uploaded in batches, improving performance and user feedback during uploads.
105 lines
3.7 KiB
TypeScript
105 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ComponentRendererProps } from "../../types";
|
|
import { TextDisplayConfig } from "./types";
|
|
import { filterDOMProps } from "@/lib/utils/domPropsFilter";
|
|
|
|
export interface TextDisplayComponentProps extends ComponentRendererProps {
|
|
// 추가 props가 필요한 경우 여기에 정의
|
|
}
|
|
|
|
/**
|
|
* TextDisplay 컴포넌트
|
|
* text-display 컴포넌트입니다
|
|
*/
|
|
export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
|
|
component,
|
|
isDesignMode = false,
|
|
isSelected = false,
|
|
onClick,
|
|
onDragStart,
|
|
onDragEnd,
|
|
...props
|
|
}) => {
|
|
const componentConfig = (component.componentConfig || {}) as TextDisplayConfig;
|
|
|
|
// 컴포넌트 스타일 계산
|
|
const componentStyle: React.CSSProperties = {
|
|
position: "absolute",
|
|
left: `${component.style?.positionX || 0}px`,
|
|
top: `${component.style?.positionY || 0}px`,
|
|
width: `${component.style?.width || 150}px`,
|
|
height: `${component.style?.height || 24}px`,
|
|
zIndex: component.style?.positionZ || 1,
|
|
cursor: isDesignMode ? "pointer" : "default",
|
|
border: isSelected ? "2px solid #3b82f6" : "none",
|
|
outline: isSelected ? "none" : undefined,
|
|
};
|
|
|
|
// 클릭 핸들러
|
|
const handleClick = (e: React.MouseEvent) => {
|
|
if (isDesignMode) {
|
|
e.stopPropagation();
|
|
onClick?.(e);
|
|
} else {
|
|
// 실제 모드에서의 클릭 처리
|
|
componentConfig.onClick?.();
|
|
}
|
|
};
|
|
|
|
// className 생성
|
|
const className = ["text-display-component", isSelected ? "selected" : "", componentConfig.disabled ? "disabled" : ""]
|
|
.filter(Boolean)
|
|
.join(" ");
|
|
|
|
// DOM props 필터링 (React 관련 props 제거)
|
|
const domProps = filterDOMProps(props);
|
|
|
|
// 🔧 StyleEditor(component.style) 값 우선, 없으면 componentConfig 폴백
|
|
const customStyle = component.style || {};
|
|
|
|
// 텍스트 스타일 계산
|
|
const textStyle: React.CSSProperties = {
|
|
fontSize: customStyle.fontSize || componentConfig.fontSize || "14px",
|
|
fontWeight: customStyle.fontWeight || componentConfig.fontWeight || "normal",
|
|
color: customStyle.color || componentConfig.color || "#212121",
|
|
textAlign: (customStyle.textAlign || componentConfig.textAlign || "left") as React.CSSProperties["textAlign"],
|
|
backgroundColor: customStyle.backgroundColor || componentConfig.backgroundColor || "transparent",
|
|
padding: componentConfig.padding || "0",
|
|
borderRadius: customStyle.borderRadius || componentConfig.borderRadius || "0",
|
|
border: customStyle.border || (customStyle.borderWidth ? `${customStyle.borderWidth} ${customStyle.borderStyle || "solid"} ${customStyle.borderColor || "transparent"}` : componentConfig.border || "none"),
|
|
width: "100%",
|
|
height: "100%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent:
|
|
componentConfig.textAlign === "center"
|
|
? "center"
|
|
: componentConfig.textAlign === "right"
|
|
? "flex-end"
|
|
: "flex-start",
|
|
whiteSpace: "nowrap", // ← 한 줄로 유지 // ← 넘치는 부분 숨김
|
|
textOverflow: "ellipsis", // ← 넘치면 ... 표시 (선택사항)
|
|
transition: "all 0.2s ease-in-out",
|
|
boxShadow: "none",
|
|
};
|
|
|
|
return (
|
|
<div style={componentStyle} className={className} {...domProps}>
|
|
{/* v2-text-display는 텍스트 표시 전용이므로 별도 라벨 불필요 */}
|
|
<div style={textStyle} onClick={handleClick} onDragStart={onDragStart} onDragEnd={onDragEnd}>
|
|
{componentConfig.text || "텍스트를 입력하세요"}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* TextDisplay 래퍼 컴포넌트
|
|
* 추가적인 로직이나 상태 관리가 필요한 경우 사용
|
|
*/
|
|
export const TextDisplayWrapper: React.FC<TextDisplayComponentProps> = (props) => {
|
|
return <TextDisplayComponent {...props} />;
|
|
};
|