jtwjs / megaptera_shop Goto Github PK

📌 개요

• 상품 목록, 상세 페이지, 장바구니 페이지 E2E 테스트 작성하기

💻 기능 설명

• Cypress 사용

✅ 참고 사항

📷 스크린 샷

📌 개요

Cypress 테스트가 CI에서 실패하는 이슈 해결

💻 기능 설명

✅ 참고 사항

📷 스크린 샷

📌 개요

💻 기능 설명

✅ 참고 사항

📷 스크린 샷

📌 개요

💻 기능 설명

• Something Done

✅ 참고 사항

📷 스크린 샷

📌 개요

💻 기능 설명

✅ 참고 사항

📷 스크린 샷

📌 개요

• Parcel 절대 경로 별칭 적용

"@/*": ["./src/*"]

💻 기능 설명

• tsconfig paths 설정
• parcel-resolver-tspaths 패키지 추가

✅ 참고 사항

📷 스크린 샷

📌 개요

포트원 결제하기 연동

💻 기능 설명

✅ 참고 사항

📷 스크린 샷

📌 개요

쇼핑 데모 앱 개발 환경 구축

💻 기능 설명

• ESLint & Prettier
• Parcel
• Typescript
• React
• Husky
• Jest
• Cypress
• Github Template

✅ 참고 사항

해당 기능 개발과 관련된 이슈나, 자료를 적어주세요.

📷 스크린 샷

📌 개요

테스팅 라이브러리 관련 설정을 추가합니다.

💻 기능 설명

• @testing-libarary/react, @testing-libarary/jest-dom, @testing-library/user-event 설치
• setupTests.ts

✅ 참고 사항

📷 스크린 샷

📌 개요

msw 환경 세팅

💻 기능 설명

✅ 참고 사항

📷 스크린 샷

📌 개요

장바구니에 담긴 상품들을 표시하는 화면을 제작해보자

💻 기능 설명

• 헤더 부분에 장바구니 페이지로 이동되는 링크가 제공된다.
• 사용자가 장바구니에 담은 상품들을 볼 수 있다.
• 장바구니가 비어있는 경우 '장바구니가 비었습니다' 텍스트가 노출된다.
• 각 상품 별로 리스팅된다.
• 상품의 옵션이 다른 경우 별도로 리스팅된다.
• 상품별로 이름, 옵션, 가격, 수량, 총 가격이 표시된다.
• 장바구니에 담긴 상품의 총 합계 금액이 표시된다.

✅ 참고 사항

📷 스크린 샷

📌 개요

상품 상세 페이지 개발

💻 기능 설명

• 상품 이름, 이미지, 옵션, 설명이 노출된다.
• 장바구니에 상품을 담을 수 있는 버튼을 제공한다.
• 사용자는 상품 상세페이지에서 상품 옵션과 수량을 선택하여 장바구니에 담을 수 있다.

✅ 참고 사항

📷 스크린 샷

📌 개요

상품 목록 페이지 개발

💻 기능 설명

• 카테고리 별로 상품 목록이 보여져야 한다.
• 카테고리를 선택하지 않으면 전체 상품이 노출된다.
• 각 상품은 상품명과 가격이 노출된다.
• 상품을 클릭하면 상품 상세 페이지로 넘어간다.

✅ 참고 사항

📷 스크린 샷

📌 개요

pr 생성시 테스트(jest, cypress) 자동화 설정

💻 기능 설명

✅ 참고 사항

📷 스크린 샷

📌 개요

• 레이아웃 컴포넌트 구현
• setup react-query
• setup emotion
• msw mock api 작성
• 카테고리 조회 API 연동

💻 기능 설명

• 상품별 카테고리가 헤더에 표시된다.
• 카테고리 버튼을 클릭하면 해당하는 카테고리 ID가 쿼리 파라미터에 추가된다.
• 카테고리 버튼을 클릭하면 해당하는 상품 목록들이 보여진다.

✅ 참고 사항

📷 스크린 샷