Add Diary Page Implementation

[choppaluv]

Backend modification for Add Diary Page

• 특정 trip의 한 날짜에 해당하는 photo들만 가져오기 위한 view를 새로 작성하였습니다.
• /api/photos/trip/tripId/date_of_photo/에 해당하는 backend url로 부터 받아온 photo들의 list들을 frontend에서 보여줄 수 있도록 하였습니다. 변경사항이 반영된 Restful API는 여기서 확인하실 수 있습니다.
• 아래 사진에서 확인할 수 있듯이 folder의 이름은 다르지만 date가 같은 경우 해당 사진들을 모두 가져올 수 있도록 합니다.

[choppaluv]

Select Date & Show Photos of Date

• Add diary page에서 user가 날짜를 선택하면 해당 날짜에 해당하는 사진들만 가져와서 보여주도록 하였습니다. (현재 바로 사진이 load되지는 않으며 새로고침시 선택한 날짜에 해당한 사진들을 확인할 수 있습니다.)
• user는 Diary에 작성할 contents를 입력할 수 있으며 해당 글을 쓰는 input부분은 글의 길이가 길어짐에 따라 size가 자동으로 커지게 되어 user가 input을 입력할 때 scroll을 움직일 필요가 없도록 하였습니다.
• 날짜를 선택했을때 나오는 사진들 중에서 diary에 추가하고 싶은 사진을 선택하면 다음과 같이 해당 사진에 체크 표시가 되어 user가 확인할 수 있도록 구현하였습니다.

[ghost]

Post Diary with or without photos

• react-photo-gallery component의 state를 adddiary component로 lift up 한 뒤 select 여부를 saga로 넘겨주어 선택된 photo id list를 얻을 수 있도록 구현하였습니다.

without photos

with photos

선택한 photo의 id가 manytomany field로 잘 들어와있음을 확인할 수 있습니다.

[ghost]

add diary success message

• post가 성공할 경우 field가 모두 reset 되며 성공 메시지가 뜹니다.

• post가 실패할 경우 실패 메시지가 뜨도록 구현은 해놓았습니다. 어떤 상황에서 실패할지 생각해봐야할 것 같습니다.