main page 수정

HyunaKim10 · Jan 17, 2021 · 6144268 · 6144268
1 parent a760d51
commit 6144268
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 105 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/packages/dodam/public/images/ic_ranking.svg b/packages/dodam/public/images/ic_ranking.svg
diff --git a/packages/dodam/public/images/ic_real time.svg b/packages/dodam/public/images/ic_real time.svg
diff --git a/packages/dodam/images/mainBanner.png → packages/dodam/public/images/mainBanner.png b/packages/dodam/images/mainBanner.png → packages/dodam/public/images/mainBanner.png