ChannelSingle.js

const ChannelSingle = () => {
  return (
    <div className="overflow-auto" style={{ height: '610px' }}>
      <div className="mb-3">
        <div className="m-3 p-1 row" style={{ backgroundColor: '#E0CEE8' }}>
          <img
            className="col-auto mt-2"
            src="/fullSpeaker.png"
            width="25px"
            height="25px"
          />
          <h5 className="col mt-2">회의</h5>
        </div>
        <ul className="mx-5" style={{ color: '#76D079' }}>
          <li>
            <p style={{ color: 'black' }}>CHERRY</p>
          </li>
          <li>
            <p style={{ color: 'black' }}>JAEYEON</p>
          </li>
          <li>
            <p style={{ color: 'black' }}>SEOYEON</p>
          </li>
          <li>
            <p style={{ color: 'black' }}>JIWEON</p>
          </li>
          <li>
            <p style={{ color: 'black' }}>BYOUNGYUN</p>
          </li>
        </ul>
      </div>

      <div className="mb-3">
        <div className="m-3 p-1 row" style={{ backgroundColor: '#E0CEE8' }}>
          <img
            className="col-auto mt-2"
            src="/emptySpeaker.png"
            width="25px"
            height="25px"
          />
          <h5 className="col mt-2">사담</h5>
        </div>
        <ul className="mx-5" style={{ color: '#76D079' }}>
          <li>
            <p style={{ color: 'black' }}>CHERRY</p>
          </li>
          <li>
            <p style={{ color: 'black' }}>JAEYEON</p>
          </li>
          <li>
            <p style={{ color: 'black' }}>SEOYEON</p>
          </li>
          <li>
            <p style={{ color: 'black' }}>JIWEON</p>
          </li>
          <li>
            <p style={{ color: 'black' }}>BYOUNGYUN</p>
          </li>
        </ul>
      </div>

      <div className="mb-3">
        <div className="m-3 p-1 row" style={{ backgroundColor: '#E0CEE8' }}>
          <img
            className="col-auto mt-2"
            src="/emptySpeaker.png"
            width="25px"
            height="25px"
          />
          <h5 className="col mt-2">일반</h5>
        </div>
        <ul className="mx-5" style={{ color: '#76D079' }}>
          <li>
            <p style={{ color: 'black' }}>CHERRY</p>
          </li>
          <li>
            <p style={{ color: 'black' }}>JAEYEON</p>
          </li>
          <li>
            <p style={{ color: 'black' }}>SEOYEON</p>
          </li>
          <li>
            <p style={{ color: 'black' }}>JIWEON</p>
          </li>
          <li>
            <p style={{ color: 'black' }}>BYOUNGYUN</p>
          </li>
        </ul>
      </div>

      <div className="mb-3">
        <div className="m-3 p-1 row" style={{ backgroundColor: '#E0CEE8' }}>
          <img
            className="col-auto mt-2"
            src="/emptySpeaker.png"
            width="25px"
            height="25px"
          />
          <h5 className="col mt-2">공지</h5>
        </div>
        <ul className="mx-5" style={{ color: '#76D079' }}>
          <li>
            <p style={{ color: 'black' }}>CHERRY</p>
          </li>
          <li>
            <p style={{ color: 'black' }}>JAEYEON</p>
          </li>
          <li>
            <p style={{ color: 'black' }}>SEOYEON</p>
          </li>
          <li>
            <p style={{ color: 'black' }}>JIWEON</p>
          </li>
          <li>
            <p style={{ color: 'black' }}>BYOUNGYUN</p>
          </li>
        </ul>
      </div>
    </div>
  )
}

export default ChannelSingle