Skip to content

GitLab

Commit 17fb0773 authored by 우지원's avatar 우지원
Browse files

Merge remote-tracking branch 'origin/jaeyeon' into woojiweon2

parents 7d87eeae d7cf7826
Hide whitespace changes
Inline Side-by-side
client/src/components/Home/RoomSingle.js
View file @ 17fb0773
...@@ -38,7 +38,6 @@ const RoomSingle = () => { ...@@ -38,7 +38,6 @@ const RoomSingle = () => {
useEffect(() => { useEffect(() => {
getJoinRoom(id); getJoinRoom(id);
}, [id]); }, [id]);
console.log(room)
const { profileimg } = room; const { profileimg } = room;
return ( return (
...@@ -46,7 +45,7 @@ const RoomSingle = () => { ...@@ -46,7 +45,7 @@ const RoomSingle = () => {
{room && {room &&
room.map((el) => ( room.map((el) => (
<div> <div>
{room === INIT_ROOM ? (<div></div>): ( {room[0] === INIT_ROOM ? (<div></div>): (
<Link <Link
to={`/room/${el.roomId}/${channelId}`} to={`/room/${el.roomId}/${channelId}`}
className="text-decoration-none text-dark" className="text-decoration-none text-dark"
......
client/src/components/Login.js
View file @ 17fb0773
...@@ -45,22 +45,33 @@ const Login = () => { ...@@ -45,22 +45,33 @@ const Login = () => {
} }
} }
if (success) { if (success) {
alert('로그인 되었습니다'); alert('로그인 되었습니다')
window.location.href = `/user/${id}` window.location.href = `/user/${id}`
} }
const { email, password } = user const { email, password } = user
return ( return (
<div className="container"> <div>
<form onSubmit={handleSubmit}> <div>
<div className="m-3 d-flex justify-content-center"> <form
<Link to="/"> style={{ backgroundColor: '#FCF4FF' }}
<img src="/BORA.png" style={{ width: '160px' }} /> className="flex-column align-items-center justify-content-center p-2"
</Link> >
</div> <div className="d-flex justify-content-center">
<Link to="/">
<img src="/BORA.png" style={{ width: '160px' }} />
</Link>
</div>
</form>
</div>
<div
style={{ backgroundColor: '#262626', width: 'auto', height: '2px' }}
></div>
<div className="container">
<form onSubmit={handleSubmit}>
<div className="row mt-5 d-flex align-items-center"> <div className="row mt-5 d-flex align-items-center">
<h2 style={{ textAlign: 'center' }}>로그인</h2> <h5 style={{ textAlign: 'center' }}>로그인</h5>
{error && <div className="alert alert-danger">{error}</div>} {error && <div className="alert alert-danger">{error}</div>}
<div className="form-group"> <div className="form-group">
<div className="mt-5"> <div className="mt-5">
...@@ -99,6 +110,7 @@ const Login = () => { ...@@ -99,6 +110,7 @@ const Login = () => {
</div> </div>
</div> </div>
</form> </form>
</div>
</div> </div>
) )
} }
......
client/src/components/Room/InitRoom.js
View file @ 17fb0773
...@@ -17,7 +17,9 @@ const InitRoom = () => { ...@@ -17,7 +17,9 @@ const InitRoom = () => {
async function getRoom(roomId) { async function getRoom(roomId) {
try { try {
const data = await roomApi.getRoom([roomId]); const data = await roomApi.getRoom([roomId]);
setRoom(data[0]); console.log(data)
setRoom({...room, id:data[0].id, name:data[0].name, profileimg: data[0].profileimg})
console.log(room.profileimg)
} catch (error) { } catch (error) {
catchErrors(error, setError); catchErrors(error, setError);
} }
......
client/src/components/Room/RightHamburger.js
View file @ 17fb0773
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Link, useParams } from "react-router-dom"; import { Link, useParams } from "react-router-dom";
import ChannelSingle from "./ChannelSingle"; import ChannelSingle from "./ChannelSingle";
import Rightimg from "../../images/RightHamburgerImg.png";
import RoomApi from "../../apis/room.api"; import RoomApi from "../../apis/room.api";
import roomApi from "../../apis/room.api";
import catchErrors from "../../context/catchError"; import catchErrors from "../../context/catchError";
const INIT_ROOM = {
name: "",
};
const INIT_CHANNEL = { const INIT_CHANNEL = {
channelName: "", channelName: "",
joinName: [], joinName: [],
}; };
const RightHamburger = () => { const RightHamburger = () => {
const [channel, setChannel] = useState([INIT_CHANNEL]); const [channel, setChannel] = useState([INIT_CHANNEL]);
const { roomId } = useParams(); const [room, setRoom] = useState([INIT_ROOM]);
const [error, setError] = useState(""); const { roomId } = useParams();
const id = localStorage.getItem('user'); const [error, setError] = useState("");
const id = localStorage.getItem("user");
async function exitRoom() {
console.log('id, roomid정보', id, roomId)
try {
const data = await roomApi.exitRoom({ id, roomId })
console.log(data)
} catch (error) {
catchErrors(error, setError);
}
async function getRoom(roomId) {
try {
const data = await RoomApi.getRoom([roomId]);
setRoom({ ...room, name: data[0].name });
} catch (error) {
catchErrors(error, setError);
}
}
async function exitRoom() {
console.log("id, roomid정보", id, roomId);
try {
const data = await RoomApi.exitRoom({ id, roomId });
console.log(data);
} catch (error) {
catchErrors(error, setError);
} }
}
async function getChannel(roomId) { async function getChannel(roomId) {
// console.log('roomId', roomId) const ID = roomId;
const ID = roomId try {
try { const data = await RoomApi.getRoom([ID]);
const data = await roomApi.getRoom([ID]); const Channel = data[0].channel;
const Channel = data[0].channel console.log("방데이터:", Channel);
console.log('방데이터:', Channel) const channelList = [];
const channelList = []; for (const prop in Channel) {
for (const prop in Channel) { // Channel의 항목(prop)으로 작업을 실행합니다 // Channel의 항목(prop)으로 작업을 실행합니다
for (const key in Channel[prop]) { for (const key in Channel[prop]) {
console.log(key) console.log(key);
console.log(prop) console.log(prop);
console.log(Channel[prop][key]) console.log(Channel[prop][key]);
channelList.push({ channelList.push({
channelName: key, channelName: key,
joinName: Channel[prop][key] joinName: Channel[prop][key],
}); });
}
}
setChannel(channelList);
} catch (error) {
catchErrors(error, setError);
} }
}
setChannel(channelList);
} catch (error) {
catchErrors(error, setError);
} }
// console.log(channel) }
useEffect(() => { // console.log(channel)
// console.log('roomId', roomId)
getChannel(roomId); useEffect(() => {
}, [roomId]); getChannel(roomId);
return ( getRoom(roomId);
}, [roomId]);
function roomIdCopy() {
const t = document.querySelector("#roomId").innerText;
console.log(t);
navigator.clipboard.writeText(t);
document.execCommand("copy");
}
return (
<div>
<div>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#right-hamburger"
aria-controls="right-hamburger"
aria-expanded="false"
aria-label="Toggle navigation"
style={{ border: "#f4c1f2" }}
>
<img src="/RightHamburgerImg.png" width="50px" height="30px" />
</button>
</div>
<div
className="offcanvas offcanvas-end"
style={{ width: "330px" }}
tabIndex="-1"
id="right-hamburger"
aria-labelledby="hamburgerLabel"
>
<div className="offcanvas-header">
<p
className="col-6 offcanvas-title"
id="offcanvasExampleLabel"
style={{
fontWeight: "bold",
fontSize: "15px",
overflow: "hidden",
whiteSpace: "nowrap",
width: "150px",
color: "#000000",
}}
>
{room.name}
</p>
<h6 className="mt-2" id="roomId">
{" "}
{`${roomId}`}{" "}
</h6>
<button
type="button"
className="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div> <div>
<div> <ChannelSingle channel={channel} />
<button <div className="d-flex flex-row-reverse">
className="navbar-toggler" <button
type="button" type="button"
data-bs-toggle="offcanvas" className="m-3 rounded"
data-bs-target="#right-hamburger" data-bs-toggle="modal"
aria-controls="right-hamburger" data-bs-target="#inviteRoom"
aria-expanded="false" style={{
aria-label="Toggle navigation" height: "30px",
style={{ border: "#f4c1f2" }} fontWeight: "bold",
> backgroundColor: "#E0CEE8",
<img src={Rightimg} width="50px" height="30px" /> color: "black",
</button> border: "1px #D64D61",
</div> }}
>
초대
</button>
<div <div
className="offcanvas offcanvas-end" className="modal fade"
style={{ width: "330px" }} id="inviteRoom"
tabIndex="-1" tabIndex="-1"
id="right-hamburger" aria-labelledby="exitRoomLabel"
aria-labelledby="hamburgerLabel" aria-hidden="true"
> >
<div className="offcanvas-header"> <div className="modal-dialog">
<p <div className="modal-content">
className="col-6 offcanvas-title" <div className="modal-header">
id="offcanvasExampleLabel"
style={{
fontWeight: "bold",
fontSize: "15px",
overflow: "hidden",
whiteSpace: "nowrap",
width: "150px",
color: "#000000",
}}
>
방 이름{/*Room.name*/}
</p>
<h6 className="mt-2" id="roomId">
{" "}
{`${roomId}`}{" "}
</h6>
<button <button
type="button" type="button"
className="btn-close text-reset" className="btn-close"
data-bs-dismiss="offcanvas" data-bs-dismiss="modal"
aria-label="Close" aria-label="Close"
></button> ></button>
</div>
<div className="modal-body d-flex justify-content-center">
어떤 방식으로 초대하시겠습니까?
</div>
<div className="row mb-3">
<div className="d-flex justify-content-evenly">
<button
type="submit"
className="col-2 p-1 btn btn-primary"
style={{ width: "120px" }}
>
카카오로 초대
</button>
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
style={{ width: "120px" }}
onClick={roomIdCopy}
>
방 Id 복사
</button>
</div>
</div>
</div> </div>
</div>
<ChannelSingle channel={channel} /> </div>
<div> <div className="d-flex flex-row-reverse">
<div className="d-flex flex-row-reverse"> <button
<button type="button"
type="button" className="m-3 rounded text-white"
className="m-3 rounded text-white" data-bs-toggle="modal"
data-bs-toggle="modal" data-bs-target="#exitRoom"
data-bs-target="#exitRoom" style={{
style={{ height: "30px",
height: "30px", fontWeight: "bold",
fontWeight: "bold", backgroundColor: "#d86da6",
backgroundColor: "#d86da6", color: "black",
color: "black", border: "1px #d86da6",
border: "1px #d86da6", }}
}} >
> 퇴장
퇴장 </button>
</button> {/* {admin ? (
{/* {admin ? (
<button <button
type="button" type="button"
className="m-3 rounded" className="m-3 rounded"
...@@ -142,57 +218,59 @@ const RightHamburger = () => { ...@@ -142,57 +218,59 @@ const RightHamburger = () => {
</button> </button>
) : null} */} ) : null} */}
<div <div
className="modal fade" className="modal fade"
id="exitRoom" id="exitRoom"
tabIndex="-1" tabIndex="-1"
aria-labelledby="exitRoomLabel" aria-labelledby="exitRoomLabel"
aria-hidden="true" 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={`/user/${id}`}
className="col-2 p-1 btn btn-primary"
> >
<div className="modal-dialog"> <button
<div className="modal-content"> type="button"
<div className="modal-header"> onClick={exitRoom}
<button className="btn btn-primary"
type="button" data-bs-dismiss="modal"
className="btn-close" >
data-bs-dismiss="modal" 예
aria-label="Close" </button>
></button> </Link>
</div> <button
<div className="modal-body d-flex justify-content-center"> type="submit"
이방에서 퇴장하시겠습니까? className="btn btn-primary"
</div> data-bs-dismiss="modal"
<div className="row mb-3"> >
<div className="d-flex justify-content-evenly"> 아니요
<Link to={`/user/${id}`} className="col-2 p-1 btn btn-primary"> </button>
{/* <div onSubmit={exitSubmit}> */} </div>
<button
type="button"
onClick={exitRoom}
className="btn btn-primary"
data-bs-dismiss="modal"
>
예
</button>
{/* </div> */}
</Link>
<button
type="submit"
className="btn btn-primary"
data-bs-dismiss="modal"
>
아니요
</button>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
); </div>
</div>
);
}; };
export default RightHamburger; export default RightHamburger;
\ No newline at end of file
client/src/components/SignUp.js
View file @ 17fb0773
...@@ -66,91 +66,103 @@ const Signup = () => { ...@@ -66,91 +66,103 @@ const Signup = () => {
const { name, id, password, checkpw, phone } = user const { name, id, password, checkpw, phone } = user
return ( return (
<div className="container"> <div>
{error && <div className="alert alert-danger">{error}</div>} <div>
<form onSubmit={handleSubmit}> <form
<div className="m-3 d-flex justify-content-center"> style={{ backgroundColor: '#FCF4FF' }}
<Link to="/"> className="flex-column align-items-center justify-content-center p-2"
<img src="/BORA.png" style={{ width: '160px' }} /> >
</Link> <div className="d-flex justify-content-center">
</div> <Link to="/">
<div className="row mt-4"> <img src="/BORA.png" style={{ width: '160px' }} />
<h5 style={{ textAlign: 'center' }}>회원가입</h5> </Link>
</div>
<div className="form-group">
<div className="p-2">
<label className="p-1">이름</label>
<input
className="form-control"
id="name"
type="text"
name="name"
placeholder="이름을 입력하세요"
value={name}
onChange={handleChange}
/>
</div> </div>
<div className="p-2"> </form>
<label className="p-1">아이디</label> </div>
<input <div
className="form-control" style={{ backgroundColor: '#262626', width: 'auto', height: '2px' }}
id="text" ></div>
type="text" <div className="container">
name="email" <form onSubmit={handleSubmit}>
placeholder="아이디를 입력하세요" <div className="row mt-4">
value={id} <h5 style={{ textAlign: 'center' }}>회원가입</h5>
onChange={handleChange}
/>
</div> </div>
<div className="p-2"> {error && <div className="alert alert-danger">{error}</div>}
<label className="p-1">비밀번호</label> <div className="form-group">
<input <div className="p-2">
className="form-control" <label className="p-1">이름</label>
id="password" <input
type="password" className="form-control"
name="password" id="name"
placeholder="비밀번호를 입력하세요" type="text"
value={password} name="name"
onChange={handleChange} placeholder="이름을 입력하세요"
/> value={name}
onChange={handleChange}
/>
</div>
<div className="p-2">
<label className="p-1">아이디</label>
<input
className="form-control"
id="text"
type="text"
name="email"
placeholder="아이디를 입력하세요"
value={id}
onChange={handleChange}
/>
</div>
<div className="p-2">
<label className="p-1">비밀번호</label>
<input
className="form-control"
id="password"
type="password"
name="password"
placeholder="비밀번호를 입력하세요"
value={password}
onChange={handleChange}
/>
</div>
<div className="p-2">
<label className="p-1">비밀번호확인</label>
<input
className="form-control"
id="checkpw"
type="password"
name="checkpw"
placeholder="비밀번호를 다시 입력하세요"
value={checkpw}
onChange={handleChange}
/>
</div>
<div className="p-2">
<label className="p-1">전화번호</label>
<input
className="form-control"
id="phone"
type="text"
name="phone"
placeholder="'-'을 제외하고 입력하세요"
value={phone}
onChange={handleChange}
/>
</div>
{/* {console.log(disabled)} */}
<div className="mt-3 d-flex justify-content-center">
<button
type="submit"
className="btn btn-primary"
onClick={handleSubmit}
disabled={disabled}
>
회원가입
</button>
</div>
</div> </div>
<div className="p-2"> </form>
<label className="p-1">비밀번호확인</label> </div>
<input
className="form-control"
id="checkpw"
type="password"
name="checkpw"
placeholder="비밀번호를 다시 입력하세요"
value={checkpw}
onChange={handleChange}
/>
</div>
<div className="p-2">
<label className="p-1">전화번호</label>
<input
className="form-control"
id="phone"
type="text"
name="phone"
placeholder="'-'을 제외하고 입력하세요"
value={phone}
onChange={handleChange}
/>
</div>
{/* {console.log(disabled)} */}
<div className="mt-3 d-flex justify-content-center">
<button
type="submit"
className="btn btn-primary"
onClick={handleSubmit}
disabled={disabled}
>
회원가입
</button>
</div>
</div>
</form>
</div> </div>
) )
} }
......
server/app.js
View file @ 17fb0773
...@@ -19,6 +19,10 @@ const io = new Server(server, { ...@@ -19,6 +19,10 @@ const io = new Server(server, {
app.use(express.json()); app.use(express.json());
app.use(express.urlencoded({ extended: true })); app.use(express.urlencoded({ extended: true }));
app.use(cookieParser()); app.use(cookieParser());
app.use('/uploads', express.static('uploads'))
app.use('/roomUploads', express.static('roomUploads'))
app.use("/api", mainRouter); app.use("/api", mainRouter);
......
server/controllers/room.controller.js
View file @ 17fb0773
...@@ -2,7 +2,7 @@ import { Room, User } from "../models/index.js"; ...@@ -2,7 +2,7 @@ import { Room, User } from "../models/index.js";
import { customAlphabet } from "nanoid"; import { customAlphabet } from "nanoid";
import isLength from "validator/lib/isLength.js"; import isLength from "validator/lib/isLength.js";
import RoomModel from "../models/room.model.js"; import RoomModel from "../models/room.model.js";
import multer from "multer";
const nanoid = customAlphabet("1234567890abcdef", 10); const nanoid = customAlphabet("1234567890abcdef", 10);
const joinRoom = async (req, res) => { const joinRoom = async (req, res) => {
...@@ -43,7 +43,6 @@ const joinRoom = async (req, res) => { ...@@ -43,7 +43,6 @@ const joinRoom = async (req, res) => {
} }
}; };
const multer = require("multer");
const upLoadRoomImg = multer({ dest: "roomUploads/" }); const upLoadRoomImg = multer({ dest: "roomUploads/" });
const roomImgUpload = upLoadRoomImg.fields([{ name: "profileimg", maxCount: 1 }]); const roomImgUpload = upLoadRoomImg.fields([{ name: "profileimg", maxCount: 1 }]);
......
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