TIL 02.23 - 최종 프로젝트 3주차 비로그인시...

비로그인시 홈 화면 조정

 

const [init, setInit] = useState(false);
  // 처음에는 false이고 나중에 사용자 존재 판명이 모두 끝났을 때 true를 통해 해당 화면을 render
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  useEffect(() => {
    authService.onAuthStateChanged((user) => {
      // user 판명을 듣고
      if (user) {
        // 있으면
        setIsLoggedIn(true); // 로그인 됨
      } else {
        setIsLoggedIn(false); // 로그인 안됨
      }
      setInit(true); // user 판명 끝
    });
  }, []);
  return (
    <FullScreen>
      <MocoChat />
      <HomeBanner />
      <MainBackground>
      {init ? (
        <>
          <HomeGuideText isLoggedIn={isLoggedIn} currentUser={currentUser} />
          <RecommendListContainer>
            <RecommendListCardBox>
              {data?.slice(0, 3).map((item, idx) => (
                <CardSection 
                  key={idx}
                  item={item}
                />
              ))}
            </RecommendListCardBox>
          </RecommendListContainer>
          <HomeMeetingList
            isLoggedIn={isLoggedIn}
            recommendTechList={recommendTechList}
            recommendTimeList={recommendTimeList}
            recommendLocationList={recommendLocationList}
          />
        </>
      ) : (
        <>
         ...
        </>
      )}
      <HomeNewMeetingList data={data} />
      <HomeAllBtn />
      </MainBackground>
      {/* 신규 유저면 모달 오픈 */}
      <Modal open={isModalOpen} centered={true} closable={false} footer={false}>
        <AddInfoModal handleModalClose={handleModalClose} />
      </Modal>
    </FullScreen>
  );

const HomeMeetingList = ({
  isLoggedIn,
  recommendTechList,
  recommendTimeList,
  recommendLocationList,
}) => {
  // 로그인 안 됐을 때 리스트
  const blurList = [1, 2, 3, 4];
  return (
    <MeetingArea>
      {isLoggedIn ? (
        <>
          <TechAndTimeMeetingArea>
            <TechStackMeeting recommendTechList={recommendTechList} />
          </TechAndTimeMeetingArea>
          <TimeMeeting recommendTimeList={recommendTimeList} />
          <LocationMeeting recommendLocationList={recommendLocationList} />
        </>
      ) : (
        <>
          <HomeBlurList blurList={blurList} />
        </>
      )}
    </MeetingArea>
  );
};

 

참고자료 :

https://goforit.tistory.com/78

20210404 React and Firebase03 계정 생성, 로그인, Auth, createuserwithemailandpassword, setPersistence, onAuthStateChanged