[Team Project] Bid Panda ep.10

✶ 항해99 16기 3조
팀 프로젝트 Bid Panda의 FE 개발일지

Issue ▸

UI UX를 위해 개발한 스플래쉬 페이지가 Main 페이지에 설치 되었는데, 매번 렌더링 될 때 마다 작동 되어, 사용자 편의성이 하락하는 문제가 발생.

Solve :

첫 렌더링에, isIn이라는 key가진 임의의 데이터를 Session Storage에 set 하게 하고, 그 이후에는 isIn이 있는 동안 (유저가 브라우저나 탭을 종료하지 않을 동안) 스플래쉬 컴포넌트가 보이지 않도록 수정.

useEffect(() => {
    sessionStorage.setItem("isIn", "true");
    if (showSplash) {
      const timer = setTimeout(() => {
        setShowSplash(false);
      }, 2000);
      clearTimeout(timer);
    }
  }, []);

( ... )

{showSplash && !isIn ? (
          <Splash />
        ) : (
          <>
            <div className="py-1">
  
  ( ... )