[Seolle in] Map Admin Web

안녕하세요! 탱탱규탱입니다!

 

이전 글에서 지도 서비스를 소개했잖아요?

 

그 지도에 그냥 마커가 찍히는 것이 아닙니다!

데이터가 있어야지 가능하겠죠??

 

데이터를 관리하는 웹 페이지 소개입니다!

 

[Front-End Stack]

- Vanilla JS

 

[사유]

Vanilla JS를 고른 이유?

- 편해서 :)

 

[소요 시간]

1~2일!

 

[Main Page]

데이터 등록만을 위한 공간이기에 디자인은 스킵! :)

 

[Data]

웹에서 발생되는 소중한 데이터입니다.

분석을 통해 사용자분들의 관심과 불편함을 알 수 있기 때문에

이 데이터는 앞으로 서비스 방향에 막대한 영향을 줍니다.

 

[Detail Page]

등록된 공간의 정보 모달 (삭제, 수정)

 

[Register Page]

공간 등록 모달

이미지 업로드! 이게 하루를 잡아먹었습니다 ㅠㅠ

API로 용량이 큰 이미지를 올리는 것은 절대 절대 절대 안됩니다.

해결책으로 AWS s3의 "미리 서명된 URL을 사용하여 객체 업로드" 방식으로 진행했습니다.

제가 적용한 방식을 간단하게 설명하면

관리자 웹 Request[api] (with. data + [이미지 이름 목록]) -> 서버 Response (signed_url)

진행 이후

관리자 웹 Request[signed_url] (with. image) -> AWS s3 저장!

 

 

[Edit Page]

공간 수정 모달

이미지 수정시!

이전 이미지 삭제! (AWS S3 delete)

새롭게 이미지 저장!

 

 

매번 느끼는 거지만

관리를 위한 API가 정말 많습니다...

 

간단하지만 이와 같은 데이터 입력으로

Seolle in Map이 아름다운 공간으로 가득찰 수 있게 됩니다!

 

 

Seolle in Map 지금 당장 들어가셔서 저의 작품을 직접 확인해보세요! :)

 

Seolle in.

 

자세한 코드 내용은 댓글로 남기시면 친절하게 답변해드리겠습니다!