RoomSingle.js

import { Link } from "react-router-dom";

const RoomSingle = () => {
  const id = 1;
  const channelId = 1;
  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' }}>
          데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
        <div className="ms-auto mt-2"> 15/34 </div>
      </div>

      <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="view" style={{ height: "100px", overflow: 'scroll', whiteSpace: 'nowrap' }}>
          <div className="mx-3 mt-2" style={{ width: "200px" }}>
            데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
          <div className="ms-auto mt-2"> 15/34 </div>
        </div>
      </div>

      <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' }}>
          데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
        <div className="ms-auto mt-2"> 15/34 </div>
      </div>
    </Link >
  );
};

export default RoomSingle;