From 56f626911aafed5379b90f8facef1281378c6607 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Thu, 9 Apr 2026 13:46:46 +0900
Subject: [PATCH] =?UTF-8?q?fix(tkqc):=20=EA=B4=80=EB=A6=AC=ED=95=A8=20?=
 =?UTF-8?q?=EB=8D=B0=EC=8A=A4=ED=81=AC=ED=86=B1=20=EC=9D=B8=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B8=20=EC=B9=B4=EB=93=9C=EC=97=90=EB=8F=84=20=EC=82=AC?=
 =?UTF-8?q?=EC=A7=84=20=EB=B3=B4=EC=B6=A9=20UI=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

첫 커밋(178155d)에서는 createModalContent(완료된 이슈 상세 모달)에만
사진 보충 input을 추가했는데, 데스크톱 관리함은 상세 모달이 아니라
createInProgressRow 로 렌더링되는 인라인 카드(저장/삭제/완료처리 버튼이
카드에 직접 있는 형태) 이었음. 사용자 스크린샷으로 확인.

- createInProgressRow: "업로드 사진" 섹션 아래 file input 추가
- saveIssueChanges: 저장 시 빈 슬롯에만 photo/photo2~5 base64 업로드

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../web/issues-management.html                |  2 +-
 .../web/static/js/pages/issues-management.js  | 64 +++++++++++++++----
 2 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/system3-nonconformance/web/issues-management.html b/system3-nonconformance/web/issues-management.html
index 36f6ffc..5f8a2fc 100644
--- a/system3-nonconformance/web/issues-management.html
+++ b/system3-nonconformance/web/issues-management.html
@@ -349,6 +349,6 @@
     <script src="/static/js/utils/photo-modal.js?v=2026031401"></script>
     <script src="/static/js/utils/toast.js?v=2026031401"></script>
     <script src="/static/js/components/mobile-bottom-nav.js?v=2026031401"></script>
-    <script src="/static/js/pages/issues-management.js?v=2026040901"></script>
+    <script src="/static/js/pages/issues-management.js?v=2026040902"></script>
 </body>
 </html>
diff --git a/system3-nonconformance/web/static/js/pages/issues-management.js b/system3-nonconformance/web/static/js/pages/issues-management.js
index dc1f3cf..2be57de 100644
--- a/system3-nonconformance/web/static/js/pages/issues-management.js
+++ b/system3-nonconformance/web/static/js/pages/issues-management.js
@@ -427,25 +427,37 @@ function createInProgressRow(issue, project) {
                     <div>
                         <label class="block text-sm font-medium text-gray-700 mb-2">업로드 사진</label>
                         ${(() => {
-                            const photos = [
+                            const photoSlots = [
                                 issue.photo_path,
                                 issue.photo_path2,
                                 issue.photo_path3,
                                 issue.photo_path4,
                                 issue.photo_path5
-                            ].filter(p => p);
+                            ];
+                            const filled = photoSlots.filter(p => p);
+                            const emptyCount = 5 - filled.length;
 
-                            if (photos.length === 0) {
-                                return '<div class="w-20 h-20 bg-gray-100 rounded-lg flex items-center justify-center text-gray-400 text-xs border-2 border-dashed border-gray-300">사진 없음</div>';
-                            }
+                            const existing = filled.length === 0
+                                ? '<div class="w-20 h-20 bg-gray-100 rounded-lg flex items-center justify-center text-gray-400 text-xs border-2 border-dashed border-gray-300">사진 없음</div>'
+                                : `<div class="flex flex-wrap gap-2">
+                                     ${filled.map((path, idx) => `
+                                         <img src="${path}" class="w-20 h-20 object-cover rounded-lg cursor-pointer border-2 border-gray-200 hover:border-blue-400 transition-colors" onclick="openPhotoModal('${path}')" alt="업로드 사진 ${idx + 1}">
+                                     `).join('')}
+                                   </div>`;
 
-                            return `
-                                <div class="flex flex-wrap gap-2">
-                                    ${photos.map((path, idx) => `
-                                        <img src="${path}" class="w-20 h-20 object-cover rounded-lg cursor-pointer border-2 border-gray-200 hover:border-blue-400 transition-colors" onclick="openPhotoModal('${path}')" alt="업로드 사진 ${idx + 1}">
-                                    `).join('')}
+                            // 사진 보충 UI (빈 슬롯에만 채움, 저장 버튼 클릭 시 업로드)
+                            const uploadUi = isPendingCompletion ? '' : (emptyCount > 0 ? `
+                                <div class="mt-3 pt-3 border-t border-gray-200">
+                                    <label class="block text-xs font-medium text-gray-600 mb-1">
+                                        <i class="fas fa-plus-circle text-blue-500 mr-1"></i>사진 보충 (남은 슬롯: ${emptyCount}장)
+                                    </label>
+                                    <input type="file" id="original_photo_${issue.id}" accept="image/*" multiple
+                                           class="block w-full text-xs text-gray-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
+                                    <p class="text-xs text-gray-400 mt-1">※ 비어있는 슬롯에만 자동으로 채워집니다 (기존 사진은 유지). 저장 버튼 클릭 시 업로드.</p>
                                 </div>
-                            `;
+                            ` : '<p class="text-xs text-gray-400 mt-2"><i class="fas fa-info-circle mr-1"></i>5장 모두 찬 상태입니다</p>');
+
+                            return existing + uploadUi;
                         })()}
                     </div>
                 </div>
@@ -909,6 +921,36 @@ async function saveIssueChanges(issueId) {
             }
         }
 
+        // 원본 사진 보충 — 빈 슬롯에만 자동 채움 (기존 사진 유지)
+        const originalPhotoInput = document.getElementById(`original_photo_${issueId}`);
+        if (originalPhotoInput && originalPhotoInput.files && originalPhotoInput.files.length > 0) {
+            const currentIssue = issues.find(i => i.id === issueId);
+            if (currentIssue) {
+                const slotKeys = ['photo_path', 'photo_path2', 'photo_path3', 'photo_path4', 'photo_path5'];
+                const emptySlots = [];
+                slotKeys.forEach((key, idx) => {
+                    if (!currentIssue[key]) emptySlots.push(idx + 1);
+                });
+
+                if (emptySlots.length === 0) {
+                    alert('원본 사진 슬롯이 가득 찼습니다. 보충할 수 없습니다.');
+                    return;
+                }
+
+                const files = Array.from(originalPhotoInput.files).slice(0, emptySlots.length);
+                if (originalPhotoInput.files.length > emptySlots.length) {
+                    alert(`빈 슬롯은 ${emptySlots.length}개인데 ${originalPhotoInput.files.length}개를 선택하셨습니다. 처음 ${emptySlots.length}장만 업로드됩니다.`);
+                }
+
+                for (let i = 0; i < files.length; i++) {
+                    const slotNum = emptySlots[i];
+                    const base64 = await fileToBase64(files[i]);
+                    const fieldName = slotNum === 1 ? 'photo' : `photo${slotNum}`;
+                    updates[fieldName] = base64;
+                }
+            }
+        }
+
         // API 호출
         const response = await fetch(`/api/issues/${issueId}/management`, {
             method: 'PUT',