Trip Match

믿을 수 있는 여행 동행자를 구하는 사이트
링크

서비스 구성 안내

1. 서비스 소개

기술 스택
- rtk query: redux를 이미 사용하고 있었지만, 이미 작성한 데이터 패치 로직을 분리하고 단순화하고 axios intercepter를 적용하기 위해 rtk query의 기존 fetchBaseQuery를 axiosBaseQuery로 커스텀.
- bcrypt: 회원 비밀번호를 암호화해서 DB에 보관하기 위해 사용.
- nanoid: MongoDB CRUD에 _id 대신 사용하고, 이메일 인증번호 및 임시 비밀번호를 발급하기 위해 사용.
- request: 공공데이터포털의 open API를 요청하기 위해 사용.
- yamljs: 스웨거 API 문서를 작성한 .yaml 파일을 불러오기 위해 사용.
공공데이터포탈 open API

2. 서비스 주요 기능 설명

주요 기능 및 서브 기능 소개
- 유저 관련 기능
  - 로그인
    - 비밀번호 찾기
  - 회원가입(필수 값 * 표시)
    - 이메일 인증 및 인증번호 확인* (이메일 형식 검증)
    - 닉네임* (중복 가능) (2자 이상 / 8자 이내 / 특문 제외)
    - 비밀번호* (8자 이상 / 영어, 숫자, 특문 포함)
    - 성별*, 나이*
    - 자기소개 (100자 이내)
  - 마이페이지
    - 유저의 동행 횟수, 점수 조회
    - 유저 정보 수정
      - 프로필 사진, 비밀번호, 나이, 자기소개 수정 가능
      - 이메일,닉네임,성별 수정 불가
    - 작성 게시글 내역 조회
      - 모집중, 모집 마감 수정
      - 제목, 지역, 기간, 모집상태 조회
    - 댓글 단 게시글 내역 조회
    - 신청 받은 내역 조회
      - 수락, 거절
    - 신청한 내역 조회
      - 신청 상태(대기중, 거절, 수락) 조회
      - 대기중 시 신청 취소 가능
      - 수락 시 연락 수단 조회 가능
        
        수락 후 여행 기간이 끝난 뒤에 7일 이내 리뷰 작성
        
        모달을 통해 동행자에 대한 별점을 남길 수 있음
- 위시리스트
  - 좋아요 누른 글 조회
  - 좋아요 누른 글 개수 조회
  - 좋아요 취소
- 자유게시판 (자유로운 질문 및 후기 게시판)
  - 지역별 자유게시판 게시글 조회
    - 전체, 지역별 조회
  - 게시글 작성
    - 지역 및 카테고리 설정
    - 게시글 제목 및 내용 작성
  - 게시글 상세 조회
    - 모달을 통해 작성자 상세 정보 조회
    - 댓글 작성, 수정, 삭제 가능
  - 게시글 수정 및 삭제
  - 관리자 - 게시글, 댓글 삭제
- 동행 게시판 (동행 모집 글 게시판)
  - 지역별 게시글 전체 조회
    - 지역별, 모집 상태별 조회
    - 희망(위시 리스트) 모집글 표시
  - 게시글 작성
    - 지역, 모집 인원, 여행 기간, 희망 성별 및 나이대, 관련 사진 입력 가능
  - 게시글 상세 조회
    - 모달을 통해 작성자 상세 정보 조회
    - 동행 신청
    - 댓글 작성, 수정, 삭제 가능
  - 게시글 수정 및 삭제
  - 관리자 - 게시글, 댓글 삭제
- 관광 정보 페이지
  - 축제 정보 목록 조회
    - 축제 클릭 시 모달을 통해 상세 정보 조회
  - 숙박 정보 목록 조회
    - 숙소 클릭 시 모달을 통해 상세 정보 조회
- 관리자 페이지
  - 회원 전체 목록 조회
    - 회원 클릭 시 모달을 통해 상세 정보 조회
  - 닉네임으로 회원 검색
  - 회원 강제 탈퇴
    - 탈퇴된 회원의 게시글 및 댓글은 그대로 남고, 회원 정보에 ‘탈퇴한 회원입니다’ 표기
프로젝트만의 차별점, 기대 효과
1. 여행 후 상대의 여행 점수를 평가하여 동행자 점수를 채점, 동행자 구인 시 신뢰도 향상
2. 서로 동행 신청 동의 시, 글 작성 시 작성한 연락 수단을 공개하여 추가적인 정보 교환이 가능하도록 함

3. 서비스 구성도

피그마 링크
API 명세 링크

4. 프로젝트 팀원 역할 분담

이름	담당 업무
김제원	팀장/프론트엔드 개발
김은채	프론트엔드 개발
김지윤	프론트엔드 개발
이도연	프론트엔드 개발
정지영	프론트엔드 개발
김지택	백엔드 개발

김제원: 팀장/프론트엔드 담당
- 기획 단계: 구체적인 설계와 지표에 따른 프로젝트 제안서 작성
- 개발 단계: 프로젝트 일정관리, 의견 조율 및 위시 리스트와 유저 인증, 정보 수정 관련 페이지 완성
- 수정 단계: 기획, 스크럼 진행, 코치님 피드백 반영해서 수정, 발표 준비
김은채: 프론트엔드 담당
- 기획 단계: 구체적인 설계와 지표에 따른 프로젝트 제안서 작성
- 개발 단계: 피그마를 기반으로 프론트 개발
- 수정 단계: 기획, 스크럼 진행, 코치님 피드백 반영해서 수정, 발표 준비
김지윤: 프론트엔드 담당
- 기획 단계: 구체적인 설계와 지표에 따른 프로젝트 제안서 작성
- 개발 단계: 메인, 여행정보, 관리자, 검색, 별점 모달, 헤더&푸터 완성
- 수정 단계: 기획, 스크럼 진행, 코치님 피드백 반영해서 수정, 발표 준비
이도연: 프론트엔드 담당
- 기획 단계: 구체적인 설계와 지표에 따른 프로젝트 제안서 작성
- 개발 단계: 내가 쓴 게시글 내역, 댓글 내역, 신청 받은 내역, 신청한 내역 완성
- 수정 단계: 기획, 스크럼 진행, 코치님 피드백 반영해서 수정, 발표 준비
정지영: 프론트엔드 담당
- 기획 단계: 구체적인 설계와 지표에 따른 프로젝트 제안서 작성
- 개발 단계: 자유게시글 상세, 작성, 동행게시글 상세, 댓글, 공지사항, 기본 모달 완성, RTK query 적용
- 수정 단계: 기획, 스크럼 진행, 코치님 피드백 반영해서 수정, 발표 준비
김지택: 백엔드 담당
- 기획 단계: API 명세 작성
- 개발 단계: 피그마를 기반으로 API 완성
- 수정 단계: 피드백 반영해서 백엔드 설계 수정, 발표 준비

5. 폴더 구조

├── client
|   ├── public
|   └── src
|       ├── axios
|       ├── components
|       |   ├── AppButton
|       |   ├── AppInputDateRange
|       |   ├── AppInputFile
|       |   ├── AppInputRadioCheck
|       |   ├── AppInputText
|       |   ├── AppSelect
|       |   ├── AppTabContent
|       |   ├── AppTable
|       |   ├── AppTapPanel
|       |   ├── Auth
|       |   ├── Comment
|       |   ├── CommentList
|       |   ├── Editor
|       |   ├── FestivalList
|       |   ├── FreePost
|       |   ├── FreePostPreview
|       |   ├── Layout
|       |   ├── MakeMatchPostList
|       |   ├── MarkdownView
|       |   ├── Modal
|       |   ├── MyFooter
|       |   ├── MyHeader
|       |   ├── NotFound
|       |   ├── Pagination
|       |   ├── PostDetail
|       |   ├── ProfileModal
|       |   ├── Title
|       |   └── UserProfile
|       ├── images
|       ├── pages
|       |   ├── Admin
|       |   ├── FindPassword
|       |   |   └── components
|       |   ├── FreePostDetail
|       |   ├── FreePostList
|       |   ├── FreePostWrite
|       |   |   └── components
|       |   ├── Home
|       |   |   └── components
|       |   ├── Login
|       |   |   └── components
|       |   ├── MatchPostDetail
|       |   |   └── components
|       |   ├── MatchPostList
|       |   ├── MatchPostWrite
|       |   ├── MyComment
|       |   ├── MyEnroll
|       |   ├── MyPage
|       |   |   └── components
|       |   ├── NoticeDetail
|       |   ├── NoticeList
|       |   ├── NoticeWrite
|       |   |   └── components
|       |   ├── ReceivedEnroll
|       |   ├── Register
|       |   |   └── components
|       |   ├── Search
|       |   └── WishList
|       |       └── components
|       ├── slice
|       ├── store
|       ├── styles
|       ├── type
|       └── util
└── server
    └── src
        ├── controllers
        |   ├── admin
        |   └── main
        ├── interfaces
        ├── middlewares
        ├── models
        |   └── schemas
        ├── services
        ├── swagger
        ├── types
        |   └── express
        └── utils

6. 실행 방법

스웨거:

localhost

  git clone https://kdt-gitlab.elice.io/sw_track/class_03/web_project_2/team8/team82.git
  cd team82/server
  npm install
  npm run dev 혹은 npm run start
  브라우저에서 localhost:3003/api-docs 접속
  Swagger 문서에서 API 선택하여 Try it out
  Request 양식 채워서 Execute

server

  브라우저에서 kdt-sw3-team08.elicecoding.com:3003/api-docs 접속
  Swagger 문서의 Servers 탭을 http://34.64.156.80:3003/api로 변경
  API 선택하여 Try it out
  Request 양식 채워서 Execute

7. 버전

프로젝트의 버전 1.0.0

leedo97y / tripmatch Goto Github PK

tripmatch's Introduction

Trip Match

서비스 구성 안내

1. 서비스 소개

2. 서비스 주요 기능 설명

3. 서비스 구성도

4. 프로젝트 팀원 역할 분담

5. 폴더 구조

6. 실행 방법

7. 버전

tripmatch's People

Contributors

Watchers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent