[프로젝트] 웹 TripRecorder

프로젝트 개요

개요 및 목적

• 배경
  • 여행 기록 관리를 위해 SNS를 많이 사용하고 있는 만큼 SNS와 여행 경비 관리 플랫폼을 통합
• 개요
  • 기본적인 SNS 기능 구현
    • 게시글, 댓글, 좋아요, 해시태그, 검색, 팔로우,
  • 경비 기능 구현
    • 영수증 OCR 등록, 수기 등록
    • 게시글과 연동
  • 인기 카드 조회
    • 카테고리 별 인기 카드 및 혜택 조회
• 목적
  • 신한은행의 ‘스토리뱅크’의 스토리 기능을 SNS로 확장
  • 다른 여행자들과 정보를 공유하고 소통할 수 있는 SNS 기능과 간편한 여행 경비 관리 플랫폼 연결
  • 여행 기록에 따른 결제 내역 관리
  • 숙박, 항공, 교통 등 다양한 카테고리의 인기 카드 조회 및 할인 정보 제공

개발 환경

• 언어: Java, JavaScript
• 프레임워크: SpringBoot, React.js
• 라이브러리: NAVER CLOVA API
• 사용 툴: Eclipse, VSCode, Workbench
• DB: MySQL
• 협업 및 디자인: Figma, Slack, Notion, Github

프로젝트 구조

프로그램 흐름

프로젝트 기능

• 인증 (BE 담당 기능)
  • 회원가입
  • 로그인
• 여행 카테고리 (BE 담당 기능)
  • 카테고리 등록
    • 각 여행이 폴더로 구분
  • 카테고리 삭제 (FE 담당 기능)
• 게시글 (BE 담당 기능)
  • 게시글 등록, 삭제
  • 댓글 등록, 삭제 (FE 담당 기능)
  • 좋아요 등록, 취소 (FE 담당 기능)
  • 게시글 조회
    • 메인화면 로그인 전: 전체 공개 게시글
    • 메인화면 로그인 후: 팔로우 + 본인 게시글
    • 로그인 전 경비 조회 제한
    • 프로필 로그인 전, 로그인 후 팔로우하지 않은 사용자: 전체 공개 게시글
    • 프로필 로그인 후 팔로우한 사용자: 전체 공개 + 팔로우 공개 게시글
    • 프로필 본인: 모든 게시글
• 경비
  • 경비 수기 등록 및 OCR 등록 (BE 담당 기능)
  • 경비 조회 및 삭제 (BE 담당 기능)
• 프로필
  • 사용자 프로필 정보 조회 (BE 담당 기능)
    • 프로필 사진, 프로필 메시지, 팔로우, 팔로워
  • 프로필 수정
• 팔로우, 언팔로우 (BE 담당 기능)
• 검색 (BE, FE 담당 기능)
  • 닉네임 검색
  • 해시태그 검색
• 인기 카드 (FE 담당 기능)
  • 카테고리 별 사용자들이 많이 사용한 Top3 카드 조회
  • 각 카드 사용 시 받을 수 있는 혜택 계산

테이블 구조

프로젝트 시연

시연 영상

로그인 전 메인화면

• 전체 공개 게시글 조회

• 경비 정보 조회 시 결제 금액 제한
• 경비 상세 제한

회원가입 및 로그인

• 아이디, 닉네임, 이메일 중복 체크

로그인 후 메인화면

• 본인 게시글 + 팔로우의 전체 공개, 팔로우 공개 게시글 조회

프로필 수정

• 본인 프로필에서 수정 가능

여행 등록

• 등록한 여행은 각각 폴더로 관리
• 여행 내 최신 게시글 사진을 썸네일 형태로 조회

게시글 등록 및 조회

• 연결할 경비, 제목, 메모, 사진, 해시태그, 공개범위 입력
• 좋아요, 댓글 기능

• 게시글 첫 번째 사진을 썸네일 형태로 조회

경비 등록 및 조회

• 여행 총 예산, 사용 금액, 남은 금액 출력
• 수기 등록 or 영수증 OCR 등록
  • OCR 등록시 사용처, 장소, 여행 경비, 거래 일시 자동 입력
• 연결할 게시글, 제목, 결제수단, 사용처, 장소, 여행 경비, 거래 일시, 결제 카테고리 입력
• 게시글 조회 시 경비 정보 모달
  • 로그인 전과는 다르게 결제 금액 조회 가능
  • 결제 상세 조회 가능
• 경비 변화
  • 총 경비, 사용 금액, 남은 금액
  • 경비의 간단한 정보 조회

여행 삭제

• 여행에 속한 게시글, 경비 일괄 삭제

검색

• 닉네임 검색
  • 검색어를 닉네임에 포함하는 사용자와 여행, 게시글 수 출력

• 해시태그 검색
  • 해시태그를 사용해 게시글 검색

팔로우

• 팔로우
  • 해당 사용자의 팔로워, 본인의 팔로우 증가
  • 메인페이지에서 해당 사용자의 게시글 조회 가능

• 언팔로우
  • 해당 사용자의 팔로워, 본인의 팔로우 감소
  • 메인페이지에서 해당 사용자의 게시글 조회되지 않음

인기카드

• 경비 등록시 선택한 결제 카드, 카테고리를 바탕으로 사용자들이 많이 선택한 상위 3개의 카드 보여줌
• 소비 금액 입력하면 해당 카드 사용시 받을 수 있는 혜택 계산 및 조회
• 해당 카드의 페이지로 이동하여 가입 유도

---

전체 코드> 깃허브
시연 영상> 유튜브