2215 lines
88 KiB
JavaScript
2215 lines
88 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import {
|
|
ArrowDown,
|
|
ArrowRight,
|
|
ArrowUp,
|
|
Building2,
|
|
ClipboardList,
|
|
DraftingCompass,
|
|
Edit3,
|
|
Layers3,
|
|
Map,
|
|
Mountain,
|
|
Plus,
|
|
Route,
|
|
Save,
|
|
ScanLine,
|
|
Trash2,
|
|
Waypoints,
|
|
X
|
|
} from 'lucide-react';
|
|
|
|
const cheonjiinFlow = [
|
|
{
|
|
id: '1-1',
|
|
title: '범위입력',
|
|
icon: ScanLine,
|
|
feature: '직접선택, 도면 불러오기',
|
|
note: '사업 대상지와 원본 도면 범위를 먼저 확정합니다.'
|
|
},
|
|
{
|
|
id: '1-2',
|
|
title: '선택/검토',
|
|
icon: Layers3,
|
|
feature: '등고선, 레이어 선택',
|
|
note: '해석에 필요한 도면 요소와 레이어만 정리합니다.'
|
|
},
|
|
{
|
|
id: '1-3',
|
|
title: '현장조사',
|
|
icon: Mountain,
|
|
feature: '지표, 지층, 상세측량\n파일 불러오기\n지형, 지층 보정 모델',
|
|
note: '실측 자료를 반영해 지형과 지층 정보를 보정합니다.'
|
|
},
|
|
{
|
|
id: '1-4',
|
|
title: '구조물편집',
|
|
icon: Building2,
|
|
feature: '도로, 건물, 하천, 지형\n수치지형도 v2 다운로드 시 적용\n구조물 포함 모델',
|
|
note: '구조물과 지형 요소를 편집해 통합 모델을 만듭니다.'
|
|
},
|
|
{
|
|
id: '1-5',
|
|
title: '유역면적',
|
|
icon: Map,
|
|
feature: '유역 구분 및 면적 산정',
|
|
note: '정리된 공간 정보를 바탕으로 유역면적 결과를 산정합니다.'
|
|
}
|
|
];
|
|
|
|
const wayPrimalFlow = [
|
|
{
|
|
id: 'wp-1',
|
|
title: '설계조건',
|
|
icon: ClipboardList,
|
|
feature: '전용조건 입력(도로, 포장 등)\n정온시설 위치 입력',
|
|
note: '도로와 주변 조건을 설계 입력값으로 등록합니다.'
|
|
},
|
|
{
|
|
id: 'wp-2',
|
|
title: '노폭계획',
|
|
icon: Route,
|
|
feature: '선형계획, 노즈, 편경사,\n구조물, 시설계획 입력',
|
|
note: '노선의 폭, 선형, 구조물 조건을 계획합니다.'
|
|
},
|
|
{
|
|
id: 'wp-3',
|
|
title: '기본계획',
|
|
icon: Waypoints,
|
|
feature: '길어깨편경사, 비탈면계획,\n부체도로, 횡단등도',
|
|
note: '기본 단면과 주변 계획 조건을 정리합니다.'
|
|
},
|
|
{
|
|
id: 'wp-4',
|
|
title: '기본설계',
|
|
icon: DraftingCompass,
|
|
feature: '배수공, 포장공, 부대공 자동설치\n횡단면도 생성, 도공계산서 내보내기\n평면도, 횡단면도, 종평면도, 기본설계모델',
|
|
note: '자동 설계 성과물과 기본설계 모델을 생성합니다.'
|
|
}
|
|
];
|
|
|
|
const cheonjiinDeliverables = [
|
|
'지형도',
|
|
'수치지형도',
|
|
'정사영상',
|
|
'지형,지층 보정 모델'
|
|
];
|
|
|
|
const detailSteps = [
|
|
{
|
|
id: '1-1',
|
|
title: '범위 입력',
|
|
feature: '직접 선택 · 도면 불러오기',
|
|
detail: '대상 유역 영역의 좌표 체계와 경계를 지정하고 원천 도면 파일을 등록합니다.',
|
|
output: '활성 작업 영역 레이어'
|
|
},
|
|
{
|
|
id: '1-2',
|
|
title: '선택·검토',
|
|
feature: '등고선 · 적용 레이어 선택',
|
|
detail: '설계 연산에 사용할 등고선 데이터와 속성별 물리 레이어를 선별합니다.',
|
|
output: '정제된 등고선 추출본'
|
|
},
|
|
{
|
|
id: '1-3',
|
|
title: '현장조사',
|
|
feature: '지표 · 지층 · 상세측량 자료 입력',
|
|
detail: 'GPS 고도 측량치와 시추 분석 데이터를 입력해 지형과 지층을 보정합니다.',
|
|
output: '3차원 지표·지층 보정 모델'
|
|
},
|
|
{
|
|
id: '1-4',
|
|
title: '구조물 편집',
|
|
feature: '도로 · 건물 · 하천 · 지형 편집',
|
|
detail: '도로 중심선, 건물 폴리곤, 하천 경계 등 구조물 정보를 지형면에 정합합니다.',
|
|
output: '구조물 포함 통합 3D GIS 모델'
|
|
},
|
|
{
|
|
id: '1-5',
|
|
title: '유역면적 산정',
|
|
feature: '유역 구분 · 면적 산정 · 결과 검토',
|
|
detail: '정립된 지형과 구조물 모델을 분석해 유역 경계를 구분하고 면적을 계산합니다.',
|
|
output: '유역면적 최종 산정 결과'
|
|
}
|
|
];
|
|
|
|
const reviewGates = [
|
|
{
|
|
key: 'gate1',
|
|
stepId: '1-1',
|
|
question: '범위 또는 원본 도면 변경?',
|
|
yes: '예: 1-1 재진입',
|
|
no: '아니오: 다음 검토'
|
|
},
|
|
{
|
|
key: 'gate2',
|
|
stepId: '1-2',
|
|
question: '등고선 또는 적용 레이어 변경?',
|
|
yes: '예: 1-2 재진입',
|
|
no: '아니오: 다음 검토'
|
|
},
|
|
{
|
|
key: 'gate3',
|
|
stepId: '1-3',
|
|
question: '지표·지층 또는 상세측량 정보 변경?',
|
|
yes: '예: 1-3 재진입',
|
|
no: '아니오: 다음 검토'
|
|
},
|
|
{
|
|
key: 'gate4',
|
|
stepId: '1-4',
|
|
question: '도로·건물·하천 또는 지형 정보 변경?',
|
|
yes: '예: 1-4 재진입',
|
|
no: '아니오: 변경사항 없음'
|
|
}
|
|
];
|
|
|
|
const initialGates = {
|
|
gate1: 'no',
|
|
gate2: 'no',
|
|
gate3: 'no',
|
|
gate4: 'no'
|
|
};
|
|
|
|
const channelName = 'program-flow-state';
|
|
const contentStorageKey = 'program-flow-content';
|
|
const programStateStorageKey = 'program-flow-gates';
|
|
const serverStateEndpoint = '/api/state';
|
|
const disabledFlowStep = '__disabled__';
|
|
|
|
const defaultContent = {
|
|
cheonjiin: {
|
|
name: '천지인',
|
|
description: '공간정보 입력·검토·보정·유역면적 산정',
|
|
steps: cheonjiinFlow.map(({ title, feature, note }) => ({ title, feature, note })),
|
|
deliverables: cheonjiinDeliverables,
|
|
format: 'glb',
|
|
predecessors: [],
|
|
successors: []
|
|
},
|
|
wayPrimal: {
|
|
name: 'WayPrimal',
|
|
description: '설계조건 입력부터 기본설계 성과물 생성',
|
|
steps: wayPrimalFlow.map(({ title, feature, note }) => ({ title, feature, note })),
|
|
format: '',
|
|
deliverables: ['기본설계 모델'],
|
|
predecessors: [],
|
|
successors: [],
|
|
linkLabel: '천지인 산출 모델을 WayPrimal 설계 입력으로 연계'
|
|
},
|
|
extraPrograms: []
|
|
};
|
|
|
|
function normalizeStoredContent(parsed) {
|
|
if (!parsed) return defaultContent;
|
|
return {
|
|
cheonjiin: {
|
|
...defaultContent.cheonjiin,
|
|
...(parsed.cheonjiin ?? {}),
|
|
predecessors: parsed.cheonjiin?.predecessors ?? [],
|
|
successors: parsed.cheonjiin?.successors ?? [],
|
|
format:
|
|
!parsed.cheonjiin?.format || parsed.cheonjiin.format === '예: DXF, SHP, GeoTIFF, 수치지형도 v2 등'
|
|
? defaultContent.cheonjiin.format
|
|
: parsed.cheonjiin.format
|
|
},
|
|
wayPrimal: {
|
|
...defaultContent.wayPrimal,
|
|
...(parsed.wayPrimal ?? {}),
|
|
predecessors: parsed.wayPrimal?.predecessors ?? [],
|
|
successors: parsed.wayPrimal?.successors ?? [],
|
|
format:
|
|
parsed.wayPrimal?.format === '예: DWG, LandXML, XLSX, 도공계산서, 기본설계 모델 등'
|
|
? defaultContent.wayPrimal.format
|
|
: (parsed.wayPrimal?.format ?? defaultContent.wayPrimal.format)
|
|
},
|
|
extraPrograms: (parsed.extraPrograms ?? []).map((program, index, programs) => ({
|
|
...program,
|
|
predecessors: program.predecessors ?? [],
|
|
successors: program.successors ?? [],
|
|
linkLabel: program.linkLabel ?? `이전 프로그램 산출물을 ${program.name} 입력으로 연계`
|
|
}))
|
|
};
|
|
}
|
|
|
|
function readStoredContent() {
|
|
try {
|
|
const stored = window.localStorage.getItem(contentStorageKey);
|
|
if (!stored) return defaultContent;
|
|
return normalizeStoredContent(JSON.parse(stored));
|
|
} catch {
|
|
return defaultContent;
|
|
}
|
|
}
|
|
|
|
function mergeStepContent(flow, storedSteps = []) {
|
|
const mergedBaseSteps = flow.map((step, index) => ({
|
|
...step,
|
|
...(storedSteps[index] ?? {})
|
|
}));
|
|
const addedSteps = storedSteps.slice(flow.length).map((step, index) => ({
|
|
...step,
|
|
id: step.id ?? `added-step-${flow.length + index + 1}`,
|
|
icon: step.icon ?? pickStepIcon(step)
|
|
}));
|
|
return [...mergedBaseSteps, ...addedSteps];
|
|
}
|
|
|
|
function pickStepIcon(step) {
|
|
const text = `${step.title ?? ''} ${step.feature ?? ''} ${step.note ?? ''}`.toLowerCase();
|
|
|
|
if (/모델|3d|glb|ifc|wbpifc|grasshopper|rhino|객체|형상/.test(text)) return Layers3;
|
|
if (/포맷|파일|저장|출력|내보내기|생성|변환/.test(text)) return ClipboardList;
|
|
if (/속성|정보|입력|데이터|plugin|플러그인/.test(text)) return Waypoints;
|
|
if (/편집|수정|보정|변경|정합/.test(text)) return DraftingCompass;
|
|
if (/도로|노선|선형|중심선|경로/.test(text)) return Route;
|
|
if (/지도|수치지형도|유역|면적|범위|도면/.test(text)) return Map;
|
|
if (/측량|지형|지층|고도|산/.test(text)) return Mountain;
|
|
if (/스캔|영상|정사영상|레이어/.test(text)) return ScanLine;
|
|
if (/구조물|건물|하천/.test(text)) return Building2;
|
|
|
|
return ClipboardList;
|
|
}
|
|
|
|
function normalizeProgramSteps(program) {
|
|
return program.steps.map((step, index) => ({
|
|
id: step.id ?? `${program.id}-step-${index + 1}`,
|
|
icon: pickStepIcon(step),
|
|
title: step.title,
|
|
feature: step.feature,
|
|
note: step.note
|
|
}));
|
|
}
|
|
|
|
function createInitialGates(steps) {
|
|
return steps.slice(0, Math.max(1, steps.length - 1)).reduce((gates, step, index) => ({
|
|
...gates,
|
|
[`gate${index + 1}`]: 'no'
|
|
}), {});
|
|
}
|
|
|
|
function buildReviewItems(programId, steps, detailGates) {
|
|
const hasStoredDetailGates = Array.isArray(detailGates);
|
|
const storedDetailGates = hasStoredDetailGates ? detailGates : [];
|
|
|
|
if (programId === 'cheonjiin') {
|
|
const count = hasStoredDetailGates ? Math.max(1, storedDetailGates.length) : reviewGates.length;
|
|
return Array.from({ length: count }, (_, index) => {
|
|
const baseGate = reviewGates[index] ?? {
|
|
key: `gate${index + 1}`,
|
|
stepId: steps[Math.min(index, Math.max(0, steps.length - 2))]?.id ?? steps[0]?.id,
|
|
question: `${index + 1}-${index + 1} 변경?`,
|
|
yes: `예: ${index + 1}-${index + 1} 재진입`,
|
|
no: index === count - 1 ? '아니오: 변경사항 없음' : '아니오: 다음 검토'
|
|
};
|
|
return {
|
|
...baseGate,
|
|
...(storedDetailGates[index] ?? {}),
|
|
targetProgramId: storedDetailGates[index] ? storedDetailGates[index].targetProgramId : programId,
|
|
key: storedDetailGates[index]?.key ?? baseGate.key ?? `gate${index + 1}`
|
|
};
|
|
});
|
|
}
|
|
|
|
const defaultCount = Math.max(1, steps.length - 1);
|
|
const count = hasStoredDetailGates ? Math.max(1, storedDetailGates.length) : defaultCount;
|
|
return Array.from({ length: count }, (_, index) => {
|
|
const step = steps[Math.min(index, Math.max(0, steps.length - 2))] ?? steps[0];
|
|
return {
|
|
key: storedDetailGates[index]?.key ?? `gate${index + 1}`,
|
|
targetProgramId: storedDetailGates[index] ? storedDetailGates[index].targetProgramId : programId,
|
|
stepId: storedDetailGates[index]?.stepId ?? step?.id,
|
|
question: storedDetailGates[index]?.question ?? `${step?.title ?? `${index + 1}단계`} 변경?`,
|
|
yes: storedDetailGates[index]?.yes ?? `예: ${step?.title ?? `${index + 1}단계`} 재진입`,
|
|
no: storedDetailGates[index]?.no ?? (index === count - 1 ? '아니오: 변경사항 없음' : '아니오: 다음 검토')
|
|
};
|
|
});
|
|
}
|
|
|
|
function readStoredProgramStates() {
|
|
try {
|
|
const stored = window.localStorage.getItem(programStateStorageKey);
|
|
return stored ? JSON.parse(stored) : {};
|
|
} catch {
|
|
return {};
|
|
}
|
|
}
|
|
|
|
function publishProgramStates(states) {
|
|
try {
|
|
window.localStorage.setItem(programStateStorageKey, JSON.stringify(states));
|
|
patchServerState({ programStates: states });
|
|
const channel = new BroadcastChannel(channelName);
|
|
channel.postMessage({ states });
|
|
channel.close();
|
|
} catch {
|
|
window.localStorage.setItem(programStateStorageKey, JSON.stringify(states));
|
|
patchServerState({ programStates: states });
|
|
}
|
|
}
|
|
|
|
function saveServerState(payload, method = 'PUT') {
|
|
return fetch(serverStateEndpoint, {
|
|
method,
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(payload)
|
|
});
|
|
}
|
|
|
|
function patchServerState(payload) {
|
|
return saveServerState(payload, 'PATCH').catch(() => undefined);
|
|
}
|
|
|
|
function getProgramGates(states, programId, steps) {
|
|
return {
|
|
...createInitialGates(steps),
|
|
...(states[programId] ?? {})
|
|
};
|
|
}
|
|
|
|
function getActiveGate(gates, reviewItems) {
|
|
return reviewItems.find((gate) => gates[gate.key] === 'yes');
|
|
}
|
|
|
|
function getActiveStep(gates, reviewItems) {
|
|
return getActiveGate(gates, reviewItems)?.stepId ?? 'completed';
|
|
}
|
|
|
|
function getReentryContext(programs, programStates, getProgramReviewItems) {
|
|
return programs
|
|
.map((sourceProgram) => {
|
|
const reviewItems = getProgramReviewItems(sourceProgram);
|
|
const gates = getProgramGates(programStates, sourceProgram.id, sourceProgram.steps);
|
|
const activeGate = getActiveGate(gates, reviewItems);
|
|
if (!activeGate) return null;
|
|
const targetProgramId = resolveGateTargetProgramId(activeGate, sourceProgram.id, programs);
|
|
const targetProgramIndex = programs.findIndex((program) => program.id === targetProgramId);
|
|
if (targetProgramIndex < 0) return null;
|
|
return {
|
|
sourceProgramId: sourceProgram.id,
|
|
targetProgramId,
|
|
targetProgramIndex,
|
|
targetStepId: activeGate.stepId
|
|
};
|
|
})
|
|
.find(Boolean);
|
|
}
|
|
|
|
function resolveGateTargetProgramId(gate, sourceProgramId, allPrograms) {
|
|
if (gate?.targetProgramId) return gate.targetProgramId;
|
|
return allPrograms.find((program) => program.steps.some((step) => step.id === gate?.stepId))?.id ?? sourceProgramId;
|
|
}
|
|
|
|
function getStepLabel(program, stepId) {
|
|
return program?.steps.find((step) => step.id === stepId)?.title ?? stepId ?? '';
|
|
}
|
|
|
|
function moveItem(items, fromIndex, toIndex) {
|
|
if (toIndex < 0 || toIndex >= items.length) return items;
|
|
const nextItems = [...items];
|
|
const [movedItem] = nextItems.splice(fromIndex, 1);
|
|
nextItems.splice(toIndex, 0, movedItem);
|
|
return nextItems;
|
|
}
|
|
|
|
function splitDeliverableText(item) {
|
|
return String(item ?? '')
|
|
.split(', ')
|
|
.map((value) => value.trim())
|
|
.filter(Boolean);
|
|
}
|
|
|
|
function FlowCard({ step, index, total, accent, status, isEditing, onChange }) {
|
|
const Icon = step.icon ?? pickStepIcon(step);
|
|
return (
|
|
<div className="relative z-10 h-full w-full">
|
|
<div
|
|
className={`relative h-full overflow-hidden rounded-2xl border px-4 py-4 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md ${
|
|
status === 'active'
|
|
? 'border-amber-200 bg-gradient-to-br from-amber-50 to-white shadow-amber-100'
|
|
: status === 'disabled'
|
|
? 'border-slate-100 bg-white/45 opacity-45 shadow-none'
|
|
: status === 'completed'
|
|
? 'border-emerald-100 bg-gradient-to-br from-emerald-50 to-white'
|
|
: 'border-white/80 bg-white/80'
|
|
}`}
|
|
>
|
|
<div
|
|
className={`absolute inset-x-0 top-0 h-1 ${
|
|
status === 'active'
|
|
? 'bg-amber-400'
|
|
: status === 'completed'
|
|
? 'bg-emerald-400'
|
|
: 'bg-slate-200'
|
|
}`}
|
|
/>
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<div className={`flex h-9 w-9 items-center justify-center rounded-2xl ${accent.iconBg}`}>
|
|
<Icon className={`h-4 w-4 ${accent.iconText}`} />
|
|
</div>
|
|
<span
|
|
className={`text-[11px] font-bold ${
|
|
status === 'active' ? 'text-amber-700' : status === 'completed' ? 'text-emerald-700' : 'text-slate-400'
|
|
}`}
|
|
>
|
|
{status === 'active' ? '재진입' : status === 'completed' ? '통과' : `${String(index + 1).padStart(2, '0')} / ${String(total).padStart(2, '0')}`}
|
|
</span>
|
|
</div>
|
|
{isEditing ? (
|
|
<div className="space-y-2">
|
|
<input
|
|
value={step.title}
|
|
onChange={(event) => onChange(index, 'title', event.target.value)}
|
|
className="w-full rounded-md border border-slate-200 bg-white px-2 py-1.5 text-sm font-extrabold text-slate-950 outline-none focus:border-teal-400"
|
|
/>
|
|
<textarea
|
|
value={step.feature}
|
|
onChange={(event) => onChange(index, 'feature', event.target.value)}
|
|
rows={3}
|
|
className="w-full resize-none rounded-md border border-slate-200 bg-white px-2 py-1.5 text-[13px] font-semibold leading-5 text-slate-700 outline-none focus:border-teal-400"
|
|
/>
|
|
<textarea
|
|
value={step.note}
|
|
onChange={(event) => onChange(index, 'note', event.target.value)}
|
|
rows={3}
|
|
className="w-full resize-none rounded-md border border-slate-200 bg-white px-2 py-1.5 text-[12px] leading-5 text-slate-500 outline-none focus:border-teal-400"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<h3 className="text-base font-extrabold text-slate-950">{step.title}</h3>
|
|
<p className="mt-2 min-h-[72px] whitespace-pre-line text-[13px] font-semibold leading-5 text-slate-700">
|
|
{step.feature}
|
|
</p>
|
|
<p className="mt-4 whitespace-pre-line border-t border-dashed border-slate-200 pt-3 text-[12px] leading-5 text-slate-500">
|
|
{step.note}
|
|
</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function FlowRow({
|
|
label,
|
|
description,
|
|
steps,
|
|
accent,
|
|
onLabelClick,
|
|
activeStep,
|
|
isEditing,
|
|
onStepChange,
|
|
format,
|
|
onFormatChange,
|
|
deliverables = [],
|
|
onDeliverableChange,
|
|
onLabelChange,
|
|
onDescriptionChange,
|
|
onAddStep,
|
|
onRemoveStep,
|
|
onMoveStep,
|
|
onProgramDelete
|
|
}) {
|
|
const activeIndex = steps.findIndex((step) => step.id === activeStep);
|
|
|
|
const getStatus = (index) => {
|
|
if (activeStep === disabledFlowStep) return 'disabled';
|
|
if (!activeStep || activeStep === 'completed') return activeStep === 'completed' ? 'completed' : 'idle';
|
|
if (index === activeIndex) return 'active';
|
|
if (index < activeIndex) return 'completed';
|
|
return 'disabled';
|
|
};
|
|
const isRowClickable = Boolean(onLabelClick) && !isEditing;
|
|
const isWrappedStepLayout = steps.length > 5;
|
|
const stepRows = isWrappedStepLayout
|
|
? steps.reduce((rows, step, index) => {
|
|
const rowIndex = Math.floor(index / 4);
|
|
rows[rowIndex] = [...(rows[rowIndex] ?? []), { step, index }];
|
|
return rows;
|
|
}, [])
|
|
: [];
|
|
const wrappedCardColumns = ['xl:col-start-1', 'xl:col-start-3', 'xl:col-start-5', 'xl:col-start-7'];
|
|
const wrappedArrowColumns = ['xl:col-start-2', 'xl:col-start-4', 'xl:col-start-6'];
|
|
|
|
const renderStepCard = (step, index, className) => (
|
|
<div className={`relative z-10 flex flex-col gap-2 ${className}`}>
|
|
<FlowCard
|
|
step={step}
|
|
index={index}
|
|
total={steps.length}
|
|
accent={accent}
|
|
status={getStatus(index)}
|
|
isEditing={isEditing}
|
|
onChange={onStepChange}
|
|
/>
|
|
{isEditing && (onMoveStep || onRemoveStep) && (
|
|
<div className="flex flex-wrap justify-center gap-1.5">
|
|
{onMoveStep && (
|
|
<>
|
|
<button
|
|
type="button"
|
|
disabled={index === 0}
|
|
onClick={() => onMoveStep(index, index - 1)}
|
|
className="rounded-full bg-white px-2.5 py-1 text-[10px] font-extrabold text-slate-600 ring-1 ring-slate-200 hover:bg-slate-50 disabled:opacity-35"
|
|
>
|
|
위
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={index === steps.length - 1}
|
|
onClick={() => onMoveStep(index, index + 1)}
|
|
className="rounded-full bg-white px-2.5 py-1 text-[10px] font-extrabold text-slate-600 ring-1 ring-slate-200 hover:bg-slate-50 disabled:opacity-35"
|
|
>
|
|
아래
|
|
</button>
|
|
</>
|
|
)}
|
|
{onRemoveStep && steps.length > 1 && (
|
|
<button
|
|
type="button"
|
|
onClick={() => onRemoveStep(index)}
|
|
className="rounded-full bg-rose-50 px-2.5 py-1 text-[10px] font-extrabold text-rose-600 hover:bg-rose-100"
|
|
>
|
|
삭제
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<section
|
|
onClick={isRowClickable ? onLabelClick : undefined}
|
|
className={`rounded-[28px] border border-white/70 bg-white/75 p-5 shadow-[0_18px_50px_rgba(15,23,42,0.08)] backdrop-blur ${
|
|
isRowClickable ? 'cursor-pointer transition hover:-translate-y-0.5 hover:shadow-[0_22px_60px_rgba(15,23,42,0.12)]' : ''
|
|
}`}
|
|
>
|
|
<div className="mb-5 flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
|
|
<div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
{isEditing && onLabelChange ? (
|
|
<input
|
|
value={label}
|
|
onChange={(event) => onLabelChange(event.target.value)}
|
|
className={`w-44 rounded-xl border border-slate-200 bg-white/85 px-3 py-2 text-xl font-extrabold tracking-tight outline-none focus:border-teal-400 ${accent.labelText}`}
|
|
/>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
onLabelClick?.();
|
|
}}
|
|
className={`rounded-xl px-1 py-0.5 text-left text-xl font-extrabold tracking-tight ${accent.labelText} ${
|
|
onLabelClick ? 'cursor-pointer hover:bg-white/70' : ''
|
|
}`}
|
|
>
|
|
{label}
|
|
</button>
|
|
)}
|
|
{isEditing && onProgramDelete && (
|
|
<button
|
|
type="button"
|
|
onClick={onProgramDelete}
|
|
className="flex items-center gap-1 rounded-full bg-rose-50 px-2.5 py-1 text-[11px] font-extrabold text-rose-700 hover:bg-rose-100"
|
|
>
|
|
<Trash2 className="h-3.5 w-3.5" />
|
|
프로그램 삭제
|
|
</button>
|
|
)}
|
|
</div>
|
|
{isEditing && onDescriptionChange ? (
|
|
<textarea
|
|
value={description}
|
|
onChange={(event) => onDescriptionChange(event.target.value)}
|
|
rows={2}
|
|
className="mt-1 w-full min-w-[360px] resize-none rounded-xl border border-slate-200 bg-white/85 px-3 py-1.5 text-sm font-bold tracking-tight text-slate-800 outline-none focus:border-teal-400"
|
|
/>
|
|
) : (
|
|
<h2 className="mt-1 whitespace-pre-line text-sm font-bold tracking-tight text-slate-800">{description}</h2>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col items-start gap-2 md:items-end">
|
|
{onFormatChange && (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[11px] font-extrabold text-slate-400">포맷</span>
|
|
{isEditing ? (
|
|
<input
|
|
value={format}
|
|
onChange={(event) => onFormatChange(event.target.value)}
|
|
placeholder="예: glb"
|
|
className="h-8 w-28 rounded-full border border-slate-200 bg-white/85 px-3 text-[12px] font-extrabold text-slate-700 outline-none focus:border-teal-400"
|
|
/>
|
|
) : (
|
|
<span className="min-w-16 rounded-full bg-slate-100 px-3 py-1.5 text-center text-[12px] font-extrabold text-slate-700">
|
|
{format || '-'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
{(deliverables.length > 0 || isEditing) && (
|
|
<div className="flex max-w-[720px] flex-wrap items-center justify-start gap-1.5 md:justify-end">
|
|
<span className={`mr-1 text-[11px] font-extrabold ${accent.labelText}`}>성과물</span>
|
|
{(deliverables.length > 0 ? deliverables : ['']).map((item, index) => (
|
|
isEditing ? (
|
|
<input
|
|
key={index}
|
|
value={item}
|
|
onChange={(event) => onDeliverableChange?.(index, event.target.value)}
|
|
placeholder="성과물"
|
|
className="h-7 w-28 rounded-full border border-slate-200 bg-white/85 px-3 text-[11px] font-extrabold text-slate-700 outline-none focus:border-teal-400"
|
|
/>
|
|
) : splitDeliverableText(item).map((deliverable, deliverableIndex) => (
|
|
<span
|
|
key={`${deliverable}-${index}-${deliverableIndex}`}
|
|
className="rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-extrabold text-slate-700"
|
|
>
|
|
{deliverable}
|
|
</span>
|
|
))
|
|
))}
|
|
</div>
|
|
)}
|
|
{isEditing && onAddStep && (
|
|
<button
|
|
type="button"
|
|
onClick={onAddStep}
|
|
className="flex items-center gap-1 rounded-full bg-blue-50 px-3 py-2 text-[12px] font-extrabold text-blue-700 hover:bg-blue-100"
|
|
>
|
|
<Plus className="h-3.5 w-3.5" />
|
|
단계 추가
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{isWrappedStepLayout ? (
|
|
<div className="space-y-5">
|
|
{stepRows.map((row, rowIndex) => (
|
|
<div
|
|
key={rowIndex}
|
|
className="relative flex flex-col gap-3 xl:grid xl:grid-cols-[minmax(0,1fr)_36px_minmax(0,1fr)_36px_minmax(0,1fr)_36px_minmax(0,1fr)] xl:gap-0 xl:items-stretch"
|
|
>
|
|
{row.map(({ step, index }, itemIndex) => (
|
|
<React.Fragment key={step.id}>
|
|
{renderStepCard(
|
|
step,
|
|
index,
|
|
`min-w-0 ${wrappedCardColumns[itemIndex]}`
|
|
)}
|
|
{itemIndex < row.length - 1 && (
|
|
<div className={`flex items-center justify-center ${wrappedArrowColumns[itemIndex]}`}>
|
|
<ArrowRight className={`hidden h-5 w-5 xl:block ${accent.arrowText}`} />
|
|
<ArrowDown className={`h-5 w-5 xl:hidden ${accent.arrowText}`} />
|
|
</div>
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="relative flex flex-col gap-3 xl:flex-row xl:items-stretch">
|
|
{steps.map((step, index) => (
|
|
<React.Fragment key={step.id}>
|
|
{renderStepCard(step, index, 'min-w-[230px] flex-1')}
|
|
{index < steps.length - 1 && (
|
|
<div className="flex items-center justify-center xl:w-9">
|
|
<ArrowRight className={`hidden h-5 w-5 xl:block ${accent.arrowText}`} />
|
|
<ArrowDown className={`h-5 w-5 xl:hidden ${accent.arrowText}`} />
|
|
</div>
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function DetailPopup({
|
|
program,
|
|
allPrograms,
|
|
gates,
|
|
setGates,
|
|
selectedStep,
|
|
setSelectedStep,
|
|
reviewItems,
|
|
onReviewItemChange,
|
|
onAddReviewItem,
|
|
onRemoveReviewItem,
|
|
onMoveReviewItem,
|
|
onClose,
|
|
standalone = false
|
|
}) {
|
|
const [position, setPosition] = useState({ x: 24, y: 72 });
|
|
const [dragStart, setDragStart] = useState(null);
|
|
const [isDetailEditing, setIsDetailEditing] = useState(false);
|
|
const [changeSearch, setChangeSearch] = useState('');
|
|
|
|
const normalizedGates = reviewItems.reduce((nextGates, item) => ({
|
|
...nextGates,
|
|
[item.key]: gates[item.key] ?? 'no'
|
|
}), {});
|
|
const activeStep = getActiveStep(normalizedGates, reviewItems);
|
|
const getTargetProgram = (gate) => allPrograms.find((item) => item.id === resolveGateTargetProgramId(gate, program.id, allPrograms)) ?? program;
|
|
const getTargetLabel = (gate) => {
|
|
const targetProgram = getTargetProgram(gate);
|
|
return `${targetProgram.name} · ${getStepLabel(targetProgram, gate.stepId)}`;
|
|
};
|
|
const normalizedSearch = changeSearch.trim().toLowerCase();
|
|
const isSearchMatched = (gate) => Boolean(normalizedSearch) && [
|
|
gate.question,
|
|
gate.yes,
|
|
gate.no,
|
|
getTargetLabel(gate)
|
|
].join(' ').toLowerCase().includes(normalizedSearch);
|
|
const searchMatchCount = normalizedSearch
|
|
? reviewItems.filter((gate) => isSearchMatched(gate)).length
|
|
: 0;
|
|
|
|
const setGate = (key, value) => {
|
|
const nextGates = { ...normalizedGates, [key]: value };
|
|
setGates(nextGates);
|
|
const gate = reviewItems.find((item) => item.key === key);
|
|
if (value === 'yes' && gate) setSelectedStep(gate.stepId);
|
|
if (value === 'no' && key === reviewItems[reviewItems.length - 1]?.key) setSelectedStep('completed');
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!dragStart) return undefined;
|
|
|
|
const movePopup = (event) => {
|
|
const nextX = dragStart.originX + event.clientX - dragStart.startX;
|
|
const nextY = dragStart.originY + event.clientY - dragStart.startY;
|
|
const maxX = Math.max(12, window.innerWidth - 360);
|
|
const maxY = Math.max(12, window.innerHeight - 96);
|
|
|
|
setPosition({
|
|
x: Math.min(Math.max(12, nextX), maxX),
|
|
y: Math.min(Math.max(12, nextY), maxY)
|
|
});
|
|
};
|
|
|
|
const stopDrag = () => setDragStart(null);
|
|
|
|
window.addEventListener('pointermove', movePopup);
|
|
window.addEventListener('pointerup', stopDrag);
|
|
window.addEventListener('pointercancel', stopDrag);
|
|
document.body.style.userSelect = 'none';
|
|
|
|
return () => {
|
|
window.removeEventListener('pointermove', movePopup);
|
|
window.removeEventListener('pointerup', stopDrag);
|
|
window.removeEventListener('pointercancel', stopDrag);
|
|
document.body.style.userSelect = '';
|
|
};
|
|
}, [dragStart]);
|
|
|
|
const startDrag = (event) => {
|
|
if (event.target.closest('button')) return;
|
|
setDragStart({
|
|
startX: event.clientX,
|
|
startY: event.clientY,
|
|
originX: position.x,
|
|
originY: position.y
|
|
});
|
|
};
|
|
|
|
const header = (
|
|
<div
|
|
onPointerDown={standalone ? undefined : startDrag}
|
|
className={`flex items-center justify-between border-b border-white/10 bg-gradient-to-r from-slate-950 via-slate-900 to-teal-950 px-4 py-3 text-white ${
|
|
standalone ? '' : 'cursor-move'
|
|
}`}
|
|
>
|
|
<div>
|
|
<h2 className="text-sm font-extrabold">{program.name} 상세 플로우</h2>
|
|
<p className="mt-0.5 text-[11px] font-medium text-slate-300">
|
|
마지막 단계 완료 후 변경사항 검토 피드백 엔진
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onPointerDown={(event) => event.stopPropagation()}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
setIsDetailEditing((current) => !current);
|
|
}}
|
|
className="rounded-full bg-white/10 px-3 py-1.5 text-[11px] font-extrabold text-white hover:bg-white/20"
|
|
>
|
|
{isDetailEditing ? '수정 완료' : '내용 수정'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onPointerDown={(event) => event.stopPropagation()}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
onClose();
|
|
}}
|
|
className="flex h-8 w-8 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20"
|
|
aria-label="상세 플로우 닫기"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const content = (
|
|
<>
|
|
{header}
|
|
<div className="overflow-auto bg-[radial-gradient(circle_at_top_left,#eefdfa_0,#fcfbf8_42%,#f8fafc_100%)] p-4">
|
|
<section>
|
|
<div className="rounded-2xl border border-white/80 bg-white/75 px-4 py-4 shadow-sm backdrop-blur">
|
|
<div className="mb-5 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
|
<h3 className="text-base font-extrabold text-slate-950">변경사항 검토 및 재진입 흐름</h3>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<input
|
|
value={changeSearch}
|
|
onChange={(event) => setChangeSearch(event.target.value)}
|
|
placeholder="변경사항 검색 예: 노선변경"
|
|
className="h-8 w-56 rounded-full border border-slate-200 bg-white/90 px-3 text-[12px] font-bold text-slate-700 outline-none focus:border-teal-400"
|
|
/>
|
|
{changeSearch && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setChangeSearch('')}
|
|
className="rounded-full bg-slate-100 px-3 py-1.5 text-[11px] font-extrabold text-slate-500 hover:bg-slate-200"
|
|
>
|
|
검색 해제
|
|
</button>
|
|
)}
|
|
{isDetailEditing && (
|
|
<button
|
|
type="button"
|
|
onClick={onAddReviewItem}
|
|
className="rounded-full bg-slate-900 px-3 py-1.5 text-[11px] font-extrabold text-white hover:bg-slate-700"
|
|
>
|
|
스텝 추가
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="space-y-4">
|
|
{normalizedSearch && (
|
|
<p className="text-center text-[12px] font-bold text-slate-500">
|
|
`{changeSearch}` 매칭 스텝 {searchMatchCount}개
|
|
</p>
|
|
)}
|
|
{reviewItems.map((gate, index) => {
|
|
const blocked = reviewItems.slice(0, index).some((item) => normalizedGates[item.key] === 'yes');
|
|
const active = normalizedGates[gate.key] === 'yes';
|
|
const passed = normalizedGates[gate.key] === 'no' && !blocked;
|
|
const matched = isSearchMatched(gate);
|
|
return (
|
|
<div key={gate.key} className={`grid grid-cols-[0.85fr_minmax(220px,1.25fr)_0.85fr] items-center gap-2.5 ${blocked ? 'opacity-35' : ''} ${matched ? 'rounded-3xl bg-yellow-50/60 p-2 ring-2 ring-yellow-300' : ''}`}>
|
|
<div className={`rounded-2xl px-3 py-3.5 ${matched ? 'bg-yellow-100/90 ring-2 ring-yellow-300' : active ? 'bg-amber-100/90 ring-2 ring-amber-300' : 'bg-amber-50/80 ring-1 ring-amber-100'}`}>
|
|
{isDetailEditing ? (
|
|
<div className="space-y-1.5">
|
|
<input
|
|
value={gate.yes}
|
|
onChange={(event) => onReviewItemChange(index, 'yes', event.target.value)}
|
|
className="w-full rounded border border-amber-200 bg-white px-2 py-1 text-[11px] font-extrabold text-amber-700 outline-none"
|
|
/>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
<button
|
|
type="button"
|
|
disabled={index === 0}
|
|
onClick={() => onMoveReviewItem(index, index - 1)}
|
|
className="rounded-full bg-white px-2 py-1 text-[10px] font-extrabold text-slate-600 ring-1 ring-amber-100 hover:bg-amber-50 disabled:opacity-35"
|
|
>
|
|
위
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={index === reviewItems.length - 1}
|
|
onClick={() => onMoveReviewItem(index, index + 1)}
|
|
className="rounded-full bg-white px-2 py-1 text-[10px] font-extrabold text-slate-600 ring-1 ring-amber-100 hover:bg-amber-50 disabled:opacity-35"
|
|
>
|
|
아래
|
|
</button>
|
|
{reviewItems.length > 1 && (
|
|
<button
|
|
type="button"
|
|
onClick={() => onRemoveReviewItem(index)}
|
|
className="rounded-full bg-rose-50 px-2 py-1 text-[10px] font-extrabold text-rose-600 hover:bg-rose-100"
|
|
>
|
|
삭제
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<p className="text-[12px] font-extrabold text-amber-700">{gate.yes}</p>
|
|
<p className="mt-1 text-[10px] font-bold text-amber-500">대상: {getTargetLabel(gate)}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className={`rounded-2xl bg-white/95 px-4 py-4 text-center shadow-sm ring-1 ${matched ? 'ring-yellow-300' : active ? 'ring-amber-300' : passed ? 'ring-emerald-300' : 'ring-slate-200'}`}>
|
|
{isDetailEditing ? (
|
|
<div className="space-y-1.5">
|
|
<textarea
|
|
value={gate.question}
|
|
onChange={(event) => onReviewItemChange(index, 'question', event.target.value)}
|
|
rows={3}
|
|
className="w-full resize-none rounded border border-slate-200 bg-slate-50 px-2 py-1 text-center text-[11px] font-extrabold text-slate-800 outline-none"
|
|
/>
|
|
<select
|
|
value={`${resolveGateTargetProgramId(gate, program.id, allPrograms)}::${gate.stepId}`}
|
|
onChange={(event) => {
|
|
const [targetProgramId, stepId] = event.target.value.split('::');
|
|
onReviewItemChange(index, 'targetProgramId', targetProgramId);
|
|
onReviewItemChange(index, 'stepId', stepId);
|
|
}}
|
|
className="w-full rounded border border-slate-200 bg-white px-1 py-1 text-[10px] font-bold text-slate-700 outline-none"
|
|
>
|
|
{allPrograms.map((targetProgram) => (
|
|
<optgroup key={targetProgram.id} label={targetProgram.name}>
|
|
{targetProgram.steps.map((step) => (
|
|
<option key={`${targetProgram.id}-${step.id}`} value={`${targetProgram.id}::${step.id}`}>
|
|
{step.title}
|
|
</option>
|
|
))}
|
|
</optgroup>
|
|
))}
|
|
</select>
|
|
</div>
|
|
) : (
|
|
<p className="whitespace-pre-line text-[13px] font-extrabold leading-5 text-slate-800">{gate.question}</p>
|
|
)}
|
|
<div className="mt-2 flex justify-center gap-1.5">
|
|
<button
|
|
type="button"
|
|
disabled={blocked}
|
|
onClick={() => setGate(gate.key, 'yes')}
|
|
className={`rounded-full px-2 py-1 text-[10px] font-extrabold disabled:cursor-not-allowed ${
|
|
active ? 'bg-amber-500 text-white' : 'bg-slate-100 text-slate-600 hover:bg-amber-100'
|
|
}`}
|
|
>
|
|
예
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={blocked}
|
|
onClick={() => setGate(gate.key, 'no')}
|
|
className={`rounded-full px-2 py-1 text-[10px] font-extrabold disabled:cursor-not-allowed ${
|
|
passed ? 'bg-emerald-500 text-white' : 'bg-slate-100 text-slate-600 hover:bg-emerald-100'
|
|
}`}
|
|
>
|
|
아니오
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className={`rounded-2xl px-3 py-3.5 ${matched ? 'bg-yellow-100/90 ring-2 ring-yellow-300' : passed ? 'bg-emerald-100/90 ring-2 ring-emerald-300' : 'bg-emerald-50/80 ring-1 ring-emerald-100'}`}>
|
|
{isDetailEditing ? (
|
|
<input
|
|
value={gate.no}
|
|
onChange={(event) => onReviewItemChange(index, 'no', event.target.value)}
|
|
className="w-full rounded border border-emerald-200 bg-white px-2 py-1 text-[11px] font-extrabold text-emerald-700 outline-none"
|
|
/>
|
|
) : (
|
|
<p className="text-[12px] font-extrabold text-emerald-700">{gate.no}</p>
|
|
)}
|
|
</div>
|
|
{index < reviewItems.length - 1 && (
|
|
<div className="hidden md:col-start-2 md:flex md:justify-center">
|
|
<ArrowDown className="h-4 w-4 text-slate-400" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
if (standalone) {
|
|
return <main className="min-h-screen bg-[radial-gradient(circle_at_top_left,#eefdfa_0,#fcfbf8_42%,#f8fafc_100%)]">{content}</main>;
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 bg-slate-950/20 backdrop-blur-sm">
|
|
<div
|
|
className="fixed flex max-h-[calc(100vh-32px)] w-[min(1320px,calc(100vw-24px))] flex-col overflow-hidden rounded-3xl border border-white/70 bg-white shadow-2xl"
|
|
style={{ left: position.x, top: position.y }}
|
|
>
|
|
{content}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function RelationPopup({ programs, onToggleRelation, onClose }) {
|
|
const [isRelationEditorOpen, setIsRelationEditorOpen] = useState(false);
|
|
const relations = programs.flatMap((program) =>
|
|
(program.successors ?? [])
|
|
.map((successorId) => ({
|
|
from: program,
|
|
to: programs.find((item) => item.id === successorId)
|
|
}))
|
|
.filter((relation) => relation.to)
|
|
);
|
|
const connectedProgramIds = new Set(relations.flatMap((relation) => [relation.from.id, relation.to.id]));
|
|
const isolatedPrograms = programs.filter((program) => !connectedProgramIds.has(program.id));
|
|
const levelMap = programs.reduce((levels, program) => ({ ...levels, [program.id]: 0 }), {});
|
|
|
|
for (let pass = 0; pass < programs.length; pass += 1) {
|
|
relations.forEach((relation) => {
|
|
levelMap[relation.to.id] = Math.max(levelMap[relation.to.id], levelMap[relation.from.id] + 1);
|
|
});
|
|
}
|
|
|
|
const graphPrograms = programs.filter((program) => connectedProgramIds.has(program.id));
|
|
const graphLevels = graphPrograms.reduce((levels, program) => {
|
|
const level = levelMap[program.id] ?? 0;
|
|
levels[level] = [...(levels[level] ?? []), program];
|
|
return levels;
|
|
}, []);
|
|
const nodeWidth = 160;
|
|
const nodeHeight = 48;
|
|
const columnGap = 42;
|
|
const rowGap = 132;
|
|
const graphPadding = 54;
|
|
const sideLaneWidth = 240;
|
|
const maxLevelCount = Math.max(1, ...graphLevels.map((level) => level?.length ?? 0));
|
|
const graphWidth = Math.max(560, graphPadding * 2 + sideLaneWidth + maxLevelCount * nodeWidth + Math.max(0, maxLevelCount - 1) * columnGap);
|
|
const graphHeight = Math.max(620, graphPadding * 2 + graphLevels.length * nodeHeight + Math.max(0, graphLevels.length - 1) * rowGap);
|
|
const nodePositions = Object.fromEntries(
|
|
graphLevels.flatMap((levelPrograms = [], levelIndex) => {
|
|
const rowWidth = levelPrograms.length * nodeWidth + Math.max(0, levelPrograms.length - 1) * columnGap;
|
|
const startX = (graphWidth - rowWidth) / 2;
|
|
const y = graphPadding + levelIndex * (nodeHeight + rowGap);
|
|
return levelPrograms.map((program, rowIndex) => [
|
|
program.id,
|
|
{
|
|
x: startX + rowIndex * (nodeWidth + columnGap),
|
|
y
|
|
}
|
|
]);
|
|
})
|
|
);
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[60] flex items-center justify-center bg-slate-950/30 px-4 backdrop-blur-sm">
|
|
<section className="relative flex max-h-[calc(100vh-48px)] w-full max-w-4xl flex-col overflow-hidden rounded-3xl border border-white/70 bg-white shadow-2xl">
|
|
<div className="flex items-center justify-between bg-slate-950 px-5 py-4 text-white">
|
|
<div>
|
|
<p className="text-[11px] font-extrabold uppercase tracking-wide text-amber-300">
|
|
프로그램 연관관계
|
|
</p>
|
|
<h2 className="mt-1 text-lg font-extrabold">전체 프로그램 연결도 및 관계 수정</h2>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="flex h-9 w-9 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20"
|
|
aria-label="관계 설정 닫기"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
<div className="overflow-auto p-5">
|
|
<div className="rounded-3xl border border-blue-100 bg-gradient-to-br from-blue-50 to-white p-5">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<h3 className="text-base font-extrabold text-slate-950">연결도</h3>
|
|
<p className="mt-1 text-[12px] font-bold text-slate-500">
|
|
입력한 선행/후행 관계를 화살표로 표시합니다
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="rounded-full bg-white px-3 py-1.5 text-[12px] font-extrabold text-blue-700 ring-1 ring-blue-100">
|
|
{relations.length}개 연결
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsRelationEditorOpen((current) => !current)}
|
|
className="rounded-full bg-slate-950 px-4 py-2 text-[12px] font-extrabold text-white shadow-sm hover:bg-slate-800"
|
|
>
|
|
{isRelationEditorOpen ? '연결 수정 닫기' : '프로그램 연결 수정하기'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="mt-5 space-y-3">
|
|
{relations.length > 0 ? (
|
|
<div className="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-blue-100">
|
|
<div className="relative h-[780px] w-full">
|
|
<svg className="absolute inset-0 h-full w-full overflow-visible" viewBox={`0 0 ${graphWidth} ${graphHeight}`} preserveAspectRatio="none">
|
|
<defs>
|
|
<marker id="relation-arrow" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto" markerUnits="strokeWidth">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#2563eb" />
|
|
</marker>
|
|
<marker id="relation-arrow-skip" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto" markerUnits="strokeWidth">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#7c3aed" />
|
|
</marker>
|
|
</defs>
|
|
{relations.map((relation) => {
|
|
const from = nodePositions[relation.from.id];
|
|
const to = nodePositions[relation.to.id];
|
|
if (!from || !to) return null;
|
|
const fromLevel = levelMap[relation.from.id] ?? 0;
|
|
const toLevel = levelMap[relation.to.id] ?? 0;
|
|
const isSkipEdge = toLevel - fromLevel > 1;
|
|
const normalOutgoing = relations.filter(
|
|
(item) =>
|
|
item.from.id === relation.from.id &&
|
|
(levelMap[item.to.id] ?? 0) - (levelMap[item.from.id] ?? 0) === 1
|
|
);
|
|
const normalIncoming = relations.filter(
|
|
(item) =>
|
|
item.to.id === relation.to.id &&
|
|
(levelMap[item.to.id] ?? 0) - (levelMap[item.from.id] ?? 0) === 1
|
|
);
|
|
const outgoingIndex = normalOutgoing.findIndex((item) => item.to.id === relation.to.id);
|
|
const incomingIndex = normalIncoming.findIndex((item) => item.from.id === relation.from.id);
|
|
const fromCenterX = from.x + nodeWidth / 2;
|
|
const toCenterX = to.x + nodeWidth / 2;
|
|
const startY = from.y + nodeHeight;
|
|
const endY = to.y;
|
|
const isCenterAligned = Math.abs(fromCenterX - toCenterX) < 6;
|
|
const useStraightLine = !isSkipEdge && isCenterAligned;
|
|
const branchDirection = Math.sign(toCenterX - fromCenterX);
|
|
const mergeDirection = Math.sign(fromCenterX - toCenterX);
|
|
const startOffset = useStraightLine
|
|
? 0
|
|
: branchDirection !== 0 && normalOutgoing.length > 1
|
|
? branchDirection * 28
|
|
: (outgoingIndex - (normalOutgoing.length - 1) / 2) * 22;
|
|
const endOffset = useStraightLine
|
|
? 0
|
|
: mergeDirection !== 0 && normalIncoming.length > 1
|
|
? mergeDirection * 20
|
|
: (incomingIndex - (normalIncoming.length - 1) / 2) * 18;
|
|
const startX = fromCenterX + startOffset;
|
|
const endX = toCenterX + endOffset;
|
|
const midY = startY + Math.max(38, (endY - startY) / 2);
|
|
const skipEdges = relations.filter((item) => (levelMap[item.to.id] ?? 0) - (levelMap[item.from.id] ?? 0) > 1);
|
|
const skipFromLevels = [...new Set(skipEdges.map((item) => levelMap[item.from.id] ?? 0))].sort((a, b) => a - b);
|
|
const skipFromLevelIndex = skipFromLevels.indexOf(fromLevel);
|
|
const leftMostNodeX = Math.min(...Object.values(nodePositions).map((position) => position.x));
|
|
const outerLaneX = 24;
|
|
const innerLaneX = Math.max(outerLaneX + 42, leftMostNodeX - 86);
|
|
const getSkipLaneX = (level) => {
|
|
const levelIndex = Math.max(0, skipFromLevels.indexOf(level));
|
|
const laneRatio = skipFromLevels.length <= 1 ? 1 : levelIndex / (skipFromLevels.length - 1);
|
|
return outerLaneX + (innerLaneX - outerLaneX) * laneRatio;
|
|
};
|
|
const skipIncoming = skipEdges.filter((item) => item.to.id === relation.to.id);
|
|
const innermostSkipLevel = Math.max(...skipIncoming.map((item) => levelMap[item.from.id] ?? 0));
|
|
const isInnermostSkipEdge = fromLevel === innermostSkipLevel;
|
|
const innermostLaneX = getSkipLaneX(innermostSkipLevel);
|
|
const laneX = getSkipLaneX(fromLevel);
|
|
const skipStartX = from.x;
|
|
const skipStartY = from.y + nodeHeight / 2;
|
|
const skipEndX = to.x;
|
|
const skipEndY = to.y + nodeHeight / 2;
|
|
const pathD = isSkipEdge
|
|
? `M ${skipStartX} ${skipStartY} H ${laneX} V ${skipEndY} H ${isInnermostSkipEdge ? skipEndX - 10 : innermostLaneX}`
|
|
: useStraightLine
|
|
? `M ${fromCenterX} ${startY} L ${toCenterX} ${endY - 10}`
|
|
: `M ${startX} ${startY} C ${startX} ${midY}, ${endX} ${midY}, ${endX} ${endY - 10}`;
|
|
return (
|
|
<g key={`${relation.from.id}-${relation.to.id}`}>
|
|
<path
|
|
d={pathD}
|
|
fill="none"
|
|
stroke={isSkipEdge ? '#7c3aed' : '#2563eb'}
|
|
strokeWidth={isSkipEdge ? '2.5' : '2'}
|
|
strokeDasharray={isSkipEdge ? '7 6' : undefined}
|
|
opacity={isSkipEdge ? '0.9' : '1'}
|
|
markerEnd={
|
|
isSkipEdge
|
|
? isInnermostSkipEdge
|
|
? 'url(#relation-arrow-skip)'
|
|
: undefined
|
|
: 'url(#relation-arrow)'
|
|
}
|
|
/>
|
|
</g>
|
|
);
|
|
})}
|
|
</svg>
|
|
{graphPrograms.map((program) => {
|
|
const position = nodePositions[program.id];
|
|
if (!position) return null;
|
|
return (
|
|
<div
|
|
key={program.id}
|
|
className="absolute flex flex-col items-center justify-center rounded-2xl border border-blue-100 bg-gradient-to-br from-white to-blue-50 px-3 text-center shadow-sm"
|
|
style={{
|
|
left: `${(position.x / graphWidth) * 100}%`,
|
|
top: `${(position.y / graphHeight) * 100}%`,
|
|
width: `${(nodeWidth / graphWidth) * 100}%`,
|
|
height: `${(nodeHeight / graphHeight) * 100}%`
|
|
}}
|
|
>
|
|
<p className="text-sm font-extrabold text-slate-950">{program.name}</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="rounded-2xl bg-white px-4 py-6 text-center text-sm font-bold text-slate-500 ring-1 ring-blue-100">
|
|
아직 연결된 프로그램이 없습니다. 아래에서 선행/후행을 선택하세요.
|
|
</div>
|
|
)}
|
|
{isolatedPrograms.length > 0 && (
|
|
<div className="flex flex-wrap items-center gap-2 rounded-2xl bg-white/70 px-4 py-3 text-[12px] font-bold text-slate-500 ring-1 ring-blue-50">
|
|
<span className="font-extrabold text-slate-700">미연결</span>
|
|
{isolatedPrograms.map((program) => (
|
|
<span key={program.id} className="rounded-full bg-slate-100 px-2.5 py-1 text-slate-600">
|
|
{program.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{isRelationEditorOpen && (
|
|
<div className="absolute inset-0 z-10 flex items-center justify-center bg-slate-950/30 px-5 backdrop-blur-sm">
|
|
<div className="max-h-[calc(100%-48px)] w-full max-w-3xl overflow-auto rounded-3xl border border-white/80 bg-slate-50 p-5 shadow-2xl">
|
|
<div className="mb-4 flex items-center justify-between gap-3">
|
|
<div>
|
|
<h3 className="text-base font-extrabold text-slate-950">프로그램 연결 수정</h3>
|
|
<p className="mt-1 text-[12px] font-bold text-slate-500">
|
|
각 프로그램의 선행/후행을 선택하면 연결도가 바로 반영됩니다
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsRelationEditorOpen(false)}
|
|
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-slate-900 text-white hover:bg-slate-700"
|
|
aria-label="프로그램 연결 수정 닫기"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
<div className="mt-4 space-y-3">
|
|
{programs.map((program) => {
|
|
const candidates = programs.filter((item) => item.id !== program.id);
|
|
return (
|
|
<div key={program.id} className="grid gap-3 rounded-2xl bg-white p-4 ring-1 ring-slate-100 lg:grid-cols-[180px_1fr_1fr]">
|
|
<div>
|
|
<p className="text-[11px] font-extrabold uppercase tracking-wide text-slate-400">프로그램</p>
|
|
<h4 className="mt-1 text-base font-extrabold text-slate-950">{program.name}</h4>
|
|
</div>
|
|
<div>
|
|
<p className="mb-2 text-[12px] font-extrabold text-amber-700">선행</p>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{candidates.map((candidate) => (
|
|
<label key={candidate.id} className="flex cursor-pointer items-center gap-1.5 rounded-full bg-amber-50 px-2.5 py-1.5 text-[11px] font-extrabold text-amber-800 ring-1 ring-amber-100">
|
|
<input
|
|
type="checkbox"
|
|
checked={(program.predecessors ?? []).includes(candidate.id)}
|
|
onChange={(event) => onToggleRelation(program.id, 'predecessors', candidate.id, event.target.checked)}
|
|
className="h-3.5 w-3.5 accent-amber-500"
|
|
/>
|
|
{candidate.name}
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p className="mb-2 text-[12px] font-extrabold text-blue-700">후행</p>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{candidates.map((candidate) => (
|
|
<label key={candidate.id} className="flex cursor-pointer items-center gap-1.5 rounded-full bg-blue-50 px-2.5 py-1.5 text-[11px] font-extrabold text-blue-800 ring-1 ring-blue-100">
|
|
<input
|
|
type="checkbox"
|
|
checked={(program.successors ?? []).includes(candidate.id)}
|
|
onChange={(event) => onToggleRelation(program.id, 'successors', candidate.id, event.target.checked)}
|
|
className="h-3.5 w-3.5 accent-blue-500"
|
|
/>
|
|
{candidate.name}
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function App() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const isDetailWindow = urlParams.get('view') === 'program-detail' || urlParams.get('view') === 'cheonjiin-detail';
|
|
const detailProgramId = urlParams.get('program') ?? 'cheonjiin';
|
|
const [programStates, setProgramStates] = useState(readStoredProgramStates);
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [content, setContent] = useState(readStoredContent);
|
|
const [isRelationPopupOpen, setIsRelationPopupOpen] = useState(false);
|
|
const [isServerLoaded, setIsServerLoaded] = useState(false);
|
|
const editableCheonjiinFlow = mergeStepContent(cheonjiinFlow, content.cheonjiin.steps);
|
|
const editableWayPrimalFlow = mergeStepContent(wayPrimalFlow, content.wayPrimal.steps);
|
|
const programs = [
|
|
{
|
|
id: 'cheonjiin',
|
|
name: content.cheonjiin.name,
|
|
description: content.cheonjiin.description,
|
|
steps: editableCheonjiinFlow,
|
|
format: content.cheonjiin.format,
|
|
predecessors: content.cheonjiin.predecessors ?? [],
|
|
successors: content.cheonjiin.successors ?? [],
|
|
accent: {
|
|
iconBg: 'bg-teal-50',
|
|
iconText: 'text-teal-700',
|
|
labelText: 'text-teal-700',
|
|
arrowText: 'text-teal-600'
|
|
}
|
|
},
|
|
{
|
|
id: 'wayPrimal',
|
|
name: content.wayPrimal.name,
|
|
description: content.wayPrimal.description,
|
|
steps: editableWayPrimalFlow,
|
|
format: content.wayPrimal.format,
|
|
predecessors: content.wayPrimal.predecessors ?? [],
|
|
successors: content.wayPrimal.successors ?? [],
|
|
accent: {
|
|
iconBg: 'bg-indigo-50',
|
|
iconText: 'text-indigo-700',
|
|
labelText: 'text-indigo-700',
|
|
arrowText: 'text-indigo-600'
|
|
}
|
|
},
|
|
...content.extraPrograms.map((program) => ({
|
|
id: program.id,
|
|
name: program.name,
|
|
description: program.description,
|
|
steps: normalizeProgramSteps(program),
|
|
format: program.format,
|
|
predecessors: program.predecessors ?? [],
|
|
successors: program.successors ?? [],
|
|
accent: {
|
|
iconBg: 'bg-blue-50',
|
|
iconText: 'text-blue-700',
|
|
labelText: 'text-blue-700',
|
|
arrowText: 'text-blue-600'
|
|
}
|
|
}))
|
|
];
|
|
const getStoredProgram = (programId) => (
|
|
programId === 'cheonjiin'
|
|
? content.cheonjiin
|
|
: programId === 'wayPrimal'
|
|
? content.wayPrimal
|
|
: content.extraPrograms.find((program) => program.id === programId)
|
|
);
|
|
const getProgramReviewItems = (program) => buildReviewItems(
|
|
program.id,
|
|
program.steps,
|
|
getStoredProgram(program.id)?.detailGates
|
|
);
|
|
const reentryContext = getReentryContext(programs, programStates, getProgramReviewItems);
|
|
const getMainActiveStep = (programId) => {
|
|
if (!reentryContext) return 'completed';
|
|
const programIndex = programs.findIndex((program) => program.id === programId);
|
|
if (programId === reentryContext.targetProgramId) return reentryContext.targetStepId;
|
|
if (programIndex > reentryContext.targetProgramIndex) return disabledFlowStep;
|
|
return 'completed';
|
|
};
|
|
|
|
useEffect(() => {
|
|
const channel = new BroadcastChannel(channelName);
|
|
channel.onmessage = (event) => {
|
|
if (!event.data?.states) return;
|
|
setProgramStates(event.data.states);
|
|
};
|
|
return () => channel.close();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
let isMounted = true;
|
|
|
|
const loadServerState = async () => {
|
|
try {
|
|
const response = await fetch(serverStateEndpoint);
|
|
if (response.status === 404) {
|
|
await saveServerState({
|
|
content,
|
|
programStates
|
|
});
|
|
if (isMounted) setIsServerLoaded(true);
|
|
return;
|
|
}
|
|
|
|
if (!response.ok) throw new Error('Failed to load server state');
|
|
|
|
const serverState = await response.json();
|
|
if (!isMounted) return;
|
|
|
|
if (serverState.content) {
|
|
const nextContent = normalizeStoredContent(serverState.content);
|
|
setContent(nextContent);
|
|
window.localStorage.setItem(contentStorageKey, JSON.stringify(nextContent));
|
|
}
|
|
|
|
if (serverState.programStates) {
|
|
setProgramStates(serverState.programStates);
|
|
window.localStorage.setItem(programStateStorageKey, JSON.stringify(serverState.programStates));
|
|
}
|
|
|
|
setIsServerLoaded(true);
|
|
} catch {
|
|
if (isMounted) setIsServerLoaded(true);
|
|
}
|
|
};
|
|
|
|
loadServerState();
|
|
|
|
return () => {
|
|
isMounted = false;
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
window.localStorage.setItem(contentStorageKey, JSON.stringify(content));
|
|
}, [content]);
|
|
|
|
useEffect(() => {
|
|
if (!isServerLoaded) return;
|
|
|
|
const saveTimer = window.setTimeout(() => {
|
|
saveServerState({
|
|
content,
|
|
programStates
|
|
}).catch(() => undefined);
|
|
}, 250);
|
|
|
|
return () => window.clearTimeout(saveTimer);
|
|
}, [content, programStates, isServerLoaded]);
|
|
|
|
useEffect(() => {
|
|
const syncStoredContent = (event) => {
|
|
if (event.key === contentStorageKey) {
|
|
setContent(readStoredContent());
|
|
}
|
|
if (event.key === programStateStorageKey) {
|
|
setProgramStates(readStoredProgramStates());
|
|
}
|
|
};
|
|
|
|
window.addEventListener('storage', syncStoredContent);
|
|
return () => window.removeEventListener('storage', syncStoredContent);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
window.localStorage.setItem(programStateStorageKey, JSON.stringify(programStates));
|
|
}, [programStates]);
|
|
|
|
useEffect(() => {
|
|
if (!isDetailWindow) return undefined;
|
|
|
|
const resetMainFlowState = () => {
|
|
publishProgramStates({});
|
|
};
|
|
|
|
window.addEventListener('beforeunload', resetMainFlowState);
|
|
return () => window.removeEventListener('beforeunload', resetMainFlowState);
|
|
}, [isDetailWindow]);
|
|
|
|
const updateStep = (program, index, field, value) => {
|
|
setContent((current) => ({
|
|
...current,
|
|
[program]: {
|
|
...current[program],
|
|
steps: current[program].steps.map((step, stepIndex) =>
|
|
stepIndex === index ? { ...step, [field]: value } : step
|
|
)
|
|
}
|
|
}));
|
|
};
|
|
|
|
const createStep = (programId, nextIndex) => ({
|
|
id: `${programId}-${Date.now()}-${nextIndex}`,
|
|
title: `${nextIndex}단계`,
|
|
feature: '주요 기능 입력',
|
|
note: '단계 설명을 입력합니다.'
|
|
});
|
|
|
|
const addStep = (programId) => {
|
|
setContent((current) => {
|
|
if (programId === 'cheonjiin' || programId === 'wayPrimal') {
|
|
const steps = current[programId].steps ?? [];
|
|
return {
|
|
...current,
|
|
[programId]: {
|
|
...current[programId],
|
|
steps: [...steps, createStep(programId, steps.length + 1)]
|
|
}
|
|
};
|
|
}
|
|
|
|
return {
|
|
...current,
|
|
extraPrograms: current.extraPrograms.map((program) =>
|
|
program.id === programId
|
|
? {
|
|
...program,
|
|
steps: [...program.steps, createStep(program.id, program.steps.length + 1)]
|
|
}
|
|
: program
|
|
)
|
|
};
|
|
});
|
|
};
|
|
|
|
const removeStep = (programId, stepIndex) => {
|
|
setContent((current) => {
|
|
if (programId === 'cheonjiin' || programId === 'wayPrimal') {
|
|
const steps = current[programId].steps ?? [];
|
|
if (steps.length <= 1) return current;
|
|
return {
|
|
...current,
|
|
[programId]: {
|
|
...current[programId],
|
|
steps: steps.filter((_, index) => index !== stepIndex)
|
|
}
|
|
};
|
|
}
|
|
|
|
return {
|
|
...current,
|
|
extraPrograms: current.extraPrograms.map((program) =>
|
|
program.id === programId && program.steps.length > 1
|
|
? { ...program, steps: program.steps.filter((_, index) => index !== stepIndex) }
|
|
: program
|
|
)
|
|
};
|
|
});
|
|
};
|
|
|
|
const moveStep = (programId, stepIndex, nextIndex) => {
|
|
setContent((current) => {
|
|
if (programId === 'cheonjiin' || programId === 'wayPrimal') {
|
|
return {
|
|
...current,
|
|
[programId]: {
|
|
...current[programId],
|
|
steps: moveItem(current[programId].steps ?? [], stepIndex, nextIndex)
|
|
}
|
|
};
|
|
}
|
|
|
|
return {
|
|
...current,
|
|
extraPrograms: current.extraPrograms.map((program) =>
|
|
program.id === programId
|
|
? { ...program, steps: moveItem(program.steps, stepIndex, nextIndex) }
|
|
: program
|
|
)
|
|
};
|
|
});
|
|
};
|
|
|
|
const updateFormat = (program, value) => {
|
|
setContent((current) => ({
|
|
...current,
|
|
[program]: {
|
|
...current[program],
|
|
format: value
|
|
}
|
|
}));
|
|
};
|
|
|
|
const updateDeliverable = (index, value) => {
|
|
setContent((current) => ({
|
|
...current,
|
|
cheonjiin: {
|
|
...current.cheonjiin,
|
|
deliverables: current.cheonjiin.deliverables.map((item, itemIndex) =>
|
|
itemIndex === index ? value : item
|
|
)
|
|
}
|
|
}));
|
|
};
|
|
|
|
const updateProgramDeliverable = (programId, itemIndex, value) => {
|
|
if (programId === 'cheonjiin') {
|
|
updateDeliverable(itemIndex, value);
|
|
return;
|
|
}
|
|
|
|
if (programId === 'wayPrimal') {
|
|
setContent((current) => ({
|
|
...current,
|
|
wayPrimal: {
|
|
...current.wayPrimal,
|
|
deliverables: (current.wayPrimal.deliverables ?? ['']).map((item, index) =>
|
|
index === itemIndex ? value : item
|
|
)
|
|
}
|
|
}));
|
|
return;
|
|
}
|
|
|
|
setContent((current) => ({
|
|
...current,
|
|
extraPrograms: current.extraPrograms.map((program) =>
|
|
program.id === programId
|
|
? {
|
|
...program,
|
|
deliverables: (program.deliverables ?? ['']).map((item, index) =>
|
|
index === itemIndex ? value : item
|
|
)
|
|
}
|
|
: program
|
|
)
|
|
}));
|
|
};
|
|
|
|
const updateProgramLinkLabel = (programId, value) => {
|
|
if (programId === 'wayPrimal') {
|
|
setContent((current) => ({
|
|
...current,
|
|
wayPrimal: {
|
|
...current.wayPrimal,
|
|
linkLabel: value
|
|
}
|
|
}));
|
|
return;
|
|
}
|
|
|
|
setContent((current) => ({
|
|
...current,
|
|
extraPrograms: current.extraPrograms.map((program) =>
|
|
program.id === programId
|
|
? { ...program, linkLabel: value }
|
|
: program
|
|
)
|
|
}));
|
|
};
|
|
|
|
const updateProgramRecord = (current, programId, updater) => {
|
|
if (programId === 'cheonjiin' || programId === 'wayPrimal') {
|
|
return {
|
|
...current,
|
|
[programId]: updater(current[programId])
|
|
};
|
|
}
|
|
|
|
return {
|
|
...current,
|
|
extraPrograms: current.extraPrograms.map((program) =>
|
|
program.id === programId ? updater(program) : program
|
|
)
|
|
};
|
|
};
|
|
|
|
const toggleProgramRelation = (programId, field, relatedProgramId, checked) => {
|
|
const oppositeField = field === 'predecessors' ? 'successors' : 'predecessors';
|
|
const updateList = (list = [], value, shouldAdd) => (
|
|
shouldAdd
|
|
? [...new Set([...list, value])]
|
|
: list.filter((item) => item !== value)
|
|
);
|
|
|
|
setContent((current) => {
|
|
const nextContent = updateProgramRecord(current, programId, (program) => ({
|
|
...program,
|
|
[field]: updateList(program[field], relatedProgramId, checked)
|
|
}));
|
|
|
|
return updateProgramRecord(nextContent, relatedProgramId, (program) => ({
|
|
...program,
|
|
[oppositeField]: updateList(program[oppositeField], programId, checked)
|
|
}));
|
|
});
|
|
};
|
|
|
|
const updateProgramTitle = (programId, field, value) => {
|
|
if (programId === 'cheonjiin' || programId === 'wayPrimal') {
|
|
const target = programId === 'cheonjiin' ? 'cheonjiin' : 'wayPrimal';
|
|
setContent((current) => ({
|
|
...current,
|
|
[target]: {
|
|
...current[target],
|
|
[field]: value
|
|
}
|
|
}));
|
|
return;
|
|
}
|
|
|
|
setContent((current) => ({
|
|
...current,
|
|
extraPrograms: current.extraPrograms.map((program) =>
|
|
program.id === programId
|
|
? { ...program, [field]: value }
|
|
: program
|
|
)
|
|
}));
|
|
};
|
|
|
|
const addProgram = () => {
|
|
const id = `program-${Date.now()}`;
|
|
setContent((current) => ({
|
|
...current,
|
|
extraPrograms: [
|
|
...current.extraPrograms,
|
|
{
|
|
id,
|
|
name: '새 프로그램',
|
|
description: '새 프로그램 업무 플로우',
|
|
steps: [
|
|
{
|
|
id: `${id}-1`,
|
|
title: '1단계',
|
|
feature: '주요 기능 입력',
|
|
note: '단계 설명을 입력합니다.'
|
|
},
|
|
{
|
|
id: `${id}-2`,
|
|
title: '2단계',
|
|
feature: '주요 기능 입력',
|
|
note: '단계 설명을 입력합니다.'
|
|
}
|
|
],
|
|
format: '',
|
|
deliverables: ['성과물'],
|
|
predecessors: [],
|
|
successors: [],
|
|
linkLabel: '이전 프로그램 산출물을 새 프로그램 입력으로 연계'
|
|
}
|
|
]
|
|
}));
|
|
setIsEditing(true);
|
|
};
|
|
|
|
const toggleProgramEdit = () => {
|
|
setIsEditing((current) => !current);
|
|
};
|
|
|
|
const updateProgram = (programIndex, field, value) => {
|
|
setContent((current) => ({
|
|
...current,
|
|
extraPrograms: current.extraPrograms.map((program, index) =>
|
|
index === programIndex ? { ...program, [field]: value } : program
|
|
)
|
|
}));
|
|
};
|
|
|
|
const updateProgramStep = (programIndex, stepIndex, field, value) => {
|
|
setContent((current) => ({
|
|
...current,
|
|
extraPrograms: current.extraPrograms.map((program, index) =>
|
|
index === programIndex
|
|
? {
|
|
...program,
|
|
steps: program.steps.map((step, currentStepIndex) =>
|
|
currentStepIndex === stepIndex ? { ...step, [field]: value } : step
|
|
)
|
|
}
|
|
: program
|
|
)
|
|
}));
|
|
};
|
|
|
|
const removeProgram = (programIndex) => {
|
|
setContent((current) => ({
|
|
...current,
|
|
extraPrograms: current.extraPrograms.filter((_, index) => index !== programIndex)
|
|
}));
|
|
};
|
|
|
|
const moveProgram = (programIndex, nextIndex) => {
|
|
setContent((current) => ({
|
|
...current,
|
|
extraPrograms: moveItem(current.extraPrograms, programIndex, nextIndex)
|
|
}));
|
|
};
|
|
|
|
const updateProgramGates = (programId, gates) => {
|
|
setProgramStates((current) => {
|
|
const nextStates = { ...current, [programId]: gates };
|
|
publishProgramStates(nextStates);
|
|
return nextStates;
|
|
});
|
|
};
|
|
|
|
const updateDetailGate = (programId, gateIndex, field, value) => {
|
|
setContent((current) => {
|
|
if (programId === 'cheonjiin' || programId === 'wayPrimal') {
|
|
const target = programId === 'cheonjiin' ? 'cheonjiin' : 'wayPrimal';
|
|
const nextDetailGates = [
|
|
...(current[target].detailGates ?? buildReviewItems(programId, programs.find((program) => program.id === programId)?.steps ?? []))
|
|
];
|
|
nextDetailGates[gateIndex] = { ...nextDetailGates[gateIndex], [field]: value };
|
|
return {
|
|
...current,
|
|
[target]: {
|
|
...current[target],
|
|
detailGates: nextDetailGates
|
|
}
|
|
};
|
|
}
|
|
|
|
return {
|
|
...current,
|
|
extraPrograms: current.extraPrograms.map((program) => {
|
|
if (program.id !== programId) return program;
|
|
const baseSteps = normalizeProgramSteps(program);
|
|
const nextDetailGates = [
|
|
...(program.detailGates ?? buildReviewItems(program.id, baseSteps))
|
|
];
|
|
nextDetailGates[gateIndex] = { ...nextDetailGates[gateIndex], [field]: value };
|
|
return { ...program, detailGates: nextDetailGates };
|
|
})
|
|
};
|
|
});
|
|
};
|
|
|
|
const updateDetailGates = (programId, getNextDetailGates) => {
|
|
setContent((current) => {
|
|
if (programId === 'cheonjiin' || programId === 'wayPrimal') {
|
|
const target = programId === 'cheonjiin' ? 'cheonjiin' : 'wayPrimal';
|
|
const currentProgram = programs.find((program) => program.id === programId);
|
|
const currentGates = current[target].detailGates ?? buildReviewItems(programId, currentProgram?.steps ?? []);
|
|
return {
|
|
...current,
|
|
[target]: {
|
|
...current[target],
|
|
detailGates: getNextDetailGates(currentGates, currentProgram?.steps ?? [])
|
|
}
|
|
};
|
|
}
|
|
|
|
return {
|
|
...current,
|
|
extraPrograms: current.extraPrograms.map((program) => {
|
|
if (program.id !== programId) return program;
|
|
const baseSteps = normalizeProgramSteps(program);
|
|
const currentGates = program.detailGates ?? buildReviewItems(program.id, baseSteps);
|
|
return {
|
|
...program,
|
|
detailGates: getNextDetailGates(currentGates, baseSteps)
|
|
};
|
|
})
|
|
};
|
|
});
|
|
};
|
|
|
|
const addDetailGate = (programId) => {
|
|
updateDetailGates(programId, (currentGates, steps) => {
|
|
const nextIndex = currentGates.length;
|
|
const targetStep = steps[Math.min(nextIndex, Math.max(0, steps.length - 2))] ?? steps[0];
|
|
return [
|
|
...currentGates.map((gate, index) => ({
|
|
...gate,
|
|
no: index === currentGates.length - 1 ? '아니오: 다음 검토' : gate.no
|
|
})),
|
|
{
|
|
key: `gate${nextIndex + 1}-${Date.now()}`,
|
|
targetProgramId: programId,
|
|
stepId: targetStep?.id,
|
|
question: `${targetStep?.title ?? `${nextIndex + 1}단계`} 변경?`,
|
|
yes: `예: ${targetStep?.title ?? `${nextIndex + 1}단계`} 재진입`,
|
|
no: '아니오: 변경사항 없음'
|
|
}
|
|
];
|
|
});
|
|
};
|
|
|
|
const removeDetailGate = (programId, gateIndex) => {
|
|
updateDetailGates(programId, (currentGates) => {
|
|
const nextGates = currentGates.filter((_, index) => index !== gateIndex);
|
|
return nextGates.map((gate, index) => ({
|
|
...gate,
|
|
no: index === nextGates.length - 1 ? '아니오: 변경사항 없음' : gate.no
|
|
}));
|
|
});
|
|
};
|
|
|
|
const moveDetailGate = (programId, gateIndex, nextIndex) => {
|
|
updateDetailGates(programId, (currentGates) => {
|
|
const nextGates = moveItem(currentGates, gateIndex, nextIndex);
|
|
return nextGates.map((gate, index) => ({
|
|
...gate,
|
|
no: index === nextGates.length - 1 ? '아니오: 변경사항 없음' : gate.no
|
|
}));
|
|
});
|
|
};
|
|
|
|
const resetContent = () => {
|
|
setContent(defaultContent);
|
|
window.localStorage.removeItem(contentStorageKey);
|
|
setProgramStates({});
|
|
window.localStorage.removeItem(programStateStorageKey);
|
|
};
|
|
|
|
const openProgramWindow = (programId) => {
|
|
publishProgramStates(programStates);
|
|
const appPath = window.location.pathname.startsWith('/8093') ? '/8093' : window.location.pathname || '/8093';
|
|
window.open(
|
|
`${appPath}?view=program-detail&program=${encodeURIComponent(programId)}`,
|
|
'program-detail-flow',
|
|
'popup=yes,width=620,height=990,left=80,top=40,resizable=yes,scrollbars=yes'
|
|
);
|
|
};
|
|
|
|
if (isDetailWindow) {
|
|
const detailProgram = programs.find((program) => program.id === detailProgramId) ?? programs[0];
|
|
const storedProgram = getStoredProgram(detailProgram.id);
|
|
const reviewItems = buildReviewItems(detailProgram.id, detailProgram.steps, storedProgram?.detailGates);
|
|
const gates = getProgramGates(programStates, detailProgram.id, detailProgram.steps);
|
|
return (
|
|
<DetailPopup
|
|
program={detailProgram}
|
|
allPrograms={programs}
|
|
gates={gates}
|
|
setGates={(nextGates) => updateProgramGates(detailProgram.id, nextGates)}
|
|
selectedStep={getActiveStep(gates, reviewItems)}
|
|
setSelectedStep={() => {}}
|
|
reviewItems={reviewItems}
|
|
onReviewItemChange={(index, field, value) => updateDetailGate(detailProgram.id, index, field, value)}
|
|
onAddReviewItem={() => addDetailGate(detailProgram.id)}
|
|
onRemoveReviewItem={(index) => removeDetailGate(detailProgram.id, index)}
|
|
onMoveReviewItem={(index, nextIndex) => moveDetailGate(detailProgram.id, index, nextIndex)}
|
|
onClose={() => {
|
|
publishProgramStates({});
|
|
window.close();
|
|
}}
|
|
standalone
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,#dffcf4_0,#f7f8fa_34%,#eef2ff_100%)] text-slate-900">
|
|
<div className="mx-auto max-w-[1600px] space-y-5 px-6 py-6">
|
|
<div className="flex justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsRelationPopupOpen(true)}
|
|
className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-100 text-lg font-black text-amber-700 shadow-sm ring-1 ring-amber-200 hover:bg-amber-200"
|
|
title="프로그램 연결도 및 관계 수정"
|
|
aria-label="프로그램 연결도 및 관계 수정"
|
|
>
|
|
!
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={toggleProgramEdit}
|
|
className={`flex items-center gap-2 rounded-full px-4 py-2 text-sm font-bold shadow-sm ${
|
|
isEditing
|
|
? 'bg-emerald-600 text-white hover:bg-emerald-700'
|
|
: 'bg-blue-600 text-white hover:bg-blue-700'
|
|
}`}
|
|
>
|
|
{isEditing ? <Save className="h-4 w-4" /> : <Edit3 className="h-4 w-4" />}
|
|
{isEditing ? '수정 완료' : '프로그램 추가 및 수정'}
|
|
</button>
|
|
</div>
|
|
|
|
{isEditing && (
|
|
<section className="flex items-center justify-between rounded-[24px] border border-white/70 bg-white/70 px-5 py-4 shadow-sm backdrop-blur">
|
|
<div>
|
|
<p className="text-[12px] font-extrabold uppercase tracking-wide text-blue-700">
|
|
프로그램 편집
|
|
</p>
|
|
<h2 className="mt-1 text-lg font-extrabold text-slate-950">
|
|
프로그램을 추가하거나 기존 내용을 수정합니다
|
|
</h2>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={addProgram}
|
|
className="flex items-center gap-2 rounded-full bg-blue-600 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-blue-700"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
프로그램 추가
|
|
</button>
|
|
</section>
|
|
)}
|
|
|
|
<FlowRow
|
|
label={content.cheonjiin.name}
|
|
description={content.cheonjiin.description}
|
|
steps={editableCheonjiinFlow}
|
|
onLabelClick={() => openProgramWindow('cheonjiin')}
|
|
activeStep={getMainActiveStep('cheonjiin')}
|
|
isEditing={isEditing}
|
|
onStepChange={(index, field, value) => updateStep('cheonjiin', index, field, value)}
|
|
onLabelChange={(value) => updateProgramTitle('cheonjiin', 'name', value)}
|
|
onDescriptionChange={(value) => updateProgramTitle('cheonjiin', 'description', value)}
|
|
format={content.cheonjiin.format}
|
|
onFormatChange={(value) => updateFormat('cheonjiin', value)}
|
|
deliverables={content.cheonjiin.deliverables}
|
|
onDeliverableChange={(index, value) => updateProgramDeliverable('cheonjiin', index, value)}
|
|
onAddStep={() => addStep('cheonjiin')}
|
|
onRemoveStep={(index) => removeStep('cheonjiin', index)}
|
|
onMoveStep={(index, nextIndex) => moveStep('cheonjiin', index, nextIndex)}
|
|
accent={{
|
|
iconBg: 'bg-teal-50',
|
|
iconText: 'text-teal-700',
|
|
labelText: 'text-teal-700',
|
|
arrowText: 'text-teal-600'
|
|
}}
|
|
/>
|
|
|
|
<div className="flex items-center gap-4 px-3 py-1">
|
|
<div className="flex h-9 w-9 items-center justify-center rounded-2xl bg-white/85 text-slate-500 shadow-sm ring-1 ring-white">
|
|
<ArrowDown className="h-5 w-5" />
|
|
</div>
|
|
{isEditing ? (
|
|
<input
|
|
value={content.wayPrimal.linkLabel}
|
|
onChange={(event) => updateProgramLinkLabel('wayPrimal', event.target.value)}
|
|
className="min-w-[360px] rounded-full border border-slate-200 bg-white/85 px-3 py-2 text-sm font-bold text-slate-700 outline-none focus:border-indigo-400"
|
|
/>
|
|
) : (
|
|
<div className="text-sm font-bold text-slate-600">
|
|
{content.wayPrimal.linkLabel}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<FlowRow
|
|
label={content.wayPrimal.name}
|
|
description={content.wayPrimal.description}
|
|
steps={editableWayPrimalFlow}
|
|
onLabelClick={() => openProgramWindow('wayPrimal')}
|
|
activeStep={getMainActiveStep('wayPrimal')}
|
|
isEditing={isEditing}
|
|
onStepChange={(index, field, value) => updateStep('wayPrimal', index, field, value)}
|
|
onLabelChange={(value) => updateProgramTitle('wayPrimal', 'name', value)}
|
|
onDescriptionChange={(value) => updateProgramTitle('wayPrimal', 'description', value)}
|
|
format={content.wayPrimal.format}
|
|
onFormatChange={(value) => updateFormat('wayPrimal', value)}
|
|
deliverables={content.wayPrimal.deliverables ?? []}
|
|
onDeliverableChange={(index, value) => updateProgramDeliverable('wayPrimal', index, value)}
|
|
onAddStep={() => addStep('wayPrimal')}
|
|
onRemoveStep={(index) => removeStep('wayPrimal', index)}
|
|
onMoveStep={(index, nextIndex) => moveStep('wayPrimal', index, nextIndex)}
|
|
accent={{
|
|
iconBg: 'bg-indigo-50',
|
|
iconText: 'text-indigo-700',
|
|
labelText: 'text-indigo-700',
|
|
arrowText: 'text-indigo-600'
|
|
}}
|
|
/>
|
|
|
|
{content.extraPrograms.map((program, programIndex) => (
|
|
<React.Fragment key={program.id}>
|
|
<div className="flex items-center gap-4 px-3 py-1">
|
|
<div className="flex h-9 w-9 items-center justify-center rounded-2xl bg-white/85 text-slate-500 shadow-sm ring-1 ring-white">
|
|
<ArrowDown className="h-5 w-5" />
|
|
</div>
|
|
{isEditing ? (
|
|
<input
|
|
value={program.linkLabel ?? `이전 프로그램 산출물을 ${program.name} 입력으로 연계`}
|
|
onChange={(event) => updateProgramLinkLabel(program.id, event.target.value)}
|
|
className="min-w-[360px] rounded-full border border-slate-200 bg-white/85 px-3 py-2 text-sm font-bold text-slate-700 outline-none focus:border-blue-400"
|
|
/>
|
|
) : (
|
|
<div className="text-sm font-bold text-slate-600">
|
|
{program.linkLabel ?? `이전 프로그램 산출물을 ${program.name} 입력으로 연계`}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{isEditing && (
|
|
<section className="rounded-[24px] border border-white/70 bg-white/70 px-5 py-4 shadow-sm backdrop-blur">
|
|
<div className="grid gap-3 lg:grid-cols-[220px_1fr_auto] lg:items-start">
|
|
<div>
|
|
<p className="text-[12px] font-extrabold uppercase tracking-wide text-blue-700">
|
|
추가 프로그램
|
|
</p>
|
|
<h2 className="mt-1 text-lg font-extrabold text-slate-950">프로그램 정보</h2>
|
|
</div>
|
|
<div className="grid gap-2 md:grid-cols-2">
|
|
<input
|
|
value={program.name}
|
|
onChange={(event) => updateProgram(programIndex, 'name', event.target.value)}
|
|
className="rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-sm font-extrabold text-slate-900 outline-none focus:border-blue-400"
|
|
/>
|
|
<input
|
|
value={program.description}
|
|
onChange={(event) => updateProgram(programIndex, 'description', event.target.value)}
|
|
className="rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-sm font-bold text-slate-700 outline-none focus:border-blue-400"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="button"
|
|
disabled={programIndex === 0}
|
|
onClick={() => moveProgram(programIndex, programIndex - 1)}
|
|
className="flex items-center gap-1 rounded-full bg-white px-3 py-2 text-[12px] font-extrabold text-slate-600 ring-1 ring-slate-200 hover:bg-slate-50 disabled:opacity-35"
|
|
>
|
|
<ArrowUp className="h-3.5 w-3.5" />
|
|
위
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={programIndex === content.extraPrograms.length - 1}
|
|
onClick={() => moveProgram(programIndex, programIndex + 1)}
|
|
className="flex items-center gap-1 rounded-full bg-white px-3 py-2 text-[12px] font-extrabold text-slate-600 ring-1 ring-slate-200 hover:bg-slate-50 disabled:opacity-35"
|
|
>
|
|
<ArrowDown className="h-3.5 w-3.5" />
|
|
아래
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
<FlowRow
|
|
label={program.name}
|
|
description={program.description}
|
|
steps={normalizeProgramSteps(program)}
|
|
onLabelClick={() => openProgramWindow(program.id)}
|
|
activeStep={getMainActiveStep(program.id)}
|
|
isEditing={isEditing}
|
|
onStepChange={(index, field, value) => updateProgramStep(programIndex, index, field, value)}
|
|
onLabelChange={(value) => updateProgramTitle(program.id, 'name', value)}
|
|
onDescriptionChange={(value) => updateProgramTitle(program.id, 'description', value)}
|
|
format={program.format}
|
|
onFormatChange={(value) => updateProgram(programIndex, 'format', value)}
|
|
deliverables={program.deliverables ?? []}
|
|
onDeliverableChange={(index, value) => updateProgramDeliverable(program.id, index, value)}
|
|
onAddStep={() => addStep(program.id)}
|
|
onRemoveStep={(index) => removeStep(program.id, index)}
|
|
onMoveStep={(index, nextIndex) => moveStep(program.id, index, nextIndex)}
|
|
onProgramDelete={() => removeProgram(programIndex)}
|
|
accent={{
|
|
iconBg: 'bg-blue-50',
|
|
iconText: 'text-blue-700',
|
|
labelText: 'text-blue-700',
|
|
arrowText: 'text-blue-600'
|
|
}}
|
|
/>
|
|
|
|
</React.Fragment>
|
|
))}
|
|
|
|
{isRelationPopupOpen && (
|
|
<RelationPopup
|
|
programs={programs}
|
|
onToggleRelation={toggleProgramRelation}
|
|
onClose={() => setIsRelationPopupOpen(false)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|