Modal 개선 (2): esc와 focus trap으로 UX 개선하기

// keydown 이벤트 발생시 실행할 함수
const handleKeyDown = (event: WindowEventMap['keydown']) => {
	// event의 key가 'esc'라면
	if (event.key === 'Escape') {
		// modal을 닫는다.
		closeModal();
	}
};
 
useEffect(() => {
	// keydown 이벤트가 발생하면 handleKeyDown 함수를 실행
	window.addEventListener('keydown', handleKeyDown);
 
	return () => {
		// 컴포넌트 언마운트시 keydown event 제거
		window.removeEventListener('keydown', handleKeyDown);
	};
}, []);

// querySelector로 찾을 요소
const FOCUSABLE_ELEMENT_TAGS =
	'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex]';
 
 
const Modal = () => {
	const modalRef = useRef<HTMLDivElement | null>(null);
 
 
	const handleTabKey = (event: WindowEventMap['keydown']) => {
		// modal 컴포넌트 안에 focus할 요소 탐색
		const focusableElements = modalRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENT_TAGS);
 
		if (!focusableElements) return;
 
		const firstElement = focusableElements[0];
		const lastElement = focusableElements[focusableElements.length - 1];
 
		// focus된 요소가 현재 마지막 요소이고 tab 키로 요소를 선택한 경우
		// 첫 번째 요소 focus
		if (document.activeElement === lastElement && !event.shiftKey) {
			firstElement.focus();
			event.preventDefault();
			// focus된 요소가 첫 번째 요소이고 shift + tab으로 요소를 선택한 경우
			// 마지막 요소 focus
		} else if (document.activeElement === firstElement && event.shiftKey) {
			lastElement.focus();
			event.preventDefault();
		}
	}
 
 
	const handleKeyDown = (event: WindowEventMap['keydown']) => {
		// event의 key가 'tab'이라면
		if (event.key === 'Tab') {
			handleTabKey(event);
		} else if (event.key === 'Escape') {
			closeModal();
		}
	};
 
 
	useEffect(() => {
		// keydown 이벤트가 발생하면 handleKeyDown 함수를 실행
		window.addEventListener('keydown', handleKeyDown);
 
		return () => {
		// 컴포넌트 언마운트시 keydown event 제거
		window.removeEventListener('keydown', handleKeyDown);
		}
	}, []);
 
 
	return ReactDOM.createPortal(
		// modal background
		<div className="bg-modalBg z-wrapper fixed left-0 top-0 h-screen w-screen">
		{/* modal */}
		{openedModalList.map((modal) => (
			<div
				key={modal.id}
				{/* focus 시작점을 Modal로 설정하기 위해 tabIndex를 0으로 설정 */}
				tabIndex={0}
				ref={(el) => (modalRef.current = el)}>
					{modal.component}
			</div>
			))}
		</div>,
		document.body,
	);
}