팀 프로젝트 - 알림 구현

구현 사항

선수가 팀장에게 팀가입을 요청하거나, 팀장이 선수에게 팀가입을 요구했을 때

그에대한 대답이나 어떠한 변화가 일어났을 때 유저가 알 수 있도록 하기위해서

알림을 구현하기로 하였다

figma에 있는 저런 알림처럼 구현하기로 하였다

아직 디자인이 나오지 않아서 주기적으로 데이터를 업데이트하는 것만 구현해봤다

js에 있는 setInterval()을 이용해서 데이터를 업데이트 해보기로 했다

  useEffect(() => { 
    const fetchData = async () => {
      const res = await axios.get("/api/alarm")
      SetAlarm(res);
    }
    setInterval(() => fetchData(), 5000); // 5초마다 데이터 update
  }, []);

아직 백에 api를 만들지 않아서 테스트를 해보지는 않았다

            {Alarm === null ? 
              <div style={{width:"50px", height:"50px", backgroundColor:"red"}}></div>
              :
              <div style={{width:"50px", height:"50px", backgroundColor:"blue"}}></div>
            }

그리고 alarm에 값이 있는지 없는지로 어떤 이미지를 보여줄 지 대충 만들어 놓았다

디자인이 나오면 변경해야한다

나중에 백이랑 db까지 연동하고 테스트를 해보도록 하겠다