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:
@@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user