jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/v2-unified-renewal' of http://39.117.244.52:3000/kjs/ERP-node into feature/v2-renewal

Browse Source 
; Please enter a commit message to explain why this merge is necessary,
; especially if it merges an updated upstream into a topic branch.
;
; Lines starting with ';' will be ignored, and an empty message aborts
; the commit.
This commit is contained in:
DDD1542
2026-02-03 17:35:06 +09:00
parent ef9f1b94ff 8bf3bc3f47
commit 6350fd6592
6 changed files with 122 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/components/screen/widgets/types/ImageWidget.tsx
View File

@@ -9,15 +9,17 @@ import { WidgetComponent } from "@/types/screen";
import { toast } from "sonner";
import { apiClient, getFullImageUrl } from "@/lib/api/client";
export const ImageWidget: React.FC<WebTypeComponentProps> = ({
export const ImageWidget: React.FC<WebTypeComponentProps & { size?: { width?: number; height?: number }; style?: React.CSSProperties }> = ({
component,
value,
onChange,
readonly = false,
isDesignMode = false // 디자인 모드 여부
isDesignMode = false, // 디자인 모드 여부
size, // props로 전달된 size
style: propStyle, // props로 전달된 style
}) => {
const widget = component as WidgetComponent;
const { required, style } = widget;
const { required, style: widgetStyle } = widget;
const fileInputRef = useRef<HTMLInputElement>(null);
const [uploading, setUploading] = useState(false);
@@ -25,8 +27,16 @@ export const ImageWidget: React.FC<WebTypeComponentProps> = ({
const rawImageUrl = value || widget.value || "";
const imageUrl = rawImageUrl ? getFullImageUrl(rawImageUrl) : "";
// style에서 width, height 제거 (부모 컨테이너 크기 사용)
const filteredStyle = style ? { ...style, width: undefined, height: undefined } : {};
// 🔧 컴포넌트 크기를 명시적으로 적용 (props.size 우선, 없으면 style에서 가져옴)
const effectiveSize = size || (widget as any).size || {};
const effectiveStyle = propStyle || widgetStyle || {};
const containerStyle: React.CSSProperties = {
width: effectiveSize.width ? `${effectiveSize.width}px` : effectiveStyle?.width || "100%",
height: effectiveSize.height ? `${effectiveSize.height}px` : effectiveStyle?.height || "100%",
};
// style에서 width, height 제거 (내부 요소용)
const filteredStyle = effectiveStyle ? { ...effectiveStyle, width: undefined, height: undefined } : {};
// 파일 선택 처리
const handleFileSelect = () => {
@@ -120,11 +130,11 @@ export const ImageWidget: React.FC<WebTypeComponentProps> = ({
};
return (
<div className="h-full w-full">
<div className="flex h-full w-full flex-col" style={containerStyle}>
{imageUrl ? (
// 이미지 표시 모드
<div
className="group relative h-full w-full overflow-hidden rounded-lg border border-gray-200 bg-gray-50 shadow-sm transition-all hover:shadow-md"
className="group relative flex-1 w-full overflow-hidden rounded-lg border border-gray-200 bg-gray-50 shadow-sm transition-all hover:shadow-md"
style={filteredStyle}
>
<img
@@ -154,7 +164,7 @@ export const ImageWidget: React.FC<WebTypeComponentProps> = ({
) : (
// 업로드 영역
<div
className={`group relative flex h-full w-full flex-col items-center justify-center rounded-lg border-2 border-dashed p-3 text-center shadow-sm transition-all duration-300 ${
className={`group relative flex flex-1 w-full flex-col items-center justify-center rounded-lg border-2 border-dashed p-3 text-center shadow-sm transition-all duration-300 ${
isDesignMode
? "cursor-default border-gray-200 bg-gray-50"
: "cursor-pointer border-gray-300 bg-white hover:border-blue-400 hover:bg-blue-50/50 hover:shadow-md"