인증 요청 중복 방지
여러 API에서 동시에 401이 발생했을 때 Refresh 요청을 하나의 Promise로 공유했습니다. 갱신이 끝나면 실패한 요청을 한 번만 재시도하도록 처리했습니다.
CASE / 04
개인 풀스택 프로젝트
TripFlow
여행 일정, 장소, 동행자와 경비 정산을 한곳에서 관리하는 협업형 여행 플래너
기획 · UI/UX · 프런트엔드 · 백엔드 API · DB 설계 · 테스트 · 배포2026.09
함께 계획하고,
함께 정산하는 여행.
여행 계획 과정에서 장소, 일정과 경비를 여러 서비스에 나눠 관리해야 하는 불편을 줄이기 위해 개발했습니다. 여러 사용자가 하나의 여행에 참여해 각자의 권한에 따라 일정을 편집하고 경비를 정산할 수 있습니다.
Next.js와 Express, PostgreSQL 기반의 여행 협업 서비스입니다. 여행 생성부터 날짜별 일정, 장소와 지도, 동행자 초대, 경비 분담과 최종 정산까지 실제 API와 데이터베이스로 연결했습니다. JWT 인증, 역할별 접근 권한, 트랜잭션과 반응형 UI를 직접 설계하고 구현했습니다.
기획부터 배포까지.
기획 · UI/UX · 프런트엔드 · 백엔드 API · DB 설계 · 테스트 · 배포
여행 준비부터
마지막 정산까지.
- 5단계 여행 생성과 여행 기간별 DAY 자동 생성
- JWT와 Refresh Token 기반 로그인 유지
- owner/editor/viewer 역할별 권한 관리
- 장소 저장과 지도 마커 연동
- 날짜별 일정 CRUD와 드래그 앤 드롭 순서 변경
- 이메일 기반 동행자 초대
- 다중 통화 경비와 사용자별 분담
- 사용자별 잔액과 최소 송금 정산
- 정산 완료와 취소 이력 관리
- PC·태블릿·모바일 반응형 UI
데이터와 권한을
안전하게 연결하기.
여행 생성 데이터 보호
여행, 소유자와 날짜별 DAY 생성 작업을 PostgreSQL 트랜잭션으로 묶었습니다. 중간 오류가 발생하면 전체 작업을 ROLLBACK해 일부 데이터만 저장되는 상황을 막았습니다.
날짜 변경 충돌 처리
여행 기간 축소로 일정이 등록된 DAY가 삭제될 때 즉시 변경하지 않고 409 응답과 확인 절차를 제공했습니다. 의도하지 않은 일정 삭제를 막기 위한 처리입니다.
경비 정산 계산
결제 금액과 분담 금액을 SQL CTE로 집계하고, 받을 사용자와 보낼 사용자를 나눠 필요한 송금 목록을 계산했습니다. 소수점 오차를 막기 위해 금액을 최소 단위의 정수로 변환해 계산했습니다.
역할별 서버 권한 검사
프런트엔드의 버튼 표시와 함께 모든 API에서 active 멤버 여부와 owner/editor/viewer 역할을 검사했습니다. 화면을 거치지 않는 요청에도 같은 접근 권한을 적용했습니다.
사용자 흐름과
실패 상황을 확인했습니다.
- 사용자 기능 API 38개 연결
- 백엔드 HTTP 검사 309건 통과
- 백엔드 단위 테스트 34개 통과
- 프런트엔드와 백엔드 typecheck, lint, build 통과
- 1440px, 768px, 390px 반응형 브라우저 검사
- 회원가입부터 여행 생성, 일정, 경비 정산과 로그아웃까지 실제 API 사용자 흐름 검사
- DB 오류 발생 시 트랜잭션 ROLLBACK 검사
TripFlow 둘러보기.
공개 랜딩 페이지에서 캡처한 기능 소개 화면입니다.
