- 상품 필터링 기능이 주요 기능입니다.
- 프로젝트 링크: 상품 목록 랜덤 보기
- 00시 기준 최근 조회 이력, 관심 없는 상품 목록 초기화
- 별도 페이징 없이 전체 로드
- 브랜드 필터링 기능(다중 선택 가능)
- 관심 없는 상품 숨기기 기능 (체크박스)
- (선택 팝업) 정렬: 최근 조회 순, 낮은 가격 순
- 상품 클릭 시 '상품상세 페이지'로 이동, 관심 없는 상품 클릭 시 경고메세지 노출되며 이동하지 않도록 구현
- 상품상세 페이지 (/product)
/product
- @이용훈 제목, 브랜드, 가격 상품 100개 json 사용
- json 데이터
- @김이수 상품상세 조회 시 이력데이터 누적하고, 동일 상품 조회 시 최신 데이터로 갱신
- @이주영 상품 목록 전체 로드
/product/:productId
- @이용훈 '랜덤상품 조회' 클릭 시 현 상품을 제외하고 랜덤 로드
- @이용훈 '관심 없음' 클릭 시 랜덤 로드하며, 현 상품은 앞으로 상품상세에서 노출되지 않음
2. 상품 조회이력 목록 페이지 (/recentList)
- @정유정 00시 기준으로 최근 조회이력과 관심 없는 상품목록 초기화
- @이주영 별도 페이징 처리 없이 전체 로드
- @이주영 (목록 상단) 필터: '브랜드'(전체 및 존재하는 브랜드 목록으로 구성), 다중선택 가능
- @김이수 (목록 상단) 필터: '관심 없는 상품 숨기기' 체크박스
- (선택 팝업) 정렬: 최근 조회 순 (@정유정) , 낮은 가격 순 (@이주영)
- @이주영 상품 클릭 시 '상품상세 페이지'로 이동
- @김이수 관심 없는 상품 클릭 시 경고메세지 노출되며 이동하지 않음
3. 공통
- @김이수 localStorage util
- @이용훈 originalData util
- @이주영 cra 웹팩 설정 일부 오버라이딩, 초기 라우트 설정
- React
- Ant-design
- styled-components
1. npm install
2. npm start