room logic 형성

두 유저가 만나, socket 이벤트가 호출되기 전, 두 유저를 매칭하는 룸 logic 을 형성하였다.

먼저 db의 방 데이터를 탐색하는 함수를 실행한다.
  -  룸이 존재하는 경우 : 룸이 있으며, 아직 방에 1명인 경우에 해당 룸이 내가 사용하는 언어와 일치한다면 채우고 들어가면 된다.
  -  룸이 존재하지 않는 경우 : 룸이 있으나 2명을 차지하거나, 혹은 룸이 언어랑 맞지 않아 못들어간다면, 룸을 생생하여 들어간다.

  ex) user: 김싸피, languages : eng, jpn, kor 인 경우
    - language가 eng이면서, 룸이 아직 1명인 곳을 찾는다. (시간은 한 일단 10초 정도, 찾는도중 누가 생성할 수 있으니, 또 보고 또 보고 또 탐색하자 (멀티 쓰레드로 가능한가? ))
    - eng 방이 없다면, language가 eng || jpn이면서, 룸이 아직 1명인 곳을 찾는다. (동일하게 10초 정도)
    - jpn 방이 없다면, language가 eng || jpn || kor 이면서, 룸이 아직 1명인 곳을 찾는다. (역시 동일하게 10초 정도)
    - 30초를 경과 해도 없다면, 룸을 생성한다. (이때도 client는 여전히 loading 중)
  
룸을 찾거나, 룸을 만들어서 2명이 채워진 경우에 opnnvidu-server를 통해 비디오 렌더링과 채팅이 이루어지게 한다!

import { useState, useEffect } from 'react'
import Button from '../common/Button'
import Modal from '../common/Modal'
import LoadingContainer from './LoadingContainer'
import { useLocation } from 'react-router-dom'
// import { classNames } from 'react-select/dist/declarations/src/utils'
import classes from '../common/Button.module.css'

export default function MeetingEntrySection() {
  const [modalState, setModalState] = useState(false)

  const location = useLocation()
  useEffect(() => {
    if (location.state || location.search === '?rematching=true') {
      handleModal()
      location.state = null
    }
  }, [location])

  // const roomHandler = () => {
  //   // console.log(state.token)
  //   dispatch(findRoom(state.token))
  // }

  const handleModal = () => setModalState(!modalState)

  // if (location.search === '?rematching=true') handleModal()

  const contents = {
    content: <LoadingContainer handleModal={handleModal}></LoadingContainer>,
  }

  return (
    <>
      {/* <Button text="룸 테스트용 버튼" onEvent={roomHandler}></Button> */}
      <Button
        text="랜덤 매칭 시작하기"
        onEvent={handleModal}
        size="large_height"
        className={classes.button_text_big}
      ></Button>
      <Modal
        opened={modalState}
        handleModal={handleModal}
        contents={contents}
        locked
      />
    </>
  )
}