From 367a7bbe56b4a9f410f5f9e8d80339361ee87a5b 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: Sat, 28 Feb 2026 14:55:15 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[approvals]=20=EA=B2=B0=EC=9E=AC?=
 =?UTF-8?q?=EC=84=A0=20=EC=B9=B4=EB=93=9C=20=EB=93=9C=EB=9E=98=EA=B7=B8=20?=
 =?UTF-8?q?=EC=95=A4=20=EB=93=9C=EB=A1=AD=20=EC=88=9C=EC=84=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SortableJS로 결재선 요약 카드 드래그 앤 드롭 지원
- 순서 변경 시 Alpine 데이터 동기화 및 카드 라벨 자동 갱신
- hover/grab/ghost/chosen 시각 피드백 CSS 추가
- 2명 이상 시 '드래그하여 순서를 변경할 수 있습니다' 힌트 표시
- CSS ::after로 카드 간 화살표 표시 (드래그 시 자연스럽게 이동)
---
 resources/views/approvals/create.blade.php | 63 +++++++++++++++++++---
 resources/views/approvals/edit.blade.php   | 63 +++++++++++++++++++---
 2 files changed, 114 insertions(+), 12 deletions(-)

diff --git a/resources/views/approvals/create.blade.php b/resources/views/approvals/create.blade.php
index c15c8bdd..5c3a7f19 100644
--- a/resources/views/approvals/create.blade.php
+++ b/resources/views/approvals/create.blade.php
@@ -121,6 +121,34 @@ class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm fon
     #quill-container .ql-editor { min-height: 260px; font-size: 0.875rem; }
     #quill-container .ql-toolbar { border-radius: 0.5rem 0.5rem 0 0; border-color: #d1d5db; }
     #quill-container .ql-container { border-radius: 0 0 0.5rem 0.5rem; border-color: #d1d5db; }
+    #summary-sortable .step-card {
+        cursor: grab;
+        position: relative;
+        margin-right: 24px;
+        user-select: none;
+        transition: transform 0.15s ease, box-shadow 0.15s ease;
+    }
+    #summary-sortable .step-card:last-child { margin-right: 0; }
+    #summary-sortable .step-card:not(:last-child)::after {
+        content: '→';
+        position: absolute;
+        right: -18px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #d1d5db;
+        font-size: 14px;
+        pointer-events: none;
+    }
+    #summary-sortable .step-card:hover {
+        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+        transform: translateY(-1px);
+    }
+    #summary-sortable .step-card:active { cursor: grabbing; }
+    #summary-sortable .step-card.sortable-ghost { opacity: 0.3; }
+    #summary-sortable .step-card.sortable-chosen {
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        transform: translateY(-2px);
+    }
 </style>
 @endpush
 
@@ -128,6 +156,7 @@ class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm fon
 <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
 <script>
 let quillInstance = null;
+var summarySortableInstance = null;
 
 function toggleEditor() {
     const useEditor = document.getElementById('useEditor').checked;
@@ -200,6 +229,8 @@ function updateApprovalLineSummary() {
     const steps = editorEl._x_dataStack[0].steps;
     const summaryEl = document.getElementById('approval-line-summary');
 
+    if (summarySortableInstance) { summarySortableInstance.destroy(); summarySortableInstance = null; }
+
     if (!steps || steps.length === 0) {
         summaryEl.className = 'p-3 bg-gray-50 rounded-lg border border-gray-200 flex items-center';
         summaryEl.innerHTML = '<span class="text-sm text-gray-400">결재선이 설정되지 않았습니다.</span>';
@@ -221,12 +252,8 @@ function updateApprovalLineSummary() {
         var stepLabel = s.step_type === 'reference' ? label : count + '차 ' + label;
         var position = s.position || '';
 
-        if (i > 0) {
-            cards.push('<span class="text-gray-300 flex items-center mx-1">&rarr;</span>');
-        }
-
         cards.push(
-            '<div class="text-center px-3 py-2 rounded-lg border ' + bg + '" style="min-width: 72px;">' +
+            '<div class="step-card text-center px-3 py-2 rounded-lg border ' + bg + '" data-index="' + i + '" style="min-width: 72px;">' +
             '<div class="text-xs font-medium ' + labelColor + '">' + stepLabel + '</div>' +
             (position ? '<div class="text-xs text-gray-400 mt-0.5">' + position + '</div>' : '') +
             '<div class="text-sm font-semibold text-gray-800 mt-0.5">' + s.user_name + '</div>' +
@@ -235,7 +262,31 @@ function updateApprovalLineSummary() {
     });
 
     summaryEl.className = 'p-3 bg-gray-50 rounded-lg border border-gray-200';
-    summaryEl.innerHTML = '<div class="flex flex-wrap items-center gap-1">' + cards.join('') + '</div>';
+    summaryEl.innerHTML = '<div id="summary-sortable" class="flex flex-wrap items-center">' + cards.join('') + '</div>' +
+        (steps.length > 1 ? '<div class="text-xs text-gray-400 mt-2">드래그하여 순서를 변경할 수 있습니다</div>' : '');
+
+    initSummarySortable();
+}
+
+function initSummarySortable() {
+    if (summarySortableInstance) { summarySortableInstance.destroy(); summarySortableInstance = null; }
+    var el = document.getElementById('summary-sortable');
+    if (!el || typeof Sortable === 'undefined') return;
+
+    summarySortableInstance = Sortable.create(el, {
+        animation: 150,
+        ghostClass: 'sortable-ghost',
+        chosenClass: 'sortable-chosen',
+        onEnd: function(evt) {
+            if (evt.oldIndex === evt.newIndex) return;
+            var editorEl = document.getElementById('approval-line-editor');
+            if (!editorEl || !editorEl._x_dataStack) return;
+            var steps = editorEl._x_dataStack[0].steps;
+            var item = steps.splice(evt.oldIndex, 1)[0];
+            steps.splice(evt.newIndex, 0, item);
+            updateApprovalLineSummary();
+        }
+    });
 }
 
 document.addEventListener('keydown', function(e) {
diff --git a/resources/views/approvals/edit.blade.php b/resources/views/approvals/edit.blade.php
index 08a867cc..66c4b083 100644
--- a/resources/views/approvals/edit.blade.php
+++ b/resources/views/approvals/edit.blade.php
@@ -155,6 +155,34 @@ class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm fon
     #quill-container .ql-editor { min-height: 260px; font-size: 0.875rem; }
     #quill-container .ql-toolbar { border-radius: 0.5rem 0.5rem 0 0; border-color: #d1d5db; }
     #quill-container .ql-container { border-radius: 0 0 0.5rem 0.5rem; border-color: #d1d5db; }
+    #summary-sortable .step-card {
+        cursor: grab;
+        position: relative;
+        margin-right: 24px;
+        user-select: none;
+        transition: transform 0.15s ease, box-shadow 0.15s ease;
+    }
+    #summary-sortable .step-card:last-child { margin-right: 0; }
+    #summary-sortable .step-card:not(:last-child)::after {
+        content: '→';
+        position: absolute;
+        right: -18px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #d1d5db;
+        font-size: 14px;
+        pointer-events: none;
+    }
+    #summary-sortable .step-card:hover {
+        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+        transform: translateY(-1px);
+    }
+    #summary-sortable .step-card:active { cursor: grabbing; }
+    #summary-sortable .step-card.sortable-ghost { opacity: 0.3; }
+    #summary-sortable .step-card.sortable-chosen {
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        transform: translateY(-2px);
+    }
 </style>
 @endpush
 
@@ -162,6 +190,7 @@ class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm fon
 <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
 <script>
 let quillInstance = null;
+var summarySortableInstance = null;
 
 function toggleEditor() {
     const useEditor = document.getElementById('useEditor').checked;
@@ -234,6 +263,8 @@ function updateApprovalLineSummary() {
     const steps = editorEl._x_dataStack[0].steps;
     const summaryEl = document.getElementById('approval-line-summary');
 
+    if (summarySortableInstance) { summarySortableInstance.destroy(); summarySortableInstance = null; }
+
     if (!steps || steps.length === 0) {
         summaryEl.className = 'p-3 bg-gray-50 rounded-lg border border-gray-200 flex items-center';
         summaryEl.innerHTML = '<span class="text-sm text-gray-400">결재선이 설정되지 않았습니다.</span>';
@@ -255,12 +286,8 @@ function updateApprovalLineSummary() {
         var stepLabel = s.step_type === 'reference' ? label : count + '차 ' + label;
         var position = s.position || '';
 
-        if (i > 0) {
-            cards.push('<span class="text-gray-300 flex items-center mx-1">&rarr;</span>');
-        }
-
         cards.push(
-            '<div class="text-center px-3 py-2 rounded-lg border ' + bg + '" style="min-width: 72px;">' +
+            '<div class="step-card text-center px-3 py-2 rounded-lg border ' + bg + '" data-index="' + i + '" style="min-width: 72px;">' +
             '<div class="text-xs font-medium ' + labelColor + '">' + stepLabel + '</div>' +
             (position ? '<div class="text-xs text-gray-400 mt-0.5">' + position + '</div>' : '') +
             '<div class="text-sm font-semibold text-gray-800 mt-0.5">' + s.user_name + '</div>' +
@@ -269,7 +296,31 @@ function updateApprovalLineSummary() {
     });
 
     summaryEl.className = 'p-3 bg-gray-50 rounded-lg border border-gray-200';
-    summaryEl.innerHTML = '<div class="flex flex-wrap items-center gap-1">' + cards.join('') + '</div>';
+    summaryEl.innerHTML = '<div id="summary-sortable" class="flex flex-wrap items-center">' + cards.join('') + '</div>' +
+        (steps.length > 1 ? '<div class="text-xs text-gray-400 mt-2">드래그하여 순서를 변경할 수 있습니다</div>' : '');
+
+    initSummarySortable();
+}
+
+function initSummarySortable() {
+    if (summarySortableInstance) { summarySortableInstance.destroy(); summarySortableInstance = null; }
+    var el = document.getElementById('summary-sortable');
+    if (!el || typeof Sortable === 'undefined') return;
+
+    summarySortableInstance = Sortable.create(el, {
+        animation: 150,
+        ghostClass: 'sortable-ghost',
+        chosenClass: 'sortable-chosen',
+        onEnd: function(evt) {
+            if (evt.oldIndex === evt.newIndex) return;
+            var editorEl = document.getElementById('approval-line-editor');
+            if (!editorEl || !editorEl._x_dataStack) return;
+            var steps = editorEl._x_dataStack[0].steps;
+            var item = steps.splice(evt.oldIndex, 1)[0];
+            steps.splice(evt.newIndex, 0, item);
+            updateApprovalLineSummary();
+        }
+    });
 }
 
 document.addEventListener('keydown', function(e) {