📌 주요 기능

1. 스크롤 이동
2. 현재 위치한 섹션 표시 (activeSection)
3. 모바일 반응형 메뉴
   • 햄버거 버튼 클릭 시 메뉴 열림/닫힘
   • 메뉴 선택 시 자동으로 닫힘

header.jsx

<aside> 💬

const [isMenuOpen, setIsMenuOpen] = useState(false);

// 클릭한 메뉴의 id값에 따라 해당 섹션으로 부드럽게 스크롤하는 함수
  const scrollToSection = (sectionId) => {
    if (sectionId == "top") {
      window.scrollTo({
        top: 0,              // 맨 위로 스크롤
        behavior: "smooth",  // 스크롤이 부드러워지는 옵션
      });
    } else {                 // 아이디가 top이 아니면 각 페이지로 이동
      const section = document.getElementById(sectionId);
      if (section) {
        section.scrollIntoView({
          behavior: "smooth",
        });
      }
    }
  };

</aside>

• 🔍

<aside> 💬

<div className="flex justify-between items-center mx-auto">
        <Logo scrollTo={() => scrollToSection("top")} />

</aside>

• 🔍

<aside> 💬

<div className="md:hidden ml-auto" onClick={() => setIsMenuOpen(!isMenuOpen)}>
  <button className="text-3xl">☰</button>
</div>

</aside>

• 🔍

<aside> 💬

 <nav className="hidden md:flex md:flex-row md:space-x-6">
          <ul className="flex space-x-6">
            {["about", "stack", "project", "contact"].map((id) => (
              <NavLink
                key={id}
                id={id}
                section={id.toUpperCase()}
                activeSection={activeSection}
                onClick={scrollToSection}
              />
            ))}
          </ul>
 </nav>

</aside>

• 🔍

<aside> 💬

{/* 반응형 부분 */}
      <MobileMenu
        isMenuOpen={isMenuOpen}
        setIsMenuOpen={setIsMenuOpen}
        activeSection={activeSection}
        scrollToSection={scrollToSection}
      />

</aside>

• 🔍

logo.jsx

<aside> 💬

const Logo = ({ scrollTo }) => (
    <div
        className="text-xl font-bold cursor-pointer"
        onClick={scrollTo}>
        LeeYurim's Portfolio
    </div>
);

</aside>