RoomHeader.js

import { Link } from 'react-router-dom'

const RoomHeader = () => {
  return (
    <div className="container">
      <div className="row">
        <div
          className=" col d-flex justify-content-space-between"
          style={{ backgroundColor: '#C4C4C4' }}
        >
          <img
            className="m-2 rounded-circle"
            src="/cherry.jpg"
            width="40"
            height="40"
          />
          <p
            className="m-2"
            style={{
              fontWeight: 'bold',
              fontSize: '15px',
            }}
          >
            <p
              style={{
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                width: '110px',
              }}
            >
              데계 재밌는 수학과
            </p>{' '}
            #ASV2AE985
          </p>
          <p
            className='mt-3'
            style={{ fontWeight: 'bold', fontSize: '20px', color: '#571e80' }}
          >
            Ch.회의
          </p>
          <Link to="/user">
            <button
              type="button"
              className="mt-3 ms-3 rounded"
              style={{
                height: '30px',
                fontWeight: 'bold',
                backgroundColor: '#E8B7FF',
                color: 'black',
                border: '1px #f4c1f2',
              }}
            >
              돌아가기
            </button>
          </Link>
        </div>
      </div>
    </div>
  )
}

export default RoomHeader