0805

client/src/apis/room.api.js

@@ -21,10 +21,15 @@ const join = async (payload) => {
 };
 
 const joinChannel = async (payload) => {
-  const { data } = await axios.put("/api/room/joinChannel", payload);
+  const { data } = await axios.post("/api/room/joinChannel", payload);
   return data;
 };
 
-const roomApi = { getRoom, exitRoom, create, join, joinChannel };
+const makeChannel = async (payload) => {
+  const { data } = await axios.post("/api/room/makeChannel", payload);
+  return data;
+};
+
+const roomApi = { getRoom, exitRoom, create, join, joinChannel, makeChannel };
 
 export default roomApi;

client/src/components/Room/ChannelSingle.js

-import { useState, useEffect } from 'react'
-import { Link, Redirect, useParams } from 'react-router-dom'
+import { useState } from 'react'
+import { Link, useParams } from 'react-router-dom'
 import roomApi from '../../apis/room.api';
 import userApi from '../../apis/user.api'
 import catchErrors from "../../context/catchError";
 
 const ChannelSingle = (props) => {
   const [error, setError] = useState("");
-  const [succes, setSucces] = useState(false);
+  const [success, setSuccess] = useState(false);
   const [roomName, setRoomName] = useState('');
   const { roomId, channelId } = useParams();
   console.log('props', props.channel)
@@ -18,17 +18,17 @@ const ChannelSingle = (props) => {
     console.log(e, userId)
     try {
       const data = await userApi.getUser(userId);
-      const key = indexCheck(e)
-      console.log(key)
-      const mem = props.channel[key].joinUser
+      const el = indexCheck(e)
+      console.log(el)
+      const mem = props.channel[el].joinUser
       console.log(mem)
       const joinCh = mem.includes(data.name);
       console.log(joinCh)
       if (!joinCh) {
-        const roomA = await roomApi.joinChannel({ roomId: roomId, channelName: e, plusUser: data.name, index: key })
+        const roomA = await roomApi.joinChannel({ roomId: roomId, channelName: e, plusUser: data.name, index: el })
         console.log(roomA)
         setRoomName(e)
-        setSucces(true)
+        setSuccess(true)
       } else {
         alert('이미 참여된 채널입니다.')
       }
@@ -36,21 +36,23 @@ const ChannelSingle = (props) => {
       catchErrors(error, setError);
     }
   }
-  
+
+  console.log('정보들어왔나', roomName, success)
+
   function indexCheck(e) {
-    for (const key in props.channel) {
-      console.log('체크', props.channel[key].channelName, e)
-      console.log('체크', props.channel[key].channelName === e)
-      if (props.channel[key].channelName === e) {
-        console.log('key', key)
-        return key
+    for (const el in props.channel) {
+      console.log('체크', props.channel[el].channelName, e)
+      console.log('체크', props.channel[el].channelName === e)
+      if (props.channel[el].channelName === e) {
+        console.log('el', el)
+        return el
       }
     }
   }
 
-  if(succes){
+  if (success) {
     alert(`${roomName} 채널에 참가되었습니다.`)
-    window.location.href=`/room/${roomId}/${roomName}`
+    window.location.href = `/room/${roomId}/${roomName}`
   }
 
   return (

client/src/components/Room/MakeChannel.js

+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import roomApi from "../../apis/room.api";
+import catchErrors from "../../context/catchError";
+
+
+const MakeChannel = () => {
+    const { roomId } = useParams();
+    const [channelName, setChannelName] = useState("");
+    const [error, setError] = useState("");
+    const [success, setSuccess] = useState(false);
+
+    function handleChange(event) {
+        const { value } = event.target;
+        setChannelName(value);
+    }
+    console.log(channelName)
+
+    async function handleSubmit(e) {
+        // e.preventDefault();
+        try {
+            const data = await roomApi.makeChannel({ roomId: roomId, channelName: channelName });
+            console.log('서버연결됬나요', data)
+            setSuccess(true);
+        } catch (error) {
+            catchErrors(error, setError);
+        } finally {
+            // setLoading(false);
+        }
+    }
+
+    if (success) {
+        // console.log('success', success)
+        alert('채널생성이 완료되었습니다!')
+        window.location.href = `/room/${roomId}/${channelName}`
+    }
+
+    return (
+        <div className="modal-content">
+            <form
+                onSubmit={handleSubmit}
+            >
+                <div className="modal-header">
+                    <div className="modal-title" id="MakeChannelModal">
+                        채널 생성하기
+                    </div>
+                    <button
+                        type="button"
+                        className="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"
+                    ></button>
+                </div>
+                <div className="modal-body">
+                    {error && <div className="alert alert-danger">{error}</div>}
+                    <div className="input-group mb-3">
+                        <input
+                            type="text"
+                            className="form-control"
+                            placeholder="생성할 채널이름을 입력하세요"
+                            aria-label="생성할 채널이름을 입력하세요"
+                            aria-describedby="basic-addon1"
+                            name="channelName"
+                            // value={channelName}
+                            onChange={handleChange}
+                        />
+                    </div>
+                    <div className="modal-footer">
+                        <button
+                            type="submit"
+                            className="btn btn-primary">
+                            확인
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    );
+};
+
+export default MakeChannel;

server/controllers/room.controller.js

@@ -128,6 +128,10 @@ const joinChannel = async (req, res) => {
   return res.json(true)
 }
 
+const makeChannel = async (req, res) => {
+  const { roomId, channelName } = req.body
+}
+
 export default {
-  joinRoom, roomImgUpload, createRoom, getRoom, exitRoom, joinChannel,
+  joinRoom, roomImgUpload, createRoom, getRoom, exitRoom, joinChannel, makeChannel,
 };

server/index.js

@@ -28,7 +28,7 @@ sequelize
       name: "room",
       owner: 8888,
       member: ['8888','9999'],
-      profileimg: "defaultimg",
+      profileimg: "23bf0d83f161b5bf066f0a81beeb4e78",
     });
 
     await Room.create({
@@ -36,7 +36,7 @@ sequelize
       name: "room1",
       owner: 9999,
       member: ['9999'],
-      profileimg: "defaultimg",
+      profileimg: "23bf0d83f161b5bf066f0a81beeb4e78",
     });
 
     app.listen(appConfig.port, () => {

server/models/room.model.js

@@ -17,11 +17,10 @@ const RoomModel = (sequelize) => {
       },
       member: {
         type: DataTypes.ARRAY(DataTypes.STRING),
-        //type: DataTypes.STRING,
       },
       profileimg: {
         type: DataTypes.STRING,
-        defaultValue: "defaultimg"
+        // defaultValue: "defaultimg"
       },
       channel: {
         type: DataTypes.ARRAY(DataTypes.JSON),

server/routes/room.route.js

@@ -6,7 +6,7 @@ router.route("/getRoom").post(roomCrtl.getRoom);
 router.route("/exitRoom/:id/:roomId").delete(roomCrtl.exitRoom);
 router.route("/create").post(roomCrtl.roomImgUpload, roomCrtl.createRoom);
 router.route("/join").put(roomCrtl.joinRoom);
-router.route("/joinChannel").put(roomCrtl.joinChannel);
-
+router.route("/joinChannel").post(roomCrtl.joinChannel);
+router.route("/makeChannel").post(roomCrtl.makeChannel);
 
 export default router;
\ No newline at end of file