From a1cb9d2a8e79c4518585bb1871af5682992d5d0b Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Thu, 6 Nov 2025 12:03:28 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=BB=AC=EB=9F=BC=20=EB=9D=BC=EB=B2=A8=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C=20=EB=B0=8F=20=EB=B9=8C=EB=93=9C=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 카테고리 타입 컬럼이 테이블 리스트/플로우 위젯에서 코드값 대신 라벨로 표시되도록 수정
  - InteractiveDataTable: categoryMappings 상태 추가 및 formatCellValue에서 카테고리 라벨 변환
  - FlowWidget: categoryMappings 상태 추가 및 formatValue에서 카테고리 라벨 변환
  - TableListComponent: categoryMappings 상태 추가 및 formatCellValue에서 카테고리 라벨 변환

- FlowWidget 런타임 에러 수정
  - formatValue 함수를 categoryMappings 상태 선언 이후로 이동
  - useCallback 의존성 배열 오류 해결

- Dialog 컴포넌트 빌드 오류 수정
  - CopyScreenModal: DialogFooter → ResizableDialogFooter 태그 일치
  - MenuAssignmentModal: 모든 Dialog 컴포넌트를 ResizableDialog 버전으로 변경
    - Dialog → ResizableDialog
    - DialogContent → ResizableDialogContent
    - DialogFooter → ResizableDialogFooter
    - DialogHeader → ResizableDialogHeader
    - DialogTitle → ResizableDialogTitle
    - DialogDescription → ResizableDialogDescription

- 불필요한 console.log 제거
  - InteractiveDataTable, FlowWidget, TableListComponent에서 디버깅 로그 정리
---
 .../components/screen/CopyScreenModal.tsx     |  2 +-
 .../components/screen/MenuAssignmentModal.tsx | 66 ++++++++++---------
 2 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/frontend/components/screen/CopyScreenModal.tsx b/frontend/components/screen/CopyScreenModal.tsx
index 182c92bb..454d5805 100644
--- a/frontend/components/screen/CopyScreenModal.tsx
+++ b/frontend/components/screen/CopyScreenModal.tsx
@@ -168,7 +168,7 @@ export default function CopyScreenModal({ isOpen, onClose, sourceScreen, onCopyS
           </div>
         </div>
 
-        <DialogFooter>
+        <ResizableDialogFooter>
           <Button variant="outline" onClick={handleClose} disabled={isCopying}>
             취소
           </Button>
diff --git a/frontend/components/screen/MenuAssignmentModal.tsx b/frontend/components/screen/MenuAssignmentModal.tsx
index c4e0683e..92e48c6e 100644
--- a/frontend/components/screen/MenuAssignmentModal.tsx
+++ b/frontend/components/screen/MenuAssignmentModal.tsx
@@ -2,8 +2,12 @@
 
 import React, { useState, useEffect, useRef } from "react";
 import {
-  Dialog,
-  DialogContent,
+  ResizableDialog,
+  ResizableDialogContent,
+  ResizableDialogFooter,
+  ResizableResizableDialogHeader,
+  ResizableResizableDialogTitle,
+  ResizableResizableDialogDescription,
 } from "@/components/ui/resizable-dialog";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -111,7 +115,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
         autoRedirectTimerRef.current = null;
       }
     }
-    
+
     // 컴포넌트 언마운트 시 타이머 정리
     return () => {
       if (autoRedirectTimerRef.current) {
@@ -341,26 +345,26 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
 
   return (
     <>
-      <Dialog open={isOpen} onOpenChange={onClose}>
-        <DialogContent className="max-w-2xl">
+      <ResizableDialog open={isOpen} onOpenChange={onClose}>
+        <ResizableDialogContent className="max-w-2xl">
           {assignmentSuccess ? (
             // 성공 화면
             <>
-              <DialogHeader>
-                <DialogTitle className="flex items-center gap-2">
+              <ResizableDialogHeader>
+                <ResizableDialogTitle 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("나중에") ? "화면 저장 완료" : "화면 할당 완료"}
-                </DialogTitle>
-                <DialogDescription>
+                </ResizableDialogTitle>
+                <ResizableDialogDescription>
                   {assignmentMessage.includes("나중에")
                     ? "화면이 성공적으로 저장되었습니다. 나중에 메뉴에 할당할 수 있습니다."
                     : "화면이 성공적으로 메뉴에 할당되었습니다."}
-                </DialogDescription>
-              </DialogHeader>
+                </ResizableDialogDescription>
+              </ResizableDialogHeader>
 
               <div className="space-y-4">
                 <div className="rounded-lg border bg-green-50 p-4">
@@ -390,7 +394,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                       clearTimeout(autoRedirectTimerRef.current);
                       autoRedirectTimerRef.current = null;
                     }
-                    
+
                     // 화면 목록으로 이동
                     if (onBackToList) {
                       onBackToList();
@@ -408,14 +412,14 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
           ) : (
             // 기본 할당 화면
             <>
-              <DialogHeader>
-                <DialogTitle className="flex items-center gap-2">
+              <ResizableDialogHeader>
+                <ResizableDialogTitle className="flex items-center gap-2">
                   <Settings className="h-5 w-5" />
                   메뉴에 화면 할당
-                </DialogTitle>
-                <DialogDescription>
+                </ResizableDialogTitle>
+                <ResizableDialogDescription>
                   저장된 화면을 메뉴에 할당하여 사용자가 접근할 수 있도록 설정합니다.
-                </DialogDescription>
+                </ResizableDialogDescription>
                 {screenInfo && (
                   <div className="bg-accent mt-2 rounded-lg border p-3">
                     <div className="flex items-center gap-2">
@@ -428,7 +432,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                     {screenInfo.description && <p className="mt-1 text-sm text-blue-700">{screenInfo.description}</p>}
                   </div>
                 )}
-              </DialogHeader>
+              </ResizableDialogHeader>
 
               <div className="space-y-4">
                 {/* 메뉴 선택 (검색 기능 포함) */}
@@ -568,22 +572,22 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                     </>
                   )}
                 </Button>
-              </DialogFooter>
+              </ResizableDialogFooter>
             </>
           )}
-        </DialogContent>
-      </Dialog>
+        </ResizableDialogContent>
+      </ResizableDialog>
 
       {/* 화면 교체 확인 대화상자 */}
-      <Dialog open={showReplaceDialog} onOpenChange={setShowReplaceDialog}>
-        <DialogContent className="max-w-md">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
+      <ResizableDialog open={showReplaceDialog} onOpenChange={setShowReplaceDialog}>
+        <ResizableDialogContent className="max-w-md">
+          <ResizableDialogHeader>
+            <ResizableDialogTitle className="flex items-center gap-2">
               <Monitor className="h-5 w-5 text-orange-600" />
               화면 교체 확인
-            </DialogTitle>
-            <DialogDescription>선택한 메뉴에 이미 할당된 화면이 있습니다.</DialogDescription>
-          </DialogHeader>
+            </ResizableDialogTitle>
+            <ResizableDialogDescription>선택한 메뉴에 이미 할당된 화면이 있습니다.</ResizableDialogDescription>
+          </ResizableDialogHeader>
 
           <div className="space-y-4">
             {/* 기존 화면 목록 */}
@@ -648,9 +652,9 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                 </>
               )}
             </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+          </ResizableDialogFooter>
+        </ResizableDialogContent>
+      </ResizableDialog>
     </>
   );
 };