2024.04.22 TIL #채팅방_나가기 #나는_나가는데_너는? #type_지정

📌 Task TODOLIST

- [x] 채팅방 나가기 버튼

- [x] 채팅방 나갈 시 처리("chattng_room" 테이블 변경, "room" 테이블 변경, "participants" 테이블 변경, "remember_last_msg" 테이블 변경, storage에서 해당 유저의 이미지들 삭제)

- [x] 남아있는 사람들에 대한 처리

---

✨ 개발 내용

1. 채팅방 나갈 시 처리

- "chattng_room" 테이블 변경

- "room" 테이블 변경

- "participants" 테이블 변경

- "remember_last_msg" 테이블 변경

- storage에서 해당 유저의 이미지들 삭제

 

Why(이유) ?

한 명이 채팅방을 나가면 해야할 처리들이 정말 많다. 나열해보자면

- "chatting_room" table에서 해당 채팅룸의 isActive 상태를 false로 만들어줘야 하고

- "room" table에서 해당 방의 리더 변경 + room_status를 "모집중"으로 변경해야하고

- "participants" table에서 나가기를 누른 유저의 isDeleted 속성을 true로 변경하고

- 그 뒤에(비동기 로직의 동기처리) 남아있는 사람들이 누구인지 확인하고 

- "remeber_last_msg" table에서 나가기를 누른 유저가 읽은 해당 채팅방에 마지막 메세지를 삭제해야 하고

- storage에 해당 유저가 채팅방에 올렸던 이미지들을 삭제해야한다.(메모리 최적화)

 

How(과정) ?

각 로직은 다음과 같다.

// 채팅방 isActive 상태를 false로 변경
  const updateIsActiveFalse = async () => {
    const { error: updateActiveErr } = await clientSupabase
      .from('chatting_room')
      .update({ isActive: false })
      .eq('chatting_room_id', chatRoomId);
    if (updateActiveErr) {
      alert('채팅방 비활성화에 실패하였습니다.');
      console.error(updateActiveErr.message);
    }
  };

  // room 테이블에서 리더 변경 + room_status: "모집중" + participants 테이블에서 해당 룸에 대한 유저정보 isDeleted: true로
  const getRidOfMe = async () => {
    if (user?.user_id === leader_id) {
      const { error: updateLeaderErr } = await clientSupabase
        .from('room')
        .update({
          leader_id: participants?.find((person) => person.user_id !== user?.user_id)?.user_id,
          room_status: '모집중'
        })
        .eq('room_id', room_id);
      if (updateLeaderErr) console.error('fail to update leader of room', updateLeaderErr.message);
    }
    const { error: deleteErr } = await clientSupabase
      .from('participants')
      .update({ isDeleted: true })
      .eq('room_id', room_id)
      .eq('user_id', user?.user_id!);
    if (deleteErr) {
      console.error(deleteErr.message);
      alert('채팅방 나가기에서 오류가 발생하였습니다.');
    }
  };

  // 남아있는 사람인지 나간사람인지 isRest 상태변경으로 화면 렌더링 바꾸는 함수
  const handleIsRest = async () => {
    const { data: restOf, error: getPartErr } = await clientSupabase
      .from('participants')
      .select('user_id')
      .eq('room_id', room_id)
      .eq('isDeleted', false);
    if (getPartErr) {
      console.error(getPartErr.message);
      alert('참가자들 정보를 불러오는 데 실패했습니다.');
    } else {
      const restArr = restOf.map((r) => r.user_id);
      setisRest(restArr.includes(user?.user_id!) as boolean);
    }
  };

  // 마지막 메세지 삭제
  const deleteLastMsg = async () => {
    const { error } = await clientSupabase.from('remember_last_msg').delete().eq('chatting_room_id', chatRoomId);
    if (error) console.error('remember_last_msg table에 해당 채팅방 관련 정보 삭제 실패');
  };

  // 해당 유저가 남긴 채팅창의 이미지들 지우기
  const deleteTheUserImgs = async () => {
    const { error: imgStorageErr, data: usersAllImgList } = await clientSupabase.storage
      .from('chatImg')
      .list(`${chatRoomId}/${user?.user_id}`);
    if (imgStorageErr) {
      console.error('storage remove fail', imgStorageErr.message);
    } else {
      const filesToRemove = usersAllImgList.map((x) => `${chatRoomId}/${user?.user_id}/${x.name}`);

      if (filesToRemove && filesToRemove.length) {
        const { error: deleteFilesErr } = await clientSupabase.storage.from('chatImg').remove(filesToRemove);
        deleteFilesErr && console.error('fail to delete list of the folder', deleteFilesErr.message);
        const { error: deleteFolderErr } = await clientSupabase.storage
          .from('chatImg')
          .remove([`${chatRoomId}/${user?.user_id}`]);
        deleteFolderErr && console.error("fail to delete the user's folder of storage", deleteFolderErr.message);
      }
    }
  };

  const getOutOfChatRoom = async () => {
    const message = `한명이라도 나가면 채팅방이 종료됩니다. 
    한 번 나가면 다시 입장하실 수 없습니다. 
    그래도 나가시겠습니까?`;

    openModal({
      type: 'confirm',
      name: '',
      text: message,
      onFunc: async () => {
        closeModal();
        await updateIsActiveFalse();
        await getRidOfMe();
        await handleIsRest();
        deleteLastMsg();
        deleteTheUserImgs();
        queryClient.removeQueries({ queryKey: [MSGS_QUERY_KEY, chatRoomId], exact: true });
      },
      onCancelFunc: () => {
        closeModal();
      }
    });
  };

 

로직 중에는 동기적으로 처리되어야 할 로직들이 있어서 필요한 로직은 await로 처리해주었다.

---

2. 나간 사람과, 남아있는 사람들을 구분해서 라우트 변경

 

Why(이유) ?

나간 사람과 남아있는 사람에 대한 처리를 고민했다.

채팅 중 어떤 사람이 나가더라도 나간 사람만 빼고 채팅방은 계속 이어나갈까?

했지만, 그렇게 된다면 만약 새로운 사람이 들어오게 되면 그 사람은 이전 채팅들을 다 볼 수 있을텐데 뭔가 나간 사람에 대한 개인정보를 불필요하게 봐야할 수도 있고, 대체된 느낌이라 기분이 나쁠 수도 있고, 무엇보다 사람이 나가더라도 채팅방이 계속 유지되는 것이 user들에게 악용될 수 있다는 생각에

=> 한 명이라도 나가면 해당 채팅방을 종료해버리자! 새로 누군가 들어오면 새로운 채팅방을 시작하자.

라는 결론에 도달했다.

 

그래서 생각해보니,

나간 사람은 그냥 로비로 가면 되는데, 남아있는 사람들은 갑자기 누가 나갔다고 같이 로비로 튕겨지는 게 UX 상 너무 황당당할 것 같았다.

 

How(과정) ?

채팅방을 누른 사람인지, 남아있는 사람인지 구분할 필요가 있었다.

하여, A라는 room_id의 방에서 나가기를 누른 사람은 "participants" table에서 isDeleted를 true로 바꾸는 요청을 먼저 보내고(선행), 남아있는 사람들이 누구인지를 알아보는 요청을 후에 보냄으로써(후행) 나가기를 누른 사람과 나머지 사람들을 구분했다.

 

또한,  그 두 그룹에게 다른 라우트 변경을 제공하기 위해서 isRest 상태를 만들었다.

남아있는 사람들이 누구인지를 알아보는 요청에 대한 응답에 이름이 있다면 isRest를 true로, 

이름이 없다면 나가기를 누른 사람이므로 isRest를 false로 set 했고, 이 상태를 상위 컴포넌트에서 사용하기 위해서 zustand store에 저장했다. 

그런 다음 chatPage의 가장 상단에서 해당 채팅방의 is_Active 상태가 변경되는 것을 supabase-realtime으로 실시간 구독한 뒤, is_Active가 false라면, 내가 남아있는 유저인지 알아볼 수 있는 isRest 상태에 따라 라우트가 변경되도록 했다.

 

what(결과) ? 

위의 코드와 중복되는 코드인데, 바로 이것을 위한 코드들이었고

// room 테이블에서 리더 변경 + room_status: "모집중" + participants 테이블에서 해당 룸에 대한 유저정보 isDeleted: true로
  const getRidOfMe = async () => {
    if (user?.user_id === leader_id) {
      const { error: updateLeaderErr } = await clientSupabase
        .from('room')
        .update({
          leader_id: participants?.find((person) => person.user_id !== user?.user_id)?.user_id,
          room_status: '모집중'
        })
        .eq('room_id', room_id);
      if (updateLeaderErr) console.error('fail to update leader of room', updateLeaderErr.message);
    }
    const { error: deleteErr } = await clientSupabase
      .from('participants')
      .update({ isDeleted: true })
      .eq('room_id', room_id)
      .eq('user_id', user?.user_id!);
    if (deleteErr) {
      console.error(deleteErr.message);
      alert('채팅방 나가기에서 오류가 발생하였습니다.');
    }
  };

  // 남아있는 사람인지 나간사람인지 isRest 상태변경으로 화면 렌더링 바꾸는 함수
  const handleIsRest = async () => {
    const { data: restOf, error: getPartErr } = await clientSupabase
      .from('participants')
      .select('user_id')
      .eq('room_id', room_id)
      .eq('isDeleted', false);
    if (getPartErr) {
      console.error(getPartErr.message);
      alert('참가자들 정보를 불러오는 데 실패했습니다.');
    } else {
      const restArr = restOf.map((r) => r.user_id);
      setisRest(restArr.includes(user?.user_id!) as boolean);
    }
  };

 

// chatPage의 가장 상단 컴포넌트 InitChat.tsx

'use client';

const InitChat = ({ user, chatRoomId }: { user: User | null; chatRoomId: string }) => {
  const { chatState, isRest, setChatState, setisRest, setChatRoomId, setHasMore } = chatStore((state) => state);
  const {
    room: { room_id, leader_id }
  } = useRoomDataQuery(chatRoomId);
  const router = useRouter();
  const queryClient = useQueryClient();
  const allMsgs = useMsgsQuery(chatRoomId);

  useEffect(() => {
    // 채팅방 isActive 상태 구독
    const channel = clientSupabase
      .channel(`${chatRoomId}_chatting_room_table`)
      .on(
        'postgres_changes',
        { event: 'UPDATE', schema: 'public', table: 'chatting_room', filter: `chatting_room_id=eq.${chatRoomId}` },
        (payload) => {
          setChatState((payload.new as chatRoomType).isActive);
          if (user?.id !== leader_id) {
            queryClient.invalidateQueries({
              queryKey: [CHATDATA_QUERY_KEY]
            });
          }
        }
      )
      .subscribe();
    return () => {
      clientSupabase.removeChannel(channel);
    };
  }, []);

  useEffect(() => {
    // **채팅방에 있을지 말지
    if (!chatState) {
      // 한 명이 채팅방을 나가서 채팅방 isActive가 false가 되면,
      if (isRest) {
        // 내가 나가기를 누른 사람이 아니라면(남은 사람이면) 다시 수락창으로
        router.push(`/meetingRoom/${room_id}`);
      } else {
        // 내가 나가기를 누른 사람이라면 아예 로비로
        router.push('/meetingRoom');
      }
      setChatState(true);
      setisRest(true);
    } else {
      // **채팅방에 있는다면
      setChatRoomId(chatRoomId);
      if (allMsgs) {
        queryClient.setQueryData([MSGS_QUERY_KEY, chatRoomId], [...allMsgs].reverse());
        setHasMore(allMsgs.length >= ITEM_INTERVAL + 1);
      }
    }
  }, [chatState, isRest]);

  return null;
};

export default InitChat;

 

📸 스크린샷

- 채팅방을 나간 사람: 로비로 

 

 

- 아무것도 누르지 않고 상대방이 나간 경우: 수락창으로 이동(조금 보고계시면 변경됩니다)

🚨  TroubleShotting

payload의 타입 지정에 애를 먹었다.

내가 받을 payload는 채팅룸이었어서 괄호 후 타입지정을 해주니 해결되었다.

  useEffect(() => {
    // 채팅방 isActive 상태 구독
    const channel = clientSupabase
      .channel(`${chatRoomId}_chatting_room_table`)
      .on(
        'postgres_changes',
        { event: 'UPDATE', schema: 'public', table: 'chatting_room', filter: `chatting_room_id=eq.${chatRoomId}` },
        (payload) => {
          setChatState((payload.new as chatRoomType).isActive); ---> type 지정
          ...

📚 레퍼런스

My head....?