Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 4 commits into from
Apr 11, 2024
Merged

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

merged 4 commits into from
Apr 11, 2024

Conversation

seochan99
Copy link
Member

@seochan99 seochan99 commented Apr 9, 2024 •
edited
Loading

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


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

개요

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

변경 사항

Screenshot 2024-04-10 at 3 30 27 AM Screenshot 2024-04-10 at 3 30 50 AM

메타데이터 반영 + 레이아웃 우선 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

@seochan99 seochan99 added ⚙️ Setting 개발 환경 세팅 🙋‍♂️ 희찬 작업 ✨ Feature 기능 개발 labels Apr 9, 2024
@seochan99 seochan99 self-assigned this Apr 9, 2024
bunju20
bunju20 approved these changes Apr 11, 2024
View reviewed changes
Copy link
Contributor

@bunju20 bunju20 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확인했습니다! 고생 많으셨습니다 ✨!!

shimseohyun
shimseohyun approved these changes Apr 11, 2024
View reviewed changes
Copy link
Contributor

@shimseohyun shimseohyun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

초기세팅 너무 잘 해주셨네요 감사합니다

src/components/navigation.tsx
<div className="w-4/5 px-10 justify-between inline-flex text-xl font-bold">
<Link href="/">GDSC DGU</Link>
<div className="justify-start items-start gap-10 flex">
<Link href="/timeline">Timeline</Link>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

세미나 -> 프로젝트 -> 멤버 -> 타임라인 -> 리크루팅 순으로 네브바 변경해주시면 감사하겠습니다!

src/components/navigation.tsx
<div className="justify-start items-start gap-10 flex">
<Link href="/timeline">Timeline</Link>
<Link href="/seminar">Seminar</Link>
<Link href="/project">Project</Link>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

플젝의 경우
프로젝트와 솔루션 챌린지로 나눠지니 이후 하시는분이 토글로 빼주시면 감사하겠습니다...!

puretension
puretension approved these changes Apr 11, 2024
View reviewed changes
Copy link
Member

@puretension puretension left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM✨ 너무 깔끔합니다! 고생하셨습니다!!

@bianbbc87
Copy link
Contributor

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

@seochan99 seochan99 merged commit 67eec68 into dev Apr 11, 2024
@seochan99
Copy link
Member Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@shimseohyun shimseohyun shimseohyun approved these changes

@puretension puretension puretension approved these changes

@bunju20 bunju20 bunju20 approved these changes

@naarang naarang Awaiting requested review from naarang

@bianbbc87 bianbbc87 Awaiting requested review from bianbbc87

Assignees

@seochan99 seochan99

Labels
✨ Feature 기능 개발 ⚙️ Setting 개발 환경 세팅 🙋‍♂️ 희찬 작업
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[✨Feature] 네비 + 기본 레이아웃 셋팅
5 participants
@seochan99 @bianbbc87 @bunju20 @puretension @shimseohyun