1. Tab 자동 활성화 및 스크롤 최적화 기여 내용

• 개발 목표: 사용자가 상세 페이지에서 스크롤을 이동하면 해당 섹션에 맞춰 Tab이 자동으로 변경되도록 구현
• 기여한 역할:
  1. 스크롤 위치에 따라 Tab 자동 활성화 (뷰포트 내에서 적절한 섹션 감지)
  2. 사용자가 Tab을 클릭하면 해당 섹션으로 부드럽게 이동
  3. 가로 스크롤이 끝까지 이동했을 때, 자동으로 Tab이 따라오도록 처리
  4. 불필요한 useEffect 실행을 방지하여 성능 최적화

2. 기존 문제점과 개선 사항

✅ 2-1. 스크롤 위치에 따라 자동으로 Tab 활성화

🛑 기존 문제점

• 기존 로직에서는 Math.abs(scrollPosition - sectionTop)을 사용하여 가장 가까운 섹션을 찾는 방식을 적용했음.

• 하지만, **긴 섹션(ex. reservation)**의 경우 사용자가 해당 섹션에 있음에도 불구하고, 다음 섹션(options)으로 넘어간 것으로 인식되는 문제가 발생.

• 결과적으로 Tab이 올바르게 활성화되지 않고 갑자기 다른 섹션으로 변경되는 UX 문제 발생.

• IntersectionObserver를 활용하여 특정 섹션이 화면에 일정 비율 이상 나타날 때 감지하려 했으나, 아래와 같은 문제가 발생함:

  • 긴 섹션이 화면에 꽉 차 있는 경우, threshold 값을 조정해도 다음 섹션이 감지되지 않음.
  • threshold 값을 낮추면 다음 섹션이 조금만 보여도 Tab이 너무 빨리 변경됨.
  • threshold 값을 높이면 반대로 Tab 변경이 너무 늦어져 UX가 부자연스러움.
  • 일부 섹션이 일정 비율 이상 보이는 상태가 유지되면 Tab이 변경되지 않는 문제 발생.
  • 결론적으로, 긴 섹션의 경우 일정 비율 이상이 항상 보이므로 해당 섹션이 계속 활성화된 상태가 되어 Tab이 변경되지 않는 문제 발생

✅ 개선 방법

• 단순히 가장 가까운 섹션을 찾는 방식 → 스크롤 위치가 특정 섹션의 범위 내에 있는지 확인하는 방식으로 변경 (야놀자, 여기어때 UX 참고)
• 기존 scrollPosition - sectionTop 방식이 아닌, 스크롤 위치가 특정 섹션의 시작과 끝 사이에 있는지를 확인하도록 수정
• scrollPosition이 특정 섹션의 sectionTop과 sectionBottom 사이에 있을 때만 setActiveSection 실행

최적화된 코드

const handleScroll = useCallback(() => {
  const scrollPosition = window.pageYOffset;
  const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
  const offset = rootFontSize * 5.5;

  Object.entries(sectionRefs.current).forEach(([key, ref]) => {
    if (ref) {
      const sectionTop = ref.offsetTop - offset;
      const sectionBottom = sectionTop + ref.offsetHeight;

      // ✅ 특정 섹션 내에 있을 때만 실행
      if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
        setActiveSection((prev) => (prev !== key ? key : prev));
      }
    }
  });
}, []);

// ✅ scroll 이벤트 등록 (최적화)
useEffect(() => {
 const onScroll = () => {
      handleScroll()
    };
 window.addEventListener("scroll", onScroll);
 return () => {
      window.removeEventListener("scroll", onScroll);
 };
}, [handleScroll]);

결과

• IntersectionObserver 방식에서 특정 섹션 범위 내에서 활성화되는 방식으로 변경하여 문제 해결
• 특정 섹션이 뷰포트 내에서 일정 부분 이상 나타나야 Tab이 활성화됨 → 자연스럽고 정확한 UX 제공
• 불필요한 Tab 변경 방지 → 스크롤 도중 예기치 않은 Tab 변경 문제 해결
• useCallback을 활용하여 성능 최적화 및 불필요한 함수 재생성 방지