Skip to content

GitLab

Commit e74098fc authored by 이재연's avatar 이재연
Browse files

거의다아다다ㅏ다다닫다다다다닫다

parents bbc945b7 93d06f1e
Show whitespace changes
Inline Side-by-side
client/src/apis/room.api.js
View file @ e74098fc
...@@ -5,6 +5,11 @@ const getRoom = async (id) => { ...@@ -5,6 +5,11 @@ const getRoom = async (id) => {
return data; 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 create = async (formData) => {
const { data } = await axios.post("/api/room/create", formData); const { data } = await axios.post("/api/room/create", formData);
return data; return data;
...@@ -15,6 +20,6 @@ const join = async (payload) => { ...@@ -15,6 +20,6 @@ const join = async (payload) => {
return data; return data;
}; };
const roomApi = { getRoom, create, join }; const roomApi = { getRoom, exitRoom, create, join };
export default roomApi; export default roomApi;
client/src/components/Home/RoomSingle.js
View file @ e74098fc
...@@ -6,7 +6,7 @@ import catchErrors from "../../context/catchError"; ...@@ -6,7 +6,7 @@ import catchErrors from "../../context/catchError";
const id = localStorage.getItem("user"); const id = localStorage.getItem("user");
const INIT_ROOM = { const INIT_ROOM = {
roomId:"", roomId: "",
name: "", name: "",
profileimg: "", profileimg: "",
member: "", member: "",
...@@ -15,7 +15,7 @@ const RoomSingle = () => { ...@@ -15,7 +15,7 @@ const RoomSingle = () => {
const [room, setRoom] = useState([INIT_ROOM]); const [room, setRoom] = useState([INIT_ROOM]);
const [error, setError] = useState(""); const [error, setError] = useState("");
const channelId = 'main'; const channelId = 'main';
const {roomId}=useParams(room.roomId); const { roomId } = useParams(room.roomId);
async function getJoinRoom(Id) { async function getJoinRoom(Id) {
try { try {
const User = await userApi.getUser(Id); const User = await userApi.getUser(Id);
...@@ -24,7 +24,7 @@ const RoomSingle = () => { ...@@ -24,7 +24,7 @@ const RoomSingle = () => {
let roomlist = []; let roomlist = [];
for (let prop in Room) { for (let prop in Room) {
roomlist.push({ roomlist.push({
roomId:Room[prop].id, roomId: Room[prop].id,
name: Room[prop].name, name: Room[prop].name,
profileimg: Room[prop].profileimg, profileimg: Room[prop].profileimg,
member: Room[prop].member.length, member: Room[prop].member.length,
...@@ -38,14 +38,17 @@ const RoomSingle = () => { ...@@ -38,14 +38,17 @@ const RoomSingle = () => {
useEffect(() => { useEffect(() => {
getJoinRoom(id); getJoinRoom(id);
}, [id]); }, [id]);
console.log(room)
const { profileimg } = room; const { profileimg } = room;
return ( return (
<div> <div>
{room && {room &&
room.map((el) => ( room.map((el) => (
<div>
{room === INIT_ROOM ? (<div></div>): (
<Link <Link
to={`/room/${el.roomId}/main`} to={`/room/${el.roomId}/${channelId}`}
className="text-decoration-none text-dark" className="text-decoration-none text-dark"
> >
<div <div
...@@ -72,7 +75,8 @@ const RoomSingle = () => { ...@@ -72,7 +75,8 @@ const RoomSingle = () => {
</div> </div>
<div className="ms-auto mt-2"> {el.member}/100 </div> <div className="ms-auto mt-2"> {el.member}/100 </div>
</div> </div>
</Link> </Link>)}
</div>
))} ))}
</div> </div>
); );
......
client/src/components/Room/ChannelSingle.js
View file @ e74098fc
import { Link, Route, Switch, useParams } from 'react-router-dom' import { Link, useParams } from 'react-router-dom'
const ChannelSingle = (props) => { const ChannelSingle = (props) => {
const { roomId, channelId } = useParams() const { roomId, channelId } = useParams()
......
client/src/components/Room/RightHamburger.js
View file @ e74098fc
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useParams } from "react-router-dom"; import { Link, useParams } from "react-router-dom";
import ChannelSingle from "./ChannelSingle"; import ChannelSingle from "./ChannelSingle";
import RoomApi from "../../apis/room.api"; import RoomApi from "../../apis/room.api";
import roomApi from "../../apis/room.api"; import roomApi from "../../apis/room.api";
...@@ -9,42 +9,40 @@ const INIT_CHANNEL = { ...@@ -9,42 +9,40 @@ const INIT_CHANNEL = {
channelName: "", channelName: "",
joinName: [], joinName: [],
}; };
const INIT_ROOM = {
name: "",
};
const RightHamburger = () => { const RightHamburger = () => {
const [channel, setChannel] = useState([INIT_CHANNEL]); const [channel, setChannel] = useState([INIT_CHANNEL]);
const [room, setRoom] = useState([INIT_ROOM]);
const { roomId } = useParams(); const { roomId } = useParams();
const [error, setError] = useState(""); const [error, setError] = useState("");
const id = localStorage.getItem('user');
async function getroom(Id) { async function exitRoom() {
console.log('id, roomid정보', id, roomId)
try { try {
const Room = await roomApi.getRoom([Id]); const data = await roomApi.exitRoom({ id, roomId })
setRoom({...room, name:Room[0].name}) console.log(data)
} catch (error) { } catch (error) {
catchErrors(error, setError); catchErrors(error, setError);
} }
} }
async function getChannel(roomId) { async function getChannel(roomId) {
// console.log('roomId', roomId) // console.log('roomId', roomId)
const ID = roomId; const ID = roomId
try { try {
const data = await roomApi.getRoom([ID]); const data = await roomApi.getRoom([ID]);
const Channel = data[0].channel; const Channel = data[0].channel
// console.log('방데이터:', Channel) console.log('방데이터:', Channel)
const channelList = []; const channelList = [];
for (const prop in Channel) { for (const prop in Channel) { // Channel의 항목(prop)으로 작업을 실행합니다
// Channel의 항목(prop)으로 작업을 실행합니다
for (const key in Channel[prop]) { for (const key in Channel[prop]) {
// console.log(key) console.log(key)
// console.log(prop) console.log(prop)
// console.log(Channel[prop][key]) console.log(Channel[prop][key])
channelList.push({ channelList.push({
channelName: key, channelName: key,
joinName: Channel[prop][key], joinName: Channel[prop][key]
}); });
} }
} }
...@@ -53,6 +51,7 @@ const RightHamburger = () => { ...@@ -53,6 +51,7 @@ const RightHamburger = () => {
catchErrors(error, setError); catchErrors(error, setError);
} }
} }
// console.log(channel) // console.log(channel)
useEffect(() => { useEffect(() => {
...@@ -115,15 +114,43 @@ const RightHamburger = () => { ...@@ -115,15 +114,43 @@ const RightHamburger = () => {
aria-label="Close" aria-label="Close"
></button> ></button>
</div> </div>
<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>
<ChannelSingle channel={channel} /> <ChannelSingle channel={channel} />
<div> <div>
<div className="d-flex flex-row-reverse"> <div className="d-flex flex-row-reverse">
<button <button
type="button" type="button"
className="m-3 rounded" className="m-3 rounded text-white"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#inviteRoom" 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"
style={{ style={{
height: "30px", height: "30px",
fontWeight: "bold", fontWeight: "bold",
...@@ -132,11 +159,13 @@ const RightHamburger = () => { ...@@ -132,11 +159,13 @@ const RightHamburger = () => {
border: "1px #D64D61", border: "1px #D64D61",
}} }}
> >
초대 설정
</button> </button>
) : null} */}
<div <div
className="modal fade" className="modal fade"
id="inviteRoom" id="exitRoom"
tabIndex="-1" tabIndex="-1"
aria-labelledby="exitRoomLabel" aria-labelledby="exitRoomLabel"
aria-hidden="true" aria-hidden="true"
...@@ -152,63 +181,40 @@ const RightHamburger = () => { ...@@ -152,63 +181,40 @@ const RightHamburger = () => {
></button> ></button>
</div> </div>
<div className="modal-body d-flex justify-content-center"> <div className="modal-body d-flex justify-content-center">
어떤 방식으로 초대하시겠습니까? 이방에서 퇴장하시겠습니까?
</div> </div>
<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/${id}`} className="col-2 p-1 btn btn-primary">
<button <button
type="submit" type="button"
className="col-2 p-1 btn btn-primary" onClick={exitRoom}
style={{ width: "120px" }} className="btn btn-primary"
data-bs-dismiss="modal"
> >
카카오로 초대 예
</button> </button>
{/* </Link>
<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 <button
type="submit" type="submit"
className="col-2 p-1 btn btn-primary" className="btn btn-primary"
data-bs-dismiss="modal" data-bs-dismiss="modal"
style={{ width: "120px" }}
onClick={roomIdCopy}
> >
방 Id 복사 아니요
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div> </div>
<div> </div>
<button <div className="d-flex flex-row-reverse">
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 <button
type="button" type="button"
className="m-3 rounded" className="m-3 rounded"
data-bs-toggle="modal"
data-bs-target="#inviteRoom"
style={{ style={{
height: "30px", height: "30px",
fontWeight: "bold", fontWeight: "bold",
...@@ -217,13 +223,11 @@ const RightHamburger = () => { ...@@ -217,13 +223,11 @@ const RightHamburger = () => {
border: "1px #D64D61", border: "1px #D64D61",
}} }}
> >
설정 초대
</button> </button>
) : null} */}
<div <div
className="modal fade" className="modal fade"
id="exitRoom" id="inviteRoom"
tabIndex="-1" tabIndex="-1"
aria-labelledby="exitRoomLabel" aria-labelledby="exitRoomLabel"
aria-hidden="true" aria-hidden="true"
...@@ -239,25 +243,25 @@ const RightHamburger = () => { ...@@ -239,25 +243,25 @@ const RightHamburger = () => {
></button> ></button>
</div> </div>
<div className="modal-body d-flex justify-content-center"> <div className="modal-body d-flex justify-content-center">
이방에서 퇴장하시겠습니까? 어떤 방식으로 초대하시겠습니까?
</div> </div>
<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/:id"> */}
<button <button
type="submit" type="submit"
className="col-2 p-1 btn btn-primary" className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal" style={{ width: "120px" }}
> >
예 카카오로 초대
</button> </button>
{/* </Link> */}
<button <button
type="submit" type="submit"
className="col-2 p-1 btn btn-primary" className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal" data-bs-dismiss="modal"
style={{ width: "120px" }}
onClick={roomIdCopy}
> >
아니요 방 Id 복사
</button> </button>
</div> </div>
</div> </div>
...@@ -268,9 +272,7 @@ const RightHamburger = () => { ...@@ -268,9 +272,7 @@ const RightHamburger = () => {
</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 @ e74098fc
...@@ -2,7 +2,6 @@ import { Room, User } from "../models/index.js"; ...@@ -2,7 +2,6 @@ import { Room, User } from "../models/index.js";
import { customAlphabet } from "nanoid"; import { customAlphabet } from "nanoid";
import isLength from "validator/lib/isLength.js"; import isLength from "validator/lib/isLength.js";
import RoomModel from "../models/room.model.js"; import RoomModel from "../models/room.model.js";
import multer from "multer";
const nanoid = customAlphabet("1234567890abcdef", 10); const nanoid = customAlphabet("1234567890abcdef", 10);
...@@ -44,6 +43,7 @@ const joinRoom = async (req, res) => { ...@@ -44,6 +43,7 @@ const joinRoom = async (req, res) => {
} }
}; };
const multer = require("multer");
const upLoadRoomImg = multer({ dest: "roomUploads/" }); const upLoadRoomImg = multer({ dest: "roomUploads/" });
const roomImgUpload = upLoadRoomImg.fields([{ name: "profileimg", maxCount: 1 }]); const roomImgUpload = upLoadRoomImg.fields([{ name: "profileimg", maxCount: 1 }]);
...@@ -91,10 +91,10 @@ const createRoom = async (req, res) => { ...@@ -91,10 +91,10 @@ const createRoom = async (req, res) => {
}; };
const getRoom = async (req, res) => { const getRoom = async (req, res) => {
console.log("fhgfghdgfdgf:", req.body); // console.log("fhgfghdgfdgf:", req.body);
try { try {
const roomlist = await Room.findAll({ where: { id: req.body} }); const roomlist = await Room.findAll({ where: { id: req.body } });
console.log(roomlist); // console.log(roomlist);
res.json(roomlist) res.json(roomlist)
} catch (error) { } catch (error) {
console.log(error); console.log(error);
...@@ -102,6 +102,24 @@ const getRoom = async (req, res) => { ...@@ -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 { export default {
joinRoom, roomImgUpload, createRoom, getRoom joinRoom, roomImgUpload, createRoom, getRoom, exitRoom,
}; };
server/models/room.model.js
View file @ e74098fc
import pkg from 'sequelize'; import { DataTypes } from "sequelize";
const { DataTypes } = pkg;
const RoomModel = (sequelize) => { const RoomModel = (sequelize) => {
const Room = sequelize.define( const Room = sequelize.define(
...@@ -16,7 +15,7 @@ const RoomModel = (sequelize) => { ...@@ -16,7 +15,7 @@ const RoomModel = (sequelize) => {
type: DataTypes.INTEGER, type: DataTypes.INTEGER,
}, },
member: { member: {
type: DataTypes.ARRAY(DataTypes.INTEGER), type: DataTypes.ARRAY(DataTypes.STRING),
//type: DataTypes.STRING, //type: DataTypes.STRING,
}, },
profileimg: { profileimg: {
......
server/routes/room.route.js
View file @ e74098fc
...@@ -3,6 +3,7 @@ import roomCrtl from "../controllers/room.controller.js"; ...@@ -3,6 +3,7 @@ import roomCrtl from "../controllers/room.controller.js";
const router = express.Router(); const router = express.Router();
router.route("/getRoom").post(roomCrtl.getRoom); router.route("/getRoom").post(roomCrtl.getRoom);
router.route("/exitRoom/:id/:roomId").delete(roomCrtl.exitRoom);
router.route("/create").post(roomCrtl.roomImgUpload, roomCrtl.createRoom); router.route("/create").post(roomCrtl.roomImgUpload, roomCrtl.createRoom);
router.route("/join").put(roomCrtl.joinRoom); router.route("/join").put(roomCrtl.joinRoom);
......
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