기능추가 : 4주차 플젝 메인페이지 애니메이션 구현 (1)

📍 오늘 도전할 기능

프로젝트를 소개하는 메인페이지 디자인은 사실 가장 늦게 도출되었다.
노션처럼 [ 기능 + 간단한 소개 + gif ] 기능을 컴팩트하게 표현하는 건 어렵지않다고 느꼈기 때문이다.
텍스트 몇 자랑 gif 넣지 뭐 ..  라고 생각했으나 결과물은 꽤 빈약해보였다 🤔 😨
진짜 안일한 생각이었다 !!
개인적으로 아쉽기도 하고, 스크롤 애니메이션 공부도 할겸 메인페이지 전체를 수정하게 되었다.
그리고 프로젝트를 더 적극적으로 소개하려고 한다 !! 메인페이지는 첫인상을 좌우하니까 중요하다 !!

 

📎 참고 레퍼런스

 

UI 컴포넌트가 많은 우리 프로젝트랑 잘 맞겠단 생각을 했다 !! 😊

스크롤 이벤트로 인해 스크린 전체의 이미지가 부드럽게 바뀌는 것도 마음에 들었고,

특히 저 서서히 튀어나오는한 애니메이션 ...! 꼭 구현하고 싶었다 ㅎㅎ

 

•  Bare-minimum Requirements

✔ 스크롤 이벤트 : up & down 에 따라 위치 이동
✔ 텍스트, 컴포넌트 transition 애니메이션 추가
✔ 사용자 후기 볼 수 있는 < , > 버튼 구현
✔ 체험하기 버튼, Footer 디자인

 

•  Advanced Requirements

✔ 백그라운드 동적 애니메이션 ? (현재는 어떻게 구현하는 지 감이 안옴)

 

 

📌 스크롤 이벤트 : up & down 에 따라 위치 이동

고려해야하는 조건들
✔ 마우스 휠을 내렸을 때 다음 섹션 element로 이동해야한다.
✔ 마우스 휠을 올렸을 때 이전 섹션 element로 이동해야한다.
✔ 스크롤을 직접 잡고 맨 위로 올렸을 때 현재 element로 상태가 초기화되어야한다.
✔ 스크롤을 직접 잡고 맨 아래로 내렸을 때 현재 element로 상태가 변경되어야한다.
✔ 브라우저의 크기가 변했을 때 섹션 element의 크기가 대응되어야한다.

 

💾  중간 과정 렌더링

 

 

스크롤 이벤트는 최소한으로, (휠 움직임 1번당 이벤트 발생 1번) 1:1 대응이 가능하도록 설계하였다.

콘솔창에 스크롤을 밑으로 내릴 땐 scroll down 이, 위로 올릴 땐 scroll up 이 출력되는 걸 볼 수 있다.

스크롤을 직접 잡고 옮겼을 땐 시작과 끝 부분만 인식하게 하였다. (그 외엔 의미없다고 판단)

 

 

리사이즈 이벤트 또한 re-rendering 을 최소화하는 방향을 설계했다.

리사이즈된 view에 맞춰 섹션의 높이가 조절되는 걸 볼 수 있다.

구현하면서 느낀건데, 리사이즈이벤트에 scrollBy 이벤트를 붙여야하나 고민이 된다.

(현재 리사이즈이벤트는 custom Hook 으로 스크롤이벤트와 로직이 분리되어있음)

(이벤트를 붙이게 되면 custom Hook을 해체해야할 수도 있 ... 다)

 

 

💾  중간 과정 코드

 

// view height 구하는 custom Hook

export function useHeight() {
  const [docsHeight, setDocsHeight] = useState<number>(window.innerHeight);

  useEffect(() => {
    let mounted = true; // 컴포넌트가 마운트되었을 때
    let timer: any = null; // useEffect 안에서 setTimeout이 한번만 동작하도록 제한
    window.addEventListener('resize', () => {
      if (mounted) {
        // timer라는 변수에 비동기 함수를 재할당하는 방식으로 이벤트 호출을 제한한다
        clearTimeout(timer);
        timer = setTimeout(() => {
          console.log('리사이즈 이벤트 시작');
          setDocsHeight(window.innerHeight);
        }, 300);
      }
    });
    // useEffect에서 return function은
    // component가 unmount될 때 실행되는 callback function이다!
    return () => {
      // console.log('리사이즈 이벤트 종료');
      mounted = false; // 컴포넌트가 언마운트되었을 때
    };
  });
  return {
    docsHeight,
  };
}

 

// scroll event 대응 로직

const { docsHeight } = useHeight();
const [currSectIdx, setCurrSectIdx] = useState<number>(0);
const [scrollY, setScrollY] = useState<number>(0);

useEffect(() => {
  const elementsArray = document.querySelectorAll('.mainpage-section');
  let mounted = true;
  let timer: any = null;
  window.addEventListener('scroll', () => {
    if (mounted) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        // scroll top
        if (window.pageYOffset === 0) {
          console.log('scroll top!');
          setCurrSectIdx(0);
        }
        // scroll bottom
        else if (
          window.pageYOffset ===
          (elementsArray.length - 1) * docsHeight
        ) {
          console.log('scroll bottom!');
          setCurrSectIdx(elementsArray.length - 1);
        }
        // scroll down
        else if (
          window.pageYOffset &&
          currSectIdx * docsHeight < window.pageYOffset &&
          window.pageYOffset < (currSectIdx + 1) * docsHeight
        ) {
          console.log('scroll down');
          setCurrSectIdx((prev) => {
            const curr = prev + 1;
            if (elementsArray !== undefined) {
              window.scrollBy({
                top: elementsArray[curr].getBoundingClientRect().top,
                behavior: 'smooth',
              });
            }
            return curr;
          });
        }
        // scroll up
        else if (
          window.pageYOffset &&
          window.pageYOffset < currSectIdx * docsHeight
        ) {
          console.log('scroll up');
          setCurrSectIdx((curr) => {
            const prev = curr - 1;
            if (elementsArray !== undefined) {
              window.scrollBy({
                top: elementsArray[prev].getBoundingClientRect().top,
                behavior: 'smooth',
              });
            }
            return prev;
          });
        }
        setScrollY(window.pageYOffset);
      }, 100);
    }
  });
  return () => {
    mounted = false;
  };
}, [scrollY]);