이번 시간을 끝으로 인프런에서 만난 팀 프로젝트 qp편 포스팅을 마무리하려고 한다.
어떤 프로젝트를 했는지 이야기해보자!
팀 프로젝트가 처음인 만큼 문제 해결 과정과 개인적인 회고를 블로그에 남기고 싶었다.
팀 활동하면서 느낀 점을 담은 이야기는 여기에 공유했다.
팀플을 하면서 어떤 점이 힘들었고, 다음에는 이렇게 해야겠다는 다짐도 적어두었다.
프로젝트 소개 : qp(스터디 커뮤니티 웹서비스)
함께 공부할 스터디 팀원을 모집하는 웹 서비스.
태그로 원하는 스터디 방을 찾을 수 있고, 채팅을 통해 소통할 수 있는 웹 서비스 프로젝트다.
Github
팀 [qp] Github Link개발 기간
시작 | 2024년 1월 8일
종료 | 2024년 2월 28일 (약 2개월)
팀원 소개
Backend
김규리 | 테이블 설계 참여 (ERD 설계, API 문서 작성), 태그로 강의 검색 구현, 채팅 구현, JWT를 이용하여 로그인 구현
이준호 | 네이버 클라우드를 통해 서버 구성, MySQL 구현, putty를 통한 SpringBoot와 MySql, 프론트엔드 연동
최호희 | 스터디 방 생성, 스터디 명언 조회
frontend
이예림 | 방 만들기, 디자인
조종빈 | 로그인, 회원 가입, 메인 페이지, 방 내부 페이지
서버 구조
네이버 클라우드에서 제공하는 MySQL Server를 SpringBoot 프로젝트에 연결하여 서버를 구축했다.
API GUIDE
API 명세서는 NOTION에서 볼 수 있다.
ERD
ERD 설계 및 객체 관계도는 포스팅 - JPA와 테이블 설계에 공유했었다.
User-Flow
프로젝트 활동 중에 흐름도를 같이 작업하지 않아서 자료가 없었었다.
블로그 포스팅을 위해서, 서비스 흐름도를 그림으로 그려보았다.
페이지 설명
회원가입
서비스를 이용하기 위해서, 먼저 회원가입이 필요하다.
웹 url에 들어왔을 때 비회원은 먼저 회원가입하도록 설정했다.
로그인
로그인은 아래와 같이 아이디, 비밀번호를 올바르게 입력해야 한다.
메인 페이지
메인 페이지로 들어가면, 모집 중인 스터디방 리스트를 확인할 수 있다.
화면에 회원 프로필, 전체 메뉴, 명언 등등 단순한 디자인으로 구성하였다.
방 생성
스터디 방을 개설할 수 있는데, 방제목, 인원 수, 방 태그, 썸네일 등등 설정할 수 있다.
방 태그, 방 썸네일은 주어진 테마 리스트에서 선택하도록 구성했다.
스터디 방
스터디 방 디자인은 참여한 유저의 간단한 프로필과 스터디에 관련된 타이머, 채팅창으로 구성했다. 채팅창을 통해 소통할 수 있고, 스터디 타이머를 통해 코인을 획득할 수 있다.
(획득한 코인을 통해 트리 꾸미기 이벤트를 구성하려고 했는데 이 부분은 시간상 만들지 못했다.)
스터디 타이머
방장이 타이머를 누르면 스터디가 시작되는데, '스터디 종료' 버튼을 눌러 스터디를 끝낼 수 있다.
스터디 누적시간에 따라 코인을 얻을 수 있다.
화면 동작
회원가입
회원가입할 때 "중복된 아이디" 검증이 있다.
중복검사를 한 아이디, 비밀번호 등등 작성하여 가입을 해야 한다.
메인 페이지
로그인 된 회원은 아래와 같이 메인 페이지로 이동된다.
메인 페이지에는 모집 중인 스터디 방 리스트를 볼 수 있으며, 스터디 태그를 눌러 원하는 스터디 방을 찾을 수 있다.
스터디 방 생성
스터디 방 생성할 때, 다음과 같이 작성하여 개설할 수 있다.
스터디 방 썸네일로 여러 개의 썸네일 중 하나를 선택하고, 스터디 태그를 다중선택할 수 있도록 구현했다.
스터디 방 내부
스터디 방장이 스터디 타이머 권한을 가진다. 타이머 버튼을 눌러 스터디를 시작하고 종료시킬 수 있다. 스터디 참여자들과 채팅을 할 수 있는데, 채팅창 UI 구현을 완성하지 못하고 끝내서 아쉬운 부분이다.
회고
위에서 언급은 안했지만, 완성된 백엔드 코드는 브랜치 master-chat으로 마무리했었다.
되돌아 생각해보면, 테스트 코드와 서버 테스트를 충분히 하지 못한 점이 아쉽다.
주어진 시간을 잘 활용하지 못하고 구현만 하다가 끝난 점이 많이 아쉬움으로 남는다.
그래도 이렇게 개인 회고를 작성하면서, 다음 작업을 할 때는 좀 더 유연하게 해내지 않을까 생각한다.
'프로젝트 > 팀프로젝트 qp편' 카테고리의 다른 글
| JPA와 테이블 설계 (0) | 2024.03.22 |
|---|---|
| SpringBoot 3.x 버전 QueryDSL 설정 (0) | 2024.03.21 |
| JPA N+1 발생 케이스과 MultipleBagFetchException 해결책 (0) | 2024.03.20 |
| 관계형 데이터베이스에서의 컬렉션 처리 : Room 엔티티의 구조 개선 (0) | 2024.03.18 |
| Stomp를 활용한 실시간 채팅 프로그램 구현 (0) | 2024.03.15 |
댓글