123 lines
4.8 KiB
TypeScript
123 lines
4.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { Plus, Grid3X3, Palette, Settings, FileText } from "lucide-react";
|
|
import ScreenList from "@/components/screen/ScreenList";
|
|
import ScreenDesigner from "@/components/screen/ScreenDesigner";
|
|
import TemplateManager from "@/components/screen/TemplateManager";
|
|
import { ScreenDefinition } from "@/types/screen";
|
|
|
|
export default function ScreenManagementPage() {
|
|
const [selectedScreen, setSelectedScreen] = useState<ScreenDefinition | null>(null);
|
|
const [activeTab, setActiveTab] = useState("screens");
|
|
|
|
return (
|
|
<div className="container mx-auto space-y-6 p-6">
|
|
{/* 페이지 헤더 */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900">화면관리 시스템</h1>
|
|
<p className="mt-2 text-gray-600">드래그앤드롭으로 화면을 설계하고 관리하세요</p>
|
|
</div>
|
|
<Button className="bg-blue-600 hover:bg-blue-700">
|
|
<Plus className="mr-2 h-4 w-4" />새 화면 생성
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 메인 컨텐츠 */}
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
|
|
<TabsList className="grid w-full grid-cols-4">
|
|
<TabsTrigger value="screens" className="flex items-center gap-2">
|
|
<Grid3X3 className="h-4 w-4" />
|
|
화면 관리
|
|
</TabsTrigger>
|
|
<TabsTrigger value="designer" className="flex items-center gap-2">
|
|
<Palette className="h-4 w-4" />
|
|
화면 설계기
|
|
</TabsTrigger>
|
|
<TabsTrigger value="templates" className="flex items-center gap-2">
|
|
<FileText className="h-4 w-4" />
|
|
템플릿 관리
|
|
</TabsTrigger>
|
|
<TabsTrigger value="settings" className="flex items-center gap-2">
|
|
<Settings className="h-4 w-4" />
|
|
설정
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* 화면 관리 탭 */}
|
|
<TabsContent value="screens" className="space-y-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>화면 목록</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ScreenList onScreenSelect={setSelectedScreen} selectedScreen={selectedScreen} />
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* 화면 설계기 탭 */}
|
|
<TabsContent value="designer" className="space-y-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>화면 설계기</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{selectedScreen ? (
|
|
<ScreenDesigner screen={selectedScreen} />
|
|
) : (
|
|
<div className="py-12 text-center text-gray-500">
|
|
<Palette className="mx-auto mb-4 h-16 w-16 text-gray-300" />
|
|
<p>설계할 화면을 선택해주세요</p>
|
|
<p className="text-sm">화면 관리 탭에서 화면을 선택한 후 설계기를 사용하세요</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* 템플릿 관리 탭 */}
|
|
<TabsContent value="templates" className="space-y-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>템플릿 관리</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<TemplateManager />
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* 설정 탭 */}
|
|
<TabsContent value="settings" className="space-y-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>화면관리 시스템 설정</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h3 className="mb-2 text-lg font-medium">테이블 타입 연계</h3>
|
|
<p className="text-sm text-gray-600">테이블 타입관리 시스템과의 연계 설정을 관리합니다.</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="mb-2 text-lg font-medium">권한 관리</h3>
|
|
<p className="text-sm text-gray-600">회사별 화면 접근 권한을 설정합니다.</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="mb-2 text-lg font-medium">기본 설정</h3>
|
|
<p className="text-sm text-gray-600">그리드 시스템, 기본 컴포넌트 등의 기본 설정을 관리합니다.</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
}
|