Skip to content

GitLab

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

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

parents 0c9e67ad 32664664
Show whitespace changes
Inline Side-by-side
client/.env 0 → 100644
View file @ e3633632
REACT_APP_KAKAO_KEY=783f1ca14e1f14bc6442eedcd37c76a1
REACT_FETCH_URL=http://localhost:3000
\ No newline at end of file
client/public/index.html
View file @ e3633632
......@@ -25,6 +25,11 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>BORA It</title>
<script src="//developers.kakao.com/sdk/js/kakao.js"></script>
<script>
Kakao.init(process.env.REACT_APP_KAKAO_KEY);//SDK초기화
console.log(Kakao.isInitialized());// 초기화 여부 판단
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
......
client/src/App.js
View file @ e3633632
......@@ -5,6 +5,7 @@ import HomeUserPage from "./pages/HomeUserPage";
import ProfilePage from "./pages/ProfilePage";
import RoomPage from "./pages/RoomPage";
import InfoUpdatePage from "./pages/InfoUpdatePage";
import InvitePage from "./pages/InvitePage";
function App() {
return (
......@@ -16,6 +17,7 @@ function App() {
<Route path="/profile/:id/update" component={InfoUpdatePage} />
<Route path="/profile/:id" component={ProfilePage} />
<Route path="/room/:roomId/:channelId" component={RoomPage} />
<Route path="/room/Invite" component={InvitePage} />
</Switch>
{/* </AuthProvider> */}
</Router>
......
client/src/apis/room.api.js
View file @ e3633632
import axios from "axios";
const getRoom = async (id) => {
const { data } = await axios.get(`/api/room/getRoom/${id}`);
return data;
};
const create = async (payload) => {
const { data } = await axios.post("/api/room/create", payload);
return data;
......@@ -10,6 +15,6 @@ const join = async (payload) => {
return data;
};
const roomApi = { create, join };
const roomApi = { getRoom, create, join };
export default roomApi;
client/src/apis/user.api.js
View file @ e3633632
import axios from "axios";
const getUser = async (payload) => {
const { data } = await axios.post("/api/getUser", payload);
const getUser = async (id) => {
// console.log('id222:',id.userID)
const { data } = await axios.get(`/api/getUser/${id}`);
return data;
};
......
client/src/components/Home/CreateRoom.js
View file @ e3633632
import { useEffect, useState } from "react";
import { Redirect } from "react-router-dom";
import roomApi from "../../apis/room.api";
import catchErrors from "../../context/catchError";
const userId = localStorage.getItem('user');
const INIT_ROOM = {
......@@ -22,14 +23,14 @@ const CreateRoom = () => {
}, [room]);
function handleChange(event) {
console.log(room)
// console.log(room)
const { name, value } = event.target
setRoom({ ...room, [name]: value })
}
async function handleSubmit(e) {
e.preventDefault()
console.log('룸룸', room)
// console.log('룸룸', room)
try {
const res = await roomApi.create(room)
// console.log(res)
......@@ -38,7 +39,7 @@ const CreateRoom = () => {
alert(`방참여코드는 ${Id}입니다`)
setSuccess(true)
} catch (error) {
// catchErrors(error, setError);
catchErrors(error, setError);
} finally {
// setLoading(false);
}
......
client/src/components/Home/HomeProfile.js
View file @ e3633632
import { Link } from "react-router-dom";
import { useState, useEffect } from "react";
import userApi from "../../apis/user.api";
import catchErrors from "../../context/catchError";
const userprofile = localStorage.getItem("user");
const INIT_USER = {
......@@ -14,8 +15,11 @@ const HomeProfile = () => {
async function getSetUser(userID) {
try {
const data = await userApi.getUser({id: userID})
// console.log('userID', userID)
const data = await userApi.getUser( userID )
// console.log(data)
setUser(data)
// console.log(user)
} catch (error) {
// catchErrors(error, setError)
}
......
client/src/components/Home/JoinRoom.js
View file @ e3633632
......@@ -18,7 +18,7 @@ const JoinRoom = () => {
function handleChange(event) {
const { value } = event.target;
setRoomId(value);
console.log(roomId);
// console.log(roomId);
}
async function handleSubmit(e) {
......@@ -26,10 +26,10 @@ const JoinRoom = () => {
try {
// setLoading(true);
// setError("");
console.log('userId:', userId)
console.log('roomId:', roomId)
// console.log('userId:', userId)
// console.log('roomId:', roomId)
const data = await roomApi.join({ userId: userId, roomId: roomId });
console.log(data);
// console.log(data);
setSuccess(true);
} catch (error) {
// catchErrors(error, setError);
......
client/src/components/Home/RoomSingle.js
View file @ e3633632
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom'
import roomApi from '../../apis/room.api';
import userApi from '../../apis/user.api';
const RoomSingle = () => {
const id = 1
const [roomNum, setRoomNum] = useState('')
const [room, setRoom] = useState([])
const id = localStorage.getItem('user');
const channelId = 1
const A = []
// async function getJoinRoom(Id) {
// try {
// console.log('id:',id)
// const User = await userApi.getUser({id: Id})
// console.log('User1:',User)
// console.log('User2:',User.roomNumber)
// const RoomNumArr = User.roomNumber
// console.log('setRoomNum:',RoomNumArr)
// const Room = await roomApi.getRoom(RoomNumArr)
// } catch (error) {
// // catchErrors(error, setError)
// }
// }
// useEffect(() => {
// getJoinRoom(id)
// }, [id])
return (
<Link
to={`/room/${id}/${channelId}`}
......@@ -33,45 +59,6 @@ const RoomSingle = () => {
<div className="ms-auto mt-2"> 15/34 </div>
</div>
<div
className="d-flex mx-4 my-2 p-2"
style={{ backgroundColor: '#C4C4C4' }}
>
<div style={{ width: '37px', height: '37px' }}>
<img
src="BORA.png"
className="rounded-circle"
style={{ width: '37px', height: '37px' }}
/>
</div>
<div
className="mx-3 mt-2"
style={{ width: '250px', overflow: 'scroll', whiteSpace: 'nowrap' }}
>
데계 재미있는 수학과 데계데계데계 재미있는 수학과
</div>
<div className="ms-auto mt-2"> 15/34 </div>
</div>
<div
className="d-flex mx-4 my-2 p-2"
style={{ backgroundColor: '#C4C4C4' }}
>
<div style={{ width: '37px', height: '37px' }}>
<img
src="BORA.png"
className="rounded-circle"
style={{ width: '37px', height: '37px' }}
/>
</div>
<div
className="mx-3 mt-2"
style={{ width: '250px', overflow: 'scroll', whiteSpace: 'nowrap' }}
>
데계 재미있는 수학과 데계데계데계 재미있는 수학과
</div>
<div className="ms-auto mt-2"> 15/34 </div>
</div>
</Link>
)
}
......
client/src/components/KakaoShareButton.js 0 → 100644
View file @ e3633632
import React, { useEffect } from "react";
const KakaoShareButton = () => {
useEffect(() => {
createKakaoButton();
}, []);
const ad = "이름"
const createKakaoButton = () => {
// kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다
if (window.Kakao) {
const kakao = window.Kakao;
// 중복 initialization 방지
if (!kakao.isInitialized()) {
// 두번째 step 에서 가져온 javascript key 를 이용하여 initialize
kakao.init(process.env.REACT_APP_KAKAO_KEY);
}
kakao.Link.createDefaultButton({
container: '#kakao-link-btn',
objectType: 'text',
text:
`${ad}`,
//'기본 템플릿으로 제공되는 텍스트 템플릿은 텍스트를 최대 200자까지 표시할 수 있습니다. 텍스트 템플릿은 텍스트 영역과 하나의 기본 버튼을 가집니다. 임의의 버튼을 설정할 수도 있습니다. 여러 장의 이미지, 프로필 정보 등 보다 확장된 형태의 카카오링크는 다른 템플릿을 이용해 보낼 수 있습니다.',
link: {
mobileWebUrl:
'http://localhost:3000/room/Invite',
webUrl:
'http://localhost:3000/room/Invite',
},
});
}
};
return (
<div className="kakao-share-button">
{/* Kakao share button */}
<button
id="kakao-link-btn"
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
style={{ width: "120px" }}
>카카오로 초대
</button>
</div>
);
};
export default KakaoShareButton;
client/src/components/Room/RightHamburger.js
View file @ e3633632
......@@ -34,7 +34,7 @@ const RightHamberger = () => {
style={{
fontWeight: 'bold',
fontSize: '15px',
overflow: 'scroll',
overflow: 'hidden',
whiteSpace: 'nowrap',
width: '150px',
color: '#000000',
......@@ -109,6 +109,7 @@ const RightHamberger = () => {
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
>
예
</button>
......
client/src/components/Room/UserState.js 0 → 100644
View file @ e3633632
const UserState = () => {
return (
<div className="overflow-auto" style={{ height: '610px' }}>
<div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<img className="col-auto mt-2" src="/fullSpeaker.png" width="25px" height="25px" />
<h5 className="col mt-2">Online</h5>
</div>
<ul className="mx-5">
<li>
CHERRY
</li>
<li>
JAEYEON
</li>
<li>
SEOYEON
</li>
<li>
JIWEON
</li>
<li>
BYOUNGYUN
</li>
</ul>
</div>
<div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
<h5 className="col mt-2">Offline</h5>
</div>
<ul className="mx-5">
<li>
CHERRY
</li>
<li>
JAEYEON
</li>
<li>
SEOYEON
</li>
<li>
JIWEON
</li>
<li>
BYOUNGYUN
</li>
</ul>
</div>
</div>
)
};
export default UserState;
client/src/pages/InvitePage.js 0 → 100644
View file @ e3633632
import Header from "../components/Header";
const InvitePage = () => {
function GoInvitedroom() {
// if() : //초대받은 사람이 로그인 o
// roomid = //서버에서 받아온 방 번호 저장
// //초대받은 사람의 참여한 방 목록에 roomid 추가
// else //로그인x
// //로그인 하게 보냄.
}
function Invitereject() {
// if () //초대받은 사람이 로그인 o
// <Link to="/user"></Link>//유저 페이지로 이동.
// else //로그인x
// <Link to="/"></Link> //메인화면으로 이동.
}
return (
<div>
{/*페이지 전체*/}
<Header />
<div className="d-flex justify-content-evenly">
{/* 위 사진,이름 */}
<div
style={{
width: "100%",
height: "140px",
textAlign: "center",
border: "3px",
borderStyle: "none solid solid",
borderColor: "red",
fontSize: "12px",
}}
>
{/* 방 부분 */}
<p style={{ marginBottom: "0px", fontSize: "16px" }}>초대받은 방</p>
{/* <img src={RoomImage} style={{ width: "90px", height: "90px" }}></img> */}
<p style={{ marginBottom: "0px", fontSize: "16px" }}>
방 id: {/*${roomid}*/}
</p>
</div>
{/* <div
style={{
width: "207px",
height: "140px",
textAlign: "center",
border: "3px",
borderStyle: "none solid solid none",
borderColor: "red",
fontSize: "12px",
}}
>
초대한 사람 부분
<p style={{ marginBottom: "0px", fontSize: "16px" }}>초대한 사람</p>
<img src={UserImage} style={{ width: "90px", height: "90px" }}></img>
<p style={{ marginBottom: "0px", fontSize: "16px" }}>
이름: {/*${nickname}
</p>
</div>*/}
</div>
<div
style={{
width: "80%",
height: "200px",
textAlign: "center",
fontSize: "18px",
marginLeft: "10%",
marginRight: "10%",
}}
>
{/* 아래 텍스트 */}
<p>
<br></br>
축하합니다! 친구{/*${InvitePerson.nickname}*/}가 화상회의방{" "}
{/*${InvitedRoo.roomid}*/}로 초대하였습니다.
<br></br>
<br></br>
초대를 수락하시겠습니까?
</p>
</div>
<div className="d-flex justify-content-evenly">
{/* 수락, 거절 버튼 */}
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
style={{ width: "120px" }}
onClick={GoInvitedroom}
>
수락
</button>
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
style={{ width: "120px" }}
onClick={Invitereject}
>
거절
</button>
</div>
</div>
);
};
export default InvitePage;
controllers/room.controller.js
View file @ e3633632
import { Room, User } from "../models/index.js";
import { customAlphabet } from 'nanoid'
import { Op } from 'sequelize';
import config from "../config/app.config.js";
import isLength from 'validator/lib/isLength.js'
const nanoid = customAlphabet('1234567890abcdef', 10)
const joinRoom = async (req, res) => {
console.log('req.body.value:', req.body)
const { userId, roomId } = req.body
const room_Id = await Room.findOne({ where: { id: roomId } });
console.log('room_Id1:', room_Id)
console.log('room_Id있는지:', Boolean(room_Id))
console.log('room_Id.member1:', room_Id.member)
if (Boolean(room_Id)) {
if (Boolean(room_Id)) { //roomId에 일치하는 방이 존재할때
//roomId에 일치하는 방의 member정보에 userId 저장하기
const matchedUserId = room_Id.member.filter(memberId => memberId === userId)
console.log('matchedUserId:', matchedUserId)
// if (matchedUserId.length === 0) {
// room_Id.member.push(userId)
// }
// else {
// return res.status(422).send('이미 참여된 방입니다.')
// }
room_Id.member.push(userId)
console.log('room_Id.member2:', room_Id.member)
//member정보에 userId가 이미 저장되어 있는지 확인 -> 이미 참여된 방인지 확인
const includeUserId = room_Id.member.includes(parseInt(userId));
// console.log('Include확인:',includeUserId)
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 } })
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)
const matchedRoomId = user_Id.roomNumber.filter(roomNum => roomNum === roomId)
console.log('matchedRoomId:',matchedRoomId)
console.log('matchedRoomId boo:',Boolean(matchedRoomId))
console.log('user_Id.roomNumber1:', user_Id.roomNumber)
console.log('user_Id.roomNumber1:', Boolean(user_Id.roomNumber))
if (Boolean(user_Id.roomNumber)) {
if (Boolean(user_Id.roomNumber)) { //다른 roomNumber가 이미 들어가 있는 경우 roomId추가
user_Id.roomNumber.push(roomId)
}
else {
else { //첫 roomNumber인 경우
user_Id.roomNumber = [roomId]
}
console.log('user_Id.roomNumber2:', user_Id.roomNumber)
// console.log('user_Id.roomNumber2:', user_Id.roomNumber)
await User.update({ 'roomNumber': user_Id.roomNumber }, { where: { id: userId } })
const userID = await User.findOne({ where: { id: userId } });
console.log('user_Id2:', userID.roomNumber)
} else {
return res.status(422).send('이미 참여된 방입니다.')
}
} else {
return res.status(422).send('참여코드와 일치하는 방이 존재하지 않습니다.')
}
};
const createRoom = async (req, res) => {
console.log('룸정보', req.body)
// console.log('룸정보', req.body)
const { name, owner, member, profileimg } = req.body;
const id = nanoid()
const Id = await Room.findOne({ where: { id: id } });
console.log('id:', id)
// console.log('id:', id)
while (Boolean(Id)) {
const id = nanoid()
const Id = await Room.findOne({ where: { id: id } });
}
try {
if (!isLength(name, { min: 3, max: 20 })) {
console.log('방이름은 3-20자여야 합니다.')
return res.status(422).send('방이름은 3-20자여야 합니다.')
}
//새로운 RoomDB생성
const newRoom = {
id: id,
name: name,
......@@ -74,9 +57,19 @@ const createRoom = async (req, res) => {
member: [member],
profileimg: profileimg,
}
console.log('newRoom:', newRoom)
// console.log('newRoom:', newRoom)
await Room.create(newRoom)
console.log('room정보:', id, name, owner, [member], profileimg)
//user.roomNumber에 id추가
const user_Id = await User.findOne({ where: { id: owner } });
if (Boolean(user_Id.roomNumber)) { //다른 roomNumber가 이미 들어가 있는 경우 id추가
user_Id.roomNumber.push(id)
}
else { //첫 roomNumber인 경우
user_Id.roomNumber = [id]
}
// console.log('user_Id.roomNumber2:', user_Id.roomNumber)
await User.update({ 'roomNumber': user_Id.roomNumber }, { where: { id: owner } })
res.json(newRoom)
} catch (error) {
console.log(error)
......@@ -84,6 +77,10 @@ const createRoom = async (req, res) => {
}
}
const getRoom = async (req, res) => {
console.log('req.body:', req.body)
}
export default {
joinRoom, createRoom
joinRoom, createRoom, getRoom
};
controllers/user.controller.js
View file @ e3633632
......@@ -23,12 +23,10 @@ const update = async (req, res) => {
}
};
const getUser = async (req, res) => {
console.log("유저가져왔다아아아ㅏㅇ:", req.body);
console.log("id:", req.body.id);
const id = req.body.id;
const user = await User.findOne({ where: { id: id } });
console.log("user:", user);
res.json(user);
// console.log('req.params:',req.params)
const user = await User.findOne({ where: { id: req.params.id } });
// console.log('user:',user)
res.json(user)
};
const updateinfo = async (req, res) => {
......@@ -47,9 +45,9 @@ const updateinfo = async (req, res) => {
};
const login = async (req, res) => {
try {
console.log("login= ", req.body);
const { email, password } = req.body;
const user = await User.findOne({ where: { email: email } });
// console.log('login= ', req.body)
const { email, password } = req.body
const user = await User.findOne({ where: { email: email } })
if (!user) {
return res.status(422).send(`${email} 사용자가 존재하지 않습니다.`);
} else {
......@@ -69,19 +67,19 @@ const login = async (req, res) => {
}
}
} catch (error) {
console.log(error);
return res.status(500).send("로그인 중 에러");
// console.log(error)
return res.status(500).send('로그인 중 에러')
}
};
const signup = async (req, res) => {
try {
console.log("sign up= ", req.body);
const { name, email, password, gender, phone } = req.body;
const id = Math.floor(Math.random() * (9999 - 1000) + 1000);
console.log("id:", id);
const Id = await User.findOne({ where: { id: id } });
console.log("Id 중복확인:", Id);
// console.log('sign up= ', req.body)
const { name, email, password, gender, phone } = req.body
const id = Math.floor(Math.random() * (9999 - 1000) + 1000)
// console.log('id:', id)
const Id = await User.findOne({ where: { id: id } })
// console.log('Id 중복확인:', Id)
while (Id) {
const id = Math.floor(Math.random() * (9999 - 1000) + 1000);
const Id = await User.findOne({ where: { id: id } });
......@@ -105,9 +103,7 @@ const signup = async (req, res) => {
password: password,
gender: gender,
phone: phone,
}).then((_) =>
console.log("회원가입 정보", id, name, email, password, gender, phone)
);
})
} catch (error) {
console.log(error);
return res.status(500).send("회원가입 중 에러");
......
index.js
View file @ e3633632
......@@ -20,13 +20,22 @@ sequelize
email: "admin",
password: "admin!",
gender: 0,
roomNumber : ["1234567abc","abc7654321"],
});
await Room.create({
id: "1234567890",
id: "1234567abc",
name: "room",
owner: "8888",
member: ['8888'],
owner: 8888,
member: [8888,9999],
profileimg: "C:\fakepath\스크린샷(1).png",
});
await Room.create({
id: "abc7654321",
name: "room1",
owner: 9999,
member: [9999],
profileimg: "C:\fakepath\스크린샷(1).png",
});
......
models/room.model.js
View file @ e3633632
......@@ -12,7 +12,7 @@ const RoomModel = (sequelize) => {
type: DataTypes.STRING,
},
owner: {
type: DataTypes.STRING,
type: DataTypes.INTEGER,
},
member: {
type: DataTypes.ARRAY(DataTypes.INTEGER),
......
routes/room.route.js
View file @ e3633632
......@@ -2,9 +2,8 @@ import express from "express";
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("/join").put(roomCrtl.joinRoom);
export default router;
routes/user.route.js
View file @ e3633632
......@@ -3,7 +3,7 @@ import userCtrl from "../controllers/user.controller.js";
const router = express.Router();
router.route("/getUser").post(userCtrl.getUser);
router.route("/getUser/:id").get(userCtrl.getUser);
router.route("/login").post(userCtrl.login);
router.route("/signup").post(userCtrl.signup);
......
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