diff --git a/frontend/components/screen/widgets/types/ImageWidget.tsx b/frontend/components/screen/widgets/types/ImageWidget.tsx index 5c81ca9c..fdcb1f27 100644 --- a/frontend/components/screen/widgets/types/ImageWidget.tsx +++ b/frontend/components/screen/widgets/types/ImageWidget.tsx @@ -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 = ({ +export const ImageWidget: React.FC = ({ 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(null); const [uploading, setUploading] = useState(false); @@ -25,8 +27,16 @@ export const ImageWidget: React.FC = ({ 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 = ({ }; return ( -
+
{imageUrl ? ( // 이미지 표시 모드
= ({ ) : ( // 업로드 영역
+
{/* 이미지 미리보기 */} {preview && images.length > 0 && (
{images.map((src, index) => ( -
+
{`이미지