주문 내역과 상세
최근 6개월의 주문 내역을 무한 스크롤로 불러옵니다. 최초 로딩과 다음 페이지 로딩, 내역이 없는 상태는 각각 나눴습니다. 주문 카드와 스켈레톤의 크기를 맞춰 데이터를 불러오는 동안 화면이 크게 흔들리지 않도록 했습니다.
주문 상세에서는 결제·준비·완료·픽업 단계가 한눈에 보이도록 구성했습니다. 취소 주문은 별도 화면으로 구분했습니다. 결제 금액과 할인, 선불카드 사용액, 스탬프 적립 여부는 주문 정보에 따라 필요한 항목만 보여줬습니다.
선불카드 관리
보유 카드와 이용내역 조회부터 바코드, 등록, 충전, 이름 변경, 삭제, 잔액 이전까지 구현했습니다. 이용내역은 전체·차감·충전으로 구분했습니다. 6개월 이내의 충전 건은 취소할 수 있도록 구성했습니다.
충전과 등록은 여러 화면을 오가는 작업이라 필요한 상태를 Context와 훅으로 분리했습니다. 카드 정보가 바뀐 뒤에는 React Query의 쿼리 키를 기준으로 관련 데이터를 다시 불러오도록 정리했습니다.
선물함과 공통 UI
선불카드 선물함에는 최근 1년의 목록과 무한 스크롤, 빈 화면, 스켈레톤을 적용했습니다. 상세 화면에서는 카드 정보와 바코드, 메시지, 유의사항을 확인합니다. 받은 카드는 바로 등록할 수 있습니다.
선물 개수는 탭의 배지로 표시했습니다. 선불카드 캐러셀은 Compound Component 패턴으로 만들어 스크롤 스냅, 인디케이터, 커스텀 도트를 조합할 수 있도록 했습니다. 사용 예시는 Storybook에 정리했습니다.