From 8cfc44bf45ad4cd92fc5b15cd54e812abf359446 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, 14 Feb 2026 12:47:41 +0900
Subject: [PATCH] =?UTF-8?q?fix:=EC=98=81=EC=97=85=ED=8C=8C=ED=8A=B8?=
 =?UTF-8?q?=EB=84=88=20=EC=88=98=EC=A0=95=20=EB=AA=A8=EB=8B=AC=20validatio?=
 =?UTF-8?q?n=20=EC=97=90=EB=9F=AC=20=ED=91=9C=EC=8B=9C=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 폼을 AJAX 제출로 변경하여 422 에러 시 모달 내 에러 메시지 표시
- innerHTML로 로드된 script 태그 수동 실행 처리
- 컨트롤러에 JSON 응답 지원 추가

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../Sales/SalesManagerController.php          |   4 +
 .../views/sales/managers/index.blade.php      |  12 ++
 .../managers/partials/edit-modal.blade.php    | 184 ++++++++++++++----
 3 files changed, 159 insertions(+), 41 deletions(-)

diff --git a/app/Http/Controllers/Sales/SalesManagerController.php b/app/Http/Controllers/Sales/SalesManagerController.php
index fd8e5179..c936c9e6 100644
--- a/app/Http/Controllers/Sales/SalesManagerController.php
+++ b/app/Http/Controllers/Sales/SalesManagerController.php
@@ -211,6 +211,10 @@ public function update(Request $request, int $id)
 
         $this->service->updateSalesPartner($partner, $validated, $documents);
 
+        if ($request->expectsJson()) {
+            return response()->json(['success' => true, 'message' => '영업파트너 정보가 수정되었습니다.']);
+        }
+
         return redirect()->route('sales.managers.index')
             ->with('success', '영업파트너 정보가 수정되었습니다.');
     }
diff --git a/resources/views/sales/managers/index.blade.php b/resources/views/sales/managers/index.blade.php
index 5b3aee2c..cd3924da 100644
--- a/resources/views/sales/managers/index.blade.php
+++ b/resources/views/sales/managers/index.blade.php
@@ -256,6 +256,12 @@ class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none foc
     .then(response => response.text())
     .then(html => {
         content.innerHTML = html;
+        // innerHTML로 삽입된 script 태그 수동 실행
+        content.querySelectorAll('script').forEach(oldScript => {
+            const newScript = document.createElement('script');
+            newScript.textContent = oldScript.textContent;
+            oldScript.parentNode.replaceChild(newScript, oldScript);
+        });
     })
     .catch(error => {
         content.innerHTML = `
@@ -297,6 +303,12 @@ class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none foc
     .then(response => response.text())
     .then(html => {
         content.innerHTML = html;
+        // innerHTML로 삽입된 script 태그 수동 실행
+        content.querySelectorAll('script').forEach(oldScript => {
+            const newScript = document.createElement('script');
+            newScript.textContent = oldScript.textContent;
+            oldScript.parentNode.replaceChild(newScript, oldScript);
+        });
     })
     .catch(error => {
         content.innerHTML = `
diff --git a/resources/views/sales/managers/partials/edit-modal.blade.php b/resources/views/sales/managers/partials/edit-modal.blade.php
index e9186a9f..05980ac6 100644
--- a/resources/views/sales/managers/partials/edit-modal.blade.php
+++ b/resources/views/sales/managers/partials/edit-modal.blade.php
@@ -13,8 +13,19 @@
         </button>
     </div>
 
+    <!-- 에러 메시지 영역 -->
+    <div id="edit-modal-errors" class="hidden mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
+        <div class="flex items-center gap-2 mb-1">
+            <svg class="w-4 h-4 text-red-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <span class="text-sm font-medium text-red-700">입력 오류</span>
+        </div>
+        <ul id="edit-modal-error-list" class="text-sm text-red-600 ml-6 list-disc"></ul>
+    </div>
+
     <!-- 폼 -->
-    <form action="{{ route('sales.managers.update', $partner->id) }}" method="POST" enctype="multipart/form-data">
+    <form id="edit-partner-form" action="{{ route('sales.managers.update', $partner->id) }}" method="POST" enctype="multipart/form-data">
         @csrf
         @method('PUT')
 
@@ -165,7 +176,7 @@ class="mt-3 text-sm text-blue-600 hover:text-blue-800 flex items-center gap-1">
                     class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition text-sm">
                 취소
             </button>
-            <button type="submit"
+            <button type="submit" id="edit-submit-btn"
                     class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm">
                 수정
             </button>
@@ -174,46 +185,137 @@ class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition
 </div>
 
 <script>
-let modalDocIndex = 1;
+(function() {
+    let modalDocIndex = 1;
 
-function addDocumentRow() {
-    const container = document.getElementById('modal-document-list');
-    const html = `
-        <div class="flex items-center gap-3">
-            <select name="documents[${modalDocIndex}][document_type]"
-                    class="w-32 px-2 py-1.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
-                @foreach($documentTypes as $value => $label)
-                <option value="{{ $value }}">{{ $label }}</option>
-                @endforeach
-            </select>
-            <input type="file" name="documents[${modalDocIndex}][file]" accept="image/*,.pdf,.doc,.docx"
-                   class="flex-1 text-sm text-gray-500 file:mr-2 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-sm file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
-            <input type="text" name="documents[${modalDocIndex}][description]" placeholder="설명(선택)"
-                   class="w-32 px-2 py-1.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
-            <button type="button" onclick="this.parentElement.remove()" class="text-red-500 hover:text-red-700">
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-            </button>
-        </div>
-    `;
-    container.insertAdjacentHTML('beforeend', html);
-    modalDocIndex++;
-}
+    window.addDocumentRow = function() {
+        const container = document.getElementById('modal-document-list');
+        const html = `
+            <div class="flex items-center gap-3">
+                <select name="documents[${modalDocIndex}][document_type]"
+                        class="w-32 px-2 py-1.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    @foreach($documentTypes as $value => $label)
+                    <option value="{{ $value }}">{{ $label }}</option>
+                    @endforeach
+                </select>
+                <input type="file" name="documents[${modalDocIndex}][file]" accept="image/*,.pdf,.doc,.docx"
+                       class="flex-1 text-sm text-gray-500 file:mr-2 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-sm file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
+                <input type="text" name="documents[${modalDocIndex}][description]" placeholder="설명(선택)"
+                       class="w-32 px-2 py-1.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <button type="button" onclick="this.parentElement.remove()" class="text-red-500 hover:text-red-700">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+        `;
+        container.insertAdjacentHTML('beforeend', html);
+        modalDocIndex++;
+    };
 
-function deleteDocument(partnerId, documentId) {
-    if (!confirm('이 서류를 삭제하시겠습니까?')) return;
+    window.deleteDocument = function(partnerId, documentId) {
+        if (!confirm('이 서류를 삭제하시겠습니까?')) return;
 
-    fetch(`/sales/managers/${partnerId}/documents/${documentId}`, {
-        method: 'DELETE',
-        headers: {
-            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
-            'Accept': 'application/json'
-        }
-    }).then(response => {
-        if (response.ok) {
-            openEditModal(partnerId); // 모달 새로고침
-        }
-    });
-}
+        fetch(`/sales/managers/${partnerId}/documents/${documentId}`, {
+            method: 'DELETE',
+            headers: {
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
+                'Accept': 'application/json'
+            }
+        }).then(response => {
+            if (response.ok) {
+                openEditModal(partnerId);
+            }
+        });
+    };
+
+    // AJAX 폼 제출
+    const form = document.getElementById('edit-partner-form');
+    if (form) {
+        form.addEventListener('submit', function(e) {
+            e.preventDefault();
+
+            const errorsDiv = document.getElementById('edit-modal-errors');
+            const errorsList = document.getElementById('edit-modal-error-list');
+            const submitBtn = document.getElementById('edit-submit-btn');
+
+            // 에러 초기화
+            errorsDiv.classList.add('hidden');
+            errorsList.innerHTML = '';
+            submitBtn.disabled = true;
+            submitBtn.textContent = '저장 중...';
+
+            const formData = new FormData(form);
+
+            fetch(form.action, {
+                method: 'POST',
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'Accept': 'application/json',
+                },
+                body: formData
+            })
+            .then(response => {
+                if (response.status === 422) {
+                    return response.json().then(data => {
+                        // validation 에러 표시
+                        const errors = data.errors || {};
+                        const errorMessages = Object.values(errors).flat();
+                        const errorLabels = {
+                            'name': '이름',
+                            'email': '이메일',
+                            'phone': '전화번호',
+                            'password': '비밀번호',
+                            'role_ids': '역할',
+                        };
+
+                        errorMessages.forEach(msg => {
+                            // 영문 필드명을 한글로 치환
+                            let korMsg = msg;
+                            for (const [eng, kor] of Object.entries(errorLabels)) {
+                                korMsg = korMsg.replace(new RegExp(eng, 'gi'), kor);
+                            }
+                            // "The email has already been taken." → 한글 변환
+                            korMsg = korMsg
+                                .replace('The 이메일 has already been taken.', '이미 사용 중인 이메일입니다.')
+                                .replace('The 이름 field is required.', '이름은 필수 입력입니다.')
+                                .replace('The 이메일 field is required.', '이메일은 필수 입력입니다.')
+                                .replace('The 역할 field is required.', '역할을 하나 이상 선택해야 합니다.');
+
+                            const li = document.createElement('li');
+                            li.textContent = korMsg;
+                            errorsList.appendChild(li);
+                        });
+
+                        errorsDiv.classList.remove('hidden');
+                        errorsDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                        throw new Error('validation');
+                    });
+                }
+
+                if (!response.ok) {
+                    throw new Error('서버 오류가 발생했습니다.');
+                }
+
+                // 성공: 페이지 새로고침
+                if (typeof showToast === 'function') {
+                    showToast('영업파트너 정보가 수정되었습니다.', 'success');
+                }
+                window.location.reload();
+            })
+            .catch(error => {
+                if (error.message !== 'validation') {
+                    errorsDiv.classList.remove('hidden');
+                    const li = document.createElement('li');
+                    li.textContent = error.message || '수정 중 오류가 발생했습니다.';
+                    errorsList.appendChild(li);
+                }
+            })
+            .finally(() => {
+                submitBtn.disabled = false;
+                submitBtn.textContent = '수정';
+            });
+        });
+    }
+})();
 </script>