Skip to content

GitLab

Commit 4444506d authored by 이재연's avatar 이재연
Browse files

Merge remote-tracking branch 'origin/jiweon827' into jaeyeoniiiiii

parents 7fcf7da7 e2c8428f
Hide whitespace changes
Inline Side-by-side
client/src/components/Home/AddRoom.js
View file @ 4444506d
import { useEffect, useState } from "react";
import axios from 'axios'
const INIT_ROOM = {
roomName: '',
owner: '123456',
member: '123456',
profileimg: [],
}
const AddRoom = () => { const AddRoom = () => {
const [room, setRoom] = useState(INIT_ROOM)
const [error, setError] = useState("");
const [success, setSuccess] = useState(false)
const [disabled, setDisabled] = useState(true)
useEffect(() => {
setDisabled(
!(
room.name &&
room.owner &&
room.member &&
room.profileimg
)
);
}, [room]);
//LocalStorage에 user id를 저장할때 id를 owner, member에 저장하기
//const userId = localStorage.getItem('id')
// setRoom({...room, [owner]: userId})
// setRoom({...room, [member]: userId})
function handleChange(event) {
const { name, value } = event.target
setRoom({ ...room, [name]: value })
console.log(room)
}
async function handleSubmit(event) {
event.preventDefault()
try {
console.log('룸룸', room)
let res = await axios.post("/room/create", room)
const Id = res.data.id
alert(`방참여코드는 ${Id}입니다`)
setSuccess(true)
} catch (error) {
// catchErrors(error, setError);
} finally {
// setLoading(false);
}
}
if (success) {
console.log('success', success)
alert('룸생성이 완료되었습니다!')
//return <Redirect to='/' />
}
const { name, owner, member, profileimg } = room;
return ( return (
<div> <div>
<div className="mx-4 my-3 d-flex justify-content-between"> <div className="mx-4 my-3 d-flex justify-content-between">
...@@ -83,70 +143,83 @@ const AddRoom = () => { ...@@ -83,70 +143,83 @@ const AddRoom = () => {
</div> </div>
{/* 방참여하기 모달 */} {/* 방참여하기 모달 */}
<div className="modal" id="joinModal" tabIndex="-1" aria-hidden="true"> <div className="form" onSubmit={handleSubmit}>
<div className="modal-dialog"> <div className="modal" id="joinModal" tabIndex="-1" aria-hidden="true">
<div className="modal-content"> <div className="modal-dialog">
<div className="modal-header"> <div className="modal-content">
<div>방참여하기</div> <div className="modal-header">
<button <div>방참여하기</div>
type="button" <button
className="btn-close" type="button"
data-bs-dismiss="modal" className="btn-close"
aria-label="Close" data-bs-dismiss="modal"
></button> aria-label="Close"
</div> ></button>
<div className="modal-body">
<div className="input-group mb-3">
<input
type="text"
className="form-control"
placeholder="참여코드를 입력하세요"
aria-label="참여코드를 입력하세요"
aria-describedby="basic-addon1"
/>
</div> </div>
<div className="modal-footer"> <div className="modal-body">
<button type="submit" className="btn btn-primary"> <div className="input-group mb-3">
확인 <input
</button> type="text"
className="form-control"
placeholder="참여코드를 입력하세요"
aria-label="참여코드를 입력하세요"
aria-describedby="basic-addon1"
/>
</div>
<div className="modal-footer">
<button type="submit" className="btn btn-primary">
확인
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/* 방생성하기 모달 */} {/* 방생성하기 모달 */}
<div className="modal" id="makeModal" tabIndex="-1" aria-hidden="true"> <div className="form" onSubmit={handleSubmit}>
<div className="modal-dialog"> <div className="modal" id="makeModal" tabIndex="-1" aria-hidden="true">
<div className="modal-content"> <div className="modal-dialog">
<div className="modal-header"> <div className="modal-content">
<div>방생성하기</div> <div className="modal-header">
<button <div>방생성하기</div>
type="button" <button
className="btn-close" type="button"
data-bs-dismiss="modal" className="btn-close"
aria-label="Close" data-bs-dismiss="modal"
></button> aria-label="Close"
</div> ></button>
<div className="modal-body">
<h6>방프로필사진</h6>
<div className="mb-4">
<input type="file" className="upload-hidden" />
</div> </div>
<h6>방이름</h6> <div className="modal-body">
<div className="input-group"> <h6>방프로필사진</h6>
<input <div className="mb-4">
type="text" <input
className="form-control" type="file"
placeholder="방이름을 입력해주세요" className="upload-hidden"
aria-label="방이름 입력해주세요" onChange={handleChange}
aria-describedby="basic-addon1" name="profileimg"
/> value={room.profileimg} />
</div> </div>
<div className="modal-footer"> <h6>방이름</h6>
<button type="submit" className="btn btn-primary"> <div className="input-group">
생성 <input
</button> type="text"
className="form-control"
placeholder="방이름을 입력해주세요"
aria-label="방이름 입력해주세요"
aria-describedby="basic-addon1"
onChange={handleChange}
name="name"
value={room.name}
/>
</div>
<div className="modal-footer">
<button type="submit" className="btn btn-primary">
생성
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
......
client/src/components/Room/ChannelList.js
View file @ 4444506d
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import React, { useState } from 'react'; import React, { useState } from 'react';
import LeftHamberger from './LeftHamberger'; import LeftHamburger from './LeftHamburger';
import RightHamberger from './RightHamberger'; import RightHamburger from './RightHamburger';
const ChannelList = () => { const ChannelList = () => {
return ( return (
<div> <div>
<nav className="navbar navbar-light d-flex justify-content-between"> <nav className="navbar navbar-light d-flex justify-content-between">
<LeftHamberger /> <LeftHamburger />
<div> <div>
<Link to="/user"> <Link to="/user">
<img src="/BORA.png" style={{ width: '160px' }} /> <img src="/BORA.png" style={{ width: '160px' }} />
</Link> </Link>
</div> </div>
<RightHamberger /> <RightHamburger />
</nav> </nav>
</div> </div>
) )
......
client/src/components/Room/LeftHamberger.js deleted 100644 → 0
View file @ 7fcf7da7
import backward from "../../backward.png";
import ChannelSingle from "./ChannelSingle";
const LeftHamberger = () => {
function roomIdCopy() {
const t = document.querySelector("#roomId").innerText;
console.log(t);
navigator.clipboard.writeText(t);
//document.execCommand("copy");
}
return (
<div>
<div>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#left-hamburger"
aria-controls="left-hamburger"
aria-expanded="false"
aria-label="Toggle navigation"
style={{ border: "#f4c1f2" }}
>
<span className="navbar-toggler-icon"></span>
</button>
</div>
<div
className="offcanvas offcanvas-start"
style={{ width: "330px" }}
tabIndex="-1"
id="left-hamburger"
aria-labelledby="hamburgerLabel"
>
<div className="offcanvas-header">
<p
className="col-6 offcanvas-title"
id="offcanvasExampleLabel"
style={{
fontWeight: "bold",
fontSize: "15px",
width: "150px",
color: "#000000",
}}
>
온/오프라인 사용자
</p>
<h6 className="mt-2" id="roomId">
{" "}
#ASV2AE985{" "}
</h6>
<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-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<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" }}>
<h5 className="col mt-2">오프라인 사용자</h5>
</div>
<ul className="mx-5">
<li>CHERRY</li>
<li>JAEYEON</li>
<li>SEOYEON</li>
<li>JIWEON</li>
<li>BYOUNGYUN</li>
</ul>
</div>
</div>
<div>
<div className="d-flex flex-row-reverse">
<button
type="button"
className="m-3 rounded"
data-bs-toggle="modal"
data-bs-target="#exitRoom"
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">
<button
type="submit"
className="col-2 p-1 btn btn-primary"
style={{ width: "120px" }}
>
카카오로 초대
</button>
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
style={{ width: "120px" }}
onClick={roomIdCopy}
>
방 Id 복사
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default LeftHamberger;
client/src/components/Room/LeftHamburger.js 0 → 100644
View file @ 4444506d
import backward from "../../backward.png";
import ChannelSingle from "./ChannelSingle";
const LeftHamberger = () => {
function roomIdCopy() {
const t = document.querySelector("#roomId").innerText;
console.log(t);
navigator.clipboard.writeText(t);
document.execCommand("copy");
}
return (
<div>
<div>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#left-hamburger"
aria-controls="left-hamburger"
aria-expanded="false"
aria-label="Toggle navigation"
style={{ border: "#f4c1f2" }}
>
<span className="navbar-toggler-icon"></span>
</button>
</div>
<div
className="offcanvas offcanvas-start"
style={{ width: "330px" }}
tabIndex="-1"
id="left-hamburger"
aria-labelledby="hamburgerLabel"
>
<div className="offcanvas-header">
<p
className="col-6 offcanvas-title"
id="offcanvasExampleLabel"
style={{
fontWeight: "bold",
fontSize: "15px",
width: "150px",
color: "#000000",
}}
>
온/오프라인 사용자
</p>
<h6 className="mt-2" id="roomId">
{" "}
#ASV2AE985{" "}
</h6>
<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-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<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" }}>
<h5 className="col mt-2">오프라인 사용자</h5>
</div>
<ul className="mx-5">
<li>CHERRY</li>
<li>JAEYEON</li>
<li>SEOYEON</li>
<li>JIWEON</li>
<li>BYOUNGYUN</li>
</ul>
</div>
</div>
<div>
<div className="d-flex flex-row-reverse">
<button
type="button"
className="m-3 rounded"
data-bs-toggle="modal"
data-bs-target="#inviteRoom"
style={{
height: "30px",
fontWeight: "bold",
backgroundColor: "#E0CEE8",
color: "black",
border: "1px #D64D61",
}}
>
초대
</button>
<div
className="modal fade"
id="inviteRoom"
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">
<button
type="submit"
className="col-2 p-1 btn btn-primary"
style={{ width: "120px" }}
>
카카오로 초대
</button>
{/*
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#copyRoomId"
onClick={roomIdCopy}
style={{ width: "120px" }}
>
방 Id 복사
</button> */}
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
style={{ width: "120px" }}
onClick={roomIdCopy}
>
방 Id 복사
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default LeftHamberger;
client/src/components/Room/RightHamberger.js → client/src/components/Room/RightHamburger.js
View file @ 4444506d
import { useState } from "react";
import ChannelSingle from './ChannelSingle' import ChannelSingle from './ChannelSingle'
const RightHamberger = () => { const RightHamberger = () => {
function copyInput() { const [admin, setAdmin] = useState('true')
const t = document.querySelector('#roomId').innerText;
console.log(t)
navigator.clipboard.writeText(t);
document.execCommand('copy');
}
return ( return (
<div> <div>
<div> <div>
...@@ -75,6 +69,20 @@ const RightHamberger = () => { ...@@ -75,6 +69,20 @@ const RightHamberger = () => {
> >
퇴장 퇴장
</button> </button>
{admin ? <button
type="button"
className="m-3 rounded"
style={{
height: '30px',
fontWeight: 'bold',
backgroundColor: '#E0CEE8',
color: 'black',
border: '1px #D64D61',
}}
>
설정
</button> : null}
<div <div
className="modal fade" className="modal fade"
id="exitRoom" id="exitRoom"
......
controllers/room.controller.js
View file @ 4444506d
import { Room } from "../models/index.js"; import { Room } from "../models/index.js";
//import { customAlphabet } from 'nanoid'
import config from "../config/app.config.js";
import isLength from 'validator/lib/isLength.js'
const test = async (req, res) => { //const nanoid = customAlphabet('1234567890abcdef', 10)
const roomJoin = async (req, res) => {
try { try {
console.log("room= ", req.body); console.log("room= ", req.body);
res.json("안녕"); res.json("안녕");
...@@ -10,6 +15,35 @@ const test = async (req, res) => { ...@@ -10,6 +15,35 @@ const test = async (req, res) => {
} }
}; };
const roomCreate = async (req, res) => {
const { name, owner, member, profileimg } = req.body;
const id = nanoid()
const Id = await Room.findOne({ id })
while (Id) {
id = nanoid()
Id = await Room.findOne({ id })
}
try {
if (!isLength(name, { min: 3, max: 20 })) {
return res.status(422).send('방이름은 3-20자여야 합니다.')
}
const newRoom = await new Room({
id,
name,
owner,
member,
profileimg,
}).save()
// console.log(newRoom)
res.json(newRoom)
} catch (error) {
console.log(error)
res.status(500).send('방생성 에러')
}
}
export default { export default {
test, roomJoin, roomCreate
}; };
models/room.model.js
View file @ 4444506d
...@@ -17,6 +17,10 @@ const RoomModel = (sequelize) => { ...@@ -17,6 +17,10 @@ const RoomModel = (sequelize) => {
member: { member: {
type: DataTypes.ARRAY(DataTypes.INTEGER), type: DataTypes.ARRAY(DataTypes.INTEGER),
}, },
profileimg: {
type: DataTypes.STRING,
default: '3cd14b9bcb2007f324fcb82e0b566cce',
},
channel: { channel: {
type: DataTypes.ARRAY(DataTypes.JSON), type: DataTypes.ARRAY(DataTypes.JSON),
}, },
......
routes/room.route.js
View file @ 4444506d
...@@ -3,6 +3,8 @@ import roomCrtl from "../controllers/room.controller.js"; ...@@ -3,6 +3,8 @@ import roomCrtl from "../controllers/room.controller.js";
const router = express.Router(); const router = express.Router();
router.route("/").post(roomCrtl.test); //router.route("/").get(roomCrtl.login);
router.route("/room/create")
.post(roomCrtl.roomCreate)
export default router; export default router;
\ No newline at end of file
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