supabase로 웹사이트 클론하기 정리 (3) - Drag and Drop, 실시간 채팅 구현

참고한 강의

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
: https://inf.run/6SLYm

공식문서

https://github.com/react-dropzone/react-dropzone

Drag and drop 하는 방법

1. 라이브러리 설치

npm i --save react-dropzone

2. useDropZone 이용하기

import React, {useCallback} from 'react'
import {useDropzone} from 'react-dropzone'

function MyDropzone() {
  const onDrop = useCallback(acceptedFiles => {
    // Do something with the files
  }, [])
  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {
        isDragActive ?
          <p>Drop the files here ...</p> :
          <p>Drag 'n' drop some files here, or click to select files</p>
      }
    </div>
  )
}

위의 공식문서 코드를 참고하여 getRootProps, getInputProps, isDragActive를 이용하면 된다.
getRootProps를 drag할 영역에 상단에 넣고,
숨겨질 input에 getInputProps를 넣어야 동작한다.

isDragActive는 사진을 드래그 했을 때의 여부를 나타낸다.
삼항 연산자로 보여주는 것을 보면 boolean 값으로 예상된다.

실시간 채팅 구현 - supabase 리얼 타임

1. database인 table editor에서 우상단에서 realtime 버튼을 활성화 해준다.
2. 메세지를 send하는 기능, 메세지를 get하는 기능 구현

//send 기능
//message라는 테이블로 진행
export async function sendMessage({message, chatUserId}){
const supabase = awiat createServerSupabaseClient();

const {
 data: {session},
 error,
 } = await supabase.auth.getSession();
 
 if(error || !session.user){
 throw new Error("허가되지않은 유저입니다.")
 
 const {data, error: sendMessageError } = await supabase
 .from("message")
 .insert({
 message,
 receiver: chatUserId,
 sender: session.user.id,
 })
 
 if(sendMessageError){
 throw new Error (sendMessageError.message);
 }
 return data
 }
 

//get 기능
export async function getAllMessage({
chatUserId
}){
const supabase = await createServerSupabaseClient()

const {data, error} = await supabase.from('message')
.select('*')
.or(`receiver.eq.${chatUserId},receiver.eq.${session.user.id}`)
.or(`sender.eq.${chatUserId},sender.eq.${session.user.id}`)
.order("created_at", {ascending:true});//오름차순으로 정렬

if(getMessagesError){
return[]
}
return data
}

*type 에러가 나는 경우 run generate-types를 해주면 된다.(supabase를 쓴다는 가정하에!)

3.useMutation을 사용하여 POST 기능을 구현하고(send),
useQuery로 get 기능을 구현한다(메세지 조회)(react-query)

//send
const sendMessageMutatation = useMutation({
mutationFn: async()=>{
return sendMessage({
message,
chatUserId: selectedUserId,
})
},
onSuccess: () =>{
setMessage("")
getAllMessagesQuery.refetch()
},

})

//get message
const getAllMessageQuery = useQuery({
queryKey:["messages", selectedUserId],
queryFn: () => getAllMessage({chatUserId: selectedUserId})
})

현재 데이터를 가져오는 함수, 가져오는 것을 이용할 수 있는 함수는 만들었지만,
아직 실시간으로 되지 않기 때문에 실시간 구현이 더 필요하다.

4. 실시간 구현

useEffect(()=>{
const channel = supabase.channel('message_postgres_changes')
.on('postgres_changes',
{
event:"INSERT",
schema:"public",
table:"message",}

(payload) =>{
if(payload.eventType ==== 'INSERT' && !payload.errors){
getAllMessagesQuery.refetch()
}
}
)
.subscribe();
return () =>{
 channel.unsubscribe();
}
},[])