[Feat]: 헤더 구현

[jisooooooooooo]

💡 Summary

#36

✅ Tasks

• 헤더 구현
• 로그인 유무에 따라 메뉴 노출 유무 결정

👀 To Reviewer

• 스크롤했을 때 헤더 위쪽, 푸터 아래에 보이던 하얀 부분 보이지 않게 html에 배경색 지정했는데 다른 방법 있을지 고민해볼게요!

📸 Screenshot

[github-actions]

빌드 결과

빌드 실패 😵

[github-actions]

🎨 스토리북 배포 완료!

👉 스토리북 미리보기

변경된 컴포넌트의 디자인을 확인해주세요.

[github-actions]

빌드 결과

빌드 성공 🎉

[github-actions]

빌드 결과

빌드 성공 🎉

[github-actions]

빌드 결과

빌드 성공 🎉

[github-actions]

✅ Storybook 배포 완료! 🔗 https://6866a01b6253382f0f391b33-ilbkfxswdi.chromatic.com/

[kwonsaebom]

현재 데탑으로 봤을 때 이렇게 떠서 요 부분만 수정한 다음에 말씀해주시면 다시 확인해보겠습니다 !!

[kwonsaebom]

p3) 조금 가독성이 떨어지는 것 같은데 요런 식으로 분리해보는 건 어떨까요 ?! 👀

const renderNavMenu = () => (
  <>
    <nav className={styles.navWrapper}>
      {MENUS.map((menu) => {
        const isActive = activeMenu === menu.label;
        const buttonClass = `${styles.navItem} ${isActive ? styles.navItemActive : ''}`;

        return (
          <button
            key={menu.label}
            className={buttonClass}
            onClick={() => handleMenuClick(menu.label, menu.path)}
            aria-current={isActive ? 'page' : undefined}
          >
            {menu.label}
          </button>
        );
      })}
    </nav>
    <div className={styles.profilePlaceholder} />
  </>
);

return (
  <header className={styles.header}>
    {isLoggedIn ? (
      renderNavMenu()
    ) : (
      <button className={styles.loginButton} onClick={handleLogin}>
        로그인
      </button>
    )}
  </header>
);

[jisooooooooooo]

오호 바로 반영하겠슴둥~

[github-actions]

빌드 결과

빌드 성공 🎉

[Leeyoonji23]

만다"라트" 잘 봤습니다~

[Leeyoonji23]

p5) ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

[github-actions]

빌드 결과

빌드 성공 🎉

[github-actions]

🎨 스토리북 배포 완료!

👉 스토리북 미리보기

변경된 컴포넌트의 디자인을 확인해주세요.