ChannelList.js

import ChannelSingle from './ChannelSingle'
import { Link } from 'react-router-dom'
import backward from '../../backward.png'

const ChannelList = () => {
  // function copytoClipboard() {
  //   const [code, setCode] = useState()
  //   const roomcode = document.getElementById("textarea")
  //   alert("코드를 복사하였습니다.")
  // }
  return (
    <div>
      <nav className="navbar navbar-light d-flex justify-content-between">
        <div>
          <Link to="/user">
            <button type="button" className="btn">
              <img src={backward} width="25" height="25" />
            </button>
          </Link>
        </div>

        <div>
          <Link to="/user">
            <img src="/BORA.png" style={{ width: '160px' }} />
          </Link>
        </div>

        <div>
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="offcanvas"
            data-bs-target="#hamburger"
            aria-controls="hamburger"
            aria-expanded="false"
            aria-label="Toggle navigation"
            style={{ border: '#f4c1f2' }}
          >
            <span className="navbar-toggler-icon"></span>
          </button>
        </div>
      </nav>

      <div
        className="offcanvas offcanvas-end"
        style={{ width: '330px' }}
        tabIndex="-1"
        id="hamburger"
        aria-labelledby="hamburgerLabel"
      >
        <div className="offcanvas-header">
          <p
            className="col-6 offcanvas-title"
            id="offcanvasExampleLabel"
            style={{
              fontWeight: 'bold',
              fontSize: '15px',
              overflow: 'scroll',
              whiteSpace: 'nowrap',
              width: '150px',
              color: '#000000',
            }}
          >
            데계데계데계데계데계데계데계데계데계데계 재밌는 수학과
          </p>
          <h6 className="mt-2"> #ASV2AE985 </h6>
          <button
            type="button"
            className="btn-close text-reset"
            data-bs-dismiss="offcanvas"
            aria-label="Close"
          ></button>
        </div>

        <ChannelSingle />
        <div>
          <div className="d-flex flex-row-reverse">
            <button
              type="button"
              className="m-3 rounded text-white"
              data-bs-toggle="modal"
              data-bs-target="#exitRoom"
              style={{
                height: '30px',
                fontWeight: 'bold',
                backgroundColor: '#D64D61',
                color: 'black',
                border: '1px #D64D61',
              }}
            >
              퇴장
            </button>
            <button
              type="button"
              className="m-3 rounded"
              style={{
                height: '30px',
                fontWeight: 'bold',
                backgroundColor: '#E0CEE8',
                color: 'black',
                border: '1px #D64D61',
              }}
            >
              설정
            </button>
            <div
              className="modal fade"
              id="exitRoom"
              tabIndex="-1"
              aria-labelledby="exitRoomLabel"
              aria-hidden="true"
            >
              <div className="modal-dialog">
                <div className="modal-content">
                  <div className="modal-header">
                    <button
                      type="button"
                      className="btn-close"
                      data-bs-dismiss="modal"
                      aria-label="Close"
                    ></button>
                  </div>
                  <div className="modal-body d-flex justify-content-center">
                    이방에서 퇴장하시겠습니까?
                  </div>
                  <div className="row mb-3">
                    <div className="d-flex justify-content-evenly">
                      {/* <Link to="/user"> */}
                      <button
                        type="submit"
                        className="col-2 p-1 btn btn-primary"
                      >
                        예
                      </button>
                      {/* </Link> */}
                      <button
                        type="submit"
                        className="col-2 p-1 btn btn-primary"
                        data-bs-dismiss="modal"
                      >
                        아니요
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default ChannelList