Update: listen and quit event

@@ -24,11 +24,13 @@ socket.on('chat message', (name, msg)=>{
 
 // 해당 채널을 재생하고자할 때 실행시켜주세요.
 const listen = (channelName)=>{
+    console.log(`listen ${channelName}`);
     socket.emit("joinRoom", channelName, "dummy name") // name이 뭔지 대연이도 잘 모름.
 }
 
 // 해당 채널을 재생 안하도록 할 때 실행시켜주세요.
 const quit = (channelName)=>{
+    console.log(`quit ${channelName}`);
     socket.emit("leaveRoom". channelName, "dummy name") // name이 뭔지 대연이도 잘 모름.
 }
 
@@ -63,15 +65,6 @@ export class ChannelList extends React.Component {
             {"id": "umi0410", "nickname": "진수", "view": 123124124, "category": "game2" , "url": "https://www.twitch.tv/umi0410", "isPlay": false},
             {"id": "name1", "nickname": "nick", "view": 999, "category": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg", "isPlay": false},
             {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false},
-            /* {"id": "name1", "nickname": "nick","view": 999, "category": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg", "isPlay": false},
-            {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false},
-            {"id": "name1", "nickname": "nick","view": 999, "category": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg", "isPlay": false},
-            {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false},
-            {"id": "name1", "nickname": "nick","view": 999, "category": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg", "isPlay": false},
-            {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false},
-            {"id": "name1", "nickname": "nick","view": 999, "category": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg", "isPlay": false},
-            {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false}, */
-            
         ]
 
         this.state = {
@@ -85,8 +78,10 @@ export class ChannelList extends React.Component {
         // 버튼을 누른 채널이 재생중일때
         if (channel.isPlay === true) {
             channels[index].isPlay = false;
-            console.log(channels[index].isPlay);
-            console.log(channels);
+            
+            // 기존 채널 재생 중지
+            quit(channels[index].id);
+
             this.setState({
                 channels: channels,
                 xisPlaying: null,
@@ -95,18 +90,22 @@ export class ChannelList extends React.Component {
 
         // 버튼을 누른 채널이 재생중이 아닐 때
         else {
-            console.log(channels[index].isPlay);
-            console.log(channels);
             // xisPlaying이 null이 아닐 때
             if (this.state.xisPlaying !== null) {
                 // 기존에 재생되던 채널의 isPlay를 false로, 클릭 이벤트가 발생한 채널의 isPlay를 true로 변경
                 channels[this.state.xisPlaying].isPlay = false;
                 channels[index].isPlay = true;
+
+                // 기존 채널 재생을 중지하고 새로운 채널을 listen
+                quit(channels[this.state.xisPlaying].id);
+                listen(channels[index].id);
             }
             
             // xisPlaying이 null일 때
             else {
                 channels[index].isPlay = true;
+                // 채널 listen
+                listen(channels[index].id);
             }
             
             this.setState({