[BUG] S3 저장 url 오류 수정

src/main/resources/templates/admin/new-product.html

@@ -280,27 +280,28 @@ <h6 class="fw-bold mb-2">상세 이미지</h6>
             return headers;
         };
 
-        // 상태(분리)
+        // 상태(키만 저장)
         const state = {thumbs: [], details: []};
 
-        // 절대 URL 보정
+        // 절대 URL 보정: 렌더링 전용
         function toAbsoluteUrl(s) {
             if (!s) return s;
             if (/^https?:\/\//i.test(s)) return s;
-            if (s.startsWith('/')) return s;
+            // 키에 슬래시가 있어도 그대로 붙여서 사용
             const PUBLIC_BASE = 'https://cherry-dev-assets.s3.ap-northeast-2.amazonaws.com/';
+            // 키를 안전하게 인코딩(경로 단위)
             return PUBLIC_BASE + s.split('/').map(encodeURIComponent).join('/');
         }
 
-        // 업로드
+        // 업로드: 서버가 주는 fileName(키)을 그대로 반환
         async function uploadImage(file) {
             const fd = new FormData();
             fd.append('image', file);
             const res = await fetch(uploadEndpoint, {method: 'POST', headers: withCsrf(), body: fd});
             if (!res.ok) throw new Error('업로드 실패');
             const j = await res.json();
             if (!j.fileName) throw new Error('응답에 fileName 없음');
-            return toAbsoluteUrl(j.fileName);
+            return j.fileName;
         }
 
         // 공용: 개수/버튼 상태
@@ -315,19 +316,20 @@ <h6 class="fw-bold mb-2">상세 이미지</h6>
             }
         }
 
-        // 렌더(리스트 + hidden + DnD + 삭제)
+        // 렌더(리스트 + hidden + DnD + 삭제) — items에는 "키"가 들어있음
         function renderGrid({items, gridEl, hiddenEl, countEl, uploadBtn, showFirstBadge}) {
             gridEl.innerHTML = '';
-            items.forEach((url, idx) => {
+            items.forEach((key, idx) => {
+                const absUrl = toAbsoluteUrl(key);
                 const card = document.createElement('div');
                 card.className = 'thumb';
                 card.draggable = true;
                 card.dataset.index = String(idx);
                 card.innerHTML = `
-        ${showFirstBadge && idx === 0 ? '<span class="badge-first">썸네일</span>' : ''}
-        <img src="${url}" alt="">
-        <button type="button" class="btn btn-sm btn-del">×</button>
-      `;
+          ${showFirstBadge && idx === 0 ? '<span class="badge-first">썸네일</span>' : ''}
+          <img src="${absUrl}" alt="">
+          <button type="button" class="btn btn-sm btn-del">×</button>
+        `;
 
                 // 삭제
                 card.querySelector('.btn-del').addEventListener('click', (e) => {
@@ -363,11 +365,11 @@ <h6 class="fw-bold mb-2">상세 이미지</h6>
 
             // hidden inputs (서버 폴백)
             hiddenEl.innerHTML = '';
-            items.forEach(url => {
+            items.forEach(key => {
                 const i = document.createElement('input');
                 i.type = 'hidden';
                 i.name = showFirstBadge ? 'thumbnailImages' : 'detailImages';
-                i.value = url;
+                i.value = key;
                 hiddenEl.appendChild(i);
             });
 
@@ -384,8 +386,8 @@ <h6 class="fw-bold mb-2">상세 이미지</h6>
             }
             try {
                 for (const f of list) {
-                    const url = await uploadImage(f);
-                    items.push(url);
+                    const key = await uploadImage(f);
+                    items.push(key);
                 }
                 render();
             } catch (e) {
@@ -461,7 +463,7 @@ <h6 class="fw-bold mb-2">상세 이미지</h6>
             rerenderDetail();
         });
 
-        // ====== 색상 칩 (이벤트 위임) ======
+        // ====== 색상 칩 ======
         const colorPills = document.getElementById('colorPills');
         colorPills.addEventListener('click', (e) => {
             const pill = e.target.closest('.pill');
@@ -470,21 +472,20 @@ <h6 class="fw-bold mb-2">상세 이미지</h6>
             input.checked = !input.checked;
             pill.classList.toggle('active', input.checked);
         });
-        // 초기 동기화
         colorPills.querySelectorAll('.pill').forEach(p => {
             const input = p.querySelector('input[type="checkbox"]');
             p.classList.toggle('active', input.checked);
         });
 
-        // ====== 저장(JSON) ======
+        // ====== 저장(JSON) — payload에는 키만 담김 ======
         const form = document.getElementById('productForm');
         form.addEventListener('submit', async (e) => {
             e.preventDefault();
 
             const name = form.querySelector('#name')?.value?.trim();
             const brand = form.querySelector('#brand')?.value;
             const price = Number(form.querySelector('#dailyRentalPrice')?.value);
-            const launchedAt = form.querySelector('#launchedAt')?.value?.trim(); // type=date → YYYY-MM-DD
+            const launchedAt = form.querySelector('#launchedAt')?.value?.trim(); // YYYY-MM-DD
             const colors = Array.from(form.querySelectorAll('input[name="colors"]:checked')).map(el => el.value);
 
             if (!name) return alert('상품명은 필수입니다.');

src/main/resources/templates/admin/product-detail.html

@@ -4,6 +4,11 @@
     <meta charset="UTF-8"/>
     <title>Cherry 관리자페이지 - 제품 상세</title>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+
+    <!-- CSRF (있으면 렌더) -->
+    <meta th:if="${_csrf != null}" name="_csrf" th:content="${_csrf.token}"/>
+    <meta th:if="${_csrf != null}" name="_csrf_header" th:content="${_csrf.headerName}"/>
+
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
     <style>
         .grid {
@@ -89,6 +94,7 @@
         <h4 class="m-0">제품 상세보기</h4>
         <div class="d-flex gap-2">
             <a th:href="@{/admin}" class="btn btn-outline-secondary btn-sm">목록으로</a>
+            <button type="button" id="deleteBtn" class="btn btn-danger btn-sm">상품 제거</button>
         </div>
     </div>
 
@@ -178,5 +184,47 @@ <h6 class="fw-bold mb-3">상세 이미지</h6>
 
 </div>
 
+<script th:inline="javascript">
+    /*<![CDATA[*/
+    // CSRF
+    const csrfToken = document.querySelector('meta[name="_csrf"]')?.content;
+    const csrfHeader = document.querySelector('meta[name="_csrf_header"]')?.content;
+
+    const productId = /*[[${product.id}]]*/ null;
+    const deleteBtn = document.getElementById('deleteBtn');
+
+    if (deleteBtn && productId) {
+        deleteBtn.addEventListener('click', () => {
+            if (!confirm('정말로 이 상품을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.')) {
+                return;
+            }
+
+            const headers = {};
+            if (csrfToken && csrfHeader) {
+                headers[csrfHeader] = csrfToken;
+            }
+
+            fetch(`/api/v1/product/${productId}`, {
+                method: 'DELETE',
+                headers: headers
+            })
+                .then(response => {
+                    if (response.status === 204) {
+                        alert('상품이 성공적으로 삭제되었습니다.');
+                        window.location.href = '/admin';
+                    } else {
+                        return response.text().then(text => {
+                            throw new Error(text || `Error: ${response.status}`);
+                        });
+                    }
+                })
+                .catch(error => {
+                    console.error('Delete failed:', error);
+                    alert('상품 삭제에 실패했습니다: ' + error.message);
+                });
+        });
+    }
+    /*]]>*/
+</script>
 </body>
-</html>
+</html>