Skip to content

GitLab

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

merge19

parent 4361c312
Show 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";
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 @ 303f5519
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 { data } = await axios.post("/api/login", payload);
return data;
......@@ -10,6 +16,16 @@ const signup = async (payload) => {
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;
client/src/components/Header.js
View file @ 303f5519
import { Link } from 'react-router-dom'
import { handleLogout } from '../context/auth'
const Header = () => {
return (
<div>
......@@ -6,11 +8,71 @@ const Header = () => {
style={{ backgroundColor: '#FCF4FF' }}
className="flex-column align-items-center justify-content-center p-2"
>
<div className="d-flex justify-content-center">
<Link to="/">
<div className="d-flex justify-content-end">
<div>
<Link to="/user">
<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>
</form>
<div
style={{ backgroundColor: '#262626', width: 'auto', height: '2px' }}
......
client/src/components/Home/AddRoom.js
View file @ 303f5519
......@@ -45,6 +45,7 @@ const AddRoom = () => {
className="p-3"
data-bs-toggle="modal"
data-bs-target="#joinModal"
// data-bs-dismiss="modal"
style={{
display: "flex",
flexDirection: "column",
......@@ -73,6 +74,7 @@ const AddRoom = () => {
className="p-3"
data-bs-toggle="modal"
data-bs-target="#makeModal"
// data-bs-dismiss="modal"
style={{
display: "flex",
flexDirection: "column",
......
client/src/components/Home/CreateRoom.js
View file @ 303f5519
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');
console.log(userId)
const INIT_ROOM = {
name: '',
owner: userId,
member: userId,
profileimg: '',
channel: ['회의'],
}
const CreateRoom = () => {
......@@ -20,30 +22,24 @@ const CreateRoom = () => {
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)
// console.log(room)
const { name, value } = event.target
setRoom({ ...room, [name]: value })
}
console.log(room)
async function handleSubmit(e) {
e.preventDefault()
console.log('룸룸', room)
// console.log('룸룸', room)
try {
const res = await roomApi.create(room)
// console.log(res)
const Id = res.id
// console.log(Id)
//alert(`방참여코드는 ${Id}입니다`)
//setSuccess(true)
console.log(Id)
alert(`방참여코드는 ${Id}입니다`)
setSuccess(true)
} catch (error) {
// catchErrors(error, setError);
catchErrors(error, setError);
} finally {
// setLoading(false);
}
......@@ -52,7 +48,7 @@ const CreateRoom = () => {
if (success) {
console.log('success', success)
alert('룸생성이 완료되었습니다!')
//return <Redirect to='/' />
return <Redirect to='/user' />
}
const { name, owner, member, profileimg } = room;
......
client/src/components/Home/HomeProfile.js
View file @ 303f5519
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 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 (
<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">
<div className="d-flex justify-content-center">
<img
src="cherry.jpg"
src={`/uploads/${user.img}`}
className="rounded-circle"
style={{
width: "157px",
height: "157px",
}}
// value={user.img}
/>
</div>
<h1 className="d-flex justify-content-center"> CHERRY </h1>
<h2 className="d-flex justify-content-center"> #0805 </h2>
<h1 className="d-flex justify-content-center"> {user.email} </h1>
<h2 className="d-flex justify-content-center"> #{user.id} </h2>
</form>
<div
style={{ backgroundColor: "#262626", width: "auto", height: "2px" }}
......
client/src/components/Home/JoinRoom.js
View file @ 303f5519
......@@ -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)
const data = await roomApi.join({userId: userId, roomId: roomId});
console.log(data);
// 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);
......@@ -38,6 +38,7 @@ const JoinRoom = () => {
}
}
if (success) {
return <Redirect to="/user" />;
}
return (
......
client/src/components/Home/RoomSingle.js
View file @ 303f5519
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 +58,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/Login.js
View file @ 303f5519
import { useEffect, useState } from "react";
import { Redirect } from "react-router-dom";
import userApi from "../apis/user.api";
import { useEffect, useState } from 'react'
import { Redirect } from 'react-router-dom'
import userApi from '../apis/user.api'
import catchErrors from "../context/catchError";
import { handleLogin } from '../context/auth';
const INIT_USER = {
email: "",
password: "",
};
email: '',
password: '',
}
const Login = () => {
// const { error, loading, login } = useAuth();
const [user, setUser] = useState(INIT_USER);
const [disabled, setDisabled] = useState(true);
const [error, setError] = useState("");
const [success, setSuccess] = useState(false);
// const { loading, login, catchErrorAuth } = useAuth()
const [user, setUser] = useState(INIT_USER)
const [disabled, setDisabled] = useState(true)
const [error, setError] = useState('')
const [success, setSuccess] = useState(false)
useEffect(() => {
const isUser = Object.values(user).every((el) => Boolean(el));
isUser ? setDisabled(false) : setDisabled(true);
}, [user]);
const isUser = Object.values(user).every((el) => Boolean(el))
isUser ? setDisabled(false) : setDisabled(true)
}, [user])
function handleChange(event) {
const { name, value } = event.target;
setUser({ ...user, [name]: value });
const { name, value } = event.target
setUser({ ...user, [name]: value })
}
async function handleSubmit(e) {
e.preventDefault();
e.preventDefault()
console.log('로그인')
try {
// setLoading(true);
// setError("");
const data = await userApi.login(user);
console.log(data);
setSuccess(true);
const data = await userApi.login(user)
console.log(data)
handleLogin(data.id)
setSuccess(true)
} catch (error) {
// catchErrors(error, setError);
console.log('error in login', error)
catchErrors(error, setError)
} finally {
// setLoading(false);
}
}
if (success) {
return <Redirect to="/user" />;
}
if (success) {
alert('로그인 되었습니다')
return <Redirect to="/user" />
}
const { email, password } = user;
const { email, password } = user
return (
<div className="modal-content">
{error && <div className="alert alert-danger">{error}</div>}
<form onSubmit={handleSubmit}>
<div className="modal-header">
<h5 className="modal-title" id="loginModalLabel">
......@@ -78,7 +81,7 @@ const Login = () => {
<label>비밀번호</label>
<input
className="form-control"
id="password"
id="loginPassword"
type="password"
name="password"
placeholder="비밀번호를 입력하세요"
......@@ -88,13 +91,18 @@ const Login = () => {
</div>
</div>
<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>
</div>
</form>
</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 [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 (
<div className="container" style={{ background: "#FCF4FF" }}>
<div
className="row justify-content-center my-4"
style={{ fontSize: "25px", fontWeight: "bold" }}
>
CHERRY #0805
{profile.email} #{profile.id}
</div>
<div className="row">
<div className="col-3"></div>
......@@ -15,14 +38,24 @@ const Info = () => {
<h2 className="mb-3" style={{ fontSize: "13px", fontWeight: "bold" }}>
이름
</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
className="mb-3 mt-2"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
전화번호
</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 className="col"></div>
</div>
......
client/src/components/Profile/InfoUpdate.js
View file @ 303f5519
import { Link } from "react-router-dom";
import React, { useState } from "react";
import { Link, useParams } from "react-router-dom";
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 INIT_ACCOUNT={
// name:"",
// }
const { id } = useParams();
const [profile, setProfile] = useState(INIT_PROFILE);
async function getProfile(userID) {
try {
const data = await userApi.getUser(userID);
setProfile(data);
} catch (error) {}
}
// const [account, setAccount] = useState(INIT_ACCOUNT)
useEffect(() => {
getProfile(userprofile);
}, []);
// const handleChange = (e)=>{
// const {name, value, files}=e.target
// if(files){
// setAccount({...account,[name]:files})
// console.log('aaaaaaa')
// } else{
// setAccount({...account, [name]:value})
// }
// }
const handleChange = async (event) => {
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 id = 1;
const number = 1234;
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 (
<div className="container" style={{ background: "#FCF4FF" }}>
<div className="row">
......@@ -35,7 +66,7 @@ const InfoUpdate = () => {
type="button"
className="btn btn-outline-white "
style={{
background: "#E8B7FF",
background: "#d4cafb",
fontSize: "13px",
fontWeight: "bold",
}}
......@@ -43,6 +74,20 @@ const InfoUpdate = () => {
돌아가기
</button>
</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>
......@@ -54,7 +99,7 @@ const InfoUpdate = () => {
style={{ position: "relative" }}
>
<img
src="/cherry.jpg"
src={`/uploads/${profile.img}`}
id="imgfile"
className="rounded-circle mt-2"
style={{ height: "320px", width: "320px" }}
......@@ -63,11 +108,10 @@ const InfoUpdate = () => {
className="d-flex justify-content-end"
style={{ position: "absolute", left: "295px", top: "30px" }}
>
<label for="inputfile">
<label htmlFor="inputfile">
<img
className="rounded-circle"
src="/infoimg.jpg"
// onChange={handleChange}
style={{
width: "50px",
height: "50px",
......@@ -76,6 +120,8 @@ const InfoUpdate = () => {
/>
</label>
<input
onChange={handleChange}
name="avatarUrl"
type="file"
accept="image/*"
id="inputfile"
......@@ -86,6 +132,9 @@ const InfoUpdate = () => {
<div className="col d-flex justify-content-center">
<input
onChange={updateinfo}
name="email"
value={profile.email}
type="text"
className="form-control my-4 "
placeholder="사용자명 입력"
......@@ -95,7 +144,7 @@ const InfoUpdate = () => {
borderRight: "0",
borderLeft: "0",
borderBottom: "1",
borderColor: "#E8B7FF",
borderColor: "#d4cafb",
height: "38px",
width: "130px",
}}
......@@ -104,81 +153,63 @@ const InfoUpdate = () => {
className="justify-content-center ms-2 my-4"
style={{ fontSize: "25px", fontWeight: "bold" }}
>
#{number}
#{userprofile}
</div>
</div>
<div className="d-flex justify-content-center">
<label
class="form-label me-3"
style={{
outline: "none",
fontSize: "13px",
fontWeight: "bold",
}}
<div className="row">
<div className="col-3"></div>
<div className="col-6 my-2">
<h2
className="mb-3"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
현재 비밀번호
</label>
이름
</h2>
<input
type="password"
class="form-control"
style={{ height: "38px", width: "200px" }}
/>
<button
type="button"
className="btn btn-outline-white ms-2"
onChange={updateinfo}
name="name"
value={profile.name}
type="text"
className="form-control my-3 "
placeholder="이름 입력"
style={{
background: "#E8B7FF",
fontSize: "13px",
fontWeight: "bold",
background: "#fcf4ff",
borderTop: "0",
borderRight: "0",
borderLeft: "0",
borderBottom: "1",
borderColor: "#d4cafb",
height: "38px",
width: "180px",
}}
>
수정하기
</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"
/>
<h2
className="mb-3 mt-2"
style={{ fontSize: "13px", fontWeight: "bold" }}
>
새 전화번호 확인
</label>
<input type="text" className="form-control" />
</div>
전화번호
</h2>
<input
onChange={updateinfo}
name="phone"
value={profile.phone}
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>
<div className="col"></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 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 (
<div className="container" style={{ background: "#FCF4FF" }}>
<>
......@@ -18,7 +42,7 @@ const Profile = () => {
type="button"
className="btn btn-outline-white "
style={{
background: "#E8B7FF",
background: "#d4cafb",
fontSize: "13px",
fontWeight: "bold",
}}
......@@ -31,7 +55,7 @@ const Profile = () => {
<div className="col">
<div className="d-flex justify-content-center">
<img
src="/cherry.jpg"
src={`/uploads/${profile}`}
className="rounded-circle mt-2"
style={{ height: "320px", width: "320px" }}
/>
......
client/src/components/Room/RightHamburger.js
View file @ 303f5519
......@@ -34,7 +34,7 @@ const RightHamberger = () => {
style={{
fontWeight: 'bold',
fontSize: '15px',
overflow: 'scroll',
overflow: 'hidden',
whiteSpace: 'nowrap',
width: '150px',
color: '#000000',
......@@ -62,9 +62,9 @@ const RightHamberger = () => {
style={{
height: '30px',
fontWeight: 'bold',
backgroundColor: '#D64D61',
backgroundColor: '#d86da6',
color: 'black',
border: '1px #D64D61',
border: '1px #d86da6',
}}
>
퇴장
......@@ -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 @ 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 { 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 = {
name: "",
idNumber1: "",
......@@ -16,6 +19,7 @@ const Signup = () => {
const [error, setError] = useState("");
const [disabled, setDisabled] = useState(false);
const [success, setSuccess] = useState(false);
const [loading, setLoading] = useState(false);
useEffect(() => {
setDisabled(
......@@ -33,26 +37,29 @@ const Signup = () => {
function handleChange(event) {
const { name, value } = event.target;
setUser({ ...user, [name]: value });
console.log(user);
// console.log(user);
}
async function handleSubmit() {
console.log(user)
try {
const data = await axios.post("/api/room/1/1",user)
// setLoading(true);
// setError("");
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(success);
setSuccess(true);
} catch (error) {
// catchErrors(error, setError);
} finally {
// setLoading(false);
setLoading(false);
}
}
if (success) {
alert('회원가입 되었습니다.')
return <Redirect to="/" />;
}
......@@ -165,7 +172,6 @@ const Signup = () => {
/>
</div>
</div>
{console.log(disabled)}
<div className="modal-footer">
<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 { 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 baseUrl from "../utils/baseUrl";
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