이미지들은 확대해야 보입니다

경매 메인페이지

카테고리 or 카테고리별 + (경매이름 또는 경매이름 + 가격대) 등으로 검색 할 수 있다.

이번 주에 현재 입찰 수 가 많은 경매의 상품이미지와 경매정보를 간단하게 사용자들에게 슬라이드로
최대 10개 까지 불러올 수 있다.

등록된 경매 리스트를 불러온다. 해당 경매의 시간이 얼마나 남았는지 AJAX + setInterver를 통해 알려주고, 현재 입찰 수와, 몇 명이 채팅방에 참여중인지 보여준다.

경매 상세페이지 입찰자가 아무도 없을때 화면이다.

입찰자가 있을 경우의 화면이다.

현재 로그인 한 사람이 입찰 한 경매 목록을 js의 setInterver를 이용하여 2초 주기로 AJAX를 이용하여 불러온다.

내 입찰가와 최고 입찰가 가 있는데, 지금 사진은 1번방, 5번방의 경매 모두 해당 회원이
최고 입찰자인 상태이다.

하지만 최고 입찰자를 뺏기면

이렇게 최고 입찰자를 뺏겼다는 느낌을 주기 위해서 붉은색으로 표시된다.

회원이 상품을 등록 할 때 넣었던 이미지들을 슬라이드로 보여준다.

상품의 기본정보와 판매자가 경매를 등록 할 때 쓴 글을 판매자의 한 마디를 누르면,

이렇게 볼 수 있다.

해당 경매에 입찰된 로그이다. 자신이 입찰한 건은 초록색 다른 사람이 입찰 한 건은 빨간색으로 표시된다.
js의 setInterver과 ajax를 이용하여 3초마다 로그를 받아 올 수 있게 만들었다.

현재 최고 입찰자가 누구인지 알 수 있는 곳이다.
이 부분도 마찬가지로 입찰log중 최고가로 입찰 한 회원의 정보를 불러와서 나타내준다.
이 역시 ajax와 setInterver를 이용하였다.

그리고 경매가 1분 미만이 될 경우...

타이머가 밀리세컨드 단위로 회원에게 긴박함을 주기 위한 이펙트이다.

그러다가 회원이 긴박함을 느끼고(?) 경매가 종료에 임박했을때 입찰을 한다면

타이머는 다시 60초가 남았을때로 되돌아간다.

그리고 경매가 종료되었을때 최고 입찰자에게 축하 이펙트를 나타내준다

축하 이펙트 : 알록달록한 종이가 화면에 뿌려진다.

이 부분에서 회원은 입찰단위로 입찰을 하거나, 직접적으로 원하는 가격대에 입찰을 할 수 있고,
내가 해당 경매에 최고 얼마나 입찰 했는지 알 수 있고, 현재 내 캐쉬잔액을 실시간으로 볼 수 있다.
이 부분도 setInterver와 ajax로 구현했다.

js 의 sockJS와 Spring의 Stomp를 이용하여 실시간 채팅을 구현하였다.
채팅 참여자는 setInterver + ajax로 해당 경매방을 보고있는 회원을 불러올 수 있고
채팅은 sockJS+Stomp로 진행된다.

추가적으로 전에 있던 채팅 목록들도 불러 올 수있다.

그 다음 상단에 marquee 태그와 ajax+setInterver를 이용하여 가장 Hot한 경매를 회원들에게 보여준다.

다음은 경매 물품을 등록 할 수있는 페이지이며
사용자에게 기본적인 등록 절차와 팁을 준다.

이미지 등록시에는 사용자가 어떤 이미지를 등록 했는지 Jquery로 구현한 미리보기로 이미지들을 미리 확인 할 수 있다.

다음은 경매를 등록 할 수 있는 페이지이다.
우선 경매 물품은 관리자가 허가한 물품들만 등록 할 수 있는데

이렇게 물품을 선택시 AJAX를 통해 서버에서 판별하여 해당 물품의 이미지 미리보기와 함께
사용자에게 경매등록이 가능 한 물품인지 아닌지 보여준다.

다음은 사용자가 원하는 금액을 입력하는 부분인데
이곳에는 천 단위마다 콤마를 자동적으로 찍어주기위해 onKeyup 속성을 통해 JS로 정규식을 통해 구현한 자동으로 콤마 찍어주기 함수를 구현해 이용했다.

그 다음은 헤더에 있는 메세지 기능인데 회원이 참여한 경매의 최고입찰자를 뺏겼을때 전 최고입찰자에게 메세지를 날려주고, 입찰을 참여한 경매의 경매가 종료되어 물품을 낙찰 받았을때 또는 종료되었을때 해당 회원에게 메세지를 서버에서 전송 해 준다.
저 메세지버튼을 클릭하면

다음과 같이 화면에 메세지함이 뜬다.

첫번째로
이 새 메세지 부분은 각 메세지의 서버에서 보낸 날짜로부터 6개월간의 메세지들이 존재하는곳이다.

두번째로
해당 메세지는 보낸 날짜로부터 6개월이 지났으므로 (안 읽은 메세지)로 이동되었다.

새 메시지, 안 읽은 메세지의 메세지들을 클릭하면(읽으면) 읽음처리가 서버를통해 되므로

이 전 메세지 함으로 오게된다.