From 0a3d42f3ad5e0ec0a51491d7734ad7131516b5c2 Mon Sep 17 00:00:00 2001
From: DDD1542 <puget159@naver.com>
Date: Wed, 14 Jan 2026 15:37:29 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=85=8C=EC=9D=B4=EB=B8=94=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EA=B4=80=EB=A6=AC=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EA=B8=B0=EC=A1=B4=20=ED=85=8C=EC=9D=B4?=
 =?UTF-8?q?=EB=B8=94=20=EC=83=9D=EC=84=B1=20=EB=AA=A8=EB=8B=AC=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 테이블 설정 모달에 테이블 타입 관리 모달을 추가하여 데이터베이스 테이블과 컬럼의 타입을 관리할 수 있도록 개선
- 기존의 테이블 생성 모달을 제거하고, 버튼 텍스트를 "새 테이블 생성"에서 "테이블 타입 관리"로 변경
- 테이블 타입 관리 모달의 헤더 및 설명 추가, 모달 닫기 버튼 기능 구현
- 테이블 데이터 새로고침 기능을 추가하여 모달 닫기 시 데이터가 최신 상태로 유지되도록 개선
---
 .../components/screen/TableSettingModal.tsx   | 64 +++++++++++++------
 1 file changed, 45 insertions(+), 19 deletions(-)

diff --git a/frontend/components/screen/TableSettingModal.tsx b/frontend/components/screen/TableSettingModal.tsx
index 4dd854d8..b6fbbd11 100644
--- a/frontend/components/screen/TableSettingModal.tsx
+++ b/frontend/components/screen/TableSettingModal.tsx
@@ -59,6 +59,7 @@ import {
   ArrowRight,
   Eye,
   Settings2,
+  Settings,
   Monitor,
   ExternalLink,
   Type,
@@ -68,6 +69,7 @@ import {
   FileText,
   Search,
   List,
+  X,
 } from "lucide-react";
 import {
   getFieldJoins,
@@ -79,7 +81,7 @@ import {
 import { tableManagementApi, ColumnTypeInfo, TableInfo } from "@/lib/api/tableManagement";
 import { screenApi } from "@/lib/api/screen";
 import { INPUT_TYPE_OPTIONS } from "@/types/input-types";
-import { CreateTableModal } from "@/components/admin/CreateTableModal";
+import TableManagementPage from "@/app/(main)/admin/systemMng/tableMngList/page";
 
 // ============================================================
 // 타입 정의
@@ -277,8 +279,8 @@ export function TableSettingModal({
   const [refTableColumns, setRefTableColumns] = useState<Record<string, ColumnTypeInfo[]>>({});
   const [loadingRefColumns, setLoadingRefColumns] = useState(false);
   
-  // 테이블 생성 모달
-  const [showCreateTableModal, setShowCreateTableModal] = useState(false);
+  // 테이블 타입 관리 모달 상태
+  const [showTableManagementModal, setShowTableManagementModal] = useState(false);
 
   // 테이블 컬럼 정보 로드
   const loadTableData = useCallback(async () => {
@@ -517,6 +519,7 @@ export function TableSettingModal({
   };
 
   return (
+    <>
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="flex h-[85vh] max-h-[900px] w-[95vw] max-w-[1200px] flex-col">
         <DialogHeader className="flex-shrink-0">
@@ -533,11 +536,11 @@ export function TableSettingModal({
             <Button
               variant="outline"
               size="sm"
-              onClick={() => setShowCreateTableModal(true)}
+              onClick={() => setShowTableManagementModal(true)}
               className="gap-1 text-xs"
             >
-              <Plus className="h-3.5 w-3.5" />
-              새 테이블 생성
+              <Settings className="h-3.5 w-3.5" />
+              테이블 타입 관리
             </Button>
           </div>
           <DialogDescription className="text-sm">
@@ -649,21 +652,44 @@ export function TableSettingModal({
             )}
           </div>
         </div>
-        
-        {/* 테이블 생성 모달 */}
-        <CreateTableModal
-          isOpen={showCreateTableModal}
-          onClose={() => setShowCreateTableModal(false)}
-          onSuccess={async (result) => {
-            setShowCreateTableModal(false);
-            toast.success("새 테이블이 성공적으로 생성되었습니다!");
-            // 테이블 목록 새로고침
-            await loadTableData();
-          }}
-          mode="create"
-        />
       </DialogContent>
     </Dialog>
+
+    {/* 테이블 타입 관리 전체 화면 모달 */}
+    <Dialog open={showTableManagementModal} onOpenChange={setShowTableManagementModal}>
+      <DialogContent className="max-w-[98vw] h-[95vh] p-0 overflow-hidden">
+        <div className="flex flex-col h-full">
+          {/* 헤더 */}
+          <div className="flex items-center justify-between px-4 py-3 border-b bg-background">
+            <div>
+              <DialogTitle className="text-lg font-semibold">
+                테이블 타입 관리
+              </DialogTitle>
+              <p className="text-xs text-muted-foreground">
+                데이터베이스 테이블과 컬럼의 타입을 관리합니다
+              </p>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                setShowTableManagementModal(false);
+                // 테이블 데이터 새로고침
+                loadTableData();
+              }}
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+          
+          {/* TableManagementPage */}
+          <div className="flex-1 overflow-hidden">
+            <TableManagementPage />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+    </>
   );
 }