Merge pull request #269 from SWM-FIRE/dev

merge dev
SWM-FIRE · Oct 19, 2022 · e1e0c80 · e1e0c80
2 parents 3245b2b + 6d9c78b
commit e1e0c80
Show file tree

Hide file tree

Showing 27 changed files with 229 additions and 96 deletions.
diff --git a/README.md b/README.md
@@ -10,16 +10,101 @@
 
 ## TEAM 🔥FIRE🔥 소개
 
-|윤영기 : FE|고주형 : BE|이하령 : FE|
-|:--:|:--:|:---:|
-|<img width="160px" src="https://avatars.githubusercontent.com/u/66371206?v=4"> | <img width="160px" src="https://user-images.githubusercontent.com/64428916/195526068-33be2cd0-066c-4584-9ae9-8c3344a60fb9.jpg" /> | <img width="160px" src="https://avatars.githubusercontent.com/u/64428916?v=4"> |
-|[@071yoon](https://github.com/071yoon)|[@IamGroooooot](https://github.com/IamGroooooot)|[@halang](https://github.com/haryung-lee)|
-| [![wakatime](https://wakatime.com/badge/user/4292264a-e9dd-4cc1-8ab6-1ada6ddb177a/project/79b7e168-b8e8-41f9-a790-c41967365f78.svg)](https://wakatime.com/badge/user/4292264a-e9dd-4cc1-8ab6-1ada6ddb177a/project/79b7e168-b8e8-41f9-a790-c41967365f78) |[![wakatime](https://wakatime.com/badge/user/95486c3b-017e-41e8-8d9c-20de1b876bf5/project/dabe2a55-4c66-49ab-ae59-8eba6b898e6f.svg)](https://wakatime.com/badge/user/95486c3b-017e-41e8-8d9c-20de1b876bf5/project/dabe2a55-4c66-49ab-ae59-8eba6b898e6f)|[![wakatime](https://wakatime.com/badge/user/02d79381-005e-489b-b7f0-5fdf9dc2a088/project/d5dd888b-da07-4723-bc9d-f7c07c44307a.svg)](https://wakatime.com/badge/user/02d79381-005e-489b-b7f0-5fdf9dc2a088/project/d5dd888b-da07-4723-bc9d-f7c07c44307a)| 
+|                                                                                                                       윤영기 : FE                                                                                                                       |                                                                                                                       고주형 : BE                                                                                                                       |                                                                                                                       이하령 : FE                                                                                                                       |
+| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+|                                                                                     <img width="160px" src="https://avatars.githubusercontent.com/u/66371206?v=4">                                                                                      |                                                            <img width="160px" src="https://user-images.githubusercontent.com/64428916/195526068-33be2cd0-066c-4584-9ae9-8c3344a60fb9.jpg" />                                                            |                                                                                     <img width="160px" src="https://avatars.githubusercontent.com/u/64428916?v=4">                                                                                      |
+|                                                                                                         [@071yoon](https://github.com/071yoon)                                                                                                          |                                                                                                    [@IamGroooooot](https://github.com/IamGroooooot)                                                                                                     |                                                                                                        [@halang](https://github.com/haryung-lee)                                                                                                        |
+| [![wakatime](https://wakatime.com/badge/user/4292264a-e9dd-4cc1-8ab6-1ada6ddb177a/project/79b7e168-b8e8-41f9-a790-c41967365f78.svg)](https://wakatime.com/badge/user/4292264a-e9dd-4cc1-8ab6-1ada6ddb177a/project/79b7e168-b8e8-41f9-a790-c41967365f78) | [![wakatime](https://wakatime.com/badge/user/95486c3b-017e-41e8-8d9c-20de1b876bf5/project/dabe2a55-4c66-49ab-ae59-8eba6b898e6f.svg)](https://wakatime.com/badge/user/95486c3b-017e-41e8-8d9c-20de1b876bf5/project/dabe2a55-4c66-49ab-ae59-8eba6b898e6f) | [![wakatime](https://wakatime.com/badge/user/02d79381-005e-489b-b7f0-5fdf9dc2a088/project/d5dd888b-da07-4723-bc9d-f7c07c44307a.svg)](https://wakatime.com/badge/user/02d79381-005e-489b-b7f0-5fdf9dc2a088/project/d5dd888b-da07-4723-bc9d-f7c07c44307a) |
 
 ## 프로젝트 소개
 
 **모도코**(모여서 도란도란 코딩) 프로젝트는 모각코를 하고 싶은 사람들이 모여 도란도란 코딩할 수 있게 해주는 플랫폼입니다. 개발자 친화적인 기능을 갖추고 모각코로 만들어진 인연이 이어질 수 있게 만들고자 합니다.
 
+---
+
+## 실행방법
+
+### Project Setting
+
+환경변수 세팅
+
+```shell
+# ************************************************* #
+#  This is an example env file for modoco frontend  #
+# ************************************************* #
+
+# backend server
+REACT_APP_BASE_URL=your_backend_server
+
+# channel talk key
+REACT_APP_CHANNEL_IO_KEY=your_channel_talk_key
+
+# oauth
+# oauth client id
+REACT_APP_GITHUB_CLIENT_ID=your_github_oauth_client_id
+REACT_APP_KAKAO_CLIENT_ID=your_kakao_oauth_client_id
+REACT_APP_GOOGLE_CLIENT_ID=your_google_oauth_client_id
+# oauth redirect uri
+REACT_APP_KAKAO_REDIRECT_URI=your_kakao_redirect_uri
+REACT_APP_GOOGLE_REDIRECT_URI=your_google_redirect_uri
+
+# turn server
+REACT_APP_TURN_URL=your_turn_server_url
+REACT_APP_TURN_CREDENTIAL=your_turn_server_credential
+REACT_APP_TURN_USERNAME=your_turn_server_username
+
+# lambda server
+REACT_APP_LAMBDA_INVITE=your_lambda_server_url
+```
+
+### Installation
+
+#### 1. Install npm dependency
+
+```shell
+# install packages
+$ yarn install
+
+# clean install packages
+$ yarn ci
+```
+
+#### 2. Run React
+
+```shell
+# run app
+yarn start
+
+# run app in https
+# need SSL_CRT_FILE=cert.pem SSL_KEY_FILE=key.pem in root
+yarn start:https
+
+# check style lint
+yarn lint:css
+```
+
+### Build
+
+```shell
+# build app
+yarn build
+```
+
+### Testing
+
+```shell
+# start test mode
+yarn test
+
+# run app and open cypress
+yarn cypress
+
+# open cypress without opening app
+npx cypress open
+```
+
+---
+
 ## Stacks 🚀
 
 ### Environment
@@ -50,6 +135,8 @@
 
 ![GA](https://img.shields.io/badge/Google%20Analytics-E37400?style=for-the-badge&logo=google%20analytics&logoColor=white) ![Wakatime](https://img.shields.io/badge/WakaTime-000000?style=for-the-badge&logo=WakaTime&logoColor=white) ![NewRelic](https://img.shields.io/badge/New--Relic-008C99?style=for-the-badge&logo=NewRelic&logoColor=white)
 
+---
+
 ## 동작 화면 💻
 
 ### 화면 구성
@@ -66,6 +153,8 @@
 | :-----------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------: |
 |                                                        바다                                                         |                                                        캠핑                                                         |                                                       모닥불                                                        |                                                        우주                                                         |                                                        여행                                                         |
 
+---
+
 ## 주요 기능 ✨
 
 ### ⭐️ 진행중인 모각코 방에 입장
@@ -93,6 +182,8 @@
 - 얼마나 했는지 궁금하시다면, 통계 페이지를 참고하세요
 - 오늘, 이번주, 한달 등 다양한 통계 자료를 보여드려요
 
+---
+
 ## 아키텍쳐 ⚒
 
 ### Full Architecture
@@ -107,6 +198,8 @@
 
 ![front-uml](https://user-images.githubusercontent.com/66371206/194737818-1ac02b91-7861-4983-8bc5-b00c2e55d7c8.jpeg)
 
+---
+
 ## 개발로그 ✏️
 
 <details>
@@ -128,11 +221,9 @@
 
 [![071yoon's GitHub stats](https://velog-readme-stats.vercel.app/api?name=071yoon&slug=React로-오디오-비주얼라이저-만들기)](https://velog.io/@071yoon/React%EB%A1%9C-%EC%98%A4%EB%94%94%EC%98%A4-%EB%B9%84%EC%A3%BC%EC%96%BC%EB%9D%BC%EC%9D%B4%EC%A0%80-%EB%A7%8C%EB%93%A4%EA%B8%B0)
 
-[![071yoon's GitHub stats](https://velog-readme-stats.vercel.app/api?name=071yoon&slug=Cypress로-e2e-테스트-진행하기)](
-https://velog.io/@071yoon/Cypress%EB%A1%9C-e2e-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%A7%84%ED%96%89%ED%95%98%EA%B8%B0)
+[![071yoon's GitHub stats](https://velog-readme-stats.vercel.app/api?name=071yoon&slug=Cypress로-e2e-테스트-진행하기)](https://velog.io/@071yoon/Cypress%EB%A1%9C-e2e-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%A7%84%ED%96%89%ED%95%98%EA%B8%B0)
 
-[![071yoon's GitHub stats](https://velog-readme-stats.vercel.app/api?name=071yoon&slug=APM-로그로-문제-해결하기)](
-https://velog.io/@071yoon/APM-%EB%A1%9C%EA%B7%B8%EB%A1%9C-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0)
+[![071yoon's GitHub stats](https://velog-readme-stats.vercel.app/api?name=071yoon&slug=APM-로그로-문제-해결하기)](https://velog.io/@071yoon/APM-%EB%A1%9C%EA%B7%B8%EB%A1%9C-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0)
 
 </details>
 

diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <!-- Global site tag (gtag.js) - Google Analytics -->

diff --git a/src/adapters/mediaStateChange.ts b/src/adapters/mediaStateChange.ts
@@ -24,14 +24,14 @@ const mediaStateChange = () => {
 
   const emitAudioStateChange = (room: string, enabled: boolean) => {
     newSocket?.emit(SOCKET_EVENT.AUDIO_STATE_CHANGE, { room, enabled });
-    toggleAudioStream(enabled);
   };
 
   useEffect(() => {
     newSocket?.on(SOCKET_EVENT.AUDIO_STATE_CHANGE, (data) => {
       const { uid, enabled } = data;
       const isMe = uid === userId;
       const audioStateUser = findUserByUid(uid);
+
       if (!audioStateUser && !isMe) {
         appendUser({
           nickname: '',
@@ -41,20 +41,22 @@ const mediaStateChange = () => {
           enabledVideo: true,
           enabledAudio: enabled,
           isAlreadyEntered: true,
-          volume: enabled ? 0.5 : 0,
+          volume: 0.5,
         });
       } else if (audioStateUser && !isMe) {
         setEnabledAudioByUid(uid, enabled);
+      } else if (isMe) {
+        toggleAudioStream(enabled);
       }
     });
 
     newSocket?.on(SOCKET_EVENT.KICK_USER, (data) => {
       const { kickUser } = data;
-      if (kickUser.uid === userId) {
+      if (kickUser?.uid === userId) {
         alert('방장에 의해 강퇴당하였습니다.');
         newSocket.close();
       } else {
-        const kickedUser = findUserByUid(kickUser.uid);
+        const kickedUser = findUserByUid(kickUser?.uid);
         console.log(kickedUser);
         if (kickedUser?.sid) {
           setPc({ sid: kickedUser?.sid, peerConnection: null });

diff --git a/src/adapters/roomSocket.ts b/src/adapters/roomSocket.ts
@@ -12,6 +12,10 @@ const generateSocket = () => {
     : null;
 };
 
+const deleteSocket = () => {
+  roomSocket.socket = null;
+};
+
 export default roomSocket;
 
-export { generateSocket };
+export { generateSocket, deleteSocket };
diff --git a/src/components/archive/LobbyCanvas.tsx b/src/components/archive/LobbyCanvas.tsx
@@ -47,7 +47,7 @@ export default function LobbyCanvas({
             autoFocus
             type="button"
           >
-            <MyAvatar avatar={user.avatar} size={5} />
+            <MyAvatar avatar={user?.avatar} size={5} />
           </Component>
         );
       })}

diff --git a/src/components/atoms/RoomDetail.tsx b/src/components/atoms/RoomDetail.tsx
@@ -5,7 +5,7 @@ import ThemeImage from './ThemeImages';
 export default function RoomDetail({ data }) {
   return (
     <Container data-cy="card-room-detail">
-      <ThemeImage theme={data.theme} />
+      <ThemeImage theme={data.theme} type="block" />
       <Attend>
         <div style={{ marginTop: '-0.3rem' }}>🔥</div>
         <div>{data.total}중</div>

diff --git a/src/components/atoms/ThemeImages.tsx b/src/components/atoms/ThemeImages.tsx
@@ -7,49 +7,69 @@ import Travel from '../../assets/theme/travel.png';
 import Camping from '../../assets/theme/camp.png';
 import { ReactComponent as Bar } from '../../assets/svg/Room/Bar.svg';
 
-export default function ThemeImage({ theme }) {
+export default function ThemeImage({ theme, type }) {
   if (theme === 'cosmos') {
     return (
       <Component>
         <Img src={Cosmos} alt="cosmos" />
-        <Name>우주</Name>
-        <Bar />
+        {type === 'block' && (
+          <>
+            <Name>우주</Name>
+            <Bar />
+          </>
+        )}
       </Component>
     );
   }
   if (theme === 'fire') {
     return (
       <Component>
         <Img src={Fire} alt="fire" />
-        <Name>모닥불</Name>
-        <Bar />
+        {type === 'block' && (
+          <>
+            <Name>모닥불</Name>
+            <Bar />
+          </>
+        )}
       </Component>
     );
   }
   if (theme === 'ocean') {
     return (
       <Component>
         <Img src={Ocean} alt="ocean" />
-        <Name>바다</Name>
-        <Bar />
+        {type === 'block' && (
+          <>
+            <Name>바다</Name>
+            <Bar />
+          </>
+        )}
       </Component>
     );
   }
   if (theme === 'travel') {
     return (
       <Component>
         <Img src={Travel} alt="travel" />
-        <Name>여행</Name>
-        <Bar />
+        {type === 'block' && (
+          <>
+            <Name>여행</Name>
+            <Bar />
+          </>
+        )}
       </Component>
     );
   }
   if (theme === 'camping') {
     return (
       <Component>
         <Img src={Camping} alt="camping" />
-        <Name>캠핑</Name>
-        <Bar />
+        {type === 'block' && (
+          <>
+            <Name>캠핑</Name>
+            <Bar />
+          </>
+        )}
       </Component>
     );
   }

diff --git a/src/components/main/MainTitle.tsx b/src/components/main/MainTitle.tsx
@@ -33,7 +33,7 @@ export default function TitleContainer() {
     // send my info
     lobbySocket.socket?.on('connect', () => {
       getMe().then((res) => {
-        lobbySocket.socket?.emit('joinLobby', { uid: res.data.uid });
+        lobbySocket.socket?.emit('joinLobby', { uid: res?.data?.uid });
       });
     });
 
@@ -51,7 +51,7 @@ export default function TitleContainer() {
           appendUser({
             nickname: res.data.nickname,
             uid,
-            avatar: res.data.avatar,
+            avatar: res.data?.avatar,
             sid,
           });
         } else {
@@ -64,13 +64,13 @@ export default function TitleContainer() {
     lobbySocket.socket?.on('existingUsers', ({ users, current }) => {
       console.log(current);
       users.map((user) => {
-        getUser(user.uid).then((res) => {
+        getUser(user?.uid).then((res) => {
           const existingUser = findUserByUid(user.uid);
           if (!existingUser) {
             appendUser({
               nickname: res.data.nickname,
               uid: user.uid,
-              avatar: res.data.avatar,
+              avatar: res.data?.avatar,
               sid: user.sid,
             });
           } else {
@@ -82,7 +82,7 @@ export default function TitleContainer() {
     });
 
     lobbySocket.socket?.on('LeftLobby', ({ sid }: { sid: string }) => {
-      if (lobbySocket.socket.id === sid) {
+      if (lobbySocket.socket?.id === sid) {
         return;
       }
       removeUser(sid);

diff --git a/src/components/main/block/Block.tsx b/src/components/main/block/Block.tsx
@@ -13,7 +13,7 @@ import useEnterProfile from '../useEnterProfile';
 export default function Block({ isMain, data }) {
   const navigate = useNavigate();
   const { nickname } = UserStore();
-  const { enterProfile } = useEnterProfile(data.moderator.uid);
+  const { enterProfile } = useEnterProfile(data?.moderator.uid);
 
   const enterRoom = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
@@ -35,7 +35,7 @@ export default function Block({ isMain, data }) {
   return (
     <Container main={isMain} data-cy="main-room-cards">
       <AvatarContainer data-cy="main-room-moderator" onClick={enterProfile}>
-        <MyAvatar num={Number(data.moderator.avatar)} />
+        <MyAvatar num={Number(data?.moderator.avatar)} />
         <Moderator>
           방장<Nickname>{data.moderator.nickname}</Nickname>
         </Moderator>

diff --git a/src/components/main/block/filterMyBlock.ts b/src/components/main/block/filterMyBlock.ts
@@ -4,7 +4,7 @@ import userStore from '../../../stores/userStore';
 export const filterMyBlock = (data) => {
   const { uid } = userStore();
   const newData = data?.filter(
-    (block: blockInterface) => block.moderator.uid === uid,
+    (block: blockInterface) => block.moderator?.uid === uid,
   );
 
   newData?.sort((a, b) => {

diff --git a/src/components/main/lobby/Participants.tsx b/src/components/main/lobby/Participants.tsx
@@ -5,7 +5,7 @@ export default function Participants({ connectedUsers }) {
   return (
     <Container>
       {connectedUsers.map((user) => {
-        return <SingleParticipant user={user} key={user.uid} />;
+        return <SingleParticipant user={user} key={user?.uid} />;
       })}
     </Container>
   );