Giter Club home page Giter Club logo

mohaeng's Introduction

사용자가 만드는 국내여행 플랫폼, 모두의 여행 Mohaeng

모행

모두의 여행은 국내 여행 커뮤니티 플랫폼입니다

국내의 다양한 여행지를 검색하여 직접 여행 코스를 작성할 수 있고, 해당 일정을 다른 사용자들과 공유하며 국내 여행을 보다 더 편리하고 즐겁게 할 수 있는 서비스를 목표로 진행한 프로젝트입니다

📝 관련 링크

Github

요구사항 및 기능정의서

API 문서

📌 프로젝트 소개

  • 프로젝트 배경 : 사용자 경험에 초점을 맞춘 국내 여행 웹사이트의 필요성
  • 프로젝트 목표 : 직접 일정을 작성하고 유저들과 공유하며 국내 여행을 보다 더 편리하고 즐겁게 할 수 있는 경험을 제공하자
  • 개발기간 : 2023/02/01 ~ 2023/04/09 (약 2달)
  • 인원 : 6명(FE 3명, BE 3명)

📙 기획 의도

image

💚💻 프론트엔드 기술 스택

image

💙💻 백엔드 기술 스택

image

⚙ 인프라 기술 스택

image

💡 인프라 구조

image

📘 협업 툴

  • Notion
  • Github
  • Git
  • Figma
  • erdcloud
  • draw.io

🌐 데이터베이스 구조

image

💡 주요 기능

메인페이지

메인

  • 모행에서 별점이 높은 TOP10 여행지와 좋아요 수가 많은 TOP10 코스 목록을 슬라이더로 보여준다.
  • 항목을 클릭하면 해당 항목의 상세 페이지로 이동할 수 있다.
  • 더보기 버튼을 클릭하여 각 페이지로 이동할 수 있다.
  • 코스 좋아요 토글 기능을 사용할 수 있다.

통합검색

통합검색

  • 검색창에 단어를 입력하면 해당 단어가 포함된 검색 결과를 확인할 수 있다.
  • 여행지와 코스 탭을 이동하면 해당하는 여행지 목록을 페이지네이션으로 보여준다.
  • 해당 여행지의 별점과 리뷰 개수, 해당 코스의 좋아요 수를 목록에서 확인할 수 있다.
  • 로그인한 사용자의 북마크 여부를 확인할 수 있다.

여행지 목록 페이지

여행지 전체

  • 지역 필터를 통해 검색하고 싶은 지역의 여행지를 볼 수 있다.
  • 북마크 버튼을 통해 마이페이지 즐겨찾기 메뉴에서 사용자가 북마크한 여행지를 볼 수 있다. 비로그인시 북마크 버튼을 클릭하면 로그인 페이지로 이동한다.
  • 페이지 이동을 통해 특정한 여행지를 효율적으로 찾을 수 있다.

여행지 상세

상세조회

  • 여행 상세정보
    • 해당 여행지의 사진과 세부정보를 확인할 수 있다. 여행지의 장소는 카카오 맵으로 표시한다.
    • 북마크 버튼을 클릭하면 마이페이지에서 저장된 북마크 목록을 볼 수 있다. 로그인하지 않은 사용자가 북마크 클릭 시 로그인 페이지로 이동한다.
  • 리뷰 목록
    • 평균 별점과 총 리뷰의 개수를 확인하고 리뷰 목록을 페이지네이션으로 조회할 수 있다.
    • 정렬을 통해 최신순, 별점 높은 순으로 리뷰 목록을 정렬할 수 있다.
    • 로그인하지 않은 사용자가 리뷰 작성 버튼을 누르면 로그인 페이지로 이동한다.
    • 해당 리뷰에서 더보기 버튼을 클릭하면 상세한 글과 첨부된 사진을 같이 확인할 수 있다.

여행지 리뷰 작성

여행지 리뷰

  • 마우스 이동에 따라 별점을 활성화할 수 있고 클릭하면 해당 별점의 점수를 생성할 수 있다.
  • 이미지를 첨부하여 미리보기로 첨부한 사진을 확인한 후, 삭제하고 추가할 수 있다.
  • 작성한 리뷰를 토대로 수정하고 삭제할 수 있다.

코스 목록 페이지

코스목록

  • 지역, 키워드, 좋아요 많은 순/최신순으로 사용자가 원하는 조건에 맞게 코스를 조회할 수 있다.
  • 총 좋아요 수와, 좋아요 상태를 나타내는 좋아요 와 북마크 버튼을 토글 하여 사용할 수 있다.
  • 약도 보기를 통해 코스에 추가된 장소들을 약도로 확인할 수 있다.
  • 코스 공유하기로 카카오톡 친구에게 공유할 수 있다.
  • 작성하기 버튼을 클릭하면 코스를 직접 작성할 수 있다.

코스 작성 페이지

  • 공개/비공개, 제목, 시작 일자, 종료 일자, 지역, 코스 설명에 대한 내용을 입력할 수 있다. 소요일은 자동으로 계산된다.
  • 장소를 키워드로 검색하면 해당하는 장소가 나타나며 무한 스크롤 방식이다. 클릭으로 장소를 추가할 수 있다.
  • 장소를 추가하면 오버레이와 라인이 그려진 카카오 지도로 추가한 장소를 확인할 수 있다.
  • 방문할 장소의 순서와 장소의 정보, 추가한 장소를 제거할 수 있는 목록이 나타난다. 드래그 기능을 제공한다.

코스 수정 페이지

  • 코스 작성 페이지와 동일하며, 기존 작성한 코스의 내용이 불러와지며 해당 내용을 수정할 수 있다.

코스 상세 페이지

코스상세

  • 코스의 상세한 정보를 보여준다.
  • 총 좋아요 수와, 좋아요 상태를 나타내는 좋아요 와 북마크 버튼을 토글 하여 사용할 수 있다.
  • 약도 보기를 통해 코스에 추가된 장소들을 약도로 확인할 수 있다.
  • 코스 공유하기로 카카오톡 친구에게 공유할 수 있다.
  • 사용자 본인이 작성한 코스일 경우 수정, 삭제 버튼이 나타나고 코스를 수정 혹은 삭제할 수 있다.

마이페이지

마이페이지 전체

  • 회원정보
    • 정보 수정 버튼을 통한 프로필 사진과 닉네임 변경이 가능하다.
    • 회원 탈퇴시 탈퇴 확인 모달창이 뜨며 실수로 탈퇴하는 것을 방지한다.
  • 즐겨찾기
    • 탭을 통해 여행지와 코스 북마크를 조회할 수 있다.
    • 북마크 버튼을 클릭시 즐겨찾기 목록에서 삭제된다.
    • 이미지 클릭 시 해당 북마크의 상세 페이지로 이동한다.
    • 모든 북마크 아이템은 목록 내에서 무한 스크롤 방식으로 조회할 수 있다.
  • 나의 여행 일정
    • 사용자가 작성한 코스를 확인할 수 있다.
    • 해당 페이지 내부에서 사용자의 코스를 공개/비공개로 전환할 수 있다
    • 이미지를 클릭하면 코스 상세로 이동하며 해당 페이지에서 코스를 수정하고 삭제할 수 있다.
  • 내가 쓴 글
    • 해당 페이지에서 사용자가 작성한 리뷰와 별점을 확인할 수 있다.
    • 이미지를 클릭하면 해당 리뷰가 있는 여행지 상세 페이지로 이동한다.
    • 모든 리뷰 아이템은 목록 내에서 무한 스크롤 방식으로 조회할 수 있다.

✉️ Contact

백엔드

프론트엔드

mohaeng's People

Contributors

sagesrkim avatar binaryhong avatar vee-ble avatar hellohazel avatar zeniverse avatar win-9 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.