Commit ff46d55e authored by seoyeon's avatar seoyeon
Browse files

돌아가기 버튼 수정

parent 566d7109
import ChannelSingle from "./ChannelSingle"; import ChannelSingle from './ChannelSingle'
import { Link } from "react-router-dom"; import { Link } from 'react-router-dom'
import backward from '../../backward.png'
const ChannelList = () => { const ChannelList = () => {
return ( return (
...@@ -9,23 +10,16 @@ const ChannelList = () => { ...@@ -9,23 +10,16 @@ const ChannelList = () => {
<Link to="/user"> <Link to="/user">
<button <button
type="button" type="button"
className="m-2 rounded" className="btn"
style={{
height: "30px",
fontWeight: "bold",
backgroundColor: "#E8B7FF",
color: "black",
border: "1px #f4c1f2",
}}
> >
돌아가기 <img src={backward} width="25" height="25" />
</button> </button>
</Link> </Link>
</div> </div>
<div className="col-4 d-flex justify-content-center"> <div className="col-4 d-flex justify-content-center">
<Link to="/user"> <Link to="/user">
<img src="/BORA.png" style={{ width: "160px" }} /> <img src="/BORA.png" style={{ width: '160px' }} />
</Link> </Link>
</div> </div>
...@@ -38,23 +32,40 @@ const ChannelList = () => { ...@@ -38,23 +32,40 @@ const ChannelList = () => {
aria-controls="hamburger" aria-controls="hamburger"
aria-expanded="false" aria-expanded="false"
aria-label="Toggle navigation" aria-label="Toggle navigation"
style={{ border: "#f4c1f2", }} style={{ border: '#f4c1f2' }}
> >
<span className="navbar-toggler-icon"></span> <span className="navbar-toggler-icon"></span>
</button> </button>
</div> </div>
</nav> </nav>
<div className="offcanvas offcanvas-start" tabindex="-1" id="hamburger" aria-labelledby="hamburgerLabel"> <div
className="offcanvas offcanvas-start"
tabindex="-1"
id="hamburger"
aria-labelledby="hamburgerLabel"
>
<div className="offcanvas-header"> <div className="offcanvas-header">
<h5 className="offcanvas-title" id="offcanvasExampleLabel">음성 채널 목록</h5> <h5 className="offcanvas-title" id="offcanvasExampleLabel">
<button type="button" className="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> 음성 채널 목록
</h5>
<button
type="button"
className="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div> </div>
<div className="overflow-auto" style={{ height: "610px" }}> <div className="overflow-auto" style={{ height: '610px' }}>
<div className="mb-3"> <div className="mb-3">
<div className="m-3 p-2 row" style={{ backgroundColor: "#C4C4C4" }}> <div className="m-3 p-2 row" style={{ backgroundColor: '#C4C4C4' }}>
<img className="col-auto" src="/fullSpeaker.png" width="30px" height="30px" /> <img
className="col-auto"
src="/fullSpeaker.png"
width="30px"
height="30px"
/>
<h5 className="col">회의</h5> <h5 className="col">회의</h5>
</div> </div>
<div className="mx-5"> <div className="mx-5">
...@@ -62,7 +73,7 @@ const ChannelList = () => { ...@@ -62,7 +73,7 @@ const ChannelList = () => {
</div> </div>
</div> </div>
<div className="mb-3"> <div className="mb-3">
<div className="m-3 p-2" style={{ backgroundColor: "#C4C4C4" }}> <div className="m-3 p-2" style={{ backgroundColor: '#C4C4C4' }}>
<h5>사담</h5> <h5>사담</h5>
</div> </div>
<div className="mx-5"> <div className="mx-5">
...@@ -70,7 +81,7 @@ const ChannelList = () => { ...@@ -70,7 +81,7 @@ const ChannelList = () => {
</div> </div>
</div> </div>
<div className="mb-3"> <div className="mb-3">
<div className="m-3 p-2" style={{ backgroundColor: "#C4C4C4" }}> <div className="m-3 p-2" style={{ backgroundColor: '#C4C4C4' }}>
<h5>공지</h5> <h5>공지</h5>
</div> </div>
<div className="mx-5"> <div className="mx-5">
...@@ -78,7 +89,7 @@ const ChannelList = () => { ...@@ -78,7 +89,7 @@ const ChannelList = () => {
</div> </div>
</div> </div>
<div className="mb-3"> <div className="mb-3">
<div className="m-3 p-2" style={{ backgroundColor: "#C4C4C4" }}> <div className="m-3 p-2" style={{ backgroundColor: '#C4C4C4' }}>
<h5>공지</h5> <h5>공지</h5>
</div> </div>
<div className="mx-5"> <div className="mx-5">
...@@ -94,20 +105,31 @@ const ChannelList = () => { ...@@ -94,20 +105,31 @@ const ChannelList = () => {
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#exitRoom" data-bs-target="#exitRoom"
style={{ style={{
height: "30px", height: '30px',
fontWeight: "bold", fontWeight: 'bold',
backgroundColor: "#FF0000", backgroundColor: '#FF0000',
color: "black", color: 'black',
border: "1px #f4c1f2", border: '1px #f4c1f2',
}} }}
> >
퇴장 퇴장
</button> </button>
<div className="modal fade" id="exitRoom" tabindex="-1" aria-labelledby="exitRoomLabel" aria-hidden="true"> <div
className="modal fade"
id="exitRoom"
tabindex="-1"
aria-labelledby="exitRoomLabel"
aria-hidden="true"
>
<div className="modal-dialog"> <div className="modal-dialog">
<div className="modal-content"> <div className="modal-content">
<div className="modal-header"> <div className="modal-header">
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div> </div>
<div className="modal-body d-flex justify-content-center"> <div className="modal-body d-flex justify-content-center">
이방에서 퇴장하시겠습니까? 이방에서 퇴장하시겠습니까?
...@@ -115,9 +137,17 @@ const ChannelList = () => { ...@@ -115,9 +137,17 @@ const ChannelList = () => {
<div className="row mb-3"> <div className="row mb-3">
<div className="d-flex justify-content-evenly"> <div className="d-flex justify-content-evenly">
{/* <Link to="/user"> */} {/* <Link to="/user"> */}
<button type="submit" className="col-2 p-1 btn btn-primary"></button> <button type="submit" className="col-2 p-1 btn btn-primary">
</button>
{/* </Link> */} {/* </Link> */}
<button type="submit" className="col-2 p-1 btn btn-primary" data-bs-dismiss="modal">아니요</button> <button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
>
아니요
</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -125,10 +155,8 @@ const ChannelList = () => { ...@@ -125,10 +155,8 @@ const ChannelList = () => {
</div> </div>
</div> </div>
</div> </div>
</div>
)
}
export default ChannelList
</div >
);
};
export default ChannelList;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment