2022 KU 스마트 캠퍼스 데이터톤 5조 안암어스 프론트엔드 저장소
안암 지역 배리어프리 수준 시각화 및 경로 추천 사이트의 웹 개발
- 경사로, 도로포장도, 계단 여부 등 사회적 약자 이동권과 관련된 요소를 고려하여 안암동 내 다양한 경로에 따른 배리어프리 수준을 확인할 수 있는 배리어프리 지도를 제공
- 나아가 이러한 배리어프리 수준을 고려하여 최적 경로를 추천하는 배리어프리 경로 찾기 기능을 제공
- 마지막으로 웹사이트 사용자들의 건의사항을 수렴할 수 있는 게시판도 제공
배포된 서비스는 링크로 접속 가능하다.
git, docker, docker compose가 설치된 Linux 환경을 전제한다.
# GitHub에서 리엑트 프로젝트 파일 내려받기
git clone https://github.com/jseop-lim/anam-earth-fe.git
cd anam-earth-fe
# Docker 컨테이너 빌드 및 실행
docker compose -f docker-compose.dev.yml up -d
# 리액트 컨테이너에서 bash shell 실행
docker exec -it anam-earth-fe-dev bash
# 리액트 컨테이너 로그 확인
docker logs -f anam-earth-fe-dev
- 위 화면이 개발한 웹사이트의 홈 화면이다. 여기서 버튼을 각각 누르면 대응하는 페이지로 이동할 수 있다.
- 홈 화면에서 배리어프리 지도 버튼을 클릭하면 위 지도를 볼 수 있다. 지도에서는 사전에 3가지 level(상, 중, 하)로 분류한 안암동 내 여러 경로에 대한 배리어프리 수준을 확인할 수 있다.
- Green: '상' Yellow: '중' Red: '하'
- 홈 화면에서 배리어프리 경로 찾기 버튼을 클릭하면 위 화면을 볼 수 있다. 출발지, 도착지 버튼을 눌러서 지도상에서 가고자하는 지점을 직접 클릭하여 지정할 수 있고, 초기화 버튼을 통해 재지정이 가능하다.
- 출발지와 도착지를 클릭하면 위 화면처럼 Marker가 각각 생기는 것을 확인할 수 있고, 최적경로 찾기 버튼을 누르면 배리어프리 수준을 고려한 최단경로가 계산된다.
- 계산된 최적경로는 다음과 같이 제공된다.
- 홈 화면에서 게시판 버튼을 클릭하면 다음과 같은 페이지로 이동하고, 게시판에 올라온 모든 글의 제목, 작성자 등을 확인할 수 있다.
- 각 글의 제목을 연결하면 글의 내용을 확인할 수 있는 상세페이지로 이동한다.
- 새글 쓰기 버튼을 클릭하면 글을 직접 포스팅할 수 있다.
- 위 화면은 새글 쓰기를 클릭했을때 이동하는 페이지이다. 작성완료 버튼을 누르면 글이 업로드된다.
- 위 화면은 각 글의 상세페이지로 글 내용 확인은 물론, 댓글도 직접 쓸 수 있다.
