1942 lines
82 KiB
TypeScript
1942 lines
82 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect, useCallback, useRef } from "react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||
import { Checkbox } from "@/components/ui/checkbox";
|
||
import { useAuth } from "@/hooks/useAuth";
|
||
import {
|
||
DropdownMenu,
|
||
DropdownMenuContent,
|
||
DropdownMenuItem,
|
||
DropdownMenuTrigger,
|
||
} from "@/components/ui/dropdown-menu";
|
||
import {
|
||
AlertDialog,
|
||
AlertDialogAction,
|
||
AlertDialogCancel,
|
||
AlertDialogContent,
|
||
AlertDialogDescription,
|
||
AlertDialogFooter,
|
||
AlertDialogHeader,
|
||
AlertDialogTitle,
|
||
} from "@/components/ui/alert-dialog";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import { Label } from "@/components/ui/label";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogFooter,
|
||
DialogDescription,
|
||
} from "@/components/ui/dialog";
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
||
import { cn } from "@/lib/utils";
|
||
import { MoreHorizontal, Edit, Trash2, Copy, Eye, Plus, Search, Palette, RotateCcw, Trash, Check, ChevronsUpDown } from "lucide-react";
|
||
import { ScreenDefinition } from "@/types/screen";
|
||
import { screenApi } from "@/lib/api/screen";
|
||
import { ExternalRestApiConnectionAPI, ExternalRestApiConnection } from "@/lib/api/externalRestApiConnection";
|
||
import { getScreenGroups, ScreenGroup } from "@/lib/api/screenGroup";
|
||
import { Layers } from "lucide-react";
|
||
import CreateScreenModal from "./CreateScreenModal";
|
||
import CopyScreenModal from "./CopyScreenModal";
|
||
import dynamic from "next/dynamic";
|
||
import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
|
||
import { DynamicWebTypeRenderer } from "@/lib/registry";
|
||
import { isFileComponent, getComponentWebType } from "@/lib/utils/componentTypeUtils";
|
||
import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
|
||
import { RealtimePreview } from "./RealtimePreviewDynamic";
|
||
import { ScreenPreviewProvider } from "@/contexts/ScreenPreviewContext";
|
||
|
||
// InteractiveScreenViewer를 동적으로 import (SSR 비활성화)
|
||
const InteractiveScreenViewer = dynamic(
|
||
() => import("./InteractiveScreenViewer").then((mod) => mod.InteractiveScreenViewer),
|
||
{
|
||
ssr: false,
|
||
loading: () => <div className="flex items-center justify-center p-8">로딩 중...</div>,
|
||
},
|
||
);
|
||
|
||
interface ScreenListProps {
|
||
onScreenSelect: (screen: ScreenDefinition) => void;
|
||
selectedScreen: ScreenDefinition | null;
|
||
onDesignScreen: (screen: ScreenDefinition) => void;
|
||
}
|
||
|
||
type DeletedScreenDefinition = ScreenDefinition & {
|
||
deletedDate?: Date;
|
||
deletedBy?: string;
|
||
deleteReason?: string;
|
||
};
|
||
|
||
export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScreen }: ScreenListProps) {
|
||
const { user } = useAuth();
|
||
const isSuperAdmin = user?.userType === "SUPER_ADMIN" || user?.companyCode === "*";
|
||
|
||
const [activeTab, setActiveTab] = useState("active");
|
||
const [screens, setScreens] = useState<ScreenDefinition[]>([]);
|
||
const [deletedScreens, setDeletedScreens] = useState<DeletedScreenDefinition[]>([]);
|
||
const [loading, setLoading] = useState(true); // 초기 로딩
|
||
const [isSearching, setIsSearching] = useState(false); // 검색 중 로딩 (포커스 유지)
|
||
const [searchTerm, setSearchTerm] = useState("");
|
||
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
|
||
const [selectedCompanyCode, setSelectedCompanyCode] = useState<string>("all");
|
||
const [companies, setCompanies] = useState<any[]>([]);
|
||
const [loadingCompanies, setLoadingCompanies] = useState(false);
|
||
const [currentPage, setCurrentPage] = useState(1);
|
||
const [totalPages, setTotalPages] = useState(1);
|
||
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
||
const [isCopyOpen, setIsCopyOpen] = useState(false);
|
||
const [screenToCopy, setScreenToCopy] = useState<ScreenDefinition | null>(null);
|
||
|
||
// 그룹 필터 관련 상태
|
||
const [selectedGroupId, setSelectedGroupId] = useState<string>("all");
|
||
const [groups, setGroups] = useState<ScreenGroup[]>([]);
|
||
const [loadingGroups, setLoadingGroups] = useState(false);
|
||
|
||
// 검색어 디바운스를 위한 타이머 ref
|
||
const debounceTimer = useRef<NodeJS.Timeout | null>(null);
|
||
|
||
// 첫 로딩 여부를 추적 (한 번만 true)
|
||
const isFirstLoad = useRef(true);
|
||
|
||
// 삭제 관련 상태
|
||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||
const [screenToDelete, setScreenToDelete] = useState<ScreenDefinition | null>(null);
|
||
const [deleteReason, setDeleteReason] = useState("");
|
||
const [dependencies, setDependencies] = useState<
|
||
Array<{
|
||
screenId: number;
|
||
screenName: string;
|
||
screenCode: string;
|
||
componentId: string;
|
||
componentType: string;
|
||
referenceType: string;
|
||
}>
|
||
>([]);
|
||
const [showDependencyWarning, setShowDependencyWarning] = useState(false);
|
||
const [checkingDependencies, setCheckingDependencies] = useState(false);
|
||
|
||
// 영구 삭제 관련 상태
|
||
const [permanentDeleteDialogOpen, setPermanentDeleteDialogOpen] = useState(false);
|
||
const [screenToPermanentDelete, setScreenToPermanentDelete] = useState<DeletedScreenDefinition | null>(null);
|
||
|
||
// 휴지통 일괄삭제 관련 상태
|
||
const [selectedScreenIds, setSelectedScreenIds] = useState<number[]>([]);
|
||
const [bulkDeleteDialogOpen, setBulkDeleteDialogOpen] = useState(false);
|
||
const [bulkDeleting, setBulkDeleting] = useState(false);
|
||
|
||
// 활성 화면 일괄삭제 관련 상태
|
||
const [selectedActiveScreenIds, setSelectedActiveScreenIds] = useState<number[]>([]);
|
||
const [activeBulkDeleteDialogOpen, setActiveBulkDeleteDialogOpen] = useState(false);
|
||
const [activeBulkDeleteReason, setActiveBulkDeleteReason] = useState("");
|
||
const [activeBulkDeleting, setActiveBulkDeleting] = useState(false);
|
||
|
||
// 편집 관련 상태
|
||
const [editDialogOpen, setEditDialogOpen] = useState(false);
|
||
const [screenToEdit, setScreenToEdit] = useState<ScreenDefinition | null>(null);
|
||
const [editFormData, setEditFormData] = useState({
|
||
screenName: "",
|
||
description: "",
|
||
isActive: "Y",
|
||
tableName: "",
|
||
dataSourceType: "database" as "database" | "restapi",
|
||
restApiConnectionId: null as number | null,
|
||
restApiEndpoint: "",
|
||
restApiJsonPath: "data",
|
||
});
|
||
const [tables, setTables] = useState<Array<{ tableName: string; tableLabel: string }>>([]);
|
||
const [loadingTables, setLoadingTables] = useState(false);
|
||
const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
|
||
|
||
// REST API 연결 관련 상태 (편집용)
|
||
const [editRestApiConnections, setEditRestApiConnections] = useState<ExternalRestApiConnection[]>([]);
|
||
const [editRestApiComboboxOpen, setEditRestApiComboboxOpen] = useState(false);
|
||
|
||
// 미리보기 관련 상태
|
||
const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
|
||
const [screenToPreview, setScreenToPreview] = useState<ScreenDefinition | null>(null);
|
||
const [previewLayout, setPreviewLayout] = useState<any>(null);
|
||
const [isLoadingPreview, setIsLoadingPreview] = useState(false);
|
||
const [previewFormData, setPreviewFormData] = useState<Record<string, any>>({});
|
||
|
||
// 최고 관리자인 경우 회사 목록 로드
|
||
useEffect(() => {
|
||
if (isSuperAdmin) {
|
||
loadCompanies();
|
||
}
|
||
}, [isSuperAdmin]);
|
||
|
||
const loadCompanies = async () => {
|
||
try {
|
||
setLoadingCompanies(true);
|
||
const { apiClient } = await import("@/lib/api/client"); // named export
|
||
const response = await apiClient.get("/admin/companies");
|
||
const data = response.data.data || response.data || [];
|
||
setCompanies(data.map((c: any) => ({
|
||
companyCode: c.company_code || c.companyCode,
|
||
companyName: c.company_name || c.companyName,
|
||
})));
|
||
} catch (error) {
|
||
console.error("회사 목록 조회 실패:", error);
|
||
} finally {
|
||
setLoadingCompanies(false);
|
||
}
|
||
};
|
||
|
||
// 화면 그룹 목록 로드
|
||
useEffect(() => {
|
||
loadGroups();
|
||
}, []);
|
||
|
||
const loadGroups = async () => {
|
||
try {
|
||
setLoadingGroups(true);
|
||
const response = await getScreenGroups();
|
||
if (response.success && response.data) {
|
||
setGroups(response.data);
|
||
}
|
||
} catch (error) {
|
||
console.error("그룹 목록 조회 실패:", error);
|
||
} finally {
|
||
setLoadingGroups(false);
|
||
}
|
||
};
|
||
|
||
// 검색어 디바운스 처리 (150ms 지연 - 빠른 응답)
|
||
useEffect(() => {
|
||
// 이전 타이머 취소
|
||
if (debounceTimer.current) {
|
||
clearTimeout(debounceTimer.current);
|
||
}
|
||
|
||
// 새 타이머 설정
|
||
debounceTimer.current = setTimeout(() => {
|
||
setDebouncedSearchTerm(searchTerm);
|
||
}, 150);
|
||
|
||
// 클린업
|
||
return () => {
|
||
if (debounceTimer.current) {
|
||
clearTimeout(debounceTimer.current);
|
||
}
|
||
};
|
||
}, [searchTerm]);
|
||
|
||
// 화면 목록 로드 (실제 API) - debouncedSearchTerm 사용
|
||
useEffect(() => {
|
||
let abort = false;
|
||
const load = async () => {
|
||
try {
|
||
// 첫 로딩인 경우에만 loading=true, 그 외에는 isSearching=true
|
||
if (isFirstLoad.current) {
|
||
setLoading(true);
|
||
isFirstLoad.current = false; // 첫 로딩 완료 표시
|
||
} else {
|
||
setIsSearching(true);
|
||
}
|
||
|
||
if (activeTab === "active") {
|
||
const params: any = { page: currentPage, size: 20, searchTerm: debouncedSearchTerm };
|
||
|
||
// 최고 관리자이고 특정 회사를 선택한 경우
|
||
if (isSuperAdmin && selectedCompanyCode !== "all") {
|
||
params.companyCode = selectedCompanyCode;
|
||
}
|
||
|
||
// 그룹 필터
|
||
if (selectedGroupId !== "all") {
|
||
params.groupId = selectedGroupId;
|
||
}
|
||
|
||
console.log("🔍 화면 목록 API 호출:", params); // 디버깅용
|
||
const resp = await screenApi.getScreens(params);
|
||
console.log("✅ 화면 목록 응답:", resp); // 디버깅용
|
||
|
||
if (abort) return;
|
||
setScreens(resp.data || []);
|
||
setTotalPages(Math.max(1, Math.ceil((resp.total || 0) / 20)));
|
||
} else if (activeTab === "trash") {
|
||
const resp = await screenApi.getDeletedScreens({ page: currentPage, size: 20 });
|
||
if (abort) return;
|
||
setDeletedScreens(resp.data || []);
|
||
setTotalPages(Math.max(1, Math.ceil((resp.total || 0) / 20)));
|
||
}
|
||
} catch (e) {
|
||
console.error("화면 목록 조회 실패", e);
|
||
if (activeTab === "active") {
|
||
setScreens([]);
|
||
} else {
|
||
setDeletedScreens([]);
|
||
}
|
||
setTotalPages(1);
|
||
} finally {
|
||
if (!abort) {
|
||
setLoading(false);
|
||
setIsSearching(false);
|
||
}
|
||
}
|
||
};
|
||
load();
|
||
return () => {
|
||
abort = true;
|
||
};
|
||
}, [currentPage, debouncedSearchTerm, activeTab, selectedCompanyCode, selectedGroupId, isSuperAdmin]);
|
||
|
||
const filteredScreens = screens; // 서버 필터 기준 사용
|
||
|
||
// 화면 목록 다시 로드
|
||
const reloadScreens = async () => {
|
||
try {
|
||
setIsSearching(true);
|
||
const params: any = { page: currentPage, size: 20, searchTerm: debouncedSearchTerm };
|
||
|
||
// 최고 관리자이고 특정 회사를 선택한 경우
|
||
if (isSuperAdmin && selectedCompanyCode !== "all") {
|
||
params.companyCode = selectedCompanyCode;
|
||
}
|
||
|
||
const resp = await screenApi.getScreens(params);
|
||
setScreens(resp.data || []);
|
||
setTotalPages(Math.max(1, Math.ceil((resp.total || 0) / 20)));
|
||
} catch (e) {
|
||
console.error("화면 목록 조회 실패", e);
|
||
} finally {
|
||
setIsSearching(false);
|
||
}
|
||
};
|
||
|
||
const handleScreenSelect = (screen: ScreenDefinition) => {
|
||
onScreenSelect(screen);
|
||
};
|
||
|
||
const handleEdit = async (screen: ScreenDefinition) => {
|
||
setScreenToEdit(screen);
|
||
|
||
// 데이터 소스 타입 결정
|
||
const isRestApi = screen.dataSourceType === "restapi" || screen.tableName?.startsWith("_restapi_");
|
||
|
||
setEditFormData({
|
||
screenName: screen.screenName,
|
||
description: screen.description || "",
|
||
isActive: screen.isActive,
|
||
tableName: screen.tableName || "",
|
||
dataSourceType: isRestApi ? "restapi" : "database",
|
||
restApiConnectionId: (screen as any).restApiConnectionId || null,
|
||
restApiEndpoint: (screen as any).restApiEndpoint || "",
|
||
restApiJsonPath: (screen as any).restApiJsonPath || "data",
|
||
});
|
||
setEditDialogOpen(true);
|
||
|
||
// 테이블 목록 로드
|
||
try {
|
||
setLoadingTables(true);
|
||
const { tableManagementApi } = await import("@/lib/api/tableManagement");
|
||
const response = await tableManagementApi.getTableList();
|
||
if (response.success && response.data) {
|
||
// tableName과 displayName 매핑 (백엔드에서 displayName으로 라벨을 반환함)
|
||
const tableList = response.data.map((table: any) => ({
|
||
tableName: table.tableName,
|
||
tableLabel: table.displayName || table.tableName,
|
||
}));
|
||
setTables(tableList);
|
||
}
|
||
} catch (error) {
|
||
console.error("테이블 목록 조회 실패:", error);
|
||
} finally {
|
||
setLoadingTables(false);
|
||
}
|
||
|
||
// REST API 연결 목록 로드
|
||
try {
|
||
const connections = await ExternalRestApiConnectionAPI.getConnections({ is_active: "Y" });
|
||
setEditRestApiConnections(connections);
|
||
} catch (error) {
|
||
console.error("REST API 연결 목록 조회 실패:", error);
|
||
setEditRestApiConnections([]);
|
||
}
|
||
};
|
||
|
||
const handleEditSave = async () => {
|
||
if (!screenToEdit) return;
|
||
|
||
try {
|
||
// 데이터 소스 타입에 따라 업데이트 데이터 구성
|
||
const updateData: any = {
|
||
screenName: editFormData.screenName,
|
||
description: editFormData.description,
|
||
isActive: editFormData.isActive,
|
||
dataSourceType: editFormData.dataSourceType,
|
||
};
|
||
|
||
if (editFormData.dataSourceType === "database") {
|
||
updateData.tableName = editFormData.tableName;
|
||
updateData.restApiConnectionId = null;
|
||
updateData.restApiEndpoint = null;
|
||
updateData.restApiJsonPath = null;
|
||
} else {
|
||
// REST API
|
||
updateData.tableName = `_restapi_${editFormData.restApiConnectionId}`;
|
||
updateData.restApiConnectionId = editFormData.restApiConnectionId;
|
||
updateData.restApiEndpoint = editFormData.restApiEndpoint;
|
||
updateData.restApiJsonPath = editFormData.restApiJsonPath || "data";
|
||
}
|
||
|
||
console.log("📤 화면 편집 저장 요청:", {
|
||
screenId: screenToEdit.screenId,
|
||
editFormData,
|
||
updateData,
|
||
});
|
||
|
||
// 화면 정보 업데이트 API 호출
|
||
await screenApi.updateScreenInfo(screenToEdit.screenId, updateData);
|
||
|
||
// 선택된 테이블의 라벨 찾기
|
||
const selectedTable = tables.find((t) => t.tableName === editFormData.tableName);
|
||
const tableLabel = selectedTable?.tableLabel || editFormData.tableName;
|
||
|
||
// 목록에서 해당 화면 정보 업데이트
|
||
setScreens((prev) =>
|
||
prev.map((s) =>
|
||
s.screenId === screenToEdit.screenId
|
||
? {
|
||
...s,
|
||
screenName: editFormData.screenName,
|
||
tableName: updateData.tableName,
|
||
tableLabel: tableLabel,
|
||
description: editFormData.description,
|
||
isActive: editFormData.isActive,
|
||
dataSourceType: editFormData.dataSourceType,
|
||
}
|
||
: s,
|
||
),
|
||
);
|
||
|
||
setEditDialogOpen(false);
|
||
setScreenToEdit(null);
|
||
} catch (error) {
|
||
console.error("화면 정보 업데이트 실패:", error);
|
||
alert("화면 정보 업데이트에 실패했습니다.");
|
||
}
|
||
};
|
||
|
||
const handleDelete = async (screen: ScreenDefinition) => {
|
||
setScreenToDelete(screen);
|
||
setCheckingDependencies(true);
|
||
|
||
try {
|
||
// 의존성 체크
|
||
const dependencyResult = await screenApi.checkScreenDependencies(screen.screenId);
|
||
|
||
if (dependencyResult.hasDependencies) {
|
||
setDependencies(dependencyResult.dependencies);
|
||
setShowDependencyWarning(true);
|
||
} else {
|
||
setDeleteDialogOpen(true);
|
||
}
|
||
} catch (error) {
|
||
// console.error("의존성 체크 실패:", error);
|
||
// 의존성 체크 실패 시에도 삭제 다이얼로그는 열어줌
|
||
setDeleteDialogOpen(true);
|
||
} finally {
|
||
setCheckingDependencies(false);
|
||
}
|
||
};
|
||
|
||
const confirmDelete = async (force: boolean = false) => {
|
||
if (!screenToDelete) return;
|
||
|
||
try {
|
||
await screenApi.deleteScreen(screenToDelete.screenId, deleteReason, force);
|
||
setScreens((prev) => prev.filter((s) => s.screenId !== screenToDelete.screenId));
|
||
setDeleteDialogOpen(false);
|
||
setShowDependencyWarning(false);
|
||
setScreenToDelete(null);
|
||
setDeleteReason("");
|
||
setDependencies([]);
|
||
} catch (error: any) {
|
||
// console.error("화면 삭제 실패:", error);
|
||
|
||
// 의존성 오류인 경우 경고창 표시
|
||
if (error.response?.status === 409 && error.response?.data?.code === "SCREEN_HAS_DEPENDENCIES") {
|
||
setDependencies(error.response.data.dependencies || []);
|
||
setShowDependencyWarning(true);
|
||
setDeleteDialogOpen(false);
|
||
} else {
|
||
alert("화면 삭제에 실패했습니다.");
|
||
}
|
||
}
|
||
};
|
||
|
||
const handleCancelDelete = () => {
|
||
setDeleteDialogOpen(false);
|
||
setShowDependencyWarning(false);
|
||
setScreenToDelete(null);
|
||
setDeleteReason("");
|
||
setDependencies([]);
|
||
};
|
||
|
||
const handleRestore = async (screen: DeletedScreenDefinition) => {
|
||
if (!confirm(`"${screen.screenName}" 화면을 복원하시겠습니까?`)) return;
|
||
|
||
try {
|
||
await screenApi.restoreScreen(screen.screenId);
|
||
setDeletedScreens((prev) => prev.filter((s) => s.screenId !== screen.screenId));
|
||
// 활성 탭으로 이동하여 복원된 화면 확인
|
||
setActiveTab("active");
|
||
reloadScreens();
|
||
} catch (error) {
|
||
// console.error("화면 복원 실패:", error);
|
||
alert("화면 복원에 실패했습니다.");
|
||
}
|
||
};
|
||
|
||
const handlePermanentDelete = (screen: DeletedScreenDefinition) => {
|
||
setScreenToPermanentDelete(screen);
|
||
setPermanentDeleteDialogOpen(true);
|
||
};
|
||
|
||
const confirmPermanentDelete = async () => {
|
||
if (!screenToPermanentDelete) return;
|
||
|
||
try {
|
||
await screenApi.permanentDeleteScreen(screenToPermanentDelete.screenId);
|
||
setDeletedScreens((prev) => prev.filter((s) => s.screenId !== screenToPermanentDelete.screenId));
|
||
setPermanentDeleteDialogOpen(false);
|
||
setScreenToPermanentDelete(null);
|
||
} catch (error) {
|
||
// console.error("화면 영구 삭제 실패:", error);
|
||
alert("화면 영구 삭제에 실패했습니다.");
|
||
}
|
||
};
|
||
|
||
// 휴지통 체크박스 선택 처리
|
||
const handleScreenCheck = (screenId: number, checked: boolean) => {
|
||
if (checked) {
|
||
setSelectedScreenIds((prev) => [...prev, screenId]);
|
||
} else {
|
||
setSelectedScreenIds((prev) => prev.filter((id) => id !== screenId));
|
||
}
|
||
};
|
||
|
||
// 휴지통 전체 선택/해제
|
||
const handleSelectAll = (checked: boolean) => {
|
||
if (checked) {
|
||
setSelectedScreenIds(deletedScreens.map((screen) => screen.screenId));
|
||
} else {
|
||
setSelectedScreenIds([]);
|
||
}
|
||
};
|
||
|
||
// 휴지통 일괄삭제 실행
|
||
const handleBulkDelete = () => {
|
||
if (selectedScreenIds.length === 0) {
|
||
alert("삭제할 화면을 선택해주세요.");
|
||
return;
|
||
}
|
||
setBulkDeleteDialogOpen(true);
|
||
};
|
||
|
||
// 활성 화면 체크박스 선택 처리
|
||
const handleActiveScreenCheck = (screenId: number, checked: boolean) => {
|
||
if (checked) {
|
||
setSelectedActiveScreenIds((prev) => [...prev, screenId]);
|
||
} else {
|
||
setSelectedActiveScreenIds((prev) => prev.filter((id) => id !== screenId));
|
||
}
|
||
};
|
||
|
||
// 활성 화면 전체 선택/해제
|
||
const handleActiveSelectAll = (checked: boolean) => {
|
||
if (checked) {
|
||
setSelectedActiveScreenIds(screens.map((screen) => screen.screenId));
|
||
} else {
|
||
setSelectedActiveScreenIds([]);
|
||
}
|
||
};
|
||
|
||
// 활성 화면 일괄삭제 실행
|
||
const handleActiveBulkDelete = () => {
|
||
if (selectedActiveScreenIds.length === 0) {
|
||
alert("삭제할 화면을 선택해주세요.");
|
||
return;
|
||
}
|
||
setActiveBulkDeleteDialogOpen(true);
|
||
};
|
||
|
||
// 활성 화면 일괄삭제 확인
|
||
const confirmActiveBulkDelete = async () => {
|
||
if (selectedActiveScreenIds.length === 0) return;
|
||
|
||
try {
|
||
setActiveBulkDeleting(true);
|
||
const result = await screenApi.bulkDeleteScreens(
|
||
selectedActiveScreenIds,
|
||
activeBulkDeleteReason || undefined,
|
||
true // 강제 삭제 (의존성 무시)
|
||
);
|
||
|
||
// 삭제된 화면들을 목록에서 제거
|
||
setScreens((prev) => prev.filter((screen) => !selectedActiveScreenIds.includes(screen.screenId)));
|
||
|
||
setSelectedActiveScreenIds([]);
|
||
setActiveBulkDeleteDialogOpen(false);
|
||
setActiveBulkDeleteReason("");
|
||
|
||
// 결과 메시지 표시
|
||
let message = `${result.deletedCount}개 화면이 휴지통으로 이동되었습니다.`;
|
||
if (result.skippedCount > 0) {
|
||
message += `\n${result.skippedCount}개 화면은 삭제되지 않았습니다.`;
|
||
}
|
||
if (result.errors.length > 0) {
|
||
message += `\n오류 발생: ${result.errors.map((e) => `화면 ${e.screenId}: ${e.error}`).join(", ")}`;
|
||
}
|
||
|
||
alert(message);
|
||
} catch (error) {
|
||
console.error("일괄 삭제 실패:", error);
|
||
alert("일괄 삭제에 실패했습니다.");
|
||
} finally {
|
||
setActiveBulkDeleting(false);
|
||
}
|
||
};
|
||
|
||
const confirmBulkDelete = async () => {
|
||
if (selectedScreenIds.length === 0) return;
|
||
|
||
try {
|
||
setBulkDeleting(true);
|
||
const result = await screenApi.bulkPermanentDeleteScreens(selectedScreenIds);
|
||
|
||
// 삭제된 화면들을 목록에서 제거
|
||
setDeletedScreens((prev) => prev.filter((screen) => !selectedScreenIds.includes(screen.screenId)));
|
||
|
||
setSelectedScreenIds([]);
|
||
setBulkDeleteDialogOpen(false);
|
||
|
||
// 결과 메시지 표시
|
||
let message = `${result.deletedCount}개 화면이 영구 삭제되었습니다.`;
|
||
if (result.skippedCount > 0) {
|
||
message += `\n${result.skippedCount}개 화면은 삭제되지 않았습니다.`;
|
||
}
|
||
if (result.errors.length > 0) {
|
||
message += `\n오류 발생: ${result.errors.map((e) => `화면 ${e.screenId}: ${e.error}`).join(", ")}`;
|
||
}
|
||
|
||
alert(message);
|
||
} catch (error) {
|
||
// console.error("일괄 삭제 실패:", error);
|
||
alert("일괄 삭제에 실패했습니다.");
|
||
} finally {
|
||
setBulkDeleting(false);
|
||
}
|
||
};
|
||
|
||
const handleCopy = (screen: ScreenDefinition) => {
|
||
setScreenToCopy(screen);
|
||
setIsCopyOpen(true);
|
||
};
|
||
|
||
const handleView = async (screen: ScreenDefinition) => {
|
||
setScreenToPreview(screen);
|
||
setPreviewLayout(null); // 이전 레이아웃 초기화
|
||
setIsLoadingPreview(true);
|
||
setPreviewDialogOpen(true); // 모달 먼저 열기
|
||
|
||
// 모달이 열린 후에 레이아웃 로드
|
||
setTimeout(async () => {
|
||
try {
|
||
// 화면 레이아웃 로드
|
||
const layoutData = await screenApi.getLayout(screen.screenId);
|
||
console.log("📊 미리보기 레이아웃 로드:", layoutData);
|
||
setPreviewLayout(layoutData);
|
||
} catch (error) {
|
||
console.error("❌ 레이아웃 로드 실패:", error);
|
||
toast.error("화면 레이아웃을 불러오는데 실패했습니다.");
|
||
} finally {
|
||
setIsLoadingPreview(false);
|
||
}
|
||
}, 100); // 100ms 딜레이로 모달 애니메이션이 먼저 시작되도록
|
||
};
|
||
|
||
const handleCopySuccess = () => {
|
||
// 복사 성공 후 화면 목록 다시 로드
|
||
reloadScreens();
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="flex items-center justify-center py-8">
|
||
<div className="text-muted-foreground text-sm">로딩 중...</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
{/* 검색 및 필터 */}
|
||
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
|
||
{/* 최고 관리자 전용: 회사 필터 */}
|
||
{isSuperAdmin && (
|
||
<div className="w-full sm:w-[200px]">
|
||
<Select value={selectedCompanyCode} onValueChange={setSelectedCompanyCode} disabled={activeTab === "trash"}>
|
||
<SelectTrigger className="h-10 text-sm">
|
||
<SelectValue placeholder="전체 회사" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="all">전체 회사</SelectItem>
|
||
{companies.map((company) => (
|
||
<SelectItem key={company.companyCode} value={company.companyCode}>
|
||
{company.companyName}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
)}
|
||
|
||
{/* 그룹 필터 */}
|
||
<div className="w-full sm:w-[180px]">
|
||
<Select value={selectedGroupId} onValueChange={setSelectedGroupId} disabled={activeTab === "trash"}>
|
||
<SelectTrigger className="h-10 text-sm">
|
||
<Layers className="mr-2 h-4 w-4 text-muted-foreground" />
|
||
<SelectValue placeholder="전체 그룹" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="all">전체 그룹</SelectItem>
|
||
<SelectItem value="ungrouped">미분류</SelectItem>
|
||
{groups.map((group) => (
|
||
<SelectItem key={group.id} value={String(group.id)}>
|
||
{group.groupName}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
{/* 검색 입력 */}
|
||
<div className="w-full sm:w-[400px]">
|
||
<div className="relative">
|
||
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
|
||
<Input
|
||
key="screen-search-input" // 리렌더링 시에도 동일한 Input 유지
|
||
placeholder="화면명, 코드, 테이블명으로 검색..."
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
className="h-10 pl-10 text-sm"
|
||
disabled={activeTab === "trash"}
|
||
/>
|
||
{/* 검색 중 인디케이터 */}
|
||
{isSearching && (
|
||
<div className="absolute right-3 top-1/2 -translate-y-1/2">
|
||
<div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Button
|
||
onClick={() => setIsCreateOpen(true)}
|
||
disabled={activeTab === "trash"}
|
||
className="h-10 gap-2 text-sm font-medium"
|
||
>
|
||
<Plus className="h-4 w-4" />새 화면 생성
|
||
</Button>
|
||
</div>
|
||
|
||
{/* 탭 구조 */}
|
||
<Tabs value={activeTab} onValueChange={(value) => {
|
||
setActiveTab(value);
|
||
// 탭 전환 시 선택 상태 초기화
|
||
setSelectedActiveScreenIds([]);
|
||
setSelectedScreenIds([]);
|
||
}}>
|
||
<TabsList className="grid w-full grid-cols-2">
|
||
<TabsTrigger value="active">활성 화면</TabsTrigger>
|
||
<TabsTrigger value="trash">휴지통</TabsTrigger>
|
||
</TabsList>
|
||
|
||
{/* 활성 화면 탭 */}
|
||
<TabsContent value="active">
|
||
{/* 선택 삭제 헤더 (선택된 항목이 있을 때만 표시) */}
|
||
{selectedActiveScreenIds.length > 0 && (
|
||
<div className="bg-muted/50 mb-4 flex items-center justify-between rounded-lg border p-3">
|
||
<span className="text-sm font-medium">
|
||
{selectedActiveScreenIds.length}개 화면 선택됨
|
||
</span>
|
||
<div className="flex items-center gap-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setSelectedActiveScreenIds([])}
|
||
className="h-8 text-xs"
|
||
>
|
||
선택 해제
|
||
</Button>
|
||
<Button
|
||
variant="destructive"
|
||
size="sm"
|
||
onClick={handleActiveBulkDelete}
|
||
disabled={activeBulkDeleting}
|
||
className="h-8 gap-1 text-xs"
|
||
>
|
||
<Trash2 className="h-3.5 w-3.5" />
|
||
{activeBulkDeleting ? "삭제 중..." : "선택 삭제"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 데스크톱 테이블 뷰 (lg 이상) */}
|
||
<div className="bg-card hidden shadow-sm lg:block">
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead className="h-12 w-12 px-4 py-3">
|
||
<Checkbox
|
||
checked={screens.length > 0 && selectedActiveScreenIds.length === screens.length}
|
||
onCheckedChange={handleActiveSelectAll}
|
||
aria-label="전체 선택"
|
||
/>
|
||
</TableHead>
|
||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">화면명</TableHead>
|
||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">테이블명</TableHead>
|
||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">상태</TableHead>
|
||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">생성일</TableHead>
|
||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{screens.map((screen) => (
|
||
<TableRow
|
||
key={screen.screenId}
|
||
className={`bg-background hover:bg-muted/50 cursor-pointer border-b transition-colors ${
|
||
selectedScreen?.screenId === screen.screenId ? "border-primary/20 bg-accent" : ""
|
||
} ${selectedActiveScreenIds.includes(screen.screenId) ? "bg-muted/30" : ""}`}
|
||
onClick={() => onDesignScreen(screen)}
|
||
>
|
||
<TableCell className="h-16 px-4 py-3">
|
||
<Checkbox
|
||
checked={selectedActiveScreenIds.includes(screen.screenId)}
|
||
onCheckedChange={(checked) => handleActiveScreenCheck(screen.screenId, checked as boolean)}
|
||
onClick={(e) => e.stopPropagation()}
|
||
aria-label={`${screen.screenName} 선택`}
|
||
/>
|
||
</TableCell>
|
||
<TableCell className="h-16 px-6 py-3 cursor-pointer">
|
||
<div>
|
||
<div className="font-medium">{screen.screenName}</div>
|
||
{screen.description && (
|
||
<div className="text-muted-foreground mt-1 text-sm">{screen.description}</div>
|
||
)}
|
||
</div>
|
||
</TableCell>
|
||
<TableCell className="h-16 px-6 py-3">
|
||
<span className="text-muted-foreground font-mono text-sm">
|
||
{screen.tableLabel || screen.tableName}
|
||
</span>
|
||
</TableCell>
|
||
<TableCell className="h-16 px-6 py-3">
|
||
<Badge variant={screen.isActive === "Y" ? "default" : "secondary"}>
|
||
{screen.isActive === "Y" ? "활성" : "비활성"}
|
||
</Badge>
|
||
</TableCell>
|
||
<TableCell className="h-16 px-6 py-3">
|
||
<div className="text-muted-foreground text-sm">{screen.createdDate.toLocaleDateString()}</div>
|
||
<div className="text-muted-foreground text-xs">{screen.createdBy}</div>
|
||
</TableCell>
|
||
<TableCell className="h-16 px-6 py-3">
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||
<MoreHorizontal className="h-4 w-4" />
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end">
|
||
<DropdownMenuItem
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onDesignScreen(screen);
|
||
}}
|
||
>
|
||
<Palette className="mr-2 h-4 w-4" />
|
||
화면 설계
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleView(screen);
|
||
}}
|
||
>
|
||
<Eye className="mr-2 h-4 w-4" />
|
||
미리보기
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleEdit(screen);
|
||
}}
|
||
>
|
||
<Edit className="mr-2 h-4 w-4" />
|
||
편집
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleCopy(screen);
|
||
}}
|
||
>
|
||
<Copy className="mr-2 h-4 w-4" />
|
||
복사
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleDelete(screen);
|
||
}}
|
||
className="text-destructive"
|
||
disabled={checkingDependencies && screenToDelete?.screenId === screen.screenId}
|
||
>
|
||
<Trash2 className="mr-2 h-4 w-4" />
|
||
{checkingDependencies && screenToDelete?.screenId === screen.screenId
|
||
? "확인 중..."
|
||
: "삭제"}
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
|
||
{filteredScreens.length === 0 && (
|
||
<div className="flex h-64 flex-col items-center justify-center">
|
||
<p className="text-muted-foreground text-sm">검색 결과가 없습니다.</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 모바일/태블릿 카드 뷰 (lg 미만) */}
|
||
<div className="space-y-4 lg:hidden">
|
||
{/* 선택 헤더 */}
|
||
<div className="bg-card flex items-center justify-between rounded-lg border p-4 shadow-sm">
|
||
<div className="flex items-center gap-3">
|
||
<Checkbox
|
||
checked={screens.length > 0 && selectedActiveScreenIds.length === screens.length}
|
||
onCheckedChange={handleActiveSelectAll}
|
||
aria-label="전체 선택"
|
||
/>
|
||
<span className="text-sm text-muted-foreground">전체 선택</span>
|
||
</div>
|
||
{selectedActiveScreenIds.length > 0 && (
|
||
<Button
|
||
variant="destructive"
|
||
size="sm"
|
||
onClick={handleActiveBulkDelete}
|
||
disabled={activeBulkDeleting}
|
||
className="h-9 gap-2 text-sm"
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
{activeBulkDeleting ? "삭제 중..." : `${selectedActiveScreenIds.length}개 삭제`}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
|
||
{/* 카드 목록 */}
|
||
<div className="grid gap-4 sm:grid-cols-2">
|
||
{screens.map((screen) => (
|
||
<div
|
||
key={screen.screenId}
|
||
className={`bg-card hover:bg-muted/50 cursor-pointer rounded-lg border p-4 shadow-sm transition-colors ${
|
||
selectedScreen?.screenId === screen.screenId ? "border-primary bg-accent" : ""
|
||
} ${selectedActiveScreenIds.includes(screen.screenId) ? "bg-muted/30 border-primary/50" : ""}`}
|
||
onClick={() => handleScreenSelect(screen)}
|
||
>
|
||
{/* 헤더 */}
|
||
<div className="mb-4 flex items-start gap-3">
|
||
<Checkbox
|
||
checked={selectedActiveScreenIds.includes(screen.screenId)}
|
||
onCheckedChange={(checked) => handleActiveScreenCheck(screen.screenId, checked as boolean)}
|
||
onClick={(e) => e.stopPropagation()}
|
||
className="mt-1"
|
||
aria-label={`${screen.screenName} 선택`}
|
||
/>
|
||
<div className="flex-1">
|
||
<h3 className="text-base font-semibold">{screen.screenName}</h3>
|
||
</div>
|
||
<Badge variant={screen.isActive === "Y" ? "default" : "secondary"}>
|
||
{screen.isActive === "Y" ? "활성" : "비활성"}
|
||
</Badge>
|
||
</div>
|
||
|
||
{/* 설명 */}
|
||
{screen.description && <p className="text-muted-foreground mb-4 text-sm">{screen.description}</p>}
|
||
|
||
{/* 정보 */}
|
||
<div className="space-y-2 border-t pt-4">
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-muted-foreground">테이블</span>
|
||
<span className="font-mono font-medium">{screen.tableLabel || screen.tableName}</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-muted-foreground">생성일</span>
|
||
<span className="font-medium">{screen.createdDate.toLocaleDateString()}</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-muted-foreground">작성자</span>
|
||
<span className="font-medium">{screen.createdBy}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 액션 */}
|
||
<div className="mt-4 flex gap-2 border-t pt-4">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onDesignScreen(screen);
|
||
}}
|
||
className="h-9 flex-1 gap-2 text-sm"
|
||
>
|
||
<Palette className="h-4 w-4" />
|
||
설계
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleView(screen);
|
||
}}
|
||
className="h-9 flex-1 gap-2 text-sm"
|
||
>
|
||
<Eye className="h-4 w-4" />
|
||
미리보기
|
||
</Button>
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
|
||
<Button variant="outline" size="sm" className="h-9 px-3">
|
||
<MoreHorizontal className="h-4 w-4" />
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end">
|
||
<DropdownMenuItem
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleEdit(screen);
|
||
}}
|
||
>
|
||
<Edit className="mr-2 h-4 w-4" />
|
||
편집
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleCopy(screen);
|
||
}}
|
||
>
|
||
<Copy className="mr-2 h-4 w-4" />
|
||
복사
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleDelete(screen);
|
||
}}
|
||
className="text-destructive"
|
||
disabled={checkingDependencies && screenToDelete?.screenId === screen.screenId}
|
||
>
|
||
<Trash2 className="mr-2 h-4 w-4" />
|
||
{checkingDependencies && screenToDelete?.screenId === screen.screenId ? "확인 중..." : "삭제"}
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
{filteredScreens.length === 0 && (
|
||
<div className="bg-card col-span-2 flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
|
||
<p className="text-muted-foreground text-sm">검색 결과가 없습니다.</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
{/* 휴지통 탭 */}
|
||
<TabsContent value="trash">
|
||
{/* 데스크톱 테이블 뷰 (lg 이상) */}
|
||
<div className="bg-card hidden shadow-sm lg:block">
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead className="h-12 w-12 px-6 py-3">
|
||
<Checkbox
|
||
checked={deletedScreens.length > 0 && selectedScreenIds.length === deletedScreens.length}
|
||
onCheckedChange={handleSelectAll}
|
||
aria-label="전체 선택"
|
||
/>
|
||
</TableHead>
|
||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">화면명</TableHead>
|
||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">테이블명</TableHead>
|
||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">삭제일</TableHead>
|
||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">삭제자</TableHead>
|
||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">삭제 사유</TableHead>
|
||
<TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{deletedScreens.map((screen) => (
|
||
<TableRow key={screen.screenId} className="bg-background hover:bg-muted/50 border-b transition-colors">
|
||
<TableCell className="h-16 px-6 py-3">
|
||
<Checkbox
|
||
checked={selectedScreenIds.includes(screen.screenId)}
|
||
onCheckedChange={(checked) => handleScreenCheck(screen.screenId, checked as boolean)}
|
||
aria-label={`${screen.screenName} 선택`}
|
||
/>
|
||
</TableCell>
|
||
<TableCell className="h-16 px-6 py-3">
|
||
<div>
|
||
<div className="font-medium">{screen.screenName}</div>
|
||
{screen.description && (
|
||
<div className="text-muted-foreground mt-1 text-sm">{screen.description}</div>
|
||
)}
|
||
</div>
|
||
</TableCell>
|
||
<TableCell className="h-16 px-6 py-3">
|
||
<span className="text-muted-foreground font-mono text-sm">
|
||
{screen.tableLabel || screen.tableName}
|
||
</span>
|
||
</TableCell>
|
||
<TableCell className="h-16 px-6 py-3">
|
||
<div className="text-muted-foreground text-sm">{screen.deletedDate?.toLocaleDateString()}</div>
|
||
</TableCell>
|
||
<TableCell className="h-16 px-6 py-3">
|
||
<div className="text-muted-foreground text-sm">{screen.deletedBy}</div>
|
||
</TableCell>
|
||
<TableCell className="h-16 px-6 py-3">
|
||
<div className="text-muted-foreground max-w-32 truncate text-sm" title={screen.deleteReason}>
|
||
{screen.deleteReason || "-"}
|
||
</div>
|
||
</TableCell>
|
||
<TableCell className="h-16 px-6 py-3">
|
||
<div className="flex items-center gap-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => handleRestore(screen)}
|
||
className="text-primary hover:text-primary/80 h-9 gap-2 text-sm"
|
||
>
|
||
<RotateCcw className="h-4 w-4" />
|
||
복원
|
||
</Button>
|
||
<Button
|
||
variant="destructive"
|
||
size="sm"
|
||
onClick={() => handlePermanentDelete(screen)}
|
||
className="h-9 gap-2 text-sm"
|
||
>
|
||
<Trash className="h-4 w-4" />
|
||
영구삭제
|
||
</Button>
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
|
||
{deletedScreens.length === 0 && (
|
||
<div className="flex h-64 flex-col items-center justify-center">
|
||
<p className="text-muted-foreground text-sm">휴지통이 비어있습니다.</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 모바일/태블릿 카드 뷰 (lg 미만) */}
|
||
<div className="space-y-4 lg:hidden">
|
||
{/* 헤더 */}
|
||
<div className="bg-card flex items-center justify-between rounded-lg border p-4 shadow-sm">
|
||
<div className="flex items-center gap-3">
|
||
<Checkbox
|
||
checked={deletedScreens.length > 0 && selectedScreenIds.length === deletedScreens.length}
|
||
onCheckedChange={handleSelectAll}
|
||
aria-label="전체 선택"
|
||
/>
|
||
</div>
|
||
{selectedScreenIds.length > 0 && (
|
||
<Button
|
||
variant="destructive"
|
||
size="sm"
|
||
onClick={handleBulkDelete}
|
||
disabled={bulkDeleting}
|
||
className="h-9 gap-2 text-sm"
|
||
>
|
||
<Trash className="h-4 w-4" />
|
||
{bulkDeleting ? "삭제 중..." : `${selectedScreenIds.length}개`}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
|
||
{/* 카드 목록 */}
|
||
<div className="grid gap-4 sm:grid-cols-2">
|
||
{deletedScreens.map((screen) => (
|
||
<div key={screen.screenId} className="bg-card rounded-lg border p-4 shadow-sm">
|
||
{/* 헤더 */}
|
||
<div className="mb-4 flex items-start gap-3">
|
||
<Checkbox
|
||
checked={selectedScreenIds.includes(screen.screenId)}
|
||
onCheckedChange={(checked) => handleScreenCheck(screen.screenId, checked as boolean)}
|
||
className="mt-1"
|
||
aria-label={`${screen.screenName} 선택`}
|
||
/>
|
||
<div className="flex-1">
|
||
<h3 className="text-base font-semibold">{screen.screenName}</h3>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 설명 */}
|
||
{screen.description && <p className="text-muted-foreground mb-4 text-sm">{screen.description}</p>}
|
||
|
||
{/* 정보 */}
|
||
<div className="space-y-2 border-t pt-4">
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-muted-foreground">테이블</span>
|
||
<span className="font-mono font-medium">{screen.tableLabel || screen.tableName}</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-muted-foreground">삭제일</span>
|
||
<span className="font-medium">{screen.deletedDate?.toLocaleDateString()}</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-muted-foreground">삭제자</span>
|
||
<span className="font-medium">{screen.deletedBy}</span>
|
||
</div>
|
||
{screen.deleteReason && (
|
||
<div className="flex flex-col gap-1 text-sm">
|
||
<span className="text-muted-foreground">삭제 사유</span>
|
||
<span className="font-medium">{screen.deleteReason}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 액션 */}
|
||
<div className="mt-4 flex gap-2 border-t pt-4">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => handleRestore(screen)}
|
||
className="text-primary hover:text-primary/80 h-9 flex-1 gap-2 text-sm"
|
||
>
|
||
<RotateCcw className="h-4 w-4" />
|
||
복원
|
||
</Button>
|
||
<Button
|
||
variant="destructive"
|
||
size="sm"
|
||
onClick={() => handlePermanentDelete(screen)}
|
||
className="h-9 flex-1 gap-2 text-sm"
|
||
>
|
||
<Trash className="h-4 w-4" />
|
||
영구삭제
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{deletedScreens.length === 0 && (
|
||
<div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
|
||
<p className="text-muted-foreground text-sm">휴지통이 비어있습니다.</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</TabsContent>
|
||
</Tabs>
|
||
|
||
{/* 페이지네이션 */}
|
||
{totalPages > 1 && (
|
||
<div className="flex items-center justify-center space-x-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
|
||
disabled={currentPage === 1}
|
||
>
|
||
이전
|
||
</Button>
|
||
<span className="text-muted-foreground text-sm">
|
||
{currentPage} / {totalPages}
|
||
</span>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
|
||
disabled={currentPage === totalPages}
|
||
>
|
||
다음
|
||
</Button>
|
||
</div>
|
||
)}
|
||
{/* 새 화면 생성 모달 */}
|
||
<CreateScreenModal
|
||
open={isCreateOpen}
|
||
onOpenChange={setIsCreateOpen}
|
||
onCreated={(created) => {
|
||
// 목록에 즉시 반영 (첫 페이지 기준 상단 추가)
|
||
setScreens((prev) => [created, ...prev]);
|
||
}}
|
||
/>
|
||
|
||
{/* 화면 복사 모달 */}
|
||
<CopyScreenModal
|
||
isOpen={isCopyOpen}
|
||
onClose={() => setIsCopyOpen(false)}
|
||
sourceScreen={screenToCopy}
|
||
onCopySuccess={handleCopySuccess}
|
||
/>
|
||
|
||
{/* 삭제 확인 다이얼로그 */}
|
||
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>화면 삭제 확인</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
"{screenToDelete?.screenName}" 화면을 휴지통으로 이동하시겠습니까?
|
||
<br />
|
||
휴지통에서 언제든지 복원할 수 있습니다.
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="deleteReason">삭제 사유 (선택사항)</Label>
|
||
<Textarea
|
||
id="deleteReason"
|
||
placeholder="삭제 사유를 입력하세요..."
|
||
value={deleteReason}
|
||
onChange={(e) => setDeleteReason(e.target.value)}
|
||
rows={3}
|
||
/>
|
||
</div>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel onClick={handleCancelDelete}>취소</AlertDialogCancel>
|
||
<AlertDialogAction onClick={() => confirmDelete(false)} variant="destructive">
|
||
휴지통으로 이동
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
|
||
{/* 의존성 경고 다이얼로그 */}
|
||
<AlertDialog open={showDependencyWarning} onOpenChange={setShowDependencyWarning}>
|
||
<AlertDialogContent className="max-w-2xl">
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle className="text-orange-600">⚠️ 화면 삭제 경고</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
"{screenToDelete?.screenName}" 화면이 다른 화면에서 사용 중입니다.
|
||
<br />이 화면을 삭제하면 아래 화면들의 버튼 기능이 작동하지 않을 수 있습니다.
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
|
||
<div className="max-h-60 overflow-y-auto">
|
||
<div className="space-y-3">
|
||
<h4 className="font-medium">사용 중인 화면 목록:</h4>
|
||
{dependencies.map((dep, index) => (
|
||
<div key={index} className="rounded-lg border border-orange-200 bg-orange-50 p-3">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<div className="font-medium">{dep.screenName}</div>
|
||
<div className="text-muted-foreground text-sm">화면 코드: {dep.screenCode}</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="text-sm font-medium text-orange-600">
|
||
{dep.referenceType === "popup" && "팝업 버튼"}
|
||
{dep.referenceType === "navigate" && "이동 버튼"}
|
||
{dep.referenceType === "url" && "URL 링크"}
|
||
{dep.referenceType === "menu_assignment" && "메뉴 할당"}
|
||
</div>
|
||
<div className="text-muted-foreground text-xs">
|
||
{dep.referenceType === "menu_assignment" ? "메뉴" : "컴포넌트"}: {dep.componentId}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="forceDeleteReason">삭제 사유 (필수)</Label>
|
||
<Textarea
|
||
id="forceDeleteReason"
|
||
placeholder="강제 삭제 사유를 입력하세요..."
|
||
value={deleteReason}
|
||
onChange={(e) => setDeleteReason(e.target.value)}
|
||
rows={3}
|
||
/>
|
||
</div>
|
||
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel onClick={handleCancelDelete}>취소</AlertDialogCancel>
|
||
<AlertDialogAction
|
||
onClick={() => confirmDelete(true)}
|
||
variant="destructive"
|
||
disabled={!deleteReason.trim()}
|
||
>
|
||
강제 삭제
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
|
||
{/* 영구 삭제 확인 다이얼로그 */}
|
||
<AlertDialog open={permanentDeleteDialogOpen} onOpenChange={setPermanentDeleteDialogOpen}>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>영구 삭제 확인</AlertDialogTitle>
|
||
<AlertDialogDescription className="text-destructive">
|
||
⚠️ "{screenToPermanentDelete?.screenName}" 화면을 영구적으로 삭제하시겠습니까?
|
||
<br />
|
||
<strong>이 작업은 되돌릴 수 없습니다!</strong>
|
||
<br />
|
||
모든 레이아웃 정보와 관련 데이터가 완전히 삭제됩니다.
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel
|
||
onClick={() => {
|
||
setPermanentDeleteDialogOpen(false);
|
||
setScreenToPermanentDelete(null);
|
||
}}
|
||
>
|
||
취소
|
||
</AlertDialogCancel>
|
||
<AlertDialogAction onClick={confirmPermanentDelete} variant="destructive">
|
||
영구 삭제
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
|
||
{/* 휴지통 일괄삭제 확인 다이얼로그 */}
|
||
<AlertDialog open={bulkDeleteDialogOpen} onOpenChange={setBulkDeleteDialogOpen}>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>일괄 영구 삭제 확인</AlertDialogTitle>
|
||
<AlertDialogDescription className="text-destructive">
|
||
선택된 {selectedScreenIds.length}개 화면을 영구적으로 삭제하시겠습니까?
|
||
<br />
|
||
<strong>이 작업은 되돌릴 수 없습니다!</strong>
|
||
<br />
|
||
모든 레이아웃 정보와 관련 데이터가 완전히 삭제됩니다.
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel
|
||
onClick={() => {
|
||
setBulkDeleteDialogOpen(false);
|
||
}}
|
||
disabled={bulkDeleting}
|
||
>
|
||
취소
|
||
</AlertDialogCancel>
|
||
<AlertDialogAction onClick={confirmBulkDelete} variant="destructive" disabled={bulkDeleting}>
|
||
{bulkDeleting ? "삭제 중..." : `${selectedScreenIds.length}개 영구 삭제`}
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
|
||
{/* 활성 화면 일괄삭제 확인 다이얼로그 */}
|
||
<AlertDialog open={activeBulkDeleteDialogOpen} onOpenChange={setActiveBulkDeleteDialogOpen}>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>선택 화면 삭제 확인</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
선택된 {selectedActiveScreenIds.length}개 화면을 휴지통으로 이동하시겠습니까?
|
||
<br />
|
||
휴지통에서 언제든지 복원할 수 있습니다.
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="activeBulkDeleteReason">삭제 사유 (선택사항)</Label>
|
||
<Textarea
|
||
id="activeBulkDeleteReason"
|
||
placeholder="삭제 사유를 입력하세요..."
|
||
value={activeBulkDeleteReason}
|
||
onChange={(e) => setActiveBulkDeleteReason(e.target.value)}
|
||
rows={3}
|
||
/>
|
||
</div>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel
|
||
onClick={() => {
|
||
setActiveBulkDeleteDialogOpen(false);
|
||
setActiveBulkDeleteReason("");
|
||
}}
|
||
disabled={activeBulkDeleting}
|
||
>
|
||
취소
|
||
</AlertDialogCancel>
|
||
<AlertDialogAction onClick={confirmActiveBulkDelete} variant="destructive" disabled={activeBulkDeleting}>
|
||
{activeBulkDeleting ? "삭제 중..." : `${selectedActiveScreenIds.length}개 휴지통으로 이동`}
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
|
||
{/* 화면 편집 다이얼로그 */}
|
||
<Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
|
||
<DialogContent className="sm:max-w-[500px]">
|
||
<DialogHeader>
|
||
<DialogTitle>화면 정보 편집</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="space-y-4 py-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="edit-screenName">화면명 *</Label>
|
||
<Input
|
||
id="edit-screenName"
|
||
value={editFormData.screenName}
|
||
onChange={(e) => setEditFormData({ ...editFormData, screenName: e.target.value })}
|
||
placeholder="화면명을 입력하세요"
|
||
/>
|
||
</div>
|
||
|
||
{/* 데이터 소스 타입 선택 */}
|
||
<div className="space-y-2">
|
||
<Label>데이터 소스 타입</Label>
|
||
<Select
|
||
value={editFormData.dataSourceType}
|
||
onValueChange={(value: "database" | "restapi") => {
|
||
setEditFormData({
|
||
...editFormData,
|
||
dataSourceType: value,
|
||
tableName: "",
|
||
restApiConnectionId: null,
|
||
restApiEndpoint: "",
|
||
restApiJsonPath: "data",
|
||
});
|
||
}}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="database">데이터베이스</SelectItem>
|
||
<SelectItem value="restapi">REST API</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
{/* 데이터베이스 선택 (database 타입인 경우) */}
|
||
{editFormData.dataSourceType === "database" && (
|
||
<div className="space-y-2">
|
||
<Label htmlFor="edit-tableName">테이블 *</Label>
|
||
<Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
|
||
<PopoverTrigger asChild>
|
||
<Button
|
||
variant="outline"
|
||
role="combobox"
|
||
aria-expanded={tableComboboxOpen}
|
||
className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||
disabled={loadingTables}
|
||
>
|
||
{loadingTables
|
||
? "로딩 중..."
|
||
: editFormData.tableName
|
||
? tables.find((table) => table.tableName === editFormData.tableName)?.tableLabel || editFormData.tableName
|
||
: "테이블을 선택하세요"}
|
||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||
</Button>
|
||
</PopoverTrigger>
|
||
<PopoverContent
|
||
className="p-0"
|
||
style={{ width: "var(--radix-popover-trigger-width)" }}
|
||
align="start"
|
||
>
|
||
<Command>
|
||
<CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
|
||
<CommandList>
|
||
<CommandEmpty className="text-xs sm:text-sm">
|
||
테이블을 찾을 수 없습니다.
|
||
</CommandEmpty>
|
||
<CommandGroup>
|
||
{tables.map((table) => (
|
||
<CommandItem
|
||
key={table.tableName}
|
||
value={`${table.tableName} ${table.tableLabel}`}
|
||
onSelect={() => {
|
||
setEditFormData({ ...editFormData, tableName: table.tableName });
|
||
setTableComboboxOpen(false);
|
||
}}
|
||
className="text-xs sm:text-sm"
|
||
>
|
||
<Check
|
||
className={cn(
|
||
"mr-2 h-4 w-4",
|
||
editFormData.tableName === table.tableName ? "opacity-100" : "opacity-0"
|
||
)}
|
||
/>
|
||
<div className="flex flex-col">
|
||
<span className="font-medium">{table.tableLabel}</span>
|
||
<span className="text-[10px] text-gray-500">{table.tableName}</span>
|
||
</div>
|
||
</CommandItem>
|
||
))}
|
||
</CommandGroup>
|
||
</CommandList>
|
||
</Command>
|
||
</PopoverContent>
|
||
</Popover>
|
||
</div>
|
||
)}
|
||
|
||
{/* REST API 선택 (restapi 타입인 경우) */}
|
||
{editFormData.dataSourceType === "restapi" && (
|
||
<>
|
||
<div className="space-y-2">
|
||
<Label>REST API 연결 *</Label>
|
||
<Popover open={editRestApiComboboxOpen} onOpenChange={setEditRestApiComboboxOpen}>
|
||
<PopoverTrigger asChild>
|
||
<Button
|
||
variant="outline"
|
||
role="combobox"
|
||
aria-expanded={editRestApiComboboxOpen}
|
||
className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||
>
|
||
{editFormData.restApiConnectionId
|
||
? editRestApiConnections.find((c) => c.id === editFormData.restApiConnectionId)?.connection_name || "선택된 연결"
|
||
: "REST API 연결 선택"}
|
||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||
</Button>
|
||
</PopoverTrigger>
|
||
<PopoverContent
|
||
className="p-0"
|
||
style={{ width: "var(--radix-popover-trigger-width)" }}
|
||
align="start"
|
||
>
|
||
<Command>
|
||
<CommandInput placeholder="연결 검색..." className="text-xs sm:text-sm" />
|
||
<CommandList>
|
||
<CommandEmpty className="text-xs sm:text-sm">
|
||
연결을 찾을 수 없습니다.
|
||
</CommandEmpty>
|
||
<CommandGroup>
|
||
{editRestApiConnections.map((conn) => (
|
||
<CommandItem
|
||
key={conn.id}
|
||
value={conn.connection_name}
|
||
onSelect={() => {
|
||
setEditFormData({ ...editFormData, restApiConnectionId: conn.id || null });
|
||
setEditRestApiComboboxOpen(false);
|
||
}}
|
||
className="text-xs sm:text-sm"
|
||
>
|
||
<Check
|
||
className={cn(
|
||
"mr-2 h-4 w-4",
|
||
editFormData.restApiConnectionId === conn.id ? "opacity-100" : "opacity-0"
|
||
)}
|
||
/>
|
||
<div className="flex flex-col">
|
||
<span className="font-medium">{conn.connection_name}</span>
|
||
<span className="text-[10px] text-gray-500">{conn.base_url}</span>
|
||
</div>
|
||
</CommandItem>
|
||
))}
|
||
</CommandGroup>
|
||
</CommandList>
|
||
</Command>
|
||
</PopoverContent>
|
||
</Popover>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="edit-restApiEndpoint">API 엔드포인트</Label>
|
||
<Input
|
||
id="edit-restApiEndpoint"
|
||
value={editFormData.restApiEndpoint}
|
||
onChange={(e) => setEditFormData({ ...editFormData, restApiEndpoint: e.target.value })}
|
||
placeholder="예: /api/data/list"
|
||
/>
|
||
<p className="text-muted-foreground text-[10px]">
|
||
데이터를 조회할 API 엔드포인트 경로입니다
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="edit-restApiJsonPath">JSON 경로</Label>
|
||
<Input
|
||
id="edit-restApiJsonPath"
|
||
value={editFormData.restApiJsonPath}
|
||
onChange={(e) => setEditFormData({ ...editFormData, restApiJsonPath: e.target.value })}
|
||
placeholder="예: data 또는 result.items"
|
||
/>
|
||
<p className="text-muted-foreground text-[10px]">
|
||
응답 JSON에서 데이터 배열의 경로입니다 (기본: data)
|
||
</p>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="edit-description">설명</Label>
|
||
<Textarea
|
||
id="edit-description"
|
||
value={editFormData.description}
|
||
onChange={(e) => setEditFormData({ ...editFormData, description: e.target.value })}
|
||
placeholder="화면 설명을 입력하세요"
|
||
rows={3}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="edit-isActive">상태</Label>
|
||
<Select
|
||
value={editFormData.isActive}
|
||
onValueChange={(value) => setEditFormData({ ...editFormData, isActive: value })}
|
||
>
|
||
<SelectTrigger id="edit-isActive">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="Y">활성</SelectItem>
|
||
<SelectItem value="N">비활성</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setEditDialogOpen(false)}>
|
||
취소
|
||
</Button>
|
||
<Button
|
||
onClick={handleEditSave}
|
||
disabled={
|
||
!editFormData.screenName.trim() ||
|
||
(editFormData.dataSourceType === "database" && !editFormData.tableName.trim()) ||
|
||
(editFormData.dataSourceType === "restapi" && !editFormData.restApiConnectionId)
|
||
}
|
||
>
|
||
저장
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* 화면 미리보기 다이얼로그 */}
|
||
<Dialog open={previewDialogOpen} onOpenChange={setPreviewDialogOpen}>
|
||
<DialogContent className="h-[95vh] max-w-[95vw]">
|
||
<DialogHeader>
|
||
<DialogTitle>화면 미리보기 - {screenToPreview?.screenName}</DialogTitle>
|
||
</DialogHeader>
|
||
<ScreenPreviewProvider isPreviewMode={true}>
|
||
<TableOptionsProvider>
|
||
<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">
|
||
<div className="text-center">
|
||
<div className="mb-2 text-lg font-medium">레이아웃 로딩 중...</div>
|
||
<div className="text-muted-foreground text-sm">화면 정보를 불러오고 있습니다.</div>
|
||
</div>
|
||
</div>
|
||
) : previewLayout && previewLayout.components ? (
|
||
(() => {
|
||
const screenWidth = previewLayout.screenResolution?.width || 1200;
|
||
const screenHeight = previewLayout.screenResolution?.height || 800;
|
||
|
||
// 모달 내부 가용 공간 계산 (헤더, 푸터, 패딩 제외)
|
||
const modalPadding = 100; // 헤더 + 푸터 + 패딩
|
||
const availableWidth = typeof window !== "undefined" ? window.innerWidth * 0.95 - modalPadding : 1700;
|
||
const availableHeight = typeof window !== "undefined" ? window.innerHeight * 0.95 - modalPadding : 900;
|
||
|
||
// 가로/세로 비율을 모두 고려하여 작은 쪽에 맞춤 (화면이 잘리지 않도록)
|
||
const scaleX = availableWidth / screenWidth;
|
||
const scaleY = availableHeight / screenHeight;
|
||
const scale = Math.min(scaleX, scaleY, 1); // 최대 1배율 (확대 방지)
|
||
|
||
console.log("📐 미리보기 스케일 계산:", {
|
||
screenWidth,
|
||
screenHeight,
|
||
availableWidth,
|
||
availableHeight,
|
||
scaleX,
|
||
scaleY,
|
||
finalScale: scale,
|
||
});
|
||
|
||
return (
|
||
<div
|
||
className="bg-card relative mx-auto rounded-xl border shadow-lg"
|
||
style={{
|
||
width: `${screenWidth}px`,
|
||
height: `${screenHeight}px`,
|
||
transform: `scale(${scale})`,
|
||
transformOrigin: "center center",
|
||
}}
|
||
>
|
||
{/* 실제 화면과 동일한 렌더링 */}
|
||
{previewLayout.components
|
||
.filter((comp: any) => !comp.parentId) // 최상위 컴포넌트만 렌더링
|
||
.map((component: any) => {
|
||
if (!component || !component.id) return null;
|
||
|
||
// 그룹 컴포넌트인 경우 특별 처리
|
||
if (component.type === "group") {
|
||
const groupChildren = previewLayout.components.filter(
|
||
(child: any) => child.parentId === component.id,
|
||
);
|
||
|
||
return (
|
||
<div
|
||
key={component.id}
|
||
style={{
|
||
position: "absolute",
|
||
left: `${component.position?.x || 0}px`,
|
||
top: `${component.position?.y || 0}px`,
|
||
width: component.style?.width || `${component.size?.width || 200}px`,
|
||
height: component.style?.height || `${component.size?.height || 40}px`,
|
||
zIndex: component.position?.z || 1,
|
||
backgroundColor: component.backgroundColor || "rgba(59, 130, 246, 0.05)",
|
||
border: component.border || "1px solid rgba(59, 130, 246, 0.2)",
|
||
borderRadius: component.borderRadius || "12px",
|
||
padding: "20px",
|
||
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
|
||
}}
|
||
>
|
||
{/* 그룹 제목 */}
|
||
{component.title && (
|
||
<div className="mb-3 inline-block rounded-lg bg-blue-50 px-3 py-1 text-sm font-semibold text-blue-700">
|
||
{component.title}
|
||
</div>
|
||
)}
|
||
|
||
{/* 그룹 내 자식 컴포넌트들 렌더링 */}
|
||
{groupChildren.map((child: any) => (
|
||
<div
|
||
key={child.id}
|
||
style={{
|
||
position: "absolute",
|
||
left: `${child.position.x}px`,
|
||
top: `${child.position.y}px`,
|
||
width: child.style?.width || `${child.size.width}px`,
|
||
height: child.style?.height || `${child.size.height}px`,
|
||
zIndex: child.position.z || 1,
|
||
}}
|
||
>
|
||
<InteractiveScreenViewer
|
||
component={child}
|
||
allComponents={previewLayout.components}
|
||
formData={previewFormData}
|
||
onFormDataChange={(fieldName, value) => {
|
||
setPreviewFormData((prev) => ({
|
||
...prev,
|
||
[fieldName]: value,
|
||
}));
|
||
}}
|
||
screenInfo={{
|
||
id: screenToPreview!.screenId,
|
||
tableName: screenToPreview?.tableName,
|
||
}}
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 일반 컴포넌트 렌더링 - RealtimePreview 사용 (실제 화면과 동일)
|
||
return (
|
||
<RealtimePreview
|
||
key={component.id}
|
||
component={component}
|
||
isSelected={false}
|
||
isDesignMode={false}
|
||
onClick={() => {}}
|
||
screenId={screenToPreview!.screenId}
|
||
tableName={screenToPreview?.tableName}
|
||
formData={previewFormData}
|
||
onFormDataChange={(fieldName, value) => {
|
||
setPreviewFormData((prev) => ({
|
||
...prev,
|
||
[fieldName]: value,
|
||
}));
|
||
}}
|
||
>
|
||
{/* 자식 컴포넌트들 */}
|
||
{(component.type === "group" ||
|
||
component.type === "container" ||
|
||
component.type === "area") &&
|
||
previewLayout.components
|
||
.filter((child: any) => child.parentId === component.id)
|
||
.map((child: any) => {
|
||
// 자식 컴포넌트의 위치를 부모 기준 상대 좌표로 조정
|
||
const relativeChildComponent = {
|
||
...child,
|
||
position: {
|
||
x: child.position.x - component.position.x,
|
||
y: child.position.y - component.position.y,
|
||
z: child.position.z || 1,
|
||
},
|
||
};
|
||
|
||
return (
|
||
<RealtimePreview
|
||
key={child.id}
|
||
component={relativeChildComponent}
|
||
isSelected={false}
|
||
isDesignMode={false}
|
||
onClick={() => {}}
|
||
screenId={screenToPreview!.screenId}
|
||
tableName={screenToPreview?.tableName}
|
||
formData={previewFormData}
|
||
onFormDataChange={(fieldName, value) => {
|
||
setPreviewFormData((prev) => ({
|
||
...prev,
|
||
[fieldName]: value,
|
||
}));
|
||
}}
|
||
/>
|
||
);
|
||
})}
|
||
</RealtimePreview>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
})()
|
||
) : (
|
||
<div className="flex h-full items-center justify-center">
|
||
<div className="text-center">
|
||
<div className="text-muted-foreground mb-2 text-lg font-medium">레이아웃이 비어있습니다</div>
|
||
<div className="text-muted-foreground text-sm">이 화면에는 아직 컴포넌트가 배치되지 않았습니다.</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</TableOptionsProvider>
|
||
</ScreenPreviewProvider>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setPreviewDialogOpen(false)}>
|
||
닫기
|
||
</Button>
|
||
<Button onClick={() => onDesignScreen(screenToPreview!)}>
|
||
<Palette className="mr-2 h-4 w-4" />
|
||
편집 모드로 전환
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
);
|
||
}
|