Skip to content

Commit e1e0c80

Browse files
071yoon071yoon
authored
Merge pull request #269 from SWM-FIRE/dev
merge dev
2 parents 3245b2b + 6d9c78b commit e1e0c80

27 files changed

+229
-96
lines changed

‎README.md

+100-9
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,101 @@
1010
1111
## TEAM 🔥FIRE🔥 소개
1212

13-
|윤영기 : FE|고주형 : BE|이하령 : FE|
14-
|:--:|:--:|:---:|
15-
|<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"> |
16-
|[@071yoon](https://github.com/071yoon)|[@IamGroooooot](https://github.com/IamGroooooot)|[@halang](https://github.com/haryung-lee)|
17-
| [![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)|
13+
| 윤영기 : FE | 고주형 : BE | 이하령 : FE |
14+
| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
15+
| <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"> |
16+
| [@071yoon](https://github.com/071yoon) | [@IamGroooooot](https://github.com/IamGroooooot) | [@halang](https://github.com/haryung-lee) |
17+
| [![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) |
1818

1919
## 프로젝트 소개
2020

2121
**모도코**(모여서 도란도란 코딩) 프로젝트는 모각코를 하고 싶은 사람들이 모여 도란도란 코딩할 수 있게 해주는 플랫폼입니다. 개발자 친화적인 기능을 갖추고 모각코로 만들어진 인연이 이어질 수 있게 만들고자 합니다.
2222

23+
---
24+
25+
## 실행방법
26+
27+
### Project Setting
28+
29+
환경변수 세팅
30+
31+
```shell
32+
# ************************************************* #
33+
# This is an example env file for modoco frontend #
34+
# ************************************************* #
35+
36+
# backend server
37+
REACT_APP_BASE_URL=your_backend_server
38+
39+
# channel talk key
40+
REACT_APP_CHANNEL_IO_KEY=your_channel_talk_key
41+
42+
# oauth
43+
# oauth client id
44+
REACT_APP_GITHUB_CLIENT_ID=your_github_oauth_client_id
45+
REACT_APP_KAKAO_CLIENT_ID=your_kakao_oauth_client_id
46+
REACT_APP_GOOGLE_CLIENT_ID=your_google_oauth_client_id
47+
# oauth redirect uri
48+
REACT_APP_KAKAO_REDIRECT_URI=your_kakao_redirect_uri
49+
REACT_APP_GOOGLE_REDIRECT_URI=your_google_redirect_uri
50+
51+
# turn server
52+
REACT_APP_TURN_URL=your_turn_server_url
53+
REACT_APP_TURN_CREDENTIAL=your_turn_server_credential
54+
REACT_APP_TURN_USERNAME=your_turn_server_username
55+
56+
# lambda server
57+
REACT_APP_LAMBDA_INVITE=your_lambda_server_url
58+
```
59+
60+
### Installation
61+
62+
#### 1. Install npm dependency
63+
64+
```shell
65+
# install packages
66+
$ yarn install
67+
68+
# clean install packages
69+
$ yarn ci
70+
```
71+
72+
#### 2. Run React
73+
74+
```shell
75+
# run app
76+
yarn start
77+
78+
# run app in https
79+
# need SSL_CRT_FILE=cert.pem SSL_KEY_FILE=key.pem in root
80+
yarn start:https
81+
82+
# check style lint
83+
yarn lint:css
84+
```
85+
86+
### Build
87+
88+
```shell
89+
# build app
90+
yarn build
91+
```
92+
93+
### Testing
94+
95+
```shell
96+
# start test mode
97+
yarn test
98+
99+
# run app and open cypress
100+
yarn cypress
101+
102+
# open cypress without opening app
103+
npx cypress open
104+
```
105+
106+
---
107+
23108
## Stacks 🚀
24109

25110
### Environment
@@ -50,6 +135,8 @@
50135

51136
![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)
52137

138+
---
139+
53140
## 동작 화면 💻
54141

55142
### 화면 구성
@@ -66,6 +153,8 @@
66153
| :-----------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------: |
67154
| 바다 | 캠핑 | 모닥불 | 우주 | 여행 |
68155

156+
---
157+
69158
## 주요 기능 ✨
70159

71160
### ⭐️ 진행중인 모각코 방에 입장
@@ -93,6 +182,8 @@
93182
- 얼마나 했는지 궁금하시다면, 통계 페이지를 참고하세요
94183
- 오늘, 이번주, 한달 등 다양한 통계 자료를 보여드려요
95184

185+
---
186+
96187
## 아키텍쳐 ⚒
97188

98189
### Full Architecture
@@ -107,6 +198,8 @@
107198

108199
![front-uml](https://user-images.githubusercontent.com/66371206/194737818-1ac02b91-7861-4983-8bc5-b00c2e55d7c8.jpeg)
109200

201+
---
202+
110203
## 개발로그 ✏️
111204

112205
<details>
@@ -128,11 +221,9 @@
128221

129222
[![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)
130223

131-
[![071yoon's GitHub stats](https://velog-readme-stats.vercel.app/api?name=071yoon&slug=Cypress로-e2e-테스트-진행하기)](
132-
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)
224+
[![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)
133225

134-
[![071yoon's GitHub stats](https://velog-readme-stats.vercel.app/api?name=071yoon&slug=APM-로그로-문제-해결하기)](
135-
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)
226+
[![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)
136227

137228
</details>
138229

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="ko">
33
<head>
44
<meta charset="UTF-8" />
55
<!-- Global site tag (gtag.js) - Google Analytics -->

‎src/adapters/mediaStateChange.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,14 @@ const mediaStateChange = () => {
2424

2525
const emitAudioStateChange = (room: string, enabled: boolean) => {
2626
newSocket?.emit(SOCKET_EVENT.AUDIO_STATE_CHANGE, { room, enabled });
27-
toggleAudioStream(enabled);
2827
};
2928

3029
useEffect(() => {
3130
newSocket?.on(SOCKET_EVENT.AUDIO_STATE_CHANGE, (data) => {
3231
const { uid, enabled } = data;
3332
const isMe = uid === userId;
3433
const audioStateUser = findUserByUid(uid);
34+
3535
if (!audioStateUser && !isMe) {
3636
appendUser({
3737
nickname: '',
@@ -41,20 +41,22 @@ const mediaStateChange = () => {
4141
enabledVideo: true,
4242
enabledAudio: enabled,
4343
isAlreadyEntered: true,
44-
volume: enabled ? 0.5 : 0,
44+
volume: 0.5,
4545
});
4646
} else if (audioStateUser && !isMe) {
4747
setEnabledAudioByUid(uid, enabled);
48+
} else if (isMe) {
49+
toggleAudioStream(enabled);
4850
}
4951
});
5052

5153
newSocket?.on(SOCKET_EVENT.KICK_USER, (data) => {
5254
const { kickUser } = data;
53-
if (kickUser.uid === userId) {
55+
if (kickUser?.uid === userId) {
5456
alert('방장에 의해 강퇴당하였습니다.');
5557
newSocket.close();
5658
} else {
57-
const kickedUser = findUserByUid(kickUser.uid);
59+
const kickedUser = findUserByUid(kickUser?.uid);
5860
console.log(kickedUser);
5961
if (kickedUser?.sid) {
6062
setPc({ sid: kickedUser?.sid, peerConnection: null });

‎src/adapters/roomSocket.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ const generateSocket = () => {
1212
: null;
1313
};
1414

15+
const deleteSocket = () => {
16+
roomSocket.socket = null;
17+
};
18+
1519
export default roomSocket;
1620

17-
export { generateSocket };
21+
export { generateSocket, deleteSocket };

‎src/components/archive/LobbyCanvas.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default function LobbyCanvas({
4747
autoFocus
4848
type="button"
4949
>
50-
<MyAvatar avatar={user.avatar} size={5} />
50+
<MyAvatar avatar={user?.avatar} size={5} />
5151
</Component>
5252
);
5353
})}

‎src/components/atoms/RoomDetail.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import ThemeImage from './ThemeImages';
55
export default function RoomDetail({ data }) {
66
return (
77
<Container data-cy="card-room-detail">
8-
<ThemeImage theme={data.theme} />
8+
<ThemeImage theme={data.theme} type="block" />
99
<Attend>
1010
<div style={{ marginTop: '-0.3rem' }}>🔥</div>
1111
<div>{data.total}중</div>

‎src/components/atoms/ThemeImages.tsx

+31-11
Original file line numberDiff line numberDiff line change
@@ -7,49 +7,69 @@ import Travel from '../../assets/theme/travel.png';
77
import Camping from '../../assets/theme/camp.png';
88
import { ReactComponent as Bar } from '../../assets/svg/Room/Bar.svg';
99

10-
export default function ThemeImage({ theme }) {
10+
export default function ThemeImage({ theme, type }) {
1111
if (theme === 'cosmos') {
1212
return (
1313
<Component>
1414
<Img src={Cosmos} alt="cosmos" />
15-
<Name>우주</Name>
16-
<Bar />
15+
{type === 'block' && (
16+
<>
17+
<Name>우주</Name>
18+
<Bar />
19+
</>
20+
)}
1721
</Component>
1822
);
1923
}
2024
if (theme === 'fire') {
2125
return (
2226
<Component>
2327
<Img src={Fire} alt="fire" />
24-
<Name>모닥불</Name>
25-
<Bar />
28+
{type === 'block' && (
29+
<>
30+
<Name>모닥불</Name>
31+
<Bar />
32+
</>
33+
)}
2634
</Component>
2735
);
2836
}
2937
if (theme === 'ocean') {
3038
return (
3139
<Component>
3240
<Img src={Ocean} alt="ocean" />
33-
<Name>바다</Name>
34-
<Bar />
41+
{type === 'block' && (
42+
<>
43+
<Name>바다</Name>
44+
<Bar />
45+
</>
46+
)}
3547
</Component>
3648
);
3749
}
3850
if (theme === 'travel') {
3951
return (
4052
<Component>
4153
<Img src={Travel} alt="travel" />
42-
<Name>여행</Name>
43-
<Bar />
54+
{type === 'block' && (
55+
<>
56+
<Name>여행</Name>
57+
<Bar />
58+
</>
59+
)}
4460
</Component>
4561
);
4662
}
4763
if (theme === 'camping') {
4864
return (
4965
<Component>
5066
<Img src={Camping} alt="camping" />
51-
<Name>캠핑</Name>
52-
<Bar />
67+
{type === 'block' && (
68+
<>
69+
<Name>캠핑</Name>
70+
<Bar />
71+
</>
72+
)}
5373
</Component>
5474
);
5575
}

‎src/components/main/MainTitle.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default function TitleContainer() {
3333
// send my info
3434
lobbySocket.socket?.on('connect', () => {
3535
getMe().then((res) => {
36-
lobbySocket.socket?.emit('joinLobby', { uid: res.data.uid });
36+
lobbySocket.socket?.emit('joinLobby', { uid: res?.data?.uid });
3737
});
3838
});
3939

@@ -51,7 +51,7 @@ export default function TitleContainer() {
5151
appendUser({
5252
nickname: res.data.nickname,
5353
uid,
54-
avatar: res.data.avatar,
54+
avatar: res.data?.avatar,
5555
sid,
5656
});
5757
} else {
@@ -64,13 +64,13 @@ export default function TitleContainer() {
6464
lobbySocket.socket?.on('existingUsers', ({ users, current }) => {
6565
console.log(current);
6666
users.map((user) => {
67-
getUser(user.uid).then((res) => {
67+
getUser(user?.uid).then((res) => {
6868
const existingUser = findUserByUid(user.uid);
6969
if (!existingUser) {
7070
appendUser({
7171
nickname: res.data.nickname,
7272
uid: user.uid,
73-
avatar: res.data.avatar,
73+
avatar: res.data?.avatar,
7474
sid: user.sid,
7575
});
7676
} else {
@@ -82,7 +82,7 @@ export default function TitleContainer() {
8282
});
8383

8484
lobbySocket.socket?.on('LeftLobby', ({ sid }: { sid: string }) => {
85-
if (lobbySocket.socket.id === sid) {
85+
if (lobbySocket.socket?.id === sid) {
8686
return;
8787
}
8888
removeUser(sid);

‎src/components/main/block/Block.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import useEnterProfile from '../useEnterProfile';
1313
export default function Block({ isMain, data }) {
1414
const navigate = useNavigate();
1515
const { nickname } = UserStore();
16-
const { enterProfile } = useEnterProfile(data.moderator.uid);
16+
const { enterProfile } = useEnterProfile(data?.moderator.uid);
1717

1818
const enterRoom = (event: React.MouseEvent<HTMLButtonElement>) => {
1919
event.preventDefault();
@@ -35,7 +35,7 @@ export default function Block({ isMain, data }) {
3535
return (
3636
<Container main={isMain} data-cy="main-room-cards">
3737
<AvatarContainer data-cy="main-room-moderator" onClick={enterProfile}>
38-
<MyAvatar num={Number(data.moderator.avatar)} />
38+
<MyAvatar num={Number(data?.moderator.avatar)} />
3939
<Moderator>
4040
방장<Nickname>{data.moderator.nickname}</Nickname>
4141
</Moderator>

‎src/components/main/block/filterMyBlock.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import userStore from '../../../stores/userStore';
44
export const filterMyBlock = (data) => {
55
const { uid } = userStore();
66
const newData = data?.filter(
7-
(block: blockInterface) => block.moderator.uid === uid,
7+
(block: blockInterface) => block.moderator?.uid === uid,
88
);
99

1010
newData?.sort((a, b) => {

‎src/components/main/lobby/Participants.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default function Participants({ connectedUsers }) {
55
return (
66
<Container>
77
{connectedUsers.map((user) => {
8-
return <SingleParticipant user={user} key={user.uid} />;
8+
return <SingleParticipant user={user} key={user?.uid} />;
99
})}
1010
</Container>
1111
);

0 commit comments

Comments
 (0)