diff --git a/client/src/images/RightHamburgerImg.png b/client/public/RightHamburgerImg.png similarity index 100% rename from client/src/images/RightHamburgerImg.png rename to client/public/RightHamburgerImg.png diff --git a/client/src/images/backward.png b/client/public/backward.png similarity index 100% rename from client/src/images/backward.png rename to client/public/backward.png diff --git a/client/src/images/micbtn.png b/client/public/micbtn.png similarity index 100% rename from client/src/images/micbtn.png rename to client/public/micbtn.png diff --git a/client/src/images/micoffbtn.png b/client/public/micoffbtn.png similarity index 100% rename from client/src/images/micoffbtn.png rename to client/public/micoffbtn.png diff --git a/client/src/images/speakerbtn.png b/client/public/speakerbtn.png similarity index 100% rename from client/src/images/speakerbtn.png rename to client/public/speakerbtn.png diff --git a/client/src/images/speakeroffbtn.png b/client/public/speakeroffbtn.png similarity index 100% rename from client/src/images/speakeroffbtn.png rename to client/public/speakeroffbtn.png diff --git a/client/src/images/videobtn.png b/client/public/videobtn.png similarity index 100% rename from client/src/images/videobtn.png rename to client/public/videobtn.png diff --git a/client/src/images/videooffbtn.png b/client/public/videooffbtn.png similarity index 100% rename from client/src/images/videooffbtn.png rename to client/public/videooffbtn.png diff --git a/client/src/components/Home/RoomSingle.js b/client/src/components/Home/RoomSingle.js index d5d03cb0c487fbeeb79e74499f9e0f40b7727744..abb6885a4c40c3c6105aef4ec53b2b105b11ea49 100644 --- a/client/src/components/Home/RoomSingle.js +++ b/client/src/components/Home/RoomSingle.js @@ -38,7 +38,6 @@ const RoomSingle = () => { useEffect(() => { getJoinRoom(id); }, [id]); - console.log(room) const { profileimg } = room; return ( @@ -46,7 +45,7 @@ const RoomSingle = () => { {room && room.map((el) => (
- {room === INIT_ROOM ? (
): ( + {room[0] === INIT_ROOM ? (
): ( { } } if (success) { - alert('로그인 되었습니다'); + alert('로그인 되었습니다') window.location.href = `/user/${id}` } const { email, password } = user return ( -
-
-
- - - -
+
+
+ +
+ + + +
+ +
+
+
+
-

로그인

+
로그인
{error &&
{error}
}
@@ -99,6 +110,7 @@ const Login = () => {
+
) } diff --git a/client/src/components/Room/InitRoom.js b/client/src/components/Room/InitRoom.js index c5dd990ab304e446850e8696f70b79494811bc56..65ffa885d351244469c22a91d30f3eb6e3032a98 100644 --- a/client/src/components/Room/InitRoom.js +++ b/client/src/components/Room/InitRoom.js @@ -17,7 +17,9 @@ const InitRoom = () => { async function getRoom(roomId) { try { 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) { catchErrors(error, setError); } diff --git a/client/src/components/Room/RightHamburger.js b/client/src/components/Room/RightHamburger.js index a1c4a71fe41edcd4150350a94251abfd26f26e39..707203e48b06f7a774b9b17da0baa8c419a43a28 100644 --- a/client/src/components/Room/RightHamburger.js +++ b/client/src/components/Room/RightHamburger.js @@ -1,132 +1,208 @@ import { useState, useEffect } from "react"; import { Link, useParams } from "react-router-dom"; import ChannelSingle from "./ChannelSingle"; -import Rightimg from "../../images/RightHamburgerImg.png"; import RoomApi from "../../apis/room.api"; -import roomApi from "../../apis/room.api"; import catchErrors from "../../context/catchError"; +const INIT_ROOM = { + name: "", +}; + const INIT_CHANNEL = { - channelName: "", - joinName: [], + channelName: "", + joinName: [], }; const RightHamburger = () => { - const [channel, setChannel] = useState([INIT_CHANNEL]); - const { roomId } = useParams(); - 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); - } + const [channel, setChannel] = useState([INIT_CHANNEL]); + const [room, setRoom] = useState([INIT_ROOM]); + const { roomId } = useParams(); + const [error, setError] = useState(""); + const id = localStorage.getItem("user"); + 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) { - // console.log('roomId', roomId) - const ID = roomId - try { - const data = await roomApi.getRoom([ID]); - const Channel = data[0].channel - console.log('방데이터:', Channel) - const channelList = []; - for (const prop in Channel) { // Channel의 항목(prop)으로 작업을 실행합니다 - for (const key in Channel[prop]) { - console.log(key) - console.log(prop) - console.log(Channel[prop][key]) - channelList.push({ - channelName: key, - joinName: Channel[prop][key] - }); - } - } - setChannel(channelList); - } catch (error) { - catchErrors(error, setError); + async function getChannel(roomId) { + const ID = roomId; + try { + const data = await RoomApi.getRoom([ID]); + const Channel = data[0].channel; + console.log("방데이터:", Channel); + const channelList = []; + for (const prop in Channel) { + // Channel의 항목(prop)으로 작업을 실행합니다 + for (const key in Channel[prop]) { + console.log(key); + console.log(prop); + console.log(Channel[prop][key]); + channelList.push({ + channelName: key, + joinName: Channel[prop][key], + }); } + } + setChannel(channelList); + } catch (error) { + catchErrors(error, setError); } - // console.log(channel) + } - useEffect(() => { - // console.log('roomId', roomId) - getChannel(roomId); - }, [roomId]); - return ( + // console.log(channel) + + useEffect(() => { + getChannel(roomId); + getRoom(roomId); + }, [roomId]); + + function roomIdCopy() { + const t = document.querySelector("#roomId").innerText; + console.log(t); + navigator.clipboard.writeText(t); + document.execCommand("copy"); + } + return ( +
+
+ +
+
+
+

+ {room.name} +

+
+ {" "} + {`${roomId}`}{" "} +
+ +
-
- -
+ +
+ - ); +
+
+ ); }; -export default RightHamburger; \ No newline at end of file +export default RightHamburger; diff --git a/client/src/components/SignUp.js b/client/src/components/SignUp.js index 0da59d8a34d7ee877e461ed0ddc8c6fd71adcce3..a4f91ff7f23fdde8e08c6d33a4ed27fd38d6c199 100644 --- a/client/src/components/SignUp.js +++ b/client/src/components/SignUp.js @@ -66,91 +66,103 @@ const Signup = () => { const { name, id, password, checkpw, phone } = user return ( -
- {error &&
{error}
} -
-
- - - -
-
-
회원가입
-
-
-
- - +
+
+ +
+ + +
-
- - + +
+
+
+
+
+
회원가입
-
- - + {error &&
{error}
} +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ {/* {console.log(disabled)} */} +
+ +
-
- - -
-
- - -
- {/* {console.log(disabled)} */} -
- -
-
-
+ +
) } diff --git a/server/app.js b/server/app.js index 2156265afd818807baa2653757d0bb2fa7126d86..72cd05a130a32e2e59ee8f466dc5d97051fdb72f 100644 --- a/server/app.js +++ b/server/app.js @@ -19,6 +19,10 @@ const io = new Server(server, { 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); diff --git a/server/controllers/room.controller.js b/server/controllers/room.controller.js index 56e1b3b9d6872ee2cfadf57f7b2a91fc93f01780..39952aaec812e3f89dd11b65f795cb67630b7f60 100644 --- a/server/controllers/room.controller.js +++ b/server/controllers/room.controller.js @@ -2,7 +2,7 @@ import { Room, User } from "../models/index.js"; import { customAlphabet } from "nanoid"; import isLength from "validator/lib/isLength.js"; import RoomModel from "../models/room.model.js"; - +import multer from "multer"; const nanoid = customAlphabet("1234567890abcdef", 10); const joinRoom = async (req, res) => { @@ -43,7 +43,6 @@ const joinRoom = async (req, res) => { } }; -const multer = require("multer"); const upLoadRoomImg = multer({ dest: "roomUploads/" }); const roomImgUpload = upLoadRoomImg.fields([{ name: "profileimg", maxCount: 1 }]);