Skip to content

GitLab

Commit 303f5519 authored by Kim, Chaerin's avatar Kim, Chaerin
Browse files

merge19

parent 4361c312
Hide whitespace changes
Inline Side-by-side
client/src/apis/profile.api.js deleted 100644 → 0
View file @ 4361c312
import axios from "axios";
const login = async (payload) => {
const { data } = await axios.post("/api/login", payload);
return data;
};
const signup = async (payload) => {
const { data } = await axios.post("/api/signup", payload);
return data;
};
const profileApi = { login, signup };
export default profileApi;
client/src/apis/room.api.js
View file @ 303f5519
import axios from "axios"; import axios from "axios";
const getRoom = async (id) => {
const { data } = await axios.get(`/api/room/getRoom/${id}`);
return data;
};
const create = async (payload) => { const create = async (payload) => {
const { data } = await axios.post("/api/room/create", payload); const { data } = await axios.post("/api/room/create", payload);
return data; return data;
...@@ -10,6 +15,6 @@ const join = async (payload) => { ...@@ -10,6 +15,6 @@ const join = async (payload) => {
return data; return data;
}; };
const roomApi = { create, join }; const roomApi = { getRoom, create, join };
export default roomApi; export default roomApi;
client/src/apis/user.api.js
View file @ 303f5519
import axios from "axios"; import axios from "axios";
const getUser = async (id) => {
// console.log('id222:',id.userID)
const { data } = await axios.get(`/api/getUser/${id}`);
return data;
};
const login = async (payload) => { const login = async (payload) => {
const { data } = await axios.post("/api/login", payload); const { data } = await axios.post("/api/login", payload);
return data; return data;
...@@ -10,6 +16,16 @@ const signup = async (payload) => { ...@@ -10,6 +16,16 @@ const signup = async (payload) => {
return data; return data;
}; };
const userApi = { login, signup }; const updateinfo = async (payload) => {
const { data } = await axios.put("/api/updateinfo", payload);
return data;
};
const profileimg = async (formData) => {
const { data } = await axios.put("/api/profileimg", formData);
return data;
};
const userApi = { login, signup, getUser, profileimg, updateinfo };
export default userApi; export default userApi;
client/src/components/Header.js
View file @ 303f5519
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { handleLogout } from '../context/auth'
const Header = () => { const Header = () => {
return ( return (
<div> <div>
...@@ -6,10 +8,70 @@ const Header = () => { ...@@ -6,10 +8,70 @@ const Header = () => {
style={{ backgroundColor: '#FCF4FF' }} style={{ backgroundColor: '#FCF4FF' }}
className="flex-column align-items-center justify-content-center p-2" className="flex-column align-items-center justify-content-center p-2"
> >
<div className="d-flex justify-content-center"> <div className="d-flex justify-content-end">
<Link to="/"> <div>
<img src="/BORA.png" style={{ width: '160px' }} /> <Link to="/user">
</Link> <img src="/BORA.png" style={{ width: '160px' }} />
</Link>
</div>
<button
type="button"
className=" mt-3 ms-5 rounded"
data-bs-toggle="modal"
data-bs-target="#logout"
style={{
height: '30px',
backgroundColor: '#E0CEE8',
color: 'black',
border: '1px #E0CEE8',
}}
>
로그아웃
</button>
<div
className="modal fade"
id="logout"
tabIndex="-1"
aria-labelledby="logoutLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body d-flex justify-content-center">
로그아웃 하시겠습니까?
</div>
<div className="row mb-3">
<div className="d-flex justify-content-evenly">
<Link to="/" className="col-2 p-1 btn btn-primary">
<button
type="submit"
className="btn btn-primary"
onClick={() => handleLogout()}
data-bs-dismiss="modal"
>
예
</button>
</Link>
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
>
아니요
</button>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</form> </form>
<div <div
......
client/src/components/Home/AddRoom.js
View file @ 303f5519
...@@ -45,6 +45,7 @@ const AddRoom = () => { ...@@ -45,6 +45,7 @@ const AddRoom = () => {
className="p-3" className="p-3"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#joinModal" data-bs-target="#joinModal"
// data-bs-dismiss="modal"
style={{ style={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
...@@ -73,6 +74,7 @@ const AddRoom = () => { ...@@ -73,6 +74,7 @@ const AddRoom = () => {
className="p-3" className="p-3"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#makeModal" data-bs-target="#makeModal"
// data-bs-dismiss="modal"
style={{ style={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
......
client/src/components/Home/CreateRoom.js
View file @ 303f5519
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Redirect } from "react-router-dom";
import roomApi from "../../apis/room.api"; import roomApi from "../../apis/room.api";
import catchErrors from "../../context/catchError";
const userId = localStorage.getItem('user'); const userId = localStorage.getItem('user');
console.log(userId)
const INIT_ROOM = { const INIT_ROOM = {
name: '', name: '',
owner: userId,
member: userId,
profileimg: '', profileimg: '',
channel: ['회의'],
} }
const CreateRoom = () => { const CreateRoom = () => {
...@@ -20,30 +22,24 @@ const CreateRoom = () => { ...@@ -20,30 +22,24 @@ const CreateRoom = () => {
isRoom ? setDisabled(false) : setDisabled(true); isRoom ? setDisabled(false) : setDisabled(true);
}, [room]); }, [room]);
// const userId = localStorage.getItem('user');
// setRoom({...room, owner: userId})
// setRoom({...room, member: userId})
function handleChange(event) { function handleChange(event) {
console.log(room) // console.log(room)
const { name, value } = event.target const { name, value } = event.target
setRoom({ ...room, [name]: value }) setRoom({ ...room, [name]: value })
} }
console.log(room)
async function handleSubmit(e) { async function handleSubmit(e) {
e.preventDefault() e.preventDefault()
console.log('룸룸', room) // console.log('룸룸', room)
try { try {
const res = await roomApi.create(room) const res = await roomApi.create(room)
// console.log(res) // console.log(res)
const Id = res.id const Id = res.id
// console.log(Id) console.log(Id)
//alert(`방참여코드는 ${Id}입니다`) alert(`방참여코드는 ${Id}입니다`)
//setSuccess(true) setSuccess(true)
} catch (error) { } catch (error) {
// catchErrors(error, setError); catchErrors(error, setError);
} finally { } finally {
// setLoading(false); // setLoading(false);
} }
...@@ -52,7 +48,7 @@ const CreateRoom = () => { ...@@ -52,7 +48,7 @@ const CreateRoom = () => {
if (success) { if (success) {
console.log('success', success) console.log('success', success)
alert('룸생성이 완료되었습니다!') alert('룸생성이 완료되었습니다!')
//return <Redirect to='/' /> return <Redirect to='/user' />
} }
const { name, owner, member, profileimg } = room; const { name, owner, member, profileimg } = room;
......
client/src/components/Home/HomeProfile.js
View file @ 303f5519
import { Link } from "react-router-dom"; 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 = {
id: userprofile,
email: '',
img: '',
}
const HomeProfile = () => { const HomeProfile = () => {
const id = 1; const [user, setUser] = useState(INIT_USER)
async function getSetUser(userID) {
try {
console.log('userID', userID)
const data = await userApi.getUser(userID)
console.log(data)
setUser(data)
// console.log(user)
} catch (error) {
// catchErrors(error, setError)
}
}
useEffect(() => {
getSetUser(userprofile)
}, [userprofile])
return ( return (
<Link to={`/profile/${id}`} className="text-decoration-none text-dark"> <Link to={`/profile/${user.id}`} className="text-decoration-none text-dark">
<form className="flex-column align-items-center justify-content-center m-2"> <form className="flex-column align-items-center justify-content-center m-2">
<div className="d-flex justify-content-center"> <div className="d-flex justify-content-center">
<img <img
src="cherry.jpg" src={`/uploads/${user.img}`}
className="rounded-circle" className="rounded-circle"
style={{ style={{
width: "157px", width: "157px",
height: "157px", height: "157px",
}} }}
// value={user.img}
/> />
</div> </div>
<h1 className="d-flex justify-content-center"> CHERRY </h1> <h1 className="d-flex justify-content-center"> {user.email} </h1>
<h2 className="d-flex justify-content-center"> #0805 </h2> <h2 className="d-flex justify-content-center"> #{user.id} </h2>
</form> </form>
<div <div
style={{ backgroundColor: "#262626", width: "auto", height: "2px" }} style={{ backgroundColor: "#262626", width: "auto", height: "2px" }}
......
client/src/components/Home/JoinRoom.js
View file @ 303f5519
...@@ -18,7 +18,7 @@ const JoinRoom = () => { ...@@ -18,7 +18,7 @@ const JoinRoom = () => {
function handleChange(event) { function handleChange(event) {
const { value } = event.target; const { value } = event.target;
setRoomId(value); setRoomId(value);
console.log(roomId); // console.log(roomId);
} }
async function handleSubmit(e) { async function handleSubmit(e) {
...@@ -26,10 +26,10 @@ const JoinRoom = () => { ...@@ -26,10 +26,10 @@ const JoinRoom = () => {
try { try {
// setLoading(true); // setLoading(true);
// setError(""); // setError("");
console.log('userId:',userId) // console.log('userId:', userId)
console.log('roomId:',roomId) // console.log('roomId:', roomId)
const data = await roomApi.join({userId: userId, roomId: roomId}); const data = await roomApi.join({ userId: userId, roomId: roomId });
console.log(data); // console.log(data);
setSuccess(true); setSuccess(true);
} catch (error) { } catch (error) {
// catchErrors(error, setError); // catchErrors(error, setError);
...@@ -38,6 +38,7 @@ const JoinRoom = () => { ...@@ -38,6 +38,7 @@ const JoinRoom = () => {
} }
} }
if (success) { if (success) {
return <Redirect to="/user" />;
} }
return ( return (
......
client/src/components/Home/RoomSingle.js
View file @ 303f5519
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import roomApi from '../../apis/room.api';
import userApi from '../../apis/user.api';
const RoomSingle = () => { const RoomSingle = () => {
const id = 1 const [roomNum, setRoomNum] = useState('')
const [room, setRoom] = useState([])
const id = localStorage.getItem('user');
const channelId = 1 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 ( return (
<Link <Link
to={`/room/${id}/${channelId}`} to={`/room/${id}/${channelId}`}
...@@ -33,45 +58,6 @@ const RoomSingle = () => { ...@@ -33,45 +58,6 @@ const RoomSingle = () => {
<div className="ms-auto mt-2"> 15/34 </div> <div className="ms-auto mt-2"> 15/34 </div>
</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> </Link>
) )
} }
......
client/src/components/Login.js
View file @ 303f5519
import { useEffect, useState } from "react"; import { useEffect, useState } from 'react'
import { Redirect } from "react-router-dom"; import { Redirect } from 'react-router-dom'
import userApi from "../apis/user.api"; import userApi from '../apis/user.api'
import catchErrors from "../context/catchError";
import { handleLogin } from '../context/auth';
const INIT_USER = { const INIT_USER = {
email: "", email: '',
password: "", password: '',
}; }
const Login = () => { const Login = () => {
// const { error, loading, login } = useAuth(); // const { loading, login, catchErrorAuth } = useAuth()
const [user, setUser] = useState(INIT_USER); const [user, setUser] = useState(INIT_USER)
const [disabled, setDisabled] = useState(true); const [disabled, setDisabled] = useState(true)
const [error, setError] = useState(""); const [error, setError] = useState('')
const [success, setSuccess] = useState(false); const [success, setSuccess] = useState(false)
useEffect(() => { useEffect(() => {
const isUser = Object.values(user).every((el) => Boolean(el)); const isUser = Object.values(user).every((el) => Boolean(el))
isUser ? setDisabled(false) : setDisabled(true); isUser ? setDisabled(false) : setDisabled(true)
}, [user]); }, [user])
function handleChange(event) { function handleChange(event) {
const { name, value } = event.target; const { name, value } = event.target
setUser({ ...user, [name]: value }); setUser({ ...user, [name]: value })
} }
async function handleSubmit(e) { async function handleSubmit(e) {
e.preventDefault(); e.preventDefault()
console.log('로그인')
try { try {
// setLoading(true); // setLoading(true);
// setError(""); // setError("");
const data = await userApi.login(user); const data = await userApi.login(user)
console.log(data); console.log(data)
setSuccess(true); handleLogin(data.id)
setSuccess(true)
} catch (error) { } catch (error) {
// catchErrors(error, setError); console.log('error in login', error)
catchErrors(error, setError)
} finally { } finally {
// setLoading(false); // setLoading(false);
} }
} }
if (success) {
return <Redirect to="/user" />;
}
if (success) { if (success) {
alert('로그인 되었습니다') alert('로그인 되었습니다')
return <Redirect to="/user" />
} }
const { email, password } = user; const { email, password } = user
return ( return (
<div className="modal-content"> <div className="modal-content">
{error && <div className="alert alert-danger">{error}</div>}
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="modal-header"> <div className="modal-header">
<h5 className="modal-title" id="loginModalLabel"> <h5 className="modal-title" id="loginModalLabel">
...@@ -78,7 +81,7 @@ const Login = () => { ...@@ -78,7 +81,7 @@ const Login = () => {
<label>비밀번호</label> <label>비밀번호</label>
<input <input
className="form-control" className="form-control"
id="password" id="loginPassword"
type="password" type="password"
name="password" name="password"
placeholder="비밀번호를 입력하세요" placeholder="비밀번호를 입력하세요"
...@@ -88,13 +91,18 @@ const Login = () => { ...@@ -88,13 +91,18 @@ const Login = () => {
</div> </div>
</div> </div>
<div className="modal-footer"> <div className="modal-footer">
<button type="submit" className="btn btn-primary" disabled={disabled} data-bs-dismiss="modal"> <button
type="submit"
className="btn btn-primary"
disabled={disabled}
data-bs-dismiss="modal"
>
로그인 로그인
</button> </button>
</div> </div>
</form> </form>
</div> </div>
); )
}; }
export default Login; export default Login
client/src/components/Profile/Info.js
View file @ 303f5519
import User from "../Room/User"; import userApi from "../../apis/user.api";
import { useEffect, useState } from "react";
const userprofile = localStorage.getItem("user");
const INIT_PROFILE = {
name: "",
email: "a",
id: "",
phone: "",
};
const Info = () => { const Info = () => {
const [profile, setProfile] = useState(INIT_PROFILE);
async function getProfile(userID) {
try {
const data = await userApi.getUser(userID);
setProfile(data);
} catch (error) {}
}
useEffect(() => {
getProfile(userprofile);
}, [userprofile]);
return ( return (
<div className="container" style={{ background: "#FCF4FF" }}> <div className="container" style={{ background: "#FCF4FF" }}>
<div <div
className="row justify-content-center my-4" className="row justify-content-center my-4"
style={{ fontSize: "25px", fontWeight: "bold" }} style={{ fontSize: "25px", fontWeight: "bold" }}
> >
CHERRY #0805 {profile.email} #{profile.id}
</div> </div>
<div className="row"> <div className="row">
<div className="col-3"></div> <div className="col-3"></div>
...@@ -15,14 +38,24 @@ const Info = () => { ...@@ -15,14 +38,24 @@ const Info = () => {
<h2 className="mb-3" style={{ fontSize: "13px", fontWeight: "bold" }}> <h2 className="mb-3" style={{ fontSize: "13px", fontWeight: "bold" }}>
이름 이름
</h2> </h2>
<h2 className="mb-4 mt-2" style={{ fontSize: "25px", fontWeight: "bold" }} >김채린</h2> <h2
className="mb-4 mt-2"
style={{ fontSize: "25px", fontWeight: "bold" }}
>
{profile.name}
</h2>
<h2 <h2
className="mb-3 mt-2" className="mb-3 mt-2"
style={{ fontSize: "13px", fontWeight: "bold" }} style={{ fontSize: "13px", fontWeight: "bold" }}
> >
전화번호 전화번호
</h2> </h2>
<h2 className="mb-3 mt-2" style={{ fontSize: "25px", fontWeight: "bold" }}>010-8628-8984</h2> <h2
className="mb-3 mt-2"
style={{ fontSize: "25px", fontWeight: "bold" }}
>
{profile.phone}
</h2>
</div> </div>
<div className="col"></div> <div className="col"></div>
</div> </div>
......
client/src/components/Profile/InfoUpdate.js
View file @ 303f5519
import { Link } from "react-router-dom"; import { Link, useParams } from "react-router-dom";
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import userApi from "../../apis/user.api";
const userprofile = localStorage.getItem("user");
const INIT_PROFILE = {
id: userprofile,
name:"",
email:"",
phone:"",
img: "",
};
const InfoUpdate = () => { const InfoUpdate = () => {
// const INIT_ACCOUNT={ const { id } = useParams();
// name:"",
// }
const [profile, setProfile] = useState(INIT_PROFILE);
// const [account, setAccount] = useState(INIT_ACCOUNT) async function getProfile(userID) {
try {
const data = await userApi.getUser(userID);
setProfile(data);
} catch (error) {}
}
// const handleChange = (e)=>{ useEffect(() => {
// const {name, value, files}=e.target getProfile(userprofile);
// if(files){ }, []);
// setAccount({...account,[name]:files})
// console.log('aaaaaaa')
// } else{
// setAccount({...account, [name]:value})
// }
// }
const id = 1; const handleChange = async (event) => {
const number = 1234; const { files } = event.target;
let formData = new FormData();
formData.append("img", files[0]);
formData.append("id", userprofile);
try {
const res = await userApi.profileimg(formData);
if(files){
setProfile({...profile, img:res})
}else{
setProfile()
} } catch (error) {}
};
const changeinfo = async (event) => {
const res = await userApi.updateinfo(profile)
};
const updateinfo = (event) => {
const { name, value } = event.target;
setProfile({ ...profile, [name]: value });
};
const{email,phone,name}=profile
return ( return (
<div className="container" style={{ background: "#FCF4FF" }}> <div className="container" style={{ background: "#FCF4FF" }}>
<div className="row"> <div className="row">
...@@ -35,7 +66,7 @@ const InfoUpdate = () => { ...@@ -35,7 +66,7 @@ const InfoUpdate = () => {
type="button" type="button"
className="btn btn-outline-white " className="btn btn-outline-white "
style={{ style={{
background: "#E8B7FF", background: "#d4cafb",
fontSize: "13px", fontSize: "13px",
fontWeight: "bold", fontWeight: "bold",
}} }}
...@@ -43,6 +74,20 @@ const InfoUpdate = () => { ...@@ -43,6 +74,20 @@ const InfoUpdate = () => {
돌아가기 돌아가기
</button> </button>
</Link> </Link>
<Link to={`/profile/${id}`}>
<button
onClick={changeinfo}
type="button"
className="btn btn-outline-white mx-2 "
style={{
background: "#d4cafb",
fontSize: "13px",
fontWeight: "bold",
}}
>
저장
</button>
</Link>
</div> </div>
</div> </div>
...@@ -54,7 +99,7 @@ const InfoUpdate = () => { ...@@ -54,7 +99,7 @@ const InfoUpdate = () => {
style={{ position: "relative" }} style={{ position: "relative" }}
> >
<img <img
src="/cherry.jpg" src={`/uploads/${profile.img}`}
id="imgfile" id="imgfile"
className="rounded-circle mt-2" className="rounded-circle mt-2"
style={{ height: "320px", width: "320px" }} style={{ height: "320px", width: "320px" }}
...@@ -63,11 +108,10 @@ const InfoUpdate = () => { ...@@ -63,11 +108,10 @@ const InfoUpdate = () => {
className="d-flex justify-content-end" className="d-flex justify-content-end"
style={{ position: "absolute", left: "295px", top: "30px" }} style={{ position: "absolute", left: "295px", top: "30px" }}
> >
<label for="inputfile"> <label htmlFor="inputfile">
<img <img
className="rounded-circle" className="rounded-circle"
src="/infoimg.jpg" src="/infoimg.jpg"
// onChange={handleChange}
style={{ style={{
width: "50px", width: "50px",
height: "50px", height: "50px",
...@@ -76,6 +120,8 @@ const InfoUpdate = () => { ...@@ -76,6 +120,8 @@ const InfoUpdate = () => {
/> />
</label> </label>
<input <input
onChange={handleChange}
name="avatarUrl"
type="file" type="file"
accept="image/*" accept="image/*"
id="inputfile" id="inputfile"
...@@ -86,6 +132,9 @@ const InfoUpdate = () => { ...@@ -86,6 +132,9 @@ const InfoUpdate = () => {
<div className="col d-flex justify-content-center"> <div className="col d-flex justify-content-center">
<input <input
onChange={updateinfo}
name="email"
value={profile.email}
type="text" type="text"
className="form-control my-4 " className="form-control my-4 "
placeholder="사용자명 입력" placeholder="사용자명 입력"
...@@ -95,7 +144,7 @@ const InfoUpdate = () => { ...@@ -95,7 +144,7 @@ const InfoUpdate = () => {
borderRight: "0", borderRight: "0",
borderLeft: "0", borderLeft: "0",
borderBottom: "1", borderBottom: "1",
borderColor: "#E8B7FF", borderColor: "#d4cafb",
height: "38px", height: "38px",
width: "130px", width: "130px",
}} }}
...@@ -104,81 +153,63 @@ const InfoUpdate = () => { ...@@ -104,81 +153,63 @@ const InfoUpdate = () => {
className="justify-content-center ms-2 my-4" className="justify-content-center ms-2 my-4"
style={{ fontSize: "25px", fontWeight: "bold" }} style={{ fontSize: "25px", fontWeight: "bold" }}
> >
#{number} #{userprofile}
</div> </div>
</div> </div>
<div className="row">
<div className="col-3"></div>
<div className="col-6 my-2">
<h2
className="mb-3"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
이름
</h2>
<input
onChange={updateinfo}
name="name"
value={profile.name}
type="text"
className="form-control my-3 "
placeholder="이름 입력"
style={{
background: "#fcf4ff",
borderTop: "0",
borderRight: "0",
borderLeft: "0",
borderBottom: "1",
borderColor: "#d4cafb",
height: "38px",
width: "180px",
}}
/>
<div className="d-flex justify-content-center"> <h2
<label className="mb-3 mt-2"
class="form-label me-3" style={{ fontSize: "13px", fontWeight: "bold" }}
style={{ >
outline: "none", 전화번호
fontSize: "13px", </h2>
fontWeight: "bold", <input
}} onChange={updateinfo}
> name="phone"
현재 비밀번호 value={profile.phone}
</label> type="text"
<input className="form-control my-3 "
type="password" placeholder="전화번호 입력"
class="form-control" style={{
style={{ height: "38px", width: "200px" }} background: "#fcf4ff",
/> borderTop: "0",
<button borderRight: "0",
type="button" borderLeft: "0",
className="btn btn-outline-white ms-2" borderBottom: "1",
style={{ borderColor: "#d4cafb",
background: "#E8B7FF", height: "38px",
fontSize: "13px", width: "180px",
fontWeight: "bold", }}
}} />
>
수정하기
</button>
</div>
<div class="col-6">
<div class="input-group mx-2 my-3">
<div>
<label
class="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
새 비밀번호
</label>
<input type="text" className="form-control" />
</div>
<div>
<label
className="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
새 비밀번호 확인
</label>
<input type="text" className="form-control" />
</div>
</div>
</div>
<div className="col-6">
<div className="input-group my-3 ">
<div>
<label
className="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
새 전화번호
</label>
<input type="text" className="form-control" />
</div>
<div>
<label
className="form-label"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
새 전화번호 확인
</label>
<input type="text" className="form-control" />
</div>
</div> </div>
<div className="col"></div>
</div> </div>
</div> </div>
</div> </div>
......
client/src/components/Profile/Profile.js
View file @ 303f5519
import { Link } from "react-router-dom"; import { Link, useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import userApi from "../../apis/user.api";
const userprofile = localStorage.getItem("user");
const INIT_PROFILE = {
img:"",
};
const Profile = () => { const Profile = () => {
const id = 1;
const [profile, setProfile] = useState(INIT_PROFILE);
async function getProfile(userID) {
try {
const data = await userApi.getUser(userID);
setProfile(data.img)
} catch (error) {}
}
useEffect(() => {
getProfile(userprofile);
}, [userprofile]);
const { id } = useParams();
return ( return (
<div className="container" style={{ background: "#FCF4FF" }}> <div className="container" style={{ background: "#FCF4FF" }}>
<> <>
...@@ -18,7 +42,7 @@ const Profile = () => { ...@@ -18,7 +42,7 @@ const Profile = () => {
type="button" type="button"
className="btn btn-outline-white " className="btn btn-outline-white "
style={{ style={{
background: "#E8B7FF", background: "#d4cafb",
fontSize: "13px", fontSize: "13px",
fontWeight: "bold", fontWeight: "bold",
}} }}
...@@ -31,7 +55,7 @@ const Profile = () => { ...@@ -31,7 +55,7 @@ const Profile = () => {
<div className="col"> <div className="col">
<div className="d-flex justify-content-center"> <div className="d-flex justify-content-center">
<img <img
src="/cherry.jpg" src={`/uploads/${profile}`}
className="rounded-circle mt-2" className="rounded-circle mt-2"
style={{ height: "320px", width: "320px" }} style={{ height: "320px", width: "320px" }}
/> />
......
client/src/components/Room/RightHamburger.js
View file @ 303f5519
...@@ -34,7 +34,7 @@ const RightHamberger = () => { ...@@ -34,7 +34,7 @@ const RightHamberger = () => {
style={{ style={{
fontWeight: 'bold', fontWeight: 'bold',
fontSize: '15px', fontSize: '15px',
overflow: 'scroll', overflow: 'hidden',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
width: '150px', width: '150px',
color: '#000000', color: '#000000',
...@@ -62,12 +62,12 @@ const RightHamberger = () => { ...@@ -62,12 +62,12 @@ const RightHamberger = () => {
style={{ style={{
height: '30px', height: '30px',
fontWeight: 'bold', fontWeight: 'bold',
backgroundColor: '#D64D61', backgroundColor: '#d86da6',
color: 'black', color: 'black',
border: '1px #D64D61', border: '1px #d86da6',
}} }}
> >
퇴장 퇴장
</button> </button>
{admin ? <button {admin ? <button
type="button" type="button"
...@@ -109,6 +109,7 @@ const RightHamberger = () => { ...@@ -109,6 +109,7 @@ const RightHamberger = () => {
<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"
> >
예 예
</button> </button>
......
client/src/components/Room/UserState.js 0 → 100644
View file @ 303f5519
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/components/SignUp.js
View file @ 303f5519
import axios from "axios"; import axios from "axios";
import { useEffect, useState } from "react"; 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"
const INIT_USER = { const INIT_USER = {
name: "", name: "",
idNumber1: "", idNumber1: "",
...@@ -16,6 +19,7 @@ const Signup = () => { ...@@ -16,6 +19,7 @@ const Signup = () => {
const [error, setError] = useState(""); const [error, setError] = useState("");
const [disabled, setDisabled] = useState(false); const [disabled, setDisabled] = useState(false);
const [success, setSuccess] = useState(false); const [success, setSuccess] = useState(false);
const [loading, setLoading] = useState(false);
useEffect(() => { useEffect(() => {
setDisabled( setDisabled(
...@@ -33,26 +37,29 @@ const Signup = () => { ...@@ -33,26 +37,29 @@ const Signup = () => {
function handleChange(event) { function handleChange(event) {
const { name, value } = event.target; const { name, value } = event.target;
setUser({ ...user, [name]: value }); setUser({ ...user, [name]: value });
console.log(user); // console.log(user);
} }
async function handleSubmit() { async function handleSubmit() {
console.log(user)
try { try {
const data = await axios.post("/api/room/1/1",user) const data = await userApi.signup(user)
// setLoading(true); setLoading(true);
// setError(""); setError("");
// const success = await login(user.email, user.password); // const success = await login(user.email, user.password);
// const data = await axios.post("/api/room/1/1",user)
console.log(data); console.log(data);
setSuccess(success); setSuccess(true);
} catch (error) { } catch (error) {
// catchErrors(error, setError); // catchErrors(error, setError);
} finally { } finally {
// setLoading(false); setLoading(false);
} }
} }
if (success) { if (success) {
alert('회원가입 되었습니다.') alert('회원가입 되었습니다.')
return <Redirect to="/" />;
} }
...@@ -165,7 +172,6 @@ const Signup = () => { ...@@ -165,7 +172,6 @@ const Signup = () => {
/> />
</div> </div>
</div> </div>
{console.log(disabled)}
<div className="modal-footer"> <div className="modal-footer">
<button type="submit" className="btn btn-primary" disabled={disabled}> <button type="submit" className="btn btn-primary" disabled={disabled}>
회원가입 회원가입
......
client/src/context/auth.js 0 → 100644
View file @ 303f5519
import axios from 'axios'
export function handleLogin(userId) {
localStorage.setItem("user", userId)
}
export async function handleLogout() {
alert("로그아웃되었습니다.")
localStorage.removeItem("user")
await axios.get('/api/auth/logout')
window.location.href='/'
}
export function isAuthenticated() {
const userId = localStorage.getItem('loginStatus')
if (userId) {
return userId
}else{
return false
}
}
client/src/context/auth_context.js
View file @ 303f5519
import axios from "axios"; import axios from "axios";
import { createContext, FC, useCallback, useContext, useState } from "react"; import { createContext, FC, useCallback, useContext, useState } from "react";
import authApi from "../apis/auth.api"; import authApi from "../apis/user.api";
import { getLocalUser } from "../utils/auth"; import { getLocalUser } from "../utils/auth";
import baseUrl from "../utils/baseUrl"; import baseUrl from "../utils/baseUrl";
import catchErrors from "../utils/catchErrors"; import catchErrors from "../utils/catchErrors";
......
client/src/context/catchError.js 0 → 100644
View file @ 303f5519
function catchErrors(error, displayError) {
let errorMsg
if (error.response) {
errorMsg = error.response.data
console.log(errorMsg)
}else if (error.requset) {
errorMsg = error.requset
console.log(errorMsg)
} else {
errorMsg = error.message
console.log(errorMsg)
}
displayError(errorMsg)
}
export default catchErrors
client/src/pages/InvitePage.js 0 → 100644
View file @ 303f5519
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 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;
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