From 6144268e3c66c0a848ab70adaa30fe342ff846c8 Mon Sep 17 00:00:00 2001
From: hyuna <hyuna161117@gmail.com>
Date: Mon, 18 Jan 2021 01:00:08 +0900
Subject: [PATCH] =?UTF-8?q?main=20page=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/dodam/components/GridView.js         |  27 +---
 packages/dodam/components/RankingView.js      |  11 ++
 packages/dodam/next.config.js                 |   2 -
 packages/dodam/pages/_app.js                  |  33 +----
 packages/dodam/pages/index.js                 | 127 +++++++++++-------
 packages/dodam/public/images/ic_overview.svg  |   1 +
 packages/dodam/public/images/ic_ranking.svg   |   1 +
 packages/dodam/public/images/ic_real time.svg |   1 +
 .../dodam/{ => public}/images/mainBanner.png  | Bin
 9 files changed, 98 insertions(+), 105 deletions(-)
 create mode 100644 packages/dodam/components/RankingView.js
 create mode 100644 packages/dodam/public/images/ic_overview.svg
 create mode 100644 packages/dodam/public/images/ic_ranking.svg
 create mode 100644 packages/dodam/public/images/ic_real time.svg
 rename packages/dodam/{ => public}/images/mainBanner.png (100%)

diff --git a/packages/dodam/components/GridView.js b/packages/dodam/components/GridView.js
index ecd8a35..90f5eb2 100644
--- a/packages/dodam/components/GridView.js
+++ b/packages/dodam/components/GridView.js
@@ -1,30 +1,9 @@
-// const GridtView = {
-//     {
-//         "key": "1",
-//         "name": "Club",
-//         // "imageUrl" : ""
-//     },
-//     {
-//         "key": "2",
-//         "name": "Club",
-//         // "imageUrl" : ""
-//     },
-//     {
-//         "key": "3",
-//         "name": "Club",
-//         // "imageUrl" : ""
-//     },
-//     {
-//         "key": "4",
-//         "name": "Club",
-//         // "imageUrl" : ""
-//     },
-// };
+import Image from 'next/image';
 
 export default function GridtView(props) {
-  const dataList = props.data.map((data, i) => (
+  const dataList = props.data.map((data) => (
     <div className="col-6">
-      <img className="img-temp" src={data.imageUrl} />
+      <Image className="img-temp" src="/{data.imageUrl}" height="152px" width="152px" />
       <div className="title-temp">{data.title}</div>
     </div>
   ));
diff --git a/packages/dodam/components/RankingView.js b/packages/dodam/components/RankingView.js
new file mode 100644
index 0000000..615ccb8
--- /dev/null
+++ b/packages/dodam/components/RankingView.js
@@ -0,0 +1,11 @@
+import Image from 'next/image';
+
+export default function RankingtView(props) {
+  const dataList = props.data.map((data) => (
+    <div className="col-4">
+      <Image className="img-temp" src="/{data.imageUrl}" height="128px" width="96px" />
+      <div className="title-temp">{data.title}</div>
+    </div>
+  ));
+  return <div className="row">{dataList}</div>;
+}
diff --git a/packages/dodam/next.config.js b/packages/dodam/next.config.js
index 25d7c42..8c8ff6c 100644
--- a/packages/dodam/next.config.js
+++ b/packages/dodam/next.config.js
@@ -1,5 +1,3 @@
 const withTM = require('next-transpile-modules')(['@dodam/components'], true);
-const withImages = require('next-images');
 
 module.exports = withTM();
-module.exports = withImages();
diff --git a/packages/dodam/pages/_app.js b/packages/dodam/pages/_app.js
index 8baabd7..e099a20 100644
--- a/packages/dodam/pages/_app.js
+++ b/packages/dodam/pages/_app.js
@@ -12,38 +12,7 @@ const Dodam = ({ Component, pageProps }) => (
     <style jsx>
       {`
         .dodam-root {
-          padding: 50px 0px 0px 0px;
-        }
-      `}
-    </style>
-    <style jsx global>
-      {`
-        body {
-          width: 100vw;
-        }
-        :root {
-          /* Colors: */
-          --unnamed-color-ebba00: #ebba00;
-          --unnamed-color-191919: #191919;
-
-          /* Font/text values */
-          --unnamed-font-family-noto-sans-cjk-kr: Noto Sans CJK KR;
-          --unnamed-font-style-normal: normal;
-          --unnamed-font-weight-normal: normal;
-          --unnamed-font-size-40: 40px;
-          --unnamed-character-spacing-0: 0px;
-          --unnamed-line-spacing-59: 59px;
-        }
-
-        /* Character Styles */
-        .unnamed-character-style-1 {
-          font-family: var(--unnamed-font-family-noto-sans-cjk-kr);
-          font-style: var(--unnamed-font-style-normal);
-          font-weight: var(--unnamed-font-weight-normal);
-          font-size: var(--unnamed-font-size-40);
-          line-height: var(--unnamed-line-spacing-59);
-          letter-spacing: var(--unnamed-character-spacing-0);
-          color: var(--unnamed-color-8c8c8c);
+          padding: 58px 8px 8px 8px;
         }
       `}
     </style>
diff --git a/packages/dodam/pages/index.js b/packages/dodam/pages/index.js
index 3277a35..f696534 100644
--- a/packages/dodam/pages/index.js
+++ b/packages/dodam/pages/index.js
@@ -1,8 +1,10 @@
 import { Button } from '@dodam/components';
-import mainBanner from '@/images/mainBanner.png';
+import Image from 'next/image';
 import GridView from '@/components/GridView.js';
+import { Typography } from '@dodam/components';
+import RankingtView from '@/components/RankingView';
 
-let data = [
+const data = [
   {
     imageUrl: '1.png',
     title: '1번 타이틀',
@@ -21,7 +23,7 @@ let data = [
   },
 ];
 
-let weekData = [
+const weekData = [
   {
     imageUrl: '1.png',
     title: '1번 타이틀',
@@ -37,63 +39,94 @@ let weekData = [
 ];
 
 export default function Main() {
-  const dataList = weekData.map((data, i) => (
-    <div className="col-4">
-      <img className="img-temp" src={data.imageUrl} />
-      <div className="title-temp">{data.title}</div>
-    </div>
-  ));
   return (
-    <div className="w-100">
-      <div className="first-container">
+    <div className="row wrapper">
+      <div className="first-container mb-3">
         <div className="title-wrapper">
-          <div className="title">나에게 맞는 최적의 동아리는?</div>
-          <div className="sub-title">
-            성격유형분석을 통한 <br />
-            동아리맞춤 서비스를 만나보세요
+          <Typography className="title">나에게 맞는 최적의 동아리는?</Typography>
+          <Typography weight="bold" variant="h3">
+            성격유형분석을 통한
+          </Typography>
+          <Typography weight="bold" variant="h3">
+            동아리 맞춤 서비스를 만나보세요
+          </Typography>
+          <div className="test-start">
+            <Button className="test-button">
+              <Typography className="button-text" align="center" variant="span">
+                테스트 시작
+              </Typography>
+            </Button>
           </div>
-          <Button className="test-start">테스트 시작</Button>
         </div>
       </div>
-      <div className="container">
-        <div className="section-title">금주 동아리 랭킹</div>
-        <div className="row">{dataList}</div>
+
+      <div className="row ranking mb-5">
+        <div className="row d-flex align-items-center">
+          <div className="col-2 d-flex align-items-center">
+            <Image className="ranking-image" src="/../public/images/ic_ranking.svg" height="24px" width="24px" />
+          </div>
+          <div className="col">
+            <Typography className="section-title" weight="bold" variant="h5">
+              금주 동아리 랭킹
+            </Typography>
+          </div>
+        </div>
+        <div className="row mt-3">
+          <RankingtView data={weekData} />
+        </div>
       </div>
-      <div className="container">
-        <div className="section-title">실시간 모집공고</div>
-        <GridView data={data} />
+
+      <div className="row real-time mb-5">
+        <div className="row d-flex align-items-center">
+          <div className="col-2 d-flex align-items-center">
+            <Image className="real-time-image" src="/../public/images/ic_real time.svg" height="24px" width="24px" />
+          </div>
+          <div className="col">
+            <Typography className="section-title" weight="bold" variant="h5">
+              실시간 모집공고
+            </Typography>
+          </div>
+          <div className="col-2 d-flex align-items-center">
+            <Image className="overview-image" src="/../public/images/ic_overview.svg" height="24px" width="24px" />
+          </div>
+        </div>
+        <div className="row mt-3">
+          <GridView data={data} />
+        </div>
       </div>
-      <div className="footer">
-        <span>FOOOOOOOOOOOTTTTTTTTTTTTEEEEEEEEEEERRRRRR</span>
+      <div className="row footer">
+        <span variant="span">
+          도담도담 소개 | 이용약관 | 개인정보처리방침
+          <br />
+          서울특별시 강남구(도담도담)
+          <br />
+          Copyright 2020. DodamDodam All rights reserved.
+          <br />
+        </span>
       </div>
+
       <style jsx>
         {`
+          .wrapper {
+            position: absolute;
+            top: 50px;
+          }
           .first-container {
-            background-size: cover;
+            height: 450px;
+            background-size: 100% 100%;
             background-repeat: no-repeat;
-            background-image: url(${mainBanner});
-            padding-bottom: 100%;
+            background-image: url('/../images/mainBanner.png');
           }
           .title-wrapper {
-            margin-left: 40px;
+            margin-left: 36px;
             padding-top: 53px;
             color: #242424;
             opacity: 1;
           }
-          .title {
-            font: normal normal normal 13px/19px Noto Sans CJK KR;
-            letter-spacing: -0.65px;
-          }
-          .sub-title {
-            font: normal normal bold 22px/32px Noto Sans CJK KR;
-            letter-spacing: -1.1px;
-          }
-          .section-title {
-            text-align: left;
-            font: normal normal bold 20px/29px Noto Sans CJK KR;
-            letter-spacing: -1px;
-            color: #191919;
-            opacity: 1;
+          .ranking,
+          .real-time {
+            margin-left: 36px;
+            padding-top: 36px;
           }
           .footer {
             background-color: #000000;
@@ -102,11 +135,11 @@ export default function Main() {
             padding-top: 10%;
             padding-bottom: 10%;
           }
-        `}
-      </style>
-      <style jsx global>
-        {`
-          .test-start {
+          .test-start :global(.test-button) {
+            top: 208px;
+            left: 36px;
+            width: 106px;
+            height: 38px;
             background: #191919 0% 0% no-repeat padding-box;
             border-radius: 19px;
             opacity: 1;
diff --git a/packages/dodam/public/images/ic_overview.svg b/packages/dodam/public/images/ic_overview.svg
new file mode 100644
index 0000000..bd375e9
--- /dev/null
+++ b/packages/dodam/public/images/ic_overview.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="6.001" height="14" viewBox="0 0 6.001 14"><defs><style>.a{fill:#191919;}</style></defs><path class="a" d="M730.4,329l-.649-.641,5.019-6.059a.469.469,0,0,0,0-.6l-5.02-6.059L730.4,315l5.018,6.059a1.492,1.492,0,0,1,0,1.882Z" transform="translate(-729.746 -315)"/></svg>
\ No newline at end of file
diff --git a/packages/dodam/public/images/ic_ranking.svg b/packages/dodam/public/images/ic_ranking.svg
new file mode 100644
index 0000000..e6bbad4
--- /dev/null
+++ b/packages/dodam/public/images/ic_ranking.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:#fff;}.b{fill:#f5d424;}</style></defs><g transform="translate(-320 -781)"><rect class="a" width="24" height="24" transform="translate(320 781)"/><g transform="translate(320 783.502)"><path class="b" d="M771.777,379.507l-.474-.681-2.944-4.231a1.738,1.738,0,0,0-2.707,0l-2.945,4.231-.474.681-3.479-2.02c-1.078-.626-2.549.065-2.455,1.154l.467,7.077a1.467,1.467,0,0,0,1.561,1.226h17.358a1.467,1.467,0,0,0,1.561-1.226l.467-7.077c.094-1.089-1.378-1.78-2.455-1.154Z" transform="translate(-754.807 -370.166)"/><circle class="b" cx="1.282" cy="1.282" r="1.282" transform="translate(11.118 0)"/><circle class="b" cx="1.28" cy="1.28" r="1.28" transform="translate(0 3.117)"/><circle class="b" cx="1.28" cy="1.28" r="1.28" transform="translate(21.44 3.117)"/></g></g></svg>
\ No newline at end of file
diff --git a/packages/dodam/public/images/ic_real time.svg b/packages/dodam/public/images/ic_real time.svg
new file mode 100644
index 0000000..2bb1675
--- /dev/null
+++ b/packages/dodam/public/images/ic_real time.svg	
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><defs><style>.a{fill:#fff;opacity:0.72;}.b{fill:#6bb898;}.b,.c,.d{stroke:#11544f;}.b,.c{stroke-miterlimit:10;}.c,.d,.f{fill:none;}.c,.d{stroke-linecap:round;}.d{stroke-linejoin:round;}.e{stroke:none;}</style></defs><g transform="translate(-19.5 -809.5)"><g transform="translate(-853 448)"><rect class="a" width="24" height="24" transform="translate(873 362)"/><g class="b" transform="translate(875.727 364.727)"><circle class="e" cx="9.273" cy="9.273" r="9.273"/><circle class="f" cx="9.273" cy="9.273" r="8.773"/></g><path class="c" d="M880.329,362.943a11.994,11.994,0,1,1-6.19,5.948"/><path class="d" d="M882.273,371.974l2.805,3.273,3.74-4.675"/></g></g></svg>
\ No newline at end of file
diff --git a/packages/dodam/images/mainBanner.png b/packages/dodam/public/images/mainBanner.png
similarity index 100%
rename from packages/dodam/images/mainBanner.png
rename to packages/dodam/public/images/mainBanner.png