scroll

// 스크롤 감지 후 메뉴 선택 이펙트
useEffect(() => {
		// offset: 고정 헤더 높이 등, 스크롤 위치 계산 시 보정값 (예: 헤더 높이 80px)
		const offset = 80;

		const handleScroll = () => {
				// window.scrollY: 문서 상단부터 현재 스크롤 위치(뷰포트 상단)의 픽셀 수
				// currentPosition: 헤더 높이(offset)만큼 보정한 후, 약간의 여유(1px)를 더하여 계산한 위치
				// 즉, 화면 상단의 헤더 하단 위치를 기준으로 함
				const currentPosition = window.scrollY + offset + 1;

				// sectionIds: 스크롤 감지할 섹션들의 ID 목록
				const sectionIds = [
						SCROLL_ID.KEY_VISUAL,
						SCROLL_ID.OUTLINE,
						SCROLL_ID.ADVANTAGES,
						SCROLL_ID.FEATURES,
						SCROLL_ID.APPLICABLE_TARGETS,
						SCROLL_ID.RESOURCE,
						SCROLL_ID.CONTACT_BANNER,
				];

				for (const id of sectionIds) {
						const el = document.getElementById(id);
						if (el) {
								// top: 문서 상단부터 해당 섹션 요소의 상단까지의 거리 (픽셀 단위)
								// 즉, 섹션의 시작 지점
								const top = el.offsetTop;
								// bottom: 섹션 상단(top)에 섹션의 높이(offsetHeight)를 더한 값
								// 즉, 문서 상단부터 해당 섹션 요소의 하단까지의 거리
								const bottom = top + el.offsetHeight;

								// 조건: currentPosition이 섹션의 상단(top) 이상이고, 섹션의 하단(bottom) 미만일 때
								// -> 화면 상단(헤더 아래) 기준으로 currentPosition이 섹션 내에 들어왔다는 의미
								if (currentPosition >= top && currentPosition < bottom) {
										setActiveMenu(id);
										break;
								}
						}
				}
		};

		window.addEventListener("scroll", handleScroll);
		return () => window.removeEventListener("scroll", handleScroll);
}, []);

감지 조건 및 화면에서의 역할 • currentPosition 이 값은 window.scrollY + offset + 1로 계산되며, 이는 뷰포트 상단에서 offset(예를 들어 헤더 높이 80px)을 더한 위치입니다. 즉, 화면 상단에 고정된 헤더 아래 부분(약 81px 위치)을 기준으로 현재 스크롤 위치를 판단합니다. • top 각 섹션의 상단 위치로, 문서의 맨 위에서 해당 섹션의 시작점까지의 거리를 의미합니다. • bottom 섹션의 시작점(top)에서 섹션 높이(offsetHeight)를 더한 값으로, 해당 섹션의 끝나는 지점을 의미합니다.

감지 기준

현재 코드에서는 currentPosition이 섹션의 top 이상, bottom 미만일 때 그 섹션을 활성화합니다. 즉, 헤더 아래 고정 영역(예: 81px 지점)이 어느 섹션의 시작(top)과 끝(bottom) 사이에 위치하면 그 섹션이 선택됩니다.

예를 들어, 만약 한 섹션의 상단이 200px, 높이가 300px라면: • 섹션의 top: 200px • 섹션의 bottom: 500px • currentPosition이 200px 이상 500px 미만이면 해당 섹션이 활성화됩니다.

따라서, 화면에서 보이는 영역은 브라우저의 현재 스크롤 위치에 따라 달라지지만, 헤더 아래 위치(여기서는 81px 지점 기준)가 섹션의 내부에 들어왔을 때 감지가 이루어집니다.

이 설명과 주석이 현재 코드의 동작과 감지 기준에 대해 충분히 상세하게 설명해줄 것입니다.