카테고리 구현

frontend/components/screen/MenuAssignmentModal.tsx

@@ -4,11 +4,11 @@ import React, { useState, useEffect, useRef } from "react";
 import {
   Dialog,
   DialogContent,
-  
-  
+  DialogTitle,
+  DialogDescription,
   DialogHeader,
-  
-} from "@/components/ui/resizable-dialog";
+  DialogFooter,
+} from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -345,26 +345,26 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
 
   return (
     <>
-      <ResizableDialog open={isOpen} onOpenChange={onClose}>
-        <ResizableDialogContent className="max-w-2xl">
+      <Dialog open={isOpen} onOpenChange={onClose}>
+        <DialogContent className="max-w-2xl">
           {assignmentSuccess ? (
             // 성공 화면
             <>
-              <ResizableDialogHeader>
-                <ResizableDialogTitle className="flex items-center gap-2">
+              <DialogHeader>
+                <DialogTitle className="flex items-center gap-2">
                   <div className="flex h-8 w-8 items-center justify-center rounded-full bg-green-100">
                     <svg className="h-5 w-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                     </svg>
                   </div>
                   {assignmentMessage.includes("나중에") ? "화면 저장 완료" : "화면 할당 완료"}
-                </ResizableDialogTitle>
-                <ResizableDialogDescription>
+                </DialogTitle>
+                <DialogDescription>
                   {assignmentMessage.includes("나중에")
                     ? "화면이 성공적으로 저장되었습니다. 나중에 메뉴에 할당할 수 있습니다."
                     : "화면이 성공적으로 메뉴에 할당되었습니다."}
-                </ResizableDialogDescription>
-              </ResizableDialogHeader>
+                </DialogDescription>
+              </DialogHeader>
 
               <div className="space-y-4">
                 <div className="rounded-lg border bg-green-50 p-4">
@@ -386,7 +386,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                 </div>
               </div>
 
-              <ResizableDialogFooter>
+              <DialogFooter>
                 <Button
                   onClick={() => {
                     // 타이머 정리
@@ -407,19 +407,19 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                   <Monitor className="mr-2 h-4 w-4" />
                   화면 목록으로 이동
                 </Button>
-              </ResizableDialogFooter>
+              </DialogFooter>
             </>
           ) : (
             // 기본 할당 화면
             <>
-              <ResizableDialogHeader>
-                <ResizableDialogTitle className="flex items-center gap-2">
+              <DialogHeader>
+                <DialogTitle className="flex items-center gap-2">
                   <Settings className="h-5 w-5" />
                   메뉴에 화면 할당
-                </ResizableDialogTitle>
-                <ResizableDialogDescription>
+                </DialogTitle>
+                <DialogDescription>
                   저장된 화면을 메뉴에 할당하여 사용자가 접근할 수 있도록 설정합니다.
-                </ResizableDialogDescription>
+                </DialogDescription>
                 {screenInfo && (
                   <div className="bg-accent mt-2 rounded-lg border p-3">
                     <div className="flex items-center gap-2">
@@ -432,7 +432,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                     {screenInfo.description && <p className="mt-1 text-sm text-blue-700">{screenInfo.description}</p>}
                   </div>
                 )}
-              </ResizableDialogHeader>
+              </DialogHeader>
 
               <div className="space-y-4">
                 {/* 메뉴 선택 (검색 기능 포함) */}
@@ -572,22 +572,22 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                     </>
                   )}
                 </Button>
-              </ResizableDialogFooter>
+              </DialogFooter>
             </>
           )}
-        </ResizableDialogContent>
-      </ResizableDialog>
+        </DialogContent>
+      </Dialog>
 
       {/* 화면 교체 확인 대화상자 */}
-      <ResizableDialog open={showReplaceDialog} onOpenChange={setShowReplaceDialog}>
-        <ResizableDialogContent className="max-w-md">
-          <ResizableDialogHeader>
-            <ResizableDialogTitle className="flex items-center gap-2">
+      <Dialog open={showReplaceDialog} onOpenChange={setShowReplaceDialog}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
               <Monitor className="h-5 w-5 text-orange-600" />
               화면 교체 확인
-            </ResizableDialogTitle>
-            <ResizableDialogDescription>선택한 메뉴에 이미 할당된 화면이 있습니다.</ResizableDialogDescription>
-          </ResizableDialogHeader>
+            </DialogTitle>
+            <DialogDescription>선택한 메뉴에 이미 할당된 화면이 있습니다.</DialogDescription>
+          </DialogHeader>
 
           <div className="space-y-4">
             {/* 기존 화면 목록 */}
@@ -652,9 +652,9 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                 </>
               )}
             </Button>
-          </ResizableDialogFooter>
-        </ResizableDialogContent>
-      </ResizableDialog>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </>
   );
 };