Commit 043dc302 authored by 우지원's avatar 우지원
Browse files

룸첫화면추가

parent b41db3c2
......@@ -8,6 +8,7 @@ import InfoUpdatePage from "./pages/InfoUpdatePage";
import InvitePage from "./pages/InvitePage";
import SingupPage from "./components/SignUp";
import LoginPage from "./components/Login"
import InitRoomPage from "./pages/InitRoomPage";
function App() {
return (
......@@ -20,7 +21,8 @@ function App() {
<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} />
<Route path="/room/:roomId" component={InitRoomPage}>
{/* <Switch>
<Route path={"/room/:roomId/meeting"}>
<></>
......
......@@ -15,12 +15,14 @@ const Profile = () => {
async function getProfile(userID) {
try {
const data = await userApi.getUser(userID);
console.log(data)
setProfile(data.img)
} catch (error) {
catchErrors(error, setError);
}
}
console.log(profile)
useEffect(() => {
getProfile(userprofile);
}, [userprofile]);
......
import { useEffect, useState } from "react";
import catchErrors from "../../context/catchError";
import { useParams } from "react-router-dom";
import roomApi from "../../apis/room.api";
const INIT_ROOM = {
id: "",
name: "",
profileimg: "",
};
const InitRoom = () => {
const { roomId } = useParams();
const [room, setRoom] = useState(INIT_ROOM);
const [error, setError] = useState("");
async function getRoom(roomId) {
console.log(roomId)
try {
const data = await roomApi.getRoom([roomId]);
setRoom(data[0]);
} catch (error) {
catchErrors(error, setError);
}
}
console.log(room)
useEffect(() => {
console.log('roomId확인', roomId)
getRoom(roomId);
}, [roomId]);
return (
<div>
<div style={{ backgroundColor: "#262626", width: "auto", height: "2px" }} />
<form className="flex-row align-items-center justify-content-center m-5">
<div className="d-flex justify-content-center">
<img
src={`/roomUploads/${room.profileimg}`}
className="rounded-circle"
style={{
width: "250px",
height: "250px",
}}
/>
</div>
<div className="d-flex justify-content-center mt-3">
<div>
<div className="row">
<h6 className="col" style={{ text: 'center' }}> 방이름 </h6>
<h4 className="col"> {room.name} </h4>
</div>
<div className="row">
<h6 className="col"> 방코드 </h6>
<h4 className="col"> {room.id} </h4>
</div>
</div>
</div>
</form>
</div>
);
};
export default InitRoom;
......@@ -23,18 +23,18 @@ const LeftHamberger = () => {
const [error, setError] = useState("");
async function getChannel(roomId) {
console.log('roomId', roomId)
// console.log('roomId', roomId)
const ID = roomId
try {
const data = await roomApi.getRoom([ID]);
const Channel = data[0].channel
console.log('방데이터:', Channel[0])
// console.log('방데이터:', Channel[0])
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])
// console.log(key)
// console.log(prop)
// console.log(Channel[prop][key])
channelList.push({
channelName: key,
joinName: Channel[prop][key]
......@@ -46,10 +46,10 @@ const LeftHamberger = () => {
catchErrors(error, setError);
}
}
console.log(channel)
// console.log(channel)
useEffect(() => {
console.log('roomId', roomId)
// console.log('roomId', roomId)
getChannel(roomId);
}, [roomId]);
......
......@@ -16,18 +16,18 @@ const RightHamburger = () => {
const [error, setError] = useState("");
async function getChannel(roomId) {
console.log('roomId', roomId)
// console.log('roomId', roomId)
const ID = roomId
try {
const data = await roomApi.getRoom([ID]);
const Channel = data[0].channel
console.log('방데이터:', 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])
// console.log(key)
// console.log(prop)
// console.log(Channel[prop][key])
channelList.push({
channelName: key,
joinName: Channel[prop][key]
......@@ -39,10 +39,10 @@ const RightHamburger = () => {
catchErrors(error, setError);
}
}
console.log(channel)
// console.log(channel)
useEffect(() => {
console.log('roomId', roomId)
// console.log('roomId', roomId)
getChannel(roomId);
}, [roomId]);
return (
......
import ChannelList from '../components/Room/ChannelList'
import InitRoom from '../components/Room/InitRoom'
const InitRoomPage = () => {
return (
<div>
<ChannelList />
<InitRoom />
</div>
)
}
export default InitRoomPage
......@@ -28,7 +28,7 @@ sequelize
name: "room",
owner: 8888,
member: [8888],
profileimg: "ef0930f6be18ce73380d952337a6de1f",
profileimg: "defaultimg",
});
await Room.create({
......@@ -36,7 +36,7 @@ sequelize
name: "room1",
owner: 9999,
member: [9999],
profileimg: "ef0930f6be18ce73380d952337a6de1f",
profileimg: "defaultimg",
});
app.listen(appConfig.port, () => {
......
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