5주차 배포 #145
Merged
5주차 배포 #145
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
로그인된 유저의 세션정보를 사용하여 새로운 서버만을 받아서 참여하도록 구현했습니다.
- api의 리턴타입을 통일하기 위해 ResponseEntity를 추가하였습니다. - 서버목록 호출 api의 리턴타입을 변경하고 세션의 유저정보로 서버목록을 호출하도록 변경했습니다.
- 서버를 생성하기 위한 모달을 추가했습니다. - 서버 추가, 참여 모달을 띄우기 위한 드롭다운을 추가했습니다.
서버 참여를 위한 모달을 추가했습니다.
create() 함수의 매개변수 변경에 따라 테스트코드를 수정하였습니다.
선택한 서버 정보 객체를 상태관리하도록 수정했습니다.
- 서버 목록을 가져오지 못했을 경우에 serverList를 undefined로 set하는 에러를 제거했습니다. - 선택된 서버가 바뀌면 url의 serverId가 변하도록 변경했습니다.
API 에서 결과를 반환할 때 사용될 수 있는 ResponseEntity 클래스를 작성하고 이를 적용하였습니다.
- channel.controller 는 session 값을 사용하는 API가 있으므로 LoginGuard를 추가하였습니다. - channel의 전체 목록을 가져오는 GET API 의 요청 주소를 변경하였습니다.
- channel.controller 와 channel.service에서 userchannel 관련 코드를 userchannel.service에 분리하였습니다. - channel.controller에 userchannel.service의 addNewChannel 메서드를 추가하였습니다.
현재 사용자가 참가한 channel들만 가져오는 getJoinedChannelList 메서드를 '/api/user/channels/joined/:id'에 설정하였습니다.
- 서버목록을 추가할 때 기존 server객체를 따로 생성하여서 넣던 방식에서 조회한 server를 삽입하도록 변경했습니다. - created 상태의 responseEntity생성 함수를 추가했습니다.
- serverId를 입력하여 새 server에 참여하는 api를 연결하였습니다. - 이미 참여한 서버일 경우 error를 던지도록 처리했습니다. - 서버 참여 후 서버 목록을 다시 렌더링할 수 있도록 serverList state를 context로 옮겼습니다. - 서버 참여 후 서버 목록을 새로 호출합니다.
에러 상황에 맞는 에러메시지를 반환하고 client에 표시되도록 구현했습니다.
- server service의 사용이 추가되어 의존성을 추가하였습니다. - getServerListByUserId()의 테스트코드를 추가하였습니다. - create()의 상황별 에러처리에 맞는 테스트 코드를 추가하였습니다.
ServerRequestDto를 전달받아 Server 레코드를 생성하도록 기능을 구현하였습니다.
Server 생성 api를 frontend와 연결하였습니다.
- Server 생성 시 내 Server목록에 해당 서버를 추가하도록 기능을 추가하였습니다. - Module, Service간 순환참조 문제를 해결하였습니다.
- JoinChannelModal에서는 이제 로그인한 사용자가 참가하지 않은 Channel들의 목록을 보여줍니다. - JoinChannelModal에 css 를 적용하였습니다. 리스트의 item에 마우스를 올리면 '참여' 버튼을 보여줍니다.
서버아이콘 업로드를 위한 aws-sdk, @types/multer 라이브러리를 추가하였습니다.
object storage image업로드를 위한 image 모듈을 추가하였습니다.
- 서버 목록에 서버 이미지 아이콘이 보이게 처리했습니다. - 이미지가 없다면 서버 이름의 첫글자를 아이콘으로 만들도록 처리했습니다. - Server 테이블에 이미지 url 칼럼을 추가하였습니다. - Server에 이미지를 추가할 수 있는 input을 추가하였습니다.
JoinChannelModal 에서 참여하지 않은 채널 목록을 출력하는 로직에 오류가 있어 이를 수정하였습니다.
세션을 이용할 수 있는 MessageGateway 입니다.
messageId를 통해 하나의 메시지에 대한 값만 가져오는 API를 작성하였습니다.
선택한 Message에 대해 MessageSection 우측에 정보를 출력하는 ThreadSection을 작성하였습니다.
cam에 한번에 입장할 수 있는 최대 인원을 5명으로 설정하였습니다.
더 직관적인 디렉토리 구조를 위해 Cam/Menu 디렉토리를 생성하여 ButtonBar, ChattingTab, UserListTab 관련 모듈을 이동하였습니다.
- findByCode() 함수 테스트코드를 추가하였습니다. - findCode() 함수 테스트코드를 추가하였습니다. - updateServer() 함수 테스트코드를 추가하였습니다. - refreshCode() 함수 테스트코드를 추가하였습니다.
각 status에 따라서 서로 다른 page를 출력하는 기능을 구현하고, 관련 static file들을 추가하였습니다.
기존에 a 태그가 하위에 위치해서 정확히 클릭해야만 링크로 이동할 수 있어서, a태그를 더 위로 올려서 ux의 향상을 시도했습니다.
- ThreadSection의 textarea를 통해 Comment를 보낼 수 있고, 해당 Message의 Comment들을 볼 수 있습니다. - Socket 통신을 위하여 MessageSection에서 messageList 상태를 MainSection으로 끌어올렸습니다.
userId를 이용하여 조인한 모든 채널에 대해서 가져오는 함수입니다.
서버와 클라이언트의 통신을 확인하였습니다. joinChannels는 접속한 모든 채널을 Room으로 조인합니다.
Socket에 Session 연결 및 간단한 이벤트들 추가
cam에서는 현재 url 자체가 초대 코드이므로 클립보드에 복사하는 버튼을 추가하였습니다.
서버 참가 url 항목을 삭제하였습니다.
이제 Message를 전송할 때 fetch API를 직접 호출하는 것이 아닌, socket 이벤트를 전송 후 backend에서 직접 db 에 저장한 뒤, 결과를 다시 보내주는 방식으로 개선하였습니다.
cam 오류 핸들링 페이지 추가, url 복사 기능 구현, cam 최대 입장 인원 구현
…ate-code Server 참가 코드 적용
ThreadSection 구현 & Message 전송에 Socket 통신 연결
초기에 channel이 선택되지 않아도 getMessageList 메소드가 실행되어서 오류가 출력되는 문제를 수정하였습니다.
로그인에 실패했을 경우 index page로 이동하도록 로직을 수정하였습니다.
joinChannel 이벤트를 발생시켜 서버측 소켓이 room에 참여하도록 합니다.
일관되도록 서버/채널/캠 생성,참가로 수정하였습니다.
배포전 몇몇 버그 수정
lacomaco
reviewed
Nov 25, 2021
Comment on lines
+5
to
+22
| const Title = styled.div` | ||
| background-color: rgba(0, 0, 0, 0.7); | ||
| width: 100%; | ||
| height: 20%; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| color: white; | ||
| font-size: 44px; | ||
| `; | ||
|
|
||
| function CamLoadingPage(): JSX.Element { | ||
| return ( | ||
| <CamDefaultPage backgroundSrc="/pepes/pepe-4.jpg"> | ||
| <Title>Loading...</Title> | ||
| </CamDefaultPage> | ||
| ); | ||
| } |
There was a problem hiding this comment.
CamErrorPage, CamLoadingPage 모두 backgroundSrc와 Title만 다를뿐 동일한 컴포넌트처럼 보이네요. 여기도 하나의 컴포넌트에서 제어할 수 있도록 해봅시다.
Comment on lines
+5
to
+22
| const Title = styled.div` | ||
| background-color: rgba(0, 0, 0, 0.7); | ||
| width: 100%; | ||
| height: 20%; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| color: white; | ||
| font-size: 44px; | ||
| `; | ||
|
|
||
| function CamNotAvailablePage(): JSX.Element { | ||
| return ( | ||
| <CamDefaultPage backgroundSrc="/pepes/pepe-5.jpg"> | ||
| <Title>참여 인원을 초과하였습니다.</Title> | ||
| </CamDefaultPage> | ||
| ); | ||
| } |
Comment on lines
+5
to
+22
| const Title = styled.div` | ||
| background-color: rgba(0, 0, 0, 0.7); | ||
| width: 100%; | ||
| height: 20%; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| color: white; | ||
| font-size: 44px; | ||
| `; | ||
|
|
||
| function CamNotFoundPage(): JSX.Element { | ||
| return ( | ||
| <CamDefaultPage backgroundSrc="/pepes/pepe-2.jpg"> | ||
| <Title>존재하지 않는 방입니다.</Title> | ||
| </CamDefaultPage> | ||
| ); | ||
| } |
Comment on lines
+66
to
+71
| loginStatusRef.current += '.'; | ||
| if (loginStatusRef.current.length > 8) { | ||
| loginStatusRef.current = loginStatusRef.current.substring(0, 5); | ||
| } | ||
| setLoginStatus(loginStatusRef.current); | ||
| }; |
There was a problem hiding this comment.
요기는 왜 loginStatusRef에 따로 데이터 저장하고 다시 state에 값을 올리는거에요?
Comment on lines
+74
to
+78
| const intervalId = setInterval(changeLoginStatusMessage, 200); | ||
|
|
||
| return () => { | ||
| clearInterval(intervalId); | ||
| }; |
| const camURL = `/cam?roomid=${url}`; | ||
|
|
||
| return ( | ||
| <Container href={camURL}> |
There was a problem hiding this comment.
Link 안쓰고 anchor로 이동하면 히스토리 날라가지 않나요? (리액트 써본지 오래되서 가물거리네요 ) 의도하신건가요?
Comment on lines
+183
to
+195
| await fetch('/api/user/servers', { | ||
| method: 'POST', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| body: JSON.stringify({ | ||
| channelId: id, | ||
| serverId: selectedServer, | ||
| }), | ||
| }); | ||
| getServerChannelList(); | ||
| socket.emit('joinChannel', { channelId: parseInt(id, 10) }); | ||
| setIsModalOpen(false); |
There was a problem hiding this comment.
fetch 성공 유무와 관련없이 getServerChannelList, socket.emit 날리는거라면 await 안넣어도 될것 같네요.
만약 성공 이후에 실행되어야 하는 로직이라면 try catch 묶어서 에러처리 해주세요~
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.