본문 바로가기

Javascript/React.js

공적마스크 재고현황 조회 웹 어플리케이션

공공API에 올라와있는 공적마스크 재고조회 API를 이용해서 재고현황 조회할 수 있는 웹앱입니다.

https://code0xff.github.io/mask-tracker/

 

Public Mask Tracker

 

code0xff.github.io

접속하게되면 내 위치에서 500m내에 있는 구매처의 재고 현황을 조회해주고, 검색범위를 선택하여 탐색할 수 있습니다. 결과는 카드형태로 보여지며, 약국명, 약국주소를 보여주고, 배지로 몇 km이내에 있는 약국인지, 현재 몇 개가량이 남아있는지 보여줍니다. 처음 접속시 위치정보 공유에 대한 권한제공에 대해 동의해주셔야 사용이 가능합니다.

 

추가 정보를 확인하기 위하여 지도에서 보기를 선택하면 카카오맵으로 위치를 확인시켜주며, 정보검색을 선택하면 카카오맵에서 해당 약국의 정보를 검색하여 보여줍니다. API가 완전 실시간으로 연동되지 않고, 재고도 약국에서 직접 입력하는 것이기 때문에 혹시 재고가 남아있는지 정보검색을 통하여 전화로 연락후 방문하신는 것이 좋을 것 같습니다.

 

조회 결과를 확인했을때 충분한 양을 보유하고 있는 구매처 정보는 초록색으로, 적당히 남아있는 곳은 노란색, 적은 양이 남아있는 곳은 빨간색으로 나옵니다. 진한 회색은 거의 남아있지 않은 곳이며, 옅은 회색으로 표시된 곳은 판매를 중지했거나 판매정보가 없는 곳입니다.

 

해당 앱은 React.js와 Bootstrap으로 작성되었으며, 공공데이터 포털에서 제공해주는 API를 이용하여 개발되었습니다.

https://www.data.go.kr/dataset/15043025/openapi.do

 

공공데이터포털

국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Dataset)와 Open API로 제공하는 사이트입니다.

www.data.go.kr

 

아래는 깃에 공개한 코드입니다. 보시고 코드에 개선할 부분이 보이시면 말씀해주세요. 감사하게 반영하도록 하겠습니다.

 

https://github.com/code0xff/mask-tracker

 

code0xff/mask-tracker

Public Mask Tracker. Contribute to code0xff/mask-tracker development by creating an account on GitHub.

github.com

 

'Javascript > React.js' 카테고리의 다른 글

React App과 Express 연동  (1) 2018.05.19