Header: 화면에 따른 주솟값 전환

[choigirang]

Nav에 따른 화면 전환은 되지만, 스크롤하며 새로운 컴포넌트에 진입할 떄마다 주솟값이 바뀌어야 하는 추가 필요

[choigirang]

// 화면에 들어오는 컴포넌트에 따른 주솟값 변경
const [activeSection, setActiveSection] = useState<string>('Home');

const lists = ['Home', 'About', 'Skills', 'Experience'];

  useEffect(() => {
    const scrollChangeRouter = () => {
      const section = lists.find(list => {
        const element = document.getElementById(list);
        if (element) {
          const rect = element.getBoundingClientRect();
          return rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2;
        }
        return false;
      });

      if (section && section !== activeSection) {
        setActiveSection(section);
        window.history.replaceState(null, '', `/${section}`);
      }
    };

    window.addEventListener('scroll', scrollChangeRouter);

    return () => {
      window.removeEventListener('scroll', scrollChangeRouter);
    };
  }, [activeSection]);

• 활성 컴포넌트 id가 화면에 차지하는 비율에 따라 state값 변경