[메모] 모달

class ImageInfo {
	$imageInfo = null;
	data = null;

	constructor({ $target, data }) {
		const $imageInfo = document.createElement('section');
		$imageInfo.className = 'ImageInfo';
		this.$imageInfo = $imageInfo;
		$target.appendChild($imageInfo);

		this.data = data;

		this.addCloseEventOnModal();

		this.render();
		console.log('[CREATED]', 'ImageInfo');
	}

	addCloseEventOnModal = () => {
		this.$imageInfo.addEventListener('click', (e) => {
			// console.log(e.target); // 이벤트가 부여된 돔 안에서 이벤트가 발생한 DOM, 클릭이 일어나 이미지 or div or wrapper etc...
			// console.log(e.currentTarget); // 이벤트가 부여된 DOM

			// console.log('>>', e.target.classList);
			if (
				[...e.target.classList].indexOf('ImageInfo') != -1 ||
				e.target.className == 'close'
			) {
				this.$imageInfo.classList.remove('active');
				document.removeEventListener('keyup', this.keyupEvent);
			}
		});

		this.$imageInfo.onkeyup = console.log;
	};

	// TODO: document에서만 keyup 이벤트 반응
	// document.onkeyup = console.log;
	keyupEvent = (e) => {
		if (e.code == 'Escape') {
			this.$imageInfo.classList.remove('active');
			document.removeEventListener('keyup', this.keyupEvent);
		}
	};

	setState(nextData) {
		this.data = nextData;
		this.render();
	}

	render() {
		if (this.data.visible) {
			const { name, url, temperament, origin } = this.data.image;

			this.$imageInfo.innerHTML = `
                <div class="content-wrapper">
                    <div class="title">
                        <span>${name}</span>
                        <div class="close">x</div>
                    </div>
                        <img src="${url}" alt="${name}"/>        
                        <div class="description">
                        <div>성격: ${temperament}</div>
                        <div>태생: ${origin}</div>
                    </div>
                </div>`;
			this.$imageInfo.classList.add('active');
			document.addEventListener('keyup', this.keyupEvent);
		} else {
			this.$imageInfo.classList.remove('active');
		}
	}
}

.ImageInfo .title {
	display: flex;
	justify-content: space-between;
}

.ImageInfo .title,
.ImageInfo .description {
	padding: 5px;
}

.ImageInfo .content-wrapper {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	/* TODO */
	background-color: var(--background-color);

	border: 1px solid #eee;
	border-radius: 5px;
}

.ImageInfo .content-wrapper img {
	width: 100%;

	/* TODO */
	object-fit: cover;
	max-height: 85vh;
}

.ImageInfo .close:hover {
	cursor: pointer;
}