/shelter-public

Primary LanguageJavaScript

Shelter

react react-router-dom react-redux react-google-maps axios express body-parser cookie-parser cors jsonwebtoken mysql2 sequelize

프로젝트 개요

프로젝트 명

Shelter

팀원

박정혁, 변민우, 이상아, 함석호

기간

2020.06.29 - 2020.07.11

요약

쉘터는 경기도에 있는 청소년 쉼터들의 정보를 보다 빠르고 쉽게 검색할 수 있도록 도와주는 웹 어플리케이션 입니다.

쉼터들의 위치를 지도에 표시해주고 각 쉼터에 대한 정보를 한 눈에 확인 할 수 있습니다.

팀원 소개

  • client 개발 환경 및 프레임 구축
  • Filter 컴포넌트 기능 구현
  • Filter, Map 컴포넌트 연결
  • 반응형 웹 디자인 설정
  • server 개발환경 및 프레임 구축
  • map API 구현
  • user API 구현
  • sign-up, sign-in, sing-out 페이지 구현
  • dabatabase 개발 환경 및 테이블 구축
  • client 개발 환경 및 프레임 구축
  • Map 컴포넌트 기능 구현
  • Chat 컴포넌트 기능 구현 (wip)
  • server 개발 환경 및 프레임구축
  • shelter API 구현
  • chat API 구현 (wip)

기술 스택

image (1)

React JS

Redux

GoogleMaps

Node

Express

AWS

기능

청소년 쉼터 검색

선택한 조건에 맞는 쉼터 목록을 조회합니다.

검색

상세 정보 확인

원하는 쉼터의 상세 정보와 위치를 조회합니다.

상세정보확인

검색 결과 없음

선택한 조건에 맞는 쉼터가 없을 땐 빈 목록을 보여줍니다.

검색결과 없음

전체 검색

필터의 어떤 키워드도 선택하지 않고 검색했을 시, 모든 쉼터를 조회합니다.

전체 검색

회원 가입

우측 하단의 Floating Action Button을 클릭하여 회원 관리 페이저로 이동합니다.

회원은 쉼터 직원(관리자)과 청소년 두 유형으로 분리하여 관리합니다.

관리자 가입 청소년 가입

로그인 / 로그아웃

회원 관리 페이지에서 로그인을 할 수 있으며 로그인 상태일 때 Floating Action Button을 클릭하면 로그아웃이 됩니다.

로그인 로그아웃

모바일 검색

모바일 환경에서의 검색 기능입니다.

모바일 검색

모바일 상세 정보 확인

모바일 환경에서 쉼터의 상세 정보를 확인합니다.

하단의 버튼을 통해 목록과 지도를 번갈아 조회할 수 있습니다.

모바일 상세 정보 확인

모바일 로그인 / 로그아웃

모바일 환경에서의 로그인, 로그아웃 기능입니다.

모바일 로그인 로그아웃