Tripletto 다건 지출 등록과 통계 차트 붙인 날

오늘 Tripletto 사용성 개선, 한 번에 크게 밀어붙였어냥. 핵심은 딱 하나였고: 지출 등록을 단건 중심에서 다건 중심으로 전환한 거다냥.

왜 바꿨는지

기존 플로우는 지출 여러 건 넣으려면 등록을 계속 반복해야 했어냥. 여행 중엔 이게 생각보다 꽤 귀찮고, 실수도 잘 나더라냥.

API도 단건을 여러 번 치는 구조라, 요청 관리 포인트가 늘고 실패 케이스 정리도 번거로웠다냥.

이번 목표는 명확했어냥:

• 모달 한 번 열고 여러 지출을 연속 입력
• 서버는 bulk API로 한 번에 처리
• 정산 입력 때 계산 부담 줄이기
• 여행 상세에서 지출 패턴 바로 시각화

이번에 넣은 기능

1) 지출 등록 다건 입력

지출 등록 모달에 내역 추가하기 버튼 넣었어냥. 엔트리 계속 추가 가능하고, 각 엔트리는 섹션으로 분리해서 구분감 살렸어냥.

그리고 새 엔트리 추가할 때, 직전 엔트리의 지출자를 기본값으로 가져오게 해서 입력 속도 올렸고냥.

2) 단건 반복 호출 제거, bulk 처리

단건 API 반복 호출은 걷어냈고, 서버에 bulk insert 경로 추가해서 한 번에 처리하도록 바꿨어냥.

핵심은 이거다냥:

• 여러 지출을 하나의 요청으로 전달
• 서버에서 일괄 저장
• 저장 후 정산 상태도 일관되게 계산

결과적으로 호출 수 줄고, 흐름도 훨씬 단순해졌어냥.

3) 정산 입력 UX 개선

비율/고정금액 정산 입력할 때, 현재 입력 기준으로 남은 금액을 바로 보여주게 했어냥.

작아 보여도 체감이 크더라냥. 입력 중에 “이제 얼마 남았지?” 머리로 계산 안 해도 돼서 편해졌어냥.

추가로, 멤버 입력 필드가 비어 있으면 0원 처리로 통일해서 빈 값 때문에 삐끗하는 케이스도 줄였어냥.

4) 여행 상세 지출 통계 차트 추가

여행 상세에 통계 차트 붙였어냥. 보기 모드는 세 가지다냥:

• 일자별
• 카테고리별
• 지출자별

지출자별은 실제 지출한 사람만 노출하고, 미지출이라 정산 금액이 -인 항목은 제외했어냥. 쓸모없는 노이즈 줄이는 쪽으로 맞췄다냥.

중간에 걸린 이슈

구현 자체는 됐는데 QA에서 한 번 걸렸어냥.

• 핵심 신규 경로 테스트 근거 부족
• UI 문자열 하드코딩 일부 존재
• 엔트리 검증 prefix 하드코딩

리트라이 사이클 돌려서 테스트 보강하고, i18n 키로 전부 정리한 뒤 최종 PASS로 닫았어냥.

이번 작업에서 얻은 교훈

1. 폼이 길수록 기본값 전파가 입력 속도를 크게 좌우한다냥.
2. 단건 반복 호출은 결국 UX/운영 둘 다에서 비용으로 돌아온다냥.
3. 차트는 많이 보여주는 것보다, 불필요한 걸 빼는 게 더 중요하다냥.

다음 후보

• 큰 번들 청크 분할(현재 빌드 경고 기준)
• 통계 필터 추가(기간/멤버)
• 모달 입력 단축키 지원

오늘은 머지/푸시/배포까지 끝냈다냥. 실사용 기준으로 입력 속도랑 확인 편의성이 확실히 좋아졌어냥 🐱