24web/10620 황동화/script.js

// script.js

document.addEventListener('DOMContentLoaded', () => {
    const imageInput = document.getElementById('imageInput');
    const addImageButton = document.getElementById('addImageButton');
    const gallery = document.getElementById('gallery');
    const fileNameSpan = document.getElementById('fileName');

    // 파일 입력 변화 이벤트 리스너
    imageInput.addEventListener('change', () => {
        const file = imageInput.files[0];
        if (file) {
            fileNameSpan.textContent = file.name;
        } else {
            fileNameSpan.textContent = '';
        }
    });

    // 이미지 추가 버튼 클릭 이벤트 리스너
    addImageButton.addEventListener('click', () => {
        const file = imageInput.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const imgElement = document.createElement('img');
                imgElement.src = e.target.result;
                imgElement.alt = 'Uploaded Image';

                // 이미지 분석 및 배경색 결정 로직
                getAverageColor(imgElement).then(color => {
                    document.body.style.backgroundColor = color;
                }).catch(error => {
                    console.error('Error calculating average color:', error);
                });

                const deleteButton = document.createElement('button');
                deleteButton.classList.add('delete-button');
                deleteButton.innerText = 'Delete';
                deleteButton.addEventListener('click', () => {
                    galleryItem.remove();
                });

                const galleryItem = document.createElement('div');
                galleryItem.classList.add('gallery-item');
                galleryItem.appendChild(imgElement);
                galleryItem.appendChild(deleteButton);
                gallery.appendChild(galleryItem);

                imgElement.addEventListener('click', () => {
                    openLightbox(imgElement.src);
                });

                // 파일 선택 후 파일명 초기화
                imageInput.value = '';
                fileNameSpan.textContent = '';
            };
            reader.readAsDataURL(file);
        }
    });

    // 이미지 클릭시 라이트박스 열기
    function openLightbox(src) {
        const lightbox = document.createElement('div');
        lightbox.id = 'lightbox';
        lightbox.style.position = 'fixed';
        lightbox.style.top = '0';
        lightbox.style.left = '0';
        lightbox.style.width = '100%';
        lightbox.style.height = '100%';
        lightbox.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
        lightbox.style.display = 'flex';
        lightbox.style.alignItems = 'center';
        lightbox.style.justifyContent = 'center';
        lightbox.style.zIndex = '1000';
        lightbox.innerHTML = `<img src="${src}" style="max-width: 90%; max-height: 90%;">`;
        document.body.appendChild(lightbox);

        lightbox.addEventListener('click', () => {
            lightbox.remove();
        });
    }

});