5th Iteration Progress Report #56
Description
마지막 Iteration에서 한 일 ::
이번 Iteration에서는 서비스를 최종적으로 완성시켰다. 서비스가 안정적으로 실행되도록 할 뿐만 아니라 서비스가 완벽하게 실행되기 위해서 설계하고 계획한 기능들을 모두 구현하였다. 이번 Iteration에서 구체적으로 진행한 내용은 다음과 같다.
- Main Page Renewal
서비스의 메인 페이지를 새롭게 리뉴얼하였다. 더 깔끔하고 직관적인 디자인이 되도록 UX를 개선하였다. 사이드 바를 만들어 메인 페이지에서 로그인, 회원가입 페이지에 갈 수 있게 했을뿐만아니라 다양한 검색이 용이하도록 카테고리를 지정해주었다. 개선된 메인 페이지는 아래 사진과 같다. 메인 페이지에서 새로운 번개를 생성하고 내가 생성한 번개를 관리할 수 있으며, 최근에 생성된 번개들의 목록을 볼 수 있다.
또한, 로그인을 했을 경우 알림 아이콘과 개인 프로필 사진을 우측 상단에 제시하는 UX를 구현하였다. 자신과 관련된 모임에 변화사항이 있을 때 알림이 생성되며, 나의 프로필사진을 통해 로그인 된 상태를 직관적으로 알 수 있다.
- Login 개선
로그인 시 카카오 Api를 이용한 로그인이 가능하도록 구현하였다. 새로운 로그인 페이지는 아래 사진과 같다. 이를 통해 번거롭게 회원가입을 하지 않고도 서비스를 이용가능하도록 하였다.
권한 설정을 통해 카카오 로그인을 할 경우 카카오 서버로부터 유저의 정보를 받아온다. 이를 통해 유저가 따로 회원정보를 수정하지 않아도 프로필 사진, 개인정보 등을 자동으로 세팅한다.
- User Page 수정
자신의 프로필과 자신과 관련된 모임들을 종합적으로 관리할 수 있는 마이페이지가 개선되었다. 이 페이지에서 유저의 개인정보를 수정할 수 있고, 자신이 호스트인 모임, 자신이 게스트로 참여하는 모임 등을 종합적으로 관리할 수 있다.
프로필 사진을 업로드 할 수 있으며 닉네임과 자기소개 문구를 설정할 수 있다. 또한 자신이 게스트로 참여하는 모임과 자신이 호스트인 모임 등의 목록을 볼 수 있다. 자신의 프로필이 아닐 경우 프로필을 수정할 순 없지만 유저의 정보를 볼 수 있다.
- Meeting Page 수정
새로운 모임인 번개를 생성하고, 그 모임에 참여하는 페이지를 개선하였다. 모임을 나타내는 사진을 올릴 수 있을 뿐만아니라, 다음 지도 Api를 이용하여 모임의 장소를 설정할 수 있다. 모임 장소를 다음 지도를 이용함으로써 위치 기반 검색을 할 수도 있다. 아래 사진은 새로운 번개를 생성하는 페이지의 스크린샷이다. 유저가 쉽고 간편하게 새로운 번개를 생성할 수 있도록 서비스를 만들었다.
이미 만든 모임을 관리하거나, 모임에 참여할 수 있는 페이지또한 개선하였다. 새로운 모임을 개설할 때 입력했던 위치 정보, 사진, 세부사항등이 게시되고 여기에 댓글을 달거나 수정, 삭제할 수 있다. 뿐만 아니라 모임에 참여하는 사람의 리스트와 참가 신청을 하고 최종 승인이 되지 않은 사람의 리스트를 볼 수 있다. 호스트의 경우 이 리스트를 수정하여 모임을 관리할 수 있다. 번개 페이지는 아래와 같은 인터페이스를 가지고 있다.
- Search 개선
기존의 태그 기반 검색을 개선하였다. 유저가 원하는 모임을 더 효과적으로 찾을 수 있도록 검색옵션을 추가할 뿐만 아니라 검색 기능을 강화하였다.
검색은 기본적으로 모든 페이지에서 상단의 Searchbar를 통해 접근할 수 있다. 그리고 사이드바에서 다양한 카테고리로 검색할 수 있는 옵션을 제공한다.
검색을 하게 될 경우 검색어를 중심으로 관련 있는 모임의 리스트를 볼 수 있다. 모임의 리스트는 모임의 사진과 그 모임의 정보들이 담겨있다. 검색을 했을 경우의 결과는 아래 사진과 같다.
여기서 검색 옵션을 사용할 경우 태그 검색과 위치 기반 검색을 할 수 있다. 위치 기반 검색을 하게 될 경우 지도에 장소를 찍을 수 있고, 그 장소로부터 가까운 모임들의 리스트를 검색할 수 있다.
- 알림
나의 모임에 새로운 참가자가 생기거나, 내가 참가하고자 하는 모임에 참여 승인이 되거나, 새로운 댓글이 생겼을 경우 알림이 생성이 된다. 알림의 우측 상단의 알림 이모티콘을 클릭하여 볼 수 있다. 알림을 클릭해서 읽으면 그 알림과 관련된 페이지로 리다이렉션 되며, 그 경우 알림이 읽음으로 처리된다. 알림의 리스트는 읽지 않은 알림 순으로 볼 수 있다.
위의 사진과 같은 형태로 모든 페이지의 상단 바에서 알림을 볼 수 있다. 로그인 된 경우에만 알림 이모티콘이 나타나게 된다.
- Testing
프로젝트의 완성도를 높이기 위해 테스팅을 수정하였다. 테스팅 결과는 https://travis-ci.com/thunderlink/ThunderFish에서 확인이 가능하다. 테스팅은 unit test를 이용한 백엔드 테스트와 Jest를 이용한 프론트엔드 테스트로 나누어서 진행하였다.
백엔드 테스트의 경우 로그인과 각각의 Url을 Get 혹은 Post 한 결과를 테스트했다. 프론트엔드 테스트의 경우 컴포넌트를 렌더링 한 결과를 이용해 테스팅을 진행하였다. 테스트 코드는 https://github.com/thunderlink/ThunderFish/blob/master/.travis.yml 등 깃헙 코드에서 확인 가능하다. 테스팅 결과는 아래 사진처럼 Travis에서 실행된다.
