Feature/6

folin-web/package.json

@@ -12,6 +12,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "styled-components": "^5.3.0",
+    "styled-reset": "^4.3.4",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

folin-web/src/assets/fonts/index.css

@@ -1,54 +1,54 @@
 @font-face {
   font-family: "Noto Serif KR";
   font-weight: 400;
-  src: url("../fonts/NotoSerifCJKkr-Regular.otf") format("otf");
+  src: url("./NotoSerifCJKkr-Regular.otf") format("otf");
 }
 
 @font-face {
   font-family: "Noto Serif KR";
   font-weight: 700;
-  src: url("../fonts/NotoSerifCJKkr-Bold.otf") format("otf");
+  src: url("./NotoSansCJKkr-Bold.otf") format("otf");
 }
 
 @font-face {
   font-family: "Noto Sans KR";
   font-weight: 400;
-  src: url("../fonts/NotoSansCJKkr-Regular.otf") format("otf");
+  src: url("./NotoSansCJKkr-Regular.otf") format("otf");
 }
 
 @font-face {
   font-family: "Noto Sans KR";
   font-weight: 500;
-  src: url("../fonts/NotoSansCJKkr-Medium.otf") format("otf");
+  src: url("./NotoSansCJKkr-Medium.otf") format("otf");
 }
 
 @font-face {
   font-family: "Noto Sans KR";
   font-weight: 700;
-  src: url("../fonts/NotoSansCJKkr-Bold.otf") format("otf");
+  src: url("./NotoSansCJKkr-Bold.otf") format("otf");
 }
 
 @font-face {
   font-family: "Nanum Myeongjo";
   font-weight: 400;
-  src: url("../fonts/NanumMyeongjo.otf") format("otf");
+  src: url("./NanumMyeongjo.otf") format("otf");
 }
 
 @font-face {
   font-family: "Nanum Myeongjo";
   font-weight: 700;
-  src: url("../fonts/NanumMyeongjoBold.otf") format("otf");
+  src: url("./NanumMyeongjoBold.otf") format("otf");
 }
 
 /* window 용이라는데 사실 잘 모르겠.. */
 @font-face {
   font-family: "Nanum Myeongjo";
   font-weight: 701;
-  src: url("../fonts/NanumMyeongjoBoldwindow.otf") format("otf");
+  src: url("./NanumMyeongjoBoldwindow.otf") format("otf");
 }
 
 @font-face {
   font-family: "Nanum Myeongjo";
   font-weight: 900;
-  src: url("../fonts/NanumMyeongjoExtraBold.otf") format("otf");
+  src: url("./NanumMyeongjoExtraBold.otf") format("otf");
 }

folin-web/src/assets/styles/GlobalStyles.js

@@ -9,8 +9,8 @@ const GlobalStyles = createGlobalStyle`
     font-family: 'Noto Serif KR';
     box-sizing: border-box;
     font-size: 10px;
-    padding-left: 17.3vw;
-    padding-right: 17.3vw;
+    padding-left: 5vw;
+    padding-right: 5vw;
 
   @media (max-width: 1200px) {
     padding-left: 1.8vw;

folin-web/src/assets/styles/theme.js

@@ -10,7 +10,7 @@ const text = {
   textGray1: "#595959",
   textGray2: "#9D9D9D",
   textWhite: "#FFFFFF",
-  textGreen: "#00564A",
+  textGreen: "#1E9285",
 };
 
 const theme = {

folin-web/src/components/First/Down.js

@@ -0,0 +1,177 @@
+import React from "react";
+import styled from "styled-components";
+import ThemeStoryCard from "./Down/ThemeStoryCard";
+import TopTenCard from "./Down/TopTenCard";
+
+const Wrapper = styled.div`
+  position: relative;
+  width: 1200px;
+  margin: 0 auto;
+
+  .themeStory {
+    &__title {
+      font-family: "Noto Sans KR";
+      font-style: normal;
+      font-weight: bold;
+      font-size: 36px;
+      line-height: 52px;
+      letter-spacing: -0.07em;
+      color: #00554a;
+      z-index: 0;
+    }
+
+    &__subtitle {
+      font-family: "Noto Serif KR";
+      font-style: normal;
+      font-weight: normal;
+      font-size: 38px;
+      line-height: 55px;
+      color: #2d2a26;
+      position: absolute;
+      top: 87px;
+      width: 25%;
+      letter-spacing: -0.055em;
+    }
+
+    &__itemContainer {
+      width: 75%;
+      margin-left: 25%;
+      margin-top: 50px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    &__items {
+      width: 5544px;
+      height: 1000px;
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      align-content: flex-start;
+    }
+
+    button {
+      position: absolute;
+      padding: 28px;
+      top: 300px;
+      border: 0px;
+      background-color: transparent;
+      text-align: center;
+      margin-top: 0px;
+      cursor: pointer;
+
+      :before {
+        content: "";
+        transform: rotate(45deg);
+        display: inline-block;
+        position: absolute;
+        top: 50%;
+        width: 26px;
+        height: 26px;
+        margin-top: -13px;
+      }
+    }
+
+    &__prevButton {
+      left: -6px;
+
+      ::before {
+        border: 1px solid;
+        border-color: transparent transparent #e0e0e0 #e0e0e0;
+        left: 50%;
+        margin-left: -4px;
+      }
+    }
+
+    &__nextButton {
+      left: 50px;
+
+      ::before {
+        border: 1px solid;
+        border-color: #6d6b68 #6d6b68 transparent transparent;
+        right: 50%;
+        margin-right: -4px;
+      }
+    }
+  }
+
+  .topTen {
+    &__title {
+      font-family: Noto Sans KR;
+      font-style: normal;
+      font-weight: bold;
+      font-size: 36px;
+      line-height: 52px;
+      letter-spacing: -0.07em;
+      color: #00554a;
+    }
+
+    &__subtitle {
+      font-family: Noto Sans KR;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 18px;
+      line-height: 26px;
+      /* identical to box height */
+
+      letter-spacing: -0.03em;
+
+      color: #636363;
+    }
+
+    &__itemContainer {
+      margin-top: 60px;
+      margin-left: 50px;
+    }
+
+    &__items {
+      display: flex;
+      flex-direction: column;
+      height: 600px;
+      flex-wrap: wrap;
+
+      li {
+        margin-bottom: 43px;
+      }
+    }
+  }
+`;
+
+const Down = ({ props }) => {
+  return (
+    <Wrapper>
+      <div className='themeStory'>
+        <h2 className='themeStory__title'>테마가 있는 스토리</h2>
+        <h3 className='themeStory__subtitle'>
+          일하는 방식을 실험하는 브랜드, 모베리웍스
+        </h3>
+        <div className='themeStory__itemContainer'>
+          <ul className='themeStory__items'>
+            {props &&
+              props.map((item) => (
+                <ThemeStoryCard key={item.id} props={item} />
+              ))}
+          </ul>
+        </div>
+        <button className='themeStory__prevButton'></button>
+        <button className='themeStory__nextButton'></button>
+      </div>
+      <div className='topTen'>
+        <h2 className='topTen__title'>폴인 인기 Top 10</h2>
+        <h3 className='topTen__subtitle'>
+          멤버십 회원들이 많이 본 요즘 직장인 대세 콘텐츠!
+        </h3>
+        <div className='topTen__itemContainer'>
+          <ul className='topTen__items'>
+            {props &&
+              props.map((item, index) => (
+                <TopTenCard key={index} props={item} />
+              ))}
+          </ul>
+        </div>
+      </div>
+    </Wrapper>
+  );
+};
+
+export default Down;