From fe34c2d99aceeecdd913fb878893cf7b7321a8cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Thu, 12 Mar 2026 10:47:33 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[juil]=20=EA=B1=B4=EC=84=A4PMIS=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=8F=20=EC=97=85=EB=AC=B4=20?=
 =?UTF-8?q?Flow=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 건설PMIS 메뉴 페이지 생성 (construction-pmis.blade.php)
- 업무 Flow 보기 버튼 → 모달창 4개 탭 구현
- KCC KOUP 업무 Flow 이미지 4장 포함
- PlanningController에 constructionPmis 메서드 추가
---
 .../Controllers/Juil/PlanningController.php   |   9 ++
 .../views/juil/construction-pmis.blade.php    | 137 ++++++++++++++++++
 routes/web.php                                |   1 +
 3 files changed, 147 insertions(+)
 create mode 100644 resources/views/juil/construction-pmis.blade.php

diff --git a/app/Http/Controllers/Juil/PlanningController.php b/app/Http/Controllers/Juil/PlanningController.php
index 49965eea..153dbec1 100644
--- a/app/Http/Controllers/Juil/PlanningController.php
+++ b/app/Http/Controllers/Juil/PlanningController.php
@@ -35,4 +35,13 @@ public function workflow(Request $request): View|Response
 
         return view('juil.workflow');
     }
+
+    public function constructionPmis(Request $request): View|Response
+    {
+        if ($request->header('HX-Request')) {
+            return response('', 200)->header('HX-Redirect', route('juil.construction-pmis'));
+        }
+
+        return view('juil.construction-pmis');
+    }
 }
diff --git a/resources/views/juil/construction-pmis.blade.php b/resources/views/juil/construction-pmis.blade.php
new file mode 100644
index 00000000..56ef0357
--- /dev/null
+++ b/resources/views/juil/construction-pmis.blade.php
@@ -0,0 +1,137 @@
+@extends('layouts.app')
+
+@section('title', '건설PMIS')
+
+@section('content')
+<div id="root"></div>
+@endsection
+
+@push('scripts')
+<script src="https://cdn.tailwindcss.com"></script>
+@include('partials.react-cdn')
+<script type="text/babel">
+@verbatim
+const { useState, useCallback } = React;
+
+const FLOW_TABS = [
+    { id: 'registration', label: '협력업체 최초등록', image: '/images/juil/pmis-flow/flow-01-registration.png' },
+    { id: 'daily', label: '일상 업무 흐름', image: '/images/juil/pmis-flow/flow-02-daily.png' },
+    { id: 'corrective', label: '시정조치 및 재해예방조치', image: '/images/juil/pmis-flow/flow-03-corrective.png' },
+    { id: 'safety', label: '안전관리업무', image: '/images/juil/pmis-flow/flow-04-safety.png' },
+];
+
+function FlowModal({ isOpen, onClose }) {
+    const [activeTab, setActiveTab] = useState('registration');
+
+    if (!isOpen) return null;
+
+    const activeFlow = FLOW_TABS.find(t => t.id === activeTab);
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center" onClick={onClose}>
+            {/* 배경 오버레이 */}
+            <div className="absolute inset-0 bg-black/50"></div>
+
+            {/* 모달 본체 */}
+            <div
+                className="relative bg-white rounded-xl shadow-2xl"
+                style={{ width: '90vw', maxWidth: '1100px', maxHeight: '90vh' }}
+                onClick={e => e.stopPropagation()}
+            >
+                {/* 헤더 */}
+                <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
+                    <h2 className="text-lg font-bold text-gray-800">KOUP 활용 업무 FLOW</h2>
+                    <button
+                        onClick={onClose}
+                        className="p-1 rounded-lg hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition"
+                    >
+                        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+
+                {/* 탭 네비게이션 */}
+                <div className="flex border-b border-gray-200 bg-gray-50">
+                    {FLOW_TABS.map(tab => (
+                        <button
+                            key={tab.id}
+                            onClick={() => setActiveTab(tab.id)}
+                            className={`flex-1 px-4 py-3 text-sm font-medium transition-colors ${
+                                activeTab === tab.id
+                                    ? 'text-blue-700 bg-white border-b-2 border-blue-600'
+                                    : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'
+                            }`}
+                        >
+                            {tab.label}
+                        </button>
+                    ))}
+                </div>
+
+                {/* 이미지 영역 */}
+                <div className="p-4 overflow-auto" style={{ maxHeight: 'calc(90vh - 130px)' }}>
+                    {activeFlow && (
+                        <img
+                            src={activeFlow.image}
+                            alt={activeFlow.label}
+                            className="w-full h-auto rounded-lg border border-gray-200"
+                        />
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function ConstructionPmis() {
+    const [showFlowModal, setShowFlowModal] = useState(false);
+
+    return (
+        <div className="p-6">
+            {/* 페이지 헤더 */}
+            <div className="flex items-center justify-between mb-6">
+                <div>
+                    <h1 className="text-2xl font-bold text-gray-800">건설PMIS</h1>
+                    <p className="text-sm text-gray-500 mt-1">KCC 공사관리프로그램 기반 건설 프로젝트 관리 시스템</p>
+                </div>
+                <button
+                    onClick={() => setShowFlowModal(true)}
+                    className="inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition shadow-sm font-medium text-sm"
+                >
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
+                    </svg>
+                    업무 Flow 보기
+                </button>
+            </div>
+
+            {/* 준비 중 안내 카드 */}
+            <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-12 text-center">
+                <div className="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <svg className="w-8 h-8 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                    </svg>
+                </div>
+                <h3 className="text-lg font-semibold text-gray-700 mb-2">건설PMIS 기능 준비 중</h3>
+                <p className="text-gray-500 text-sm mb-6">
+                    KCC 공사관리프로그램(KOUP)을 참고하여 건설 프로젝트 관리 기능을 구현 중입니다.
+                </p>
+                <div className="flex flex-wrap justify-center gap-3">
+                    {['협력업체 관리', '일상 업무', '시정조치', '재해예방', '안전관리'].map(item => (
+                        <span key={item} className="px-3 py-1.5 bg-gray-100 text-gray-600 rounded-full text-xs font-medium">
+                            {item}
+                        </span>
+                    ))}
+                </div>
+            </div>
+
+            {/* Flow 모달 */}
+            <FlowModal isOpen={showFlowModal} onClose={() => setShowFlowModal(false)} />
+        </div>
+    );
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(<ConstructionPmis />);
+@endverbatim
+</script>
+@endpush
diff --git a/routes/web.php b/routes/web.php
index e3f52de9..09eeac93 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1724,6 +1724,7 @@
     Route::get('/estimate', [PlanningController::class, 'estimate'])->name('estimate');
     Route::get('/project', [PlanningController::class, 'project'])->name('project');
     Route::get('/workflow', [PlanningController::class, 'workflow'])->name('workflow');
+    Route::get('/construction-pmis', [PlanningController::class, 'constructionPmis'])->name('construction-pmis');
 
     // 공사현장 사진대지
     Route::prefix('construction-photos')->name('construction-photos.')->group(function () {