Skip to content

GitLab

Commit f23faf1e authored by 권병윤's avatar 권병윤
Browse files

Merge remote-tracking branch 'origin/seoyeon2' into byoungyun

parents 461f7743 945e73ff
Show whitespace changes
Inline Side-by-side
app.js
View file @ f23faf1e
......@@ -14,6 +14,7 @@ app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser());
app.use('/uploads', express.static('uploads'))
app.use('/roomUploads', express.static('roomUploads'))
app.use("/api", mainRouter);
let receiverPCs = {};
......
client/.env 0 → 100644
View file @ f23faf1e
REACT_APP_KAKAO_KEY=783f1ca14e1f14bc6442eedcd37c76a1
REACT_FETCH_URL=http://localhost:3000
\ No newline at end of file
client/src/App.js
View file @ f23faf1e
......@@ -6,6 +6,8 @@ import ProfilePage from "./pages/ProfilePage";
import RoomPage from "./pages/RoomPage";
import InfoUpdatePage from "./pages/InfoUpdatePage";
import InvitePage from "./pages/InvitePage";
import SingupPage from "./components/SignUp";
import LoginPage from "./components/Login"
function App() {
return (
......@@ -13,10 +15,24 @@ function App() {
{/* <AuthProvider> */}
<Switch>
<Route exact path="/" component={HomeGuestPage} />
<Route exact path="/user" component={HomeUserPage} />
<Route exact path="/user/:id" component={HomeUserPage} />
<Route exact path="/signup" component={SingupPage} />
<Route exact path="/login" component={LoginPage} />
<Route path="/profile/:id/update" component={InfoUpdatePage} />
<Route path="/profile/:id" component={ProfilePage} />
<Route path="/room/:roomId/:channelId" component={RoomPage} />
<Route path="/room/:roomId/:channelId" component={RoomPage}>
{/* <Switch>
<Route path={"/room/:roomId/meeting"}>
<></>
</Route>
<Route path={"/room/:roomId/normal"}>
<></>
</Route>
<Route path={"/room/:roomId/notice"}>
<></>
</Route>
</Switch> */}
</Route>
<Route path="/room/Invite" component={InvitePage} />
</Switch>
{/* </AuthProvider> */}
......
client/src/apis/room.api.js
View file @ f23faf1e
import axios from "axios";
const getRoom = async (id) => {
const { data } = await axios.get(`/api/room/getRoom/${id}`);
const getRoom = async (payload) => {
const { data } = await axios.post(`/api/room/getRoom`,payload);
return data;
};
const create = async (payload) => {
const { data } = await axios.post("/api/room/create", payload);
const create = async (formData) => {
const { data } = await axios.post("/api/room/create", formData);
return data;
};
......
client/src/apis/user.api.js
View file @ f23faf1e
import axios from "axios";
const getUser = async (id) => {
// console.log('id222:',id.userID)
const { data } = await axios.get(`/api/getUser/${id}`);
return data;
};
......
client/src/components/Header.js
View file @ f23faf1e
......@@ -2,6 +2,7 @@ import { Link } from 'react-router-dom'
import { handleLogout } from '../context/auth'
const Header = () => {
const id = localStorage.getItem('user');
return (
<div>
<form
......@@ -10,7 +11,7 @@ const Header = () => {
>
<div className="d-flex justify-content-end">
<div>
<Link to="/user">
<Link to={`/user/${id}`}>
<img src="/BORA.png" style={{ width: '160px' }} />
</Link>
</div>
......
client/src/components/Home/AddRoom.js
View file @ f23faf1e
......@@ -5,14 +5,13 @@ const AddRoom = () => {
return (
<div>
<div className="mx-4 my-3 d-flex justify-content-between">
<div className="fs-4">
참여중인 방목록
</div>
<div className="fs-4">참여중인 방목록</div>
<button
type="button"
className="py-1 px-2"
data-bs-toggle="modal"
data-bs-target="#myModal"
// data-bs-dismiss="modal"
style={{
display: "flex",
flexDirection: "column",
......@@ -54,7 +53,8 @@ const AddRoom = () => {
backgroundColor: "#E0CEE8",
borderColor: "#E0CEE8",
}}
>방참여하기
>
방참여하기
</button>
<div
className="modal fade"
......@@ -83,7 +83,8 @@ const AddRoom = () => {
backgroundColor: "#f5cfe3",
borderColor: "#f5cfe3",
}}
>방생성하기
>
방생성하기
</button>
<div
className="modal fade"
......
client/src/components/Home/CreateRoom.js
View file @ f23faf1e
......@@ -3,7 +3,7 @@ import { Redirect } from "react-router-dom";
import roomApi from "../../apis/room.api";
import catchErrors from "../../context/catchError";
const userId = localStorage.getItem('user');
const id = localStorage.getItem('user');
const INIT_ROOM = {
name: '',
owner: userId,
......@@ -23,17 +23,26 @@ const CreateRoom = () => {
}, [room]);
function handleChange(event) {
// console.log(room)
const { name, value } = event.target
const { name, value, files } = event.target;
if (files) {
setRoom({ ...room, [name]: files[0] })
} else {
setRoom({ ...room, [name]: value })
}
console.log(room)
}
async function handleSubmit(e) {
e.preventDefault()
// console.log('룸룸', room)
let formData = new FormData();
console.log('profileimg:', room.profileimg)
console.log('name:', room.name)
formData.append("name", room.name);
formData.append("userId", id);
formData.append("profileimg", room.profileimg);
try {
const res = await roomApi.create(room)
// console.log(res)
const res = await roomApi.create(formData)
console.log(res)
const Id = res.id
console.log(Id)
alert(`방참여코드는 ${Id}입니다`)
......@@ -46,9 +55,10 @@ const CreateRoom = () => {
}
if (success) {
console.log('success', success)
// console.log('success', success)
alert('룸생성이 완료되었습니다!')
return <Redirect to='/user' />
window.location.href=`/user/${id}`
// return <Redirect to={`/user/${id}`} />
}
const { name, owner, member, profileimg } = room;
......@@ -57,7 +67,9 @@ const CreateRoom = () => {
<div className="modal-content" >
<form onSubmit={handleSubmit}>
<div className="modal-header">
<div className="modal-title" id="makeModal">방생성하기</div>
<div className="modal-title" id="makeModal">
방생성하기
</div>
<button
type="button"
className="btn-close"
......@@ -66,6 +78,7 @@ const CreateRoom = () => {
></button>
</div>
<div className="modal-body">
{error && <div className="alert alert-danger">{error}</div>}
<h6>방프로필사진</h6>
<div className="mb-4">
<input
......@@ -74,7 +87,7 @@ const CreateRoom = () => {
onChange={handleChange}
accept="image/*"
name="profileimg"
value={room.profileimg} />
/>
</div>
<h6>방이름</h6>
<div className="input-group">
......@@ -86,7 +99,6 @@ const CreateRoom = () => {
aria-describedby="basic-addon1"
onChange={handleChange}
name="name"
value={room.name}
/>
</div>
<div className="modal-footer">
......
client/src/components/Home/HomeProfile.js
View file @ f23faf1e
......@@ -6,28 +6,27 @@ import catchErrors from "../../context/catchError";
const userprofile = localStorage.getItem("user");
const INIT_USER = {
id: userprofile,
email: '',
img: '',
}
email: "",
img: "",
};
const HomeProfile = () => {
const [user, setUser] = useState(INIT_USER)
const [user, setUser] = useState(INIT_USER);
const [error, setError]= useState("");
async function getSetUser(userID) {
try {
console.log('userID', userID)
const data = await userApi.getUser(userID)
console.log(data)
setUser(data)
// console.log(user)
const data = await userApi.getUser(userID);
setUser(data);
} catch (error) {
// catchErrors(error, setError)
catchErrors(error, setError);
}
}
useEffect(() => {
getSetUser(userprofile)
}, [userprofile])
getSetUser(userprofile);
}, [userprofile]);
return (
<Link to={`/profile/${user.id}`} className="text-decoration-none text-dark">
......
client/src/components/Home/JoinRoom.js
View file @ f23faf1e
......@@ -3,10 +3,10 @@ import { Redirect } from "react-router-dom";
import roomApi from "../../apis/room.api";
import catchErrors from "../../context/catchError";
const userId = localStorage.getItem('user');
const id = localStorage.getItem("user");
const JoinRoom = () => {
const [roomId, setRoomId] = useState('');
const [roomId, setRoomId] = useState("");
const [disabled, setDisabled] = useState(true);
const [error, setError] = useState("");
const [success, setSuccess] = useState(false);
......@@ -26,7 +26,7 @@ const JoinRoom = () => {
try {
// setLoading(true);
setError("");
const data = await roomApi.join({ userId: userId, roomId: roomId });
const data = await roomApi.join({ userId: id, roomId: roomId });
setSuccess(true);
} catch (error) {
catchErrors(error, setError);
......@@ -34,8 +34,12 @@ const JoinRoom = () => {
// setLoading(false);
}
}
if (success) {
return <Redirect to="/user" />;
// console.log('success', success)
alert('룸참여가 완료되었습니다!')
window.location.href=`/user/${id}`
// return <Redirect to={`/user/${id}`} />;
}
return (
......@@ -53,6 +57,7 @@ const JoinRoom = () => {
></button>
</div>
<div className="modal-body">
{error && <div className="alert alert-danger">{error}</div>}
<div className="input-group mb-3">
<input
type="text"
......@@ -66,7 +71,9 @@ const JoinRoom = () => {
/>
</div>
<div className="modal-footer">
<button type="submit" className="btn btn-primary">
<button
type="submit"
className="btn btn-primary">
확인
</button>
</div>
......
client/src/components/Home/RoomSingle.js
View file @ f23faf1e
......@@ -2,32 +2,39 @@ import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom'
import roomApi from '../../apis/room.api';
import userApi from '../../apis/user.api';
import catchErrors from '../../context/catchError';
const id = localStorage.getItem('user');
const INIT_ROOM={
name:"",
profileimg:"",
member:"",
}
const RoomSingle = () => {
const [roomNum, setRoomNum] = useState('')
const [room, setRoom] = useState([])
// const roomId = localStorage.getItem('user');
const roomId = "abc7654321"
const [room, setRoom] = useState(INIT_ROOM)
const [error,setError]=useState('')
const channelId = 1
const A = []
const roomId = "1234567abc"
async function getJoinRoom(Id) {
try {
const User = await userApi.getUser(Id)
const RoomNumArr = User.roomNumber
const Room= await roomApi.getRoom(RoomNumArr)
console.log(Room[0])
const rrr=Room[0]
const memcount= rrr.member.length
setRoom({...room, name:rrr.name, profileimg: rrr.profileimg, member:memcount})
console.log(room)
// 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)
// }
// }
} catch (error) {
catchErrors(error, setError)
}
}
// useEffect(() => {
// getJoinRoom(id)
// }, [id])
useEffect(() => {
getJoinRoom(id)
}, [id])
return (
<Link
......@@ -39,11 +46,11 @@ const RoomSingle = () => {
style={{ backgroundColor: '#C4C4C4' }}
>
<div style={{ width: '37px', height: '37px' }}>
<img
src="BORA.png"
{/* <img
src={`/roomUploads/${profileimg}`}
className="rounded-circle"
style={{ width: '37px', height: '37px' }}
/>
/> */}
</div>
<div
className="mx-3 mt-2"
......@@ -54,9 +61,9 @@ const RoomSingle = () => {
msOverflowStyle:'none',
}}
>
데계 재미있는 수학과 데계데계데계 재미있는 수학과
{room.name}
</div>
<div className="ms-auto mt-2"> 15/34 </div>
<div className="ms-auto mt-2"> {room.member}/100 </div>
</div>
</Link>
......
client/src/components/Login.js
View file @ f23faf1e
import { useEffect, useState } from 'react'
import { Redirect } from 'react-router-dom'
import { Link } from 'react-router-dom'
import userApi from '../apis/user.api'
import catchErrors from "../context/catchError";
import { handleLogin } from '../context/auth';
import catchErrors from '../context/catchError'
import { handleLogin } from '../context/auth'
const INIT_USER = {
userId: '9999',
email: '',
password: '',
}
const Login = () => {
// const { loading, login, catchErrorAuth } = useAuth()
const [user, setUser] = useState(INIT_USER)
const [disabled, setDisabled] = useState(true)
const [error, setError] = useState('')
......@@ -28,10 +28,10 @@ const Login = () => {
async function handleSubmit(e) {
e.preventDefault()
console.log('로그인')
try {
// setLoading(true);
// setError("");
console.log('user정보:', user)
const data = await userApi.login(user)
console.log(data)
setId(data.id)
......@@ -45,29 +45,25 @@ const Login = () => {
}
}
if (success) {
alert('로그인 되었습니다')
return <Redirect to={`/user/${id}`} />
alert('로그인 되었습니다');
window.location.href = `/user/${id}`
}
const { email, password } = user
return (
<div className="modal-content">
{error && <div className="alert alert-danger">{error}</div>}
<div className="container">
<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>
<div className="row mt-5 d-flex align-items-center">
<h2 style={{ textAlign: 'center' }}>로그인</h2>
{error && <div className="alert alert-danger">{error}</div>}
<div className="form-group">
<div className="mt-5">
<label>아이디</label>
<input
className="form-control"
......@@ -79,11 +75,11 @@ const Login = () => {
onChange={handleChange}
/>
</div>
<div>
<div className="mt-3">
<label>비밀번호</label>
<input
className="form-control"
id="loginPassword"
id="password"
type="password"
name="password"
placeholder="비밀번호를 입력하세요"
......@@ -92,16 +88,16 @@ const Login = () => {
/>
</div>
</div>
<div className="modal-footer">
<div className="mt-4 d-flex justify-content-center">
<button
type="submit"
className="btn btn-primary"
disabled={disabled}
data-bs-dismiss="modal"
>
로그인
</button>
</div>
</div>
</form>
</div>
)
......
client/src/components/Profile/InfoUpdate.js
View file @ f23faf1e
......@@ -34,6 +34,7 @@ const InfoUpdate = () => {
const handleChange = async (event) => {
const { files } = event.target;
console.log('files:',files)
let formData = new FormData();
formData.append("img", files[0]);
formData.append("id", userprofile);
......
client/src/components/Room/ChannelList.js
View file @ f23faf1e
......@@ -4,12 +4,14 @@ import LeftHamburger from './LeftHamburger';
import RightHamburger from './RightHamburger';
const ChannelList = () => {
const id = localStorage.getItem('user');
return (
<div>
<nav className="navbar navbar-light d-flex justify-content-between">
<LeftHamburger />
<div>
<Link to="/user:id">
<Link to={`/user/${id}`}>
<img src="/BORA.png" style={{ width: '160px' }} />
</Link>
</div>
......
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