From 39f2f1926dfa06165dc007e32d3d0dea69776d7c Mon Sep 17 00:00:00 2001 From: solar3070 <> Date: Fri, 15 Dec 2023 21:33:03 +0900 Subject: [PATCH 01/10] =?UTF-8?q?style:=20=ED=95=98=EB=8B=A8=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=93=A4=20=EB=B0=B0=EA=B2=BD=20?= =?UTF-8?q?=EC=83=89=EC=83=81=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/MainPage/components/Activity/index.tsx | 6 +++--- src/views/MainPage/components/Activity/style.ts | 4 ---- src/views/MainPage/components/OwnOrganization/index.tsx | 4 ++-- src/views/MainPage/components/OwnOrganization/style.ts | 5 ----- src/views/MainPage/components/PartConfig/index.tsx | 4 ++-- src/views/MainPage/components/PartConfig/style.ts | 4 ---- 6 files changed, 7 insertions(+), 20 deletions(-) diff --git a/src/views/MainPage/components/Activity/index.tsx b/src/views/MainPage/components/Activity/index.tsx index a5fe32ee..30bd9eb1 100644 --- a/src/views/MainPage/components/Activity/index.tsx +++ b/src/views/MainPage/components/Activity/index.tsx @@ -6,10 +6,10 @@ import MobileCard from './MobileCard'; import * as S from './style'; export default function CardHover() { - const isMobileSize = useIsMobile('768px'); + const isMobileSize = useIsMobile('428px'); return ( - +
)} - +
); } diff --git a/src/views/MainPage/components/Activity/style.ts b/src/views/MainPage/components/Activity/style.ts index cacf3298..8ec6ddc8 100644 --- a/src/views/MainPage/components/Activity/style.ts +++ b/src/views/MainPage/components/Activity/style.ts @@ -1,10 +1,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -export const Background = styled.section` - background-color: ${colors.white}; -`; - export const CardWrapper = styled.main` display: grid; grid-template-columns: repeat(3, 1fr); diff --git a/src/views/MainPage/components/OwnOrganization/index.tsx b/src/views/MainPage/components/OwnOrganization/index.tsx index 3ab3423b..a84e344a 100644 --- a/src/views/MainPage/components/OwnOrganization/index.tsx +++ b/src/views/MainPage/components/OwnOrganization/index.tsx @@ -5,7 +5,7 @@ import * as S from './style'; export default function OwnOrganization() { return ( - +
))} - +
); } diff --git a/src/views/MainPage/components/OwnOrganization/style.ts b/src/views/MainPage/components/OwnOrganization/style.ts index 524c48f6..626833e5 100644 --- a/src/views/MainPage/components/OwnOrganization/style.ts +++ b/src/views/MainPage/components/OwnOrganization/style.ts @@ -15,8 +15,3 @@ export const Wrapper = styled.div` gap: 14px; } `; - -export const Background = styled.section` - background-color: ${colors.white}; - padding-top: 146px; -`; diff --git a/src/views/MainPage/components/PartConfig/index.tsx b/src/views/MainPage/components/PartConfig/index.tsx index bbabed90..8a5b0165 100644 --- a/src/views/MainPage/components/PartConfig/index.tsx +++ b/src/views/MainPage/components/PartConfig/index.tsx @@ -20,7 +20,7 @@ export default function PartConfig() { } = useInfiniteCarousel(carouselList, '(-100% - 20px)'); return ( - +
필요 역량이 궁금하다면? - +
); } diff --git a/src/views/MainPage/components/PartConfig/style.ts b/src/views/MainPage/components/PartConfig/style.ts index b45d10a6..ba59f013 100644 --- a/src/views/MainPage/components/PartConfig/style.ts +++ b/src/views/MainPage/components/PartConfig/style.ts @@ -2,10 +2,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; import Link from 'next/link'; -export const Background = styled.section` - background-color: ${colors.white}; -`; - export const Wrapper = styled.div` display: flex; flex-direction: column; From 0feb88f380f2a8767f59c80d90bd0205950c5b4b Mon Sep 17 00:00:00 2001 From: solar3070 <> Date: Fri, 15 Dec 2023 21:33:21 +0900 Subject: [PATCH 02/10] =?UTF-8?q?asset:=20=ED=99=94=EC=82=B4=ED=91=9C=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/ic_polygon.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/assets/icons/ic_polygon.svg diff --git a/src/assets/icons/ic_polygon.svg b/src/assets/icons/ic_polygon.svg new file mode 100644 index 00000000..09590194 --- /dev/null +++ b/src/assets/icons/ic_polygon.svg @@ -0,0 +1,3 @@ + + + From cbb2e1f49b1099a51d0fbed4c28b5975ade6b439 Mon Sep 17 00:00:00 2001 From: solar3070 <> Date: Fri, 15 Dec 2023 21:34:10 +0900 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20useInView=20=ED=9B=85=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 --- src/hooks/useInView.ts | 10 ++++++++-- src/hooks/useIntersectionObserver.ts | 4 +--- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/hooks/useInView.ts b/src/hooks/useInView.ts index 2c0eaed8..a0dad732 100644 --- a/src/hooks/useInView.ts +++ b/src/hooks/useInView.ts @@ -1,8 +1,14 @@ import { useState } from 'react'; import useIntersectionObserver from './useIntersectionObserver'; -function useInView() { - const ref = useIntersectionObserver(() => setIsInView(true)); +interface useInViewProps { + options?: IntersectionObserverInit; +} + +function useInView({ options }: useInViewProps = {}) { + const ref = useIntersectionObserver((entry) => { + setIsInView(entry.isIntersecting); + }, options); const [isInView, setIsInView] = useState(false); return { isInView, ref }; diff --git a/src/hooks/useIntersectionObserver.ts b/src/hooks/useIntersectionObserver.ts index f4eea4f7..55631285 100644 --- a/src/hooks/useIntersectionObserver.ts +++ b/src/hooks/useIntersectionObserver.ts @@ -10,9 +10,7 @@ const useIntersectionObserver = ( const callback = useCallback( (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => { entries.forEach((entry) => { - if (entry.isIntersecting) { - onIntersect(entry, observer); - } + onIntersect(entry, observer); }); }, [onIntersect], From b75f87822239b573bf101505b53e6a9c2ceb9359 Mon Sep 17 00:00:00 2001 From: solar3070 <> Date: Fri, 15 Dec 2023 21:37:05 +0900 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=20=ED=95=98?= =?UTF-8?q?=EB=8B=A8=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/MainPage/MainPage.tsx | 8 +- .../components/ActivitySection/index.tsx | 17 +++ .../components/ActivitySection/style.ts | 9 ++ .../components/BottomLayout/index.tsx | 63 +++++++++++ .../MainPage/components/BottomLayout/style.ts | 101 ++++++++++++++++++ 5 files changed, 192 insertions(+), 6 deletions(-) create mode 100644 src/views/MainPage/components/ActivitySection/index.tsx create mode 100644 src/views/MainPage/components/ActivitySection/style.ts create mode 100644 src/views/MainPage/components/BottomLayout/index.tsx create mode 100644 src/views/MainPage/components/BottomLayout/style.ts diff --git a/src/views/MainPage/MainPage.tsx b/src/views/MainPage/MainPage.tsx index e3994fd9..59678d24 100644 --- a/src/views/MainPage/MainPage.tsx +++ b/src/views/MainPage/MainPage.tsx @@ -1,10 +1,8 @@ import PageLayout from '@src/components/common/PageLayout'; +import BottomLayout from '@src/views/MainPage/components/BottomLayout'; import IntroSection from '@src/views/MainPage/components/IntroSection'; -import PartConfig from '@src/views/MainPage/components/PartConfig'; -import Activity from './components/Activity'; import Banner from './components/Banner'; import Introduce from './components/Introduce'; -import OwnOrganization from './components/OwnOrganization'; import ScrollInteractiveLogo from './components/ScrollInteractiveLogo'; function MainPage() { @@ -14,9 +12,7 @@ function MainPage() { - - - + ); } diff --git a/src/views/MainPage/components/ActivitySection/index.tsx b/src/views/MainPage/components/ActivitySection/index.tsx new file mode 100644 index 00000000..63955e48 --- /dev/null +++ b/src/views/MainPage/components/ActivitySection/index.tsx @@ -0,0 +1,17 @@ +import { forwardRef } from 'react'; +import Activity from '@src/views/MainPage/components/Activity'; +import OwnOrganization from '@src/views/MainPage/components/OwnOrganization'; +import PartConfig from '@src/views/MainPage/components/PartConfig'; +import * as S from './style'; + +function ActivitySection(_props: unknown, ref: React.Ref) { + return ( + + + + + + ); +} + +export default forwardRef(ActivitySection); diff --git a/src/views/MainPage/components/ActivitySection/style.ts b/src/views/MainPage/components/ActivitySection/style.ts new file mode 100644 index 00000000..310fd696 --- /dev/null +++ b/src/views/MainPage/components/ActivitySection/style.ts @@ -0,0 +1,9 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.div` + display: flex; + flex-direction: column; + gap: 146px; + + margin-bottom: 300px; +`; diff --git a/src/views/MainPage/components/BottomLayout/index.tsx b/src/views/MainPage/components/BottomLayout/index.tsx new file mode 100644 index 00000000..c728f7ae --- /dev/null +++ b/src/views/MainPage/components/BottomLayout/index.tsx @@ -0,0 +1,63 @@ +import { useScroll, useTransform } from 'framer-motion'; +import { RefObject, useRef } from 'react'; +import useInView from '@src/hooks/useInView'; +import ActivitySection from '@src/views/MainPage/components/ActivitySection'; +import * as S from './style'; + +const MenuList = [ + { name: 'Value', id: 'value' }, + { name: 'Activity', id: 'activity' }, + { name: 'Review', id: 'review' }, + { name: 'Recent news', id: 'news' }, +]; + +export type RefHandler = { + viewRef: RefObject; + targetRef: RefObject; +}; + +function BottomLayout() { + const ac = useInView(); + const re = useInView(); + const ne = useInView(); + + const targetRef = useRef(null); + const { scrollYProgress } = useScroll({ target: targetRef, offset: ['start center', 'start'] }); + + const viewList = [false, ac.isInView, re.isInView, ne.isInView]; + const minIndex = viewList.findIndex((value) => value === true); + + const backgroundColor1 = useTransform(scrollYProgress, [0, 1], ['#FFF', '#090B12']); + const backgroundColor2 = useTransform(scrollYProgress, [0, 1], ['#F6F8FC', '#0D111F']); + const backgroundColor3 = useTransform(scrollYProgress, [0, 1], ['#fbfcfe', '#fbfcfef']); + + const color = useTransform(scrollYProgress, [0, 1], ['#a8acbae0', '#747885']); + + return ( + + + {MenuList.map(({ name, id }, index) => ( + + {name} + + ))} + + + +
+
+ Reviews +
+
+ News +
+ + + ); +} + +export default BottomLayout; diff --git a/src/views/MainPage/components/BottomLayout/style.ts b/src/views/MainPage/components/BottomLayout/style.ts new file mode 100644 index 00000000..6cc2f465 --- /dev/null +++ b/src/views/MainPage/components/BottomLayout/style.ts @@ -0,0 +1,101 @@ +import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; +import { motion } from 'framer-motion'; +import Link from 'next/link'; +import { css } from '@emotion/react'; +import icPolygon from '@src/assets/icons/ic_polygon.svg'; + +export const Wrapper = styled(motion.section)` + display: flex; + gap: 12.25px; + + width: 100%; + padding: 0 2.86vw; + background-color: ${colors.white}; + + @media (max-width: 768px) { + padding: 0 5.98vw; + } +`; + +export const FloatingMenu = styled.div` + display: flex; + flex-direction: column; + gap: 9.27px; + position: sticky; + top: 0; + + height: fit-content; + + @media (max-width: 768px) { + display: none; + } +`; + +export const MenuWrapper = styled(motion.div)<{ isInView?: boolean }>` + position: relative; + + background-color: #fbfcfe; + border-radius: 10px; + border: 1.2px solid rgba(196, 199, 211, 0.3); + + color: rgba(168, 172, 186, 0.88); + text-align: center; + font-family: SUIT; + font-size: 19.46px; + font-style: normal; + font-weight: 500; + line-height: 53.54px; /* 275.126% */ + letter-spacing: -0.584px; + + ${({ isInView }) => + isInView && + css` + border-color: transparent; + background-color: #24314d !important; + color: #fff !important; + + &::after { + content: ''; + position: absolute; + top: 50%; + right: -8px; + transform: translateY(-50%); + z-index: 99; + + width: 8px; + height: 11px; + background-image: url(${icPolygon}); + background-repeat: no-repeat; + } + `}; +`; + +export const Menu = styled(Link)` + display: flex; + justify-content: center; + align-items: center; + + width: 190px; + height: 72px; + + @media (max-width: 1440px) { + width: 152px; + } +`; + +export const Layout = styled(motion.div)` + flex: 1; + width: 80%; + padding: 68px 4vw 0 4vw; + border-radius: 20.946px; + background: #f6f8fc; + + @media (max-width: 768px) { + padding: 65px 6.25vw 0 6.25vw; + } + + @media (max-width: 428px) { + padding: 37.36px 28px 0 28px; + } +`; From a6f34e802b1b50def989a2e4300cb7e5c272088e Mon Sep 17 00:00:00 2001 From: solar3070 <> Date: Tue, 19 Dec 2023 23:20:24 +0900 Subject: [PATCH 05/10] =?UTF-8?q?chore:=20=EC=BD=94=EB=93=9C=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/BottomLayout/index.tsx | 29 +++++++++---------- .../components/IntroSection/index.tsx | 4 +-- 2 files changed, 16 insertions(+), 17 deletions(-) diff --git a/src/views/MainPage/components/BottomLayout/index.tsx b/src/views/MainPage/components/BottomLayout/index.tsx index c728f7ae..acb73d50 100644 --- a/src/views/MainPage/components/BottomLayout/index.tsx +++ b/src/views/MainPage/components/BottomLayout/index.tsx @@ -17,42 +17,41 @@ export type RefHandler = { }; function BottomLayout() { - const ac = useInView(); - const re = useInView(); - const ne = useInView(); + const activity = useInView(); + const review = useInView(); + const news = useInView(); const targetRef = useRef(null); const { scrollYProgress } = useScroll({ target: targetRef, offset: ['start center', 'start'] }); - const viewList = [false, ac.isInView, re.isInView, ne.isInView]; + const viewList = [false, activity.isInView, review.isInView, news.isInView]; const minIndex = viewList.findIndex((value) => value === true); - const backgroundColor1 = useTransform(scrollYProgress, [0, 1], ['#FFF', '#090B12']); - const backgroundColor2 = useTransform(scrollYProgress, [0, 1], ['#F6F8FC', '#0D111F']); - const backgroundColor3 = useTransform(scrollYProgress, [0, 1], ['#fbfcfe', '#fbfcfef']); - - const color = useTransform(scrollYProgress, [0, 1], ['#a8acbae0', '#747885']); + const wrapperBackground = useTransform(scrollYProgress, [0, 1], ['#FFF', '#090B12']); + const layoutBackground = useTransform(scrollYProgress, [0, 1], ['#F6F8FC', '#0D111F']); + const menuBackground = useTransform(scrollYProgress, [0, 1], ['#fbfcfe', '#fbfcfef']); + const menuColor = useTransform(scrollYProgress, [0, 1], ['#a8acbae0', '#747885']); return ( - + {MenuList.map(({ name, id }, index) => ( {name} ))} - - + +
-
+
Reviews
-
+
News
diff --git a/src/views/MainPage/components/IntroSection/index.tsx b/src/views/MainPage/components/IntroSection/index.tsx index 68fc0810..17a5f833 100644 --- a/src/views/MainPage/components/IntroSection/index.tsx +++ b/src/views/MainPage/components/IntroSection/index.tsx @@ -4,9 +4,9 @@ import * as S from './style'; export default function IntroCardList() { return ( - + -
+
{INTRO_CONTENT_LIST.map((content) => ( ))} From 6f62e100cc373ed8e1179c031cdcbccc12c0d5e2 Mon Sep 17 00:00:00 2001 From: wooyoung <62867581+f0rever0@users.noreply.github.com> Date: Thu, 21 Dec 2023 11:37:47 +0900 Subject: [PATCH 06/10] =?UTF-8?q?[SP3]=20=EC=95=A1=ED=8B=B0=EB=B9=84?= =?UTF-8?q?=ED=8B=B0=20=EB=82=B4=EC=9A=A9=20=EC=88=98=EC=A0=95=20=EB=B0=8F?= =?UTF-8?q?=20useInfiniteCarousel=20=EC=A0=81=EC=9A=A9=20(#322)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat : 액티비티 컨텐츠 내용 변경 * feat : useInfiniteCarousel 적용 * chore : 불필요한 style 삭제 * chore : 불필요한 type 제거 * chore : 불필요한 style 삭제 --- src/lib/constants/main.ts | 35 +++-- src/lib/types/main.ts | 37 ++++- .../components/Activity/Card/style.ts | 3 +- .../components/Activity/MobileCard/index.tsx | 91 +++++++++--- .../components/Activity/MobileCard/style.ts | 131 +++++++++++++----- .../MainPage/components/Activity/index.tsx | 4 +- .../MainPage/components/Activity/style.ts | 8 +- 7 files changed, 222 insertions(+), 87 deletions(-) diff --git a/src/lib/constants/main.ts b/src/lib/constants/main.ts index 94b81671..6ced448c 100644 --- a/src/lib/constants/main.ts +++ b/src/lib/constants/main.ts @@ -9,14 +9,14 @@ import { default as ImgSeminar } from '@src/assets/images/img_seminar.jpg'; import { default as ImgSoptkaton } from '@src/assets/images/img_soptkaton.jpg'; import { default as ImgSoptterm } from '@src/assets/images/img_soptterm.jpg'; import { default as ImgStudy } from '@src/assets/images/img_study.jpg'; -import { ActivityType, KeywordListType, PartListType } from '@src/lib/types/main'; +import { ActivityListType, ActivityType, KeywordListType, PartListType } from '@src/lib/types/main'; import { Part, TextWeightType } from '@src/lib/types/universal'; export const FIRST_INTRO_CONTENT = 1; export const LAST_INTRO_CONTENT = 3; -export const Activity: ActivityType[] = [ - { +export const Activity: ActivityListType = { + [ActivityType.APPJAM]: { img: ImgAppjam.src, navKor: '앱잼', navEng: 'App jam', @@ -24,16 +24,16 @@ export const Activity: ActivityType[] = [ { content: '3~5주간 ', color: 'yellow' }, { content: - '기획, 디자인, 개발 파트가 팀을 이뤄 하나의 웹 또는 앱 서비스를 제작하는 SOPT 내 장기 프로젝트예요. IT 창업을 위한 협업 과정을 경험하고, 최종 ', + '기획, 디자인, 개발 파트가 팀을 이뤄 하나의 웹 또는 앱 서비스를 제작하는 SOPT 내 장기 프로젝트예요. ', color: 'white', }, { content: '데모데이 ', color: 'yellow' }, { content: '에서 ', color: 'white' }, - { content: '각 파트 현직자들', color: 'yellow' }, - { content: '과 결과물을 공유하고 피드백을 받아요.', color: 'white' }, + { content: '각 파트 현직자', color: 'yellow' }, + { content: '들에게 결과물에 대한 피드백을 받아요.', color: 'white' }, ], }, - { + [ActivityType.SOPKATHON]: { img: ImgSoptkaton.src, navKor: '솝커톤', navEng: 'Sopkaton', @@ -45,13 +45,12 @@ export const Activity: ActivityType[] = [ }, { content: '단기 프로젝트', color: 'yellow' }, { - content: - '예요. 앱잼에 앞서 팀 단위의 협업 과정을 빠르게 경험하며, IT 프로젝트에 대한 협업 감각을 익힐 수 있어요.', + content: '예요. 협업 감각을 익힐 수 있어요.', color: 'white', }, ], }, - { + [ActivityType.SOPTERM]: { img: ImgSoptterm.src, navKor: '솝텀', navEng: 'Sopt-term', @@ -70,7 +69,7 @@ export const Activity: ActivityType[] = [ { content: '를 진행할 수 있어요.', color: 'white' }, ], }, - { + [ActivityType.SEMINAR]: { img: ImgSeminar.src, navKor: '정기 세미나', navEng: 'Seminar', @@ -79,25 +78,25 @@ export const Activity: ActivityType[] = [ { content: '총 8회의 파트별 세미나', color: 'yellow' }, { content: - '를 통해 각자 자신의 파트에서 실력을 다져요. 각 파트장의 강연, 파트원간의 지식 공유, 외부 연사 초정 등 다양한 유형의 세미나가 진행돼요.', + '를 통해 각자 자신의 파트에서 실력을 다져요. 각 파트장의 강연, 파트원간의 지식 공유, 외부 연사 초정 등 다양한 세미나가 진행돼요.', color: 'white', }, ], }, - { + [ActivityType.STUDY]: { img: ImgStudy.src, navKor: '스터디', navEng: 'Study', description: [ - { content: '각 파트의 실력을 심도있게 다질 수 있는 ', color: 'white' }, + { content: '실력을 심도있게 다질 수 있는 ', color: 'white' }, { content: '스터디와 다양한 파트원들과 친목을 쌓을 수 있는 네트워킹', color: 'yellow' }, { - content: '이 열려요. 자율적으로 참여하며 SOPT 활동을 더욱 유익하게 만들어 나갈 수 있어요.', + content: '이 열려요. 자율적으로 개설하고 참여할 수 있어요.', color: 'white', }, ], }, - { + [ActivityType.EVENTS]: { img: ImgEvent.src, navKor: '행사', navEng: 'Events', @@ -107,7 +106,7 @@ export const Activity: ActivityType[] = [ { content: '네트워킹', color: 'yellow' }, { content: '을 위한 다양한 행사를 기획해요. ', color: 'white' }, { content: '미디어팀', color: 'yellow' }, - { content: '에서는 SOPT의 활동과 관련된 ', color: 'white' }, + { content: '에서는 SOPT와 관련된 ', color: 'white' }, { content: '콘텐츠를 제작', color: 'yellow' }, { content: '하여 SOPT를 대내외적으로 알려요.', @@ -115,7 +114,7 @@ export const Activity: ActivityType[] = [ }, ], }, -]; +}; export const INTRO_CONTENT_LIST = [ { diff --git a/src/lib/types/main.ts b/src/lib/types/main.ts index 6d4f9534..8df9b79a 100644 --- a/src/lib/types/main.ts +++ b/src/lib/types/main.ts @@ -12,13 +12,48 @@ export type TextColorType = { color: 'yellow' | 'white'; }; -export interface ActivityType { +export enum ActivityType { + APPJAM = 'APPJAM', + SOPKATHON = 'SOPKATHON', + SOPTERM = 'SOPTERM', + STUDY = 'STUDY', + SEMINAR = 'SEMINAR', + EVENTS = 'EVENTS', +} + +export interface ActivityContentType { img: string; navKor: string; navEng: string; description: TextColorType[]; } +export const activity: ActivityTypeList[] = [ + { + value: ActivityType.APPJAM, + }, + { + value: ActivityType.SOPKATHON, + }, + { + value: ActivityType.SOPTERM, + }, + { + value: ActivityType.STUDY, + }, + { + value: ActivityType.SEMINAR, + }, + { + value: ActivityType.EVENTS, + }, +]; + +export type ActivityListType = Record; +export type ActivityTypeList = { + value: ActivityType; +}; + type KeywordType = { content: string; backgroundColor: string; diff --git a/src/views/MainPage/components/Activity/Card/style.ts b/src/views/MainPage/components/Activity/Card/style.ts index f3fe8953..cdc19a88 100644 --- a/src/views/MainPage/components/Activity/Card/style.ts +++ b/src/views/MainPage/components/Activity/Card/style.ts @@ -43,10 +43,9 @@ export const CardImage = styled(Image)` export const CardKorNav = styled.nav` display: inline-flex; - padding: 11.75px 30.43px; + padding: 10px 30px; justify-content: center; align-items: center; - gap: 5.83px; border-radius: 13.763px; border: 1.278px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.33); diff --git a/src/views/MainPage/components/Activity/MobileCard/index.tsx b/src/views/MainPage/components/Activity/MobileCard/index.tsx index 0fef0c3b..35956679 100644 --- a/src/views/MainPage/components/Activity/MobileCard/index.tsx +++ b/src/views/MainPage/components/Activity/MobileCard/index.tsx @@ -1,29 +1,80 @@ -import 'slick-carousel/slick/slick-theme.css'; -import 'slick-carousel/slick/slick.css'; -import { ReactComponent as IcArrowLeft } from '@src/assets/icons/ic_arrow_left.svg'; -import { ReactComponent as IcArrowRight } from '@src/assets/icons/ic_arrow_right.svg'; +import Image from 'next/image'; +import IcArrowLeft from '@src/assets/icons/ic_arrow_left.svg'; +import IcArrowRight from '@src/assets/icons/ic_arrow_right.svg'; +import useDrag from '@src/hooks/useDrag'; +import useInfiniteCarousel from '@src/hooks/useInfiniteCarousel'; import { Activity } from '@src/lib/constants/main'; +import { ActivityTypeList, activity as activityCarouselList } from '@src/lib/types/main'; import Card from '../Card'; import * as S from './style'; export default function MobileCard() { - const settings = { - dots: true, - infinite: true, - speed: 500, - slidesToShow: 1, - slidesToScroll: 1, - nextArrow: , - prevArrow: , - }; + const { dragRef, handleMouseDown, handleMouseMove, initDragging } = useDrag(); + const { + carouselRef, + infiniteCarouselList, + slideIndex, + handleSelectSlide, + handleCarouselSwipe, + handleTouchStart, + handleTouchEnd, + } = useInfiniteCarousel(activityCarouselList, '(-100% - 20px)'); return ( - - {Activity.map(({ img, navKor, navEng, description }) => { - return ( - - ); - })} - + + + {infiniteCarouselList.map(({ value }, index) => { + const { img, navKor, navEng, description } = Activity[value]; + return ( + + + 왼쪽 화살표 handleCarouselSwipe(-1)} + /> + + + + 오른쪽 화살표 handleCarouselSwipe(1)} + /> + + + ); + })} + + + + {[0, 1, 2, 3, 4, 5].map((index) => { + return ( + handleSelectSlide(index)} + /> + ); + })} + + + ); } diff --git a/src/views/MainPage/components/Activity/MobileCard/style.ts b/src/views/MainPage/components/Activity/MobileCard/style.ts index c6967a2f..6323f6ef 100644 --- a/src/views/MainPage/components/Activity/MobileCard/style.ts +++ b/src/views/MainPage/components/Activity/MobileCard/style.ts @@ -1,43 +1,100 @@ import styled from '@emotion/styled'; -import Slider from 'react-slick'; - -export const StyledSlider = styled(Slider)` - .slick-track { - margin-bottom: 10px; - } - .slick-slide > div { - display: flex; - justify-content: center; - align-items: center; - } - .slick-prev { - left: 6px; - z-index: 2; - } - .slick-next { - right: 6px; - z-index: 2; - } - .slick-dots li { - width: 0; - margin: 0px 7px; - } - .slick-dots li button { - ::before { - font-size: 7px; - color: #2d4c791a; - opacity: 1; - } + +export const Container = styled.section` + display: flex; + flex-direction: column; + gap: 12px; + overflow: hidden; +`; + +export const ButtonWrapper = styled.div` + width: 100%; +`; + +export const PartButtonList = styled.div` + display: flex; + flex-direction: row; + justify-content: center; + gap: 5px; +`; + +export const DotButton = styled.div<{ isSelected: boolean }>` + width: 7px; + height: 7px; + background-color: ${({ isSelected }) => (isSelected ? '#2D4C79' : '#2d4c791a')}; + border-radius: 50%; + + &:hover { + cursor: pointer; } - .slick-dots li.slick-active button { - ::before { - color: #2d4c79; - opacity: 1; - } + + @media (max-width: 428px) { + width: 4px; + height: 4px; + } +`; + +export const Carousel = styled.div` + display: flex; + column-gap: 20px; +`; + +export const Slide = styled.div` + display: flex; + flex-shrink: 0; + position: relative; + width: 100%; + align-items: center; + height: auto; + + justify-content: normal; + position: static; +`; + +export const Arrow = styled.div` + display: flex; + justify-content: center; + align-items: center; + margin: 0 0 0 1.5625vw; + + & > img:hover { + cursor: pointer; } - .slick-prev, - .slick-next { + + @media (max-width: 768px) { width: 26px; - height: 23px; + margin: 0 2.73vw 0 0; + } + + @media (max-width: 428px) { + margin: 0 2.72vw 0 0; + width: 15.293px; + & > img { + height: 24.138px; + } + } +`; + +export const LeftArrow = styled(Arrow)` + margin: 0 0 0 1.5625vw; + + @media (max-width: 768px) { + margin: 0 2.73vw 0 0; + } + + @media (max-width: 428px) { + margin: 0 2.72vw 0 0; + } +`; + +export const RightArrow = styled(Arrow)` + margin: 0 1.5625vw 0 0; + + @media (max-width: 768px) { + margin: 0 0 0 2.73vw; + } + + @media (max-width: 428px) { + margin: 0 0 0 2.72vw; } `; diff --git a/src/views/MainPage/components/Activity/index.tsx b/src/views/MainPage/components/Activity/index.tsx index 30bd9eb1..f2047b47 100644 --- a/src/views/MainPage/components/Activity/index.tsx +++ b/src/views/MainPage/components/Activity/index.tsx @@ -6,7 +6,7 @@ import MobileCard from './MobileCard'; import * as S from './style'; export default function CardHover() { - const isMobileSize = useIsMobile('428px'); + const isMobileSize = useIsMobile('768px'); return (
@@ -21,7 +21,7 @@ export default function CardHover() { ) : ( - {Activity.map(({ img, navKor, navEng, description }) => { + {Object.values(Activity).map(({ img, navKor, navEng, description }) => { return ( Date: Thu, 21 Dec 2023 12:43:10 +0900 Subject: [PATCH 07/10] =?UTF-8?q?chore:=20=EB=89=B4=EC=8A=A4=20=EC=84=B9?= =?UTF-8?q?=EC=85=98=EC=97=90=20id=20=EB=8B=AC=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/MainPage/components/BottomLayout/index.tsx | 7 ++++--- src/views/MainPage/components/RecentNews/index.tsx | 4 ++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/views/MainPage/components/BottomLayout/index.tsx b/src/views/MainPage/components/BottomLayout/index.tsx index acb73d50..9c482336 100644 --- a/src/views/MainPage/components/BottomLayout/index.tsx +++ b/src/views/MainPage/components/BottomLayout/index.tsx @@ -2,6 +2,8 @@ import { useScroll, useTransform } from 'framer-motion'; import { RefObject, useRef } from 'react'; 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 * as S from './style'; const MenuList = [ @@ -51,9 +53,8 @@ function BottomLayout() {
Reviews
-
- News -
+ + ); diff --git a/src/views/MainPage/components/RecentNews/index.tsx b/src/views/MainPage/components/RecentNews/index.tsx index 621547ce..dd38ecc9 100644 --- a/src/views/MainPage/components/RecentNews/index.tsx +++ b/src/views/MainPage/components/RecentNews/index.tsx @@ -4,7 +4,7 @@ import * as S from './style'; export default function RecentNews() { return ( - <> +
최신소식 SOPT의 최신 소식이 궁금하다면! @@ -24,6 +24,6 @@ export default function RecentNews() { 더 많은 소식이 궁금하다면 - +
); } From 5fc2c824cd58258b67c837bca8264767531abc0c Mon Sep 17 00:00:00 2001 From: solar3070 <> Date: Thu, 21 Dec 2023 12:51:49 +0900 Subject: [PATCH 08/10] =?UTF-8?q?feat:=20=EC=B5=9C=EA=B7=BC=20=EB=89=B4?= =?UTF-8?q?=EC=8A=A4=EC=97=90=20ref=20=EC=A0=84=EB=8B=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/MainPage/components/BottomLayout/index.tsx | 2 +- src/views/MainPage/components/RecentNews/index.tsx | 7 +++++-- src/views/MainPage/components/RecruitMessage/style.ts | 1 - 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/views/MainPage/components/BottomLayout/index.tsx b/src/views/MainPage/components/BottomLayout/index.tsx index 9c482336..3430d8b8 100644 --- a/src/views/MainPage/components/BottomLayout/index.tsx +++ b/src/views/MainPage/components/BottomLayout/index.tsx @@ -53,7 +53,7 @@ function BottomLayout() {
Reviews
- + diff --git a/src/views/MainPage/components/RecentNews/index.tsx b/src/views/MainPage/components/RecentNews/index.tsx index dd38ecc9..a4c4fceb 100644 --- a/src/views/MainPage/components/RecentNews/index.tsx +++ b/src/views/MainPage/components/RecentNews/index.tsx @@ -1,10 +1,11 @@ +import { forwardRef } from 'react'; import { RecentNewsList } from '@src/lib/constants/main'; import Card from './Card'; import * as S from './style'; -export default function RecentNews() { +function RecentNews(_props: unknown, ref: React.Ref) { return ( -
+
최신소식 SOPT의 최신 소식이 궁금하다면! @@ -27,3 +28,5 @@ export default function RecentNews() {
); } + +export default forwardRef(RecentNews); diff --git a/src/views/MainPage/components/RecruitMessage/style.ts b/src/views/MainPage/components/RecruitMessage/style.ts index 1ba3d1e2..ef27a0ed 100644 --- a/src/views/MainPage/components/RecruitMessage/style.ts +++ b/src/views/MainPage/components/RecruitMessage/style.ts @@ -2,7 +2,6 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; export const Background = styled.section` - background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #090b12 6.18%, #090b12 98.83%); height: 1100px; display: flex; From dcdb2ad2502e1efb219e93320ad1480e49f45be3 Mon Sep 17 00:00:00 2001 From: solar3070 <> Date: Thu, 21 Dec 2023 13:01:41 +0900 Subject: [PATCH 09/10] =?UTF-8?q?feat:=20MotionConfig=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/_app.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 7d6b5d45..159cf956 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,4 +1,6 @@ import * as amplitude from '@amplitude/analytics-browser'; +import isValidProp from '@emotion/is-prop-valid'; +import { MotionConfig } from 'framer-motion'; import type { AppProps } from 'next/app'; import Head from 'next/head'; import { useRouter } from 'next/router'; @@ -84,7 +86,9 @@ function MyApp({ Component, pageProps }: AppProps) { - + + + From f7617ff0040cb047fc7730ee30187d8f0882c5f9 Mon Sep 17 00:00:00 2001 From: solar3070 <> Date: Thu, 21 Dec 2023 13:08:11 +0900 Subject: [PATCH 10/10] =?UTF-8?q?chore:=20emotion=20prop=20=ED=8C=A8?= =?UTF-8?q?=ED=82=A4=EC=A7=80=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index f7d524a1..ab62ec82 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ }, "dependencies": { "@amplitude/analytics-browser": "^2.3.0", + "@emotion/is-prop-valid": "^1.2.1", "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", "@sopt-makers/colors": "^2.2.0",