SWM-FIRE · haryung-lee · Oct 28, 2022 · Oct 19, 2022 · Oct 19, 2022 · Oct 19, 2022
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "react-hot-toast": "^2.3.0",
     "react-items-carousel": "^2.8.0",
     "react-notion": "^0.10.0",
+    "react-player": "^2.11.0",
     "react-query": "^3.39.1",
     "react-router-dom": "6",
     "react-scripts": "5.0.1",

diff --git a/public/index.html b/public/index.html
@@ -2,6 +2,7 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
+
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script
       async
@@ -2134,6 +2135,18 @@
     /> -->
 
     <title>modoco</title>
+    <meta property="og:title" content="modoco" />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:image"
+      content="https://user-images.githubusercontent.com/64428916/197377529-6b2aa0f2-4e62-4fe6-ad14-137304780733.png"
+    />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:url" content="https://modocode.com/" />
+    <meta property="og:description" content="모여서 도란도란 같이 코딩해요💻" />
+    <meta property="og:site_name" content="모도코" />
+    <meta property="og:locale" content="ko" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/adapters/receiveMessage.ts b/src/adapters/receiveMessage.ts
@@ -14,20 +14,20 @@ const onChatMessage = (roomId: string) => {
 
   useEffect(() => {
     const receiveMessage = (receiveMsg) => {
-      const isMe = receiveMsg.sender === uid;
+      const isMe = receiveMsg.from === uid;
       const userInfo = isMe
         ? {
-            uid: receiveMsg.sender,
+            uid: receiveMsg.from,
             nickname,
             avatar,
           }
-        : connectedUsers.filter((user) => user.uid === receiveMsg.sender)[0];
+        : connectedUsers.filter((user) => user.uid === receiveMsg.from)[0];
 
       setMessages([
         ...messages.map((m, index) => {
           if (
             index === messages.length - 1 &&
-            m.uid === receiveMsg.sender &&
+            m.uid === receiveMsg.from &&
             moment(m.createdAt).format('LT') ===
               moment(receiveMsg.createdAt).format('LT')
           ) {
@@ -74,7 +74,7 @@ const onChatMessage = (roomId: string) => {
           moment(receiveMsg.createdAt).format('LT')
         ) {
           isHideNicknameAndAvatar = false;
-        } else if (msg[msg.length - 1].uid !== receiveMsg.sender) {
+        } else if (msg[msg.length - 1].uid !== receiveMsg.from) {
           isHideNicknameAndAvatar = false;
         } else if (msg[msg.length - 1].type !== 'MESSAGE') {
           isHideNicknameAndAvatar = false;

diff --git a/src/adapters/roomConnection.ts b/src/adapters/roomConnection.ts
@@ -52,6 +52,10 @@ export const roomConnection = (roomId: string) => {
 
     joinSuccess();
 
+    newSocket?.on('exception', (event) => {
+      console.log('except', event);
+    });
+
     newSocket?.on(SOCKET_EVENT.JOINED_ROOM, (room) => {
       console.log('[roomConnection] joinedRoom', room);
       emitAudioStateChange(roomId, userMic);

diff --git a/src/adapters/youtubeSocket.ts b/src/adapters/youtubeSocket.ts
@@ -0,0 +1,99 @@
+import { io } from 'socket.io-client';
+import { API } from '../config';
+import youtubeSearch from '../interface/youtubeSearch.interface';
+
+const youtubeSocket = {
+  socket: io(`${API.YOUTUBE_PLAYLIST as string}`, {
+    transports: ['websocket', 'polling'],
+    query: { token: localStorage.getItem('access_token') },
+  }),
+};
+
+const generateYoutubeSocket = () => {
+  youtubeSocket.socket = io(`${API.YOUTUBE_PLAYLIST as string}`, {
+    transports: ['websocket', 'polling'],
+    query: { token: localStorage.getItem('access_token') },
+  });
+};
+
+const initSocketConnection = () => {
+  if (!youtubeSocket.socket) generateYoutubeSocket();
+  youtubeSocket.socket?.connect();
+};
+
+const checkSocket = () => {
+  if (!youtubeSocket.socket || !youtubeSocket.socket.connected) {
+    initSocketConnection();
+  }
+};
+
+const disconnectSocket = () => {
+  youtubeSocket.socket?.off('connect');
+  youtubeSocket.socket?.off('playlist:join');
+  youtubeSocket.socket?.off('playlist:joined');
+  youtubeSocket.socket?.off('playlist:sync');
+  youtubeSocket.socket?.disconnect();
+};
+
+const connectedYoutube = () => {
+  youtubeSocket.socket?.on('connect', () => {
+    console.log(`[youtube connect] connected! ${youtubeSocket.socket?.id}`);
+  });
+};
+
+const joinYoutube = (roomId: string) => {
+  checkSocket();
+  youtubeSocket.socket?.emit('playlist:join', {
+    room: roomId,
+    playlistName: 'playlistItem',
+  });
+  console.log(
+    `[emit join] waiting for join ${roomId}! ${youtubeSocket.socket?.id}`,
+  );
+};
+
+// const joinedYoutube = () => {
+//   youtubeSocket.socket?.on('playlist:joined', (roomId: string) => {
+//     console.log(`[on join] joined ${roomId}! ${youtubeSocket.socket?.id}`);
+//   });
+// };
+
+const selectVideo = (roomId: string, video: youtubeSearch) => {
+  checkSocket();
+  youtubeSocket.socket?.emit('playlist:sync', {
+    room: roomId,
+    playlistName: 'playlistItem',
+    type: 'sync',
+    playlist: [{ video }],
+  });
+  console.log(
+    `[emit select] select ${video.id.videoId}! ${youtubeSocket.socket?.id}`,
+  );
+};
+
+const addVideo = (addFunc) => {
+  checkSocket();
+  youtubeSocket.socket?.on('playlist:sync', (data) => addFunc(data));
+  console.log(`[on add] add video! ${youtubeSocket.socket?.id}`);
+};
+
+const leaveYoutube = (roomId: string) => {
+  checkSocket();
+  youtubeSocket.socket?.emit('playlist:leave', {
+    room: roomId,
+    playlistName: 'playlistItem',
+  });
+  console.log(`[emit leave] leave ${roomId}! ${youtubeSocket.socket?.id}`);
+};
+
+export {
+  youtubeSocket,
+  initSocketConnection,
+  // generateYoutubeSocket,
+  disconnectSocket,
+  connectedYoutube,
+  joinYoutube,
+  selectVideo,
+  addVideo,
+  leaveYoutube,
+};
diff --git a/src/api/core/index.ts b/src/api/core/index.ts
@@ -1,2 +1,3 @@
 export { awsRequest } from './awsLambdaAxios';
 export { authorizationRequest, unAuthorizationRequest } from './backendAxios';
+export { youtubeAxios } from './youtubeAxios';
diff --git a/src/api/core/youtubeAxios.ts b/src/api/core/youtubeAxios.ts
@@ -0,0 +1,28 @@
+import axios from 'axios';
+import { API } from '../../config';
+
+const youtubeAxios = axios.create({
+  baseURL: API.YOUTUBE,
+});
+
+// add youtube key in params
+youtubeAxios.interceptors.request.use((config) => {
+  return Object.assign(config, {
+    params: {
+      ...config.params,
+      key: process.env.REACT_APP_YOUTUBE_KEY,
+    },
+  });
+});
+
+youtubeAxios.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (error) => {
+    console.warn('[Axios] ', error);
+    return Promise.reject(error);
+  },
+);
+
+export { youtubeAxios };
diff --git a/src/api/main.ts b/src/api/main.ts
@@ -3,6 +3,7 @@ import {
   authorizationRequest,
   unAuthorizationRequest,
   awsRequest,
+  youtubeAxios,
 } from './core/index';
 import { API } from '../config';
 
@@ -139,6 +140,29 @@ const getRecords = () => {
   return authorizationRequest.get(API.RECORDS);
 };
 
+/**
+ * youtube
+ */
+
+// search youtube video
+const searchYoutubeVideo = (keyword: string) => {
+  return youtubeAxios.get(API.YOUTUBE_SEARCH, {
+    params: {
+      q: keyword,
+      part: 'snippet',
+      maxResults: 15,
+      type: 'video',
+      videoEmbeddable: true,
+      videoCategoryId: 10,
+    },
+  });
+};
+
+// delete room
+const deleteRoom = (roomId: number) => {
+  return authorizationRequest.delete((API.ROOM as string) + roomId);
+};
+
 export {
   getUser,
   getMe,
@@ -156,4 +180,6 @@ export {
   getFriend,
   getRecords,
   changeProfile,
+  searchYoutubeVideo,
+  deleteRoom,
 };
diff --git a/src/assets/svg/Check.svg b/src/assets/svg/Check.svg
diff --git a/src/assets/svg/GrayYoutube.svg b/src/assets/svg/GrayYoutube.svg
diff --git a/src/assets/svg/MusicOff.svg b/src/assets/svg/MusicOff.svg
diff --git a/src/assets/svg/MusicOn.svg b/src/assets/svg/MusicOn.svg
diff --git a/src/assets/svg/RedYoutube.svg b/src/assets/svg/RedYoutube.svg
diff --git a/src/assets/svg/Search.svg b/src/assets/svg/Search.svg
diff --git a/src/assets/svg/WhiteYoutube.svg b/src/assets/svg/WhiteYoutube.svg
diff --git a/src/assets/svg/verticalMenu.svg b/src/assets/svg/verticalMenu.svg
diff --git a/src/components/atoms/chatting/SendChat.tsx b/src/components/atoms/chatting/SendChat.tsx
@@ -36,7 +36,7 @@ export default function SendChat({
     newSocket.emit('chatMessage', {
       room: roomId,
       type: 'MESSAGE',
-      sender: uid,
+      from: uid,
       message: newMessage,
       createdAt: new Date(),
     });
@@ -93,6 +93,8 @@ const Input = styled.textarea<{ roomId: string }>`
   color: rgba(255, 255, 255, 1);
   min-height: 2rem;
   max-height: 13rem;
+  resize: none;
+
   ::-webkit-scrollbar {
     width: 0.3rem;
   }