refector : 코드리뷰 반영

[202010927choiminjune]

✨ 구현 기능 명세

🧩 기본 과제

1. **header **

   • 아이콘 클릭시 home으로 이동

2. nav 구현 (목차)

   • 클릭 시 카테고리별 상품 리스트 보여줍니다.
   1. 전체 → 모든 item 렌더링
   2. 카테고리 → 카테고리별 필터링

3. section 구현

   • 첫 화면에선 전체 리스트가 렌더링됩니다.
   • nav를 클릭할 때 마다 해당하는 리스트를 필터링한 후 렌더링 합니다.
   • item 클릭시 장바구니에 담기 alert가 뜨고 yes누르면 장바구니로 이동됨
   • 최초데이터 데이터 상수 파일 생성

4. 우측 sidebar 구현 (navigation)

   • 햄버거 아이콘 클릭 시 오른쪽 메뉴가 보이도록 구현
   • 관심상품 보기, 장바구니, 관리자 3가지가 포함된 nav를 구현 (hover적용)
   • 메뉴 왼쪽 상단 메뉴를 닫는 버튼 구현
   • 장바구니 페이지 클릭시 장바구니 페이지로 이동

5. 장바구니 페이지 구현

   • 장바구니에 담긴 cart 리스트 구현
   • 이미지, 상품명, 가격, 카테고리가 포함되게 구현
   • 삭제버튼 클릭시 장바구니에서 삭제기능 구현.
   • 장바구니 리스트 일정 높이가 넘어갈 시에 스크롤이 생기도록 구현 (영상 첨부!)
   • 상품 금액엔 3자리마다 , 를 찍어 구분
   • 홈버튼 클릭시 홈으로 이동하는 기능 구현

6. 구매 모달 구현

   • 구매하기 버튼 클릭시 구매를 확정짓는 모달을 뜨도록 구현
   • 모달 내 구매 버튼 클릭시 alert메세지와 함께 모달 닫기
   • 닫기 버튼 구현
   • 장바구니에 담긴 아이템들의 총 금액 보여주기
   • 상품 금액엔 3자리마다 , 를 찍어 구분

---

🔥 심화 과제

1. nav

   • nav모달이 부드럽게 나타나도록 animation 적용

2. 장바구니 페이지

   • 각 장바구니 아이템에 input 구현
   • 체크된 item들만 구매하기 모달에 들어가도록 구현
   • 최상단에 전체 체크가 가능한 input을 만들어 전체 상품을 한번에 구매/취소할 수 있도록 구현
     • 체크된 항목을 구매모달을 통해 구매하면 장바구니 목록에서 사라지도록 구현

공유과제

• 명령형 프로그래밍과 선언형 프로그래밍
• localStorage와 sessionStorage

📌 내가 새로 알게 된 부분

• ~ 부분 이렇게 구현했어요, 피드백 부탁해요!

💎 구현과정에서의 고민과정(어려웠던 부분) 공유!

• ~ 부분이 잘 구현한건지 잘 모르겠어요!
• ~부분 다른 방법이 있는지 궁금해요!

🥺 소요 시간

• 10h
• 코드리뷰 반영

1. export 상수 데이터 선언
2. Number.toLocaleString() 사용
3. 인라인 속성 지양
4. var 대신 const 사용 지향
5. addEventListener 사용
6. console 코드 및 랜더링 정리
7. category별 중복함수 된 함수 => 하나의 함수로 만들기
8. 그 외 주석 정리

🌈 구현 결과물