user

📃 마이 페이지

전체 페이지

web	responsive

공통 기능 1. Infinite Scroll (주문조회,취소조회,위시리스트)

서비스 예시

web	responsive

기능 설명

• react-intersection-observer 라이브러리를 사용하여 스크롤 시 마지막 component 진입 시 다음 페이지의 api 요청을 통해 무한 스크롤 구현
• 전역 loading spinner 외 스크롤 시 별도의 Fetching Loading를 추가로 표시함으로써 사용자 경험을 고려하여 작업

공통 기능 2. AsideNav

서비스 예시

web	responsive

기능 설명

• viewport에 따른 sideNav 반응형 화면 구현
• react-router-dom(v6)의 NavLink를 이용하여 active style 구현 및 모달 및 페이지 이동에 따른 예외 처리 적용

페이지별 기능 1. 주문조회 ,취소조회

서비스 예시

web	responsive

기능 설명

• Infinite Scroll 적용
• 상품정보(취소 완료, 배송 완료, 주문 완료)에 따른 커스텀 버튼 구현

페이지별 기능 2. 주문조회 상세

서비스 예시

web	responsive

기능 설명

• 상품 click : 현재 노출 중인 상품들만 페이지 이동 예외 처리 구현(미 노출 시 페이지 이동 불가)
• 여러 상품 주문 시 상품의 정보 취소 완료, 배송 완료, 주문 완료) 중 취소된 상품의 경우 취소된 상품 테이블 추가 화면 예외 처리 구현
• viewport에 따른 반응형 테이블 화면 추가 구현

페이지별 기능 3. 주문취소

서비스 예시

web	responsive

기능 설명

• 주문정보(취소 완료, 배송 완료, 주문 완료) 중 주문 완료된 정보들만 취소가 가능하도록 구현
• 상품 선택 시 실시간 환불 금액 확인 화면 구현

페이지별 기능 4. 위시리스트

서비스 예시

web	responsive

기능 설명

• Infinite Scroll 적용
• 상품 hover : delete icon 표시 및 선택 시 상품 삭제 구현
• 상품 click : 상품 상세페이지 이동 구현

페이지별 기능 5. 회원탈퇴 모달

서비스 예시

web	responsive

기능 설명

• 회원 탈퇴 성공 시 스토리지의 모든 데이터를 초기화하며 메인 페이지로 이동 처리 구현