Preview

Screen Recording 2023-01-16 at 1.15.15 AM.mov

소개

왓챠 연말결산은 왓챠의 마케팅 이벤트로 한 해동안 왓챠를 이용한 유저들의 유의미한 데이터를 뽑아 추억을 되돌아 볼 수 있어요. 그리고 새로운 프로모션 이벤트를 보여주고 SNS로 공유시켜요.

제작 기간

2022년 12월 (약 한 달)

맡은 포지션

• 웹, 앱을 포괄하는 화면 및 기능 구현 (프론트엔드)

기술 스택

• next js

• typescript

고민했던 것

• 애니메이션 발생 시점

  • 첫 화면마다 부드러운 애니메이션이 들어가야 함.
  • 각 화면마다 만든 컴포넌트에 들어갈 hook을 제작하기로 함. hook에서 판단할 요소 2가지와 조건에 맞을 때 (처음으로 화면이 보여질 때) 발생시킬 custom events 제작.
    • IntersectionObserver로 지금 화면이 보이고 있는지를 판단.
    • 처음 보는지를 boolean 값으로 판단.
    • 처음 보인 화면의 경우 dispatchEvent하고, 해당 이벤트는 callback 함수를 실행함.

  // addViewedCallback useEffect 예시
  useEffect(() => {
    let haveBeenViewed = false;
  
    const io = new IntersectionObserver(entries => {
      if (!ref.current) {
        throw new Error("Ref should not be null");
      }
  
      if (haveBeenViewed) {
        return;
      }
  
      const isVisible = !!entries.find(
        entry => entry.isIntersecting && entry.target.id === ref.current?.id,
      );
  
      if (!isVisible) {
        return;
      }
  
      haveBeenViewed = true;
      ref.current.dispatchEvent(onViewEvent);
    });
  
    if (ref.current) {
      io.observe(ref.current);
    }
  
    return () => {
      io.disconnect();
    };
  }, []);
  

좋은 점

• 하나의 서비스를 완성시키기 위해 라이브러리 채택부터 배포까지 프로세스를 겪은 점.
• 백엔드 개발자 1명, 디자이너 1명, 프론트엔드 개발자 1명으로 구성된 팀에서 온전히 프론트엔드 개발자로서 책임을 다할 수 있던 것.
  • 각 포지션에서 자기가 할 수 있는 부분은 최대한 가져가려고 노력하는 협업 경험을 가짐.