From 03f6965adcc013dc70c88ba298fe6fbb4264dc24 Mon Sep 17 00:00:00 2001 From: SeojinSeojin <1106laura@naver.com> Date: Fri, 15 Dec 2023 21:50:36 +0900 Subject: [PATCH 1/5] feat: implement comment UI in main page --- src/lib/constants/main.ts | 81 +++++++++++++++++++ src/lib/types/main.ts | 11 +++ .../components/Comment/Card/index.tsx | 56 +++++++++++++ .../MainPage/components/Comment/Card/style.ts | 26 ++++++ .../MainPage/components/Comment/index.tsx | 43 ++++++++++ .../MainPage/components/Comment/style.ts | 55 +++++++++++++ 6 files changed, 272 insertions(+) create mode 100644 src/views/MainPage/components/Comment/Card/index.tsx create mode 100644 src/views/MainPage/components/Comment/Card/style.ts create mode 100644 src/views/MainPage/components/Comment/index.tsx create mode 100644 src/views/MainPage/components/Comment/style.ts diff --git a/src/lib/constants/main.ts b/src/lib/constants/main.ts index 351f6984..2fabf4d8 100644 --- a/src/lib/constants/main.ts +++ b/src/lib/constants/main.ts @@ -20,6 +20,7 @@ import { KeywordListType, PartListType, RecentNewsListType, + SoptCommentType, } from '@src/lib/types/main'; import { Part, TextWeightType } from '@src/lib/types/universal'; @@ -523,3 +524,83 @@ export const RecentNewsList: RecentNewsListType[] = [ src: ImgRecentNews5.src, }, ]; + +export const SOPT_COMMENT_LIST: SoptCommentType[] = [ + { + summary: '후회없는 활동', + color: '#FFD161', + comment: + '후회없는 활동. 좋은 사람들도 많이 만났고 기획분야를 제대로 배울 수 있었던 기회였어요. 대학생활 마지막 대외 활동이었지만, 회사 일을 하면서도 미련을 못버리고 메이커스나 솝텀을 기웃거려요. 엄청 오랜 기간동안 애정을 담고 있는 단체예요.', + commenter: { + name: '김나연', + history: '25, 26, 27기 활동', + part: '기획', + }, + }, + { + summary: '넓어지는 시야', + color: '#DFFF61', + comment: + '솝트는 제 성장의 밑거름이자 둘도 없는 추억이에요. 배울 점 많은 회원들과 다양한 경험을 하며 기획자로서, 그리고 한 명의 인간으로서 성장할 수 있었어요. 단 한 톨 만큼의 후회도 없는 소중한 시간이었습니다.', + commenter: { + name: '문수빈', + history: '29, 31기 활동', + part: '기획', + }, + }, + { + summary: '유의미한 배움', + color: '#CBD0FF', + comment: + '솝트에서 안드로이드를 처음 접하게 되었는데요, 세미나로 내용을 익히고 과제를 하며 금잔디 조원들과 디스코드에서 코드 띄워 놓고 토론도 해보고 코드리뷰로 서로 도움을 주고 받으며 성장했습니다. 그리고 솝커톤으로 무박2일의 개발 경험도 가져보고 앱잼으로 밤낮 없이 합숙하고 끝내 릴리즈 경험까지! 그리고 가장 중요한 저희 팀이 생겼습니다! 너무 유의미하고 재미있는 1년이었어요.', + commenter: { + name: '김하정', + history: '31, 32기 활동', + part: '안드로이드', + }, + }, + { + summary: '함께하는 도전,\n열정의 실천', + color: '#FFBEFC', + comment: + 'IT에 대한 배경지식이 많이 부족한 상태로 왔었지만, 정말 후회없고 행복한 시간이었어요. 모르는 것에 대해 부끄러워하는 것이 아닌 함께 알려주고 성장하는 문화, 도전을 두려워하지 않는 멋진 사람들, 활동하며 배우고 체화하게 되는 세미나 내용 등 SOPT와 함께 열정을 실천하는 과정에서 정말 많이 배우고 즐거웠어요.', + commenter: { + name: '이승헌', + history: '30, 33기 활동', + part: '기획', + }, + }, + { + summary: '깊이있는 학습,\n협업의 즐거움', + color: '#DFFF61', + comment: + 'YB 때는 개발의 시작을 SOPT에서 했는데 다양한 분야의 동료들과 협업하며 도움을 받아 빠르게 성장할 수 있었어요. OB 때는 기술적인 고민들을 동료들과 나누며 더욱 깊이있게 학습해 내실을 다질 수 있었고, 이를 YB들에게 공유하면서 소통하며 협업하는 것의 즐거움과 함께 성장하는 가치를 배울 수 있어 좋았어요.', + commenter: { + name: '한승현', + history: '28, 29, 30기 활동', + part: '안드로이드', + }, + }, + { + summary: '성취감과 자신감', + color: '#CBD0FF', + comment: + '열정 넘치는 사람들과 함께하면서 긍정적인 에너지를 많이 얻었고, 혼자였다면 해내기 어려웠을 일들을 성취하는데 많은 도움이 되었어요. 미친듯이 몰입하는 경험을 통해 성취감 및 자신감을 얻었을뿐만 아니라, 앱잼 등 프로젝트를 진행하며 효율적으로 협업하는 방법을 배웠어요.', + commenter: { + name: '권소희', + history: '27, 28, 29, 31기 활동', + part: '웹', + }, + }, + { + summary: '인생의 터닝포인트', + color: '#FFBEFC', + comment: + '활동을 더 일찍 시작하지 못한 것이 유일하게 남는 후회일 정도로 SOPT를 통해 많이 성장했다고 느껴요. 커리어적인 부분에서 방향성을 정할 수 있었던, 인생의 터닝포인트와 같은 활동이었어요.', + commenter: { + name: '권소희', + history: '27, 28, 29, 31기 활동', + part: '웹', + }, + }, +]; diff --git a/src/lib/types/main.ts b/src/lib/types/main.ts index 5fc1d488..bef14336 100644 --- a/src/lib/types/main.ts +++ b/src/lib/types/main.ts @@ -77,3 +77,14 @@ export interface RecentNewsListType { url: string; src: string; } + +export type SoptCommentType = { + summary: string; + color: string; + comment: string; + commenter: { + name: string; + history: string; + part: string; + }; +}; diff --git a/src/views/MainPage/components/Comment/Card/index.tsx b/src/views/MainPage/components/Comment/Card/index.tsx new file mode 100644 index 00000000..771dc36c --- /dev/null +++ b/src/views/MainPage/components/Comment/Card/index.tsx @@ -0,0 +1,56 @@ +import { useInView } from 'framer-motion'; +import { useEffect, useRef } from 'react'; +import { useMediaQuery } from 'react-responsive'; +import { SoptCommentType } from '@src/lib/types/main'; +import * as S from './style'; + +interface CommentCardProps { + idx: number; + setIsActive: (idx: number) => void; + isActive: boolean; + color: SoptCommentType['color']; + comment: SoptCommentType['comment']; + commenter: SoptCommentType['commenter']; +} + +export default function CommentCard({ + idx, + setIsActive, + isActive, + color, + comment, + commenter, +}: CommentCardProps) { + const desktop = useMediaQuery({ + query: '(max-width: 1440px)', + }); + const margin = desktop ? '-300px 0px -300px 0px' : '-100px 0px -600px 0px'; + + const wrapperRef = useRef(null); + + const isInView = useInView(wrapperRef, { margin }); + + useEffect(() => { + if (isInView) setIsActive(idx); + }, [isInView, idx, setIsActive]); + + return ( + +
{comment}
+ +
{commenter.name}
|
{commenter.history}
|
{commenter.part}
+ + + ); +} diff --git a/src/views/MainPage/components/Comment/Card/style.ts b/src/views/MainPage/components/Comment/Card/style.ts new file mode 100644 index 00000000..c6f9bd7a --- /dev/null +++ b/src/views/MainPage/components/Comment/Card/style.ts @@ -0,0 +1,26 @@ +import styled from '@emotion/styled'; +import { motion } from 'framer-motion'; + +export const Wrapper = styled(motion.div)` + display: flex; + flex-direction: column; + width: 712px; + height: 324px; + border-radius: 19px; + padding: 32px 46px; + + font-family: SUIT; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 35.5px; /* 177.5% */ + letter-spacing: -0.8px; +`; + +export const Footer = styled.div` + flex: 1; + display: flex; + align-items: flex-end; + gap: 8px; + font-weight: 600; +`; diff --git a/src/views/MainPage/components/Comment/index.tsx b/src/views/MainPage/components/Comment/index.tsx new file mode 100644 index 00000000..fe6988d8 --- /dev/null +++ b/src/views/MainPage/components/Comment/index.tsx @@ -0,0 +1,43 @@ +import { useAnimationControls } from 'framer-motion'; +import { useState } from 'react'; +import { SOPT_COMMENT_LIST } from '@src/lib/constants/main'; +import CommentCard from './Card'; +import * as S from './style'; + +export default function Comment() { + const [activeIdx, setActiveIdx] = useState(0); + const controls = useAnimationControls(); + + const changeActiveIdx = (idx: number) => { + setActiveIdx(idx); + controls.start({ + opacity: [0, 1, 1], + y: [0, -12, 0], + rotateX: [45, -15, 0], + }); + }; + + return ( + + + Q. 솝트 어때요? + + {SOPT_COMMENT_LIST[activeIdx]?.summary} + + + + {SOPT_COMMENT_LIST.map((comment, idx) => ( + + ))} + + + ); +} diff --git a/src/views/MainPage/components/Comment/style.ts b/src/views/MainPage/components/Comment/style.ts new file mode 100644 index 00000000..112f42e6 --- /dev/null +++ b/src/views/MainPage/components/Comment/style.ts @@ -0,0 +1,55 @@ +import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; +import { motion } from 'framer-motion'; + +export const Wrapper = styled.div` + position: relative; + padding: 0 88px; +`; + +export const TitleWrapper = styled.div` + position: sticky; + color: white; + top: 200px; + left: 88px; + z-index: 2; + @media (max-width: 1440px) { + top: 0; + padding-top: 120px; + padding-bottom: 60px; + background: linear-gradient(to bottom, ${colors.background} 80%, transparent); + } +`; + +export const CardWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: flex-end; + + @media (max-width: 1440px) { + padding-top: 200px; + } +`; + +export const SectionTitle = styled.div` + color: ${colors.white}; + font-family: SUIT; + font-size: 55px; + font-style: normal; + font-weight: 500; + line-height: 61.6px; /* 112% */ + letter-spacing: -1.65px; +`; + +export const Summary = styled(motion.div)<{ color: string }>` + color: ${({ color }) => color}; + + font-family: SUIT; + font-size: 77px; + font-style: normal; + font-weight: 600; + line-height: 110%; + letter-spacing: -2.31px; + white-space: pre-line; + padding-top: 36px; +`; From 61808434710313a7c58b471f440d58312d5641b2 Mon Sep 17 00:00:00 2001 From: SeojinSeojin <1106laura@naver.com> Date: Thu, 21 Dec 2023 13:28:49 +0900 Subject: [PATCH 2/5] feat: apply comment view in mainpage bottomlayout --- src/views/MainPage/components/BottomLayout/index.tsx | 5 +++-- src/views/MainPage/components/Comment/index.tsx | 4 ++-- src/views/MainPage/components/Comment/style.ts | 12 +++++++----- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/views/MainPage/components/BottomLayout/index.tsx b/src/views/MainPage/components/BottomLayout/index.tsx index 3430d8b8..6d1ef156 100644 --- a/src/views/MainPage/components/BottomLayout/index.tsx +++ b/src/views/MainPage/components/BottomLayout/index.tsx @@ -4,6 +4,7 @@ import useInView from '@src/hooks/useInView'; import ActivitySection from '@src/views/MainPage/components/ActivitySection'; import RecentNews from '@src/views/MainPage/components/RecentNews'; import RecruitMessage from '@src/views/MainPage/components/RecruitMessage'; +import Comment from '../Comment'; import * as S from './style'; const MenuList = [ @@ -50,8 +51,8 @@ function BottomLayout() {
-
- Reviews +
+
diff --git a/src/views/MainPage/components/Comment/index.tsx b/src/views/MainPage/components/Comment/index.tsx index fe6988d8..0da66cc2 100644 --- a/src/views/MainPage/components/Comment/index.tsx +++ b/src/views/MainPage/components/Comment/index.tsx @@ -4,7 +4,7 @@ import { SOPT_COMMENT_LIST } from '@src/lib/constants/main'; import CommentCard from './Card'; import * as S from './style'; -export default function Comment() { +export default function CommentSection() { const [activeIdx, setActiveIdx] = useState(0); const controls = useAnimationControls(); @@ -19,7 +19,7 @@ export default function Comment() { return ( - + Q. 솝트 어때요? {SOPT_COMMENT_LIST[activeIdx]?.summary} diff --git a/src/views/MainPage/components/Comment/style.ts b/src/views/MainPage/components/Comment/style.ts index 112f42e6..5644de7e 100644 --- a/src/views/MainPage/components/Comment/style.ts +++ b/src/views/MainPage/components/Comment/style.ts @@ -4,10 +4,11 @@ import { motion } from 'framer-motion'; export const Wrapper = styled.div` position: relative; - padding: 0 88px; + padding-top: 200px; + padding-bottom: 600px; `; -export const TitleWrapper = styled.div` +export const TitleWrapper = styled.div<{ activeIdx: number }>` position: sticky; color: white; top: 200px; @@ -16,8 +17,10 @@ export const TitleWrapper = styled.div` @media (max-width: 1440px) { top: 0; padding-top: 120px; - padding-bottom: 60px; - background: linear-gradient(to bottom, ${colors.background} 80%, transparent); + padding-bottom: 80px; + background: ${({ activeIdx }) => + activeIdx > 1 ? 'linear-gradient(to bottom, #0D111F 80%, transparent)' : 'transparent'}; + transition: 0.4s; } `; @@ -25,7 +28,6 @@ export const CardWrapper = styled.div` display: flex; flex-direction: column; align-items: flex-end; - @media (max-width: 1440px) { padding-top: 200px; } From 7f0b9f84997e024dbfbe011a445ee5ee87b86599 Mon Sep 17 00:00:00 2001 From: SeojinSeojin <1106laura@naver.com> Date: Thu, 21 Dec 2023 16:31:35 +0900 Subject: [PATCH 3/5] feat: try to enhance desktop ui .. --- .../components/Comment/Cards/index.tsx | 49 +++++++++++++++++++ .../MainPage/components/Comment/index.tsx | 16 +----- .../MainPage/components/Comment/style.ts | 21 ++++++-- 3 files changed, 69 insertions(+), 17 deletions(-) create mode 100644 src/views/MainPage/components/Comment/Cards/index.tsx diff --git a/src/views/MainPage/components/Comment/Cards/index.tsx b/src/views/MainPage/components/Comment/Cards/index.tsx new file mode 100644 index 00000000..210b9dfd --- /dev/null +++ b/src/views/MainPage/components/Comment/Cards/index.tsx @@ -0,0 +1,49 @@ +import Carousel from '@src/components/common/Carousel'; +import { useIsDesktop } from '@src/hooks/useDevice'; +import { SOPT_COMMENT_LIST } from '@src/lib/constants/main'; +import CommentCard from '../Card'; +import * as S from '../style'; + +type CommentCardProps = { + activeIdx: number; + changeActiveIdx: (idx: number) => void; +}; + +export default function CommentCards({ activeIdx, changeActiveIdx }: CommentCardProps) { + const isDesktop = useIsDesktop('768px'); + if (isDesktop) + return ; + return ( + + {SOPT_COMMENT_LIST.map((comment, idx) => ( + + ))} + + ); +} + +function CommentCardsDesktop({ activeIdx, changeActiveIdx }: CommentCardProps) { + return ( + + {SOPT_COMMENT_LIST.map((comment, idx) => ( + + ))} + + ); +} diff --git a/src/views/MainPage/components/Comment/index.tsx b/src/views/MainPage/components/Comment/index.tsx index 0da66cc2..a70c56b9 100644 --- a/src/views/MainPage/components/Comment/index.tsx +++ b/src/views/MainPage/components/Comment/index.tsx @@ -1,7 +1,7 @@ import { useAnimationControls } from 'framer-motion'; import { useState } from 'react'; import { SOPT_COMMENT_LIST } from '@src/lib/constants/main'; -import CommentCard from './Card'; +import CommentCards from './Cards'; import * as S from './style'; export default function CommentSection() { @@ -25,19 +25,7 @@ export default function CommentSection() { {SOPT_COMMENT_LIST[activeIdx]?.summary} - - {SOPT_COMMENT_LIST.map((comment, idx) => ( - - ))} - + ); } diff --git a/src/views/MainPage/components/Comment/style.ts b/src/views/MainPage/components/Comment/style.ts index 5644de7e..d0ce12ff 100644 --- a/src/views/MainPage/components/Comment/style.ts +++ b/src/views/MainPage/components/Comment/style.ts @@ -5,7 +5,7 @@ import { motion } from 'framer-motion'; export const Wrapper = styled.div` position: relative; padding-top: 200px; - padding-bottom: 600px; + padding-bottom: 800px; `; export const TitleWrapper = styled.div<{ activeIdx: number }>` @@ -18,8 +18,6 @@ export const TitleWrapper = styled.div<{ activeIdx: number }>` top: 0; padding-top: 120px; padding-bottom: 80px; - background: ${({ activeIdx }) => - activeIdx > 1 ? 'linear-gradient(to bottom, #0D111F 80%, transparent)' : 'transparent'}; transition: 0.4s; } `; @@ -30,6 +28,7 @@ export const CardWrapper = styled.div` align-items: flex-end; @media (max-width: 1440px) { padding-top: 200px; + padding-bottom: 600px; } `; @@ -41,6 +40,16 @@ export const SectionTitle = styled.div` font-weight: 500; line-height: 61.6px; /* 112% */ letter-spacing: -1.65px; + @media (max-width: 768px) and (min-width: 1440px) { + padding-bottom: 200px; + } + @media (max-width: 768px) { + padding-top: 200px; + font-family: SUIT; + font-size: 41px; + line-height: 45.956px; /* 112.087% */ + letter-spacing: -1.23px; + } `; export const Summary = styled(motion.div)<{ color: string }>` @@ -54,4 +63,10 @@ export const Summary = styled(motion.div)<{ color: string }>` letter-spacing: -2.31px; white-space: pre-line; padding-top: 36px; + @media (max-width: 768px) { + font-size: 57px; + font-weight: 600; + line-height: 45.956px; /* 80.624% */ + letter-spacing: -1.71px; + } `; From 2066b8fcf6d4083d98fc8289fefbd4af55219d87 Mon Sep 17 00:00:00 2001 From: SeojinSeojin <1106laura@naver.com> Date: Thu, 21 Dec 2023 17:21:12 +0900 Subject: [PATCH 4/5] feat: implement mobile --- .../Comment/Card/{ => Desktop}/index.tsx | 0 .../Comment/Card/{ => Desktop}/style.ts | 0 .../components/Comment/Card/Mobile/index.tsx | 19 ++++++ .../components/Comment/Card/Mobile/style.ts | 36 ++++++++++ .../components/Comment/Cards/index.tsx | 38 +++++------ .../MainPage/components/Comment/style.ts | 67 ++++++++++++++++++- 6 files changed, 139 insertions(+), 21 deletions(-) rename src/views/MainPage/components/Comment/Card/{ => Desktop}/index.tsx (100%) rename src/views/MainPage/components/Comment/Card/{ => Desktop}/style.ts (100%) create mode 100644 src/views/MainPage/components/Comment/Card/Mobile/index.tsx create mode 100644 src/views/MainPage/components/Comment/Card/Mobile/style.ts diff --git a/src/views/MainPage/components/Comment/Card/index.tsx b/src/views/MainPage/components/Comment/Card/Desktop/index.tsx similarity index 100% rename from src/views/MainPage/components/Comment/Card/index.tsx rename to src/views/MainPage/components/Comment/Card/Desktop/index.tsx diff --git a/src/views/MainPage/components/Comment/Card/style.ts b/src/views/MainPage/components/Comment/Card/Desktop/style.ts similarity index 100% rename from src/views/MainPage/components/Comment/Card/style.ts rename to src/views/MainPage/components/Comment/Card/Desktop/style.ts diff --git a/src/views/MainPage/components/Comment/Card/Mobile/index.tsx b/src/views/MainPage/components/Comment/Card/Mobile/index.tsx new file mode 100644 index 00000000..084fec13 --- /dev/null +++ b/src/views/MainPage/components/Comment/Card/Mobile/index.tsx @@ -0,0 +1,19 @@ +import { SoptCommentType } from '@src/lib/types/main'; +import * as S from './style'; + +interface CommentCardProps { + color: SoptCommentType['color']; + comment: SoptCommentType['comment']; + commenter: SoptCommentType['commenter']; +} + +export default function CommentCard({ color, comment, commenter }: CommentCardProps) { + return ( + +
{comment}
+ +
{commenter.name}
|
{commenter.history}
|
{commenter.part}
+ + + ); +} diff --git a/src/views/MainPage/components/Comment/Card/Mobile/style.ts b/src/views/MainPage/components/Comment/Card/Mobile/style.ts new file mode 100644 index 00000000..9cddb746 --- /dev/null +++ b/src/views/MainPage/components/Comment/Card/Mobile/style.ts @@ -0,0 +1,36 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.div<{ color: string }>` + background-color: ${({ color }) => color}; + display: flex; + flex-direction: column; + height: 480px; + border-radius: 21px; + padding: 42px 40px; + + font-family: SUIT; + font-size: 19px; + font-style: normal; + font-weight: 400; + line-height: 33.3px; /* 177.5% */ + letter-spacing: -0.8px; + + @media (max-width: 520px) { + height: 280px; + border-radius: 12px; + padding: 24px 20px; + font-size: 12.669px; + font-style: normal; + font-weight: 400; + line-height: 20.85px; /* 164.575% */ + letter-spacing: -0.507px; + } +`; + +export const Footer = styled.div` + flex: 1; + display: flex; + align-items: flex-end; + gap: 8px; + font-weight: 600; +`; diff --git a/src/views/MainPage/components/Comment/Cards/index.tsx b/src/views/MainPage/components/Comment/Cards/index.tsx index 210b9dfd..6573ca6b 100644 --- a/src/views/MainPage/components/Comment/Cards/index.tsx +++ b/src/views/MainPage/components/Comment/Cards/index.tsx @@ -1,22 +1,26 @@ -import Carousel from '@src/components/common/Carousel'; import { useIsDesktop } from '@src/hooks/useDevice'; import { SOPT_COMMENT_LIST } from '@src/lib/constants/main'; -import CommentCard from '../Card'; +import CommentCardDesktop from '../Card/Desktop'; +import CommentCardMobile from '../Card/Mobile'; import * as S from '../style'; -type CommentCardProps = { +type CommentCardsProps = { activeIdx: number; changeActiveIdx: (idx: number) => void; }; -export default function CommentCards({ activeIdx, changeActiveIdx }: CommentCardProps) { +export default function CommentCards({ activeIdx, changeActiveIdx }: CommentCardsProps) { const isDesktop = useIsDesktop('768px'); if (isDesktop) return ; + return ; +} + +function CommentCardsDesktop({ activeIdx, changeActiveIdx }: CommentCardsProps) { return ( - + {SOPT_COMMENT_LIST.map((comment, idx) => ( - ))} - + ); } -function CommentCardsDesktop({ activeIdx, changeActiveIdx }: CommentCardProps) { +function CommentCardsMobile({ activeIdx, changeActiveIdx }: CommentCardsProps) { + const activeCard = SOPT_COMMENT_LIST[activeIdx]; + const commentLength = SOPT_COMMENT_LIST.length; return ( - {SOPT_COMMENT_LIST.map((comment, idx) => ( - - ))} + changeActiveIdx((activeIdx - 1 + commentLength) % commentLength)} + /> + + changeActiveIdx((activeIdx + 1) % commentLength)} /> ); } diff --git a/src/views/MainPage/components/Comment/style.ts b/src/views/MainPage/components/Comment/style.ts index d0ce12ff..7e53d1f4 100644 --- a/src/views/MainPage/components/Comment/style.ts +++ b/src/views/MainPage/components/Comment/style.ts @@ -1,11 +1,19 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import { motion } from 'framer-motion'; +import icLeftArrow from '@src/assets/icons/ic_arrow_left.svg'; +import icRightArrow from '@src/assets/icons/ic_arrow_right.svg'; export const Wrapper = styled.div` position: relative; padding-top: 200px; padding-bottom: 800px; + @media (max-width: 768px) { + height: 130vh; + } + @media (max-width: 520px) { + height: inherit; + } `; export const TitleWrapper = styled.div<{ activeIdx: number }>` @@ -20,6 +28,11 @@ export const TitleWrapper = styled.div<{ activeIdx: number }>` padding-bottom: 80px; transition: 0.4s; } + @media (max-width: 768px) { + position: static; + padding-top: 0; + padding-bottom: 0; + } `; export const CardWrapper = styled.div` @@ -30,6 +43,17 @@ export const CardWrapper = styled.div` padding-top: 200px; padding-bottom: 600px; } + @media (max-width: 768px) { + padding-top: 64px; + flex-direction: row; + align-items: center; + gap: 22px; + } + @media (max-width: 520px) { + padding-top: 32px; + padding-bottom: 0; + gap: 12px; + } `; export const SectionTitle = styled.div` @@ -44,12 +68,18 @@ export const SectionTitle = styled.div` padding-bottom: 200px; } @media (max-width: 768px) { - padding-top: 200px; font-family: SUIT; font-size: 41px; line-height: 45.956px; /* 112.087% */ letter-spacing: -1.23px; } + @media (max-width: 520px) { + font-size: 21px; + font-style: normal; + font-weight: 500; + line-height: 24.28px; /* 115.617% */ + letter-spacing: -0.63px; + } `; export const Summary = styled(motion.div)<{ color: string }>` @@ -66,7 +96,40 @@ export const Summary = styled(motion.div)<{ color: string }>` @media (max-width: 768px) { font-size: 57px; font-weight: 600; - line-height: 45.956px; /* 80.624% */ + line-height: 60px; letter-spacing: -1.71px; + height: 156px; } + @media (max-width: 520px) { + font-size: 30px; + font-style: normal; + font-weight: 600; + line-height: 32px; + letter-spacing: -0.9px; + height: 120px; + } +`; + +const Arrow = styled.div` + width: 26px; + height: 42px; + background-color: #b1c3d9b2; + flex-shrink: 0; + cursor: pointer; + mask-repeat: no-repeat; + mask-size: contain; + mask-position: center; + + @media (max-width: 520px) { + width: 15px; + height: 24px; + } +`; + +export const LeftArrow = styled(Arrow)` + mask-image: url(${icLeftArrow}); +`; + +export const RightArrow = styled(Arrow)` + mask-image: url(${icRightArrow}); `; From 1691f68c7824bfe23ff96978ae6bef216ee50d1d Mon Sep 17 00:00:00 2001 From: SeojinSeojin <1106laura@naver.com> Date: Thu, 21 Dec 2023 17:28:45 +0900 Subject: [PATCH 5/5] chore: update pnpm-lock.yaml --- pnpm-lock.yaml | 58 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 57 insertions(+), 1 deletion(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cae71195..8b4f241d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,6 +7,7 @@ specifiers: '@babel/preset-env': ^7.18.2 '@babel/runtime': ^7.18.9 '@emotion/babel-plugin': ^11.10.0 + '@emotion/is-prop-valid': ^1.2.1 '@emotion/react': ^11.9.0 '@emotion/styled': ^11.8.1 '@sopt-makers/colors': ^2.2.0 @@ -22,6 +23,7 @@ specifiers: '@types/qs': 6.9.7 '@types/react': 18.0.10 '@types/react-dom': 18.0.5 + '@types/react-slick': ^0.23.12 '@types/react-test-renderer': ^18.0.0 '@typescript-eslint/eslint-plugin': ^5.27.0 '@typescript-eslint/parser': ^5.27.0 @@ -58,10 +60,12 @@ specifiers: react-dom: 18.2.0 react-query: ^3.39.2 react-responsive: 9.0.0-beta.10 + react-slick: ^0.29.0 react-test-renderer: ^18.2.0 react-toastify: ^9.0.8 sass: ^1.55.0 shortid: ^2.2.16 + slick-carousel: ^1.8.1 ts-jest: ^28.0.4 ts-loader: ^9.3.0 ts-pattern: ^4.0.5 @@ -71,10 +75,12 @@ specifiers: dependencies: '@amplitude/analytics-browser': 2.3.0 + '@emotion/is-prop-valid': 1.2.1 '@emotion/react': 11.11.1_z2b3xs64x2tj5h6d73q25pmyxa '@emotion/styled': 11.11.0_lrlg252sqoeehi74frojlg57f4 '@sopt-makers/colors': 2.2.0 '@types/qs': 6.9.7 + '@types/react-slick': 0.23.13 axios: 0.27.2 classcat: 5.0.4 dayjs: 1.11.9 @@ -86,9 +92,11 @@ dependencies: react-dom: 18.2.0_react@18.2.0 react-query: 3.39.3_biqbaboplfbrettd7655fr4n2y react-responsive: 9.0.0-beta.10_react@18.2.0 + react-slick: 0.29.0_biqbaboplfbrettd7655fr4n2y react-test-renderer: 18.2.0_react@18.2.0 react-toastify: 9.1.3_biqbaboplfbrettd7655fr4n2y shortid: 2.2.16 + slick-carousel: 1.8.1 devDependencies: '@babel/core': 7.22.11 @@ -2474,6 +2482,12 @@ packages: '@types/react': 18.0.10 dev: true + /@types/react-slick/0.23.13: + resolution: {integrity: sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==} + dependencies: + '@types/react': 18.0.10 + dev: false + /@types/react-test-renderer/18.0.0: resolution: {integrity: sha512-C7/5FBJ3g3sqUahguGi03O79b8afNeSD6T8/GU50oQrJCU0bVCCGQHaGKUbg2Ce8VQEEqTw8/HiS6lXHHdgkdQ==} dependencies: @@ -3344,6 +3358,10 @@ packages: resolution: {integrity: sha512-sbpkOw6z413p+HDGcBENe498WM9woqWHiJxCq7nvmxe9WmrUmqfAcxpIwAiMtM5Q3AhYkzXcNQHqsWq0mND51g==} dev: false + /classnames/2.3.2: + resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==} + dev: false + /clean-stack/2.2.0: resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==} engines: {node: '>=6'} @@ -3771,6 +3789,10 @@ packages: tapable: 2.2.1 dev: true + /enquire.js/2.1.6: + resolution: {integrity: sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==} + dev: false + /enquirer/2.4.1: resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==} engines: {node: '>=8.6'} @@ -5603,6 +5625,12 @@ packages: resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==} dev: true + /json2mq/0.2.0: + resolution: {integrity: sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==} + dependencies: + string-convert: 0.2.1 + dev: false + /json5/0.5.1: resolution: {integrity: sha512-4xrs1aW+6N5DalkqSVA8fxh458CXvR99WU8WLKmq4v8eWAL86Xo3BVqyd3SkA9wEVjCMqyvvRRkshAdOnBp5rw==} hasBin: true @@ -5745,7 +5773,6 @@ packages: /lodash.debounce/4.0.8: resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} - dev: true /lodash.isplainobject/4.0.6: resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==} @@ -6473,6 +6500,21 @@ packages: react-is: 18.2.0 dev: false + /react-slick/0.29.0_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==} + peerDependencies: + react: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 + react-dom: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 + dependencies: + classnames: 2.3.2 + enquire.js: 2.1.6 + json2mq: 0.2.0 + lodash.debounce: 4.0.8 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + resize-observer-polyfill: 1.5.1 + dev: false + /react-test-renderer/18.2.0_react@18.2.0: resolution: {integrity: sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==} peerDependencies: @@ -6592,6 +6634,10 @@ packages: resolution: {integrity: sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==} dev: true + /resize-observer-polyfill/1.5.1: + resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==} + dev: false + /resolve-cwd/3.0.0: resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==} engines: {node: '>=8'} @@ -6808,6 +6854,12 @@ packages: is-fullwidth-code-point: 3.0.0 dev: true + /slick-carousel/1.8.1: + resolution: {integrity: sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==} + peerDependencies: + jquery: '>=1.8.0' + dev: false + /source-map-js/1.0.2: resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} engines: {node: '>=0.10.0'} @@ -6868,6 +6920,10 @@ packages: engines: {node: '>=0.6.19'} dev: true + /string-convert/0.2.1: + resolution: {integrity: sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==} + dev: false + /string-length/4.0.2: resolution: {integrity: sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==} engines: {node: '>=10'}