메인페이지 캐러셀, 뷰포트 애니메이션 구현#263

client/package.json

@@ -3,6 +3,7 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
+ "@egjs/flicking-plugins": "^4.7.1",
  "@egjs/react-flicking": "^4.11.0",
  "@react-oauth/google": "^0.11.1",
  "@reduxjs/toolkit": "^1.9.5",

client/src/components/UploadPage/CourseUpload.js

@@ -17,7 +17,6 @@ import { useToken } from "../../hooks/useToken";
 
 const CourseUpload = () => {
  const isDark = useSelector(state=>state.uiSetting.isDark);
- const token = useSelector((state) => state.loginInfo.accessToken);
  const imgRef = useRef();
  const videoRef = useRef();
  const navigate = useNavigate();

client/src/components/mainPageItems/Carousel.js

@@ -1,25 +1,49 @@
 import React from 'react';
-import Flicking, { MoveEvent, WillChangeEvent } from "@egjs/react-flicking";
 import { styled } from 'styled-components';
 import carousel1 from '../../assets/images/carousels/carousel1.png';
 import carousel2 from '../../assets/images/carousels/carousel2.png';
 import carousel3 from '../../assets/images/carousels/carousel3.png';
+import { AutoPlay } from "@egjs/flicking-plugins";
+import Flicking, { ViewportSlot, MoveEvent, WillChangeEvent, Viewport } from "@egjs/react-flicking";
+import { Arrow } from "@egjs/flicking-plugins";
+import "@egjs/flicking-plugins/dist/arrow.css";
+import carouselPrev from '../../assets/images/icons/arrow/carouselPrev.svg';
+import carouselNext from '../../assets/images/icons/arrow/carouselNext.svg';
 
 const CarouselContainer = styled.div`
- height: 600px;
+ max-height: 450px;
 `
 const CarouselItemContainer = styled.div`
 `
 const CarouselImg = styled.img`
- width: 100%;
- height: 100%;
- object-fit: cover;
+ width: 95%;
+ height: 95%;
+ object-fit: contain;
+`
+const CarouselArrowButton = styled.span`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ 
+ &.flicking-arrow-prev {
+ color: red;
+ }
 `
 
 const Carousel = () => {
+ const plugins = [ new AutoPlay({ 
+ duration: 1500, 
+ animationDuration: 2000,
+ direction: "NEXT", 
+ stopOnHover: true }),
+ new Arrow({}),
+ ];
+
  return (
  <CarouselContainer>
  <Flicking
+ duration={2000}
  viewportTag='div'
  cameraTag='div'
  cameraClass=""
@@ -29,7 +53,10 @@ const Carousel = () => {
  onMove={(e) => {}}
  onWillChange={(e) => {}}
  horizontal={true}
- circular= {true}>
+ circular= {true}
+ moveType='snap'
+ threshold={50}
+ plugins={plugins}>
  <CarouselItemContainer>
  <CarouselImg src={carousel1}/>
  </CarouselItemContainer>
@@ -39,6 +66,10 @@ const Carousel = () => {
  <CarouselItemContainer>
  <CarouselImg src={carousel3}/>
  </CarouselItemContainer>
+ <ViewportSlot>
+ <CarouselArrowButton className="flicking-arrow-prev is-thin"></CarouselArrowButton>
+ <CarouselArrowButton className="flicking-arrow-next is-thin"></CarouselArrowButton>
+ </ViewportSlot>
  </Flicking>
  </CarouselContainer>
  );

client/src/components/mainPageItems/MainSecondPageItems.js

@@ -18,6 +18,17 @@ const frameInLeftToRightAnimation = keyframes`
  }
 `;
 
+const frameInRightToLeftAnimation = keyframes`
+ 0% {
+ opacity: 0;
+ transform: translateX(20%);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateX(0%);
+ }
+`
+
 const MainPageSecontItemContainer = styled.section`
  padding: ${globalTokens.Spacing32.value}px;
  border-radius: ${globalTokens.BigRadius.value}px;
@@ -26,19 +37,65 @@ const MainPageSecontItemContainer = styled.section`
  justify-content: center;
  align-items: center;
 `
-
+const SecondPageTitleTypo = styled(MainPageTitleTypo)`
+ &.second-frame-in {
+ animation: ${frameInLeftToRightAnimation} 1.5s;
+ }
+ &.second-frame-out {
+ opacity: 0;
+ }
+`
+const SecondPageSubTitleTypo = styled(MainPageSubTitleTypo)`
+ &.second-frame-in {
+ animation: ${frameInRightToLeftAnimation} 1.5s;
+ }
+ &.second-frame-out {
+ opacity: 0;
+ }
+`
 
 export const MainSecondPageItems = () => {
  const isDark = useSelector(state=>state.uiSetting.isDark);
-
+ const ref = useRef();
+ const [ isInTitleViewport, setIsInTitleViewport ] = useState(false);
+ const [ isInSubTitleViewport, setIsInSubTitleViewport ] = useState(false);
+
+ useEffect(()=>{
+ if(!ref.current) return;
+ const callback = (entries) => {
+ entries.forEach((entry)=>{
+ if(entry.isIntersecting){
+ setIsInTitleViewport(true);
+ setTimeout(()=>{
+ setIsInSubTitleViewport(true)
+ },100);
+ } else {
+ setIsInTitleViewport(false);
+ setIsInSubTitleViewport(false);
+ }
+ })
+ }
+ const options = { root: null, rootMargin: "0px", threshold: 0 };
+ const observer = new IntersectionObserver(callback, options);
+ observer.observe(ref.current); // 요소 관찰 시작
+
+ return () => {
+ observer.disconnect(); // 컴포넌트 언마운트 시 관찰 중단
+ }
+ },[])
  return (
  <MainPageSecontItemContainer>
- <MainPageTitleTypo isDark={isDark}>
+ <SecondPageTitleTypo 
+ isDark={isDark} 
+ className={isInTitleViewport?'second-frame-in':'second-frame-out'}
+ ref={ref}>
  Growth & Rewards
- </MainPageTitleTypo>
- <MainPageSubTitleTypo isDark={isDark}>
+ </SecondPageTitleTypo>
+ <SecondPageSubTitleTypo 
+ isDark={isDark}
+ className={isInSubTitleViewport?'second-frame-in':'second-frame-out'}>
  성장은 기본, 영상으로 수익 창출까지!
- </MainPageSubTitleTypo>
+ </SecondPageSubTitleTypo>
  <Carousel/>
  </MainPageSecontItemContainer>
  );

client/src/index.css

@@ -42,4 +42,8 @@ code {
 }
 ::-webkit-scrollbar {
  width: 0px
+}
+.flicking-arrow-prev,
+.flicking-arrow-next {
+ color: red;
 }

client/src/pages/contents/CourseUploadPage.js

@@ -3,7 +3,6 @@ import { useSelector } from "react-redux";
 import { PageContainer } from "../../atoms/layouts/PageContainer";
 import CourseUpload from "../../components/UploadPage/CourseUpload";
 import tokens from '../../styles/tokens.json';
-import { useSelector } from "react-redux";
 import { Heading5Typo } from "../../atoms/typographys/Typographys";
 
 const globalTokens = tokens.global;