https://www.happycampus.com/js/member/modalJoin.js?jsVer=20260921.1

1/**
2 *
3 * 모달 스크립트
4 *
5 * @date 2026-01-13
6 * @author 한경문
7 * @type class
8 */
9const ModalJoin = {
10	isInitialized: false,
11	body: null,
12
13	init() {
14		if (this.isInitialized) return;
15
16		this.body = document.body;
17		this.ensureContainer();
18		this.bindEvents();
19
20		this.isInitialized = true;
21	},
22
23	ensureContainer() {
24		let container = document.getElementById('Modal');
25		if (!container) {
26			container = document.createElement('div');
27			container.id = 'Modal';
28			document.body.appendChild(container);
29		}
30	},
31
32	bindEvents() {
33		document.addEventListener('click', this.handleModalTrigger.bind(this));
34		document.addEventListener('click', this.handleModalClose.bind(this));
35		document.addEventListener('click', this.handleOverlayClick.bind(this));
36	},
37
38	handleModalTrigger(e) {
39		const trigger = e.target.closest('.modal-trigger');
40		if (!trigger) return;
41
42		const targetId = trigger.getAttribute('data-modal-target');
43		if (targetId) {
44			this.openModal(targetId);
45		}
46	},
47
48	handleModalClose(e) {
49		const closeBtn = e.target.closest('.modal__close-button');
50		if (!closeBtn) return;
51
52		const modal = closeBtn.closest('.modal');
53		if (modal) {
54			this.closeModal(modal);
55		}
56	},
57
58	handleOverlayClick(e) {
59		if (!e.target.classList.contains('modal__overlay')) return;
60
61		const modal = e.target.closest('.modal');
62		if (modal) {
63			this.closeModal(modal);
64		}
65	},
66
67	openModal(modalId) {
68		const modal = document.getElementById(modalId);
69		if (!modal) return;
70
71		//주소검색인경우 초기화
72		ModalJoin.resetAddressSearch();
73
74		modal.style.display = '';
75		requestAnimationFrame(() => {
76			modal.classList.add('modal--active');
77		});
78
79		this.body.style.overflow = 'hidden';
80	},
81
82	closeModal(modal) {
83		modal.classList.remove('modal--active');
84
85		setTimeout(() => {
86			modal.style.display = 'none';
87
88			if (!document.querySelector('.modal--active')) {
89				this.body.style.overflow = '';
90			}
91		}, 300);
92	},
93	resetAddressSearch() {
94		const $input = $('.address-search-form__input');
95		const $result = $('.address-search-result');
96		$input.length && $input.val('');
97		$result.length && $result.html('');
98	},
99
100
101};