filcking 컨테이너 사이즈 조정

codestates-seb · Sep 19, 2023 · c8d2734 · c8d2734
1 parent ca92e6c
commit c8d2734
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 81 deletions.
diff --git 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
@@ -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'}>
                 문제를 풀면서, 포인트도 얻어봐요!
             </MainFourthPageSubTitleTypo>
+            <MainPageStartButton
+                isDark={isDark} 
+                className={isInButtonVieport?'frame-in' : 'frame-out'}
+                onClick={handleStartButtonClick}>시작하기</MainPageStartButton>
         </MainPageFourthItemContainer>
     );
 };

diff --git 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
@@ -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 (
     <MainPageContainer ref={outerRef}>
       <LightContainer isDark={isDark}>