캡스톤 디자인 프로젝트 -맛집 정보 사이트 만들기- (2)

우선 메인 화면 구성도를 보겠습니다.

맨 위에있는 헤더바와 메인 오른쪽에있는 박스들은 라우터 기능을 통해 네비게이션기능을 수행하게하였습니다.

 또 헤더바에있는 로그인 버튼을 통해 로그인과 회원가입을 실행할 수 있습니다.

세션 기능을 통해 구현을 하였고 로그인을 해야지만 리뷰 커뮤니티 등을 이용할 수 있게 하였습니다.

로그인을 하면 세션을 제공받게 되고 로그아웃을 하면 세션을 파기되는 구조로 되어있습니다.

 

다음은 식당 보기 화면을 살펴 보도록 하겠습니다.

화며에 보이는 것처럼 왼쪽 식당 카드들을 볼 수 있는데 식당 카드를 클릭하면

세부 정보 보기, 리뷰 작성하기, 지도로 이동하기 기능을 수행할 수 있습니다.

 또한 오른쪽에있는 위치갱신을 하게되면

지도에 현재 위치에 마크가 생기고 식당 마크를 클릭하게 되면 길찾기 기능을 이용할 수 있습니다.

또 오른쪽에 있는 자전거 화면 보기를 클릭하게 되면 타슈api를 통해 자전거의 현재상황을 알 수 있도록 하였습니다.

 

다음은 리뷰 작성 페이지를 살펴 보도록 하겠습니다.

리뷰 작성하기 버튼을 누르면 

이렇게 카테고리 페이지로 이동하게됩니다.

카테 고리를 클릭하게되면 

식당 카드들을 살펴 볼 수 있습니다.

식당 카드들을 클릭하게 되면

이렇게 해당 식당에 대한 리뷰를 작성할 수 있게 됩니다.

다음은 커뮤니티 페이지를 살펴 보도록 하겠습니다.

 

로그인을 한 유저들은 자유롭게 글을 작성할 수 있고 기본적인 CRUD기능을 사용할 수 있도록 하였습니다.

대략적인 기본 화면들을 소개해 보았고 다음 글에서부터는 백엔드와 세부적은 기능들을 자세하게 살펴보도록

하겠습니다.