🕸️ 오래된 브라우저 호환성 무시: 웹 접근성의 장벽과 사용자 이탈

Why Wrong?

How to Fix?

// Before: IntersectionObserver와 Flexbox gap을 기능 감지 없이 사용
// 이 코드는 IntersectionObserver를 지원하지 않는 브라우저나,
// Flexbox gap을 지원하지 않는 구형 브라우저(예: IE, 일부 구형 Safari)에서
// 스크롤 감지 기능이 작동하지 않거나 레이아웃이 깨질 수 있습니다.

import React, { useRef, useEffect } from 'react';

const StickyHeader = () => {
  const headerRef = useRef(null);

  useEffect(() => {
    // IntersectionObserver가 전역 객체에 없으면 런타임 에러 발생 가능성
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (!entry.isIntersecting) {
          headerRef.current.classList.add('fixed-header');
        } else {
          headerRef.current.classList.remove('fixed-header');
        }
      },
      { threshold: 0.01 } // 헤더가 거의 보이지 않을 때 고정
    );

    if (headerRef.current) {
      observer.observe(headerRef.current);
    }

    return () => {
      if (headerRef.current) {
        observer.unobserve(headerRef.current);
      }
    };
  }, []);

  return (
    <header ref={headerRef} className="app-header">
      <div className="nav-links">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </div>
    </header>
  );
};

export default StickyHeader;

/* CSS */
// .app-header {
//   background: #f0f0f0;
//   padding: 15px;
//   position: sticky; /* IE, 일부 구형 브라우저에서 미지원 */
//   top: 0;
//   z-index: 100;
// }
// .nav-links {
//   display: flex;
//   gap: 20px; /* IE, 일부 구형 Safari에서 미지원 */
// }
// .fixed-header {
//   box-shadow: 0 2px 5px rgba(0,0,0,0.2);
// }

// After: 기능 감지 및 폴백/폴리필 적용

import React, { useRef, useEffect } from 'react';

const StickyHeader = () => {
  const headerRef = useRef(null);

  useEffect(() => {
    // IntersectionObserver 기능 감지 및 폴백 로직
    if ('IntersectionObserver' in window) {
      const observer = new IntersectionObserver(
        ([entry]) => {
          if (!entry.isIntersecting) {
            headerRef.current.classList.add('fixed-header');
          } else {
            headerRef.current.classList.remove('fixed-header');
          }
        },
        { threshold: 0.01 }
      );

      if (headerRef.current) {
        observer.observe(headerRef.current);
      }

      return () => {
        if (headerRef.current) {
          observer.unobserve(headerRef.current);
        }
      };
    } else {
      // IntersectionObserver 미지원 브라우저를 위한 폴백 (예: 스크롤 이벤트 기반)
      console.warn('IntersectionObserver is not supported. Using scroll event fallback.');
      const handleScroll = () => {
        if (headerRef.current) {
          const rect = headerRef.current.getBoundingClientRect();
          if (rect.top <= 0) {
            headerRef.current.classList.add('fixed-header');
          } else {
            headerRef.current.classList.remove('fixed-header');
          }
        }
      };
      window.addEventListener('scroll', handleScroll);
      return () => window.removeEventListener('scroll', handleScroll);
    }
  }, []);

  return (
    <header ref={headerRef} className="app-header">
      <div className="nav-links">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </div>
    </header>
  );
};

export default StickyHeader;

/* CSS */
// .app-header {
//   background: #f0f0f0;
//   padding: 15px;
//   /* `position: sticky` 폴백: IE에서는 `position: fixed` 또는 JavaScript로 시뮬레이션 */
//   position: -webkit-sticky; /* 구형 웹킷 브라우저 지원 */
//   position: sticky;
//   top: 0;
//   z-index: 100;
// }

// .nav-links {
//   display: flex;
//   /* flex-gap 미지원 브라우저를 위한 폴백 마진 */
//   margin-left: -20px;
// }
// .nav-links > a {
//   margin-left: 20px;
// }

// /* @supports를 이용한 Flexbox gap 조건부 적용 */
// @supports (gap: 20px) {
//   .nav-links {
//     gap: 20px;
//     margin-left: 0; /* gap 지원 시 폴백 마진 제거 */
//   }
//   .nav-links > a {
//     margin-left: 0; /* gap 지원 시 폴백 마진 제거 */
//   }
// }

// .fixed-header {
//   box-shadow: 0 2px 5px rgba(0,0,0,0.2);
// }

You Might Also Like