feat: AuctionControlBar 컴포넌트 개발

[y0unj1NoH]

📌 작업 내용

• 상세페이지의 바텀바?로 해당 경매의 입찰가와 관련 기능을 가진 버튼이 포함됩니다.

• 입찰가는 경우에 따라 최저 입찰가, 최고 입찰가, 나의 입찰가를 확인할 수 있습니다.

• 버튼은 조기 종료, 입찰하기, 취소, 수정으로 구분됩니다.

• 판매자 시점

  1. 아무도 입찰하지 않은 경우

     • 항목: 최저 입찰가
       

  2. 누군가가 입찰한 경우

     • 항목: 최고 입찰가, 조기 종료 버튼
       

• 구매자 시점

  1. 본인이 입찰하지 않은 경우
     • 항목: 최저 입찰가, 입찰하기 버튼
       
  2. 본인이 입찰한 경우
     • 항목: 최저 입찰가, 나의 입찰가, 취소 버튼, 수정 버튼
       

props

• productId: number
• type: number (1,2,3,4)
• minimumBid?: number (판매자 기준)
• maximumBid?: number
• myBid?: number
• onEarlyCloseAuctionButtonClick
• onBIdButtonClick?: () => void
• onCancelButtonClick?: () => void
• onEditButtonClick?: () => void

✅ To-Do

• 판매자 시점, 경우 1의 구조가 잘 반영되는지
• 판매자 시점, 경우 2의 구조가 잘 반영되는지
• 구매자 시점, 경우 1의 구조가 잘 반영되는지
• 구매자 시점, 경우 2의 구조가 잘 반영되는지

📝 참고사항

• 판매자, 구매자 시점 그리고 각 경우에 따라 구조가 달라지므로 Compound pattern으로 구현합니다.
• 생각해보니 모달이 이제 들어가는데, 모달 관련해서 정해야 할 것 같습니다.
• 자꾸 작성하다 보니까 데이터 로직이 들어가게 되는 것 같은데, 아 어렵네요...

선행 조건

• feat: Text 공통 컴포넌트 개발 #3
• feat: Button/TextButton 컴포넌트 개발 #12