230126_TIL

로그인 유무에 따른 Header 변경

• Firebase를 사용하여 로그인, 로그아웃 기능을 만들었고, 그에 따른 로그인 상태에 따라 Header를 바꿔보았습니다.

export default function Header() {
  const [isOpenModal, setOpenModal] = useState<boolean>(false);
  const authService = getAuth();
  const uid = authService.currentUser?.uid;
  const [authUser, setAuthUser] = useState(null);
  const [login, setLogin] = useState(false);

  useEffect(() => {
    const listen = onAuthStateChanged(auth, (user) => {
      if (user) {
        setAuthUser(user);
      } else {
        setAuthUser(null);
      }
    });
    return () => {
      listen();
    };
  }, []);

  const logout = () => {
    if (login === true) {
      return signOut(auth).then(() => {
        setLogin(true);
        alert("로그아웃 성공 !");
      });
    } else {
      return signOut(auth).catch((error) => {
        alert("로그아웃 실패..");
      });
    }
  };

Firestore에 데이터 만들기 및 불러오기

// Create API
// comments 라는 이름의 collection에 객체 형태의 Document를 신규 등록
addDoc(collection(dbService, "comments"), {
      text: comment.value,
      createdAt: Date.now(),
      creatorId: uid,
      profileImg: photoURL,
      nickname: displayName,
    });

// Read API
// comments 라는 collection안에서 데이터 불러올 때 doc 객체 내에 createdAt 값을 내림차순으로 가져오는 쿼리 정의
const q = query(
    collection(dbService, "comments"),
    orderBy("createdAt", "desc")
  );

// query 조건에 맞는 documents 데이터를 배열로 받아오기
  const querySnapshot = await getDocs(q);

  // doc.id는 DB가 자체적으로 생성하는 값으로, id도 함께 포함시키기 위해 객체 재구성
  querySnapshot.forEach((doc) => {
    const commentObj = {
      id: doc.id,
      ...doc.data(),
    };
    cmtObjList.push(commentObj);
  });