Fix wehago compare loading and matching workflow

scripts/run_server.sh

@@ -4,6 +4,7 @@ set -euo pipefail
 cd "$(dirname "$0")/.."
 
 PORT="${1:-${INTRANET_PORT:-8010}}"
+HEALTH_URL="http://127.0.0.1:${PORT}/health"
 
 if [ ! -x ".venv/bin/python" ]; then
   echo "가상환경이 없습니다. 먼저 아래를 실행하세요."
@@ -13,7 +14,19 @@ if [ ! -x ".venv/bin/python" ]; then
   exit 1
 fi
 
-export INTRANET_AUTO_RELOAD="${INTRANET_AUTO_RELOAD:-1}"
+if curl -fsS --max-time 2 "$HEALTH_URL" >/dev/null 2>&1; then
+  echo "이미 실행 중입니다: $HEALTH_URL"
+  exit 0
+fi
+
+if ss -ltn "( sport = :${PORT} )" | tail -n +2 | grep -q .; then
+  echo "포트 ${PORT} 는 이미 다른 프로세스가 사용 중입니다."
+  echo "기존 서버가 멈춘 상태라면 먼저 종료한 뒤 다시 실행하세요."
+  ss -ltnp "( sport = :${PORT} )" || true
+  exit 1
+fi
+
+export INTRANET_AUTO_RELOAD="${INTRANET_AUTO_RELOAD:-0}"
 export INTRANET_PORT="$PORT"
 
 exec ./.venv/bin/python main.py

templates/annual_summary.html

@@ -41,10 +41,10 @@
         font-size: 13px;
         font-weight: 800;
         letter-spacing: -0.01em;
-        background: rgba(255,255,255,0.92);
-        border: 1px solid var(--line);
-        border-radius: 12px;
-        padding: 8px 12px;
+        background: transparent;
+        border: 0;
+        border-radius: 0;
+        padding: 0;
     }
 
     .legend-swatch {
@@ -54,13 +54,12 @@
     }
 
     .chart-box {
-        background:
-            linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,247,249,0.98)),
-            radial-gradient(circle at top left, rgba(17, 17, 17, 0.045), transparent 36%);
-        border: 1px solid var(--line);
-        border-radius: 16px;
-        padding: 18px 20px 20px;
-        box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
+        background: transparent;
+        border: 0;
+        border-top: 1px solid var(--line);
+        border-radius: 0;
+        padding: 18px 0 0;
+        box-shadow: none;
         content-visibility: auto;
         contain-intrinsic-size: 620px;
     }
@@ -96,6 +95,8 @@
         min-height: 100%;
         content-visibility: auto;
         contain-intrinsic-size: 760px;
+        padding-right: 14px;
+        border-right: 1px solid rgba(217, 221, 227, 0.9);
     }
 
     .metric-grid {
@@ -128,8 +129,8 @@
     }
 
     .summary-overview .stat-card {
-        padding: 14px 14px 15px;
-        border-radius: 12px;
+        padding: 0 8px 12px 0;
+        border-radius: 0;
         gap: 4px;
     }
 
@@ -142,6 +143,48 @@
         line-height: 1.18;
     }
 
+    body[data-view-mode="dual"] .summary-panel {
+        grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
+        gap: 12px;
+        min-height: calc(100vh - 150px);
+    }
+
+    body[data-view-mode="dual"] .summary-overview {
+        gap: 10px;
+    }
+
+    body[data-view-mode="dual"] .metric-grid {
+        grid-template-columns: 1fr;
+        gap: 8px;
+    }
+
+    body[data-view-mode="dual"] .summary-overview .stat-card {
+        min-height: 64px;
+        padding: 10px 11px;
+    }
+
+    body[data-view-mode="dual"] .summary-overview .stat-card .value {
+        font-size: 18px;
+    }
+
+    body[data-view-mode="dual"] .chart-stack {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 12px;
+        align-items: stretch;
+        min-height: 100%;
+    }
+
+    body[data-view-mode="dual"] .chart-box {
+        padding: 12px 0 0;
+        min-height: 100%;
+    }
+
+    body[data-view-mode="dual"] .chart-svg,
+    body[data-view-mode="dual"] .expense-chart-svg {
+        aspect-ratio: 1560 / 620;
+        min-height: 360px;
+    }
+
     @media (max-width: 1000px) {
         .summary-layout,
         .summary-panel,
@@ -149,6 +192,13 @@
         .metric-grid {
             grid-template-columns: 1fr;
         }
+
+        .summary-overview {
+            padding-right: 0;
+            padding-bottom: 12px;
+            border-right: 0;
+            border-bottom: 1px solid rgba(217, 221, 227, 0.9);
+        }
     }
 </style>
 {% endblock %}

templates/base.html

@@ -20,6 +20,10 @@
             --page-gutter: clamp(14px, 1.8vw, 24px);
             --panel-pad: clamp(16px, 1.4vw, 20px);
             --page-frame-width: min(1520px, calc(100vw - (var(--page-gutter) * 2)));
+            --page-frame-width-dual: min(2560px, calc(100vw - (var(--page-gutter) * 2)));
+            --page-frame-width-single: min(1520px, calc(100vw - (var(--page-gutter) * 2)));
+            --status-widget-height: 34px;
+            --toolbar-row-height: 44px;
         }
 
         * {
@@ -48,11 +52,28 @@
             padding: var(--page-gutter);
         }
 
+        body[data-view-mode="single"] {
+            --page-frame-width: var(--page-frame-width-single);
+        }
+
+        body[data-view-mode="dual"] {
+            --page-frame-width: var(--page-frame-width-dual);
+            --page-gutter: clamp(4px, 0.45vw, 10px);
+            --panel-pad: clamp(12px, 1vw, 16px);
+        }
+
         .page {
             width: min(100%, var(--page-frame-width));
             margin: 0 auto;
             display: grid;
             gap: var(--page-gutter);
+            min-height: calc(100vh - (var(--page-gutter) * 2));
+            align-content: start;
+        }
+
+        body[data-view-mode="dual"] .page {
+            width: calc(100vw - (var(--page-gutter) * 2));
+            max-width: none;
         }
 
         .page > * {
@@ -96,12 +117,12 @@
         }
 
         .panel {
-            background: var(--panel);
-            border: 1px solid var(--line);
-            border-radius: 18px;
-            padding: var(--panel-pad);
-            box-shadow: 0 10px 24px rgba(21, 24, 29, 0.045);
-            backdrop-filter: blur(6px);
+            background: transparent;
+            border: 0;
+            border-radius: 0;
+            padding: 0;
+            box-shadow: none;
+            backdrop-filter: none;
         }
 
         .section-title {
@@ -145,11 +166,12 @@
         }
 
         .stat-card {
-            background: var(--white);
-            border: 1px solid var(--line);
-            border-radius: 14px;
-            padding: 14px 15px 13px;
-            box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
+            background: transparent;
+            border: 0;
+            border-radius: 0;
+            padding: 0 0 14px;
+            box-shadow: none;
+            border-bottom: 1px solid rgba(217, 221, 227, 0.9);
         }
 
         .stat-card .label {
@@ -249,6 +271,17 @@
             padding: 10px 12px;
             color: var(--ink);
             box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.03);
+            box-sizing: border-box;
+        }
+
+        input[type="text"],
+        input[type="number"],
+        input[type="date"],
+        select {
+            min-height: 38px;
+            line-height: 1.2;
+            padding-top: 8px;
+            padding-bottom: 8px;
         }
 
         select option {
@@ -301,6 +334,10 @@
             text-decoration: none;
             transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
             box-shadow: 0 8px 18px rgba(17, 17, 17, 0.14);
+            min-height: 38px;
+            box-sizing: border-box;
+            white-space: nowrap;
+            line-height: 1.2;
         }
 
         button:hover,
@@ -353,6 +390,72 @@
             stroke: #a93a3a;
         }
 
+        .modal-backdrop {
+            position: fixed;
+            inset: 0;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            background: rgba(20, 33, 47, 0.5);
+            z-index: 10000;
+            isolation: isolate;
+        }
+
+        .modal-backdrop.open,
+        .modal-backdrop.is-open {
+            display: flex;
+        }
+
+        .modal-card,
+        .related-modal-card {
+            position: relative;
+            z-index: 1;
+            background: #ffffff;
+            border: 1px solid var(--line);
+            box-shadow: 0 24px 64px rgba(21, 24, 29, 0.18);
+        }
+
+        .related-modal-card {
+            width: min(680px, 100%);
+            max-height: min(70vh, 760px);
+            overflow: hidden;
+            border-radius: 16px;
+            padding: 14px;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .related-modal-head {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 12px;
+            flex-wrap: wrap;
+        }
+
+        .related-modal-head--singleline {
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .related-modal-title {
+            margin: 0;
+            font-size: 16px;
+            font-weight: 800;
+            line-height: 1.2;
+        }
+
+        .related-modal-body {
+            display: grid;
+            gap: 10px;
+            overflow: auto;
+            min-height: 0;
+            overscroll-behavior: contain;
+        }
+
         .sr-only {
             position: absolute;
             width: 1px;
@@ -367,9 +470,10 @@
 
         .table-wrap {
             overflow: auto;
-            border: 1px solid var(--line);
-            border-radius: 14px;
-            background: var(--white);
+            border: 0;
+            border-top: 1px solid var(--line);
+            border-radius: 0;
+            background: transparent;
         }
 
         table {
@@ -396,7 +500,7 @@
         }
 
         tbody tr:nth-child(even) td {
-            background: var(--table-alt);
+            background: rgba(245, 246, 248, 0.65);
         }
 
         .empty {
@@ -421,13 +525,81 @@
             border-radius: 999px;
             background: rgba(248, 250, 252, 0.92);
             box-shadow: none;
-            padding: 6px 10px;
+            min-height: var(--status-widget-height);
+            padding: 0 10px;
             display: inline-flex;
             align-items: center;
             gap: 8px;
             backdrop-filter: blur(6px);
         }
 
+        .view-mode-switch {
+            position: relative;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 80px;
+            height: var(--status-widget-height);
+            min-height: var(--status-widget-height);
+            border-radius: 999px;
+            border: 1px solid var(--line);
+            background: #eef2f6;
+            color: #1f2937;
+            font-size: 11px;
+            font-weight: 800;
+            letter-spacing: -0.01em;
+            box-shadow: none;
+            padding: 0;
+            overflow: hidden;
+            cursor: pointer;
+            transition: background-color 0.16s ease, border-color 0.16s ease;
+        }
+
+        .view-mode-switch:hover {
+            transform: none;
+            background: #e7ecf2;
+        }
+
+        .view-mode-switch .label {
+            position: absolute;
+            top: 50%;
+            left: 3px;
+            width: 36px;
+            transform: translateY(-50%);
+            text-align: center;
+            color: #ffffff;
+            z-index: 2;
+            pointer-events: none;
+            user-select: none;
+            transition: left 0.2s ease;
+        }
+
+        .view-mode-switch::before {
+            content: "";
+            position: absolute;
+            top: 3px;
+            left: 3px;
+            width: 36px;
+            height: calc(var(--status-widget-height) - 8px);
+            border-radius: 999px;
+            background: #111827;
+            box-shadow: 0 6px 12px rgba(15, 23, 42, 0.18);
+            transition: transform 0.2s ease;
+            z-index: 1;
+        }
+
+        .view-mode-switch[data-mode="dual"]::before {
+            transform: translateX(38px);
+        }
+
+        .view-mode-switch[data-mode="dual"] .label {
+            left: 41px;
+        }
+
+        .view-mode-switch[data-mode="single"]::before {
+            transform: translateX(0);
+        }
+
         .sync-status-head {
             display: inline-flex;
             align-items: center;
@@ -511,9 +683,14 @@
 <div class="page">
     <nav class="nav">
         <a href="/" class="{% if request.url.path == '/' %}active{% endif %}">대시보드</a>
-        <a href="/projects" class="{% if request.url.path == '/projects' %}active{% endif %}">프로젝트 정보</a>
         <a href="/annual-summary" class="{% if request.url.path == '/annual-summary' %}active{% endif %}">연도별 수익/비용</a>
+        <a href="/process-cost" class="{% if request.url.path == '/process-cost' %}active{% endif %}">프로젝트 원가</a>
+        <a href="/projects" class="{% if request.url.path == '/projects' %}active{% endif %}">프로젝트 정보</a>
+        <a href="/wehago-compare" class="{% if request.url.path == '/wehago-compare' %}active{% endif %}">전표비교</a>
         <div class="nav-spacer"></div>
+        <button type="button" class="view-mode-switch" id="viewModeSwitch" data-mode="dual" aria-label="화면 구성 전환">
+            <span class="label" id="viewModeSwitchLabel">듀얼</span>
+        </button>
         <aside
             class="sync-status"
             id="syncStatusWidget"
@@ -545,6 +722,49 @@
 </div>
 {% block script %}{% endblock %}
 <script>
+    (() => {
+        const body = document.body;
+        const switchButton = document.getElementById("viewModeSwitch");
+        const switchLabel = document.getElementById("viewModeSwitchLabel");
+        if (!body || !switchButton || !switchLabel) return;
+
+        const MODE_KEY = "intranet-view-mode";
+        const SOURCE_KEY = "intranet-view-mode-source";
+
+        const computeAutoMode = () => {
+            const width = window.innerWidth || 0;
+            const height = window.innerHeight || 1;
+            const ratio = width / Math.max(height, 1);
+            return (width >= 1450 || ratio >= 1.7) ? "dual" : "single";
+        };
+
+        const applyMode = (mode) => {
+            const normalized = mode === "single" ? "single" : "dual";
+            body.dataset.viewMode = normalized;
+            switchButton.dataset.mode = normalized;
+            switchButton.setAttribute("aria-pressed", normalized === "single" ? "true" : "false");
+            switchLabel.textContent = normalized === "single" ? "싱글" : "듀얼";
+        };
+
+        const savedMode = window.localStorage.getItem(MODE_KEY);
+        const savedSource = window.localStorage.getItem(SOURCE_KEY);
+        if ((savedMode === "single" || savedMode === "dual") && savedSource === "manual") {
+            applyMode(savedMode);
+        } else {
+            const autoMode = computeAutoMode();
+            applyMode(autoMode);
+            window.localStorage.setItem(MODE_KEY, autoMode);
+            window.localStorage.setItem(SOURCE_KEY, "auto");
+        }
+
+        switchButton.addEventListener("click", () => {
+            const nextMode = body.dataset.viewMode === "single" ? "dual" : "single";
+            applyMode(nextMode);
+            window.localStorage.setItem(MODE_KEY, nextMode);
+            window.localStorage.setItem(SOURCE_KEY, "manual");
+        });
+    })();
+
     (() => {
         const widget = document.getElementById("syncStatusWidget");
         if (!widget) return;
@@ -645,7 +865,7 @@
         }
 
         function hasOpenModal() {
-            return Boolean(document.querySelector(".modal-backdrop.open"));
+            return Boolean(document.querySelector(".modal-backdrop.open, .modal-backdrop.is-open"));
         }
 
         function shouldDelayRefresh() {

templates/dashboard.html

@@ -10,7 +10,9 @@
         align-items: center;
         gap: 14px;
         flex-wrap: wrap;
-        margin-bottom: 16px;
+        margin-bottom: 20px;
+        padding-bottom: 14px;
+        border-bottom: 1px solid var(--line);
     }
 
     .dashboard-topbar-actions {
@@ -80,6 +82,8 @@
     .dashboard-status-panel {
         display: grid;
         gap: 12px;
+        padding-right: 12px;
+        border-right: 1px solid rgba(217, 221, 227, 0.9);
     }
 
     .dashboard-status-grid {
@@ -90,6 +94,7 @@
 
     .dashboard-status-grid .stat-card {
         min-height: 84px;
+        padding-right: 10px;
     }
 
     .dashboard-status-grid .stat-card .value {
@@ -131,13 +136,12 @@
     }
 
     .chart-shell {
-        background:
-            linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,247,249,0.98)),
-            radial-gradient(circle at top left, rgba(24, 24, 27, 0.045), transparent 38%);
-        border: 1px solid var(--line);
-        border-radius: 16px;
-        padding: 14px 16px 16px;
-        box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
+        background: transparent;
+        border: 0;
+        border-top: 1px solid var(--line);
+        border-radius: 0;
+        padding: 14px 0 0;
+        box-shadow: none;
         display: grid;
         gap: 12px;
         content-visibility: auto;
@@ -158,12 +162,12 @@
         display: inline-flex;
         align-items: center;
         gap: 8px;
-        border-radius: 10px;
-        padding: 6px 10px;
-        background: rgba(255,255,255,0.92);
-        border: 1px solid var(--line);
+        border-radius: 0;
+        padding: 0;
+        background: transparent;
+        border: 0;
         color: #363b44;
-        font-size: 12px;
+        font-size: 13px;
         font-weight: 700;
     }
 
@@ -182,11 +186,58 @@
         display: block;
     }
 
+    body[data-view-mode="dual"] .dashboard-layout {
+        grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
+        gap: 12px;
+        min-height: calc(100vh - 150px);
+    }
+
+    body[data-view-mode="dual"] .dashboard-status-grid {
+        grid-template-columns: 1fr;
+        gap: 8px;
+    }
+
+    body[data-view-mode="dual"] .dashboard-status-grid .stat-card {
+        min-height: 64px;
+        padding: 10px 11px;
+    }
+
+    body[data-view-mode="dual"] .dashboard-status-grid .stat-card .value {
+        font-size: clamp(16px, 1.15vw, 24px);
+    }
+
+    body[data-view-mode="dual"] .dashboard-chart-stack {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        grid-template-rows: minmax(0, 1fr);
+        gap: 12px;
+        min-height: 100%;
+    }
+
+    body[data-view-mode="dual"] .chart-panel {
+        gap: 8px;
+    }
+
+    body[data-view-mode="dual"] .chart-shell {
+        padding: 10px 0 0;
+        min-height: 100%;
+    }
+
+    body[data-view-mode="dual"] .chart-svg {
+        min-height: 320px;
+    }
+
     @media (max-width: 1200px) {
         .dashboard-layout {
             grid-template-columns: 1fr;
         }
 
+        .dashboard-status-panel {
+            padding-right: 0;
+            padding-bottom: 12px;
+            border-right: 0;
+            border-bottom: 1px solid rgba(217, 221, 227, 0.9);
+        }
+
         .dashboard-chart-stack {
             grid-template-rows: auto;
         }