[클린코드 리액트 3기 조용준] 커머스 미션

[bytrustu]

안녕하세요. 인성님!
최종 미션도 마저 PR 드립니다. 🙇

구현 링크

👀 데모사이트
🌠 스토리북 (패키지 사용 방법 포함)
🔖 near-payments 패키지 배포

아직 미션2 PR이 머지되지 않아서 커밋이 함께 반영되었네요.
feat: Carousel 컴포넌트 추가 부터 마지막 커밋까지 최종미션 추가한 코드입니다!
참고부탁드립니다. 🙂

KakaoTalk_Video_2024-04-22-21-20-17.mp4

---

페이먼츠 패키지 활용 했습니다.

• 최종 미션에서는 @jjiyeon 님의 페이먼츠 패키지를 활용했어요.
  myfirstpackage-payments

• 페이먼츠 패키지에서 등록한 카드 리스트 정보를 불러오지 못하는 이슈가 있어요.
  패키지의 카드 완료 Form에 접근했을때, 별칭을 제외한 카드 정보를 불러올 수 있었어요.
  그 데이터를 기반으로 localStorage에 저장하여, 카드 리스트에 반영하도록 진행했습니다.
  관련 이슈는 지연님께 전달드렸고, 확인 중입니다. 😁

• 결제를 완료하면, 주문 목록에서 결제 정보를 확인할 수 있습니다.
  장바구니 → 결제 완료 → 주문 목록에서 주문 상세를 통해 결제 내역 확인

Near Payments 패키지의 배포 파이프라인을 구축했습니다.

• tag를 등록하면 등록한 버전으로 npm에 배포되도록 구현했습니다.
  https://github.com/bytrustu/near-payments/releases/tag/v0.2.2
  https://github.com/bytrustu/near-payments/actions/runs/8786270289

필수 요구사항

• 페이먼츠 Step1~Step3 요구사항 완료
• 장바구니 Step1~Step2 요구사항 완료
• NPM 출시 (Fork X, 개인 저장소를 기반)
• 라이브러리 사용 방법이 담긴 스토리북 문서 배포

선택 요구사항

• Semantic Versioning 적용
• CI/CD & Github Flow 연동 자동 배포

주문/결제

• 주문할 상품들의 정보가 보여진다.
• 총 결제금액을 보여준다.
• 결제하기 버튼을 클릭하면, confirm 메시지가 보여진다.
  • 확인 버튼을 누르면, 주문 목록페이지로 이동한다.

주문목록

• 주문 정보들이 보여진다.
• 장바구니 버튼을 클릭하면, 해당 상품이 장바구니에 담기고 장바구니 이동 선택 모달이 보여진다.
  • 장바구니 이동 버튼을 누르면 장바구니 페이지로 이동한다.