키로그 KeyLog

은행 기반 여행 모바일 어플리케이션 • 프론트엔드 repository

1. 서비스 소개

• motif 하나카드 트래블로그 서비스
  

카드 결제 내역을 여행 기록으로 보여주고 여행 관광지에 있는 포인트를 줍는 등
여행 중 다양한 이벤트와 여행 기록 확인 가능

안드로이드에서 실행할 수 있는 앱으로 구현

개발 기간 : 2023.07 ~ 2023.08

2. 사용 스택

3. 작동방식 및 아키텍처 구조

• 작동방식

• 아키텍처 구조

4. 페이지 뷰 및 구현 기능

• Figma 링크

  언제 어디서나 앱을 통해 각 나라의 화폐로 환전하여 바로 카드를 사용할 수 있고, 여행 계획을 세울 수 있으며 결제 내역을 한눈에 볼 수 있음

  
  

회원가입 및 휴대폰 인증 페이지

• 이름, 주민번호, 휴대폰번호 입력을 통해 회원가입
  
• 휴대폰번호 본인 인증을 통해 회원가입 완료

비밀번호 설정 페이지

• 회원가입 후 비밀번호 6자리 설정, 재확인
• 패턴도 등록 가능(선택사항)

메인화면

• 메인 화면에서 키머니 환전, 게좌 연결, 키머니 줍기, 여행 계획하기, 키머니 확인 페이지로 이동
• 당일 환율 체크 가능

결제 페이지

• 시연을 위한 결제 페이지 구현
• 실제 앱 구동 시에는 카드 결제 내역을 자동으로 받아와 카테고리별로 저장

계좌 연결 페이지

• 오픈뱅킹에서 계좌를 연결하듯이 외부 계좌 연결
• 해당 계좌에 맞는 비밀번호 입력 후 연결

키머니 환전 페이지

• 연결한 원화 계좌에서 원하는 외화로 환전

• 실시간 환율 API를 받아와 그에 맞는 환율로 환전됨

• 외화 -> 원화로 환전도 가능

여행 계획 정보 작성 및 경비 계획 페이지

• 여행할 날짜, 여행지, 이름을 설정
• 각 카테고리별 경비 계획 설정
• 카드로 결제하면 경비에서 쓴 가격이 차감됨

키머니 줍기 페이지

• 여행 시 본인 위치에서 100m 이내인 마커를 주울 수 있음
• 주운 마커는 각 화폐 단위 키머니로 합산됨

키머니 확인 페이지

• 각 화폐 단위별 키머니 확인
• 사용 내역을 확인할 수 있고, 메모 작성 가능

5. 강점

1. react query를 사용하여 간단하고 직관적인 API 작성
2. recoil의 'atom', 'selector'를 활용한 상태 관리
3. 다중 API 일괄 처리
4. 환전 기능 Debounce

6. 협업 tool

Notion	Figma	Github

7. 팀원

Leader • Front-end	Front-end	Front-end
이수창	서예진	이현주
eternalclash	Jordizzin	hhyunjooo