• 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