Skip to content

GitLab

Commit 75d06d23 authored by 우지원's avatar 우지원
Browse files

e

parent e2c8428f
Show whitespace changes
Inline Side-by-side
client/src/apis/room.api.js
View file @ 75d06d23
import axios from "axios"; import axios from "axios";
const login = async (payload) => { const create = async (payload) => {
const { data } = await axios.post("/api/login", payload); const { data } = await axios.post("/api/room/create", payload);
return data; return data;
}; };
const signup = async (payload) => { const join = async (payload) => {
const { data } = await axios.post("/api/signup", payload); const { data } = await axios.put("/api/room/join", payload);
return data; return data;
}; };
const roomApi = { login, signup }; const roomApi = { create, join };
export default roomApi; export default roomApi;
client/src/components/Home/AddRoom.js
View file @ 75d06d23
import { useEffect, useState } from "react"; import CreateRoom from "./CreateRoom";
import axios from 'axios' import JoinRoom from "./JoinRoom";
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">
...@@ -110,11 +53,19 @@ const AddRoom = () => { ...@@ -110,11 +53,19 @@ const AddRoom = () => {
backgroundColor: "#E0CEE8", backgroundColor: "#E0CEE8",
borderColor: "#E0CEE8", borderColor: "#E0CEE8",
}} }}
>방참여하기
</button>
<div
className="modal fade"
id="joinModal"
tabIndex="-1"
aria-labelledby="joinModalLabel"
aria-hidden="true"
> >
<div style={{ width: "6rem" }} > <div className="modal-dialog">
방참여하기 <JoinRoom />
</div>
</div> </div>
</button>
</div> </div>
<div className="col-6 d-flex justify-content-center"> <div className="col-6 d-flex justify-content-center">
<button <button
...@@ -130,95 +81,19 @@ const AddRoom = () => { ...@@ -130,95 +81,19 @@ const AddRoom = () => {
backgroundColor: "#f5cfe3", backgroundColor: "#f5cfe3",
borderColor: "#f5cfe3", borderColor: "#f5cfe3",
}} }}
> >방생성하기
<div style={{ width: "6rem" }} >
방생성하기
</div>
</button> </button>
</div> <div
</div> className="modal fade"
</div> id="makeModal"
</div> tabIndex="-1"
</div> aria-labelledby="makeModalLabel"
</div> aria-hidden="true"
>
{/* 방참여하기 모달 */}
<div className="form" onSubmit={handleSubmit}>
<div className="modal" id="joinModal" tabIndex="-1" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<div>방참여하기</div>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<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 className="modal-footer">
<button type="submit" className="btn btn-primary">
확인
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{/* 방생성하기 모달 */}
<div className="form" onSubmit={handleSubmit}>
<div className="modal" id="makeModal" tabIndex="-1" aria-hidden="true">
<div className="modal-dialog"> <div className="modal-dialog">
<div className="modal-content"> <CreateRoom />
<div className="modal-header">
<div>방생성하기</div>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div> </div>
<div className="modal-body">
<h6>방프로필사진</h6>
<div className="mb-4">
<input
type="file"
className="upload-hidden"
onChange={handleChange}
name="profileimg"
value={room.profileimg} />
</div>
<h6>방이름</h6>
<div className="input-group">
<input
type="text"
className="form-control"
placeholder="방이름을 입력해주세요"
aria-label="방이름 입력해주세요"
aria-describedby="basic-addon1"
onChange={handleChange}
name="name"
value={room.name}
/>
</div> </div>
<div className="modal-footer">
<button type="submit" className="btn btn-primary">
생성
</button>
</div> </div>
</div> </div>
</div> </div>
......
client/src/components/Home/CreateRoom.js 0 → 100644
View file @ 75d06d23
import { useEffect, useState } from "react";
import roomApi from "../../apis/room.api";
const userId = localStorage.getItem('user');
console.log(userId)
const INIT_ROOM = {
name: '',
profileimg: '',
channel: ['회의'],
}
const CreateRoom = () => {
const [room, setRoom] = useState(INIT_ROOM)
const [error, setError] = useState("");
const [success, setSuccess] = useState(false)
const [disabled, setDisabled] = useState(true)
useEffect(() => {
const isRoom = Object.values(roomApi).every((el) => Boolean(el));
isRoom ? setDisabled(false) : setDisabled(true);
}, [room]);
// const userId = localStorage.getItem('user');
// setRoom({...room, owner: userId})
// setRoom({...room, member: userId})
function handleChange(event) {
console.log(room)
const { name, value } = event.target
setRoom({ ...room, [name]: value })
}
console.log(room)
async function handleSubmit(e) {
e.preventDefault()
console.log('룸룸', room)
try {
const res = await roomApi.create(room)
// console.log(res)
const Id = res.id
// console.log(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 (
<div className="modal-content" >
<form onSubmit={handleSubmit}>
<div className="modal-header">
<div className="modal-title" id="makeModal">방생성하기</div>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body">
<h6>방프로필사진</h6>
<div className="mb-4">
<input
type="file"
className="upload-hidden"
onChange={handleChange}
accept="image/*"
name="profileimg"
value={room.profileimg} />
</div>
<h6>방이름</h6>
<div className="input-group">
<input
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>
</form>
</div >
);
};
export default CreateRoom;
\ No newline at end of file
client/src/components/Home/JoinRoom.js 0 → 100644
View file @ 75d06d23
import { useEffect, useState } from "react";
import { Redirect } from "react-router-dom";
import roomApi from "../../apis/room.api";
const userId = localStorage.getItem('user');
const JoinRoom = () => {
const [roomId, setRoomId] = useState('');
const [disabled, setDisabled] = useState(true);
const [error, setError] = useState("");
const [success, setSuccess] = useState(false);
useEffect(() => {
const isRoom = Object.values(roomApi).every((el) => Boolean(el));
isRoom ? setDisabled(false) : setDisabled(true);
}, [roomId]);
function handleChange(event) {
const { value } = event.target;
setRoomId(value);
console.log(roomId);
}
async function handleSubmit(e) {
e.preventDefault();
try {
// setLoading(true);
// setError("");
console.log('userId:',userId)
console.log('roomId:',roomId)
const data = await roomApi.join({userId: userId, roomId: roomId});
console.log(data);
setSuccess(true);
} catch (error) {
// catchErrors(error, setError);
} finally {
// setLoading(false);
}
}
if (success) {
}
return (
<div className="modal-content">
<form onSubmit={handleSubmit}>
<div className="modal-header">
<div className="modal-title" id="joinModal">방참여하기</div>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body">
<div className="input-group mb-3">
<input
type="text"
className="form-control"
placeholder="참여코드를 입력하세요"
aria-label="참여코드를 입력하세요"
aria-describedby="basic-addon1"
name="roomId"
value={roomId}
onChange={handleChange}
/>
</div>
<div className="modal-footer">
<button type="submit" className="btn btn-primary">
확인
</button>
</div>
</div>
</form>
</div>
);
};
export default JoinRoom;
\ No newline at end of file
client/src/components/SignUp.js
View file @ 75d06d23
...@@ -38,7 +38,7 @@ const Signup = () => { ...@@ -38,7 +38,7 @@ const Signup = () => {
async function handleSubmit() { async function handleSubmit() {
try { try {
const data = await axios.post("https://localhost:8080/api/room/1/1",user) const data = await axios.post("/api/room/1/1",user)
// setLoading(true); // setLoading(true);
// setError(""); // setError("");
// const success = await login(user.email, user.password); // const success = await login(user.email, user.password);
......
controllers/room.controller.js
View file @ 75d06d23
import { Room } from "../models/index.js"; import { Room, User } from "../models/index.js";
//import { customAlphabet } from 'nanoid' import { customAlphabet } from 'nanoid'
import config from "../config/app.config.js"; import config from "../config/app.config.js";
import isLength from 'validator/lib/isLength.js' import isLength from 'validator/lib/isLength.js'
//const nanoid = customAlphabet('1234567890abcdef', 10) const nanoid = customAlphabet('1234567890abcdef', 10)
const roomJoin = async (req, res) => { const joinRoom = async (req, res) => {
try { console.log('req.body.value:', req.body)
console.log("room= ", req.body); const { userId, roomId } = req.body
res.json("안녕"); console.log('userId:', userId)
} catch (error) { console.log('roomId:', roomId)
console.log(error); const room_Id = await Room.findOne({ where: { id: roomId } });
return res.status(500).send("안녕 중 에러"); console.log('room_Id:', room_Id)
if (room_Id) {
//roomId에 일치하는 방의 member정보에 userId 저장하기
console.log('room_Id.member1:', room_Id.member)
room_Id.member.push(userId)
console.log('room_Id.member2:', room_Id.member)
await Room.update({ 'member': room_Id.member }, { where: { id: roomId } })
const roomID = await Room.findOne({ where: { id: roomId } });
console.log('room_Id2:', roomID.member)
//userId에 일치하는 사용자의 roomNumber에 roomId저장하기
// const user_Id = await User.findOne({ where: { id: userId } });
// console.log('user_Id:', user_Id)
// console.log('user_Id.roomNumber1:', user_Id.roomNumber)
// user_Id.roomNumber.push(roomId)
// console.log('user_Id.roomNumber2:', user_Id.roomNumber)
// await User.update({ 'roomNumber': roomId }, { where: { id: userId } })
// const userID = await User.findOne({ where: { id: userId } });
// console.log('user_Id2:', userID.roomNumber)
} else {
return res.status(422).send('참여코드와 일치하는 방이 존재하지 않습니다.')
} }
}; };
const roomCreate = async (req, res) => { // const changemember = async (req, res) => {
const { name, owner, member, profileimg } = req.body; // const { userId, roomId } = req.body
// // console.log(roomId)
// let room = await Room.findOne({ roomId: roomId }).select('member')
// const isPresent = room.member.indexOf(userId)
// indexOf : userId가 몇번째 인덱스인지 찾기
// try {
// if (isPresent < 0) {
// const memberId = room.member.push(userId)
// await Room.updateOne({ 'roomId': roomId }, { 'member': room.member })
// // console.log('room.member 업데이트 완료')
// return res.json(true)
// }
// else {
// return res.json(false)
// }
// } catch (error) {
// res.status(500).send('멤버 업데이트 실패')
// }
// }
const createRoom = async (req, res) => {
console.log('룸정보', req.body)
const { name, owner, member, profileimg, channel } = req.body;
console.log('owner:', owner)
const id = nanoid() const id = nanoid()
const Id = await Room.findOne({ id }) console.log('id:', id)
const Id = await Room.findOne({ where: { id: id } });
console.log("Id중복확인:", Id)
while (Id) { while (Id) {
id = nanoid() const id = nanoid()
Id = await Room.findOne({ id }) const Id = await Room.findOne({ where: { id: id } });
} }
try { try {
if (!isLength(name, { min: 3, max: 20 })) { if (!isLength(name, { min: 3, max: 20 })) {
console.log('방이름은 3-20자여야 합니다.')
return res.status(422).send('방이름은 3-20자여야 합니다.') return res.status(422).send('방이름은 3-20자여야 합니다.')
} }
const newRoom = await new Room({ const newRoom = await Room.create({
id, id: id,
name, name: name,
owner, owner: owner,
member, member: member,
profileimg, profileimg: profileimg,
}).save() channel: channel,
// console.log(newRoom) }).then(_ => console.log('room정보:', id, name, owner, member, profileimg, channel))
console.log('newRoom:', newRoom)
res.json(newRoom) res.json(newRoom)
} catch (error) { } catch (error) {
console.log(error) console.log(error)
...@@ -45,5 +92,5 @@ const roomCreate = async (req, res) => { ...@@ -45,5 +92,5 @@ const roomCreate = async (req, res) => {
} }
export default { export default {
roomJoin, roomCreate joinRoom, createRoom
}; };
index.js
View file @ 75d06d23
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import dotenv from "dotenv"; import dotenv from "dotenv";
import app from "./app.js"; import app from "./app.js";
import appConfig from "./config/app.config.js"; import appConfig from "./config/app.config.js";
import { sequelize, User } from "./models/index.js"; import { Room, sequelize, User } from "./models/index.js";
dotenv.config({ dotenv.config({
path: `${ path: `${
...@@ -15,12 +15,22 @@ sequelize ...@@ -15,12 +15,22 @@ sequelize
.then(async () => { .then(async () => {
console.log(" DB 연결 성공"); console.log(" DB 연결 성공");
await User.create({ await User.create({
id: "9999",
name: "admin", name: "admin",
email: "admin", email: "admin",
password: "admin!", password: "admin!",
gender: 0, gender: 0,
}); });
await Room.create({
id: "1234567890",
name: "room",
owner: [ '600112d16d09ac6b7892d900' ],
member: [ '600112d16d09ac6b7892d900' ],
profileimg: "C:\fakepath\스크린샷(1).png",
channel: [ '회의' ],
});
app.listen(appConfig.port, () => { app.listen(appConfig.port, () => {
console.log(`Server is running on port ${appConfig.port}`); console.log(`Server is running on port ${appConfig.port}`);
}); });
......
models/room.model.js
View file @ 75d06d23
...@@ -5,30 +5,29 @@ const RoomModel = (sequelize) => { ...@@ -5,30 +5,29 @@ const RoomModel = (sequelize) => {
"room", "room",
{ {
id: { id: {
type: DataTypes.INTEGER, type: DataTypes.STRING,
primaryKey: true, primaryKey: true,
}, },
name: { name: {
type: DataTypes.STRING, type: DataTypes.STRING,
}, },
owner: { owner: {
type: DataTypes.STRING, type: DataTypes.ARRAY(DataTypes.STRING),
}, },
member: { member: {
type: DataTypes.ARRAY(DataTypes.INTEGER), type: DataTypes.ARRAY(DataTypes.STRING),
}, },
profileimg: { profileimg: {
type: DataTypes.STRING, type: DataTypes.STRING,
default: '3cd14b9bcb2007f324fcb82e0b566cce',
}, },
channel: { channel: {
type: DataTypes.ARRAY(DataTypes.JSON), type: DataTypes.ARRAY(DataTypes.STRING),
}, },
}, },
{ timestamps: true } { timestamps: true }
); );
return Room; return Room;
}; };
export default RoomModel; export default RoomModel;
models/user.model.js
View file @ 75d06d23
...@@ -23,10 +23,10 @@ const UserModel = (sequelize) => { ...@@ -23,10 +23,10 @@ const UserModel = (sequelize) => {
type: DataTypes.INTEGER, type: DataTypes.INTEGER,
}, },
phone: { phone: {
type: DataTypes.STRING, type: DataTypes.INTEGER,
}, },
img: { img: {
type: DataTypes.ARRAY(DataTypes.INTEGER), type: DataTypes.STRING,
}, },
roomNumber: { roomNumber: {
type: DataTypes.ARRAY(DataTypes.STRING), type: DataTypes.ARRAY(DataTypes.STRING),
......
package.json
View file @ 75d06d23
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
"express": "4.17.1", "express": "4.17.1",
"http": "0.0.1-security", "http": "0.0.1-security",
"jsonwebtoken": "^8.5.1", "jsonwebtoken": "^8.5.1",
"nanoid": "^3.1.20",
"nodemon": "^2.0.7", "nodemon": "^2.0.7",
"pg": "^8.6.0", "pg": "^8.6.0",
"pg-hstore": "^2.3.4", "pg-hstore": "^2.3.4",
......
routes/index.js
View file @ 75d06d23
...@@ -5,6 +5,6 @@ import roomRouter from "./room.route.js"; ...@@ -5,6 +5,6 @@ import roomRouter from "./room.route.js";
const router = express.Router(); const router = express.Router();
router.use("/", userRouter); router.use("/", userRouter);
router.use("/room/:userId/:channelId", roomRouter); router.use("/room", roomRouter);
export default router; export default router;
routes/room.route.js
View file @ 75d06d23
...@@ -3,8 +3,10 @@ import roomCrtl from "../controllers/room.controller.js"; ...@@ -3,8 +3,10 @@ import roomCrtl from "../controllers/room.controller.js";
const router = express.Router(); const router = express.Router();
//router.route("/").get(roomCrtl.login); router.route("/create")
router.route("/room/create") .post(roomCrtl.createRoom)
.post(roomCrtl.roomCreate)
router.route("/join")
.put(roomCrtl.joinRoom)
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