From bbffa47a9d14e5bfbb19b2e2b7b098365d6b3e94 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Thu, 9 Apr 2026 14:01:29 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20HEIC=20=ED=94=84=EB=A6=AC=EB=B7=B0=20pla?=
 =?UTF-8?q?ceholder=20+=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=82=AC=EC=A7=84?=
 =?UTF-8?q?=ED=95=A8=20=EC=A0=91=EA=B7=BC=20=ED=97=88=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. issue-report.js updatePhotoSlot: 브라우저가 <img> 로 렌더링 못하는
   포맷(HEIC 등) 감지해서 녹색 placeholder("📷 HEIC 첨부됨") 로 대체.
   photos[index] 데이터는 유지해서 업로드는 정상 동작 (서버 ImageMagick
   fallback 이 HEIC→JPEG 변환). 데스크톱 Chrome 에서 깨진 이미지 아이콘
   보이던 문제 해결.

2. m/management.html editPhotoInput: capture="environment" 제거.
   이 속성이 있으면 모바일에서 카메라 직접 호출만 되고 사진함 선택 UI 가
   나오지 않음. 관리함 사진 보충 시 기존 사진에서 고를 수 있어야 함.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 system2-report/web/js/issue-report.js         | 28 +++++++++++++++----
 .../web/pages/safety/issue-report.html        |  2 +-
 system3-nonconformance/web/m/management.html  |  2 +-
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/system2-report/web/js/issue-report.js b/system2-report/web/js/issue-report.js
index e67424c..ad2c05e 100644
--- a/system2-report/web/js/issue-report.js
+++ b/system2-report/web/js/issue-report.js
@@ -1090,22 +1090,38 @@ function resizeImage(file, maxSize, quality) {
 
 /**
  * 사진 슬롯 업데이트
+ * 브라우저가 렌더링 못하는 포맷(HEIC 등) 은 img 대신 placeholder 로 표시하되
+ * photos[index] 데이터 자체는 유지해서 업로드는 정상 동작.
  */
 function updatePhotoSlot(index) {
   const slot = document.querySelector(`.photo-slot[data-index="${index}"]`);
 
+  // 기존 img 나 placeholder 제거
+  const existingImg = slot.querySelector('img');
+  if (existingImg) existingImg.remove();
+  const existingPlaceholder = slot.querySelector('.photo-placeholder');
+  if (existingPlaceholder) existingPlaceholder.remove();
+
   if (photos[index]) {
     slot.classList.add('has-photo');
-    let img = slot.querySelector('img');
-    if (!img) {
-      img = document.createElement('img');
+    const data = photos[index];
+    // 브라우저가 <img> 로 렌더링 가능한 포맷만 img 사용, 그 외엔 placeholder
+    const isRenderable = /^data:image\/(jpeg|jpg|png|gif|webp|bmp|svg)/i.test(data);
+
+    if (isRenderable) {
+      const img = document.createElement('img');
+      img.src = data;
       slot.insertBefore(img, slot.firstChild);
+    } else {
+      // HEIC 등 렌더링 불가 포맷 — placeholder 표시 (업로드는 정상)
+      const ph = document.createElement('div');
+      ph.className = 'photo-placeholder';
+      ph.style.cssText = 'width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#ecfdf5;color:#059669;font-size:0.625rem;font-weight:600;text-align:center;gap:2px;';
+      ph.innerHTML = '<div style="font-size:1.25rem">&#128247;</div><div>HEIC</div><div style="font-size:0.5625rem;color:#10b981">첨부됨</div>';
+      slot.insertBefore(ph, slot.firstChild);
     }
-    img.src = photos[index];
   } else {
     slot.classList.remove('has-photo');
-    const img = slot.querySelector('img');
-    if (img) img.remove();
   }
 }
 
diff --git a/system2-report/web/pages/safety/issue-report.html b/system2-report/web/pages/safety/issue-report.html
index 01d68c4..3adbdf0 100644
--- a/system2-report/web/pages/safety/issue-report.html
+++ b/system2-report/web/pages/safety/issue-report.html
@@ -783,6 +783,6 @@
     <input type="file" id="photoInput" accept="image/*" style="display:none">
 
     <script src="/js/cross-nav.js?v=2026031401"></script>
-    <script src="/js/issue-report.js?v=2026031401"></script>
+    <script src="/js/issue-report.js?v=2026040901"></script>
 </body>
 </html>
diff --git a/system3-nonconformance/web/m/management.html b/system3-nonconformance/web/m/management.html
index cd90489..90ef1cf 100644
--- a/system3-nonconformance/web/m/management.html
+++ b/system3-nonconformance/web/m/management.html
@@ -96,7 +96,7 @@
             <div class="m-form-group" id="editPhotoGroup">
                 <label class="m-label"><i class="fas fa-camera" style="color:#10b981;margin-right:4px"></i>사진 보충 <span id="editPhotoSlotInfo" style="font-size:11px;color:#6b7280"></span></label>
                 <div id="editExistingPhotos" style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px"></div>
-                <input type="file" id="editPhotoInput" accept="image/*" capture="environment" multiple
+                <input type="file" id="editPhotoInput" accept="image/*" multiple
                        class="m-input" style="padding:8px;font-size:12px" onchange="previewEditPhotos(event)">
                 <div id="editPhotoPreview" style="display:flex;flex-wrap:wrap;gap:6px;margin-top:6px"></div>
                 <p style="font-size:11px;color:#9ca3af;margin-top:4px">※ 비어있는 슬롯에만 자동 채움. 기존 사진은 유지됩니다.</p>