TIL 03.03 - 최종 프로젝트 4주차

알림 기능 만들기

알림 기능이 필요한 경우 : 

1) 내가 신청한 모임에 참여 수락 되었을 때

2) 내가 개설한 모임에 참여신청이 들어왔을 때

 

1. teamPage 데이터 가져오기

useEffect(() => {
    const teamPageCollectionRef = collection(db, 'teamPage');
    const q = query(teamPageCollectionRef);
    const getTeamPage = onSnapshot(q, (snapshot) => {
      const teamPageData = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      setTeamPage(teamPageData);
    });
    return getTeamPage;
  }, []);

2. teamPage.teamMember에서 currentUser가 포함된 teamPage 데이터 -> 위 1번 경우에 해당

let myAppliedMeeting = [];
  const myApplyMeeting = teamPage.forEach((item) => {
    item.teamMember.forEach((member) => {
      if (member.uid === authService?.currentUser?.uid) {
        myAppliedMeeting.push(item);
        return false;
      }
    });
  });

3. teamPage.teamLeader에서 currentUser가 포함된 teamPage 데이터 -> 위 2번 경우에 해당

const teamLeaderList = teamPage.filter((item) =>
    item.teamLeader?.uid?.includes(authService?.currentUser?.uid),
  );

--->

전체 코드 <NotiBadge />

import { useEffect, useState } from 'react';
import { collection, onSnapshot, query } from 'firebase/firestore';
import { authService, db } from '../../../common/firebase';
import NotiMessage from './NotiMessage';
import styled from '@emotion/styled';
import LeaderGotMessage from './LeaderGotMessage';

const NotiBadge = () => {
  const [teamPage, setTeamPage] = useState([]);

  // 팀페이지 팀멤버에서 유저가 포함된 팀페이지 데이터
  let myAppliedMeeting = [];
  const myApplyMeeting = teamPage.forEach((item) => {
    item.teamMember.forEach((member) => {
      if (member.uid === authService?.currentUser?.uid) {
        myAppliedMeeting.push(item);
        return false;
      }
    });
  });
  // console.log(myAppliedMeeting);

  // teamPage.teamLeader에서 currentUser가 포함된 teamPage 데이터
  const teamLeaderList = teamPage.filter((item) =>
    item.teamLeader?.uid?.includes(authService?.currentUser?.uid),
  );
  // console.log('팀리더 데이터', teamLeaderList);
  // console.log('팀리더 멤버데이터', teamLeaderList[1]?.teamMember);

  // teamPage 데이터
  useEffect(() => {
    const teamPageCollectionRef = collection(db, 'teamPage');
    const q = query(teamPageCollectionRef);
    const getTeamPage = onSnapshot(q, (snapshot) => {
      const teamPageData = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      setTeamPage(teamPageData);
    });
    return getTeamPage;
  }, []);
  // console.log(teamPage);

  return (
    <Container>
      <Box1>
        {myAppliedMeeting.map((item, idx) => (
          <NotiMessage key={idx} item={item} />
        ))}
      </Box1>
      <Box2>
        {teamLeaderList.map((item, idx) => (
          <LeaderGotMessage 
            key={idx}
            item={item}
          />
        ))}
      </Box2>
    </Container>
  );
};

export default NotiBadge;

const Container = styled.div``;
const Box1 = styled.div`
  border-bottom: 0.1px solid gray;
`;
const Box2 = styled.div`
  border-bottom: 0.1px solid gray;
`;

 

<NotiMessage />

import styled from '@emotion/styled';
import { authService } from '../../../common/firebase';

const NotiMessage = ({ item }) => {
  const { teamMember, teamLeader } = item;

  return (
    <Box>
      {teamMember
        .filter((team) => team.uid === authService?.currentUser?.uid)
        .map((member, idx) => (
          <div key={idx}>
            {member.isWait ? (
              ''
            ) : (
              <div>{teamLeader.nickName}님의 모임에 참여되었습니다.</div>
            )}
          </div>
        ))}
    </Box>
  );
};

export default NotiMessage;

const Box = styled.div`
  /* margin-right: 10px; */
`;

 

<LeaderGotMessage />

import styled from "@emotion/styled";

const LeaderGotMessage = ({ item }) => {
  const { teamMember, teamLeader, teamPartyStack } = item;
  return (
    <div>
      {teamMember.length > 0
        ? teamMember
            .filter((team) => team.isWait === true)
            .map((member, idx) => 
                <div key={idx}>
                    <PartyName>{teamPartyStack.partyName}</PartyName>
                    {member.nickName}님이 {teamLeader.nickName}님 모임에 참여신청 하였습니다.
                </div>)
        : ''}
    </div>
  );
};

export default LeaderGotMessage;

const PartyName = styled.div`
    color: #FEFF80;
    font-weight: 500;
`

 

teamPage 데이터 :

 

헤더 부분 알림 아이콘 쪽에 추가해준다.

 

 

웹 페이지에서의 모습