Skip to content

GitLab

Commit d3fd2d7f authored by 우지원's avatar 우지원
Browse files

햄버거바 수정중

parent 301ff1af
Show whitespace changes
Inline Side-by-side
client/src/components/Home/AddRoom.js
View file @ d3fd2d7f
...@@ -2,15 +2,14 @@ const AddRoom = () => { ...@@ -2,15 +2,14 @@ const AddRoom = () => {
return ( return (
<form className="m-3"> <form className="m-3">
<div className="row justify-content-around"> <div className="row justify-content-around">
<div className="col"> <div className="col pt-2">
<h4>참여중인 방목록</h4> <h4>참여중인 방목록</h4>
</div> </div>
<button <button
type="button" type="button"
className="col-2" className="col-2 btn btn-info"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#myModal" data-bs-target="#myModal"
style={{ backgroundColor: "#FCF4FF", borderColor: "#FCF4FF" }}
> >
+ +
</button> </button>
...@@ -28,11 +27,11 @@ const AddRoom = () => { ...@@ -28,11 +27,11 @@ const AddRoom = () => {
></button> ></button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="row justify-content-around mt-4 mb-4"> <div className="row justify-content-evenly mt-4 mb-4 fs-6">
<div className="col-5"> <div className="col-6 d-flex justify-content-center">
<button <button
type="button" type="button"
className="p-4" className="p-3"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#joinModal" data-bs-target="#joinModal"
style={{ style={{
...@@ -40,18 +39,19 @@ const AddRoom = () => { ...@@ -40,18 +39,19 @@ const AddRoom = () => {
flexDirection: "column", flexDirection: "column",
borderStyle: "solid", borderStyle: "solid",
borderRadius: "5px", borderRadius: "5px",
borderColor: "#C4C4C4", backgroundColor: "#f6c7ba",
backgroundColor: "#C4C4C4", borderColor: "#f6c7ba",
padding: "10px",
}} }}
> >
<div style={{ width: "6rem" }} >
방참여하기 방참여하기
</div>
</button> </button>
</div> </div>
<div className="col-5"> <div className="col-6 d-flex justify-content-center">
<button <button
type="button" type="button"
className="p-4" className="p-3"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#makeModal" data-bs-target="#makeModal"
style={{ style={{
...@@ -59,12 +59,13 @@ const AddRoom = () => { ...@@ -59,12 +59,13 @@ const AddRoom = () => {
flexDirection: "column", flexDirection: "column",
borderStyle: "solid", borderStyle: "solid",
borderRadius: "5px", borderRadius: "5px",
borderColor: "#C4C4C4", backgroundColor: "#f6c7ba",
backgroundColor: "#C4C4C4", borderColor: "#f6c7ba",
padding: "10px",
}} }}
> >
<div style={{ width: "6rem" }} >
방생성하기 방생성하기
</div>
</button> </button>
</div> </div>
</div> </div>
...@@ -97,15 +98,7 @@ const AddRoom = () => { ...@@ -97,15 +98,7 @@ const AddRoom = () => {
/> />
</div> </div>
<div className="modal-footer"> <div className="modal-footer">
<button <button type="submit" className="btn btn-primary">
type="button"
className="btn-primary"
style={{
borderStyle: "solid",
borderRadius: "5px",
padding: "15px",
}}
>
확인 확인
</button> </button>
</div> </div>
...@@ -128,11 +121,11 @@ const AddRoom = () => { ...@@ -128,11 +121,11 @@ const AddRoom = () => {
></button> ></button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<h5>방프로필사진</h5> <h6>방프로필사진</h6>
<div className="filebox mb-4"> <div className="filebox mb-4">
<input type="file" id="ex_filename" className="upload-hidden" /> <input type="file" id="ex_filename" className="upload-hidden" />
</div> </div>
<h5>방이름</h5> <h6>방이름</h6>
<div className="input-group"> <div className="input-group">
<input <input
type="text" type="text"
...@@ -143,15 +136,7 @@ const AddRoom = () => { ...@@ -143,15 +136,7 @@ const AddRoom = () => {
/> />
</div> </div>
<div className="modal-footer"> <div className="modal-footer">
<button <button type="submit" className="btn btn-primary">
type="button"
className="btn-primary"
style={{
borderStyle: "solid",
borderRadius: "5px",
padding: "15px",
}}
>
생성 생성
</button> </button>
</div> </div>
......
client/src/components/Home/HomeProfile.js
View file @ d3fd2d7f
...@@ -12,8 +12,6 @@ const HomeProfile = () => { ...@@ -12,8 +12,6 @@ const HomeProfile = () => {
style={{ style={{
width: "157px", width: "157px",
height: "157px", height: "157px",
borderStyle: "solid",
borderColor: "#262626",
}} }}
/> />
</div> </div>
......
client/src/components/Home/RoomSingle.js
View file @ d3fd2d7f
...@@ -6,137 +6,37 @@ const RoomSingle = () => { ...@@ -6,137 +6,37 @@ const RoomSingle = () => {
return ( return (
<Link to={`/room/${id}/${channelId}`} className="text-decoration-none text-dark"> <Link to={`/room/${id}/${channelId}`} className="text-decoration-none text-dark">
<div <div
className="row justify-content-start mx-4 my-2 p-2" className="d-flex mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }} style={{ backgroundColor: "#C4C4C4" }}
> >
<div className="col-2" style={{ width: "37px", height: "37px" }}> <div style={{ width: "37px", height: "37px" }}>
<img <img
src="BORA.png" src="BORA.png"
className="rounded-circle" className="rounded-circle"
style={{ width: "37px", height: "37px" }} style={{ width: "37px", height: "37px" }}
/> />
</div> </div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div> <div className="text-truncate mx-3 mt-2" style={{ width: "250px" }} title="데계 재미있는 수학과 데계데계데계 재미있는 수학과">
<div className="col-2 mt-2"> 15/34 </div> 데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
</div> <div className="ms-auto mt-2"> 15/34 </div>
<div
className="row justify-content-start mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }}
>
<div className="col-2" style={{ width: "37px", height: "37px" }}>
<img
src="BORA_LOGO.png"
className="rounded-circle"
style={{ width: "37px", height: "37px" }}
/>
</div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div>
<div
className="row justify-content-start mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }}
>
<div className="col-2" style={{ width: "37px", height: "37px" }}>
<img
src="cherry.jpg"
className="rounded-circle"
style={{ width: "37px", height: "37px" }}
/>
</div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div>
<div
className="row justify-content-start mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }}
>
<div className="col-2" style={{ width: "37px", height: "37px" }}>
<img
src="BORA_LOGO.png"
className="rounded-circle"
style={{ width: "37px", height: "37px" }}
/>
</div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div>
<div
className="row justify-content-start mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }}
>
<div className="col-2" style={{ width: "37px", height: "37px" }}>
<img
src="BORA.png"
className="rounded-circle"
style={{ width: "37px", height: "37px" }}
/>
</div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div>
<div
className="row justify-content-start mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }}
>
<div className="col-2" style={{ width: "37px", height: "37px" }}>
<img
src="cherry.jpg"
className="rounded-circle"
style={{ width: "37px", height: "37px" }}
/>
</div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div>
<div
className="row justify-content-start mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }}
>
<div className="col-2" style={{ width: "37px", height: "37px" }}>
<img
src="BORA_LOGO.png"
className="rounded-circle"
style={{ width: "37px", height: "37px" }}
/>
</div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div> </div>
<div <div
className="row justify-content-start mx-4 my-2 p-2" className="d-flex mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }} style={{ backgroundColor: "#C4C4C4" }}
> >
<div className="col-2" style={{ width: "37px", height: "37px" }}> <div style={{ width: "37px", height: "37px" }}>
<img <img
src="BORA.png" src="BORA.png"
className="rounded-circle" className="rounded-circle"
style={{ width: "37px", height: "37px" }} style={{ width: "37px", height: "37px" }}
/> />
</div> </div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div> <marquee className="text-overflow-auto white-space-nowrap mx-3 mt-2" style={{ width: "250px" }} title="데계 재미있는 수학과 데계데계데계 재미있는 수학과">
<div className="col-2 mt-2"> 15/34 </div> 데계 재미있는 수학과 데계데계데계 재미있는 수학과</marquee>
</div> <div className="ms-auto mt-2"> 15/34 </div>
<div
className="row justify-content-start mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }}
>
<div className="col-2" style={{ width: "37px", height: "37px" }}>
<img
src="cherry.jpg"
className="rounded-circle"
style={{ width: "37px", height: "37px" }}
/>
</div>
<div className="col-8 m-2"> 데계 재미있는 수학과 </div>
<div className="col-2 mt-2"> 15/34 </div>
</div> </div>
</Link> </Link >
); );
}; };
......
client/src/components/Profile/InfoUpdate.js
View file @ d3fd2d7f
...@@ -3,11 +3,11 @@ import { Link } from "react-router-dom"; ...@@ -3,11 +3,11 @@ import { Link } from "react-router-dom";
const InfoUpdate = () => { const InfoUpdate = () => {
const id = 1; const id = 1;
return ( return (
<div class="container" style={{ background: "#FCF4FF" }}> <div className="container" style={{ background: "#FCF4FF" }}>
<div class="row"> <div className="row">
<div> <div>
<label <label
class="form-label mx-2 my-4" className="form-label mx-2 my-4"
style={{ fontSize: "18px", fontWeight: "bold" }} style={{ fontSize: "18px", fontWeight: "bold" }}
> >
프로필 정보 프로필 정보
...@@ -15,7 +15,7 @@ const InfoUpdate = () => { ...@@ -15,7 +15,7 @@ const InfoUpdate = () => {
<Link to={`/profile/${id}`}> <Link to={`/profile/${id}`}>
<button <button
type="button" type="button"
class="btn btn-outline-white " className="btn btn-outline-white "
style={{ style={{
background: "#E8B7FF", background: "#E8B7FF",
fontSize: "13px", fontSize: "13px",
...@@ -27,10 +27,10 @@ const InfoUpdate = () => { ...@@ -27,10 +27,10 @@ const InfoUpdate = () => {
</Link> </Link>
</div> </div>
</div> </div>
<div class="col"></div> <div className="col"></div>
<div class="col"> <div className="col">
<div> <div>
<div class="row"> <div className="row">
<div className="d-flex justify-content-center"> <div className="d-flex justify-content-center">
<img <img
src="/cherry.jpg" src="/cherry.jpg"
...@@ -44,72 +44,72 @@ const InfoUpdate = () => { ...@@ -44,72 +44,72 @@ const InfoUpdate = () => {
> >
CHERRY #0805 CHERRY #0805
</div> </div>
<div class="col-6"> <div className="col-6">
<div class="input-group mx-2 my-3"> <div className="input-group mx-2 my-3">
<div> <div>
<label <label
class="form-label " className="form-label "
style={{ fontSize: "13px", fontWeight: "bold" }} style={{ fontSize: "13px", fontWeight: "bold" }}
> >
현재 비밀번호 현재 비밀번호
</label> </label>
<input type="text" class="form-control" /> <input type="text" className="form-control" />
</div> </div>
<div> <div>
<label <label
class="form-label" className="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }} style={{ fontSize: "13px", fontWeight: "bold" }}
> >
새 비밀번호 새 비밀번호
</label> </label>
<input type="text" class="form-control" /> <input type="text" className="form-control" />
</div> </div>
<div> <div>
<label <label
class="form-label" className="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }} style={{ fontSize: "13px", fontWeight: "bold" }}
> >
새 비밀번호 확인 새 비밀번호 확인
</label> </label>
<input type="text" class="form-control" /> <input type="text" className="form-control" />
</div> </div>
</div> </div>
</div> </div>
<div class="col-6"> <div className="col-6">
<div class="input-group my-3 "> <div className="input-group my-3 ">
<div> <div>
<label <label
class="form-label" className="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }} style={{ fontSize: "13px", fontWeight: "bold" }}
> >
현재 전화번호 현재 전화번호
</label> </label>
<input type="text" class="form-control" /> <input type="text" className="form-control" />
</div> </div>
<div> <div>
<label <label
class="form-label" className="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }} style={{ fontSize: "13px", fontWeight: "bold" }}
> >
새 전화번호 새 전화번호
</label> </label>
<input type="text" class="form-control" /> <input type="text" className="form-control" />
</div> </div>
<div> <div>
<label <label
class="form-label" className="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }} style={{ fontSize: "13px", fontWeight: "bold" }}
> >
새 전화번호 확인 새 전화번호 확인
</label> </label>
<input type="text" class="form-control" /> <input type="text" className="form-control" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col"></div> <div className="col"></div>
</div> </div>
); );
}; };
......
client/src/components/Profile/Profile.js
View file @ d3fd2d7f
...@@ -8,7 +8,7 @@ const Profile = () => { ...@@ -8,7 +8,7 @@ const Profile = () => {
<div className="row"> <div className="row">
<form> <form>
<label <label
class="form-label mx-2 my-4" className="form-label mx-2 my-4"
style={{ fontSize: "18px", fontWeight: "bold" }} style={{ fontSize: "18px", fontWeight: "bold" }}
> >
프로필 정보 프로필 정보
......
client/src/components/Room/ChannelList.js
View file @ d3fd2d7f
import ChannelSingle from "./ChannelSingle"; import ChannelSingle from "./ChannelSingle";
import { Link } from "react-router-dom";
const ChannelList = () => { const ChannelList = () => {
return ( return (
<div> <div>
ChannelList Component 입니다. <nav className="row navbar navbar-light">
<div className="col-4">
<Link to="/user">
<button
type="button"
className="m-2 rounded"
style={{
height: "30px",
fontWeight: "bold",
backgroundColor: "#E8B7FF",
color: "black",
border: "1px #f4c1f2",
}}
>
돌아가기
</button>
</Link>
</div>
<div className="col-4 d-flex justify-content-center">
<Link to="/user">
<img src="/BORA.png" style={{ width: "160px" }} />
</Link>
</div>
<div className="col-4 d-flex justify-content-end">
<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-start" tabindex="-1" id="hamburger" aria-labelledby="hamburgerLabel">
<div className="offcanvas-header">
<h5 className="offcanvas-title" id="offcanvasExampleLabel">음성 채널 목록</h5>
<button type="button" className="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div className="overflow-auto" style={{ height: "610px" }}>
<div className="mb-3">
<div className="m-3 p-2 row" style={{ backgroundColor: "#C4C4C4" }}>
<img className="col-auto" src="/fullSpeaker.png" width="30px" height="30px" />
<h5 className="col">회의</h5>
</div>
<div className="mx-5">
<ChannelSingle /> <ChannelSingle />
</div> </div>
</div>
<div className="mb-3">
<div className="m-3 p-2" style={{ backgroundColor: "#C4C4C4" }}>
<h5>사담</h5>
</div>
<div className="mx-5">
<ChannelSingle />
</div>
</div>
<div className="mb-3">
<div className="m-3 p-2" style={{ backgroundColor: "#C4C4C4" }}>
<h5>공지</h5>
</div>
<div className="mx-5">
<ChannelSingle />
</div>
</div>
<div className="mb-3">
<div className="m-3 p-2" style={{ backgroundColor: "#C4C4C4" }}>
<h5>공지</h5>
</div>
<div className="mx-5">
<ChannelSingle />
</div>
</div>
</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: "#FF0000",
color: "black",
border: "1px #f4c1f2",
}}
>
퇴장
</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 >
); );
}; };
......
client/src/components/Room/ChannelSingle.js
View file @ d3fd2d7f
const ChannelSingle = () => { const ChannelSingle = () => {
return ( return (
<div> <div>
음성 채널 목록 <div>
- CHERRY
</div>
<div>
- JAEYEON
</div>
<div>
- SEOYEON
</div>
<div>
- JIWEON
</div>
<div>
- BYOUNGYUN
</div>
</div> </div>
) )
}; };
......
client/src/components/Room/RoomHeader.js
View file @ d3fd2d7f
...@@ -27,21 +27,6 @@ const RoomHeader = () => { ...@@ -27,21 +27,6 @@ const RoomHeader = () => {
<p className="m-2" style={{ fontWeight: "bold", fontSize: "20px" }}> <p className="m-2" style={{ fontWeight: "bold", fontSize: "20px" }}>
회의 회의
</p> </p>
<Link to="/user">
<button
type="button"
className="m-2 rounded"
style={{
height: "30px",
fontWeight: "bold",
backgroundColor: "#E8B7FF",
color: "black",
border: "1px #f4c1f2",
}}
>
돌아가기
</button>
</Link>
</div> </div>
</div> </div>
</div> </div>
......
client/src/pages/RoomPage.js
View file @ d3fd2d7f
...@@ -8,7 +8,8 @@ import Controller from '../components/Room/Controller' ...@@ -8,7 +8,8 @@ import Controller from '../components/Room/Controller'
const RoomPage = () => { const RoomPage = () => {
return ( return (
<div> <div>
<Header hamburger={ChannelList} /> {/* <Header hamburger={ChannelList} /> */}
<ChannelList />
<RoomHeader /> <RoomHeader />
<Screen /> <Screen />
<User /> <User />
......
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