Skip to content

Conversation

@kimsoyoung96
Copy link
Collaborator

요구사항

Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React를 사용합니다

기본

중고마켓

  • 중고마켓 페이지 주소는 “/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 버튼을 누르면 해당 태그는 삭제됩니다.

주요 변경사항

  • 스프린트 미션 5~6 에서 구현하지 못한 부분이 많아서 이전 미션 내용을 수정하는 시간을 가져봤습니다. 많은 내용을 건드리진 못했지만 시간이 오래 걸렸습니다🥲

스크린샷

image
중고마켓 페이지
상품등록 페이지

멘토에게

@kimsoyoung96 kimsoyoung96 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Dec 9, 2024
@kimsoyoung96 kimsoyoung96 requested a review from kich555 December 9, 2024 10:02
Copy link
Collaborator

@kich555 kich555 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다 ㅎ

Comment on lines +10 to +13
if (!imgRef.current || !imgRef.current.files[0]) {
console.error('파일이 선택되지 않았습니다.');
return;
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍👍👍

Comment on lines +62 to +72
<button className="page_button">
<img src={arrowLeft} />
</button>
<button className="page_button active">1</button>
<button className="page_button">2</button>
<button className="page_button">3</button>
<button className="page_button">4</button>
<button className="page_button">5</button>
<button className="page_button">
<img src={arrowRight} />
</button>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

버튼에 typee등을 명시하면 좀 더 좋겠네요 ㅎ

@kich555 kich555 merged commit 76c9f5c into codeit-bootcamp-frontend:React-김소영 Dec 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants