Feat/header

[jjh4450]

헤더 추가

PR 설명

• 헤더가 추가됐습니다!
• 라우터의 관리가 src/shared/routing/RouterInfo.tsx에서 통합적으로 이루어집니다.
• 헤더는 RouterInfo.tsx를 기반으로 nav를 구성합니다. 컴포넌트는 별도의 수정이 필요 없습니다.

기타 사항

// 라우팅 정보 객체 타입
export interface RouterInfoType  {
 path: string; // 경로 입니다.
 element: React.ReactElement; // 경로에 해당하는 컴포넌트 입니다.
 english: string; // 사용자에게 표시되는 영문 경로명입니다. (현재는 사용하지 않음)
 korean: string; // 사용자에게 표시되는 한국어 경로명입니다.
 expose: boolean; // 해당하는 경로의 헤더 노출 유무입니다.
}

로고를 svg로 추가했습니다.

• svgr을 이용해 css로 스타일을 적용했습니다.

export const logoStyles = style({
  width: "4em",
  height: "auto",
  fill: vars.color.green2,
  ":hover": {
    fill: vars.color.green1,
  },
});

메뉴 토글이 lottie를 통해 작동합니다.

{/*토글 버튼 (lottie)*/}
      <Lottie
        animationData={Menu}
        className={toggleBtnStyles}
        onClick={handleToggle}
        lottieRef={lottieRef}
        autoplay={false}
        loop={false}
      />

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
knuland	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 16, 2024 1:00am

[flareseek]

컴포넌트와 구분하기 위해 camelCase로 작성해주세요!

[flareseek]

preview 사이트에서 테스트까지 확인 했습니다
lottie로 버튼 애니메이션에 메뉴 열면 블러처리까지 너무 좋아요 👍👍
고생하셨습니다!

[jjh4450]

빠른 리뷰 감사합니다!