Update script.js

script.js

@@ -27,6 +27,7 @@ const resetFilterBtn = document.getElementById('reset-filter-btn');
 const generateBtn = document.getElementById('generate-btn');
 const resetAllBtn = document.getElementById('reset-all-btn');
 const downloadBtn = document.getElementById('download-btn');
+const deleteLayerBtn = document.getElementById('delete-layer-btn'); // 추가
 
 const previewContainer = document.getElementById('preview-container');
 const previewImg = document.getElementById('preview-img');
@@ -34,11 +35,6 @@ 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;
@@ -256,7 +252,7 @@ function updateControlPanel() {
     contrastSlider.disabled = !isActive;
     saturationSlider.disabled = !isActive;
     resetFilterBtn.disabled = !isActive;
-
+    deleteLayerBtn.disabled = !isActive; // 삭제 버튼도 비활성화
 
     if (isActive) {
         scaleSlider.value = Math.round(activeOverlay.scale * 100);
@@ -302,7 +298,7 @@ function updateControlPanel() {
 function updateLayersList() {
     if (!layersList) return; // layersList 요소가 없으면 함수 종료
     layersList.innerHTML = ''; // 목록 초기화
-
+    
     // 삭제 버튼 활성화/비활성화 설정
     if (deleteLayerBtn) {
         deleteLayerBtn.disabled = activeOverlayIndex < 0;
@@ -743,12 +739,6 @@ document.addEventListener('DOMContentLoaded', () => {
          }
      });
 
-    deleteLayerBtn.addEventListener('click', function() {
-        if (activeOverlayIndex >= 0) {
-            deleteSelectedLayer();
-        }
-    });
-  
     // 오버레이 이미지 업로드 이벤트 리스너
     overlayInput.addEventListener('change', function(e) {
         if (e.target.files.length > 0) {
@@ -846,6 +836,13 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
+    // 레이어 삭제 버튼 이벤트
+    deleteLayerBtn.addEventListener('click', function() {
+        if (activeOverlayIndex >= 0) {
+            deleteSelectedLayer();
+        }
+    });
+
     // 크기 조절 슬라이더 이벤트
     scaleSlider.addEventListener('input', function() {
         if (activeOverlayIndex >= 0) {