Skip to content

GitLab

Commit 2ddaecff authored by 권병윤's avatar 권병윤
Browse files

0807

parent 7c53066a
Show whitespace changes
Inline Side-by-side
client/src/apis/room.api.js
View file @ 2ddaecff
......@@ -25,6 +25,11 @@ const changename = async (payload) => {
return data;
}
const roomApi = { getRoom, exitRoom, create, join, changename };
const profileimg = async (formData) => {
const { data } = await axios.put("/api/room/profileimg", formData);
return data;
};
const roomApi = { getRoom, exitRoom, create, join, changename, profileimg };
export default roomApi;
client/src/components/Home/CreateRoom.js
View file @ 2ddaecff
......@@ -22,6 +22,7 @@ const CreateRoom = () => {
function handleChange(event) {
const { name, value, files } = event.target;
console.log(event.target)
if (files) {
setRoom({ ...room, [name]: files[0] })
} else {
......
client/src/components/Room/Channelsettingchange.js 0 → 100644
View file @ 2ddaecff
import { useParams } from "react-router";
import Createchannel from "./Createchannel";
import Deletechannel from "./Deletechannel";
const Channelsettingchange = (props) => {
const { roomId } = useParams();
console.log(props);
console.log(roomId);
return (
<div>
<button
type="submit"
data-bs-toggle="modal"
data-bs-target="#changechannel"
style={{
weight: "100px",
height: "60px",
backgroundColor: "#f5cfe3",
borderRadius: "5px",
color: "black",
border: "1px #f5cfe3",
}}
>
채널 설정 변경{/* 방 설정 변경으로 바꾸기 */}
</button>
<div
className="modal fade"
id="changechannel"
tabIndex="-1"
aria-labelledby="changechannelsettingLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<div className="modal-title" id="changechannelsetting">
채널 설정 변경
</div>
{/* <Createchannel />
<Deletechannel /> */}
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
</div>
</div>
</div>
</div>
);
};
export default Channelsettingchange;
client/src/components/Room/Createchannel.js 0 → 100644
View file @ 2ddaecff
/* 만들 채널의 이름을 입력받고(지금부터 "이름"이라 하자.), 그걸로 {"이름": []}의 형태로 체널을 만든다. 그후, 그 json파일을 현재 roomId의 channel에 추가한다. */
const Createchannel = () => {
return (
<div>
</div>
);
};
export default Createchannel;
\ No newline at end of file
client/src/components/Room/Deletechannel.js 0 → 100644
View file @ 2ddaecff
/* 삭제할 채널의 이름을 입력받아서 일치하는 채널이름이 있으면 삭제하고, 없으면 그런 이름의 채널이 존재하지 않는다고 알림창을 띄운다. */
const Deletechannel = () => {
return (
<div>
</div>
);
};
export default Deletechannel;
\ No newline at end of file
client/src/components/Room/RightHamburger.js
View file @ 2ddaecff
......@@ -4,7 +4,8 @@ import ChannelSingle from "./ChannelSingle";
import RoomApi from "../../apis/room.api";
import catchErrors from "../../context/catchError";
import KakaoShareButton from "../KakaoShareButton";
import Roomnamechange from "./Roomnamechange";
import Roomsettingchange from "./Roomsettingchange";
import Channelsettingchange from "./Channelsettingchange";
const INIT_ROOM = {
name: "",
......@@ -15,6 +16,7 @@ const INIT_CHANNEL = {
channelName: "",
joinName: [],
};
const RightHamburger = () => {
const [channel, setChannel] = useState([INIT_CHANNEL]);
const [room, setRoom] = useState([INIT_ROOM]);
......@@ -245,21 +247,8 @@ const RightHamburger = () => {
</div>
<div className="row mb-3">
<div className="d-flex justify-content-evenly">
{/* <button
type="submit"
data-bs-dismiss="modal"
style={{
weight: "100px",
height: "60px",
backgroundColor: "#f5cfe3",
borderRadius: "5px",
color: "black",
border: "1px #f5cfe3",
}}
>
채널 이름 변경
</button> */}
<Roomnamechange />
<Roomsettingchange />
<Channelsettingchange channel={channel} />
</div>
</div>
</div>
......
client/src/components/Room/Roomnamechange.js → client/src/components/Room/Roomsettingchange.js
View file @ 2ddaecff
......@@ -6,9 +6,10 @@ import catchErrors from "../../context/catchError";
const INIT_Room = {
id: "",
name: "",
profileimg: "",
};
const Roomnamechange = () => {
const Roomsettingchange = () => {
const { roomId } = useParams();
const [Room, setRoom] = useState(INIT_Room);
const [error, setError] = useState("");
......@@ -17,7 +18,7 @@ const Roomnamechange = () => {
async function getdata(Roomdata) {
try {
const data = await RoomApi.getRoom(Roomdata);
const data = await RoomApi.getRoom([Roomdata]);
setRoom(data);
console.log(data);
} catch (error) {
......@@ -31,10 +32,29 @@ const Roomnamechange = () => {
const updateinfo = (event) => {
const { name, value } = event.target;
setRoom({ ...Room, [name]: value });
console.log(Room);
};
const handleChange = async (event) => {
const { files } = event.target;
console.log("files:", files);
let formData = new FormData();
formData.append("profileimg", files[0]);
formData.append("id", roomId);
try {
const res = await RoomApi.profileimg(formData);
// if (files) {
// setRoom({ ...Room, profileimg: res });
// } else {
// setRoom();
// }
} catch (error) {
catchErrors(error, setError);
}
};
const changeinfo = async (event) => {
window.location.reload();
// window.location.href = window.location.href;
const req = await RoomApi.changename(Room);
};
......@@ -53,7 +73,7 @@ const Roomnamechange = () => {
border: "1px #f5cfe3",
}}
>
방 이름 변경
방 설정 변경{/* 방 설정 변경으로 바꾸기 */}
</button>
<div
......@@ -66,6 +86,9 @@ const Roomnamechange = () => {
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<div className="modal-title" id="changeRoomsetting">
방 설정 변경
</div>
<button
type="button"
className="btn-close"
......@@ -75,9 +98,26 @@ const Roomnamechange = () => {
</div>
<div className="modal-body d-flex justify-content-center"></div>
<div className="row mb-3">
<div className="d-flex justify-content-center" style={{ margin:"0px"}}>
<div
className="d-flex justify-content-center"
style={{ margin: "0px" }}
>
<input
type="file"
className="upload-hidden"
onChange={handleChange}
accept="image/*"
name="profileimg"
/>
</div>
<div
className="d-flex justify-content-center"
style={{ margin: "0px" }}
>
{/* <Link to="/user/:id"> */}
<p style={{marginTop: "31px", marginBottom: "0px"}}>방 이름: </p>
<p style={{ marginTop: "31px", marginBottom: "0px" }}>
방 이름:{" "}
</p>
<input
onChange={updateinfo}
name="name"
......@@ -95,7 +135,7 @@ const Roomnamechange = () => {
height: "38px",
width: "130px",
marginTop: "0px",
marginBottom: "0px"
marginBottom: "0px",
}}
/>
</div>
......@@ -125,4 +165,4 @@ const Roomnamechange = () => {
);
};
export default Roomnamechange;
export default Roomsettingchange;
client/src/pages/InvitePage.js
View file @ 2ddaecff
import Header from "../components/Header";
import { useState, useEffect } from "react";
import { useParams } from "react-router";
import roomApi from "../apis/room.api";
import userApi from "../apis/user.api";
import catchErrors from "../context/catchError";
const INIT_PROFILE = {
id: "",
roomNumber: ""
};
// userapi로 유저정보 불러다가, 참여방 목록에 그 방아이디 추가하고, 방에도 그 유저 아이디 추가한 다음에 참가시키기.
const InvitePage = () => {
const [profile, setProfile] = useState([INIT_PROFILE]);
const [success, setSuccess] = useState(false);
const [error,setError]=useState("");
const usercheck = localStorage.getItem("user");
const {roomId} = useParams();
async function getProfile(userID) {
try {
const data = await userApi.getUser(userID);
setProfile(data);
} catch (error) {
catchErrors(error, setError);
}
}
async function joinroom(userId,roomId) {
try {
// setLoading(true);
setError("");
const data = await roomApi.join({ userId: userId, roomId: roomId });
console.log('서버연결됬나요', data)
setSuccess(true);
} catch (error) {
catchErrors(error, setError);
} finally {
// setLoading(false);
}
}
useEffect(() => {
getProfile(usercheck);
}, []);
function goInvitedroom() {
let check1= null;
let check2= null;
console.log(usercheck);
if (usercheck)
check1 = window.confirm("카카오톡으로 전달된 초대코드를 사용해 참여해 주세요")
joinroom(usercheck,roomId);
if(success)
check1 = window.confirm("방 참여가 완료되었습니다.")
if(check1)
window.location.href=`/user/${usercheck}`
else
......
server/controllers/room.controller.js
View file @ 2ddaecff
......@@ -46,6 +46,21 @@ const joinRoom = async (req, res) => {
const upLoadRoomImg = multer({ dest: "roomUploads/" });
const roomImgUpload = upLoadRoomImg.fields([{ name: "profileimg", maxCount: 1 }]);
const update = async (req, res) => {
try {
console.log("id:", req.body.id);
const id = req.body.id;//roomId
const avatar = req.files["profileimg"][0];//profileimg
const img = avatar.filename;
console.log(img);
await Room.update({ profileimg: img }, { where: { id: id } });
res.json(img);
} catch (error) {
console.log(error);
res.status(500).send("이미지 업데이트 실패");
}
};
const createRoom = async (req, res) => {
const { userId, name } = req.body;
const avatar = req.files["profileimg"][0];
......@@ -133,5 +148,5 @@ const changename = async (req,res) => {
};
export default {
joinRoom, roomImgUpload, createRoom, getRoom, exitRoom, changename
joinRoom, roomImgUpload, update, createRoom, getRoom, exitRoom, changename
};
server/routes/room.route.js
View file @ 2ddaecff
......@@ -7,5 +7,6 @@ router.route("/exitRoom/:id/:roomId").delete(roomCrtl.exitRoom);
router.route("/create").post(roomCrtl.roomImgUpload, roomCrtl.createRoom);
router.route("/join").put(roomCrtl.joinRoom);
router.route("/changename").put(roomCrtl.changename);
router.route("/profileimg").put(roomCrtl.roomImgUpload, roomCrtl.update)
export default router;
\ No newline at end of file
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