fix: SaveModal을 ResizableDialog로 수정하여 크기 조절 가능하도록 개선

주요 변경사항:
- Dialog/DialogContent를 ResizableDialog/ResizableDialogContent로 변경
- DialogTitle을 ResizableDialogTitle로 변경
- 내부 컨텐츠 컨테이너를 유연한 크기(w-full h-full)로 변경
- minWidth/minHeight 사용으로 최소 크기 보장

참고:
- 컴포넌트 레이아웃이 화면관리에서 설정된 대로 정확히 렌더링됨
- 레이아웃 자체의 문제는 화면관리에서 재설계 필요

파일 변경:
- frontend/components/screen/SaveModal.tsx
This commit is contained in:
kjs
2025-11-07 17:39:51 +09:00
parent e27845a82f
commit 1d6418ca63

View File

@@ -1,7 +1,7 @@
"use client"; "use client";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { ResizableDialog, ResizableDialogContent, ResizableDialogHeader, DialogTitle } from "@/components/ui/resizable-dialog"; import { ResizableDialog, ResizableDialogContent, ResizableDialogHeader, ResizableDialogTitle } from "@/components/ui/resizable-dialog";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { X, Save, Loader2 } from "lucide-react"; import { X, Save, Loader2 } from "lucide-react";
import { toast } from "sonner"; import { toast } from "sonner";
@@ -213,9 +213,9 @@ export const SaveModal: React.FC<SaveModalProps> = ({
const dynamicSize = calculateDynamicSize(); const dynamicSize = calculateDynamicSize();
return ( return (
<Dialog open={isOpen} onOpenChange={(open) => !isSaving && !open && onClose()}> <ResizableDialog open={isOpen} onOpenChange={(open) => !isSaving && !open && onClose()}>
<DialogContent className={`${modalSizeClasses[modalSize]} max-h-[90vh] gap-0 p-0`}> <ResizableDialogContent className={`${modalSizeClasses[modalSize]} max-h-[90vh] gap-0 p-0`}>
<DialogHeader className="border-b px-6 py-4"> <ResizableDialogHeader className="border-b px-6 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<ResizableDialogTitle className="text-lg font-semibold">{initialData ? "데이터 수정" : "데이터 등록"}</ResizableDialogTitle> <ResizableDialogTitle className="text-lg font-semibold">{initialData ? "데이터 수정" : "데이터 등록"}</ResizableDialogTitle>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -237,7 +237,7 @@ export const SaveModal: React.FC<SaveModalProps> = ({
</Button> </Button>
</div> </div>
</div> </div>
</DialogHeader> </ResizableDialogHeader>
<div className="overflow-auto p-6"> <div className="overflow-auto p-6">
{loading ? ( {loading ? (
@@ -246,14 +246,13 @@ export const SaveModal: React.FC<SaveModalProps> = ({
</div> </div>
) : screenData && components.length > 0 ? ( ) : screenData && components.length > 0 ? (
<div <div
className="relative bg-white" className="relative bg-white w-full h-full"
style={{ style={{
width: dynamicSize.width, minWidth: dynamicSize.width,
height: dynamicSize.height, minHeight: dynamicSize.height,
overflow: "hidden",
}} }}
> >
<div className="relative" style={{ minHeight: "300px" }}> <div className="relative w-full h-full" style={{ minHeight: "300px" }}>
{components.map((component, index) => ( {components.map((component, index) => (
<div <div
key={component.id} key={component.id}
@@ -314,7 +313,7 @@ export const SaveModal: React.FC<SaveModalProps> = ({
<div className="text-muted-foreground py-12 text-center"> .</div> <div className="text-muted-foreground py-12 text-center"> .</div>
)} )}
</div> </div>
</DialogContent> </ResizableDialogContent>
</Dialog> </ResizableDialog>
); );
}; };