모달 관련 에러 해결

frontend/components/common/DeleteConfirmModal.tsx

@@ -6,10 +6,10 @@ import {
   AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
-  Alert
-  Alert
   AlertDialogHeader,
-  Alert
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
 } from "@/components/ui/alert-dialog";
 import { Loader2 } from "lucide-react";
 

frontend/components/screen/CopyScreenModal.tsx

@@ -2,12 +2,12 @@
 
 import React, { useState, useEffect } from "react";
 import {
-  Dialog,
-  DialogContent,
-  
-  
-  DialogHeader,
-  
+  ResizableDialog,
+  ResizableDialogContent,
+  ResizableDialogHeader,
+  ResizableDialogTitle,
+  ResizableDialogDescription,
+  ResizableDialogFooter,
 } from "@/components/ui/resizable-dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -101,17 +101,17 @@ export default function CopyScreenModal({ isOpen, onClose, sourceScreen, onCopyS
   };
 
   return (
-    <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-[500px]">
-        <DialogHeader>
+    <ResizableDialog open={isOpen} onOpenChange={handleClose}>
+      <ResizableDialogContent className="sm:max-w-[500px]">
+        <ResizableDialogHeader>
           <ResizableDialogTitle className="flex items-center gap-2">
             <Copy className="h-5 w-5" />
             화면 복사
           </ResizableDialogTitle>
-          <DialogDescription>
+          <ResizableDialogDescription>
             {sourceScreen?.screenName} 화면을 복사합니다. 화면 구성도 함께 복사됩니다.
           </ResizableDialogDescription>
-        </DialogHeader>
+        </ResizableDialogHeader>
 
         <div className="space-y-4">
           {/* 원본 화면 정보 */}
@@ -186,7 +186,7 @@ export default function CopyScreenModal({ isOpen, onClose, sourceScreen, onCopyS
             )}
           </Button>
         </ResizableDialogFooter>
-      </DialogContent>
-    </Dialog>
+      </ResizableDialogContent>
+    </ResizableDialog>
   );
 }

frontend/components/screen/MenuAssignmentModal.tsx

@@ -4,10 +4,6 @@ import React, { useState, useEffect, useRef } from "react";
 import {
   Dialog,
   DialogContent,
-  
-  
-  DialogHeader,
-  
 } from "@/components/ui/resizable-dialog";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -550,7 +546,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                 )}
               </div>
 
-              <DialogFooter className="flex gap-2">
+              <ResizableDialogFooter className="flex gap-2">
                 <Button variant="outline" onClick={handleAssignLater} disabled={assigning}>
                   <X className="mr-2 h-4 w-4" />
                   나중에 할당
@@ -628,7 +624,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
             </div>
           </div>
 
-          <DialogFooter className="flex gap-2">
+          <ResizableDialogFooter className="flex gap-2">
             <Button variant="outline" onClick={() => setShowReplaceDialog(false)} disabled={assigning}>
               취소
             </Button>

frontend/components/screen/ScreenList.tsx

@@ -17,15 +17,21 @@ import {
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
-  AlertResizableDialogContent,
-  AlertResizableDialogDescription,
+  AlertDialogContent,
+  AlertDialogDescription,
   AlertDialogFooter,
-  AlertResizableDialogHeader,
+  AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
-import { ResizableDialog, ResizableDialogContent, ResizableDialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { 
+  ResizableDialog, 
+  ResizableDialogContent, 
+  ResizableDialogHeader, 
+  ResizableDialogTitle, 
+  ResizableDialogFooter 
+} from "@/components/ui/resizable-dialog";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { MoreHorizontal, Edit, Trash2, Copy, Eye, Plus, Search, Palette, RotateCcw, Trash } from "lucide-react";
 import { ScreenDefinition } from "@/types/screen";
@@ -1056,11 +1062,11 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
       </AlertDialog>
 
       {/* 화면 편집 다이얼로그 */}
-      <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
-        <DialogContent className="sm:max-w-[500px]">
-          <DialogHeader>
-            <DialogTitle>화면 정보 편집</DialogTitle>
-          </DialogHeader>
+      <ResizableDialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
+        <ResizableDialogContent className="sm:max-w-[500px]">
+          <ResizableDialogHeader>
+            <ResizableDialogTitle>화면 정보 편집</ResizableDialogTitle>
+          </ResizableDialogHeader>
           <div className="space-y-4 py-4">
             <div className="space-y-2">
               <Label htmlFor="edit-screenName">화면명 *</Label>
@@ -1097,23 +1103,23 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
               </Select>
             </div>
           </div>
-          <DialogFooter>
+          <ResizableDialogFooter>
             <Button variant="outline" onClick={() => setEditDialogOpen(false)}>
               취소
             </Button>
             <Button onClick={handleEditSave} disabled={!editFormData.screenName.trim()}>
               저장
             </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+          </ResizableDialogFooter>
+        </ResizableDialogContent>
+      </ResizableDialog>
 
       {/* 화면 미리보기 다이얼로그 */}
-      <Dialog open={previewDialogOpen} onOpenChange={setPreviewDialogOpen}>
-        <DialogContent className="h-[95vh] max-w-[95vw]">
-          <DialogHeader>
-            <DialogTitle>화면 미리보기 - {screenToPreview?.screenName}</DialogTitle>
-          </DialogHeader>
+      <ResizableDialog open={previewDialogOpen} onOpenChange={setPreviewDialogOpen}>
+        <ResizableDialogContent className="h-[95vh] max-w-[95vw]">
+          <ResizableDialogHeader>
+            <ResizableDialogTitle>화면 미리보기 - {screenToPreview?.screenName}</ResizableDialogTitle>
+          </ResizableDialogHeader>
           <div className="flex flex-1 items-center justify-center overflow-hidden bg-gradient-to-br from-gray-50 to-slate-100 p-6">
             {isLoadingPreview ? (
               <div className="flex h-full items-center justify-center">
@@ -1351,7 +1357,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
               </div>
             )}
           </div>
-          <DialogFooter>
+          <ResizableDialogFooter>
             <Button variant="outline" onClick={() => setPreviewDialogOpen(false)}>
               닫기
             </Button>
@@ -1359,9 +1365,9 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
               <Palette className="mr-2 h-4 w-4" />
               편집 모드로 전환
             </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+          </ResizableDialogFooter>
+        </ResizableDialogContent>
+      </ResizableDialog>
     </div>
   );
 }