SEB_FE_44/과제

[coz-shopping] 완성

언젠간코딩잘함 2023. 5. 18. 21:01

완성

 

https://github.com/Jiwonp12/fe-sprint-coz-shopping

 

GitHub - Jiwonp12/fe-sprint-coz-shopping

Contribute to Jiwonp12/fe-sprint-coz-shopping development by creating an account on GitHub.

github.com


폴더구조

fe-sprint-coz-shopping
│
├─ package-lock.json
├─ package.json
├─ public
│  ├─ favicon.ico
│  ├─ index.html
│  ├─ manifest.json
│  └─ robots.txt
├─ README.md
└─ src
   ├─ App.css
   ├─ App.js
   ├─ assets
   │  ├─ beesad.png
   │  ├─ hamburg.png
   │  ├─ img1.png
   │  ├─ img2.png
   │  ├─ img3.png
   │  ├─ img4.png
   │  ├─ img5.png
   │  └─ logo.png
   ├─ components
   │  ├─ items
   │  │  ├─ Category.js
   │  │  ├─ Category.module.css
   │  │  ├─ Error.js
   │  │  ├─ Error.module.css
   │  │  ├─ Item.js
   │  │  ├─ Item.module.css
   │  │  ├─ MainBookmarkItems.js
   │  │  ├─ MainBookmarkItems.module.css
   │  │  ├─ MainListItems.js
   │  │  └─ MainListItems.module.css
   │  └─ UI
   │     ├─ Dropdown.js
   │     ├─ Dropdown.module.css
   │     ├─ Modal.js
   │     ├─ Modal.module.css
   │     ├─ Notify.js
   │     └─ Notify.module.css
   ├─ Footer.js
   ├─ Footer.module.css
   ├─ Header.js
   ├─ Header.module.css
   ├─ index.css
   ├─ index.js
   └─ pages
      ├─ BookmarkPage.js
      ├─ BookmarkPage.module.css
      ├─ ItemListPage.js
      ├─ ItemListPage.module.css
      ├─ MainPage.js
      └─ MainPage.module.css

기능

 

1. Header 영역의 햄버거 버튼을 클릭하면 보이는 Dropdown.js 구현.

2. 아이템을 클릭하면 보이는 Modal.js 구현.

3. 북마크 저장, 취소 시 Notify.js 구현.

4. 로컬스토리지로 북마크를 저장하는 기능을 구현.

5. Category.js 별로 아이템을 렌더링 해주는 기능을 구현.

6. ItemListPage.js , BookmarkPage.js 에서 무한스크롤 구현.