HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
프로그래머스 프론트엔드 데브코스 2기
프로그래머스 프론트엔드 데브코스 2기
/
🐢
달리팀
/
🏆
비드마켓 - 사이코
/
💛
UI기능명세서
/
🌖
상품 상세 페이지 (ProductId Page)
🌖

상품 상세 페이지 (ProductId Page)

router URL
/products/[productId]
로그인 필요 여부
로그인 필요 여부
입찰 진행중 (판매자 화면)
입찰 진행중 (판매자 화면)
입찰 종료 후 낙찰자가 없는 경우 (판매자 화면)
입찰 종료 후 낙찰자가 없는 경우 (판매자 화면)
입찰 종료된 페이지 (판매자, 낙찰자를 제외한 화면)
입찰 종료된 페이지 (판매자, 낙찰자를 제외한 화면)
낙찰된 경우(판매자, 낙찰자 화면)
낙찰된 경우(판매자, 낙찰자 화면)

 
번호
기능명
기능 설명
예외 처리
1
뒤로 가기
- 이전 페이지로 이동
ㅤ
2
찜하기 버튼
- 클릭 시 색이 채워지며 관심 상품 목록에 저장 - 토글 형식으로 구현
ㅤ
3
입찰 하기 버튼
- 클릭 시 Drawer가 위로 올라오며 원하는 가격을 적을 수 있는 칸과 입찰 버튼이 생성
ㅤ
4
입찰 가격 입력
- 원하는 가격을 적는다. - 희망가보다 높게 적어야 한다. - 100원단위로 작성 가능
ㅤ
5
입찰 완료 버튼
- 클릭 시 적은 가격으로 입찰에 참여한다.
- 조건에 맞은 경우 API 호출 - 조건에 안맞는 경우 경고 메시지 안내
6
한글 금액 단위 변환
- 입찰 가격을 입력하면 바로바로 변환된다. - 예 : 1,000원
- 희망가 보다 적게 작성하면 빨간색 글씨로 경고 문구를 보여준다.
7
판매자 프로필 클릭
- 판매자의 회원 정보 페이지로 이동
ㅤ
8
채팅하기 버튼
- 클릭시 채팅 페이지로 이동
- 판매자, 낙찰자 화면
9
상품 재등록하기 버튼
- 클릭시 상품 등록 페이지로 이동
- 판매자 화면