[나지원] sprint6

[najitwo]

요구사항

기본

중고마켓

• 중고마켓 페이지 주소는 “/items” 입니다.
• 페이지 주소가 “/items” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.
• 상단 네비게이션 바는 이전 미션에서 구현한 랜딩 페이지와 동일한 스타일로 만들어 주세요.
• 상품 데이터 정보는 https://panda-market-api.vercel.app/docs/#/ 에 명세된 GET 메소드 “/products” 를 사용해주세요.
• '상품 등록하기' 버튼을 누르면 “/additem” 로 이동합니다. ( 빈 페이지 )
• 전체 상품에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.

중고마켓 반응형

• 베스트 상품
  Desktop : 4개 보이기
  Tablet : 2개 보이기
  Mobile : 1개 보이기
• 전체 상품
  Desktop : 12개 보이기
  Tablet : 6개 보이기
  Mobile : 4개 보이기

상품 등록

• 상품 등록 페이지 주소는 “/additem” 입니다.
• 페이지 주소가 “/additem” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.
• 상품 이미지는 최대 한개 업로드가 가능합니다.
• 각 input의 placeholder 값을 정확히 입력해주세요.
• 이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
• API를 통한 상품 등록은 추후 미션에서 적용합니다.

심화

• 페이지 네이션 기능을 구현합니다.

상품 등록

• 이미지 안의 X 버튼을 누르면 이미지가 삭제됩니다.
• 추가된 태그 안의 X 버튼을 누르면 해당 태그는 삭제됩니다.

주요 변경사항

• 특정 기능에 종속된 컴포넌트를 그 기능과 함께 한 곳에 모아 관리해보려고 Feature 기반 폴더 구조로 바꿔봤습니다.

src
 ┣ assets
 ┃ ┣ images
 ┃ ┗ styles
 ┣ components
 ┃ ┣ Button.js
 ┃ ┣ Card.js
 ┃ ┣ Header.js
 ┃ ┣ Input.js
 ┃ ┣ Textarea.js
 ┃ ┗ XButton.js
 ┣ constants
 ┃ ┗ responsiveConstants.js
 ┣ features
 ┃ ┣ AddProduct
 ┃ ┃ ┗ components
 ┃ ┃ ┃ ┣ AddProductForm.js
 ┃ ┃ ┃ ┣ FileInput.js
 ┃ ┃ ┃ ┗ Tags.js
 ┃ ┗ ProductList
 ┃ ┃ ┣ components
 ┃ ┃ ┃ ┣ BestProducts.js
 ┃ ┃ ┃ ┣ Dropdown.js
 ┃ ┃ ┃ ┣ Pagination.js
 ┃ ┃ ┃ ┗ ProductList.js
 ┃ ┃ ┗ services
 ┃ ┃ ┃ ┗ getProducts.js
 ┣ layouts
 ┃ ┗ MainLayout.js
 ┣ pages
 ┃ ┣ AddProductPage.js
 ┃ ┣ HomePage.js
 ┃ ┗ ProductListPage.js
 ┣ routes
 ┃ ┗ AppRoutes.js
 ┣ services
 ┣ App.js
 ┗ index.js

스크린샷

https://najimarket.netlify.app/items
https://najimarket.netlify.app/additem

[GANGYIKIM]

지원님 이번주차 스프린트 미션 고생하셨습니다.
폴더 구조도 변경하신 것도 좋고 로직 분리하신것도 좋네요~
다음 주차도 화이팅입니다~