1074 lines
34 KiB
TypeScript
1074 lines
34 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
|||
|
|
import {
|
|||
|
|
Dialog,
|
|||
|
|
DialogContent,
|
|||
|
|
DialogDescription,
|
|||
|
|
DialogHeader,
|
|||
|
|
DialogTitle,
|
|||
|
|
} from "@/components/ui/dialog";
|
|||
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|||
|
|
import { Button } from "@/components/ui/button";
|
|||
|
|
import { Input } from "@/components/ui/input";
|
|||
|
|
import { Label } from "@/components/ui/label";
|
|||
|
|
import { Badge } from "@/components/ui/badge";
|
|||
|
|
import { Textarea } from "@/components/ui/textarea";
|
|||
|
|
import {
|
|||
|
|
Table,
|
|||
|
|
TableBody,
|
|||
|
|
TableCell,
|
|||
|
|
TableHead,
|
|||
|
|
TableHeader,
|
|||
|
|
TableRow,
|
|||
|
|
} from "@/components/ui/table";
|
|||
|
|
import {
|
|||
|
|
Popover,
|
|||
|
|
PopoverContent,
|
|||
|
|
PopoverTrigger,
|
|||
|
|
} from "@/components/ui/popover";
|
|||
|
|
import {
|
|||
|
|
Command,
|
|||
|
|
CommandEmpty,
|
|||
|
|
CommandGroup,
|
|||
|
|
CommandInput,
|
|||
|
|
CommandItem,
|
|||
|
|
CommandList,
|
|||
|
|
} from "@/components/ui/command";
|
|||
|
|
import { toast } from "sonner";
|
|||
|
|
import { cn } from "@/lib/utils";
|
|||
|
|
import {
|
|||
|
|
Database,
|
|||
|
|
Link2,
|
|||
|
|
GitBranch,
|
|||
|
|
Columns3,
|
|||
|
|
Eye,
|
|||
|
|
Save,
|
|||
|
|
Plus,
|
|||
|
|
Pencil,
|
|||
|
|
Trash2,
|
|||
|
|
RefreshCw,
|
|||
|
|
Loader2,
|
|||
|
|
Check,
|
|||
|
|
ChevronsUpDown,
|
|||
|
|
ExternalLink,
|
|||
|
|
Table2,
|
|||
|
|
ArrowRight,
|
|||
|
|
Settings2,
|
|||
|
|
} from "lucide-react";
|
|||
|
|
import {
|
|||
|
|
getDataFlows,
|
|||
|
|
createDataFlow,
|
|||
|
|
updateDataFlow,
|
|||
|
|
deleteDataFlow,
|
|||
|
|
DataFlow,
|
|||
|
|
} from "@/lib/api/screenGroup";
|
|||
|
|
import { tableManagementApi, ColumnTypeInfo, TableInfo } from "@/lib/api/tableManagement";
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 타입 정의
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
interface FilterTableInfo {
|
|||
|
|
tableName: string;
|
|||
|
|
tableLabel?: string;
|
|||
|
|
filterColumns?: string[];
|
|||
|
|
joinColumnRefs?: Array<{
|
|||
|
|
column: string;
|
|||
|
|
refTable: string;
|
|||
|
|
refTableLabel?: string;
|
|||
|
|
refColumn: string;
|
|||
|
|
}>;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface FieldMappingInfo {
|
|||
|
|
targetField: string;
|
|||
|
|
sourceField: string;
|
|||
|
|
sourceTable?: string;
|
|||
|
|
sourceDisplayName?: string;
|
|||
|
|
componentType?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface ScreenSettingModalProps {
|
|||
|
|
isOpen: boolean;
|
|||
|
|
onClose: () => void;
|
|||
|
|
screenId: number;
|
|||
|
|
screenName: string;
|
|||
|
|
groupId?: number;
|
|||
|
|
mainTable?: string;
|
|||
|
|
mainTableLabel?: string;
|
|||
|
|
filterTables?: FilterTableInfo[];
|
|||
|
|
fieldMappings?: FieldMappingInfo[];
|
|||
|
|
componentCount?: number;
|
|||
|
|
onSaveSuccess?: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 검색 가능한 Select 컴포넌트
|
|||
|
|
interface SearchableSelectProps {
|
|||
|
|
value: string;
|
|||
|
|
onValueChange: (value: string) => void;
|
|||
|
|
options: Array<{ value: string; label: string; description?: string }>;
|
|||
|
|
placeholder?: string;
|
|||
|
|
disabled?: boolean;
|
|||
|
|
className?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function SearchableSelect({
|
|||
|
|
value,
|
|||
|
|
onValueChange,
|
|||
|
|
options,
|
|||
|
|
placeholder = "선택...",
|
|||
|
|
disabled = false,
|
|||
|
|
className,
|
|||
|
|
}: SearchableSelectProps) {
|
|||
|
|
const [open, setOpen] = useState(false);
|
|||
|
|
|
|||
|
|
const selectedOption = options.find((opt) => opt.value === value);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|||
|
|
<PopoverTrigger asChild>
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
role="combobox"
|
|||
|
|
aria-expanded={open}
|
|||
|
|
disabled={disabled}
|
|||
|
|
className={cn("h-8 w-full justify-between text-xs", className)}
|
|||
|
|
>
|
|||
|
|
{selectedOption ? (
|
|||
|
|
<span className="truncate">{selectedOption.label}</span>
|
|||
|
|
) : (
|
|||
|
|
<span className="text-muted-foreground">{placeholder}</span>
|
|||
|
|
)}
|
|||
|
|
<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" />
|
|||
|
|
<CommandList>
|
|||
|
|
<CommandEmpty className="py-2 text-center text-xs">
|
|||
|
|
결과 없음
|
|||
|
|
</CommandEmpty>
|
|||
|
|
<CommandGroup>
|
|||
|
|
{options.map((option) => (
|
|||
|
|
<CommandItem
|
|||
|
|
key={option.value}
|
|||
|
|
value={option.value}
|
|||
|
|
onSelect={() => {
|
|||
|
|
onValueChange(option.value);
|
|||
|
|
setOpen(false);
|
|||
|
|
}}
|
|||
|
|
className="text-xs"
|
|||
|
|
>
|
|||
|
|
<Check
|
|||
|
|
className={cn(
|
|||
|
|
"mr-2 h-4 w-4",
|
|||
|
|
value === option.value ? "opacity-100" : "opacity-0"
|
|||
|
|
)}
|
|||
|
|
/>
|
|||
|
|
<div className="flex flex-col">
|
|||
|
|
<span>{option.label}</span>
|
|||
|
|
{option.description && (
|
|||
|
|
<span className="text-muted-foreground text-[10px]">
|
|||
|
|
{option.description}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</CommandItem>
|
|||
|
|
))}
|
|||
|
|
</CommandGroup>
|
|||
|
|
</CommandList>
|
|||
|
|
</Command>
|
|||
|
|
</PopoverContent>
|
|||
|
|
</Popover>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 메인 모달 컴포넌트
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
export function ScreenSettingModal({
|
|||
|
|
isOpen,
|
|||
|
|
onClose,
|
|||
|
|
screenId,
|
|||
|
|
screenName,
|
|||
|
|
groupId,
|
|||
|
|
mainTable,
|
|||
|
|
mainTableLabel,
|
|||
|
|
filterTables = [],
|
|||
|
|
fieldMappings = [],
|
|||
|
|
componentCount = 0,
|
|||
|
|
onSaveSuccess,
|
|||
|
|
}: ScreenSettingModalProps) {
|
|||
|
|
const [activeTab, setActiveTab] = useState("overview");
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
const [dataFlows, setDataFlows] = useState<DataFlow[]>([]);
|
|||
|
|
|
|||
|
|
// 데이터 로드
|
|||
|
|
const loadData = useCallback(async () => {
|
|||
|
|
if (!screenId) return;
|
|||
|
|
|
|||
|
|
setLoading(true);
|
|||
|
|
try {
|
|||
|
|
// 데이터 흐름 로드
|
|||
|
|
const flowsResponse = await getDataFlows(screenId);
|
|||
|
|
if (flowsResponse.success && flowsResponse.data) {
|
|||
|
|
setDataFlows(flowsResponse.data);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("데이터 로드 실패:", error);
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
}, [screenId]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (isOpen && screenId) {
|
|||
|
|
loadData();
|
|||
|
|
}
|
|||
|
|
}, [isOpen, screenId, loadData]);
|
|||
|
|
|
|||
|
|
// 새로고침
|
|||
|
|
const handleRefresh = () => {
|
|||
|
|
loadData();
|
|||
|
|
toast.success("새로고침 완료");
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
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">
|
|||
|
|
<DialogTitle className="flex items-center gap-2 text-lg">
|
|||
|
|
<Settings2 className="h-5 w-5 text-blue-500" />
|
|||
|
|
화면 설정: {screenName}
|
|||
|
|
</DialogTitle>
|
|||
|
|
<DialogDescription className="text-sm">
|
|||
|
|
화면의 필드 매핑, 테이블 연결, 데이터 흐름을 확인하고 설정합니다.
|
|||
|
|
</DialogDescription>
|
|||
|
|
</DialogHeader>
|
|||
|
|
|
|||
|
|
<Tabs
|
|||
|
|
value={activeTab}
|
|||
|
|
onValueChange={setActiveTab}
|
|||
|
|
className="flex min-h-0 flex-1 flex-col"
|
|||
|
|
>
|
|||
|
|
<div className="flex flex-shrink-0 items-center justify-between border-b pb-2">
|
|||
|
|
<TabsList className="h-9">
|
|||
|
|
<TabsTrigger value="overview" className="gap-1 text-xs">
|
|||
|
|
<Database className="h-3.5 w-3.5" />
|
|||
|
|
화면 개요
|
|||
|
|
</TabsTrigger>
|
|||
|
|
<TabsTrigger value="field-mapping" className="gap-1 text-xs">
|
|||
|
|
<Columns3 className="h-3.5 w-3.5" />
|
|||
|
|
필드 매핑
|
|||
|
|
</TabsTrigger>
|
|||
|
|
<TabsTrigger value="data-flow" className="gap-1 text-xs">
|
|||
|
|
<GitBranch className="h-3.5 w-3.5" />
|
|||
|
|
데이터 흐름
|
|||
|
|
</TabsTrigger>
|
|||
|
|
<TabsTrigger value="preview" className="gap-1 text-xs">
|
|||
|
|
<Eye className="h-3.5 w-3.5" />
|
|||
|
|
화면 프리뷰
|
|||
|
|
</TabsTrigger>
|
|||
|
|
</TabsList>
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
size="sm"
|
|||
|
|
onClick={handleRefresh}
|
|||
|
|
className="gap-1"
|
|||
|
|
>
|
|||
|
|
<RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
|
|||
|
|
새로고침
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 탭 1: 화면 개요 */}
|
|||
|
|
<TabsContent value="overview" className="mt-0 min-h-0 flex-1 overflow-auto p-4">
|
|||
|
|
<OverviewTab
|
|||
|
|
screenId={screenId}
|
|||
|
|
screenName={screenName}
|
|||
|
|
mainTable={mainTable}
|
|||
|
|
mainTableLabel={mainTableLabel}
|
|||
|
|
filterTables={filterTables}
|
|||
|
|
fieldMappings={fieldMappings}
|
|||
|
|
componentCount={componentCount}
|
|||
|
|
dataFlows={dataFlows}
|
|||
|
|
loading={loading}
|
|||
|
|
/>
|
|||
|
|
</TabsContent>
|
|||
|
|
|
|||
|
|
{/* 탭 2: 필드 매핑 */}
|
|||
|
|
<TabsContent value="field-mapping" className="mt-0 min-h-0 flex-1 overflow-auto p-4">
|
|||
|
|
<FieldMappingTab
|
|||
|
|
screenId={screenId}
|
|||
|
|
mainTable={mainTable}
|
|||
|
|
fieldMappings={fieldMappings}
|
|||
|
|
loading={loading}
|
|||
|
|
/>
|
|||
|
|
</TabsContent>
|
|||
|
|
|
|||
|
|
{/* 탭 3: 데이터 흐름 */}
|
|||
|
|
<TabsContent value="data-flow" className="mt-0 min-h-0 flex-1 overflow-auto p-4">
|
|||
|
|
<DataFlowTab
|
|||
|
|
screenId={screenId}
|
|||
|
|
groupId={groupId}
|
|||
|
|
dataFlows={dataFlows}
|
|||
|
|
loading={loading}
|
|||
|
|
onReload={loadData}
|
|||
|
|
onSaveSuccess={onSaveSuccess}
|
|||
|
|
/>
|
|||
|
|
</TabsContent>
|
|||
|
|
|
|||
|
|
{/* 탭 4: 화면 프리뷰 */}
|
|||
|
|
<TabsContent value="preview" className="mt-0 min-h-0 flex-1 overflow-hidden p-4">
|
|||
|
|
<PreviewTab screenId={screenId} screenName={screenName} />
|
|||
|
|
</TabsContent>
|
|||
|
|
</Tabs>
|
|||
|
|
</DialogContent>
|
|||
|
|
</Dialog>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 탭 1: 화면 개요
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
interface OverviewTabProps {
|
|||
|
|
screenId: number;
|
|||
|
|
screenName: string;
|
|||
|
|
mainTable?: string;
|
|||
|
|
mainTableLabel?: string;
|
|||
|
|
filterTables: FilterTableInfo[];
|
|||
|
|
fieldMappings: FieldMappingInfo[];
|
|||
|
|
componentCount: number;
|
|||
|
|
dataFlows: DataFlow[];
|
|||
|
|
loading: boolean;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function OverviewTab({
|
|||
|
|
screenId,
|
|||
|
|
screenName,
|
|||
|
|
mainTable,
|
|||
|
|
mainTableLabel,
|
|||
|
|
filterTables,
|
|||
|
|
fieldMappings,
|
|||
|
|
componentCount,
|
|||
|
|
dataFlows,
|
|||
|
|
loading,
|
|||
|
|
}: OverviewTabProps) {
|
|||
|
|
// 통계 계산
|
|||
|
|
const stats = useMemo(() => {
|
|||
|
|
const totalJoins = filterTables.reduce(
|
|||
|
|
(sum, ft) => sum + (ft.joinColumnRefs?.length || 0),
|
|||
|
|
0
|
|||
|
|
);
|
|||
|
|
const totalFilters = filterTables.reduce(
|
|||
|
|
(sum, ft) => sum + (ft.filterColumns?.length || 0),
|
|||
|
|
0
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
tableCount: 1 + filterTables.length, // 메인 + 필터
|
|||
|
|
fieldCount: fieldMappings.length,
|
|||
|
|
joinCount: totalJoins,
|
|||
|
|
filterCount: totalFilters,
|
|||
|
|
flowCount: dataFlows.length,
|
|||
|
|
};
|
|||
|
|
}, [filterTables, fieldMappings, dataFlows]);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
{/* 기본 정보 카드 */}
|
|||
|
|
<div className="grid grid-cols-2 gap-4 md:grid-cols-5">
|
|||
|
|
<div className="rounded-lg border bg-blue-50 p-4">
|
|||
|
|
<div className="text-2xl font-bold text-blue-600">{stats.tableCount}</div>
|
|||
|
|
<div className="text-xs text-blue-700">연결된 테이블</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="rounded-lg border bg-purple-50 p-4">
|
|||
|
|
<div className="text-2xl font-bold text-purple-600">{stats.fieldCount}</div>
|
|||
|
|
<div className="text-xs text-purple-700">필드 매핑</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="rounded-lg border bg-orange-50 p-4">
|
|||
|
|
<div className="text-2xl font-bold text-orange-600">{stats.joinCount}</div>
|
|||
|
|
<div className="text-xs text-orange-700">조인 설정</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="rounded-lg border bg-green-50 p-4">
|
|||
|
|
<div className="text-2xl font-bold text-green-600">{stats.filterCount}</div>
|
|||
|
|
<div className="text-xs text-green-700">필터 컬럼</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="rounded-lg border bg-pink-50 p-4">
|
|||
|
|
<div className="text-2xl font-bold text-pink-600">{stats.flowCount}</div>
|
|||
|
|
<div className="text-xs text-pink-700">데이터 흐름</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 메인 테이블 */}
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<h3 className="flex items-center gap-2 text-sm font-semibold">
|
|||
|
|
<Database className="h-4 w-4 text-blue-500" />
|
|||
|
|
메인 테이블
|
|||
|
|
</h3>
|
|||
|
|
{mainTable ? (
|
|||
|
|
<div className="flex items-center gap-3 rounded-lg border bg-blue-50/50 p-3">
|
|||
|
|
<Table2 className="h-5 w-5 text-blue-500" />
|
|||
|
|
<div>
|
|||
|
|
<div className="font-medium">{mainTableLabel || mainTable}</div>
|
|||
|
|
{mainTableLabel && mainTable !== mainTableLabel && (
|
|||
|
|
<div className="text-xs text-muted-foreground">{mainTable}</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<Badge variant="outline" className="ml-auto bg-blue-100 text-blue-700">
|
|||
|
|
메인
|
|||
|
|
</Badge>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
|
|||
|
|
메인 테이블이 설정되지 않았습니다.
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 필터 테이블 */}
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<h3 className="flex items-center gap-2 text-sm font-semibold">
|
|||
|
|
<Link2 className="h-4 w-4 text-purple-500" />
|
|||
|
|
필터 테이블 ({filterTables.length}개)
|
|||
|
|
</h3>
|
|||
|
|
{filterTables.length > 0 ? (
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
{filterTables.map((ft, idx) => (
|
|||
|
|
<div
|
|||
|
|
key={`${ft.tableName}-${idx}`}
|
|||
|
|
className="rounded-lg border bg-purple-50/50 p-3"
|
|||
|
|
>
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<Table2 className="h-5 w-5 text-purple-500" />
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<div className="font-medium">{ft.tableLabel || ft.tableName}</div>
|
|||
|
|
{ft.tableLabel && ft.tableName !== ft.tableLabel && (
|
|||
|
|
<div className="text-xs text-muted-foreground">{ft.tableName}</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<Badge variant="outline" className="bg-purple-100 text-purple-700">
|
|||
|
|
필터
|
|||
|
|
</Badge>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 조인 정보 */}
|
|||
|
|
{ft.joinColumnRefs && ft.joinColumnRefs.length > 0 && (
|
|||
|
|
<div className="mt-2 space-y-1 border-t pt-2">
|
|||
|
|
<div className="text-xs font-medium text-orange-700">조인 설정:</div>
|
|||
|
|
{ft.joinColumnRefs.map((join, jIdx) => (
|
|||
|
|
<div
|
|||
|
|
key={jIdx}
|
|||
|
|
className="flex items-center gap-2 text-xs text-muted-foreground"
|
|||
|
|
>
|
|||
|
|
<span className="rounded bg-orange-100 px-1.5 py-0.5">
|
|||
|
|
{join.column}
|
|||
|
|
</span>
|
|||
|
|
<ArrowRight className="h-3 w-3" />
|
|||
|
|
<span className="rounded bg-green-100 px-1.5 py-0.5">
|
|||
|
|
{join.refTableLabel || join.refTable}.{join.refColumn}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 필터 컬럼 */}
|
|||
|
|
{ft.filterColumns && ft.filterColumns.length > 0 && (
|
|||
|
|
<div className="mt-2 border-t pt-2">
|
|||
|
|
<div className="text-xs font-medium text-green-700">필터 컬럼:</div>
|
|||
|
|
<div className="mt-1 flex flex-wrap gap-1">
|
|||
|
|
{ft.filterColumns.map((col, cIdx) => (
|
|||
|
|
<Badge key={cIdx} variant="outline" className="bg-green-50 text-xs">
|
|||
|
|
{col}
|
|||
|
|
</Badge>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
|
|||
|
|
필터 테이블이 없습니다.
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 데이터 흐름 요약 */}
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<h3 className="flex items-center gap-2 text-sm font-semibold">
|
|||
|
|
<GitBranch className="h-4 w-4 text-pink-500" />
|
|||
|
|
데이터 흐름 ({dataFlows.length}개)
|
|||
|
|
</h3>
|
|||
|
|
{dataFlows.length > 0 ? (
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
{dataFlows.slice(0, 3).map((flow) => (
|
|||
|
|
<div
|
|||
|
|
key={flow.id}
|
|||
|
|
className="flex items-center gap-2 rounded-lg border bg-pink-50/50 p-3 text-sm"
|
|||
|
|
>
|
|||
|
|
<Badge variant="outline" className="bg-pink-100 text-pink-700">
|
|||
|
|
{flow.flow_type}
|
|||
|
|
</Badge>
|
|||
|
|
<span className="flex-1">{flow.description || "설명 없음"}</span>
|
|||
|
|
<ArrowRight className="h-4 w-4 text-muted-foreground" />
|
|||
|
|
<span className="text-muted-foreground">화면 {flow.target_screen_id}</span>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
{dataFlows.length > 3 && (
|
|||
|
|
<div className="text-center text-xs text-muted-foreground">
|
|||
|
|
+{dataFlows.length - 3}개 더 있음
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
|
|||
|
|
설정된 데이터 흐름이 없습니다.
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 탭 2: 필드 매핑
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
interface FieldMappingTabProps {
|
|||
|
|
screenId: number;
|
|||
|
|
mainTable?: string;
|
|||
|
|
fieldMappings: FieldMappingInfo[];
|
|||
|
|
loading: boolean;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function FieldMappingTab({
|
|||
|
|
screenId,
|
|||
|
|
mainTable,
|
|||
|
|
fieldMappings,
|
|||
|
|
loading,
|
|||
|
|
}: FieldMappingTabProps) {
|
|||
|
|
// 컴포넌트 타입별 그룹핑
|
|||
|
|
const groupedMappings = useMemo(() => {
|
|||
|
|
const grouped: Record<string, FieldMappingInfo[]> = {};
|
|||
|
|
|
|||
|
|
fieldMappings.forEach((mapping) => {
|
|||
|
|
const type = mapping.componentType || "기타";
|
|||
|
|
if (!grouped[type]) {
|
|||
|
|
grouped[type] = [];
|
|||
|
|
}
|
|||
|
|
grouped[type].push(mapping);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return grouped;
|
|||
|
|
}, [fieldMappings]);
|
|||
|
|
|
|||
|
|
const componentTypes = Object.keys(groupedMappings);
|
|||
|
|
|
|||
|
|
if (loading) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex h-64 items-center justify-center">
|
|||
|
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div>
|
|||
|
|
<h3 className="text-sm font-semibold">필드-컬럼 매핑 현황</h3>
|
|||
|
|
<p className="text-xs text-muted-foreground">
|
|||
|
|
화면 필드가 어떤 테이블 컬럼과 연결되어 있는지 확인합니다.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<Badge variant="outline" className="text-xs">
|
|||
|
|
총 {fieldMappings.length}개 필드
|
|||
|
|
</Badge>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{fieldMappings.length === 0 ? (
|
|||
|
|
<div className="rounded-lg border border-dashed p-8 text-center text-muted-foreground">
|
|||
|
|
<Columns3 className="mx-auto mb-2 h-8 w-8" />
|
|||
|
|
<p className="text-sm">설정된 필드 매핑이 없습니다.</p>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="rounded-lg border">
|
|||
|
|
<Table>
|
|||
|
|
<TableHeader>
|
|||
|
|
<TableRow>
|
|||
|
|
<TableHead className="w-[50px] text-xs">#</TableHead>
|
|||
|
|
<TableHead className="text-xs">필드명</TableHead>
|
|||
|
|
<TableHead className="text-xs">테이블</TableHead>
|
|||
|
|
<TableHead className="text-xs">컬럼</TableHead>
|
|||
|
|
<TableHead className="text-xs">컴포넌트 타입</TableHead>
|
|||
|
|
</TableRow>
|
|||
|
|
</TableHeader>
|
|||
|
|
<TableBody>
|
|||
|
|
{fieldMappings.map((mapping, idx) => (
|
|||
|
|
<TableRow key={idx}>
|
|||
|
|
<TableCell className="text-xs text-muted-foreground">
|
|||
|
|
{idx + 1}
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell className="text-xs font-medium">
|
|||
|
|
{mapping.targetField}
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell className="text-xs">
|
|||
|
|
<Badge variant="outline" className="bg-blue-50 text-blue-700">
|
|||
|
|
{mapping.sourceTable || mainTable || "-"}
|
|||
|
|
</Badge>
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell className="text-xs">
|
|||
|
|
<Badge variant="outline" className="bg-green-50 text-green-700">
|
|||
|
|
{mapping.sourceField}
|
|||
|
|
</Badge>
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell className="text-xs text-muted-foreground">
|
|||
|
|
{mapping.componentType || "-"}
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
))}
|
|||
|
|
</TableBody>
|
|||
|
|
</Table>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 컴포넌트 타입별 요약 */}
|
|||
|
|
{componentTypes.length > 0 && (
|
|||
|
|
<div className="mt-4 space-y-2">
|
|||
|
|
<h4 className="text-xs font-medium text-muted-foreground">컴포넌트 타입별 분류</h4>
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
{componentTypes.map((type) => (
|
|||
|
|
<Badge
|
|||
|
|
key={type}
|
|||
|
|
variant="outline"
|
|||
|
|
className="gap-1 bg-gray-50"
|
|||
|
|
>
|
|||
|
|
{type}
|
|||
|
|
<span className="rounded-full bg-gray-200 px-1.5 text-[10px]">
|
|||
|
|
{groupedMappings[type].length}
|
|||
|
|
</span>
|
|||
|
|
</Badge>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 탭 3: 데이터 흐름
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
interface DataFlowTabProps {
|
|||
|
|
screenId: number;
|
|||
|
|
groupId?: number;
|
|||
|
|
dataFlows: DataFlow[];
|
|||
|
|
loading: boolean;
|
|||
|
|
onReload: () => void;
|
|||
|
|
onSaveSuccess?: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function DataFlowTab({
|
|||
|
|
screenId,
|
|||
|
|
groupId,
|
|||
|
|
dataFlows,
|
|||
|
|
loading,
|
|||
|
|
onReload,
|
|||
|
|
onSaveSuccess,
|
|||
|
|
}: DataFlowTabProps) {
|
|||
|
|
const [isEditing, setIsEditing] = useState(false);
|
|||
|
|
const [editItem, setEditItem] = useState<DataFlow | null>(null);
|
|||
|
|
const [formData, setFormData] = useState({
|
|||
|
|
target_screen_id: "",
|
|||
|
|
action_type: "navigate",
|
|||
|
|
data_mapping: "",
|
|||
|
|
flow_type: "forward",
|
|||
|
|
description: "",
|
|||
|
|
is_active: "Y",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 폼 초기화
|
|||
|
|
const resetForm = () => {
|
|||
|
|
setFormData({
|
|||
|
|
target_screen_id: "",
|
|||
|
|
action_type: "navigate",
|
|||
|
|
data_mapping: "",
|
|||
|
|
flow_type: "forward",
|
|||
|
|
description: "",
|
|||
|
|
is_active: "Y",
|
|||
|
|
});
|
|||
|
|
setEditItem(null);
|
|||
|
|
setIsEditing(false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 수정 모드
|
|||
|
|
const handleEdit = (item: DataFlow) => {
|
|||
|
|
setEditItem(item);
|
|||
|
|
setFormData({
|
|||
|
|
target_screen_id: String(item.target_screen_id),
|
|||
|
|
action_type: item.action_type,
|
|||
|
|
data_mapping: item.data_mapping || "",
|
|||
|
|
flow_type: item.flow_type,
|
|||
|
|
description: item.description || "",
|
|||
|
|
is_active: item.is_active,
|
|||
|
|
});
|
|||
|
|
setIsEditing(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 저장
|
|||
|
|
const handleSave = async () => {
|
|||
|
|
if (!formData.target_screen_id) {
|
|||
|
|
toast.error("대상 화면을 선택해주세요.");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const payload = {
|
|||
|
|
source_screen_id: screenId,
|
|||
|
|
target_screen_id: parseInt(formData.target_screen_id),
|
|||
|
|
action_type: formData.action_type,
|
|||
|
|
data_mapping: formData.data_mapping || null,
|
|||
|
|
flow_type: formData.flow_type,
|
|||
|
|
description: formData.description || null,
|
|||
|
|
is_active: formData.is_active,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
let response;
|
|||
|
|
if (editItem) {
|
|||
|
|
response = await updateDataFlow(editItem.id, payload);
|
|||
|
|
} else {
|
|||
|
|
response = await createDataFlow(payload);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (response.success) {
|
|||
|
|
toast.success(editItem ? "데이터 흐름이 수정되었습니다." : "데이터 흐름이 추가되었습니다.");
|
|||
|
|
resetForm();
|
|||
|
|
onReload();
|
|||
|
|
onSaveSuccess?.();
|
|||
|
|
} else {
|
|||
|
|
toast.error(response.message || "저장에 실패했습니다.");
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("저장 오류:", error);
|
|||
|
|
toast.error("저장 중 오류가 발생했습니다.");
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 삭제
|
|||
|
|
const handleDelete = async (id: number) => {
|
|||
|
|
if (!confirm("정말로 삭제하시겠습니까?")) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await deleteDataFlow(id);
|
|||
|
|
if (response.success) {
|
|||
|
|
toast.success("데이터 흐름이 삭제되었습니다.");
|
|||
|
|
onReload();
|
|||
|
|
onSaveSuccess?.();
|
|||
|
|
} else {
|
|||
|
|
toast.error(response.message || "삭제에 실패했습니다.");
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("삭제 오류:", error);
|
|||
|
|
toast.error("삭제 중 오류가 발생했습니다.");
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (loading) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex h-64 items-center justify-center">
|
|||
|
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{/* 입력 폼 */}
|
|||
|
|
<div className="space-y-3 rounded-lg bg-muted/50 p-4">
|
|||
|
|
<div className="text-sm font-medium">
|
|||
|
|
{isEditing ? "데이터 흐름 수정" : "새 데이터 흐름 추가"}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
|
|||
|
|
<div>
|
|||
|
|
<Label className="text-xs">대상 화면 ID *</Label>
|
|||
|
|
<Input
|
|||
|
|
type="number"
|
|||
|
|
value={formData.target_screen_id}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setFormData({ ...formData, target_screen_id: e.target.value })
|
|||
|
|
}
|
|||
|
|
placeholder="화면 ID"
|
|||
|
|
className="h-8 text-xs"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<Label className="text-xs">액션 타입</Label>
|
|||
|
|
<SearchableSelect
|
|||
|
|
value={formData.action_type}
|
|||
|
|
onValueChange={(v) => setFormData({ ...formData, action_type: v })}
|
|||
|
|
options={[
|
|||
|
|
{ value: "navigate", label: "화면 이동" },
|
|||
|
|
{ value: "modal", label: "모달 열기" },
|
|||
|
|
{ value: "callback", label: "콜백" },
|
|||
|
|
{ value: "refresh", label: "새로고침" },
|
|||
|
|
]}
|
|||
|
|
placeholder="액션 선택"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<Label className="text-xs">흐름 타입</Label>
|
|||
|
|
<SearchableSelect
|
|||
|
|
value={formData.flow_type}
|
|||
|
|
onValueChange={(v) => setFormData({ ...formData, flow_type: v })}
|
|||
|
|
options={[
|
|||
|
|
{ value: "forward", label: "전달 (Forward)" },
|
|||
|
|
{ value: "return", label: "반환 (Return)" },
|
|||
|
|
{ value: "broadcast", label: "브로드캐스트" },
|
|||
|
|
]}
|
|||
|
|
placeholder="흐름 선택"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<Label className="text-xs">설명</Label>
|
|||
|
|
<Textarea
|
|||
|
|
value={formData.description}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setFormData({ ...formData, description: e.target.value })
|
|||
|
|
}
|
|||
|
|
placeholder="데이터 흐름에 대한 설명"
|
|||
|
|
className="h-16 resize-none text-xs"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex justify-end gap-2">
|
|||
|
|
{isEditing && (
|
|||
|
|
<Button variant="outline" size="sm" onClick={resetForm}>
|
|||
|
|
취소
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
<Button size="sm" onClick={handleSave} className="gap-1">
|
|||
|
|
<Save className="h-4 w-4" />
|
|||
|
|
{isEditing ? "수정" : "추가"}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 목록 */}
|
|||
|
|
<div className="rounded-lg border">
|
|||
|
|
<Table>
|
|||
|
|
<TableHeader>
|
|||
|
|
<TableRow>
|
|||
|
|
<TableHead className="text-xs">대상 화면</TableHead>
|
|||
|
|
<TableHead className="text-xs">액션</TableHead>
|
|||
|
|
<TableHead className="text-xs">흐름 타입</TableHead>
|
|||
|
|
<TableHead className="text-xs">설명</TableHead>
|
|||
|
|
<TableHead className="w-[100px] text-xs">작업</TableHead>
|
|||
|
|
</TableRow>
|
|||
|
|
</TableHeader>
|
|||
|
|
<TableBody>
|
|||
|
|
{dataFlows.length === 0 ? (
|
|||
|
|
<TableRow>
|
|||
|
|
<TableCell
|
|||
|
|
colSpan={5}
|
|||
|
|
className="py-8 text-center text-sm text-muted-foreground"
|
|||
|
|
>
|
|||
|
|
등록된 데이터 흐름이 없습니다.
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
) : (
|
|||
|
|
dataFlows.map((flow) => (
|
|||
|
|
<TableRow key={flow.id}>
|
|||
|
|
<TableCell className="text-xs font-medium">
|
|||
|
|
화면 {flow.target_screen_id}
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell className="text-xs">
|
|||
|
|
<Badge variant="outline" className="text-xs">
|
|||
|
|
{flow.action_type}
|
|||
|
|
</Badge>
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell className="text-xs">
|
|||
|
|
<Badge
|
|||
|
|
variant="outline"
|
|||
|
|
className={cn(
|
|||
|
|
"text-xs",
|
|||
|
|
flow.flow_type === "forward" && "bg-blue-50 text-blue-700",
|
|||
|
|
flow.flow_type === "return" && "bg-green-50 text-green-700",
|
|||
|
|
flow.flow_type === "broadcast" && "bg-purple-50 text-purple-700"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{flow.flow_type}
|
|||
|
|
</Badge>
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell className="text-xs text-muted-foreground">
|
|||
|
|
{flow.description || "-"}
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell>
|
|||
|
|
<div className="flex gap-1">
|
|||
|
|
<Button
|
|||
|
|
variant="ghost"
|
|||
|
|
size="icon"
|
|||
|
|
className="h-7 w-7"
|
|||
|
|
onClick={() => handleEdit(flow)}
|
|||
|
|
>
|
|||
|
|
<Pencil className="h-3 w-3" />
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
variant="ghost"
|
|||
|
|
size="icon"
|
|||
|
|
className="h-7 w-7 text-destructive"
|
|||
|
|
onClick={() => handleDelete(flow.id)}
|
|||
|
|
>
|
|||
|
|
<Trash2 className="h-3 w-3" />
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
))
|
|||
|
|
)}
|
|||
|
|
</TableBody>
|
|||
|
|
</Table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 탭 4: 화면 프리뷰 (iframe)
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
interface PreviewTabProps {
|
|||
|
|
screenId: number;
|
|||
|
|
screenName: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function PreviewTab({ screenId, screenName }: PreviewTabProps) {
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [error, setError] = useState<string | null>(null);
|
|||
|
|
|
|||
|
|
// 화면 URL 생성
|
|||
|
|
const previewUrl = useMemo(() => {
|
|||
|
|
// 현재 호스트 기반으로 URL 생성
|
|||
|
|
if (typeof window !== "undefined") {
|
|||
|
|
const baseUrl = window.location.origin;
|
|||
|
|
return `${baseUrl}/screens/${screenId}`;
|
|||
|
|
}
|
|||
|
|
return `/screens/${screenId}`;
|
|||
|
|
}, [screenId]);
|
|||
|
|
|
|||
|
|
const handleIframeLoad = () => {
|
|||
|
|
setLoading(false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleIframeError = () => {
|
|||
|
|
setLoading(false);
|
|||
|
|
setError("화면을 불러오는데 실패했습니다.");
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const openInNewTab = () => {
|
|||
|
|
window.open(previewUrl, "_blank");
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="flex h-full flex-col space-y-3">
|
|||
|
|
{/* 상단 툴바 */}
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<Eye className="h-4 w-4 text-muted-foreground" />
|
|||
|
|
<span className="text-sm font-medium">화면 프리뷰</span>
|
|||
|
|
<Badge variant="outline" className="text-xs">
|
|||
|
|
Screen ID: {screenId}
|
|||
|
|
</Badge>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
size="sm"
|
|||
|
|
onClick={() => {
|
|||
|
|
setLoading(true);
|
|||
|
|
const iframe = document.getElementById("screen-preview-iframe") as HTMLIFrameElement;
|
|||
|
|
if (iframe) {
|
|||
|
|
iframe.src = iframe.src;
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
className="gap-1"
|
|||
|
|
>
|
|||
|
|
<RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
|
|||
|
|
새로고침
|
|||
|
|
</Button>
|
|||
|
|
<Button variant="outline" size="sm" onClick={openInNewTab} className="gap-1">
|
|||
|
|
<ExternalLink className="h-4 w-4" />
|
|||
|
|
새 탭에서 열기
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* iframe 영역 */}
|
|||
|
|
<div className="relative flex-1 overflow-hidden rounded-lg border bg-gray-50">
|
|||
|
|
{loading && (
|
|||
|
|
<div className="absolute inset-0 z-10 flex items-center justify-center bg-white/80">
|
|||
|
|
<div className="text-center">
|
|||
|
|
<Loader2 className="mx-auto h-8 w-8 animate-spin text-primary" />
|
|||
|
|
<p className="mt-2 text-sm text-muted-foreground">화면 로딩 중...</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{error ? (
|
|||
|
|
<div className="flex h-full items-center justify-center">
|
|||
|
|
<div className="text-center">
|
|||
|
|
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
|
|||
|
|
<span className="text-2xl">⚠️</span>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm text-destructive">{error}</p>
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
size="sm"
|
|||
|
|
className="mt-4"
|
|||
|
|
onClick={() => {
|
|||
|
|
setError(null);
|
|||
|
|
setLoading(true);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
다시 시도
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<iframe
|
|||
|
|
id="screen-preview-iframe"
|
|||
|
|
src={previewUrl}
|
|||
|
|
className="h-full w-full border-0"
|
|||
|
|
onLoad={handleIframeLoad}
|
|||
|
|
onError={handleIframeError}
|
|||
|
|
title={`화면 프리뷰: ${screenName}`}
|
|||
|
|
sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 안내 메시지 */}
|
|||
|
|
<div className="text-xs text-muted-foreground">
|
|||
|
|
* 프리뷰는 실제 화면을 iframe으로 로드합니다. 로그인/권한에 따라 일부 기능이 제한될 수 있습니다.
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default ScreenSettingModal;
|
|||
|
|
|