미션 4 상품 상세 - API 연동 심화, 테스트

✅ 0단계 - 기본 코드 준비

• 저장소를 포크하고 클론하기
• 실습 환경을 구축하기
• 기능을 구현하기 전, README에 구현할 기능 목록을 정리해 추가하기
• Git의 커밋 단위는 앞 단계에서 README.md에 정리한 기능 목록 단위로 추가하기
• AngularJS Git Commit Message Conventions을 참고해 커밋 메시지를 작성하기

---

✅ 1단계 - React Query 적용

• React Query를 사용하여 API 사용 방식과 사용자 경험 고도화 하기
• 기존에 작성했던 API를 React Query를 이용해서 리팩터링 (GET, POST 모두)

---

✅ 2단계 - 상품 상세 페이지 API

• 상품 상세 페이지
  • 상품 상세 페이지를 구현하기
  • API 통신의 최적화, 선언적 구조, react query 등을 활용하여 기능 구현하기
  • 상품 상세 페이지에서 사용되는 API를 확인하여 모두 사용하기
  • 상품 관심 등록 버튼 클릭 시 낙관적 업데이트를 통해 상품 관심 등록 수를 변경하기 (실제 API 반영은 없기 때문에, 새로고침 하면 사라지는 것이 정상)
• ErrorBoundary와 Suspense를 사용하여 코드 구조 리팩터링 (단, ErrorBoundary는 관련 라이브러리를 사용하지 않고 구현)

---

✅ 3단계 - 테스트 코드 작성하기

• 상황에 맞는 테스트 코드 방식을 통해 테스트 코드 작성하기
• Github Action을 통해 매 PR에서 테스트 코드가 실행되도록 하기
• src/components에 있는 Form Field와 Typography에 대한 테스트 코드를 작성하기
• 로그인 페이지에 대한 테스트 시나리오를 작성하고 테스트 코드 작성하기
• MSW를 사용하여 선물하기 홈 페이지의 실시간 급상승 선물랭킹 섹션의 테스트 코드 작성하기
• github action을 사용하여 PR 요청 및 Main 브랜치 머지 시 테스트 코드가 실행되게 하기