Hyein/HM-Program
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish flow map window and page title

Browse Source
This commit is contained in:
김혜인
2026-06-24 14:59:49 +09:00
parent c7b3273b26
commit 2e83ce11af
3 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
flow.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>유역면적 산정 피드백 엔진</title> <title>프로그램 흐름도</title>
<link rel="icon" href="data:," /> <link rel="icon" href="data:," />
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
</head> </head>

2
index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>유역면적 산정 피드백 엔진</title> <title>프로그램 흐름도</title>
<link rel="icon" href="data:," /> <link rel="icon" href="data:," />
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
</head> </head>

26
src/App.jsx
View File

@@ -1677,7 +1677,7 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
</button> </button>
)} )}
</div> </div>
<div className="grid gap-3 lg:grid-cols-2"> <div className="grid grid-cols-2 gap-3">
<label className="block"> <label className="block">
<span className="text-[12px] font-black text-slate-500">비교 프로그램 A</span> <span className="text-[12px] font-black text-slate-500">비교 프로그램 A</span>
<select <select
@@ -1724,7 +1724,7 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
</div> </div>
)} )}
<div className="mt-4 grid gap-4 lg:grid-cols-2"> <div className="mt-4 grid grid-cols-2 gap-4">
{renderProgramSummary(leftProgram)} {renderProgramSummary(leftProgram)}
{renderProgramSummary(rightProgram)} {renderProgramSummary(rightProgram)}
</div> </div>
@@ -1750,7 +1750,7 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
return ( return (
<div <div
key={`step-compare-${stepIndex}`} key={`step-compare-${stepIndex}`}
className="grid gap-3 rounded-2xl border border-slate-100 bg-slate-50/80 p-3 lg:grid-cols-[minmax(0,1fr)_minmax(280px,1.35fr)_minmax(0,1fr)]" className="grid grid-cols-[minmax(0,1fr)_minmax(230px,1.35fr)_minmax(0,1fr)] gap-3 rounded-2xl border border-slate-100 bg-slate-50/80 p-3"
> >
<div className="rounded-2xl bg-amber-50/70 p-3 ring-1 ring-amber-100"> <div className="rounded-2xl bg-amber-50/70 p-3 ring-1 ring-amber-100">
<span className="text-[11px] font-black text-amber-700">{leftProgram?.name ?? 'A'} 스텝</span> <span className="text-[11px] font-black text-amber-700">{leftProgram?.name ?? 'A'} 스텝</span>
@@ -1992,7 +1992,7 @@ function RelationTreePanel({
const miniNodeWidth = 128; const miniNodeWidth = 128;
const miniNodeHeight = 38; const miniNodeHeight = 38;
const miniColumnGap = 52; const miniColumnGap = 52;
const miniRowGap = 96; const miniRowGap = fullPage ? 96 : 72;
const miniPadding = 34; const miniPadding = 34;
const miniSideLaneWidth = 96; const miniSideLaneWidth = 96;
const sidebarSizes = [420, 560, 720]; const sidebarSizes = [420, 560, 720];
@@ -2004,7 +2004,7 @@ function RelationTreePanel({
miniPadding * 2 + miniSideLaneWidth + miniMaxLevelCount * miniNodeWidth + Math.max(0, miniMaxLevelCount - 1) * miniColumnGap miniPadding * 2 + miniSideLaneWidth + miniMaxLevelCount * miniNodeWidth + Math.max(0, miniMaxLevelCount - 1) * miniColumnGap
); );
const miniGraphHeight = Math.max( const miniGraphHeight = Math.max(
fullPage ? 720 : 660, fullPage ? 720 : 430,
miniPadding * 2 + graphLevels.length * miniNodeHeight + Math.max(0, graphLevels.length - 1) * miniRowGap miniPadding * 2 + graphLevels.length * miniNodeHeight + Math.max(0, graphLevels.length - 1) * miniRowGap
); );
const miniNodePositions = Object.fromEntries( const miniNodePositions = Object.fromEntries(
@@ -2262,7 +2262,7 @@ function RelationTreePanel({
{relations.length > 0 ? ( {relations.length > 0 ? (
<div <div
ref={handleMapViewportRef} ref={handleMapViewportRef}
className={`${fullPage ? 'h-[calc(100vh-150px)] overflow-hidden' : 'h-[660px] overflow-hidden'} relative cursor-grab touch-none overscroll-contain rounded-2xl bg-white ring-1 ring-slate-100 ${mapDrag ? 'cursor-grabbing' : ''}`} className={`${fullPage ? 'h-[calc(100vh-150px)] overflow-hidden' : 'h-[450px] overflow-hidden'} relative cursor-grab touch-none overscroll-contain rounded-2xl bg-white ring-1 ring-slate-100 ${mapDrag ? 'cursor-grabbing' : ''}`}
onPointerDown={handleMapPointerDown} onPointerDown={handleMapPointerDown}
onPointerMove={handleMapPointerMove} onPointerMove={handleMapPointerMove}
onPointerUp={handleMapPointerEnd} onPointerUp={handleMapPointerEnd}
@@ -2306,11 +2306,11 @@ function RelationTreePanel({
preserveAspectRatio="none" preserveAspectRatio="none"
> >
<defs> <defs>
<marker id="sidebar-relation-arrow" markerWidth="9" markerHeight="9" refX="8" refY="4.5" orient="auto" markerUnits="strokeWidth"> <marker id="sidebar-relation-arrow" markerWidth="6" markerHeight="6" refX="5.5" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M 0 0 L 9 4.5 L 0 9 z" fill="#2563eb" /> <path d="M 0 0 L 6 3 L 0 6 z" fill="#2563eb" />
</marker> </marker>
<marker id="sidebar-relation-arrow-skip" markerWidth="9" markerHeight="9" refX="8" refY="4.5" orient="auto" markerUnits="strokeWidth"> <marker id="sidebar-relation-arrow-skip" markerWidth="6" markerHeight="6" refX="5.5" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M 0 0 L 9 4.5 L 0 9 z" fill="#7c3aed" /> <path d="M 0 0 L 6 3 L 0 6 z" fill="#7c3aed" />
</marker> </marker>
</defs> </defs>
{relations.map((relation) => { {relations.map((relation) => {
@@ -2400,6 +2400,10 @@ function RelationTreePanel({
} }
export default function App() { export default function App() {
useEffect(() => {
document.title = '프로그램 흐름도';
}, []);
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const isDetailWindow = urlParams.get('view') === 'program-detail' || urlParams.get('view') === 'cheonjiin-detail'; const isDetailWindow = urlParams.get('view') === 'program-detail' || urlParams.get('view') === 'cheonjiin-detail';
const isRelationMapWindow = urlParams.get('view') === 'relation-map'; const isRelationMapWindow = urlParams.get('view') === 'relation-map';
@@ -3123,7 +3127,7 @@ export default function App() {
window.open( window.open(
'/?view=relation-map', '/?view=relation-map',
'program-relation-map', 'program-relation-map',
'popup=yes,width=700,height=820,left=120,top=40,resizable=yes,scrollbars=yes' 'popup=yes,width=830,height=890,left=120,top=40,resizable=yes,scrollbars=yes'
); );
}; };