Update script.js

script.js

@@ -34,6 +34,11 @@ const previewImg = document.getElementById('preview-img');
 const layersList = document.getElementById('layers-list');
 
 
+const resetAllBtn = document.getElementById('reset-all-btn');
+const downloadBtn = document.getElementById('download-btn');
+const deleteLayerBtn = document.getElementById('delete-layer-btn'); // 추가
+
+
 // 캔버스 기본 크기
 const CANVAS_WIDTH = 800;
 const CANVAS_HEIGHT = 600;
@@ -298,6 +303,11 @@ function updateLayersList() {
     if (!layersList) return; // layersList 요소가 없으면 함수 종료
     layersList.innerHTML = ''; // 목록 초기화
 
+    // 삭제 버튼 활성화/비활성화 설정
+    if (deleteLayerBtn) {
+        deleteLayerBtn.disabled = activeOverlayIndex < 0;
+    }
+
     if (overlays.length === 0) {
         const emptyMsg = document.createElement('div');
         emptyMsg.style.padding = '8px';
@@ -343,6 +353,18 @@ function updateLayersList() {
             layerControls.appendChild(downButton);
         }
 
+        // 레이어 삭제 버튼 추가
+        const deleteButton = document.createElement('button');
+        deleteButton.className = 'delete-button';
+        deleteButton.textContent = '×';
+        deleteButton.title = '레이어 삭제 (단축키: Del)';
+        deleteButton.addEventListener('click', (e) => { 
+            e.stopPropagation(); // 이벤트 버블링 방지
+            // 현재 레이어 인덱스를 설정하고 삭제
+            activeOverlayIndex = i;
+            deleteSelectedLayer();
+        });
+        layerControls.appendChild(deleteButton);
 
         // 레이어 항목 클릭 시 해당 레이어 활성화
         layerItem.addEventListener('click', function() {
@@ -659,22 +681,21 @@ function generateMergedImage() {
 // 선택된 레이어 삭제
 function deleteSelectedLayer() {
     if (activeOverlayIndex >= 0) {
-        // 해당 인덱스의 레이어 삭제
-        overlays.splice(activeOverlayIndex, 1);
-        activeOverlayIndex = -1; // 활성 레이어 없음으로 설정
+        // 삭제 확인 (선택 사항)
+        if (confirm(`레이어 ${activeOverlayIndex + 1}을(를) 삭제하시겠습니까?`)) {
+            // 해당 인덱스의 레이어 삭제
+            overlays.splice(activeOverlayIndex, 1);
+            activeOverlayIndex = -1; // 활성 레이어 없음으로 설정
 
-        updateControlPanel(); // 컨트롤 패널 업데이트
-        updateLayersList(); // 레이어 목록 업데이트
-        drawCanvas(); // 캔버스 다시 그리기
+            updateControlPanel(); // 컨트롤 패널 업데이트
+            updateLayersList(); // 레이어 목록 업데이트
+            drawCanvas(); // 캔버스 다시 그리기
 
-        // 모든 오버레이가 삭제되면 미리보기 숨김
-        if (overlays.length === 0) {
-            previewContainer.style.display = 'none';
+            // 모든 오버레이가 삭제되면 미리보기 숨김
+            if (overlays.length === 0) {
+                previewContainer.style.display = 'none';
+            }
         }
-        // else {
-        //     // 삭제 후 미리보기 업데이트 (선택 사항)
-        //     generateMergedImage();
-        // }
     }
 }
 
@@ -722,6 +743,12 @@ document.addEventListener('DOMContentLoaded', () => {
          }
      });
 
+    deleteLayerBtn.addEventListener('click', function() {
+        if (activeOverlayIndex >= 0) {
+            deleteSelectedLayer();
+        }
+    });
+  
     // 오버레이 이미지 업로드 이벤트 리스너
     overlayInput.addEventListener('change', function(e) {
         if (e.target.files.length > 0) {