상태를 Redux로 관리하지 않고 useState를 사용해 진행했습니다. localStorage를 이용해 북마크 테이터를 관리합니다.
지금까지 배웠던 걸 토대로 구현, 깃헙 공부에 초점 두었습니다. Redux 좀 더 공부하고 리팩토링할 예정입니다.
상품을 API로 받아 오는 방식입니다.
- 메인 페이지
- 상품 리스트 페이지
- 북마크 리스트 페이지
총 3개의 페이지로 구성되어 있습니다.
상품, 북마크 상품이 총 4개씩 보여지고 있습니다.
- 로고
- 클릭 시 메인 페이지로 이동합니다.
- 햄버거 메뉴
- [상품 리스트 페이지] 클릭 시 상품 리스트 페이지로 이동합니다.
- [북마크 리스트 페이지] 클릭 시 북마크 리스트 페이지로 이동합니다.
- 하단 좌측의 북마크 버튼으로도 북마크 상품을 추가/삭제할 수 있습니다.
상품 리스트 전체가 보여지는 페이지입니다. 상단에 탭메뉴가 있어 원하는 타입별로 확인이 가능합니다.
- 상단 탭 메뉴로 원하는 타입별로 확인이 가능합니다.
- 북마크 상품도 같이 노출 됩니다.
상품 하단에 위치한 별모양 버튼 클릭 시 북마크 리스트에 추가 됩니다. 상품 리스트 페이지와 동일하게 타입별로 확인이 가능합니다.
- 북마크 상품만 추가 됩니다.
- 북마크 버튼 클릭 시 해당 페이지에서 삭제 됩니다.
- 상단 탭 메뉴로 원하는 타입별로 확인이 가능합니다.