[#56] Feat/56/영수증업로드 상세페이지

[LMS10]

❓이슈

• close Feat: 영수증업로드/상세페이지 구현 #56

📝 Description

영수증 업로드 페이지와 상세 페이지를 구현했습니다.

영수증 업로드 페이지

3단계 흐름(idle → loading → done)으로 구성했습니다.

idle/ready: 드래그&드롭 또는 클릭으로 이미지 선택. 중복 영수증이면 duplicate 필드를 감지해 done 단계로 넘어가지 않고 에러 메시지를 표시합니다.

loading: AI 분석 중 애니메이션 프로그레스 바를 표시합니다.

done: 분석 결과를 ReceiptPayInfo, ReceiptItemInfo로 표시하며 필드 편집이 가능합니다.

• 가맹점/결제금액: 인라인 텍스트 입력
• 결제금액: 천단위 콤마 자동 포맷, 전송 시 숫자로 변환
• 결제일: react-datepicker 적용
• 편집 중 저장 버튼 클릭 시 useImperativeHandle로 현재 입력값을 수집
• 저장: ConfirmModal → PUT(수정) 성공 시 PATCH(확정) 순서로 API 호출, 단계별 에러 토스트 처리

영수증 상세 페이지

업로드 페이지와 동일한 레이아웃(이미지 + 오른쪽 패널)을 사용합니다.

• 스켈레톤 로딩 UI를 실제 컴포넌트 클래스 기준으로 구성
• 관리자: 영수증 다운로드 버튼
• 본인 + WAITING 상태일 때만 삭제 버튼 노출, ConfirmModal 후 삭제 API 호출

공통 개선

• ReceiptPayInfo: forwardRef + useImperativeHandle로 편집값 외부 노출
• ResultChip: 다중 칩 flex-wrap gap-1.5 적용
• react-datepicker globals.css 커스텀 스타일

영수증 업로드 과정

멤버 : 업로드 후 대기 중 영수증 상세페이지

관리자 : 대기 중 영수증 상세페이지

반려된 영수증

승인된 영수증

🌀 PR Type

어떤 변경 사항이 있나요?

• 새로운 기능 추가
• 버그 수정
• CSS 등 사용자 UI 디자인 변경
• 코드에 영향을 주지 않는 변경사항 (오타 수정, 탭 사이즈 변경, 변수명 변경)
• 코드 리팩토링
• 주석 추가 및 수정
• 문서 수정
• 테스트 추가, 테스트 리팩토링
• 빌드 부분 혹은 패키지 매니저 수정
• 파일 혹은 폴더명 수정
• 파일 혹은 폴더 삭제

✅ Checklist

PR Checklist

PR이 다음 요구 사항을 충족하는지 확인하세요.

• Branch Convention 확인

  feat/ 기능 구현, fix/ 버그 수정, refactor/ 개선

• Base Branch 확인
• 커밋 메시지 컨벤션 준수
• 적절한 Label 지정
• Assignee 및 Reviewer 지정

Test Checklist

• 로컬 작동 확인

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
remate	Ready	Preview, Comment	May 25, 2026 10:12am

[minzx23]

따봉 열개 드립니다