RoomSingle.js

import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom'
import roomApi from '../../apis/room.api';
import userApi from '../../apis/user.api';


const RoomSingle = () => {
  const [roomNum, setRoomNum] = useState([])
  const [room, setRoom] = useState([])
  const id = localStorage.getItem('user');
  const channelId = 1

  async function getJoinRoom(Id) {
    try {
      console.log('id:',id)
      const User = await userApi.getUser({id: Id})
      console.log('User1:',User)
      console.log('User2:',User.roomNumber)
      setRoomNum(User.data.roomNumber)
      const Room = await roomApi.getRoom(roomNum)
    } catch (error) {
      // catchErrors(error, setError)
    }
  }

  useEffect(() => {
    getJoinRoom(id)
  }, [id])

  return (
    <Link
      to={`/room/${id}/${channelId}`}
      className="text-decoration-none text-dark"
    >
      <div
        className="d-flex mx-4 my-2 p-2"
        style={{ backgroundColor: '#C4C4C4' }}
      >
        <div style={{ width: '37px', height: '37px' }}>
          <img
            src="BORA.png"
            className="rounded-circle"
            style={{ width: '37px', height: '37px' }}
          />
        </div>
        <div
          className="mx-3 mt-2"
          style={{
            width: '250px',
            overflow:'scroll',
            whiteSpace: 'nowrap',
            msOverflowStyle:'none',
          }}
        >
          데계 재미있는 수학과 데계데계데계 재미있는 수학과
        </div>
        <div className="ms-auto mt-2"> 15/34 </div>
      </div>

    </Link>
  )
}

export default RoomSingle