🔨

04. 프로젝트 개요

완성된 페이지를 보면서 우리가 만들 페이지의 구조를 살펴보도록 하겠습니다. 여기서 유심히 보셔야 할 것은 URL 구조입니다.
아래 URL에서 실행되고 있는 서버를 확인하실 수 있습니다.
 
1. https://사용자_지정_도메인.run.goorm.io/ - 메인페이지 - Template : index.html
notion imagenotion image
 
사용자가 처음 볼 main page 입니다. 여기서 사용자가 원하는 지역을 선택하고 카페 찾기를 누르면 해당 지역의 카페가 찾아지는 구조로 되어 있습니다.
 
2. https://사용자_지정_도메인.run.goorm.io/about - 홈페이지 소개 페이지 - Template : about.html
 
about page 입니다. 안에 글귀는 의미 없는 로렘 입숨으로 작성되어 있습니다.
 
notion imagenotion image
 
3. https://사용자_지정_도메인.run.goorm.io/cafelist - 메인페이지에서 카페들을 클릭했을 경우 이동 - Template : cafelist.html
 
cafelist page 입니다. 해당 사진이나 글귀를 눌렀을 경우 상세 페이지로 이동합니다.
 
notion imagenotion image
 
4. https://사용자_지정_도메인.run.goorm.io/cafelist/cafe번호 - cafelist 페이지에서 카페 상세 정보 보기를 눌렀을 때 이동, google map API 사용 - Template : cafedetails.html
 
 
notion imagenotion image
cafedetails page 입니다. 카페의 사진 3장, 설명, 주소와 위치를 나타내고 google MAP API를 활용하여 지도에 위치를 나타내줍니다.
 
5. https://사용자_지정_도메인.run.goorm.io/cafeenroll - 메인페이지에서 카페등록을 클릭했을 경우 이동 - Template : enroll.html
 
 
notion imagenotion image
 
cafe 등록 페이지입니다. 해당 페이지는 admin 페이지에서 실행할 수 있기 때문에 없어도 되는 페이지이지만 form 연습 차원에서 튜토리얼 안에 넣어놨습니다.
 
[참고]
프로젝트 전체 소스 코드 : https://github.com/paullabkorea/jejucodingcamp