jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

화면 바로 들어가지게 함

Browse Source
This commit is contained in:
kjs
2025-10-28 15:39:22 +09:00
parent 53a0fa5c6a
commit 775fbf8903
9 changed files with 1253 additions and 1037 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
frontend/components/screen/widgets/FlowWidget.tsx
View File

@@ -37,6 +37,7 @@ import {
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
interface FlowWidgetProps {
component: FlowComponent;
@@ -53,6 +54,8 @@ export function FlowWidget({
flowRefreshKey,
onFlowRefresh,
}: FlowWidgetProps) {
const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
// 🆕 전역 상태 관리
const setSelectedStep = useFlowStepStore((state) => state.setSelectedStep);
const resetFlow = useFlowStepStore((state) => state.resetFlow);
@@ -312,6 +315,57 @@ export function FlowWidget({
setLoading(true);
setError(null);
// 프리뷰 모드에서는 샘플 데이터만 표시
if (isPreviewMode) {
console.log("🔒 프리뷰 모드: 플로우 데이터 로드 차단 - 샘플 데이터 표시");
setFlowData({
id: flowId || 0,
flowName: flowName || "샘플 플로우",
description: "프리뷰 모드 샘플",
isActive: true,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
} as FlowDefinition);
const sampleSteps: FlowStep[] = [
{
id: 1,
flowId: flowId || 0,
stepName: "시작 단계",
stepOrder: 1,
stepType: "start",
stepConfig: {},
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
},
{
id: 2,
flowId: flowId || 0,
stepName: "진행 중",
stepOrder: 2,
stepType: "process",
stepConfig: {},
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
},
{
id: 3,
flowId: flowId || 0,
stepName: "완료",
stepOrder: 3,
stepType: "end",
stepConfig: {},
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
},
];
setSteps(sampleSteps);
setStepCounts({ 1: 5, 2: 3, 3: 2 });
setConnections([]);
setLoading(false);
return;
}
// 플로우 정보 조회
const flowResponse = await getFlowById(flowId!);
if (!flowResponse.success || !flowResponse.data) {
@@ -413,6 +467,11 @@ export function FlowWidget({
// 🆕 스텝 클릭 핸들러 (전역 상태 업데이트 추가)
const handleStepClick = async (stepId: number, stepName: string) => {
// 프리뷰 모드에서는 스텝 클릭 차단
if (isPreviewMode) {
return;
}
// 외부 콜백 실행
if (onStepClick) {
onStepClick(stepId, stepName);
@@ -485,6 +544,11 @@ export function FlowWidget({
// 체크박스 토글
const toggleRowSelection = (rowIndex: number) => {
// 프리뷰 모드에서는 행 선택 차단
if (isPreviewMode) {
return;
}
const newSelected = new Set(selectedRows);
if (newSelected.has(rowIndex)) {
newSelected.delete(rowIndex);
@@ -675,7 +739,13 @@ export function FlowWidget({
<Button
variant="outline"
size="sm"
onClick={() => setIsFilterSettingOpen(true)}
onClick={() => {
if (isPreviewMode) {
return;
}
setIsFilterSettingOpen(true);
}}
disabled={isPreviewMode}
className="h-8 shrink-0 text-xs sm:text-sm"
>
<Filter className="mr-2 h-3 w-3 sm:h-4 sm:w-4" />
@@ -887,17 +957,29 @@ export function FlowWidget({
<PaginationContent>
<PaginationItem>
<PaginationPrevious
onClick={() => setStepDataPage((p) => Math.max(1, p - 1))}
className={stepDataPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
onClick={() => {
if (isPreviewMode) {
return;
}
setStepDataPage((p) => Math.max(1, p - 1));
}}
className={
stepDataPage === 1 || isPreviewMode ? "pointer-events-none opacity-50" : "cursor-pointer"
}
/>
</PaginationItem>
{totalStepDataPages <= 7 ? (
Array.from({ length: totalStepDataPages }, (_, i) => i + 1).map((page) => (
<PaginationItem key={page}>
<PaginationLink
onClick={() => setStepDataPage(page)}
onClick={() => {
if (isPreviewMode) {
return;
}
setStepDataPage(page);
}}
isActive={stepDataPage === page}
className="cursor-pointer"
className={isPreviewMode ? "pointer-events-none opacity-50" : "cursor-pointer"}
>
{page}
</PaginationLink>
@@ -922,9 +1004,14 @@ export function FlowWidget({
)}
<PaginationItem>
<PaginationLink
onClick={() => setStepDataPage(page)}
onClick={() => {
if (isPreviewMode) {
return;
}
setStepDataPage(page);
}}
isActive={stepDataPage === page}
className="cursor-pointer"
className={isPreviewMode ? "pointer-events-none opacity-50" : "cursor-pointer"}
>
{page}
</PaginationLink>
@@ -935,9 +1022,16 @@ export function FlowWidget({
)}
<PaginationItem>
<PaginationNext
onClick={() => setStepDataPage((p) => Math.min(totalStepDataPages, p + 1))}
onClick={() => {
if (isPreviewMode) {
return;
}
setStepDataPage((p) => Math.min(totalStepDataPages, p + 1));
}}
className={
stepDataPage === totalStepDataPages ? "pointer-events-none opacity-50" : "cursor-pointer"
stepDataPage === totalStepDataPages || isPreviewMode
? "pointer-events-none opacity-50"
: "cursor-pointer"
}
/>
</PaginationItem>