From 1861c65f992b99b1210da6784158df500b0bceb2 Mon Sep 17 00:00:00 2001 From: YeongWoooo Date: Fri, 21 May 2021 13:38:42 +0900 Subject: [PATCH 01/26] =?UTF-8?q?[add]=20=EC=B9=B4=EB=93=9C=20=EB=B7=B0=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/components/First/Down/Card.jsx | 152 +++++++++++++++++++ 1 file changed, 152 insertions(+) create mode 100644 folin-web/src/components/First/Down/Card.jsx diff --git a/folin-web/src/components/First/Down/Card.jsx b/folin-web/src/components/First/Down/Card.jsx new file mode 100644 index 0000000..244fc50 --- /dev/null +++ b/folin-web/src/components/First/Down/Card.jsx @@ -0,0 +1,152 @@ +import React from "react"; +import styled from "styled-components"; +import BookmarkUnclickedBtnIcon from "../../../assets/icons/bookmarkUnclickedBtn.svg"; +import HeartUnclickedBtnIcon from "../../../assets/icons/heartUnclickedBtn.svg"; + +const CardWrapper = styled.li` + height: 407px; + padding-bottom: 40px; + margin-right: 24px; + position: relative; + width: 284px; + + .card { + &__image img { + width: 100%; + height: auto; + } + + &__cardInfo { + margin-top: 16px; + min-height: 107px; + } + + &__categories { + font-family: "Noto Sans KR"; + font-weight: 600; + font-size: 13px; + color: #1e9285; + margin-left: 1px; + margin-bottom: 10px; + line-height: 18px; + letter-spacing: -0.11em; + display: inline-block; + + li { + float: left; + position: relative; + } + + li + li { + margin-left: 10px; + + ::before { + content: ""; + position: absolute; + top: 50%; + left: -6px; + margin-top: -1px; + display: inline-block; + width: 2px; + height: 2px; + background-color: #008375; + } + } + } + + &__title { + font-family: "Noto Serif KR"; + font-weight: 400; + font-size: 21px; + color: #2d2a26; + max-height: 56px; + line-height: 26px; + letter-spacing: -0.05em; + } + + &__publisher { + font-family: "Noto Sans KR"; + font-weight: 600; + font-size: 12px; + color: #878787; + margin-top: 17px; + margin-bottom: 30px; + letter-spacing: -0.11em; + line-height: 16px; + } + } + .bottom { + display: block; + position: absolute; + left: 0; + right: 0; + bottom: 0; + + &__status { + font-family: "Noto Sans KR"; + font-weight: 600; + font-size: 12px; + letter-spacing: -0.11em; + line-height: 16px; + color: #9a9a9a; + float: left; + } + + &__icons { + float: right; + } + + &__heart { + display: inline-block; + margin-right: 9px; + img { + width: 21px; + height: auto; + } + } + + &__bookmark { + display: inline-block; + margin-right: 5px; + img { + width: 21px; + height: auto; + } + } + } +`; + +const Card = ({ props }) => { + return ( + + +
+ +
+
+
    + {props.categories && + props.categories.map((item, index) => { + return
  • {item}
    • ; + })} +
+
{props.title}
+
{props.publisher}
+
+ +
+
{props.status}
+
+
+ +
+
+ +
+
+
+ + ); +}; + +export default Card; From f6a55a1d7ec197f99bc783d9d299bba53e1c85cb Mon Sep 17 00:00:00 2001 From: YeongWoooo Date: Fri, 21 May 2021 13:39:34 +0900 Subject: [PATCH 02/26] =?UTF-8?q?[update]=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=EC=97=90=20=ED=82=A4=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/components/First/Down/Card.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/folin-web/src/components/First/Down/Card.jsx b/folin-web/src/components/First/Down/Card.jsx index 244fc50..724f406 100644 --- a/folin-web/src/components/First/Down/Card.jsx +++ b/folin-web/src/components/First/Down/Card.jsx @@ -127,7 +127,7 @@ const Card = ({ props }) => {
{props.title}
From 6dcc4d09a9fdf7c3e658adc9d764ff6c2772608e Mon Sep 17 00:00:00 2001 From: leeinsong Date: Fri, 21 May 2021 15:49:31 +0900 Subject: [PATCH 03/26] =?UTF-8?q?[feat]=20Header=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20Up=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/components/First/Down.js | 11 ++++++ folin-web/src/components/First/First.js | 29 +++++++++++++++- folin-web/src/components/First/Up.js | 11 ++++++ folin-web/src/components/First/Up/Keyword.js | 7 ++++ folin-web/src/components/First/Up/Slider.js | 7 ++++ folin-web/src/components/First/Up/Story.js | 7 ++++ folin-web/src/components/Header.js | 35 ++++++++++++++------ 7 files changed, 96 insertions(+), 11 deletions(-) create mode 100644 folin-web/src/components/First/Up/Keyword.js create mode 100644 folin-web/src/components/First/Up/Slider.js create mode 100644 folin-web/src/components/First/Up/Story.js diff --git a/folin-web/src/components/First/Down.js b/folin-web/src/components/First/Down.js index e69de29..89bb95c 100644 --- a/folin-web/src/components/First/Down.js +++ b/folin-web/src/components/First/Down.js @@ -0,0 +1,11 @@ +import React from "react"; + +const Down = () => { + return ( +
+

Down

+
+ ); +}; + +export default Down; diff --git a/folin-web/src/components/First/First.js b/folin-web/src/components/First/First.js index 18f11cc..cb0d8fe 100644 --- a/folin-web/src/components/First/First.js +++ b/folin-web/src/components/First/First.js @@ -1 +1,28 @@ -export default () =>

First Page

; +import React from "react"; +import Up from "../First/Up"; +import Down from "../First/Down"; +import Styled from "styled-components"; +import Slider from "../First/Up/Slider"; +import Story from "../First/Up/Story"; +import Keyword from "../First/Up/Keyword"; + +const TopWrapper = Styled.div` + position: relative; + top: 45vh; + font-family: "Nanum Myeongjo"; + font-weight: 500; +`; + +const First = () => { + return ( + <> + + + + + + + ); +}; + +export default First; diff --git a/folin-web/src/components/First/Up.js b/folin-web/src/components/First/Up.js index e69de29..ffd7f76 100644 --- a/folin-web/src/components/First/Up.js +++ b/folin-web/src/components/First/Up.js @@ -0,0 +1,11 @@ +import React from "react"; + +const Up = () => { + return ( +
+

Up

+
+ ); +}; + +export default Up; diff --git a/folin-web/src/components/First/Up/Keyword.js b/folin-web/src/components/First/Up/Keyword.js new file mode 100644 index 0000000..7068810 --- /dev/null +++ b/folin-web/src/components/First/Up/Keyword.js @@ -0,0 +1,7 @@ +import React from "react"; + +const Keyword = () => { + return
This is the KeyWord
; +}; + +export default Keyword; diff --git a/folin-web/src/components/First/Up/Slider.js b/folin-web/src/components/First/Up/Slider.js new file mode 100644 index 0000000..13d5a3d --- /dev/null +++ b/folin-web/src/components/First/Up/Slider.js @@ -0,0 +1,7 @@ +import React from "react"; + +const Slider = () => { + return
This is the Slider
; +}; + +export default Slider; diff --git a/folin-web/src/components/First/Up/Story.js b/folin-web/src/components/First/Up/Story.js new file mode 100644 index 0000000..ce1a047 --- /dev/null +++ b/folin-web/src/components/First/Up/Story.js @@ -0,0 +1,7 @@ +import React from "react"; + +const Story = () => { + return
This is the story
; +}; + +export default Story; diff --git a/folin-web/src/components/Header.js b/folin-web/src/components/Header.js index cc645cd..bfe7920 100644 --- a/folin-web/src/components/Header.js +++ b/folin-web/src/components/Header.js @@ -1,30 +1,29 @@ import React from "react"; import styled from "styled-components"; import { withRouter } from "react-router-dom"; -import Logo from "../assets/icons/alarmBtn.svg"; +import SearchBtn from "../assets/icons/searchBtn.svg"; const UpHeader = styled.header` position: fixed; - top: -42px; + top: -10vh; left: 0; width: 100%; - height: 100px; + height: 28vh; display: flex; justify-content: center; align-items: center; background-color: ${(props) => props.theme.colorEmerald}; color: ${(props) => props.theme.textWhite}; - z-index: 10; + font-size: 16px; `; const DownHeader = styled.header` - color: white; position: fixed; - top: 58px; + top: 20vh; left: 0; width: 100%; - height: 100px; + height: 25vh; display: flex; justify-content: center; align-items: center; @@ -34,11 +33,13 @@ const DownHeader = styled.header` const List = styled.ul` width: 70vw; display: flex; - padding-top: 4rem; + padding-top: 2.8rem; align-items: center; `; const Item = styled.li` + display: table-cell; + vertical-align: middle; font-family: "Noto Sans KR"; font-weight: 700; font-size: ${(props) => (props.current ? "16px" : "12px")}; @@ -53,7 +54,7 @@ const DList = styled.ul` `; const DItem = styled.li` -font-family: "Nanum Myeongjo"; + font-family: "Nanum Myeongjo"; font-weight: 700; text-align: center; font-size: ${(props) => (props.current ? "3rem" : "2rem")}; @@ -65,13 +66,25 @@ font-family: "Nanum Myeongjo"; vertical-align: middle; `; +const SearchUser = styled.p` + font-size: 1.4rem; + border-bottom: solid 1px; + margin-right: 0.5rem; +`; + +const SearchImg = styled.img` + width: 1.5rem; + padding-bottom: 0.5rem; +`; const Header = () => { return ( <> 폴인멤버십 - 오직 폴인에서만! 1천 여개 콘텐츠를 무제한으로! + + 오직 폴인에서만! 1천 여개 콘텐츠를 무제한으로! + @@ -81,6 +94,8 @@ const Header = () => { Seminar Study + 류진님 + ); From 4898a503757b8ea2110f186a55eccd44a3c05b28 Mon Sep 17 00:00:00 2001 From: leeinsong Date: Fri, 21 May 2021 16:05:38 +0900 Subject: [PATCH 04/26] =?UTF-8?q?[feat]=20globalstyles=20=EC=9D=98padding?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/assets/styles/GlobalStyles.js | 4 ++-- folin-web/src/components/First/First.js | 7 ++++++- folin-web/src/components/First/Up/Slider.js | 23 ++++++++++++++++++++- folin-web/src/components/Header.js | 15 +++++++------- 4 files changed, 37 insertions(+), 12 deletions(-) diff --git a/folin-web/src/assets/styles/GlobalStyles.js b/folin-web/src/assets/styles/GlobalStyles.js index 5040f67..3070ac9 100644 --- a/folin-web/src/assets/styles/GlobalStyles.js +++ b/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; diff --git a/folin-web/src/components/First/First.js b/folin-web/src/components/First/First.js index cb0d8fe..6938b22 100644 --- a/folin-web/src/components/First/First.js +++ b/folin-web/src/components/First/First.js @@ -8,7 +8,12 @@ import Keyword from "../First/Up/Keyword"; const TopWrapper = Styled.div` position: relative; - top: 45vh; + top: 20vh; + width: 80vw; + display: flex; + z-index: -1; + flex-direction: column; + justify-content: space-between; font-family: "Nanum Myeongjo"; font-weight: 500; `; diff --git a/folin-web/src/components/First/Up/Slider.js b/folin-web/src/components/First/Up/Slider.js index 13d5a3d..0bc9dff 100644 --- a/folin-web/src/components/First/Up/Slider.js +++ b/folin-web/src/components/First/Up/Slider.js @@ -1,7 +1,28 @@ import React from "react"; +import styled from "styled-components"; + +const Wrapper = styled.div` + height: 60vh; + width: 100%; + background-color: green; +`; +const List = styled.ul` + display: flex; + width: 100%; +`; const Slider = () => { - return
This is the Slider
; + return ( + + +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +     +
    button 3개
    +     + ); }; export default Slider; diff --git a/folin-web/src/components/Header.js b/folin-web/src/components/Header.js index bfe7920..6799c8b 100644 --- a/folin-web/src/components/Header.js +++ b/folin-web/src/components/Header.js @@ -8,32 +8,33 @@ const UpHeader = styled.header` top: -10vh; left: 0; width: 100%; - height: 28vh; + height: 20vh; display: flex; justify-content: center; align-items: center; background-color: ${(props) => props.theme.colorEmerald}; color: ${(props) => props.theme.textWhite}; - + z-index: 1; font-size: 16px; `; const DownHeader = styled.header` position: fixed; - top: 20vh; + top: 10vh; left: 0; width: 100%; - height: 25vh; + height: 10vh; display: flex; justify-content: center; align-items: center; + z-index: 1; color: ${(props) => props.theme.textBlack}; `; const List = styled.ul` width: 70vw; display: flex; - padding-top: 2.8rem; + padding-top: 7rem; align-items: center; `; @@ -61,9 +62,7 @@ const DItem = styled.li` padding-top: ${(props) => (props.current ? "0" : "0.5rem")}; margin-right: 8rem; color: ${(props) => props.theme.textBlack}; - height: 3rem - display: table-cell; - vertical-align: middle; + height: 3rem; `; const SearchUser = styled.p` From 3c6a9fef8fe5d1d4913cfcd961d4654c355f80f5 Mon Sep 17 00:00:00 2001 From: leeinsong Date: Fri, 21 May 2021 16:29:17 +0900 Subject: [PATCH 05/26] =?UTF-8?q?[add]=20scss=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/components/First/First.js | 3 ++- folin-web/src/components/First/Up/Keyword.js | 14 ++++++++++- folin-web/src/components/First/Up/Slider.js | 25 ++++++++++++++++---- folin-web/src/components/First/Up/Story.js | 12 +++++++++- 4 files changed, 46 insertions(+), 8 deletions(-) diff --git a/folin-web/src/components/First/First.js b/folin-web/src/components/First/First.js index 6938b22..f06ffc3 100644 --- a/folin-web/src/components/First/First.js +++ b/folin-web/src/components/First/First.js @@ -9,11 +9,12 @@ import Keyword from "../First/Up/Keyword"; const TopWrapper = Styled.div` position: relative; top: 20vh; - width: 80vw; + width: 100%; display: flex; z-index: -1; flex-direction: column; justify-content: space-between; + align-items: center; font-family: "Nanum Myeongjo"; font-weight: 500; `; diff --git a/folin-web/src/components/First/Up/Keyword.js b/folin-web/src/components/First/Up/Keyword.js index 7068810..15208f4 100644 --- a/folin-web/src/components/First/Up/Keyword.js +++ b/folin-web/src/components/First/Up/Keyword.js @@ -1,7 +1,19 @@ import React from "react"; +import styled from "styled-components"; + +const Wrapper = styled.div` + height: 30vh; + width: 85%; + background-color: purple; +`; +const List = styled.ul` + display: flex; + width: 100%; +`; + const Keyword = () => { - return
    This is the KeyWord
    ; + return This is the KeyWord; }; export default Keyword; diff --git a/folin-web/src/components/First/Up/Slider.js b/folin-web/src/components/First/Up/Slider.js index 0bc9dff..6ab6ab1 100644 --- a/folin-web/src/components/First/Up/Slider.js +++ b/folin-web/src/components/First/Up/Slider.js @@ -1,24 +1,39 @@ import React from "react"; import styled from "styled-components"; +import LeftArrow from "../../../assets/icons/leftArrowBtn.svg"; +import RightArrow from "../../../assets/icons/rightArrow.svg"; const Wrapper = styled.div` height: 60vh; - width: 100%; + width: 85%; background-color: green; `; const List = styled.ul` display: flex; + justify-content: space-between; + align-items: center; + height: 90%; width: 100%; `; +const Item = styled.li``; +const IconContainer = styled.img``; +const ImageContainer = styled.img``; + const Slider = () => { return ( -
  • 1
    • -
  • 2
    • -
  • 3
    • -
  • 4
    • + + + + + + + 3 + + +
    button 3개
     diff --git a/folin-web/src/components/First/Up/Story.js b/folin-web/src/components/First/Up/Story.js index ce1a047..5b6cb7f 100644 --- a/folin-web/src/components/First/Up/Story.js +++ b/folin-web/src/components/First/Up/Story.js @@ -1,7 +1,17 @@ import React from "react"; +import styled from "styled-components"; +const Wrapper = styled.div` + height: 60vh; + width: 85%; + background-color: whitesmoke; +`; +const List = styled.ul` + display: flex; + width: 100%; +`; const Story = () => { - return
    This is the story
    ; + return This is the story; }; export default Story; From 89711a51597181f7c50d0868a825301a774e3ab4 Mon Sep 17 00:00:00 2001 From: leeinsong Date: Fri, 21 May 2021 17:33:02 +0900 Subject: [PATCH 06/26] =?UTF-8?q?[add]=20=EC=8A=AC=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=8D=94=20=ED=8B=80=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/components/First/Up/Slider.js | 136 ++++++++++++++++---- 1 file changed, 109 insertions(+), 27 deletions(-) diff --git a/folin-web/src/components/First/Up/Slider.js b/folin-web/src/components/First/Up/Slider.js index 6ab6ab1..e5eafe4 100644 --- a/folin-web/src/components/First/Up/Slider.js +++ b/folin-web/src/components/First/Up/Slider.js @@ -1,42 +1,124 @@ import React from "react"; -import styled from "styled-components"; +import Styled from "styled-components"; import LeftArrow from "../../../assets/icons/leftArrowBtn.svg"; import RightArrow from "../../../assets/icons/rightArrow.svg"; -const Wrapper = styled.div` +const TopWrapper = Styled.div` height: 60vh; width: 85%; - background-color: green; + padding-top: 2rem; + .top { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + &__image{ + } + &__content{ + width: 40%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + &--title{ + font-family: "Noto Sans KR"; + font-weight: 700; + font-size: 15px; + padding-bottom: 1.5rem; + color: ${(props) => props.theme.textGreen}; + } + &--toptext{ + font-family: "Noto Sans KR"; + font-weight: 700; + font-size: 30px; + text-align: center; + } + &--middletext{ + padding: 1.5rem 0; + width: 95%; + font-family: "Noto Sans KR"; + font-weight: 400; + font-size: 13px; + text-align: center; + } + &--bottomtext{ + padding-top: 1rem; + width: 95%; + font-family: "Noto Sans KR"; + font-weight: 700; + font-size: 10px; + text-align: center; + display: flex; + justify-content: center; + &--color{ + color: ${(props) => props.theme.textGreen}; + } + } + } + } `; -const List = styled.ul` + +const ButtonWrapper = Styled.div` display: flex; - justify-content: space-between; - align-items: center; - height: 90%; - width: 100%; + justify-content: flex-end; + margin-right: 3rem; + padding-top: 1rem; + .btn { + margin: 0.5rem; + width: 1rem; + height: 1rem; + border: none; + border-radius: 50%; + } `; -const Item = styled.li``; -const IconContainer = styled.img``; -const ImageContainer = styled.img``; - const Slider = () => { return ( - - - - - - - - - 3 - - - - -
    button 3개
    -     + +
    +
    + leftArrow +
    +
    + cat + + + + + +
    +
    +
    지금 읽어 두면 좋은 콘텐츠
    +
    + 애니콜 디자이너가
    + 나이키 ·MS로 뻗어나간 비결 +
    +
    + 글로벌 기업을 무대로 활약해 온 유영규 디자이너는 +
    '한국 디자인계의 빛나는 성취'라고 불립니다. 아이리버, 나이키 + 시계 '베이퍼', 마이크로소프트 홀로렌즈가 모두 그의 작품입니다. + 유영규 디자이너의 디자인에는 어떤 가치가 담겨 있을까요? +
    +
    +

    + 라이프스타일 커리어 +

    + | 유영규 박지호 +
    +
    +
    + RightArrow +
    +
    +     ); }; From 32eef46f235f0aa641a14a3ec8383ba3dc33a2c0 Mon Sep 17 00:00:00 2001 From: YeongWoooo Date: Fri, 21 May 2021 21:47:18 +0900 Subject: [PATCH 07/26] =?UTF-8?q?[add]=20=ED=85=8C=EB=A7=88=EA=B0=80=20?= =?UTF-8?q?=EC=9E=88=EB=8A=94=20=EC=8A=A4=ED=86=A0=EB=A6=AC=20=EB=BC=88?= =?UTF-8?q?=EB=8C=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/components/First/Down.js | 113 +++++++++++++++++++++++++ 1 file changed, 113 insertions(+) diff --git a/folin-web/src/components/First/Down.js b/folin-web/src/components/First/Down.js index e69de29..a892124 100644 --- a/folin-web/src/components/First/Down.js +++ b/folin-web/src/components/First/Down.js @@ -0,0 +1,113 @@ +import React from "react"; +import styled from "styled-components"; +import Card from "./Down/Card"; + +const Wrapper = styled.div` + .down { + position: relative; + width: 1200px; + margin: 0 auto; + + &__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; + } + + 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; + } + } + } +`; + +const Down = ({ props }) => { + return ( + +
    +

    테마가 있는 스토리

    +

    일하는 방식을 실험하는 브랜드, 모베리웍스

    +
    +
      {props && props.map((item) => )}
    +
    + + +
    +     + ); +}; + +export default Down; From fc521223af8761449c4630a9b427263ee2c7125f Mon Sep 17 00:00:00 2001 From: YeongWoooo Date: Fri, 21 May 2021 21:48:49 +0900 Subject: [PATCH 08/26] =?UTF-8?q?[chore]=20=ED=95=84=EC=9A=94=ED=95=9C=20?= =?UTF-8?q?=EB=AA=A8=EB=93=88=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/package-lock.json | 5 +++++ folin-web/package.json | 1 + 2 files changed, 6 insertions(+) diff --git a/folin-web/package-lock.json b/folin-web/package-lock.json index e1a54b5..4b566ed 100644 --- a/folin-web/package-lock.json +++ b/folin-web/package-lock.json @@ -13038,6 +13038,11 @@ } } }, + "styled-reset": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/styled-reset/-/styled-reset-4.3.4.tgz", + "integrity": "sha512-1UmkWmRwSPfzolKleyPjbZdBqkxSXv5ImqTP5WeSjWk0Z7IvEzsrYhrqinZfCg10eM1P6BEtFly8+puQJnN/0A==" + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", diff --git a/folin-web/package.json b/folin-web/package.json index 9d23bac..e210a5b 100644 --- a/folin-web/package.json +++ b/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": { From a5b7a4fd8e8a3bc0c81a76becfbc85831128635a Mon Sep 17 00:00:00 2001 From: leeinsong Date: Sat, 22 May 2021 01:58:20 +0900 Subject: [PATCH 09/26] =?UTF-8?q?[add]=20=EB=B2=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=8A=A4=ED=86=A0=EB=A6=AC,=20=ED=82=A4=EC=9B=8C=EB=93=9C=20?= =?UTF-8?q?=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/assets/styles/theme.js | 2 +- folin-web/src/components/First/Up/Keyword.js | 54 +++++++- folin-web/src/components/First/Up/Story.js | 129 ++++++++++++++++++- folin-web/src/components/Header.js | 4 +- 4 files changed, 173 insertions(+), 16 deletions(-) diff --git a/folin-web/src/assets/styles/theme.js b/folin-web/src/assets/styles/theme.js index b8e2728..f75ac4a 100644 --- a/folin-web/src/assets/styles/theme.js +++ b/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 = { diff --git a/folin-web/src/components/First/Up/Keyword.js b/folin-web/src/components/First/Up/Keyword.js index 15208f4..9b1f2ac 100644 --- a/folin-web/src/components/First/Up/Keyword.js +++ b/folin-web/src/components/First/Up/Keyword.js @@ -1,19 +1,61 @@ import React from "react"; - import styled from "styled-components"; const Wrapper = styled.div` height: 30vh; width: 85%; - background-color: purple; -`; -const List = styled.ul` + + margin-bottom: 5rem; display: flex; - width: 100%; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + .title { + font-family: "NanumMyeongjo"; + font-weight: 700; + font-size: 25px; + } + .subtitle { + font-family: "Noto Sans KR"; + font-weight: 400; + font-size: 15px; + color: ${(props) => props.theme.textGray2}; + padding-bottom: 4rem; + } + .list { + width: 100%; + height: 55%; + display: grid; + grid-template-columns: repeat(8, 1fr); + &__item { + border: 1.5px solid #cacaca; + font-family: "Noto Sans KR"; + font-weight: 500; + font-size: 13px; + display: flex; + justify-content: center; + align-items: center; + } + } `; const Keyword = () => { - return This is the KeyWord; + return ( + +
    FOLIN KEYWORD
    +
    여러분의 맞춤형 콘텐츠를 찾아보세요
    +
    +
    비지니스
    +
    공간
    +
    라이프스타일
    +
    테크
    +
    스타트업
    +
    워크
    +
    커리어
    +
    조직문화
    +
    +     + ); }; export default Keyword; diff --git a/folin-web/src/components/First/Up/Story.js b/folin-web/src/components/First/Up/Story.js index 5b6cb7f..4920980 100644 --- a/folin-web/src/components/First/Up/Story.js +++ b/folin-web/src/components/First/Up/Story.js @@ -2,16 +2,131 @@ import React from "react"; import styled from "styled-components"; const Wrapper = styled.div` - height: 60vh; + height: 80vh; width: 85%; - background-color: whitesmoke; -`; -const List = styled.ul` - display: flex; - width: 100%; + .title { + font-family: "Noto Sans KR"; + font-weight: 700; + font-size: 36px; + color: ${(props) => props.theme.textGreen}; + } + .grid__container { + margin-top: 5rem; + display: grid; + width: 100%; + height: 60vh; + grid-template-columns: repeat(4, 1fr); + &--item { + &--image { + padding: 1rem; + } + &--content { + padding: 1rem; + width: 100%; + height: 25%; + display: flex; + flex-direction: column; + justify-content: space-around; + &--title { + font-family: "Noto Sans KR"; + font-weight: 600; + font-size: 13px; + color: ${(props) => props.theme.textGreen}; + } + &--text { + font-family: "Noto Serif KR"; + font-weight: 400; + font-size: 16px; + } + &--author { + font-family: "Noto Sans KR"; + font-weight: 500; + font-size: 10px; + } + } + } + } `; const Story = () => { - return This is the story; + return ( + +
    오늘의 베스트 스토리
    +
    +
    + dummy +
    +
    + 비지니스 워크{" "} +
    +
    + 앞으로 사무실은 사라지는 걸까? +
    + 구글과 스타벅스는. . . +
    +
    임정민
    +
    +
    +
    + dummy +
    +
    + 비지니스 워크{" "} +
    +
    + 앞으로 사무실은 사라지는 걸까? +
    + 구글과 스타벅스는. . . +
    +
    임정민
    +
    +
    +
    + dummy +
    +
    + 비지니스 워크{" "} +
    +
    + 앞으로 사무실은 사라지는 걸까? +
    + 구글과 스타벅스는. . . +
    +
    임정민
    +
    +
    +
    + dummy +
    +
    + 비지니스 워크{" "} +
    +
    + 앞으로 사무실은 사라지는 걸까? +
    + 구글과 스타벅스는. . . +
    +
    임정민
    +
    +
    +
    +     + ); }; export default Story; diff --git a/folin-web/src/components/Header.js b/folin-web/src/components/Header.js index 6799c8b..c2cee79 100644 --- a/folin-web/src/components/Header.js +++ b/folin-web/src/components/Header.js @@ -8,7 +8,7 @@ const UpHeader = styled.header` top: -10vh; left: 0; width: 100%; - height: 20vh; + height: 18vh; display: flex; justify-content: center; align-items: center; @@ -20,7 +20,7 @@ const UpHeader = styled.header` const DownHeader = styled.header` position: fixed; - top: 10vh; + top: 9vh; left: 0; width: 100%; height: 10vh; From 8b78c65229d1d4612c61c0a9e7e10a5d8ebab208 Mon Sep 17 00:00:00 2001 From: leeinsong Date: Sat, 22 May 2021 02:03:47 +0900 Subject: [PATCH 10/26] =?UTF-8?q?[feat]=20down=20header=20=EB=B0=B0?= =?UTF-8?q?=EA=B2=BD=EC=83=89=20=EC=9E=85=EB=A0=A5=20=ED=95=98=EC=96=80?= =?UTF-8?q?=EC=83=89=EC=9C=BC=EB=A1=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/components/First/Up/Keyword.js | 1 - folin-web/src/components/Header.js | 3 ++- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/folin-web/src/components/First/Up/Keyword.js b/folin-web/src/components/First/Up/Keyword.js index 9b1f2ac..0f137a6 100644 --- a/folin-web/src/components/First/Up/Keyword.js +++ b/folin-web/src/components/First/Up/Keyword.js @@ -4,7 +4,6 @@ import styled from "styled-components"; const Wrapper = styled.div` height: 30vh; width: 85%; - margin-bottom: 5rem; display: flex; flex-direction: column; diff --git a/folin-web/src/components/Header.js b/folin-web/src/components/Header.js index c2cee79..74436a8 100644 --- a/folin-web/src/components/Header.js +++ b/folin-web/src/components/Header.js @@ -20,7 +20,8 @@ const UpHeader = styled.header` const DownHeader = styled.header` position: fixed; - top: 9vh; + background-color: ${(props) => props.theme.textWhite}; + top: 8vh; left: 0; width: 100%; height: 10vh; From 747cc542d8061a60e71f24d50ad914dd00115d64 Mon Sep 17 00:00:00 2001 From: leeinsong Date: Sat, 22 May 2021 02:46:56 +0900 Subject: [PATCH 11/26] =?UTF-8?q?[feat]=20slider=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/components/First/First.js | 2 - folin-web/src/components/First/Up/Slider.js | 138 +++++++++++--------- 2 files changed, 78 insertions(+), 62 deletions(-) diff --git a/folin-web/src/components/First/First.js b/folin-web/src/components/First/First.js index f06ffc3..5a78fc5 100644 --- a/folin-web/src/components/First/First.js +++ b/folin-web/src/components/First/First.js @@ -1,6 +1,4 @@ import React from "react"; -import Up from "../First/Up"; -import Down from "../First/Down"; import Styled from "styled-components"; import Slider from "../First/Up/Slider"; import Story from "../First/Up/Story"; diff --git a/folin-web/src/components/First/Up/Slider.js b/folin-web/src/components/First/Up/Slider.js index e5eafe4..9c8e292 100644 --- a/folin-web/src/components/First/Up/Slider.js +++ b/folin-web/src/components/First/Up/Slider.js @@ -3,17 +3,33 @@ import Styled from "styled-components"; import LeftArrow from "../../../assets/icons/leftArrowBtn.svg"; import RightArrow from "../../../assets/icons/rightArrow.svg"; -const TopWrapper = Styled.div` +const Wrapper = Styled.div` height: 60vh; + margin-top: 0; + padding-top: 0; width: 85%; - padding-top: 2rem; + display: flex; + justify-content: space-around; + align-items: center; + .button__right { + all: unset; + margin-left: 1.5rem; + margin-bottom: 7rem; + } + .button__left { + all: unset; + margin-right: 1.5rem; + margin-bottom: 7rem; + } +`; +const ContentWrapper = Styled.div` + height: 100%; + width: 100%; .top { display: flex; flex-direction: row; justify-content: space-between; align-items: center; - &__image{ - } &__content{ width: 40%; display: flex; @@ -58,68 +74,70 @@ const TopWrapper = Styled.div` } `; -const ButtonWrapper = Styled.div` - display: flex; - justify-content: flex-end; - margin-right: 3rem; - padding-top: 1rem; - .btn { - margin: 0.5rem; - width: 1rem; - height: 1rem; - border: none; - border-radius: 50%; - } -`; - const Slider = () => { return ( - -
    -
    - leftArrow -
    -
    - cat - - - - - -
    -
    -
    지금 읽어 두면 좋은 콘텐츠
    -
    - 애니콜 디자이너가
    - 나이키 ·MS로 뻗어나간 비결 -
    -
    - 글로벌 기업을 무대로 활약해 온 유영규 디자이너는 -
    '한국 디자인계의 빛나는 성취'라고 불립니다. 아이리버, 나이키 - 시계 '베이퍼', 마이크로소프트 홀로렌즈가 모두 그의 작품입니다. - 유영규 디자이너의 디자인에는 어떤 가치가 담겨 있을까요? + + + +
    +
    + cat
    -
    -

    - 라이프스타일 커리어 -

    - | 유영규 박지호 +
    +
    + 지금 읽어 두면 좋은 콘텐츠 +
    +
    + 애니콜 디자이너가
    + 나이키 ·MS로 뻗어나간 비결 +
    +
    + 글로벌 기업을 무대로 활약해 온 유영규 디자이너는 +
    '한국 디자인계의 빛나는 성취'라고 불립니다. 아이리버, + 나이키 시계 '베이퍼', 마이크로소프트 홀로렌즈가 모두 그의 + 작품입니다. 유영규 디자이너의 디자인에는 어떤 가치가 담겨 + 있을까요? +
    +
    +

    + 라이프스타일 커리어 +

    + | 유영규 박지호 +
    -
    - RightArrow -
    -
    - +     + +     ); }; export default Slider; + +// +// +// +// +// + +// const ButtonWrapper = Styled.div` +// display: flex; +// justify-content: flex-end; +// margin-right: 3rem; +// padding-top: 1rem; +// .btn { +// margin: 0.5rem; +// width: 1rem; +// height: 1rem; +// border: none; +// border-radius: 50%; +// } +// `; From 9ca118ea21910900455e65bcaa303402401c597d Mon Sep 17 00:00:00 2001 From: leeinsong Date: Sat, 22 May 2021 03:35:40 +0900 Subject: [PATCH 12/26] =?UTF-8?q?[feat]=20slider=20Component=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EC=95=84=EC=A7=81=20=EB=AF=B8=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/components/First/First.js | 2 +- folin-web/src/components/First/Up/Slider.js | 143 ------------------ .../First/Up/Slider/FirstContent.js | 90 +++++++++++ .../First/Up/Slider/SecondContent.js | 90 +++++++++++ .../src/components/First/Up/Slider/Slider.js | 111 ++++++++++++++ .../First/Up/Slider/ThirdContent.js | 90 +++++++++++ 6 files changed, 382 insertions(+), 144 deletions(-) delete mode 100644 folin-web/src/components/First/Up/Slider.js create mode 100644 folin-web/src/components/First/Up/Slider/FirstContent.js create mode 100644 folin-web/src/components/First/Up/Slider/SecondContent.js create mode 100644 folin-web/src/components/First/Up/Slider/Slider.js create mode 100644 folin-web/src/components/First/Up/Slider/ThirdContent.js diff --git a/folin-web/src/components/First/First.js b/folin-web/src/components/First/First.js index 5a78fc5..e8bd535 100644 --- a/folin-web/src/components/First/First.js +++ b/folin-web/src/components/First/First.js @@ -1,6 +1,6 @@ import React from "react"; import Styled from "styled-components"; -import Slider from "../First/Up/Slider"; +import Slider from "./Up/Slider/Slider"; import Story from "../First/Up/Story"; import Keyword from "../First/Up/Keyword"; diff --git a/folin-web/src/components/First/Up/Slider.js b/folin-web/src/components/First/Up/Slider.js deleted file mode 100644 index 9c8e292..0000000 --- a/folin-web/src/components/First/Up/Slider.js +++ /dev/null @@ -1,143 +0,0 @@ -import React from "react"; -import Styled from "styled-components"; -import LeftArrow from "../../../assets/icons/leftArrowBtn.svg"; -import RightArrow from "../../../assets/icons/rightArrow.svg"; - -const Wrapper = Styled.div` - height: 60vh; - margin-top: 0; - padding-top: 0; - width: 85%; - display: flex; - justify-content: space-around; - align-items: center; - .button__right { - all: unset; - margin-left: 1.5rem; - margin-bottom: 7rem; - } - .button__left { - all: unset; - margin-right: 1.5rem; - margin-bottom: 7rem; - } -`; -const ContentWrapper = Styled.div` - height: 100%; - width: 100%; - .top { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - &__content{ - width: 40%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - &--title{ - font-family: "Noto Sans KR"; - font-weight: 700; - font-size: 15px; - padding-bottom: 1.5rem; - color: ${(props) => props.theme.textGreen}; - } - &--toptext{ - font-family: "Noto Sans KR"; - font-weight: 700; - font-size: 30px; - text-align: center; - } - &--middletext{ - padding: 1.5rem 0; - width: 95%; - font-family: "Noto Sans KR"; - font-weight: 400; - font-size: 13px; - text-align: center; - } - &--bottomtext{ - padding-top: 1rem; - width: 95%; - font-family: "Noto Sans KR"; - font-weight: 700; - font-size: 10px; - text-align: center; - display: flex; - justify-content: center; - &--color{ - color: ${(props) => props.theme.textGreen}; - } - } - } - } -`; - -const Slider = () => { - return ( - - - -
    -
    - cat -
    -
    -
    - 지금 읽어 두면 좋은 콘텐츠 -
    -
    - 애니콜 디자이너가
    - 나이키 ·MS로 뻗어나간 비결 -
    -
    - 글로벌 기업을 무대로 활약해 온 유영규 디자이너는 -
    '한국 디자인계의 빛나는 성취'라고 불립니다. 아이리버, - 나이키 시계 '베이퍼', 마이크로소프트 홀로렌즈가 모두 그의 - 작품입니다. 유영규 디자이너의 디자인에는 어떤 가치가 담겨 - 있을까요? -
    -
    -

    - 라이프스타일 커리어 -

    - | 유영규 박지호 -
    -
    -
    -     - -     - ); -}; - -export default Slider; - -// -// -// -// -// - -// const ButtonWrapper = Styled.div` -// display: flex; -// justify-content: flex-end; -// margin-right: 3rem; -// padding-top: 1rem; -// .btn { -// margin: 0.5rem; -// width: 1rem; -// height: 1rem; -// border: none; -// border-radius: 50%; -// } -// `; diff --git a/folin-web/src/components/First/Up/Slider/FirstContent.js b/folin-web/src/components/First/Up/Slider/FirstContent.js new file mode 100644 index 0000000..1d94212 --- /dev/null +++ b/folin-web/src/components/First/Up/Slider/FirstContent.js @@ -0,0 +1,90 @@ +import React from "react"; +import Styled from "styled-components"; + +const ContentWrapper = Styled.div` + width: 100%; + height: 60vh; + .top { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + &__content{ + width: 40%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + &--title{ + font-family: "Noto Sans KR"; + font-weight: 700; + font-size: 15px; + padding-bottom: 1.5rem; + color: ${(props) => props.theme.textGreen}; + } + &--toptext{ + font-family: "Noto Sans KR"; + font-weight: 700; + font-size: 30px; + text-align: center; + } + &--middletext{ + padding: 1.5rem 0; + width: 95%; + font-family: "Noto Sans KR"; + font-weight: 400; + font-size: 13px; + text-align: center; + } + &--bottomtext{ + padding-top: 1rem; + width: 95%; + font-family: "Noto Sans KR"; + font-weight: 700; + font-size: 10px; + text-align: center; + display: flex; + justify-content: center; + &--color{ + color: ${(props) => props.theme.textGreen}; + } + } + } + } +`; +const FirstContent = () => { + return ( + +
    +
    + cat +
    +
    +
    지금 읽어 두면 좋은 콘텐츠
    +
    + 애니콜 디자이너가
    + 나이키 ·MS로 뻗어나간 비결 +
    +
    + 글로벌 기업을 무대로 활약해 온 유영규 디자이너는 +
    '한국 디자인계의 빛나는 성취'라고 불립니다. 아이리버, 나이키 + 시계 '베이퍼', 마이크로소프트 홀로렌즈가 모두 그의 작품입니다. + 유영규 디자이너의 디자인에는 어떤 가치가 담겨 있을까요? +
    +
    +

    + 라이프스타일 커리어 +

    + | 유영규 박지호 +
    +
    +
    +     + ); +}; + +export default FirstContent; diff --git a/folin-web/src/components/First/Up/Slider/SecondContent.js b/folin-web/src/components/First/Up/Slider/SecondContent.js new file mode 100644 index 0000000..0f8b2fe --- /dev/null +++ b/folin-web/src/components/First/Up/Slider/SecondContent.js @@ -0,0 +1,90 @@ +import React from "react"; +import Styled from "styled-components"; + +const ContentWrapper = Styled.div` + width: 100%; + height: 70vh; + .top { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + &__content{ + width: 40%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + &--title{ + font-family: "Noto Sans KR"; + font-weight: 700; + font-size: 15px; + padding-bottom: 1.5rem; + color: ${(props) => props.theme.textGreen}; + } + &--toptext{ + font-family: "Noto Sans KR"; + font-weight: 700; + font-size: 30px; + text-align: center; + } + &--middletext{ + padding: 1.5rem 0; + width: 95%; + font-family: "Noto Sans KR"; + font-weight: 400; + font-size: 13px; + text-align: center; + } + &--bottomtext{ + padding-top: 1rem; + width: 95%; + font-family: "Noto Sans KR"; + font-weight: 700; + font-size: 10px; + text-align: center; + display: flex; + justify-content: center; + &--color{ + color: ${(props) => props.theme.textGreen}; + } + } + } + } +`; +const SecondContent = () => { + return ( + +
    +
    + cat +
    +
    +
    지금 읽어 두면 좋은 콘텐츠
    +
    + 애니콜 디자이너가
    + 나이키 ·MS로 뻗어나간 비결 +
    +
    + 글로벌 기업을 무대로 활약해 온 유영규 디자이너는 +
    '한국 디자인계의 빛나는 성취'라고 불립니다. 아이리버, 나이키 + 시계 '베이퍼', 마이크로소프트 홀로렌즈가 모두 그의 작품입니다. + 유영규 디자이너의 디자인에는 어떤 가치가 담겨 있을까요? +
    +
    +

    + 라이프스타일 커리어 +

    + | 유영규 박지호 +
    +
    +
    +     + ); +}; + +export default SecondContent; diff --git a/folin-web/src/components/First/Up/Slider/Slider.js b/folin-web/src/components/First/Up/Slider/Slider.js new file mode 100644 index 0000000..b3e0080 --- /dev/null +++ b/folin-web/src/components/First/Up/Slider/Slider.js @@ -0,0 +1,111 @@ +import React, { useState, useRef, useEffect } from "react"; +import Styled from "styled-components"; +import LeftArrow from "../../../../assets/icons/leftArrowBtn.svg"; +import RightArrow from "../../../../assets/icons/rightArrow.svg"; +import FirstContent from "./FirstContent"; +import SecondContent from "./SecondContent"; +import ThirdContent from "./ThirdContent"; + +const Wrapper = Styled.div` + margin-top: 0; + padding-top: 0; + overflow: hidden; + height: 70vh; + width: 80%; + display: flex; + justify-content: space-around; + align-items: center; + .button__right { + all: unset; + margin-left: 1.5rem; + margin-bottom: 7rem; + &__img:hover{ + cursor: pointer + } + } + .button__left { + all: unset; + margin-right: 1.5rem; + margin-bottom: 7rem; + &__img:hover{ + cursor: pointer + } + } +`; + +const ContentWrapper = Styled.div` + width: 100%; + display: flex; +`; + +const TOTAL_SLIDES = 2; +const Slider = () => { + const [currentSlide, setCurrentSlide] = useState(0); + const slideRef = useRef(null); + const nextSlide = () => { + if (currentSlide >= TOTAL_SLIDES) { + // 더 이상 넘어갈 슬라이드가 없으면 슬라이드를 초기화합니다. + setCurrentSlide(0); + } else { + setCurrentSlide(currentSlide + 1); + } + }; + + const prevSlide = () => { + if (currentSlide === 0) { + setCurrentSlide(TOTAL_SLIDES); + } else { + setCurrentSlide(currentSlide - 1); + } + }; + + useEffect(() => { + slideRef.current.style.transition = "all 0.5s ease-in-out"; + slideRef.current.style.transform = `translateX(-${currentSlide}00%)`; // 백틱을 사용하여 슬라이드로 이동하는 애니메이션을 만듭니다. + }, [currentSlide]); + return ( + + + + + + + + ); +}; + +export default Slider; + +// +// +// +// +// + +// const ButtonWrapper = Styled.div` +// display: flex; +// justify-content: flex-end; +// margin-right: 3rem; +// padding-top: 1rem; +// .btn { +// margin: 0.5rem; +// width: 1rem; +// height: 1rem; +// border: none; +// border-radius: 50%; +// } +// `; diff --git a/folin-web/src/components/First/Up/Slider/ThirdContent.js b/folin-web/src/components/First/Up/Slider/ThirdContent.js new file mode 100644 index 0000000..7fc62e1 --- /dev/null +++ b/folin-web/src/components/First/Up/Slider/ThirdContent.js @@ -0,0 +1,90 @@ +import React from "react"; +import Styled from "styled-components"; + +const ContentWrapper = Styled.div` + width: 100%; + height: 70vh; + .top { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + &__content{ + width: 40%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + &--title{ + font-family: "Noto Sans KR"; + font-weight: 700; + font-size: 15px; + padding-bottom: 1.5rem; + color: ${(props) => props.theme.textGreen}; + } + &--toptext{ + font-family: "Noto Sans KR"; + font-weight: 700; + font-size: 30px; + text-align: center; + } + &--middletext{ + padding: 1.5rem 0; + width: 95%; + font-family: "Noto Sans KR"; + font-weight: 400; + font-size: 13px; + text-align: center; + } + &--bottomtext{ + padding-top: 1rem; + width: 95%; + font-family: "Noto Sans KR"; + font-weight: 700; + font-size: 10px; + text-align: center; + display: flex; + justify-content: center; + &--color{ + color: ${(props) => props.theme.textGreen}; + } + } + } + } +`; +const ThirdContent = () => { + return ( + +
    +
    + cat +
    +
    +
    지금 읽어 두면 좋은 콘텐츠
    +
    + 애니콜 디자이너가
    + 나이키 ·MS로 뻗어나간 비결 +
    +
    + 글로벌 기업을 무대로 활약해 온 유영규 디자이너는 +
    '한국 디자인계의 빛나는 성취'라고 불립니다. 아이리버, 나이키 + 시계 '베이퍼', 마이크로소프트 홀로렌즈가 모두 그의 작품입니다. + 유영규 디자이너의 디자인에는 어떤 가치가 담겨 있을까요? +
    +
    +

    + 라이프스타일 커리어 +

    + | 유영규 박지호 +
    +
    +
    +     + ); +}; + +export default ThirdContent; From b3d5b5395b8b78a5b05e4a542decea4a67e8884f Mon Sep 17 00:00:00 2001 From: leeinsong Date: Sat, 22 May 2021 03:37:15 +0900 Subject: [PATCH 13/26] =?UTF-8?q?[feat]=20slider=20css=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/components/First/Up/Slider/FirstContent.js | 2 +- folin-web/src/components/First/Up/Slider/Slider.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/folin-web/src/components/First/Up/Slider/FirstContent.js b/folin-web/src/components/First/Up/Slider/FirstContent.js index 1d94212..ccb6fc6 100644 --- a/folin-web/src/components/First/Up/Slider/FirstContent.js +++ b/folin-web/src/components/First/Up/Slider/FirstContent.js @@ -10,7 +10,7 @@ const ContentWrapper = Styled.div` justify-content: space-between; align-items: center; &__content{ - width: 40%; + width: 60%; display: flex; flex-direction: column; justify-content: center; diff --git a/folin-web/src/components/First/Up/Slider/Slider.js b/folin-web/src/components/First/Up/Slider/Slider.js index b3e0080..3fbc0d9 100644 --- a/folin-web/src/components/First/Up/Slider/Slider.js +++ b/folin-web/src/components/First/Up/Slider/Slider.js @@ -11,7 +11,7 @@ const Wrapper = Styled.div` padding-top: 0; overflow: hidden; height: 70vh; - width: 80%; + width: 85%; display: flex; justify-content: space-around; align-items: center; From 8bc892664e83d26eb5fd2f53996900a0132e9d76 Mon Sep 17 00:00:00 2001 From: YeongWoooo Date: Sat, 22 May 2021 05:38:21 +0900 Subject: [PATCH 14/26] =?UTF-8?q?[style]=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/components/First/Down/Card.jsx | 152 ------------------- 1 file changed, 152 deletions(-) delete mode 100644 folin-web/src/components/First/Down/Card.jsx diff --git a/folin-web/src/components/First/Down/Card.jsx b/folin-web/src/components/First/Down/Card.jsx deleted file mode 100644 index 724f406..0000000 --- a/folin-web/src/components/First/Down/Card.jsx +++ /dev/null @@ -1,152 +0,0 @@ -import React from "react"; -import styled from "styled-components"; -import BookmarkUnclickedBtnIcon from "../../../assets/icons/bookmarkUnclickedBtn.svg"; -import HeartUnclickedBtnIcon from "../../../assets/icons/heartUnclickedBtn.svg"; - -const CardWrapper = styled.li` - height: 407px; - padding-bottom: 40px; - margin-right: 24px; - position: relative; - width: 284px; - - .card { - &__image img { - width: 100%; - height: auto; - } - - &__cardInfo { - margin-top: 16px; - min-height: 107px; - } - - &__categories { - font-family: "Noto Sans KR"; - font-weight: 600; - font-size: 13px; - color: #1e9285; - margin-left: 1px; - margin-bottom: 10px; - line-height: 18px; - letter-spacing: -0.11em; - display: inline-block; - - li { - float: left; - position: relative; - } - - li + li { - margin-left: 10px; - - ::before { - content: ""; - position: absolute; - top: 50%; - left: -6px; - margin-top: -1px; - display: inline-block; - width: 2px; - height: 2px; - background-color: #008375; - } - } - } - - &__title { - font-family: "Noto Serif KR"; - font-weight: 400; - font-size: 21px; - color: #2d2a26; - max-height: 56px; - line-height: 26px; - letter-spacing: -0.05em; - } - - &__publisher { - font-family: "Noto Sans KR"; - font-weight: 600; - font-size: 12px; - color: #878787; - margin-top: 17px; - margin-bottom: 30px; - letter-spacing: -0.11em; - line-height: 16px; - } - } - .bottom { - display: block; - position: absolute; - left: 0; - right: 0; - bottom: 0; - - &__status { - font-family: "Noto Sans KR"; - font-weight: 600; - font-size: 12px; - letter-spacing: -0.11em; - line-height: 16px; - color: #9a9a9a; - float: left; - } - - &__icons { - float: right; - } - - &__heart { - display: inline-block; - margin-right: 9px; - img { - width: 21px; - height: auto; - } - } - - &__bookmark { - display: inline-block; - margin-right: 5px; - img { - width: 21px; - height: auto; - } - } - } -`; - -const Card = ({ props }) => { - return ( - - -
    - -
    -
    -
      - {props.categories && - props.categories.map((item, index) => { - return
    • {item}
      • ; - })} -
    -
    {props.title}
    -
    {props.publisher}
    -
    -     -
    -
    {props.status}
    -
    -
    - -
    -
    - -
    -
    -
    -     - ); -}; - -export default Card; From f4480b07c90481a8805e679ec647560c7e490e6f Mon Sep 17 00:00:00 2001 From: YeongWoooo Date: Sat, 22 May 2021 05:38:51 +0900 Subject: [PATCH 15/26] =?UTF-8?q?[add]=20=EC=9D=B8=EA=B8=B0=20=ED=83=91=20?= =?UTF-8?q?10=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/First/Down/TopTenCard.jsx | 137 ++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 folin-web/src/components/First/Down/TopTenCard.jsx diff --git a/folin-web/src/components/First/Down/TopTenCard.jsx b/folin-web/src/components/First/Down/TopTenCard.jsx new file mode 100644 index 0000000..cc8e105 --- /dev/null +++ b/folin-web/src/components/First/Down/TopTenCard.jsx @@ -0,0 +1,137 @@ +import styled from "styled-components"; + +const Wrapper = styled.li` + width: 501px; + height: 77px; + display: flex; + align-items: center; + + .rank { + position: absolute; + font-family: "Noto Sans KR"; + font-style: normal; + font-weight: bold; + font-size: 30px; + line-height: 43px; + letter-spacing: -0.07em; + color: ${(props) => ([1, 2, 3].includes(props.rank) ? "#ed6653" : "#777777")}; + } + + .topTenCard { + display: flex; + cursor: pointer; + width: 100%; + height: 100%; + margin-left: 36px; + + &__image { + width: 144px; + height: 77px; + margin: 0; + margin-right: 14px; + img { + border-radius: 9px; + width: 100%; + height: 100%; + } + } + + &__info { + text-align: justify; + text-justify: inter-word; + } + + &__title { + font-family: "Noto Sans KR"; + font-style: normal; + font-weight: 500; + font-size: 19px; + line-height: 28px; + letter-spacing: -0.03em; + color: #4a4a4a; + } + + &__subInfo { + display: inline-block; + } + + &__categories { + float: left; + font-family: "Noto Sans KR"; + font-style: normal; + font-weight: bold; + font-size: 14px; + line-height: 20px; + letter-spacing: -0.11em; + color: #88bdb7; + + li { + float: left; + position: relative; + } + + li + li { + margin-left: 10px; + + ::before { + content: ""; + position: absolute; + top: 50%; + left: -6px; + margin-top: -1px; + display: inline-block; + width: 2px; + height: 2px; + background-color: #008375; + } + } + } + + &__publisher { + float: left; + position: relative; + font-family: "Noto Sans KR"; + font-style: normal; + font-weight: bold; + font-size: 14px; + line-height: 20px; + letter-spacing: -0.11em; + color: #b0b0b0; + margin-left: 16px; + + ::before { + content: ""; + position: absolute; + top: 20%; + left: -7px; + border-left: 2px solid #959595; + height: 14px; + } + } + } +`; + +export default function TopTenCard({ props }) { + return ( + +

    {props.rank}

    + +
    + +
    +
    +
    {props.title}
    +
    +
      + {props.categories && + props.categories.map((item, index) => { + return
    • {item}
      • ; + })} +
    +
    {props.publisher}
    +
    +
    +     +     + ); +} From 53b84571f39bbf188bb14832e91d05c8ac7669f3 Mon Sep 17 00:00:00 2001 From: YeongWoooo Date: Sat, 22 May 2021 05:39:30 +0900 Subject: [PATCH 16/26] =?UTF-8?q?[style]=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=AA=85,=20=ED=8C=8C=EC=9D=BC=EB=AA=85=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/First/Down/ThemeStoryCard.jsx | 155 ++++++++++++++++++ 1 file changed, 155 insertions(+) create mode 100644 folin-web/src/components/First/Down/ThemeStoryCard.jsx diff --git a/folin-web/src/components/First/Down/ThemeStoryCard.jsx b/folin-web/src/components/First/Down/ThemeStoryCard.jsx new file mode 100644 index 0000000..2bf095d --- /dev/null +++ b/folin-web/src/components/First/Down/ThemeStoryCard.jsx @@ -0,0 +1,155 @@ +import React from "react"; +import styled from "styled-components"; +import BookmarkUnclickedBtnIcon from "../../../assets/icons/bookmarkUnclickedBtn.svg"; +import HeartUnclickedBtnIcon from "../../../assets/icons/heartUnclickedBtn.svg"; + +const Wrapper = styled.li` + height: 407px; + padding-bottom: 40px; + margin-right: 24px; + position: relative; + width: 284px; + + .card { + cursor: pointer; + &__image img { + width: 100%; + height: auto; + } + + &__cardInfo { + text-align: justify; + text-justify: inter-word; + margin-top: 16px; + min-height: 107px; + } + + &__categories { + font-family: "Noto Sans KR"; + font-weight: 600; + font-size: 13px; + color: #1e9285; + margin-left: 1px; + margin-bottom: 10px; + line-height: 18px; + letter-spacing: -0.11em; + display: inline-block; + + li { + float: left; + position: relative; + } + + li + li { + margin-left: 10px; + + ::before { + content: ""; + position: absolute; + top: 50%; + left: -6px; + margin-top: -1px; + display: inline-block; + width: 2px; + height: 2px; + background-color: #008375; + } + } + } + + &__title { + font-family: "Noto Serif KR"; + font-weight: 400; + font-size: 21px; + color: #2d2a26; + max-height: 56px; + line-height: 26px; + letter-spacing: -0.05em; + } + + &__publisher { + font-family: "Noto Sans KR"; + font-weight: 600; + font-size: 12px; + color: #878787; + margin-top: 17px; + margin-bottom: 30px; + letter-spacing: -0.11em; + line-height: 16px; + } + } + .bottom { + display: block; + position: absolute; + left: 0; + right: 0; + bottom: 0; + + &__status { + font-family: "Noto Sans KR"; + font-weight: 600; + font-size: 12px; + letter-spacing: -0.11em; + line-height: 16px; + color: #9a9a9a; + float: left; + } + + &__icons { + float: right; + } + + &__heart { + display: inline-block; + margin-right: 9px; + img { + width: 21px; + height: auto; + } + } + + &__bookmark { + display: inline-block; + margin-right: 5px; + img { + width: 20px; + height: auto; + } + } + } +`; + +const ThemeStoryCard = ({ props }) => { + return ( + + +
    + +
    +
    +
      + {props.categories && + props.categories.map((item, index) => { + return
    • {item}
      • ; + })} +
    +
    {props.title}
    +
    {props.publisher}
    +
    +     +
    +
    {props.status}
    +
    +
    + +
    +
    + +
    +
    +
    +     + ); +}; + +export default ThemeStoryCard; From da388597e6d54262628579fbee419f4469c9818f Mon Sep 17 00:00:00 2001 From: YeongWoooo Date: Sat, 22 May 2021 05:39:51 +0900 Subject: [PATCH 17/26] =?UTF-8?q?[add]=20=EB=8D=94=EB=AF=B8=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20props=EB=A1=9C=20=EC=A0=84=EB=8B=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/components/First/First.js | 113 +++++++++++++++++++++++- 1 file changed, 112 insertions(+), 1 deletion(-) diff --git a/folin-web/src/components/First/First.js b/folin-web/src/components/First/First.js index 18f11cc..c78e33a 100644 --- a/folin-web/src/components/First/First.js +++ b/folin-web/src/components/First/First.js @@ -1 +1,112 @@ -export default () =>

    First Page

    ; +import React from "react"; +import styled from "styled-components"; +import Down from "./Down"; + +const Wrapper = styled.div` + position: absolute; + top: 158px; + left: 0px; + width: 100%; +`; + +const First = () => { + const data = [ + { + id: 1, + rank: 1, + img: "https://via.placeholder.com/200", + categories: ["비즈니스", "라이프 스타일"], + title: "'힙한'브랜드 모베러웍스 만든 세번의 실패", + publisher: "모빌스 그룹", + status: "무료", + }, + { + id: 2, + rank: 2, + img: "https://via.placeholder.com/200", + categories: ["비즈니스", "라이프 스타일"], + title: "'힙한'브랜드 모베러웍스 만든 세번의 실패", + publisher: "모빌스 그룹", + status: "무료", + }, + { + id: 3, + rank: 3, + img: "https://via.placeholder.com/200", + categories: ["비즈니스", "라이프 스타일"], + title: "'힙한'브랜드 모베러웍스 만든 세번의 실패", + publisher: "모빌스 그룹", + status: "무료", + }, + { + id: 4, + rank: 4, + img: "https://via.placeholder.com/200", + categories: ["비즈니스", "라이프 스타일"], + title: "'힙한'브랜드 모베러웍스 만든 세번의 실패", + publisher: "모빌스 그룹", + status: "무료", + }, + { + id: 5, + rank: 5, + img: "https://via.placeholder.com/200", + categories: ["비즈니스", "라이프 스타일"], + title: "'힙한'브랜드 모베러웍스 만든 세번의 실패", + publisher: "모빌스 그룹", + status: "무료", + }, + { + id: 6, + rank: 6, + img: "https://via.placeholder.com/200", + categories: ["비즈니스", "라이프 스타일"], + title: "'힙한'브랜드 모베러웍스 만든 세번의 실패", + publisher: "모빌스 그룹", + status: "무료", + }, + { + id: 7, + rank: 7, + img: "https://via.placeholder.com/200", + categories: ["비즈니스", "라이프 스타일"], + title: "'힙한'브랜드 모베러웍스 만든 세번의 실패", + publisher: "모빌스 그룹", + status: "무료", + }, + { + id: 8, + rank: 8, + img: "https://via.placeholder.com/200", + categories: ["비즈니스", "라이프 스타일"], + title: "'힙한'브랜드 모베러웍스 만든 세번의 실패", + publisher: "모빌스 그룹", + status: "무료", + }, + { + id: 9, + rank: 9, + img: "https://via.placeholder.com/200", + categories: ["비즈니스", "라이프 스타일"], + title: "'힙한'브랜드 모베러웍스 만든 세번의 실패", + publisher: "모빌스 그룹", + status: "무료", + }, + { + id: 10, + rank: 10, + img: "https://via.placeholder.com/200", + categories: ["비즈니스", "라이프 스타일"], + title: "'힙한'브랜드 모베러웍스 만든 세번의 실패", + publisher: "모빌스 그룹", + status: "무료", + }, + ]; + return ( + + + + ); +}; + +export default First; From c5d21eafe5af86ba1f6cdd8e8540280a1c400bbd Mon Sep 17 00:00:00 2001 From: YeongWoooo Date: Sat, 22 May 2021 05:41:44 +0900 Subject: [PATCH 18/26] =?UTF-8?q?[style]=20=EB=B3=80=EA=B2=BD=EB=90=9C=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=AA=85,=20=ED=81=B4?= =?UTF-8?q?=EB=9E=98=EC=8A=A4=EB=AA=85=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/components/First/Down.js | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/folin-web/src/components/First/Down.js b/folin-web/src/components/First/Down.js index a892124..c8bf565 100644 --- a/folin-web/src/components/First/Down.js +++ b/folin-web/src/components/First/Down.js @@ -1,13 +1,13 @@ import React from "react"; import styled from "styled-components"; -import Card from "./Down/Card"; +import ThemeStoryCard from "./Down/ThemeStoryCard"; const Wrapper = styled.div` - .down { - position: relative; - width: 1200px; - margin: 0 auto; + position: relative; + width: 1200px; + margin: 0 auto; + .themeStory { &__title { font-family: "Noto Sans KR"; font-style: normal; @@ -97,14 +97,16 @@ const Wrapper = styled.div` const Down = ({ props }) => { return ( -
    -

    테마가 있는 스토리

    -

    일하는 방식을 실험하는 브랜드, 모베리웍스

    -
    -
      {props && props.map((item) => )}
    +
    +

    테마가 있는 스토리

    +

    일하는 방식을 실험하는 브랜드, 모베리웍스

    +
    +
      + {props && props.map((item) => )} +
    - - + +
    ); From 9b1b0d8003aedd6cf3978de5e107ff071bb67c87 Mon Sep 17 00:00:00 2001 From: YeongWoooo Date: Sat, 22 May 2021 05:42:08 +0900 Subject: [PATCH 19/26] =?UTF-8?q?[add]=20=EC=9D=B8=EA=B8=B0=20=ED=83=91?= =?UTF-8?q?=ED=85=90=20=EC=BB=A8=ED=85=8C=EC=9D=B4=EB=84=88=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/components/First/Down.js | 50 ++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/folin-web/src/components/First/Down.js b/folin-web/src/components/First/Down.js index c8bf565..2e872cf 100644 --- a/folin-web/src/components/First/Down.js +++ b/folin-web/src/components/First/Down.js @@ -1,6 +1,7 @@ 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; @@ -46,6 +47,7 @@ const Wrapper = styled.div` display: flex; flex-direction: column; flex-wrap: wrap; + align-content: flex-start; } button { @@ -92,6 +94,47 @@ const Wrapper = styled.div` } } } + + .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 }) => { @@ -108,6 +151,13 @@ const Down = ({ props }) => {
    +
    +

    폴인 인기 Top 10

    +

    멤버십 회원들이 많이 본 요즘 직장인 대세 콘텐츠!

    +
    +
      {props && props.map((item, index) => )}
    +
    +
    ); }; From 8fceec72617b4bc77c06c3562af56d8331d72108 Mon Sep 17 00:00:00 2001 From: YeongWoooo Date: Sat, 22 May 2021 05:46:43 +0900 Subject: [PATCH 20/26] =?UTF-8?q?[fix]=20=ED=97=A4=EB=8D=94=20=EA=B3=A0?= =?UTF-8?q?=EC=A0=95,=20=EB=B0=B0=EA=B2=BD=EC=83=89=20=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/components/Header.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/folin-web/src/components/Header.js b/folin-web/src/components/Header.js index cc645cd..f83d2d2 100644 --- a/folin-web/src/components/Header.js +++ b/folin-web/src/components/Header.js @@ -19,7 +19,6 @@ const UpHeader = styled.header` `; const DownHeader = styled.header` - color: white; position: fixed; top: 58px; left: 0; @@ -28,6 +27,8 @@ const DownHeader = styled.header` display: flex; justify-content: center; align-items: center; + z-index: 10; + background-color: white; color: ${(props) => props.theme.textBlack}; `; From 01cf9297cee8a0bc4afa548594e7ab3026a6b580 Mon Sep 17 00:00:00 2001 From: YeongWoooo Date: Sat, 22 May 2021 05:47:15 +0900 Subject: [PATCH 21/26] =?UTF-8?q?[fix]=20style=20=EC=84=B8=EB=AF=B8?= =?UTF-8?q?=EC=BD=9C=EB=A1=A0=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/components/Header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/folin-web/src/components/Header.js b/folin-web/src/components/Header.js index f83d2d2..d2c1481 100644 --- a/folin-web/src/components/Header.js +++ b/folin-web/src/components/Header.js @@ -61,7 +61,7 @@ font-family: "Nanum Myeongjo"; padding-top: ${(props) => (props.current ? "0" : "0.5rem")}; margin-right: 8rem; color: ${(props) => props.theme.textBlack}; - height: 3rem + height: 3rem; display: table-cell; vertical-align: middle; `; From 393703bb4e328eab722d286ad3f2b757f575c0b5 Mon Sep 17 00:00:00 2001 From: YeongWoooo Date: Sat, 22 May 2021 05:47:55 +0900 Subject: [PATCH 22/26] =?UTF-8?q?[style]=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20import=20=EC=A0=9C=EA=B1=B0,?= =?UTF-8?q?=20=EB=93=A4=EC=97=AC=EC=93=B0=EA=B8=B0=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/components/Header.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/folin-web/src/components/Header.js b/folin-web/src/components/Header.js index d2c1481..392d511 100644 --- a/folin-web/src/components/Header.js +++ b/folin-web/src/components/Header.js @@ -1,7 +1,6 @@ import React from "react"; -import styled from "styled-components"; import { withRouter } from "react-router-dom"; -import Logo from "../assets/icons/alarmBtn.svg"; +import styled from "styled-components"; const UpHeader = styled.header` position: fixed; @@ -54,7 +53,7 @@ const DList = styled.ul` `; const DItem = styled.li` -font-family: "Nanum Myeongjo"; + font-family: "Nanum Myeongjo"; font-weight: 700; text-align: center; font-size: ${(props) => (props.current ? "3rem" : "2rem")}; From 188a3c06d6b7f00963079fc1a7fa2f7de8382dd2 Mon Sep 17 00:00:00 2001 From: YeongWoooo Date: Sat, 22 May 2021 13:18:34 +0900 Subject: [PATCH 23/26] =?UTF-8?q?[fix]=20bottom-margin=EA=B0=92=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/components/First/Down/ThemeStoryCard.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/folin-web/src/components/First/Down/ThemeStoryCard.jsx b/folin-web/src/components/First/Down/ThemeStoryCard.jsx index 2bf095d..ac2a1dd 100644 --- a/folin-web/src/components/First/Down/ThemeStoryCard.jsx +++ b/folin-web/src/components/First/Down/ThemeStoryCard.jsx @@ -7,6 +7,7 @@ const Wrapper = styled.li` height: 407px; padding-bottom: 40px; margin-right: 24px; + margin-bottom: 20px; position: relative; width: 284px; From 633f73b43968883d77b85048ab1989d0b8ce3f8b Mon Sep 17 00:00:00 2001 From: leeinsong Date: Sat, 22 May 2021 13:19:23 +0900 Subject: [PATCH 24/26] =?UTF-8?q?[feat]=20slider=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/First/Up/Slider/Slider.js | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/folin-web/src/components/First/Up/Slider/Slider.js b/folin-web/src/components/First/Up/Slider/Slider.js index 3fbc0d9..60180e8 100644 --- a/folin-web/src/components/First/Up/Slider/Slider.js +++ b/folin-web/src/components/First/Up/Slider/Slider.js @@ -89,23 +89,3 @@ const Slider = () => { }; export default Slider; - -// -// -// -// -// - -// const ButtonWrapper = Styled.div` -// display: flex; -// justify-content: flex-end; -// margin-right: 3rem; -// padding-top: 1rem; -// .btn { -// margin: 0.5rem; -// width: 1rem; -// height: 1rem; -// border: none; -// border-radius: 50%; -// } -// `; From ca9cf184cd68e2374b36316067e2f9a07a6a1e01 Mon Sep 17 00:00:00 2001 From: leeinsong Date: Sat, 22 May 2021 14:23:34 +0900 Subject: [PATCH 25/26] =?UTF-8?q?[style]=20font=20=EA=B2=BD=EB=A1=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/assets/fonts/index.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/folin-web/src/assets/fonts/index.css b/folin-web/src/assets/fonts/index.css index 101bcad..75a93b7 100644 --- a/folin-web/src/assets/fonts/index.css +++ b/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"); } From 737e22335d27fe7a5ed39532eef3a38d749a898a Mon Sep 17 00:00:00 2001 From: leeinsong Date: Sat, 22 May 2021 14:27:08 +0900 Subject: [PATCH 26/26] =?UTF-8?q?[fix]=20class=20=EB=A5=BC=20className=20?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- folin-web/src/components/First/Down.js | 27 +++++++++------- .../components/First/Down/ThemeStoryCard.jsx | 32 +++++++++---------- 2 files changed, 31 insertions(+), 28 deletions(-) diff --git a/folin-web/src/components/First/Down.js b/folin-web/src/components/First/Down.js index def6c92..11f12c7 100644 --- a/folin-web/src/components/First/Down.js +++ b/folin-web/src/components/First/Down.js @@ -140,30 +140,33 @@ const Wrapper = styled.div` const Down = ({ props }) => { return ( -
    -

    테마가 있는 스토리

    -

    +
    +

    테마가 있는 스토리

    +

    일하는 방식을 실험하는 브랜드, 모베리웍스

    -
    -
      +
      +
        {props && props.map((item) => ( ))}
      - - + +
    -
    -

    폴인 인기 Top 10

    -

    +
    +

    폴인 인기 Top 10

    +

    멤버십 회원들이 많이 본 요즘 직장인 대세 콘텐츠!

    -
      - {props && props.map((item, index) => )} +
        + {props && + props.map((item, index) => ( + + ))}
    diff --git a/folin-web/src/components/First/Down/ThemeStoryCard.jsx b/folin-web/src/components/First/Down/ThemeStoryCard.jsx index ac2a1dd..8495ecc 100644 --- a/folin-web/src/components/First/Down/ThemeStoryCard.jsx +++ b/folin-web/src/components/First/Down/ThemeStoryCard.jsx @@ -59,13 +59,13 @@ const Wrapper = styled.li` } &__title { - font-family: "Noto Serif KR"; - font-weight: 400; font-size: 21px; color: #2d2a26; max-height: 56px; line-height: 26px; letter-spacing: -0.05em; + font-family: "NanumMyeongjo"; + font-weight: 700; } &__publisher { @@ -123,29 +123,29 @@ const Wrapper = styled.li` const ThemeStoryCard = ({ props }) => { return ( - -