✈ SolTrip

맞춤형 여행 예산 관리 플랫폼

📅 기간

2023.09.01 ~ 2023.09.17(2주)

🔎 목차

📖 프로젝트 개요
🛠️ 기술 스택
⚙️ 아키텍처
🗂️ 프로젝트 파일 구조
🖥 서비스 구현 화면
👥 팀원 소개

📖 프로젝트 개요

목표

사용자들이 보다 쉽게 여행 예산을 관리할 수 있도록 돕는 서비스
신한 은행 Open API를 활용하여 실시간 예산 관리
사용자들이 많이 결제한 장소 위주로 인기 장소 추천
여행을 마친 후 사용 예산 기록을 포트폴리오로 저장

🛠️ 기술 스택

💻 IDE

📱 Frontend

💾 Backend

🔃 DevOPS

⚙️ 아키텍처

🗂️ 프로젝트 파일 구조

FrontEnd

📦src
 ┣ 📂Api
 ┃ ┣ 📜Api.js
 ┃ ┗ 📜pencil.png
 ┣ 📂assets
 ┃ ┣ 📜books.png
 ┃ ┣ 📜books3.png
 ┃ ┣ 📜cash.png
 ┃ ┣ 📜coffee.png
 ┃ ┣ 📜donut.png
 ┃ ┣ 📜gym.png
 ┃ ┣ 📜location.png
 ┃ ┣ 📜login.png
 ┃ ┣ 📜paperplane.png
 ┃ ┣ 📜pencil.png
 ┃ ┣ 📜pencil2.png
 ┃ ┣ 📜sad.png
 ┃ ┣ 📜sea.gif
 ┃ ┣ 📜spot.png
 ┃ ┗ 📜verify.png
 ┣ 📂components
 ┃ ┣ 📂budget
 ┃ ┃ ┣ 📜Popular.js
 ┃ ┃ ┣ 📜Popular.module.css
 ┃ ┃ ┣ 📜Report.js
 ┃ ┃ ┗ 📜Report.module.css
 ┃ ┣ 📂cash
 ┃ ┃ ┣ 📜CashorOCR.js
 ┃ ┃ ┣ 📜CashorOCR.module.css
 ┃ ┃ ┣ 📜CreateInPerson.js
 ┃ ┃ ┗ 📜CreateInPerson.module.css
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📜Header.js
 ┃ ┃ ┗ 📜Header.module.css
 ┃ ┣ 📂login
 ┃ ┃ ┣ 📜TransferOne.js
 ┃ ┃ ┗ 📜TransferOne.module.css
 ┃ ┣ 📂main
 ┃ ┃ ┣ 📜BalanceSchedule.js
 ┃ ┃ ┣ 📜BalanceSchedule.module.css
 ┃ ┃ ┣ 📜Insurance.js
 ┃ ┃ ┣ 📜Insurance.module.css
 ┃ ┃ ┣ 📜PortBanner.js
 ┃ ┃ ┣ 📜PortBanner.module.css
 ┃ ┃ ┣ 📜shinhan.png
 ┃ ┃ ┗ 📜trip1.png
 ┃ ┣ 📂plan
 ┃ ┃ ┣ 📜backup.js
 ┃ ┃ ┣ 📜Back_Calendar.js
 ┃ ┃ ┣ 📜Back_SelectedDate.js
 ┃ ┃ ┣ 📜bbackup.js
 ┃ ┃ ┣ 📜Calendar.css
 ┃ ┃ ┣ 📜Calendar.js
 ┃ ┃ ┣ 📜DateList.js
 ┃ ┃ ┣ 📜DateList.module.css
 ┃ ┃ ┣ 📜SelectedDate.js
 ┃ ┃ ┣ 📜SelectedDate.module.css
 ┃ ┃ ┗ 📜TestCalendar.js
 ┃ ┣ 📂planBudget
 ┃ ┃ ┣ 📜CreateBudget.js
 ┃ ┃ ┣ 📜CreateBudget.module.css
 ┃ ┃ ┣ 📜EditBudget.js
 ┃ ┃ ┗ 📜UpdateBudget.module.css
 ┃ ┣ 📂popular
 ┃ ┃ ┣ 📜BackUpPopular.js
 ┃ ┃ ┣ 📜PopularSpots.js
 ┃ ┃ ┗ 📜PopularSpots.module.css
 ┃ ┗ 📂portfolio
 ┃ ┃ ┣ 📜Analysis.js
 ┃ ┃ ┣ 📜Analysis.module.css
 ┃ ┃ ┣ 📜Map.css
 ┃ ┃ ┣ 📜Map.js
 ┃ ┃ ┣ 📜Map.module.css
 ┃ ┃ ┣ 📜PortList.js
 ┃ ┃ ┗ 📜PortList.module.css
 ┣ 📂lib
 ┃ ┣ 📜PageBlock.js
 ┃ ┣ 📜PrivateRoute.js
 ┃ ┗ 📜PublicRoute.js
 ┣ 📂pages
 ┃ ┣ 📜Budget.js
 ┃ ┣ 📜Budget.module.css
 ┃ ┣ 📜Cash.js
 ┃ ┣ 📜Cash.module.css
 ┃ ┣ 📜CashCreate.js
 ┃ ┣ 📜CashCreate.module.css
 ┃ ┣ 📜Dutch.js
 ┃ ┣ 📜Dutch.module.css
 ┃ ┣ 📜Login.js
 ┃ ┣ 📜Login.module.css
 ┃ ┣ 📜login.png
 ┃ ┣ 📜MainPage.js
 ┃ ┣ 📜MainPage.module.css
 ┃ ┣ 📜Plan.js
 ┃ ┣ 📜Plan.module.css
 ┃ ┣ 📜PlanBudget.js
 ┃ ┣ 📜PlanBudget.module.css
 ┃ ┣ 📜PlanBudgetDetail.js
 ┃ ┣ 📜PlanDetail.js
 ┃ ┣ 📜PlanDetail.module.css
 ┃ ┣ 📜PopularPage.js
 ┃ ┣ 📜PopularPage.module.css
 ┃ ┣ 📜PortfolioDetail.js
 ┃ ┣ 📜PortfolioDetail.module.css
 ┃ ┣ 📜PortfolioPage.js
 ┃ ┣ 📜PortfolioPage.module.css
 ┃ ┣ 📜Transaction.css
 ┃ ┣ 📜Transaction.js
 ┃ ┣ 📜Transaction.module.css
 ┃ ┣ 📜TransactionDetail.js
 ┃ ┣ 📜TransactionDetail.module.css
 ┃ ┗ 📜UpdateBudget.js
 ┣ 📜App.css
 ┣ 📜App.js
 ┣ 📜App.test.js
 ┣ 📜index.css
 ┣ 📜index.js
 ┣ 📜logo.svg
 ┣ 📜reportWebVitals.js
 ┣ 📜service-worker.js
 ┣ 📜serviceWorkerRegistration.js
 ┣ 📜setupProxy.js
 ┗ 📜setupTests.js

🖥️ 서비스 구현 화면

1. 랜딩 페이지 로그인

1.1 로그인 페이지

예금주 이름과 계좌번호를 통해서 로그인

1.2 본인인증

본인 계좌에 1원 송금을 통해서 본인 인증을 진행

2. 메인화면

(좌) 등록된 여행 일정이 없을 때 / (우) 등록된 여행 일정이 있을 때

3. 여행 일정 등록

3.1 여행 날짜 등록

여행 일정 날짜를 등록

3.2 여행 예산 등록

일자별로 카테고리와 예상 예산 금액을 입력하여 예산을 등록

4. 여행 예산 분석

4.1 여행 예산 분석

오늘 날짜의 여행 예산에서 사용 금액과 카테고리 별 퍼센트를 표시

5. 인기 장소 추천

5.1 인기 장소 추천

현재 내 위치를 GPS로 파악해 인근 지역 내 다른 사용자들의 결제 내역이 가장 많은 순으로 표시 (카테고리별 분류)

6. 거래 내역 확인 및 정산

6.1 거래 내역

여행 중 사용한 카드/현금 거래 내역 표시

6.2. 현금 기록하기

현금의 경우 직접 기록하기 가능

6.3. 거래 상세내역

거래 내역 선택 시 뜨는 상세 내역

6.4 정산

정산이 필요한 내역을 체크하여 이미지 저장 형태로 다른 사람에게 공유

7. 포트폴리오

7.1 포트폴리오 메인

(좌) 끝마친 여행이 없을 때 / (우) 끝마친 여행이 있을 때

7.2 포트폴리오

여행을 마친 후, 위치별 결제 내역과 그에 따른 이동 경로 순서대로 지도에 표시

👥 팀원 소개

Name	심규렬	김성인	공정민	이가영
Profile
Position	Backend	Backend	Frontend	Frontend
Position	Server 구축 인기장소 조회 API 여행 계획 API	유저 관리 API 예산 사용 내역 API 포트폴리오 API	여행 계획 예산 설정 UX/UI	메인 페이지 예산 사용 내역 포트폴리오
Git	GitHub	GitHub	GitHub	GitHub

SawSimE/SolTrip