Header, Footer, Banner Publishing

package.json

@@ -9,13 +9,14 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@types/node": "18.15.11",
     "@types/react": "18.0.33",
     "@types/react-dom": "18.0.11",
     "next": "13.2.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "5.0.3"
   },
   "packageManager": "[email protected]"

public/data/project.json

@@ -1,5 +1,6 @@
-{
-  "GCMS": {
+[
+  {
+    "id": "0",
     "projectName": "GCMS",
     "projectDescription": "광주소프트웨어마이스터고의 동아리를 관리해주는 서비스입니다",
     "imageURL": "https://drive.google.com/open?id=1QaOoCRDwwSCwDaJBY5MG8CzOjCFzuDVP",
@@ -10,8 +11,8 @@
     "createrName": "MSG",
     "categories": "React, Spring, Kotlin, Swift"
   },
-
-  "오늘 뭐임": {
+  {
+    "id": "1",
     "projectName": "오늘 뭐임",
     "projectDescription": "애플워치, 아이폰/맥의 위젯, 맥의 Menubar에서도 편리하게 급식/시간표를 확인할 수 있는 서비스",
     "imageURL": "https://drive.google.com/open?id=1dlgOCyAgsC_9QKHXWjkuibywttGNyv7L",
@@ -22,8 +23,8 @@
     "createrName": "최형우",
     "categories": "Swift"
   },
-
-  "GRIG-iOS": {
+  {
+    "id": "2",
     "projectName": "GRIG-iOS",
     "projectDescription": "Github Rank In GSM - GRIG Open API를 사용하여 만든 iOS 앱입니다. GSM 학생들의 깃허브 활동으로 랭킹을 세워놓았으며 이를 iOS에서 볼 수 있습니다",
     "imageURL": "https://drive.google.com/open?id=1-QK1wsWfhJWznjQZg_EUqp_c771j73_C",
@@ -34,8 +35,8 @@
     "createrName": "최형우",
     "categories": "Swift , iOS"
   },
-
-  "GAuth": {
+  {
+    "id": "3",
     "projectName": "GAuth",
     "projectDescription": "GSM 교내 계정 통합 소셜 로그인 서비스.",
     "imageURL": "https://drive.google.com/open?id=1ZQQTFEWhjTHuMKSqqiLCCHFbygrpHLIf",
@@ -46,8 +47,8 @@
     "createrName": "MSG",
     "categories": "Swift, Kotlin, Android"
   },
-
-  "Hello, GSM": {
+  {
+    "id": "4",
     "projectName": "Hello, GSM",
     "projectDescription": "Hello, GSM은 광주소프트웨어마이스터고등학교 입학 지원시스템입니다.",
     "imageURL": "https://drive.google.com/open?id=1_oUbT4XPQUBTd1pGBtoLMEtw9hh3ZMu5",
@@ -57,5 +58,17 @@
     "githubURL": "https://github.com/themoment-team",
     "createrName": "더모먼트",
     "categories": "Next.js, Nest.js, React"
+  },
+  {
+    "id": "5",
+    "projectName": "DOTORI",
+    "projectDescription": "DOTORI는 GSM 기숙사 관리 시스템으로, 학생들이 주체적으로 개발한 웹사이트입니다. 광주 소프트웨어마이스터고등학교 앰퍼샌드 동아리 부원들이 직접 개발하여, 효율적인 서비스 제공을 목적으로 합니다. 이 작은 서비스가 우리 학교의 인식을 바꿀 좋은 마케팅 거리가 될 수 있도록 만들어졌습니다.",
+    "imageURL": "https://drive.google.com/open?id=1Uie5mfqIFbyBOmwPMGJfQHAlT2toZXRm",
+    "createrDescription": "코드짜는 기계적인 개발자가 되기보다는 생각하고 사고하는 진짜 쿨한 개발자가 되기 위해 다수 사람에게 도움을 줄 수 있는 프로젝트를 개발하며 그 과정에서 서로 지식을 공유하는 동아리로서 커뮤니케이션과 전공 능력 향상을 이룰 수 있는 팀입니다.",
+    "projectUrl": "https://dotori-gsm.com",
+    "githubRepoURL": "https://github.com/Team-Ampersand/Dotori-client-v2.git, https://github.com/Team-Ampersand/Dotori-server-V2.git",
+    "githubURL": "https://github.com/Team-Ampersand",
+    "createrName": "&mpersand",
+    "categories": "SpringBoot, Kotlin, Next.js, TypeScript"
   }
-}
+]

src/app/globals.css

@@ -1,4 +1,14 @@
+@font-face {
+  font-family: 'Pretendard-Regular';
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff')
+    format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+@import url('https://use.typekit.net/cei0oyt.css');
+
 * {
+  font-family: 'Pretendard-Regular';
   box-sizing: border-box;
   padding: 0;
   margin: 0;
@@ -7,26 +17,20 @@
 html,
 body {
   max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  overflow: hidden;
 }
 
 a {
   color: inherit;
   text-decoration: none;
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: whilte) {
   html {
-    color-scheme: dark;
+    color-scheme: white;
   }
 }
+
+.roboto {
+  font-family: 'roboto';
+}

src/app/layout.tsx

@@ -1,4 +1,5 @@
 import './globals.css';
+import * as C from 'src/components';
 
 export const metadata = {
   title: 'EveryGSM',
@@ -12,7 +13,11 @@ export default function RootLayout({
 }) {
   return (
     <html lang="ko">
-      <body>{children}</body>
+      <body>
+        <C.Nav />
+        {children}
+        <C.Footer />
+      </body>
     </html>
   );
 }

src/app/page.tsx

@@ -1,9 +1,14 @@
 import React from 'react';
+import * as C from 'src/components';
 
 type Props = {};
 
 function Home({}: Props) {
-  return <div>Home</div>;
+  return (
+    <div>
+      <C.MainContainer></C.MainContainer>
+    </div>
+  );
 }
 
 export default Home;

src/assets/imgs/index.ts

@@ -0,0 +1,3 @@
+export { default as LogoIcon } from './LogoIcon.svg';
+export { default as Rocket } from './Rocket.png';
+export { default as Vector } from './Vector.svg';

src/assets/palette.ts

@@ -0,0 +1,8 @@
+const P = {
+  gray1: '#999999',
+  gray2: '#E3E3E3',
+  gray3: '#191919',
+  gray4: '#F1F1F5',
+};
+
+export default P;

src/components/Banner/index.tsx

@@ -0,0 +1,28 @@
+'use client';
+import * as S from './style';
+import * as I from '@/assets/imgs';
+import Image from 'next/image';
+
+const Home = () => {
+  return (
+    <S.BannerContainer>
+      <S.TextContainer>
+        <S.SmallText className="roboto">
+          GSM의 모든 프로젝트를 한곳에
+        </S.SmallText>
+        <S.BigText className="roboto">EveryGSM</S.BigText>
+      </S.TextContainer>
+      <Image
+        src={I.Rocket}
+        style={{
+          width: '21.875rem',
+          height: '19.375rem',
+          marginRight: '1.25rem',
+        }}
+        alt="Rocket"
+      />
+    </S.BannerContainer>
+  );
+};
+
+export default Home;