📌 주요 기능

1. 상태 관리 (State)
2. IntersectionObserver를 활용한 섹션 감지
3. 스크롤 감지로 Top 버튼 표시
4. 렌더링 구조 - 각 섹션을 구분해서 부드러운 이동 가능하게 설정

<aside> 💬

const [activeSection, setActiveSection] = useState('');
const [showButton, setShowButton] = useState(false);

  useEffect(() => {
    const sections = document.querySelectorAll('section');

    // 특정 섹션이 화면에 10% 이상 들어오면 감지되도록 IntersectionObserver 설정
    const observerOptions = {
      root: null,
      threshold: 0.1,
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setActiveSection(entry.target.id);
        }
      });
    }, observerOptions);

    // dom을 통해 가져온 섹션 요소들을 관찰 대상으로 등록함
    sections.forEach((section) => {
      observer.observe(section);
    });

    return () => {
      sections.forEach((section) => observer.unobserve(section));
    };
  }, []);

</aside>

• 🔍

<aside> 💬

// 컴포넌트가 처음 마운트될 때 한 번만 실행됨 (스크롤 감지 설정은 한 번만 필요하니까)
useEffect(() => {
  const handleScroll = () => {
    if (window.scrollY > 340) {
      setShowButton(true);    // 버튼 보이기
    } else {
      setShowButton(false);   // 버튼 숨기기
    }
  };

  // 스크롤 이벤트 감지 시작
  window.addEventListener("scroll", handleScroll);

  // 컴포넌트 사라질 때 이벤트 제거
  return () => {
    window.removeEventListener("scroll", handleScroll);
  };
}, []); // []를 넣어서 useEffect를 한 번만 실행시킴

</aside>

• 🔍

<aside> 💬

return (
   <>
      <Header activeSection={activeSection} />
      <main className="relative">
        <IntroSection />

        <section id="about">
          <AboutSection />
        </section>

        <section id="stack">
          <StackSection />
        </section>

        <section id="project">
          <ProjectSection />
        </section>

        <section id="contact">
          <ContactSection />
        </section>
      </main>

      <TopButton showButton={showButton} />
    </>
  );
};

</aside>

• 🔍