[TIL] 참여하기와 게시물

코딩을 하며 인상 깊었던 부분을 계속해서 적어갈 계획이다. 

 

우리 팀이 서비스한 웹사이트로 졸업생 동문 커뮤니티 사이트이다.

https://www.homecomingdaycare.com/

Homecoming Day

 

기획을 동문들을 만날 기회를 제공하는 것이 서비스의 목적이었기 때문에, 그에 걸맞은 서비스를 제공하고자 참여하기 기능을 추가했다.

 

코드를 보여주기 전에 현재 연관관계는 다음과 같다

따로 참여자라는 column을 만들기보다는 테이블을 생성해 Participant의 길이를 파악하여 사용할 계획이었다.

기존에 게시판 형태에서 조금 더 디테일하게 다루다보니 하면서도 재미가 있었다.

693번줄에서 연관관계를 통해 해당 게시물의 참여자 수,

아참 Article 테이블 안에 maxPeople이라는 Column을 주어서 참여할 수 있는 총 인원을 두었다.

다시 본론으로 돌아가서 693번 줄에서 article의 참여자를 리스트로 받고 있으니 크기를 재서 

article의 maxPeople과 값이 같지 않을 경우에만 참여할 수 있도록 했다.

또한 참여 취소의 기능을 위해 참여하기를 한 번 더 누르게 되면 해당 참여자의 값을 article의 삭제해줬다.

705번째 줄과 719번째 줄의 joinCheck를 통해 true면 참여 중, false면 불참인 것을 프론트에 알려주었다.

 

참여하기를 누르면 위와같이 웹에서 표시되도록 했다.

 

또한 다음과 같이 maxPeople과 article.getParticipants().size()의 크기가 같을 경우를 비교했을 때,

기존에 참여하지 않은 유저라면 참여마감이라고 보여주었고, 기존에 참여를 눌렀던 유저라면 참여취소를 가능하게 해줬다

 

참여하기 기능을 만들었을 때 고려했던 부분이 게시물을 수정할 때 모집인원을 변경할 수 있게 할 것인지,

참여자를 어떻게 보게 할 것인지였다. 처음 프론트분과 얘기를 나눴을 때는 게시글 자체에 바로 get해서 지금과 같이 모달창을 띄우는 것이 아닌,유저들을 쭉 보여주는 부분이었다. 이렇게 구현 시 참여하기에 대한 api는 한 개만 있으면 됐지만,뷰에서 보여지는 부분이 너무 지저분하며 확실하게 알 수 있도록 추가적으로 api를 짜서 구현을 하기로 했다.

그렇게 하여 다음과 같이 만들었다. 

 

참여하기 기능을 만들 때보다 훨씬 간단했다.

연관관계를 통해 데이터를 받아온 뒤에 Dto를 통해 값을 넘겨주었다.

 

참여하기를 만들고, 인원을 조회하는 부분까지 구현을 하는 것은 길게 안걸렸지만 어떤 방식으로 할 지에 대한 생각의 시간이 오래 걸렸던 것 같다. 코딩은 능력도 중요하지만 확실히 소통이 중요한 것 같다.