[feat] 헤더 레이아웃 작업

[wo-o29]

🎯 이슈 번호

• [feat] 헤더 레이아웃 작업 #13

🏁 작업 내용(필수)

• 레이아웃 작업을 추가하였습니다.

💬 리뷰 요구 사항(선택)

• 헤더를 유라님이 맡아주셔서 헤더 만드시면 HeaderLayout/index.tsx에 반영해주시면 될 것 같습니다!
• 지금 디자인 상으로는 전역적으로 헤더를 사용해도 무방하긴 한데 나중에 헤더 안쓰는 페이지가 늘어나면 유지보수하기 힘들 것 같아서 레이아웃을 분리하였습니다.

// 전역적으로 헤더 사용
export default function App({ Component, pageProps }: AppPropsWithLayout) {
  return (
      <Header>
         {<Component {...pageProps} />}
      </Header>
  );
}

📢 참고 사항(선택)

• 레이아웃 사용법(https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts)

import HeaderLayout from '../components/layout/HeaderLayout';
 
export default function ExamplePage() {
  return (
    // 페이지 컴포넌트
  )
}
 
ExamplePage.getLayout = function getLayout(page) {
  return <HeaderLayout>{page}</HeaderLayout>
}

[yura0302]

수고하셨습니다 !

[yura0302]

혹시 메인태그 어떤 이유로 적어두셨었나요 ?? 🧐

[wo-o29]

처음 의도는 어차피 본문은 시맨틱하게 main 태그로 시작한다고 생각해서 추가 하였는데, 사용하는 곳마다 css 설정이 다를 수 있을 것 같다고 생각해서 제거하였습니다!

main 태그 넣고도 그 안에서 section이나 div 태그로도 디자인할 수 있지만 불필요한 태그가 추가되어 DOM의 깊이가 깊어질 수 있을 것 같아서 사용하는 곳에서 main 태그를 추가하여 디자인하는게 좋을 것 같다고 생각했습니다🙃

[yura0302]

Component가 페이지 기본 구조대로 렌더링 되는것(어떤 레이아웃이든지 상관없이 페이지 컴포넌트만 렌더링) 되는 방식에서 getLayout을 통한 렌더링으로 바꿔주셨네요 !! 유지보수까지 고려한 코드 LGTM입니다 !! 👍