채널퇴장 완료!!!!!!!!!!ㅠㅠㅠㅠㅠㅠ

client/src/components/Room/ChannelList.js

-import { Link } from 'react-router-dom'
-import React, { useState } from 'react';
+import { Link, useParams } from 'react-router-dom'
+import React, { useEffect, useState } from 'react';
 import RightHamburger from './RightHamburger';
+import roomApi from '../../apis/room.api';
+import catchErrors from '../../context/catchError';
+import userApi from '../../apis/user.api';
+
+const INIT_CHANNEL = {
+  channelName: "",
+  joinUser: [],
+};
+
 
 const ChannelList = () => {
+  const { roomId } = useParams();
+  const [error, setError] = useState("");
+  const [channel, setChannel] = useState([INIT_CHANNEL]);
   const id = localStorage.getItem('user');
 
+  async function getChannel(roomId) {
+    try {
+      const data = await roomApi.getRoom([roomId]);
+      const Channel = data[0].channel;
+      const channelList = [];
+      for (const prop in Channel) {
+        for (const el in Channel[prop]) {
+          channelList.push({
+            channelName: el,
+            joinUser: Channel[prop][el],
+          });
+        }
+      }
+      setChannel(channelList);
+    } catch (error) {
+      catchErrors(error, setError);
+    }
+  }
+
+  async function exitChannel() {
+    try {
+      const data = await userApi.getUser(id);
+      const A = doubleJoinCheck(data.name)
+      if (A) {
+        await roomApi.doubleJoin({ roomId: roomId, index1: A.index1, index2: A.index2, joinChName: A.joinChName })
+      }
+    } catch (error) {
+      catchErrors(error, setError);
+    }
+  }
+
+  function doubleJoinCheck(e) {
+    for (const index in channel) {
+      for (const el in channel[index].joinUser) {
+        if (channel[index].joinUser[el] === e) {
+          const doublejoinCh = channel[index].channelName
+          const A = {
+            index1: index,
+            index2: el,
+            joinChName: doublejoinCh,
+          }
+          return A
+        }
+      }
+    }
+  }
+
+  useEffect(() => {
+    getChannel(roomId);
+  }, [roomId])
+
   return (
     <div>
       <nav className="navbar navbar-light ">
         <div className="col-2"></div>
-        <div>
+        <div onClick={exitChannel}>
           <Link to={`/user/${id}`}>
             <img src="/BORA.png" style={{ width: '160px' }} />
           </Link>

client/src/components/Room/ChannelSingle.js

@@ -6,12 +6,9 @@ import catchErrors from "../../context/catchError";
 
 const ChannelSingle = (props) => {
   const [error, setError] = useState("");
-  const [userName, setUserName] = useState('');
   const [success, setSuccess] = useState(false);
   const [roomName, setRoomName] = useState('');
   const { roomId, channelId } = useParams();
-  console.log('props', props.channel)
-  console.log('hi', channelId)
   const userId = localStorage.getItem('user')
 
 
@@ -19,22 +16,14 @@ const ChannelSingle = (props) => {
     console.log(e, userId)
     try {
       const data = await userApi.getUser(userId);
-      setUserName(data.name)
       const index1 = indexCheck(e)
       const A = doubleJoinCheck(data.name)
-      console.log(A)
       const mem = props.channel[index1].joinUser
       const joinCh = mem.includes(data.name);
-      console.log(A)
       if (!joinCh) {
         if (A) {
-          console.log('더블더블')
-          console.log(A.index1, A.index2, A.joinChName)
-          // { roomId: roomId, index1: A.index1, index2: A.index2, joinChName: A.joinChName }
-          const double = await roomApi.doubleJoin({ roomId: roomId, index1: A.index1, index2: A.index2, joinChName: A.joinChName })
-          console.log(double)
+          await roomApi.doubleJoin({ roomId: roomId, index1: A.index1, index2: A.index2, joinChName: A.joinChName })
         }
-        console.log('서버연결시작')
         const roomA = await roomApi.joinChannel({ roomId: roomId, channelName: e, plusUser: data.name, index: index1 })
         setRoomName(e)
         setSuccess(true)
@@ -46,8 +35,6 @@ const ChannelSingle = (props) => {
     }
   }
 
-  console.log('정보들어왔나', roomName, success)
-
   function indexCheck(e) {
     for (const index1 in props.channel) {
       if (props.channel[index1].channelName === e) {

client/src/components/Room/InitRoom.js

@@ -17,9 +17,7 @@ const InitRoom = () => {
   async function getRoom(roomId) {
     try {
       const data = await roomApi.getRoom([roomId]);
-      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);
     }

client/src/components/Room/RightHamburger.js

@@ -32,28 +32,22 @@ const RightHamburger = () => {
     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) {
-    const ID = roomId;
     try {
-      const data = await RoomApi.getRoom([ID]);
+      const data = await RoomApi.getRoom([roomId]);
       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]);
+        for (const el in Channel[prop]) {
           channelList.push({
-            channelName: key,
-            joinUser: Channel[prop][key],
+            channelName: el,
+            joinUser: Channel[prop][el],
           });
         }
       }