240808 TIL

채팅 구독 기능
처음 대화를 시작할 수 있는 버튼을 우선 리스트에 임시로 만들었다.

  const checkOwnerChannel = async (): Promise<number | null> => {
    const { data, error } = await supabase
      .from("chat_channels")
      .select("channel_id")
      .eq("owner_id", owner_id)
      .maybeSingle();
    if (error) {
      console.log(error);
      return null;
    }
    if (!data) {
      console.log('채널이 존재하지 않습니다.')
      return null;
    } else {
      return data.channel_id;
    }
  };

  const startChat = async () => {
    //유저의 대화구독목록 불러오기
    const user_id = userdata.id
    const channel_id = await checkOwnerChannel();
    if (channel_id && user_id != undefined) {
      const { data, error } = await supabase
        .from('chat_subscribe')
        .select('chat_subscribe_id')
        .eq('channel_id', channel_id)
        .eq('user_id', user_id)
        .maybeSingle();
      if (!data) {
        createNewSubscribe(channel_id, user_id)
      }
    }
    router.push(`/chatlist/[${channel_id}]`)
  }

  const createNewSubscribe = async (channel_id: number, user_id: string) => {
    const { data, error } = await supabase
      .from('chat_subscribe')
      .insert({
        channel_id: channel_id,
        user_id: user_id
      })
    if (error)
      console.log(error)
  }

채팅 구독이 되어있지 않을 시 구독 관계를 형성해주고, 채팅창으로 이동한다.

줄바꿈 문제 해결
채팅방에 엔터 입력 시 적용이 되지 않았다. whitespace-pre-wrap으로 해결.
영어의 경우 띄어쓰기 없이 길게 쓸 경우 줄바꿈이 되지 않았다. break-all로 해결.
문장분호도 역시 줄바꿈 적용이 되지 않았는데 이는 tailwind로 해결할 수 없어서... global css로 셋을 한번에 설정해주었다. overflow-wrap anywhere로 해결.

.chat {
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: pre-wrap;
}

(고민의 흔적들... ㅋㅋㅋㅋ)