Add Photo Page Implementation

[choppaluv]

Backend modification for Photo page

• Model changed 기존에 계획하였던 Date 안에 Folder 안에 Photo들을 배치하는 방식 대신 date_folder(20180101_Paris)형태로 folder name을 지어 해당 folder에 Photo를 넣는 형태로 변경하였습니다. #37 참고. 이렇게 변경하여 Photo model은 Foreign Key로 Folder를 가지고 있도록 하였고 Folder의 경우 Foreign Key로 Trip을 Foreign Key로 가지고 있도록 하였습니다. 또한 Photo의 경우 특정 trip에 해당하는 Photo를 filter 하기 위해 Trip을 Foreign Key로 가지고 있도록 하였습니다. 또한 diary에 contents를 적을 수 있기 때문에 Photo model에서 content field는 제거하였습니다. 변경된 Model은 여기서 확인하실 수 있습니다. 또한 Photo는 url의 형태로 backend에 저장해두도록 하였으며 frontend에서는 이 url을 받아 사진을 보여주게 될 것입니다.

• View Changed Photo의 경우 add와 delete 만 가능하도록 하였습니다. 이에 따라 RetrieveUpdateDestroy view이었던 Photo detail view를 RetrieveDestroy view로 변경하였습니다. Folder model이 추가됨에 따라 이에 해당하는 view를 새로 만들었습니다. Foler List view, Folder Detail view, Folder of Trip view가 새로 추가되었습니다. 다른 Detail view와 달리 Folder Detail view는 Folder가 Folder name을 primary key로 가지고 있기 때문에 /api/folders/의 url로 접속이 가능합니다. 변경된 Restful API는 여기서 확인하실 수 있습니다.

• folder name을 입력하여 folder 를 새로 생성할 수 있는 folder list view는 다음과 같습니다.

• folder name과 해당 folder에 들어있는 photo들의 id가 들어있는 photo detail view는 다음과 같습니다.

• 특정 trip안에 있는 folder들의 list들을 보여주는 folder of trip view는 다음과 같습니다.

• url이 반영된 photo list view는 다음과 같습니다.

• 변경된 backend에 대한 testing 후의 결과는 다음과 같습니다. (8개의 test가 추가되었습니다)

[ghost]

Backend modification for Image Upload

• photo view에서 request.FILES['file']을 image에 직접 save 해주었습니다.

• backend testing도 이에 맞게 update하였습니다.

[ghost]

folder field : add folder case

• folder를 선택할 때 add new folder를 선택한 경우 새로 만든 folder가 자동으로 선택되도록 하였습니다.

create new folder

folder field decided as newly created folder

• 새로 만든 folder는 option에 바로 포함됩니다.

• add folder 성공 시 성공 메시지, 실패 시 실패 메시지를 띄우도록 하였습니다. 실패하면 field는 reset됩니다.

success

fail

[ghost]

photo field

• 여러 개 사진이 동시에 선택 가능합니다. 현재는 미리보기가 지원되지 않습니다.

select multiple photos

multiple photos added

• submit button을 누르면 한번에 post 됩니다.

• 성공시 모든 field가 reset 되며, 성공메시지가 뜹니다.

[choppaluv]

Add Folder implementation

• Add Photo page에서 해당 trip에 해당하는 folder들만 backend로부터 받아와 이를 sort하여 보여준 화면은 다음과 같습니다. 기존 folder들의 맨 아래에는 +Add Folder버튼이 있어 이를 누르면 folder를 추가할 수 있는 pop up이 뜨도록 구현하였습니다.
• Add Folder 버튼을 누를 시 나오는 pop up 화면은 다음과 같으며 create button을 누르면 backend로 POST가 되도록 구현하였습니다.

[ghost]

Photo preview problem solved

• antd upload component를 이용하여 fileList를 저장할 시 javascript file object가 아닌 uploadfile object로 저장되어 preview를 지원하도록 되어 있었습니다. 이 object는 axios로 formdata를 전송할 시 file로 인식이 되지 않아 전송이 되지 않는 문제가 있었습니다.
• antd uploadfile object를 사용하되, 그 내부의 file object를 추출하여 backend로 보내는 방식을 이용하여 preview도 가능하면서 post도 가능하게 수정하였습니다.

Preview

Multiple Post 201

[ghost]

Folder uniqueness check problem solved - backend

• folder name을 primary key로 지정하여 서로 다른 trip에서도 같은 folder name을 쓸 수 없는 문제가 있었습니다.
• folder model primary key를 자동 생성된 id로 수정하였습니다.
• uniqueness check는 이름과 tripID가 같을 경우로 하여 이미 존재할 경우 400을 보내도록 하였습니다.
• backend testing도 이에 맞게 수정하였으며, uniqueness test를 추가하였습니다.

[ghost]

Folder uniqueness check problem solved - frontend

• 서로 다른 trip에서 같은 이름의 folder가 생성되는 것을 확인할 수 있습니다.

"test" trip의 "20120202_test" folder

test2 trip에 "20120202_test" folder 생성

test2 trip에서는 201 created

• 하지만 같은 trip에서 같은 folder는 생성되지 않습니다.

test trip에서는 400 bad request

• add Photo도 folder ID를 이용하여 정상적으로 작동합니다.