본문 바로가기
프로젝트/팀프로젝트 qp편

팀 프로젝트 소개

by Thumper 2024. 5. 15.
테스트테스트




이번 시간을 끝으로 인프런에서 만난 팀 프로젝트 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

image

API 명세서는 NOTION에서 볼 수 있다.



ERD

image

ERD 설계 및 객체 관계도는 포스팅 - JPA와 테이블 설계에 공유했었다.



User-Flow

user flow

프로젝트 활동 중에 흐름도를 같이 작업하지 않아서 자료가 없었었다.
블로그 포스팅을 위해서, 서비스 흐름도를 그림으로 그려보았다.



페이지 설명

회원가입

서비스를 이용하기 위해서, 먼저 회원가입이 필요하다.
웹 url에 들어왔을 때 비회원은 먼저 회원가입하도록 설정했다.

올바른 회원입력



로그인

로그인은 아래와 같이 아이디, 비밀번호를 올바르게 입력해야 한다.

로그인



메인 페이지

메인 페이지로 들어가면, 모집 중인 스터디방 리스트를 확인할 수 있다.
화면에 회원 프로필, 전체 메뉴, 명언 등등 단순한 디자인으로 구성하였다.

메인 페이지



방 생성

스터디 방을 개설할 수 있는데, 방제목, 인원 수, 방 태그, 썸네일 등등 설정할 수 있다.
방 태그, 방 썸네일은 주어진 테마 리스트에서 선택하도록 구성했다.

방 생성



스터디 방

스터디 방 디자인은 참여한 유저의 간단한 프로필과 스터디에 관련된 타이머, 채팅창으로 구성했다. 채팅창을 통해 소통할 수 있고, 스터디 타이머를 통해 코인을 획득할 수 있다.
(획득한 코인을 통해 트리 꾸미기 이벤트를 구성하려고 했는데 이 부분은 시간상 만들지 못했다.)

스터디 방 내부



스터디 타이머

방장이 타이머를 누르면 스터디가 시작되는데, '스터디 종료' 버튼을 눌러 스터디를 끝낼 수 있다.
스터디 누적시간에 따라 코인을 얻을 수 있다.

스터디 종료



화면 동작

회원가입

회원가입할 때 "중복된 아이디" 검증이 있다.
중복검사를 한 아이디, 비밀번호 등등 작성하여 가입을 해야 한다.

회고영상4

메인 페이지

로그인 된 회원은 아래와 같이 메인 페이지로 이동된다.
메인 페이지에는 모집 중인 스터디 방 리스트를 볼 수 있으며, 스터디 태그를 눌러 원하는 스터디 방을 찾을 수 있다.

회고영상2

스터디 방 생성

스터디 방 생성할 때, 다음과 같이 작성하여 개설할 수 있다.
스터디 방 썸네일로 여러 개의 썸네일 중 하나를 선택하고, 스터디 태그를 다중선택할 수 있도록 구현했다.

회고영상3

스터디 방 내부

스터디 방장이 스터디 타이머 권한을 가진다. 타이머 버튼을 눌러 스터디를 시작하고 종료시킬 수 있다. 스터디 참여자들과 채팅을 할 수 있는데, 채팅창 UI 구현을 완성하지 못하고 끝내서 아쉬운 부분이다.

회고영상5

회고

도곡


위에서 언급은 안했지만, 완성된 백엔드 코드는 브랜치 master-chat으로 마무리했었다.

되돌아 생각해보면, 테스트 코드와 서버 테스트를 충분히 하지 못한 점이 아쉽다.
주어진 시간을 잘 활용하지 못하고 구현만 하다가 끝난 점이 많이 아쉬움으로 남는다.


그래도 이렇게 개인 회고를 작성하면서, 다음 작업을 할 때는 좀 더 유연하게 해내지 않을까 생각한다.

댓글