서비스 소개

그동안 어렵게만 느껴졌던 여행 중 지출 내역을 보다 편리하게 이용할 수 있도록 만든 서비스입니다. 이제 해외여행을 가서 편하고 다양한 기능을 시작해 보세요 !

◇ 주요 기능 ◇

• 기능별 직관적 디자인 제공
• 여행별 가계부 / 다이어리 생성
• 여행 및 날짜별 가계부 및 다이어리 관리
• 사용 내역 통계 및 그래프 기능
• 다이어리 검색 제목 및 내용 검색기능(fuzzy검색)
• 소셜로그인 기능
• 서비스 이용자 간 실시간 채팅 기능
• 여행중 구입내역 Google Map marker기능
• 사람들끼리 자유롭게 소통 가능한 자유게시판

배포: https://just-moment-trip.ml

주요 기능별 시연 gif

회원가입 이메일인증

이미 가입된 이메일

제대로된 이메일

이메일 내용

인증및 회원가입

로그인

소셜로그인

여행 페이지

ㅤㅤㅤㅤ여행작성

ㅤㅤㅤㅤ여행별 정보 확인

ㅤㅤㅤㅤ여행수정

ㅤㅤㅤㅤ여행삭제

가계부 페이지

ㅤㅤㅤㅤ가계부 도움말

ㅤㅤㅤㅤ가계부 작성

ㅤㅤㅤㅤ가계부 수정 및 삭제

ㅤㅤㅤㅤ가계부 조회 및 그래프

ㅤㅤㅤㅤ가계부 지도 PIN

다이어리 페이지

ㅤㅤㅤㅤ다이어리 도움말

ㅤㅤㅤㅤ다이어리 작성

ㅤㅤㅤㅤ다이어리 수정 및 삭제

ㅤㅤㅤㅤ다이어리 구성

ㅤㅤㅤㅤ다이어리 해시태그 검색

ㅤㅤㅤㅤ다이어리 제목 내용 검색

마이페이지

ㅤㅤㅤㅤ마이페이지

ㅤㅤㅤㅤ마이페이지

자유게시판

ㅤㅤㅤㅤ비회원인 경우 게시판을 접속한 화면

ㅤㅤㅤㅤ회원인 경우 게시판을 접속한 화면

ㅤㅤㅤㅤ게시글 작성

ㅤㅤㅤㅤ게시글 수정

ㅤㅤㅤㅤ댓글 수정

ㅤㅤㅤㅤ게시글 삭제

ㅤㅤㅤㅤ댓글 삭제

ㅤㅤㅤㅤ게시글 제목 검색

ㅤㅤㅤㅤ게시글 10개 초과 시 페이지

인포페이지

채팅

3. Members

---

팀장 : 윤기혁

• Role : Team Leader
• Position : Front-end
• Stack : React / Redux / Redux-toolkit / Webpack / Styled-components
• Works : 자신이 프로젝트에서 구현한 기능을 적어주세요
  1. webpack을 이용한 초기 개발환경 세팅
  2. 기능 및 axios 모듈화
  3. redux-toolkit을 이용한 전역적 데이터 관리 및 비동기 통신 연계
  4. 자체 로그인 회원가입 및 카카오 소셜로그인 구현(oAuth 2.0)
  5. 여행 정보입력 및 관리 구현
  6. 로그인 관련 및 여행페이지 CSS 작업

팀원 : 문윤미

---

• Role : Team Member
• Position : Front-end
• Stack : React / Styled-Componenets / Axios
• Works

📎 figma를 사용하여 전반적인 프로토타입 구현

---

📎   홈, Navbar, 채팅 등 CSS 및 웹페이지 상에서 보이는 대부분의 것들의 CSS 및 Animation 구현

👉 프로젝트의 목적이 ‘여행에 대한 기록'이기 때문에 재미적인 요소를 포함하여 구현

🥔 이스터에그를 숨겨놓았습니다 찾아보세요 !

📎 화면을 줄이면 경고페이지가 보여지게 만들었습니다

📎 sweet alert 라이브러리를 사용하여 Alert창 구현 및 커스텀

---

📝 일기장(Diary)

CRUD기능 구현 및 도움말 구현

Styled-Components를 사용하여 페이지 커스텀

글쓰기를 Madal에서 하도록 구현

일기장 해쉬태그(HashTag) 기능 구현

해쉬태그 클릭 시 클릭한 태그를 포함한 내용들만 분류하여 보여주는 기능 구현

일기를 보여주는 카드에 마우스오버시 지도아이콘이 보이도록 구현 (깜짝이벤트st)

지도아이콘을 클릭하면 Boost-trap 라이브러리를 사용한 Modal에서 확인할 수 있게 구현

화면을 줄여도 항상 리스트가 3개씩 보이는 반응형 CSS 구현

백엔드분들의 도움을 받아 Axios를 사용하여 서버와 통신을 가능하게 구현

💸 가계부(Account)

CRUD기능 구현 및 도움말 구현

Styled-Components를 사용하여 페이지 커스텀

글쓰기를 Modal에서 하도록 구현

Nivo 라이브러리를 사용하여 그래프 (PieChart) 기능 기능 구현

Trip에서 입력한 ‘여행 총 경비’의 데이터와 Account에서 입력한‘사용한 돈’의 데이터들을 그래프화 하여 Modal에서 확인할 수 있게 구현

Footer에서 사용한돈 / 여행 총 경비 비율 및 남은돈과 사용한 돈을 확인할 수 있게 구현

화면을 줄이거나 늘리면 한 행에서 보여지는 리스트의 갯수가 많아지거나 줄어드는 반응형 CSS 구현

백엔드분들의 도움을 받아 Axios를 사용하여 서버와 통신을 가능하게 구현

📋 자유게시판(Board)

코드간결화 및 컴포넌트 분리에 조금 더 신경썼습니다

CKEditor5 라이브러리를 이용하여 게시글을 작성 및 수정할 수 있게 만들었습니다

게시글 목록을 10개씩 볼 수 있도록 구현하였습니다

게시글을 수정하였을 시, 화면 오른쪽 상단에 수정된 글임을 표시하도록 만들었습니다.

비회원으로 Board에 이용할 시, 읽기만 가능하도록 만들었습니다.

---

팀원 : 최만선

---

• Role : Team Member
• Position : Back-end
• Stack : Express, Sequelize, Axios, JWT, Slack, Cron, AWS, Node.js
• Works :
  1. Sequelize를 이용한 DB 스키마 설계 및 구현 (공동작업)
  2. API 문서 작업 (공동작업)
  3. JWT를 이용하여 Access Token과 Refresh Token을 발급받아 보안강화 (공동작업)
  4. EC2와 ELB를 이용한 https 서버 배포 및 Route53을 이용한 도메인 생성 (공동작업)
  5. 클라이언트 Diary 페이지 검색창 구현
  6. AWS의 Parameter Store기능을 이용하여 환경변수 적용
  7. slack을 이용한 CRUD로그 남기기
  8. cron 스케쥴러를 이용해서 주기적으로 쓰레기 데이터 삭제
  9. google map api을 이용한 가계부 열람시 작성했던 장소를 map에 marker
  10. socket.io를 이용한 실시간 채팅
  11. nodemailer를 이용한 임시비밀번호 발급
  12. fuzzy검색(정규표현식, Levenshtein Distance, n-Gram를 이용 및 Highlight 적용)
  13. Bcrypt, RSA, Caesar, Monoalphabetic을 이용한 보안강화
• Tech-Presentation Topic : fuzzy 검색 : https://fullfish.tistory.com/117?category=1053678

팀원 : 최현민

---

• Role : Team Member
• Position : Back-end
• Stack : Express, Axios, Sequelize, Node.js, JWT, AWS
• Works
  1. 공동작업
     1. Sequelize를 이용한 DB 스키마 설계 및 구현
     2. API 문서 작업
     3. JWT를 이용하여 Access Token과 Refresh Token을 발급받아 보안강화
     4. EC2와 ELB를 이용한 https 서버 배포 및 Route53을 이용한 도메인 생성
  2. S3 배포
  3. S3를 이용한 이미지 저장
  4. Diary 날짜별 랜더 구현
  5. 자유게시판 댓글기능 구현
  6. 사이드 도움 (로직도움)