diff --git a/client/src/components/mainPageItems/Carousel.js b/client/src/components/mainPageItems/Carousel.js index d725d88a..05df26a5 100644 --- a/client/src/components/mainPageItems/Carousel.js +++ b/client/src/components/mainPageItems/Carousel.js @@ -9,6 +9,12 @@ import { Arrow } from "@egjs/flicking-plugins"; import "@egjs/flicking-plugins/dist/arrow.css"; const CarouselItemContainer = styled.div` + min-width: 400px; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; ` const CarouselImg = styled.img` width: 95%; diff --git a/client/src/components/mainPageItems/MainFourthPageItems.js b/client/src/components/mainPageItems/MainFourthPageItems.js index 6b451a10..447a7736 100644 --- a/client/src/components/mainPageItems/MainFourthPageItems.js +++ b/client/src/components/mainPageItems/MainFourthPageItems.js @@ -2,8 +2,9 @@ import React, { useEffect, useRef, useState } from 'react'; import { styled } from 'styled-components'; import tokens from '../../styles/tokens.json'; import { useSelector } from 'react-redux'; -import { MainPageSubTitleTypo, MainPageTitleTypo } from './MainPageItems.style'; +import { MainPageStartButton, MainPageSubTitleTypo, MainPageTitleTypo } from './MainPageItems.style'; import { frameInBottomToTopAnimation, frameInTopToBottomAnimation } from './frameAnimation'; +import { useNavigate } from 'react-router-dom'; const globalTokens = tokens.global; @@ -33,11 +34,16 @@ const MainFourthPageSubTitleTypo = styled(MainPageSubTitleTypo)` ` export const MainFourthPageItems = () => { + const navigate = useNavigate(); const isDark = useSelector(state=>state.uiSetting.isDark); const ref = useRef(); const [ isInTitleViewport, setIsInTitleViewport ] = useState(false); const [ isInSubTitleViewport, setIsInSubTitleViewport ] = useState(false); + const [ isInButtonVieport, setIsInButtonViewport ] = useState(false); + const handleStartButtonClick = () => { + navigate('/lecture'); + } useEffect(()=>{ if(!ref.current) return; const callback = (entries) => { @@ -46,10 +52,14 @@ export const MainFourthPageItems = () => { setIsInTitleViewport(true); setTimeout(()=>{ setIsInSubTitleViewport(true); + setTimeout(()=>{ + setIsInButtonViewport(true); + },500) },500) } else { setIsInTitleViewport(false); setIsInSubTitleViewport(false); + setIsInButtonViewport(false); } }) } @@ -75,6 +85,10 @@ export const MainFourthPageItems = () => { className={isInSubTitleViewport?'fourth-frame-in':'fourth-frame-out'}> 문제를 풀면서, 포인트도 얻어봐요! + 시작하기 ); }; diff --git a/client/src/components/mainPageItems/MainSecondPageItems.js b/client/src/components/mainPageItems/MainSecondPageItems.js index fed8a937..26927266 100644 --- a/client/src/components/mainPageItems/MainSecondPageItems.js +++ b/client/src/components/mainPageItems/MainSecondPageItems.js @@ -35,7 +35,7 @@ const SecondPageSubTitleTypo = styled(MainPageSubTitleTypo)` const SecondPageCarouselContainer = styled.div` max-width: 1000px; - max-height: 60vh; + max-height: 65vh; &.second-frame-in { animation: ${frameInBottomToTopAnimation} 1.5s; } diff --git a/client/src/pages/contents/MainPage.js b/client/src/pages/contents/MainPage.js index 5bda7bb7..905d454f 100644 --- a/client/src/pages/contents/MainPage.js +++ b/client/src/pages/contents/MainPage.js @@ -18,7 +18,6 @@ const MainPage = () => { const isDark = useSelector((state) => state.uiSetting.isDark); const isLogin = useSelector((state) => state.loginInfo.isLogin); const outerRef = useRef(); - const dispatch = useDispatch(); const navigate = useNavigate(); //로그인한 상태이면 lecture page로 이동 @@ -28,84 +27,6 @@ const MainPage = () => { } }); - // useEffect(() => { - // const wheelHandler = (e) => { - // e.preventDefault(); - // const { deltaY } = e; - // const { scrollTop } = outerRef.current; - // const pageHeight = window.innerHeight; - - // if (deltaY > 0) { - // //스크롤 내릴 때 - // if (scrollTop >= 0 && scrollTop < pageHeight) { - // //현재 1페이지 - // outerRef.current.scrollTo({ - // top: pageHeight, - // left: 0, - // behavior: "smooth", - // }); - // } else if (scrollTop >= pageHeight && scrollTop < pageHeight * 2) { - // //현재 2페이지 - // outerRef.current.scrollTo({ - // top: pageHeight * 2, - // left: 0, - // behavior: "smooth", - // }); - // } else if (scrollTop >= pageHeight * 2 && scrollTop < pageHeight * 3) { - // //현재 3페이지 - // outerRef.current.scrollTo({ - // top: pageHeight * 3, - // left: 0, - // behavior: "smooth", - // }); - // } else { - // //현재 4페이지 - // outerRef.current.scrollTo({ - // top: pageHeight * 3, - // left: 0, - // behavior: "smooth", - // }); - // } - // } else { - // //스크롤 올릴 때 - // if (scrollTop >= 0 && scrollTop < pageHeight) { - // outerRef.current.scrollTo({ - // //현재 1페이지 - // top: 0, - // left: 0, - // behavior: "smooth", - // }); - // } else if (scrollTop >= pageHeight && scrollTop < pageHeight * 2) { - // outerRef.current.scrollTo({ - // //현재 2페이지 - // top: 0, - // left: 0, - // behavior: "smooth", - // }); - // } else if (scrollTop >= pageHeight * 2 && scrollTop < pageHeight * 3) { - // outerRef.current.scrollTo({ - // //현재 3페이지 - // top: pageHeight, - // left: 0, - // behavior: "smooth", - // }); - // } else { - // outerRef.current.scrollTo({ - // //현재 4페이지 - // top: pageHeight * 2, - // left: 0, - // behavior: "smooth", - // }); - // } - // } - // }; - // const outerRefCurrent = outerRef.current; - // outerRefCurrent.addEventListener("wheel", wheelHandler); - // return () => { - // outerRefCurrent.removeEventListener("wheel", wheelHandler); - // }; - // }, []); - return (