feat: 메인 페이지의 main section 부분을 마크업 작업 (#12)

* feat: 메인 페이지의 main section 부분을 구현하라 * refactor: sass 코드 잘못 띄어쓰기 되어있는 부분 수정
DNDACADEMY · Jan 9, 2024 · 82d961f · 82d961f
1 parent 8bc00df
commit 82d961f
Show file tree

Hide file tree

Showing 11 changed files with 116 additions and 12 deletions.
diff --git a/next.config.js b/next.config.js
@@ -18,6 +18,14 @@ const nextConfig = {
   sassOptions: {
     includePaths: [path.join(__dirname, 'styles')],
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'dnd-academy-v3.s3.ap-northeast-2.amazonaws.com',
+      },
+    ],
+  },
   swcMinify: true,
   experimental: {
     typedRoutes: true,

diff --git a/src/app/jobs/page.tsx → src/app/(detail)/jobs/page.tsx b/src/app/jobs/page.tsx → src/app/(detail)/jobs/page.tsx
diff --git a/src/app/organizers/page.tsx → src/app/(detail)/organizers/page.tsx b/src/app/organizers/page.tsx → src/app/(detail)/organizers/page.tsx
diff --git a/src/app/projects/page.tsx → src/app/(detail)/projects/page.tsx b/src/app/projects/page.tsx → src/app/(detail)/projects/page.tsx
diff --git a/src/app/reviews/page.tsx → src/app/(detail)/reviews/page.tsx b/src/app/reviews/page.tsx → src/app/(detail)/reviews/page.tsx
diff --git a/src/app/index.module.scss b/src/app/index.module.scss
@@ -0,0 +1,6 @@
+.main {
+  width: 100%;
+  max-width: 1156px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import TopNavigationBar from '@/components/global/TopNavigationBar';
 import { pretendardFont, senFont } from './fonts';
 
 import 'src/styles/global.scss';
+import styles from './index.module.scss';
 
 export const metadata = {
   title: 'DND',
@@ -18,7 +19,9 @@ function RootLayout({ children }: {
     <html lang="ko" className={clsx(senFont.variable, pretendardFont.variable)}>
       <body>
         <TopNavigationBar />
-        {children}
+        <main className={styles.main}>
+          {children}
+        </main>
       </body>
     </html>
   );

diff --git a/src/app/page.test.tsx b/src/app/page.test.tsx
@@ -7,9 +7,9 @@ describe('HomePage', () => {
     <HomePage />
   ));
 
-  it('Should be visible "한글"', () => {
+  it('Should be visible "DND"', () => {
     const { container } = renderHomePage();
 
-    expect(container).toHaveTextContent('한글');
+    expect(container).toHaveTextContent('DND');
   });
 });
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,15 +1,8 @@
-import clsx from 'clsx';
-
-import { pretendardFont, senFont } from './fonts';
+import HomePage from '@/components/pages/HomePage';
 
 function Home() {
   return (
-    <main>
-      <div>한글</div>
-      <div>english</div>
-      <div className={clsx(pretendardFont.className)}>한글</div>
-      <div className={clsx(senFont.className)}>english</div>
-    </main>
+    <HomePage />
   );
 }
 

diff --git a/src/components/pages/HomePage/index.module.scss b/src/components/pages/HomePage/index.module.scss
@@ -0,0 +1,50 @@
+@import "/src/styles/main";
+
+.homeSection {
+  display: flex;
+  flex-direction: row;
+  padding: 100px 0;
+  justify-content: space-between;
+
+  .contentsWrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 72px;
+
+    .description {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+
+      .title {
+        white-space: pre-line;
+        font-size: 56px;
+        font-weight: 700;
+        line-height: 140%;
+      }
+
+      .subTitle {
+        font-size: 20px;
+        line-height: 140%;
+        color: color('gray02');
+      }
+
+      .counter {
+        color: color('primary');
+        font-size: 20px;
+        font-weight: 700;
+        line-height: 140%;
+      }
+    }
+  }
+
+  .bannerWrapper {
+    position: relative;
+    max-width: 400px;
+    width: 100%;
+
+    .banner {
+      object-fit: contain;
+    }
+  }
+}
diff --git a/src/components/pages/HomePage/index.tsx b/src/components/pages/HomePage/index.tsx
@@ -0,0 +1,44 @@
+import Image from 'next/image';
+
+import styles from './index.module.scss';
+
+function HomePage() {
+  return (
+    <section className={styles.homeSection}>
+      <div className={styles.contentsWrapper}>
+        <div className={styles.description}>
+          <div>badge</div>
+          <h1 className={styles.title}>
+            {`프로젝트에 즐거움을
+              모두에게 기회를`}
+          </h1>
+          <div className={styles.subTitle}>
+            <strong>DND</strong>
+            는&nbsp;
+            <strong>개발자</strong>
+            와&nbsp;
+            <strong>디자이너</strong>
+            를 위한
+            <br />
+            계속해서 성장하는&nbsp;
+            <strong>IT비영리단체</strong>
+            입니다.
+          </div>
+          <div className={styles.counter}>오늘까지 000명이 지원했어요!</div>
+        </div>
+        <button type="button">지원하기</button>
+      </div>
+      <div className={styles.bannerWrapper}>
+        <Image
+          src="https://dnd-academy-v3.s3.ap-northeast-2.amazonaws.com/images/banner/about.png"
+          alt="main-banner"
+          fill
+          sizes="(max-width: 1156px) 50vw, 33vw"
+          className={styles.banner}
+        />
+      </div>
+    </section>
+  );
+}
+
+export default HomePage;