Skip to content

GitLab

Commit d8d3d203 authored by Kim, Chaerin's avatar Kim, Chaerin
Browse files

merge-all

parent 3e9c534c
Show whitespace changes
Inline Side-by-side
client/src/components/Room/RoomHeader.js
View file @ d8d3d203
import { Link } from 'react-router-dom'
import { useEffect, useState } from "react";
import { useParams } from "react-router";
import roomApi from '../../apis/room.api';
import catchErrors from '../../context/catchError';
const INIT_ROOM = {
profileimg: "",
};
const RoomHeader = () => {
const {roomId}=useParams();
const [room, setRoom] = useState([INIT_ROOM]);
const [error, setError] = useState("")
async function getRoom(Id) {
try {
const Room = await roomApi.getRoom([Id]);
setRoom({profileimg: Room[0].profileimg})
console.log(room)
}
catch (error) {
catchErrors(error, setError);
}
}
useEffect(() => {
getRoom(roomId);
}, [roomId]);
return (
<div
className="d-flex justify-content-between align-items-center p-2"
......@@ -9,7 +35,7 @@ const RoomHeader = () => {
<div className="d-flex align-items-center">
<img
className="rounded-circle"
src="/cherry.jpg"
src={`/roomUploads/${room.profileimg}`}
width="40px"
height="40px"
/>
......
client/src/components/Room/Screen.js
View file @ d8d3d203
......@@ -31,9 +31,12 @@ const Screen = () => {
};
useEffect(() => {
let newSocket = io("http://localhost:8080");
let newSocket = io.connect("http://localhost:8080");
let localStream;
// console.log("newSocket", newSocket.id);
//
newSocket.on("userEnter", (data) => {
console.log(data);
createReceivePC(data.id, newSocket);
});
......@@ -53,6 +56,7 @@ const Screen = () => {
newSocket.on("getSenderAnswer", async (data) => {
try {
console.log("get sender answer");
console.log(data.sdp);
await sendPC.setRemoteDescription(new RTCSessionDescription(data.sdp));
} catch (error) {
console.log(error);
......@@ -83,6 +87,7 @@ const Screen = () => {
newSocket.on("getReceiverCandidate", async (data) => {
try {
console.log(data);
console.log(`get socketID(${data.id})'s candidate`);
let pc = receivePCs[data.id];
if (!data.candidate) return;
......@@ -139,6 +144,7 @@ const Screen = () => {
});
console.log("create sender offer success");
await sendPC.setLocalDescription(new RTCSessionDescription(sdp));
console.log(sdp, "안", newSocket.id, "녕", roomId);
newSocket.emit("senderOffer", {
sdp,
......@@ -158,6 +164,7 @@ const Screen = () => {
});
console.log("create receiver offer success");
await pc.setLocalDescription(new RTCSessionDescription(sdp));
console.log(sdp, newSocket.id, senderSocketID, roomId);
newSocket.emit("receiverOffer", {
sdp,
receiverSocketID: newSocket.id,
......@@ -238,12 +245,12 @@ const Screen = () => {
return (
<div className="container">
{/* {console.log(users)} */}
<div className="mt-3" style={{ backgroundColor: "#FCF4FF" }}>
<div
className="m-2 d-flex fw-bold text-center"
style={{ color: "#4A4251", fontSize: "20px" }}
>
{console.log(users)}
<img
className="rounded-circle me-2"
src="/cherry.jpg"
......
client/src/components/Room/User.js
View file @ d8d3d203
......@@ -2,7 +2,7 @@ const User = () => {
return (
<div className="container">
<div className="row">
<div className="col" style={{ backgroundColor: "#DEC7F5", position:'absolute', bottom:'58px', width: '414px'}}>
<div className="col" style={{ backgroundColor: "#ded0fa", position:'absolute', bottom:'58px', width: '414px'}}>
<p
className="m-2"
style={{ fontWeight: "bold", color: "#4A4251", fontSize: "20px" }}
......
client/src/components/SignUp.js
View file @ d8d3d203
import axios from "axios";
import { useEffect, useState } from "react";
import { Redirect } from "react-router-dom";
import userApi from "../apis/user.api";
// import catchErrors from "../context/catchError";
// import auth from "../context/auth_context"
import axios from 'axios'
import { useEffect, useState } from 'react'
import { Link, Redirect } from 'react-router-dom'
import userApi from '../apis/user.api'
import catchErrors from '../context/catchError'
const INIT_USER = {
name: "",
idNumber1: "",
idNumber2: "",
email: "",
password: "",
checkpw: "",
phone: "",
};
name: '',
email: '',
password: '',
checkpw: '',
phone: '',
}
const Signup = () => {
const [user, setUser] = useState(INIT_USER);
const [error, setError] = useState("");
const [disabled, setDisabled] = useState(false);
const [success, setSuccess] = useState(false);
const [loading, setLoading] = useState(false);
const [user, setUser] = useState(INIT_USER)
const [error, setError] = useState('')
const [disabled, setDisabled] = useState(false)
const [success, setSuccess] = useState(false)
useEffect(() => {
setDisabled(
!(
user.name &&
user.idNumber1 &&
user.idNumber2 &&
user.email &&
user.password &&
user.checkpw
)
);
}, [user]);
setDisabled(!(user.name && user.email && user.password && user.checkpw))
}, [user])
function handleChange(event) {
const { name, value } = event.target;
setUser({ ...user, [name]: value });
// console.log(user);
const { name, value } = event.target
setUser({ ...user, [name]: value })
// console.log('user정보', user)
}
async function handleSubmit() {
console.log(user)
async function handleSubmit(e) {
e.preventDefault()
try {
const data = await userApi.signup(user)
setLoading(true);
setError("");
// const success = await login(user.email, user.password);
// const data = await axios.post("/api/room/1/1",user)
console.log(data);
setSuccess(true);
// console.log('checkPassword:',checkPassword())
// const passwordMatch = checkPassword()
if (checkPassword()) {
const res = await userApi.signup(user)
console.log('서버연결됬나요', res)
console.log('회원가입')
setSuccess(true)
setError('')
}
} catch (error) {
// catchErrors(error, setError);
console.log('에러발생')
catchErrors(error, setError)
} finally {
setLoading(false);
// setLoading(false);
}
}
if (success) {
alert('회원가입 되었습니다.')
return <Redirect to="/" />;
function checkPassword(event) {
const p1 = user.password
const p2 = user.checkpw
if (p1 !== p2) {
alert('비밀번호가 일치하지 않습니다.')
return false
} else {
return true
}
}
if (success) {
alert('회원가입이 완료되었습니다!')
window.location.href = '/'
}
const { name, idNumber1, idNumber2, id, password, checkpw, phone } = user;
const { name, id, password, checkpw, phone } = user
return (
<div className="modal-content">
<div className="container">
{error && <div className="alert alert-danger">{error}</div>}
<form onSubmit={handleSubmit}>
<div className="modal-header">
<h5 className="modal-title" id="loginModalLabel">
회원가입
</h5>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
<div className="m-3 d-flex justify-content-center">
<Link to="/">
<img src="/BORA.png" style={{ width: '160px' }} />
</Link>
</div>
<div className="modal-body">
<div className="row mt-4">
<h5 style={{ textAlign: 'center' }}>회원가입</h5>
</div>
<div className="form-group">
<div className="p-2">
<label className="p-1">이름</label>
<input
......@@ -91,38 +90,6 @@ const Signup = () => {
onChange={handleChange}
/>
</div>
<div className="p-2">
<label className="p-1">주민등록번호</label>
<div className="d-flex text-center">
<div className="col-4">
<input
className="mt-2 form-control"
id="idNumber1"
type="text"
name="idNumber1"
placeholder="●●●●●●"
maxLength='6'
value={idNumber1}
onChange={handleChange}
/>
</div>
<div className="col-1 pt-3 ps-2">ㅡ</div>
<div className="col-1">
<input
className="mt-2 ms-2 form-control"
id="idNumber2"
type="text"
style={{width:'35px'}}
name="idNumber2"
placeholder="●"
value={idNumber2}
onChange={handleChange}
maxLength='1'
/>
</div>
<div className="pt-3 ps-4">* * * * * *</div>
</div>
</div>
<div className="p-2">
<label className="p-1">아이디</label>
<input
......@@ -160,7 +127,7 @@ const Signup = () => {
/>
</div>
<div className="p-2">
<label className="p-1">전화번호(선택)</label>
<label className="p-1">전화번호</label>
<input
className="form-control"
id="phone"
......@@ -171,15 +138,21 @@ const Signup = () => {
onChange={handleChange}
/>
</div>
</div>
<div className="modal-footer">
<button type="submit" className="btn btn-primary" disabled={disabled}>
{/* {console.log(disabled)} */}
<div className="mt-3 d-flex justify-content-center">
<button
type="submit"
className="btn btn-primary"
onClick={handleSubmit}
disabled={disabled}
>
회원가입
</button>
</div>
</div>
</form>
</div>
);
};
)
}
export default Signup;
export default Signup
client/src/pages/HomeGuestPage.js
View file @ d8d3d203
import { Link } from "react-router-dom";
import Login from "../components/Login";
import SignUp from "../components/SignUp";
......@@ -6,44 +7,22 @@ const HomeGuestPage = () => {
<div className="d-flex flex-column justify-content-center h-100 font-weight-bold">
<img src="BORA.PNG" className="w-100 p-4" />
<div className="d-flex flex-column align-items-center">
<Link to="/login">
<button
type="button"
className="col-4 btn btn-info"
data-bs-toggle="modal"
data-bs-target="#loginModal"
className="row-4 btn btn-info"
>
로그인
</button>
<div
className="modal fade"
id="loginModal"
tabIndex="-1"
aria-labelledby="loginModalLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<Login />
</div>
</div>
</Link>
<Link to="/signup">
<button
type="button"
className="col-4 btn btn-info"
data-bs-toggle="modal"
data-bs-target="#signupModal"
className="row-4 btn btn-info"
>
회원가입
</button>
</div>
<div
className="modal fade"
id="signupModal"
tabIndex="-1"
aria-labelledby="signupModalLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<SignUp />
</div>
</Link>
</div>
</div>
);
......
client/src/pages/InitRoomPage.js 0 → 100644
View file @ d8d3d203
import ChannelList from '../components/Room/ChannelList'
import InitRoom from '../components/Room/InitRoom'
const InitRoomPage = () => {
return (
<div>
<ChannelList />
<InitRoom />
</div>
)
}
export default InitRoomPage
client/src/pages/InvitePage.js
View file @ d8d3d203
......@@ -10,7 +10,7 @@ const InvitePage = () => {
function Invitereject() {
// if () //초대받은 사람이 로그인 o
// <Link to="/user"></Link>//유저 페이지로 이동.
// <Link to="/user/:id"></Link>//유저 페이지로 이동.
// else //로그인x
// <Link to="/"></Link> //메인화면으로 이동.
}
......
server/.gitignore
View file @ d8d3d203
......@@ -3,3 +3,4 @@ package-lock.json
config/
env.development
/uploads
/roomUploads
\ No newline at end of file
server/controllers/room.controller.js
View file @ d8d3d203
import { Room, User } from "../models/index.js";
import { customAlphabet } from 'nanoid'
import isLength from 'validator/lib/isLength.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)
const nanoid = customAlphabet("1234567890abcdef", 10);
const joinRoom = async (req, res) => {
const { userId, roomId } = req.body
const { userId, roomId } = req.body;
const room_Id = await Room.findOne({ where: { id: roomId } });
if (Boolean(room_Id)) { //roomId에 일치하는 방이 존재할때
if (Boolean(room_Id)) {
//roomId에 일치하는 방이 존재할때
//roomId에 일치하는 방의 member정보에 userId 저장하기
//member정보에 userId가 이미 저장되어 있는지 확인 -> 이미 참여된 방인지 확인
const includeUserId = room_Id.member.includes(parseInt(userId));
// console.log('Include확인:',includeUserId)
if (!includeUserId) { //아직 참여되지 않은 방인경우
room_Id.member.push(userId) //member에 userId추가
if (!includeUserId) {
//아직 참여되지 않은 방인경우
room_Id.member.push(userId); //member에 userId추가
// console.log('room_Id.member2:', room_Id.member)
await Room.update({ 'member': room_Id.member }, { where: { id: roomId } })
await Room.update({ member: room_Id.member }, { where: { id: roomId } });
//userId에 일치하는 사용자의 roomNumber에 roomId저장하기
const user_Id = await User.findOne({ where: { id: userId } });
if (Boolean(user_Id.roomNumber)) { //다른 roomNumber가 이미 들어가 있는 경우 roomId추가
user_Id.roomNumber.push(roomId)
}
else { //첫 roomNumber인 경우
user_Id.roomNumber = [roomId]
if (Boolean(user_Id.roomNumber)) {
//다른 roomNumber가 이미 들어가 있는 경우 roomId추가
user_Id.roomNumber.push(roomId);
} else {
//첫 roomNumber인 경우
user_Id.roomNumber = [roomId];
}
// console.log('user_Id.roomNumber2:', user_Id.roomNumber)
await User.update({ 'roomNumber': user_Id.roomNumber }, { where: { id: userId } })
await User.update(
{ roomNumber: user_Id.roomNumber },
{ where: { id: userId } }
);
res.json(true)
} else {
return res.status(422).send('이미 참여된 방입니다.')
return res.status(422).send("이미 참여된 방입니다.");
}
} else {
return res.status(422).send('참여코드와 일치하는 방이 존재하지 않습니다.')
return res.status(422).send("참여코드와 일치하는 방이 존재하지 않습니다.");
}
};
const upLoadRoomImg = multer({ dest: "roomUploads/" });
const roomImgUpload = upLoadRoomImg.fields([{ name: "profileimg", maxCount: 1 }]);
const createRoom = async (req, res) => {
// console.log('룸정보', req.body)
const { name, owner, member, profileimg } = req.body;
const { userId, name } = req.body;
const avatar = req.files["profileimg"][0];
const img = avatar.filename;
const id = nanoid()
const Id = await Room.findOne({ where: { id: id } });
// console.log('id:', id)
while (Boolean(Id)) {
while (Id) {
const id = nanoid()
const Id = await Room.findOne({ where: { id: id } });
}
try {
if (!isLength(name, { min: 3, max: 20 })) {
return res.status(422).send('방이름은 3-20자여야 합니다.')
return res.status(422).send("방이름은 3-20자여야 합니다.");
}
//새로운 RoomDB생성
const newRoom = {
id: id,
name: name,
owner: owner,
member: [member],
profileimg: profileimg,
owner: userId,
member: [userId],
profileimg: img,
}
// console.log('newRoom:', newRoom)
await Room.create(newRoom)
await Room.create(newRoom);
//user.roomNumber에 id추가
const user_Id = await User.findOne({ where: { id: owner } });
const user_Id = await User.findOne({ where: { id: userId } });
if (user_Id.roomNumber) { //다른 roomNumber가 이미 들어가 있는 경우 id추가
user_Id.roomNumber.push(id)
}
......@@ -69,18 +82,26 @@ const createRoom = async (req, res) => {
user_Id.roomNumber = [id]
}
// console.log('user_Id.roomNumber2:', user_Id.roomNumber)
await User.update({ 'roomNumber': user_Id.roomNumber }, { where: { id: owner } })
await User.update({ 'roomNumber': user_Id.roomNumber }, { where: { id: userId } })
res.json(newRoom)
} catch (error) {
console.log(error)
res.status(500).send('방생성 에러')
console.log(error);
res.status(500).send("방생성 에러");
}
}
};
const getRoom = async (req, res) => {
console.log('req.body:', req.body)
}
console.log("fhgfghdgfdgf:", req.body);
try {
const roomlist = await Room.findAll({ where: { id: req.body} });
console.log(roomlist);
res.json(roomlist)
} catch (error) {
console.log(error);
res.status(500).send("에러");
}
};
export default {
joinRoom, createRoom, getRoom
joinRoom, roomImgUpload, createRoom, getRoom
};
server/controllers/user.controller.js
View file @ d8d3d203
......@@ -39,7 +39,7 @@ const updateinfo = async (req, res) => {
};
await User.update(A, { where: { id: id } });
const user = await User.findOne({ where: { id: id } });
console.log('user:',user)
console.log('user:', user)
};
const login = async (req, res) => {
try {
......@@ -69,9 +69,9 @@ const login = async (req, res) => {
};
const signup = async (req, res) => {
try {
// console.log('sign up= ', req.body)
const { name, email, password, gender, phone } = req.body
console.log('sign up= ', req.body)
const { name, email, password, phone } = req.body
const id = Math.floor(Math.random() * (9999 - 1000) + 1000)
// console.log('id:', id)
const Id = await User.findOne({ where: { id: id } })
......@@ -80,26 +80,29 @@ const signup = async (req, res) => {
const id = Math.floor(Math.random() * (9999 - 1000) + 1000);
const Id = await User.findOne({ where: { id: id } });
}
try {
const user = await User.findOne({ where: { email: email } });
if (user)
if (user) {
return res.status(422).send(`${email} 이미 존재하는 사용자입니다.`);
if (!isLength(name, { min: 3, max: 10 })) {
return res.status(422).send("이름은 3-10자 사이입니다");
} else {
if (!isLength(name, { min: 2, max: 10 })) {
return res.status(422).send("이름은 2-10자 사이입니다");
} else if (!isLength(password, { min: 6 })) {
return res.status(422).send("비밀번호는 6자이상 입니다");
} else if (!isLength(email, { min: 3, max: 10 })) {
return res.status(422).send("아이디는 3-10자 사이입니다");
}
const newUser = await User.create({
const newUser = {
id: id,
name: name,
email: email,
password: password,
gender: gender,
phone: phone,
})
}
console.log('newUser:',newUser)
await User.create(newUser)
res.json(true)
}
} catch (error) {
console.log(error);
return res.status(500).send("회원가입 중 에러");
......
server/index.js
View file @ d8d3d203
......@@ -27,8 +27,8 @@ sequelize
id: "1234567abc",
name: "room",
owner: 8888,
member: [8888,9999],
profileimg: "C:\fakepath\스크린샷(1).png",
member: [8888],
profileimg: "defaultimg",
});
await Room.create({
......@@ -36,7 +36,7 @@ sequelize
name: "room1",
owner: 9999,
member: [9999],
profileimg: "C:\fakepath\스크린샷(1).png",
profileimg: "defaultimg",
});
app.listen(appConfig.port, () => {
......
server/models/room.model.js
View file @ d8d3d203
......@@ -21,11 +21,11 @@ const RoomModel = (sequelize) => {
},
profileimg: {
type: DataTypes.STRING,
defaultValue: "/user.png"
defaultValue: "defaultimg"
},
channel: {
type: DataTypes.ARRAY(DataTypes.JSON),
defaultValue: [{'회의':""}],
defaultValue: [{"회의": ["지원", "재연"]}, {"사담": ["지원", "재연", "서연"]}],
},
},
{ timestamps: true }
......
server/models/user.model.js
View file @ d8d3d203
import bcrypt from "bcryptjs";
import pkg from 'sequelize';
const { DataTypes } = pkg;
// import img from 'bora_it\client\public\user.png'
const UserModel = (sequelize) => {
const User = sequelize.define(
......@@ -20,15 +19,12 @@ const UserModel = (sequelize) => {
password: {
type: DataTypes.STRING,
},
gender: {
type: DataTypes.INTEGER,
},
phone: {
type: DataTypes.STRING,
},
img: {
type: DataTypes.STRING,
// defaultValue: img
defaultValue:'defaultimg'
},
roomNumber: {
type: DataTypes.ARRAY(DataTypes.STRING),
......
server/routes/room.route.js
View file @ d8d3d203
......@@ -3,7 +3,7 @@ import roomCrtl from "../controllers/room.controller.js";
const router = express.Router();
router.route("/getRoom").post(roomCrtl.getRoom);
router.route("/create").post(roomCrtl.createRoom);
router.route("/create").post(roomCrtl.roomImgUpload, roomCrtl.createRoom);
router.route("/join").put(roomCrtl.joinRoom);
export default router;
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