feat: 테이블 타입 관리 모달 추가 및 기존 테이블 생성 모달 제거

- 테이블 설정 모달에 테이블 타입 관리 모달을 추가하여 데이터베이스 테이블과 컬럼의 타입을 관리할 수 있도록 개선
- 기존의 테이블 생성 모달을 제거하고, 버튼 텍스트를 "새 테이블 생성"에서 "테이블 타입 관리"로 변경
- 테이블 타입 관리 모달의 헤더 및 설명 추가, 모달 닫기 버튼 기능 구현
- 테이블 데이터 새로고침 기능을 추가하여 모달 닫기 시 데이터가 최신 상태로 유지되도록 개선
This commit is contained in:
DDD1542 2026-01-14 15:37:29 +09:00
parent f321aaf7aa
commit 0a3d42f3ad
1 changed files with 45 additions and 19 deletions

View File

@ -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>
</>
);
}