From c8d2734681c584362c4a4850c415272847720a99 Mon Sep 17 00:00:00 2001
From: HyerimKimm <50258232+HyerimKimm@users.noreply.github.com>
Date: Tue, 19 Sep 2023 10:28:17 +0900
Subject: [PATCH] =?UTF-8?q?filcking=20=EC=BB=A8=ED=85=8C=EC=9D=B4=EB=84=88?=
=?UTF-8?q?=20=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/components/mainPageItems/Carousel.js | 6 ++
.../mainPageItems/MainFourthPageItems.js | 16 +++-
.../mainPageItems/MainSecondPageItems.js | 2 +-
client/src/pages/contents/MainPage.js | 79 -------------------
4 files changed, 22 insertions(+), 81 deletions(-)
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 (