feat : 마이페이지 로그아웃 기능 추가 + 마이페이지 챌린지 api 연동 완료 + 알람 api 연동 완료

[yeongipark]

구현한 것

1. 알림 데이터 서버로 부터 받아와서 랜더링
2. 친구 알림인 경우 수락 거절 버튼 생성
3. 알림 이미지 클릭시 알림 읽음 상태가 되고 빨간점이 사라짐
4. 안 읽은 알림은 빨간점 표시
5. 도연님이 말씀하신 시간 계산 함수를 사용하여 시간 계산하였습니다

알림 코드

export const AlarmItem = ({ type, data, time, userId, id, check }) => {
  const nav = useNavigate();

  // 알람 읽었을 때 안 읽은 알람 업데이트 하는 함수 zustand에서 가져오기
  const { setCount, count } = useAlarmStore();

  // 이미지 주소 저장할 state
  const [url, setUrl] = useState(null);

  // 화면에 띄울 텍스트 저장할 state
  const [text, setText] = useState("");

  // 알림이 온 시간을 계산할 state
  const [clock, setClock] = useState(0);

  // 게시물 번호 저장할 state
  const [postId, setPostId] = useState(null);

  // 알람을 확인했는지 확인하는 state
  const [alarmCheck, setAlarmCheck] = useState(check);

  // 친구 요청 수락 거절 버튼 눌렀을 때 실행할 함수
  const handleOnFriend = (text, userId) => {
    setAlarmCheck(true);
    // api 호출
    handleFriendRequest(text, userId);
    // ui 변경 트리거
    if (text === "sure") {
      setSure(true);
    } else {
      setSure(false);
    }
  };

// 댓글 관련 알림 눌렀을 때 실행할 함수
  const handleOnChat = (postId) => {
    // 알람을 읽음 상태로 만들기
    setAlarmCheck(true);
    handleAlarmClick(id);
   // 해당하는 게시물로 이동
    nav(`/posts/${postId}`);
  };

// 챌린지 관련 알림 눌렀을 때 실행할 함수
  const handleChallenge = () => {
    // 알람을 읽음 상태로 만들기
    setAlarmCheck(true);
    handleAlarmClick(id);
    // 메인화면으로 이동
    nav("/main");
  };

  // type에 따라 다른 함수 할당
  const handleImageClick = () => {
    // 알람을 읽음 상태로 만들기
    if (type === "COMMENT_ALARM") {
      handleOnChat(postId);
    } else if (type === "CHALLENGE_REMINDER") {
      handleChallenge();
    } else if (type === "FRIEND_REQUEST") {
      // 친구 요청인 경우 이미지 클릭해도 바뀌지 않게 수정
      () => {};
    } else {
      setAlarmCheck(true);
      handleAlarmClick(id);
      nav("/friendList");
    }
    // 안 읽은 알람수 -1 하기
    setCount(count - 1);
  };

  // type에 따라 이미지와 텍스트 바꿈
  useEffect(() => {
    // 댓글 관련 데이터인 경우 문자열 띄어쓰기로 데이터가 와서 split으로 데이터 분리
    let splitData = data.split(" ");
    let imageUrl = setImgUrl(type);
    let data2 = set(type, splitData[0]);
    let processedClock = detailDate(new Date(time));
    setClock(processedClock);
    setUrl(imageUrl);
    setText(data2);
    // 댓글 알람인 경우 postid 저장하기
    if (type === "COMMENT_ALARM") {
      setPostId(splitData[1]);
    }
  }, [type, time]);

[jihyun132]

고생하셨습니다~~