- Problem : 여행을 다녀왔는데 인스타 업데이트를 할 수 없었던 이유? (특별한 포토스팟을 발견하지 못해서, 찾아본 포토스팟이 내 여행동선과 달라서, 혼자 여행다니느라 찍어줄 사람이 없어서)
- Idea : 여행지에서 인생샷을 찍고 싶은 유저를 위해 어떤 서비스를 제공할 수 있을까?
- Solution : 3가지 핵심 서비스
- 둘러보기: 스팟 사진 구경 및 위시리스트 추가
- 지도보기: 지도 API를 활용하여 스팟의 위치 파악
- 함께하기: 함께 사진을 찍을 동행을 구할 수 있는 커뮤니티
- 2022년 3월 1일 ~ 3월 29일
- 참여 인원 : 4명(최영수, 박용호, 김하은, 김상백)
Front-end
언어
- HTML
- CSS
- Javascript
Back-end
언어
- Python 3.9.1
프레임워크
- Django 3.2.9
개발환경
- VSCode
DBMS
- sqlite3
버전관리
- Git
- Github
배포
- AWS Route 53
- Nginx
- User 모델과 Profile 모델은 1:1관계 설정 - Profile 모델로 다양한 사용자 데이터를 받기 위해 설정
- User 모델과 Travel 모델은 M:N관계 설정 - 1명의 유저가 여러 개의 여행 스팟에 좋아요를 누를 수 있고, 1개의 여행 스팟은 여러 명의 유저에게 좋아요를 받을 수 있기 때문
- Profile 모델과 Post 모델은 1:N관계 설정 - 1명의 유저가 여러 개의 게시판 글을 작성할 수 있게 설정
- Profile 모델 & Travel 모델 & Post 모델과 Comment 모델은 1:N관계 설정 - 1명의 유저가 여러 개의 댓글을 남길 수 있고, 1개의 여행 스팟과 1개의 게시글이 여러 개의 댓글을 가질 수 있기 때문
- App 별 Views.py에 주석으로 각자의 코드를 구분하여 개발 진행
- github에 push할 때, version으로 commit 메세지를 작성하여 협업 진행
- Front-end(페이지별 분담) :
- 최영수: 랜딩페이지(HTML, CSS, Javascript), 둘러보기(HTML, CSS), 로그인/회원가입(HTML, CSS), 지도보기(HTML, CSS, Javascript(지도API)), 스팟상세(CSS, Javascript),
- 김상백: 함께하기(HTML, CSS), 스팟상세(HTML, CSS), 함께하기(CSS)
- 박용호: 지도보기(HTML, CSS, Javascript(지도API))
- 김하은: 마이페이지(HTML, CSS)
- Back-end : 김상백
- 배포 : 멋사 온앤오프 강사님 도움으로 진행
- 기획 : 최영수
-
메인 페이지 : Carousel 기능을 활용해서 DB에 저장된 여행 스팟을 자동으로 보여주기
- 해당 스팟에 마우스를 위치시킬 때 스팟의 좋아요 개수 표시
- 로그인 시 마이페이지 화면을 볼 수 있도록 설정
- 메인 페이지 메세지를 클릭해서 둘러보기 페이지나 함께하기 페이지로 이동할 수 있도록 구성
-
지도보기 페이지 : 카카오 지도 API를 이용하여 지도위의 스팟을 클릭했을 때, DB에 저장되어 있는 해당 스팟의 정보(이름, 지역, 이미지 등) 보여주는 기능 구성
- 지도보기 페이지를 클릭할 경우, 카카오 지도 API 위치를 제주도 전체 지역을 확인할 수 있도록 위치 설정
- DB에 저장되어 있는 모든 제주도의 스팟을 지도 화면에 마커로 표시
- 스팟 클릭 후 출력된 해당 스팟의 이미지를 클릭 시, 스팟 상세 페이지로 이동할 수 있게 구현
- 유저가 로그인 했을 경우, DB에 있는 모든 스팟을 지도에 표시하거나 유저가 좋아요를 누른 스팟만 지도에 표시할 수 있는 기능 구현
-
둘러보기 페이지 : DB에 저장된 모든 여행 스팟을 최신순, 인기순, 지역별로 볼 수 있도록 구현
- 인기순의 경우, 좋아요 개수가 가장 많은 여행 스팟순으로 정렬될 수 있도록 구성
- 해당 화면에서 스팟마다 좋아요 버튼을 통해 바로 좋아요 및 취소가 되도록 구현
- 검색 기능으로 스팟의 제목을 검색할 수 있게 설정하고 해당 스팟을 클릭하면 스팟 상세 페이지를 보여주기
- 해당 스팟에 마우스를 위치시킬 때 스팟 이름을 확인할 수 있도록 설정
-
스팟 상세 페이지 : 해당 스팟에 대한 정보(이름, 지역, 주소, 댓글 및 좋아요 개수, Carousel로 이미지 2장)를 확인할 수 있도록 구현
- 카카오 지도 API로 해당 스팟을 지도위에 보여주기
- 로그인 시, 해당 스팟에 대한 댓글을 작성할 수 있도록 구현
- 본인이 남긴 댓글일 경우, 삭제가 가능하도록 삭제 버튼 출력
-
함께하기 페이지 : Spot On의 유저인 경우, 함께 사진을 찍을 동행을 구할 수 있는 게시판 CRUD 구성
- 유저인 경우, 각 게시글에 댓글을 남길 수 있도록 설정
- 댓글 작성 시, 작성자에게 귓속말하기를 체크하고 작성하면 댓글 작성자와 게시글 작성자만이 댓글을 확인할 수 있게 기능 구현
- 검색 기능으로 게시판 제목으로 검색이 가능하게끔 구현하고 게시글 순서 숫자를 DB의 id가 아닌 순서대로 나열하게끔 설정
- 게시판 pagination 구현
-
마이페이지 : Spot On의 유저인 경우, 본인이 좋아요를 누른 모든 여행 스팟을 확인할 수 있는 위시리스트 구현
- 마이페이지에서도 유저가 좋아요를 누른 여행 스팟을 클릭하면 스팟 상세 페이지를 확인할 수 있게 설정
-
Django 어드민 페이지 : 모델 별 필드 설정 및 검색과 필터 기능 추가
- 1:N관계나 1:1관계의 경우, 실제 모델의 필드를 설정할 수 있도록 필드 설정 ex) user__user__username