✨Feat : 네브바 생성, 기본 레이아웃 설정

seochan99 commented 5 months ago

PR 타입 ( 하나 이상의 PR 타입을 선택해주세요 )

[x] 기능 추가
[ ] 버그 수정
[ ] 의존성, 환경 변수, 빌드 관련 코드 업데이트
[x] 기타 사소한 수정

개요

네브바 생성 및 레이아웃 + 메타데이터 반영

변경 사항

메타데이터 반영 + 레이아웃 우선 80%(4/5)로 셋팅해뒀습니다.

네브바 각 페이지에 셋팅 해뒀으며, 본인 파트에 맞게 진행해주시길 바랍니다. ++) TimeLine 네브바 추가해두겠습니당

코드 리뷰시 참고 사항

import '../styles/reset.css';
import '../styles/globals.css';
import clsx from 'clsx';
import Script from 'next/script';
import { NotoSans } from './fonts';
import Navigation from '@/components/navigation';

export const metadata = {
  title: {
    template: '%s | GDSC DGU',
    default: 'GDSC DGU',
  },
  description: 'Google Developer Student Clubs 동국대학교',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko" className="flex w-screen justify-center  bg-[#fff]">
      <body
        className={clsx(
          [NotoSans.className],
          //  max-w-[430px] mx-auto : 430px 이상일 때 가운데 정렬
          ['min-h-screen w-full'],
          ['shadow-xl'],
          ['bg-[#050014]'],
          ['text-white'],
        )}
      >
        <Navigation />
        <div className="flex justify-center">{children}</div>
      </body>
    </html>
  );
}

layout.tsx 파일입니다. 위 tsx파일안에 Navigation이 전체적으로 분포되있고

        <div className="flex justify-center">{children}</div>

안에 저희 페이지가 있다고 보면됩니다.

기본적으로 w-full상태이며,

import React from 'react';

export const metadata = {
  title: 'Member',
};

const MemberPage = () => {
  return <div className="w-4/5 px-10">Member 페이지입니당</div>;
};

export default MemberPage;

각 내부 페이지를 참고하시면

<div className="w-4/5 px-10">Member 페이지입니당</div>;

이와 같이 w-4/5로 80% 설정을 해뒀습니다.

모바일에서도 똑같이 적용되오 만약 모바일에서 다른 width비율을 사용한다면 각 페이지에 맞게 여기서 수정하시면 되고, 작업은 여기 페이지 div안에서 하시면 됩니다.

close #10

bianbbc87 commented 5 months ago

확인했습니다 감사합니다!

seochan99 commented 5 months ago

머지완! 각자 작업해주세용

GDSC-DGU / gdsc-dgu