# 14 지도, 풍선, 반응, 음악

그동안 글 쓰기가 귀찮고 어려워져 일기에 소홀해지고 있다.

그래도 어디까지 업데이트 되었는지 적고자 한다.

 

## 맵 화면과 풍선

/map 으로 이어지는 맵 화면은 오른쪽과 같이 변했다.

원래는 어떤 컨테이너 안에서 보여주는 형태였는데 굳이 테두리를 보여줄 필요가 없으니 이렇게 변한 것이다.

그리고 #12 게시글에서 말했듯 구글 맵은 진작에 Leaflet으로 바꿨다. 잘 작동한다.

 

풍선의 색은 아직까지는 풍선 id % 3 해서 구하는 방식이다. (추후 바꿀지도 모름)

풍선의 아이콘도 좀 손을 봤다. 광원?을 추가했다 더 생동감이 있어 보인다:)

 

풍선들은 최대 만개가 맵 위를 떠다니는데 이는 canvas에 그리는게 아닌 만개의 svg element 가 html에 있는 것이라서 버벅임이 심했다.

때문에 현재 화면에 보이는 풍선들만 랜더링 한다.

 

또, 원 범위 밖에 있는 풍선들은 회색으로 보여지게 했고 눌리지도 않게 만들었다.

범위는 반경 300KM이다. 화면에선 원으로 보이지만 지도는 왜곡이 있기 때문에 완벽하진 않다.

 

백엔드 API에서 설명하자면 /balloon/list?page= 를 통해 풍선들을 받아온다. 모든 풍선을 보여줄 수는 없어서 페이징 기능을 넣어두었다.

이때 응답하는 풍선들은 조건이 있는데 자신이 만든 풍선과 이미 주운 풍선은 응답하지 않는다.

=> 자신이 만든 풍선을 확인 할 수 없다니 이게 무슨 말이오? 확인은 하는데, 주울 수 없다 정도로 해야겠다.

 

## 풍선 줍기 및 정보

범위 안에 있는 풍선들은 주울 수 있는데 주우면 아래와 같은 모달이 효과와 함께 등장한다.

모달에서 보여주는 것은 음악의 이름, 메시지, 엘범 커버, 스트리밍 음악 사이트, 만든사람이다.

 

유튜브 / 유튜브 뮤직만 보이지만 최대 스포티파이 링크도 볼 수 있다.

풍선 음악 정보에 유튜브나 스포티파이 링크 중에 하나가 없는 경우엔 안보여주기 때문이다.

 

또 반응을 할 수 있는데 반응은 6개 중에 하나를 고를 수 있다. (취소도 가능하다.)

사실 원래 반응에 대한 부분은 메시지로 회신하게 하려고 했는데 사용자 입장에서 귀찮기 때문에 바로 이모지로 변경했다.

=> 조금 이상한 부분은 다른 사람들에 대한 반응을 볼 수 없다는 점이다. 이는 언젠가 어떤 방식이든 해결해야 한다.

 

백엔드에서는 이 부분을 POST /balloon/pick 으로 구현했고 이미 줍지 않았을 때만 가능하다.

주우면 Balloon과 User의 “줍기” relation에 대한 table에 대응하는 BalloonPick 엔티티가 생성된다.

 

풍선에 대한 정보를 조회하는 api는 GET /balloon/{balloonId}으로 만들었으며 

풍선조회는 줍지 않았어도 굳이 막을 필요는 없어 아무때나 가능하게 했다.

 

반응에 대한 api는 PUT /balloon/{balloonId}/reaction, DELETE /balloon/{balloonId}/reaction로 구성했다.

PUT으로 한 이유는 반응 자체를 덮어쓰는 성질 때문이다. 다만, PUT의 스펙인 추가되었을 시 201(Created)를 응답하는 건 구현하지 않았다. 200(OK)만 응답한다.

=> 사실 MDN에서 PUT의 reponse status를 201, 204로 하라는 것처럼 적혀있다. 201는 별로 이득이 없는 것 같고, 204는 괜찮은 것 같다.

이것도 Balloon과 User의 “반응하기” relation에 대한 table에 대응하는 BalloonReaction 엔티티가 생성되거나 삭제된다.

 

## 풍선 추가

풍선추가는 맵 오른쪽 아래 + 버튼을 누르면 추가할 수 있다.

그 버튼을 누르면 아래와 같은 모달 창이 등장하고 설명과 함께 입력창이 제공된다.

 

하나의 폼에 모든 입력을 받지 않으며 두 폼으로 나누어서 1. 음악 정보 -> 2. 메시지로 나누었다.

이는 아카라이브의 로그인 화면을 참고한 것이다. (< back 버튼도 영감을 얻었다.)

 

=> 다만 현재는 음악 url을 검증할 방법이 없어 백엔드에서 api를 만드는 중이다.

=> back으로 돌아갈때 url이 남아있지 않는 것도 문제..

백엔드에서 풍선 추가는 POST /balloon 으로 구현했다.