[TIL]240201_알림 삭제 기능

👩🏻‍💻 Today Learn

• 코드개선 진행
• 알림 삭제 기능추가

🖥️ 작업내용

(뭐했다고 벌써 2월이지!)

실시간 알림기능까지는 구현을 했었다. (이전 게시물 참고!)
그런데 나의 게시물에 다른 유저가 찜이나 좋아요를 눌렀을때 알림을 받는것 까지는 좋지만 눌렀다가 취소할 수도 있지 않은가?

그래서 추가로 하려고 하는 작업은 두가지였다.

찜, 좋아요 취소시 알림내역 삭제

// alertMessage.ts
// 테이블에서 찜, 좋아요 내역 삭제하기
export const deleteAlertMessageByType = async (targetId: string) => {
  return await supabase.from('alert_message').delete().eq('target_id', targetId);
};

// useAlertMessage.ts
  const { mutate: deleteAlertMessageType } = useMutation({
    mutationFn: async (targetId: string) => await deleteAlertMessageByType(targetId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [ALERT_MESSAGE_QUERY_LEY] });
    }
  });

// WishButton.tsx
  const removeUsedGoodWishClient = () => {
    queryClient.setQueryData(['used-item', usedItemId], (prevData: any) => {
      return {
        ...prevData,
        used_item_wish: [
          {
            count: prevData.used_item_wish[0].count - 1
          }
        ]
      };
    });

    queryClient.setQueryData(['my_wish', usedItemId], false);
    if (data?.user_id !== user!.id) {
      deleteAlertMessageType(usedItemId);
    }
  };

// Header.tsx
// 알림메시지
  useEffect(() => {
    if (!user) return;
    const subscription: RealtimeChannel = supabase
      .channel('alert-message-insert-channel')
      .on(
        'postgres_changes',
        {
          event: 'DELETE',
          schema: 'public',
          table: 'alert_message',
          filter: `user_id=eq.${user.id}`
        },
        handleRecordDeleted
      )
      .subscribe();
    return () => {
      subscription.unsubscribe();
    };
  }, []);

usedItemId 는 현재 부모컴포넌트에서 target_id 를 넘겨주고 있는 것이기 때문에 supabase에서 delete 할 때 target_id 값으로 넘겨주었다.

처음에는 그냥 id 값으로 가져와서 삭제해보려고 했는데 WishButton 컴포넌트는 내가 작업한 부분이 아니라서 거기서 가져올 수 있는 값으로 처리하려다보니 해당 게시물의 id 인 target_id 가 딱 적절했다.

읽은 알림메시지 삭제버튼

// alertMessage.ts
// 테이블에서 읽은 메시지 삭제하기
export const deleteAlertMessageById = async (id: string) => {
  return await supabase.from('alert_message').delete().eq('id', id);
};

// useAlertMessage.ts
  const { mutate: deleteAlertMessageId } = useMutation({
    mutationFn: async (id: string) => await deleteAlertMessageById(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [ALERT_MESSAGE_QUERY_LEY] });
    }
  });

// AlertMessageRow.tsx
  const deleteReadMessageButton = async () => {
    await deleteAlertMessageId(item.id);
    successTopRight({ message: '메시지가 삭제되었습니다' });
  };
return(
 <button
   onClick={deleteReadMessageButton}
   className={[item.status === true ? styles.button : styles.none].join('')}
 >
 X
  </button>
)

조건부 스타일링으로 읽음 상태일때만 해당 버튼이 보이도록 해주었다.
여기서는 읽은 메시지가 찜에서 받은 것일 수도 있고 좋아요 에서 받은 것일 수도 있기 때문에 target_id 가 아닌 id 값으로 삭제를 해야하는데 처음에 api에서 타겟아이디로만 가져오기 때문에 id 값이 같이 필요했다.

그래서 이렇게 저렇게 다 해보다가 실패를 하고 각각 불러오도록 작성 하였다.

어찌저찌 구현은 했지만 이게 최선인가? 하는 의문도 들었다...

✍🏻 회고

앞으로 최종 프로젝트 마무리까지 일주일도 남지 않았다. 그때까지 무엇을 더 개선하고 발전시킬 수 있을지 고민해보아야할 단계라고 생각한다.