Skip to content

GitLab

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

퇴장완료!예예~~~

parent d8d3d203
Hide whitespace changes
Inline Side-by-side
client/src/apis/room.api.js
View file @ c5ab0718
......@@ -5,6 +5,11 @@ const getRoom = async (id) => {
return data;
};
const exitRoom = async (ID) => {
const { data } = await axios.delete(`/api/room/exitRoom/${ID.id}/${ID.roomId}`);
return data;
};
const create = async (formData) => {
const { data } = await axios.post("/api/room/create", formData);
return data;
......@@ -15,6 +20,6 @@ const join = async (payload) => {
return data;
};
const roomApi = { getRoom, create, join };
const roomApi = { getRoom, exitRoom, create, join };
export default roomApi;
client/src/components/Home/RoomSingle.js
View file @ c5ab0718
......@@ -6,7 +6,7 @@ import catchErrors from "../../context/catchError";
const id = localStorage.getItem("user");
const INIT_ROOM = {
roomId:"",
roomId: "",
name: "",
profileimg: "",
member: "",
......@@ -15,7 +15,7 @@ const RoomSingle = () => {
const [room, setRoom] = useState([INIT_ROOM]);
const [error, setError] = useState("");
const channelId = 'main';
const {roomId}=useParams(room.roomId);
const { roomId } = useParams(room.roomId);
async function getJoinRoom(Id) {
try {
const User = await userApi.getUser(Id);
......@@ -24,7 +24,7 @@ const RoomSingle = () => {
let roomlist = [];
for (let prop in Room) {
roomlist.push({
roomId:Room[prop].id,
roomId: Room[prop].id,
name: Room[prop].name,
profileimg: Room[prop].profileimg,
member: Room[prop].member.length,
......@@ -38,41 +38,45 @@ const RoomSingle = () => {
useEffect(() => {
getJoinRoom(id);
}, [id]);
console.log(room)
const { profileimg } = room;
return (
<div>
{room &&
room.map((el) => (
<Link
to={`/room/${el.roomId}/${channelId}`}
className="text-decoration-none text-dark"
>
<div
className="d-flex mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }}
<div>
{room === INIT_ROOM ? (<div></div>): (
<Link
to={`/room/${el.roomId}/${channelId}`}
className="text-decoration-none text-dark"
>
<div style={{ width: "37px", height: "37px" }}>
<img
src={`/roomUploads/${el.profileimg}`}
className="rounded-circle"
style={{ width: "37px", height: "37px" }}
/>
</div>
<div
className="mx-3 mt-2"
style={{
width: "250px",
overflow: "scroll",
whiteSpace: "nowrap",
msOverflowStyle: "none",
}}
className="d-flex mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }}
>
{el.name}
<div style={{ width: "37px", height: "37px" }}>
<img
src={`/roomUploads/${el.profileimg}`}
className="rounded-circle"
style={{ width: "37px", height: "37px" }}
/>
</div>
<div
className="mx-3 mt-2"
style={{
width: "250px",
overflow: "scroll",
whiteSpace: "nowrap",
msOverflowStyle: "none",
}}
>
{el.name}
</div>
<div className="ms-auto mt-2"> {el.member}/100 </div>
</div>
<div className="ms-auto mt-2"> {el.member}/100 </div>
</div>
</Link>
</Link>)}
</div>
))}
</div>
);
......
client/src/components/Room/ChannelSingle.js
View file @ c5ab0718
import { Link, Route, Switch, useParams } from "react-router-dom";
import { Link, useParams } from 'react-router-dom'
const ChannelSingle = (props) => {
const { roomId } = useParams();
console.log("props", props.channel);
const { roomId, channelId } = useParams()
console.log('props', props.channel)
console.log('hi', channelId)
return (
<div>
<div className="overflow-auto" style={{ height: "610px" }}>
<div className="overflow-auto" style={{ height: '610px' }}>
{props.channel.map((el) => (
<div className="mb-3">
<Link to={`${roomId}/${el.channelName}`}>
<Link to={`/room/${roomId}/${el.channelName}`}>
<div
className="m-3 p-1 row"
style={{ backgroundColor: "#E0CEE8" }}
style={{ backgroundColor: '#E0CEE8' }}
>
<img
className="col-auto mt-2"
src="/fullSpeaker.png"
width="25px"
height="25px"
/>
<h5 className="col mt-2" style={{ color: "black" }}>
{el.channelName === channelId ? (
<img
className="col-auto mt-2"
src="/fullSpeaker.png"
width="25px"
height="25px"
/>
) : (
<img
className="col-auto mt-2"
src="/emptySpeaker.png"
width="25px"
height="25px"
/>
)}
<h5 className="col mt-2" style={{ color: 'black' }}>
{el.channelName}
</h5>
</div>{" "}
</div>
</Link>
{el.joinName &&
el.joinName.map((e) => (
<div>
<ul className="mx-5" style={{ color: "#76D079" }}>
<ul className="mx-5" style={{ color: '#76D079' }}>
<li>
<p style={{ color: "black" }}>{e}</p>
<p style={{ color: 'black' }}>{e}</p>
</li>
</ul>
</div>
......@@ -39,7 +49,7 @@ const ChannelSingle = (props) => {
))}
</div>
</div>
);
};
)
}
export default ChannelSingle;
export default ChannelSingle
\ No newline at end of file
client/src/components/Room/RightHamburger.js
View file @ c5ab0718
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import ChannelSingle from "./ChannelSingle";
import Rightimg from "../../images/RightHamburgerImg.png";
import RoomApi from "../../apis/room.api";
......@@ -7,206 +7,126 @@ import roomApi from "../../apis/room.api";
import catchErrors from "../../context/catchError";
const INIT_CHANNEL = {
channelName: "",
joinName: [],
};
const INIT_ROOM = {
name: "",
channelName: "",
joinName: [],
};
const RightHamburger = () => {
const [channel, setChannel] = useState([INIT_CHANNEL]);
const [room, setRoom] = useState([INIT_ROOM]);
const { roomId } = useParams();
const [error, setError] = useState("");
const [channel, setChannel] = useState([INIT_CHANNEL]);
const { roomId } = useParams();
const [error, setError] = useState("");
const id = localStorage.getItem('user');
async function exitRoom() {
console.log('id, roomid정보', id, roomId)
try {
const data = await roomApi.exitRoom({ id, roomId })
console.log(data)
} catch (error) {
catchErrors(error, setError);
}
async function getroom(Id) {
try {
const Room = await roomApi.getRoom([Id]);
setRoom({...room, name:Room[0].name})
} catch (error) {
catchErrors(error, setError);
}
}
async function getChannel(roomId) {
// console.log('roomId', roomId)
const ID = roomId;
try {
const data = await roomApi.getRoom([ID]);
const Channel = data[0].channel;
// console.log('방데이터:', Channel)
const channelList = [];
for (const prop in Channel) {
// Channel의 항목(prop)으로 작업을 실행합니다
for (const key in Channel[prop]) {
// console.log(key)
// console.log(prop)
// console.log(Channel[prop][key])
channelList.push({
channelName: key,
joinName: Channel[prop][key],
});
async function getChannel(roomId) {
// console.log('roomId', roomId)
const ID = roomId
try {
const data = await roomApi.getRoom([ID]);
const Channel = data[0].channel
console.log('방데이터:', Channel)
const channelList = [];
for (const prop in Channel) { // Channel의 항목(prop)으로 작업을 실행합니다
for (const key in Channel[prop]) {
console.log(key)
console.log(prop)
console.log(Channel[prop][key])
channelList.push({
channelName: key,
joinName: Channel[prop][key]
});
}
}
setChannel(channelList);
} catch (error) {
catchErrors(error, setError);
}
}
setChannel(channelList);
} catch (error) {
catchErrors(error, setError);
}
}
// console.log(channel)
useEffect(() => {
getChannel(roomId);
getroom(roomId)
}, [roomId]);
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="#right-hamburger"
aria-controls="right-hamburger"
aria-expanded="false"
aria-label="Toggle navigation"
style={{ border: "#f4c1f2" }}
>
<img src={Rightimg} width="50px" height="30px" />
</button>
</div>
<div
className="offcanvas offcanvas-end"
style={{ width: "330px" }}
tabIndex="-1"
id="right-hamburger"
aria-labelledby="hamburgerLabel"
>
<div className="offcanvas-header">
<p
className="col-6 offcanvas-title"
id="offcanvasExampleLabel"
style={{
fontWeight: "bold",
fontSize: "15px",
overflow: "hidden",
whiteSpace: "nowrap",
width: "150px",
color: "#000000",
}}
>
{room.name}
</p>
<h6 className="mt-2" id="roomId">
{" "}
{`${roomId}`}{" "}
</h6>
<button
type="button"
className="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
// console.log(channel)
<ChannelSingle channel={channel} />
useEffect(() => {
// console.log('roomId', roomId)
getChannel(roomId);
}, [roomId]);
return (
<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>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#right-hamburger"
aria-controls="right-hamburger"
aria-expanded="false"
aria-label="Toggle navigation"
style={{ border: "#f4c1f2" }}
>
<img src={Rightimg} width="50px" height="30px" />
</button>
</div>
<div
className="modal fade"
id="inviteRoom"
tabIndex="-1"
aria-labelledby="exitRoomLabel"
aria-hidden="true"
className="offcanvas offcanvas-end"
style={{ width: "330px" }}
tabIndex="-1"
id="right-hamburger"
aria-labelledby="hamburgerLabel"
>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<div className="offcanvas-header">
<p
className="col-6 offcanvas-title"
id="offcanvasExampleLabel"
style={{
fontWeight: "bold",
fontSize: "15px",
overflow: "hidden",
whiteSpace: "nowrap",
width: "150px",
color: "#000000",
}}
>
방 이름{/*Room.name*/}
</p>
<h6 className="mt-2" id="roomId">
{" "}
{`${roomId}`}{" "}
</h6>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
type="button"
className="btn-close text-reset"
data-bs-dismiss="offcanvas"
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>
<button
type="button"
className="m-3 rounded text-white"
data-bs-toggle="modal"
data-bs-target="#exitRoom"
style={{
height: "30px",
fontWeight: "bold",
backgroundColor: "#d86da6",
color: "black",
border: "1px #d86da6",
}}
>
퇴장
</button>
{/* {admin ? (
<ChannelSingle channel={channel} />
<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: "#d86da6",
color: "black",
border: "1px #d86da6",
}}
>
퇴장
</button>
{/* {admin ? (
<button
type="button"
className="m-3 rounded"
......@@ -222,56 +142,57 @@ const RightHamburger = () => {
</button>
) : null} */}
<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/:id"> */}
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
>
예
</button>
{/* </Link> */}
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
>
아니요
</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/${id}`} className="col-2 p-1 btn btn-primary">
{/* <div onSubmit={exitSubmit}> */}
<button
type="button"
onClick={exitRoom}
className="btn btn-primary"
data-bs-dismiss="modal"
>
예
</button>
{/* </div> */}
</Link>
<button
type="submit"
className="btn btn-primary"
data-bs-dismiss="modal"
>
아니요
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
);
};
export default RightHamburger;
export default RightHamburger;
\ No newline at end of file
server/controllers/room.controller.js
View file @ c5ab0718
......@@ -2,7 +2,6 @@ import { Room, User } from "../models/index.js";
import { customAlphabet } from "nanoid";
import isLength from "validator/lib/isLength.js";
import RoomModel from "../models/room.model.js";
import multer from "multer";
const nanoid = customAlphabet("1234567890abcdef", 10);
......@@ -44,6 +43,7 @@ const joinRoom = async (req, res) => {
}
};
const multer = require("multer");
const upLoadRoomImg = multer({ dest: "roomUploads/" });
const roomImgUpload = upLoadRoomImg.fields([{ name: "profileimg", maxCount: 1 }]);
......@@ -91,10 +91,10 @@ const createRoom = async (req, res) => {
};
const getRoom = async (req, res) => {
console.log("fhgfghdgfdgf:", req.body);
// console.log("fhgfghdgfdgf:", req.body);
try {
const roomlist = await Room.findAll({ where: { id: req.body} });
console.log(roomlist);
const roomlist = await Room.findAll({ where: { id: req.body } });
// console.log(roomlist);
res.json(roomlist)
} catch (error) {
console.log(error);
......@@ -102,6 +102,24 @@ const getRoom = async (req, res) => {
}
};
const exitRoom = async (req, res) => {
const { id, roomId } = req.params
console.log(id, roomId)
const room = await Room.findOne({ where: { id: roomId } });
console.log(room.member)
const index = room.member.indexOf(id)
console.log('index',index)
room.member.splice(index,1)
await Room.update({ member: room.member }, { where: { id: roomId } });
const user = await User.findOne({ where: { id: id } });
console.log(user.roomNumber)
const index2 = user.roomNumber.indexOf(id)
console.log('index',index2)
user.roomNumber.splice(index2,1)
await User.update({ roomNumber: user.roomNumber }, { where: { id: id } });
}
export default {
joinRoom, roomImgUpload, createRoom, getRoom
joinRoom, roomImgUpload, createRoom, getRoom, exitRoom,
};
server/index.js
View file @ c5ab0718
......@@ -27,7 +27,7 @@ sequelize
id: "1234567abc",
name: "room",
owner: 8888,
member: [8888],
member: ['8888', '9999'],
profileimg: "defaultimg",
});
......@@ -35,7 +35,7 @@ sequelize
id: "abc7654321",
name: "room1",
owner: 9999,
member: [9999],
member: ['9999'],
profileimg: "defaultimg",
});
......
server/models/room.model.js
View file @ c5ab0718
import pkg from 'sequelize';
const { DataTypes } = pkg;
import { DataTypes } from "sequelize";
const RoomModel = (sequelize) => {
const Room = sequelize.define(
......@@ -16,7 +15,7 @@ const RoomModel = (sequelize) => {
type: DataTypes.INTEGER,
},
member: {
type: DataTypes.ARRAY(DataTypes.INTEGER),
type: DataTypes.ARRAY(DataTypes.STRING),
//type: DataTypes.STRING,
},
profileimg: {
......
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