Giter VIP home page Giter VIP 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 코스 목록을 슬라이더로 보여준다.
  • 항목을 클릭하면 해당 항목의 상세 페이지로 이동할 수 있다.
  • 더보기 버튼을 클릭하여 각 페이지로 이동할 수 있다.
  • 코스 좋아요 토글 기능을 사용할 수 있다.

통합검색

통합검색

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

여행지 목록 페이지

placelist

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

여행지 상세

상세조회

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

여행지 리뷰 작성

여행지 리뷰

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

코스 목록 페이지

코스목록

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

코스 작성 페이지

createcourse

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

코스 수정 페이지

editcourse

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

코스 상세 페이지

코스상세

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

마이페이지

mypage

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

✉️ Contact

백엔드

프론트엔드

mohaeng's People

Contributors

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

mohaeng's Issues

[Feat] 코스 작성시 장소 검색

목적

코스(일정) 작성 시, 장소 검색 기능을 구현한다.

상세 작업내용

  • Entity 생성
    • Course와 Place 연관관계 찾아보고 설정하기
  • Querydsl 추가
  • 장소 검색 api 생성
  • Test 작성

[Fix] 장소 전체 조회 response 수정

목적

장소 전체 조회 Response에 장소 ID를 추가해준다.

상세 작업내용

  • 장소 통합 검색 Response에 PlaceId 추가
  • 장소 검색 Response에 PlaceId 추가

[Feat] 클릭한 여행지 - (1) 여행지 상세정보

목적

클릭한 여행지의 상세정보와 리뷰를 보여주는 상세페이지 UI를 구현한다.

상세 작업내용

  • 폴더 경로 임의 설정 /placeDetail
  • 여행지 상세정보- img, title, addr, tel (추후 변경)
  • 북마크 버튼
  • 해당 주소의 지도를 보여준다.

[Fix] 코스 내 장소 검색 버그 수정

목적

구현했던 코스 내 장소 검색 기능의 버그를 수정하려고 한다.


상세 작업내용

  • PlaceRepositoryImpl Querydsl 수정
    QueryDSL을 사용할 때, Subquery에는 limit이 적용되지 않기 때문에 기존에 사용하던 쿼리문에서 에러가 발생함. 따라서 PlaceImageId를 사용하는 방식으로 수정

  • CourseServiceTest 수정
    CourseServiceTest에서 사용하는 BeforeEach를 BeforeAll로 변경

  • CourseControllerTest 수정
    SpringBootTest에서 WebMvcTest 단위 테스트로 변경

[Feat] 장소 전체 조회에 북마크 여부 추가

목적

장소 통합 검색, 전체 조회 화면에 유저의 북마크 여부 확인하는 필드를 추가해준다.

상세 작업내용

  • 장소 통합 검색 북마크 여부 확인 필드 추가
  • 장소 전체 조회 북마크 여부 확인 필드 추가

[Fix] Course 공개 여부 Enum 타입으로 변경

목적

코스의 공개 비공개 여부를 판단했던 isPublished 필드를 Mysql boolean 타입 이슈로 인해 CourseStatus Enum으로 변경

상세 작업내용

  • CourseStatus 생성
  • Course 필드 수정
  • Course 생성, 수정 등에 사용된 필드 수정하기

[Fix] 페이징 관련 이슈

목적

페이징을 사용할 때, 페이지가 0이 아닌 1부터 시작하도록 변경한다.

상세 작업내용

  • CourseController에서 페이지 처리 변경

[Fix] 코스 장소 조회 Response 변경

목적

정민님 요청으로 코스 내 장소조회 시 Response에 장소의 좌표도 볼 수 있도록 한다.

상세 작업내용

  • 코스 내 장소 Response DTO 수정

[Test] 코스관련 Test 수정 및 추가

목적

코스 관련 기능 Test를 수정 및 작성한다.

상세 작업내용

  • CourseServiceTest 수정
  • CourseControllerTest 수정
  • CourseLikesService, CourseBookmarkService 수정 및 추가
  • CourseLikesController, CourseBookmarkController 수정 및 추가

CORS에러

목적

다른 IP에서 요청할 때만 CORS오류가 생기는 것 인줄 알았는데,
다른 포트번호에서도 CORS오류가 생긴다.
따라서 이를 해결해야 한다.

[Fix] PlaceImage 테이블 삭제 및 코드 변경

목적

코스 내 장소 검색에 사용했던 PlaceImage Entity 를 사용하지 않게 되어서, 구현했던 코드를 변경 시켜준다.

상세 작업내용

  • PlaceImage 삭제
  • PlaceImage를 사용하던 코드에 Place Entity의 firstImage로 변경

[Feat] BaseEntity 생성 및 이동

목적

공통으로 사용하는 Entity를 생성하고, common 폴더에 담아준다

상세 작업내용

  • BaseTimeEntity common 폴더로 이동
  • BaseResponse 생성

[Refactor] 코스 구현 리팩토링

목적

코스 기능을 완료하고 전체적으로 리팩토링을 진행한다.

상세 작업내용

  • 코스 전체 조회에서 사용한 isBookmark, isLike 타입과 이름 변경 (boolean -> Boolean)
  • 코스 북마크 삭제 응답 타입 수정
  • 코스 상세보기 + 북마크 여부 + 좋아요 여부 합치기
    • 기존에 존재하던 좋아요 여부, 북마크 여부 확인하던 mapping 삭제
  • 전체 조회, 단건 조회 Query 갯수 줄이기
  • cascade 부분 수정하기
  • S3 key 숨기기

[Feat] 리뷰 작성 페이지

목적

리뷰 작성 페이지 UI를 구현한다.

상세 작업내용

  • url 경로: /review/create-review
  • 별점 구현
  • form - text area, file(img), button
  • 사진 - 여러 장 선택(3개 제한), 미리보기
  • api 연결 / 데이터 보내기
  • 리뷰 제출 버튼 (post)
    • 이미지 데이터 보내려면 원본 이미지파일로. (url 형식이 아니어야 함!)
  • 별점 내보내기
  • 취소 버튼 (상세페이지로 돌아가기)

[Fix] 코스 전체 조회 버그 수정

목적

코스 전체 조회 화면에서 장소 수정시 버그 문제 해결

상세 작업내용

  • 코스 수정 이후에 장소 수정이 반영되지 않는 부분 수정 (CourseRepositoryImpl)

[Feat] 사용자 생성코스

목적

사용자의 생성코스의 조회 및 공개여부를 결정한다

목록

  • 사용자 생성코스의 전체조회
  • 사용자 생성코스의 단건조회
  • 생성코스의 공개여부 변경

[Feat] 여행지 생성

  • PlaceService - 전체 조회기능
  • PlaceService - 개별 조회기능
  • PlaceService - 상세 페이지
  • PlaceService - 검색 결과

[Feat] login modal UI

목적

로그인 버튼을 누르면 로그인 모달창을 띄우는 UI를 생성한다.

상세 작업내용

  • 글로벌 모달 컴포넌트 구현 w redux toolkit
  • 모달창 추가
  • 로그인 버튼 (kakao, google)
  • 닫기 버튼
  • 로그인 기능
  • 헤더에 유저 정보 띄우기
  • 로그아웃

[Feat] 예외 처리 Handler 구성

목적

@RestControllerAdvice를 사용해 ExceptionHandler를 만들고, ErrorCode에 맞게 응답 값을 받을 수 있도록 한다.

상세 작업내용

  • ErrorCode Enum 타입으로 만들기
  • 예외 처리 응답 타입 만들기 (ExceptionResponse)
  • @RestControllerAdvice 를 사용해 ExceptionHandler 만들기
    • Exception 종류 별로 구분해서 나누기

[Fix] 코스에서 사용하는 날짜 타입 변환 및 리팩토링

목적

  1. 코스 생성 및 조회때 사용한 Date 타입을 사용하기 쉽도록 변환 과정을 추가해준다
  2. 코스 전체 조회, 코스 내 장소 조회때 응답 사이즈를 고정해준다.

상세 작업내용

  • Course 생성(수정) 시, Stirng 타입을 LocalDateTime으로 변환
  • Course 조회 시, LocalDatetime 타입을 String 타입으로 변환
  • Pageable 사이즈 고정해주기
    • 코스 전체 조회 12개
    • 코스 장소 조회 5개

[Feat] 클릭한 여행지 - (2) 리뷰 목록

목적

리뷰 목록 UI를 구현한다.

상세 작업내용

  • 리뷰- 제목, 내용(텍스트, 사진), 별점, 좋아요 버튼
  • 리뷰 정렬 select (최신순, 별점순)
  • 리뷰 작성 버튼을 클릭하면 리뷰 작성 페이지로 이동한다.
  • 페이지네이션 사용
  • 작성자는 자신이 쓴 리뷰를 수정, 삭제할 수 있다.

[Feat] 코스 상세보기

목적

유저가 코스 상세 내용을 확인할 수 있도록 구현한다.

상세 작업내용

  • 코스 상세보기 기능 구현
  • Service return 값 builder -> static 함수로 변경
  • Test 작성
    • CourseService Test
    • CourseController Test

[Feat] 회원-마이페이지 북마크 기능

목적

생성된 유저의 정보중 북마크한 목록을 보여주도록 한다.

기능

  • 코스와의 연관관계 설정

  • 코스_북마크 테이블 생성

  • 코스_북마크 연관관계 설정

  • 코스 북마크 전체조회 기능 구현

  • 코스 북마크 단일조회 기능 구현

  • 코스 북마크 기능 추가로 인한 로직 변경

  • 북마크 전체 조회 기능 테스트

  • 북마크 단일 조회 기능 테스트

[Feat] 즐겨찾기- (1) 코스 즐겨찾기

목적

사용자가 좋아요로 즐겨찾기 한 코스를 보여준다.

상세 작업내용

  • 폴더 경로 임의 설정 /myBookmarkCourse
  • 북마크 코스 상세정보- img, title, rating (추후 수정)
  • 즐켜찾기 한 코스 클릭 시 코스 상세 페이지로 연결
  • 최신순으로 정렬

[Feat] 코스 좋아요

목적

유저가 코스 상세 보기 화면에서 좋아요 버튼을 누르면, 좋아요 수가 증가할 수 있도록 구현한다.
(좋아요 개수는 코스 전체 조회 정렬 기준으로 사용된다)

상세 작업내용

  • 좋아요 Entity, 연관 관계 생성
  • 좋아요 기능 구현
    • 좋아요 버튼 클릭 유무 확인 API
    • 좋아요 추가 API
    • 좋아요 삭제 API
  • Course 전체 조회 response에 유저의 좋아요 유무 값 추가
  • 좋아요 기능 Test 작성

[Feat] S3 연결 및 설정

목적

이미지 업로드 및 삭제 구현을 위한 aws S3 설정하기.

상세 작업내용

  • S3 Config 파일 생성
  • S3를 사용한 Service 생성
    • 업로드 기능 구현
    • 삭제 기능 구현

[Feat] 마이페이지 장소 북마크

목적

마이페이지에서 장소에 대한 북마크 목록을 볼 수 있게 한다.

목록

  • Place, Member과의 연관관계
  • 장소북마크 전체 조회 기능
  • 장소북마크 단일 조회 기능
  • 장소북마크 테스트

[Feat] 여행지 검색결과 페이지

목적

키워드를 검색하면 결과 리스트를 보여주는 페이지 UI를 구현한다.

상세 작업내용

  • 검색 기능 완성 전 폴더경로 임의 설정 (/searchResult)
  • fetching test data w jsonplaceholder
  • place 아이템 리스트 (id, name, img) w local json file (from tourAPI)
  • 탭 메뉴바
  • 정렬
  • 페이지네이션

[Feat] 코스 생성

목적

유저가 코스 또는 개인 일정을 작성할 수 있도록 기능을 구현한다.

상세 작업내용

  • Request 생성
  • 코스 생성 기능 구현
  • Test 작성
    • CourseService Test
    • CourseController Test

[Feat] Review API의 구성

목적

리뷰 작성 페이지에 필요한 API를 구성하낟.

할일

  • Review엔티티 구성
  • Place, Member간의 연관관계 구성
  • 리뷰 조회 API 구성
  • 리뷰 작성 API 구성
  • 리뷰 수정 API 구성
  • 리뷰 작성시 이미지 관리
  • 리뷰 작성시 작성자의 프로필 관리

[Feat] 메인페이지 코스 조회

목적

유저가 메인 페이지에서 좋아요가 높은 코스를 볼 수 있도록 해준다.

상세 작업내용

  • 메인에서 보여줄 코스 조회 기능 구현

[Feat] 회원-로그인 처리 기능

  • OAuth Attribute, Service 생성
  • 구글 OAuth로그인
  • 카카오 OAuth로그인
  • 로그아웃
  • 카카오 OAuth로그인 문제 해결
  • 로그인 후 리다이렉트 설정 (삭제)

[Feat] 코스 북마크

목적

유저가 코스를 북마크에 담고, 삭제할 수 있도록 구현한다.

상세 작업내용

  • 북마크 Entity, 연관 관계 생성
  • 북마크 기능 구현
    • 북마크 버튼 클릭 유무 확인 API
    • 북마크 추가 API
    • 북마크 삭제 API
  • Course 전체 조회 response에 유저의 북마크 유무 값 추가
  • 메인 화면의 course 조회에서 유저의 북마크 유무 값 추가

[Feat] 코스 수정 및 삭제

목적

코스를 작성한 작성자가 코스를 수정하고, 삭제할 수 있도록 한다.

상세 작업내용

  • 코스 수정
    • 코스 수정 기능 구현
    • 코스 수정 Test 작성
  • 코스 삭제
    • 코스 삭제 기능 구현
    • 코스 삭제 Test 작성

[Feat] 회원-마이페이지의 사용자 생성코스

목적

마이페이지에서 사용자의 생성코스를 조회, 수정, 삭제하도록 한다.

상제작업 목록

  • 사용자 생성코스 전체조회
  • 사용자 생성코스 단일 조회
  • 사용자 생성코스 수정
  • 사용자 생성코스 삭제

[Feat] 리뷰 수정

목적

리뷰 수정 페이지 를 구현한다.

상세 작업내용

  • url 경로: /review/edit-review
  • reviewId로 받아온 기존 작성 데이터 value에 담고 수정하기
  • PUT /api/review/[reviewId]
  • UI 구성

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.