[ 2주차 심화 과제 ] 웨비들의 냠냠 🍰 창업🏠 손님을 모셔오자!🌈

[kwonET]

✨ 구현 기능 명세

심화 과제

✅ 목록

• 1. 목록 선택시 리스트로 새 상품 추가가 나타납니다.
  • 1. 새 상품 추가 → href =’/addCard’

✅ 새 상품 추가 페이지

• 1. label, input 을 연결시켜서 구현합니다.
  • 1. 상품명
  • 2. 태그 종류 → ,로 구분해서 담기
  • 3. 이미지
    • 1. 파일선택후 이미지 보여주기 필수
• 2. 추가 버튼
  • 1. 모든 정보가 입력되면 localStorage에 추가후 main페이지로 이동
  • 2. 메인페이지에서 추가된 상품 조회가능
• → 이미지 미리보기까지만 구현…! 메인페이지의 이미지는 임의!⁄로

✅ 카드 띄울때 애니메이션

• 1. 태그 기능으로 보여지는 상품 카드들이 달라질때 동적인 애니메이션을 가지고 변경됩니다!

🌼 PR Point

- addCard 폴더를 따로 만들어서, 해당 페이지의 태그 부분과 로컬 스토리지에 저장하는 부분을 따로 addCard.js파일로 구분해줬습니다! - 또한 addCard.js에서 로컬스토리지에 새로운 데이터를 저장(setItem)해주면, dummy.js에서 해당 더미데이터에 가져와(getItem) 더하는 형태로 값을 가져옵니다.

🥺 소요 시간, 어려웠던 점

• 7h
• 바닐라 js에 친숙해지기가 어렵네요.. ! 리액트를 친해지니까 갑자기 생소한 기분

🌈 구현 결과물

• 새로운 항목을 추가하고, 설정한 카테고리에서 볼 수 있도록 합니다.

week02.mov