74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { FlowWidget } from "@/components/screen/widgets/FlowWidget";
|
|
import { FlowComponent } from "@/types/screen-management";
|
|
|
|
/**
|
|
* 플로우 위젯 테스트 페이지
|
|
* 문서 승인 플로우 (ID: 8)를 테스트합니다
|
|
*/
|
|
export default function TestFlowPage() {
|
|
// 문서 승인 플로우
|
|
const documentFlow: FlowComponent = {
|
|
id: "test-flow-1",
|
|
type: "flow",
|
|
flowId: 8, // 문서 승인 플로우
|
|
flowName: "문서 승인 플로우",
|
|
showStepCount: true,
|
|
allowDataMove: true,
|
|
displayMode: "horizontal",
|
|
position: { x: 0, y: 0 },
|
|
size: { width: 1200, height: 600 },
|
|
style: {},
|
|
};
|
|
|
|
// 작업 요청 워크플로우
|
|
const workRequestFlow: FlowComponent = {
|
|
id: "test-flow-2",
|
|
type: "flow",
|
|
flowId: 12, // 작업 요청 워크플로우
|
|
flowName: "작업 요청 워크플로우",
|
|
showStepCount: true,
|
|
allowDataMove: true,
|
|
displayMode: "horizontal",
|
|
position: { x: 0, y: 0 },
|
|
size: { width: 1200, height: 600 },
|
|
style: {},
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 p-8">
|
|
<div className="mx-auto max-w-7xl space-y-8">
|
|
{/* 헤더 */}
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900">플로우 위젯 테스트</h1>
|
|
<p className="mt-2 text-gray-600">두 가지 플로우를 테스트할 수 있습니다</p>
|
|
</div>
|
|
|
|
{/* 문서 승인 플로우 */}
|
|
<div className="rounded-lg bg-white p-6 shadow-lg">
|
|
<h2 className="mb-4 text-xl font-semibold text-gray-800">문서 승인 플로우 (4단계)</h2>
|
|
<FlowWidget component={documentFlow} />
|
|
</div>
|
|
|
|
{/* 작업 요청 워크플로우 */}
|
|
<div className="rounded-lg bg-white p-6 shadow-lg">
|
|
<h2 className="mb-4 text-xl font-semibold text-gray-800">작업 요청 워크플로우 (6단계)</h2>
|
|
<FlowWidget component={workRequestFlow} />
|
|
</div>
|
|
|
|
{/* 사용 안내 */}
|
|
<div className="mt-8 rounded-lg border border-blue-200 bg-blue-50 p-6">
|
|
<h3 className="mb-2 text-lg font-semibold text-blue-900">사용 방법</h3>
|
|
<ul className="list-inside list-disc space-y-1 text-blue-800">
|
|
<li>각 플로우 단계를 클릭하면 해당 단계의 데이터 목록이 표시됩니다</li>
|
|
<li>데이터 행을 체크하고 "다음 단계로 이동" 버튼을 클릭하면 데이터가 이동됩니다</li>
|
|
<li>이동 후 자동으로 데이터 목록이 새로고침됩니다</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|