MINE

취업 준비를 하던 중 내가 지금까지 진행한 프로젝트의 부족함을 느끼고 새로운 프로젝트를 진행하기 위해 구상하던 중 '느린 우체통' 프로젝트를 같이 진행한 친구의 제안을 받고 새로운 프로젝트를 진행하게 되었다.Mine은 중고 물품 경매 서비스로 나는 프론트엔드, 친구는

회원가입을 구현하기 위해 생각하던 중 한 라이브러리에 대해 알게 되었다.NextAuth라는 이 라이브러리는 Next.JS 애플리케이션에서 사용자 인증을 손쉽게 구현할 수 있도록 도와주는 라이브러리이다. 다양한 소셜 로그인을 지원하며, 자체 로그인 또한 구현할 수 있도록

MINE 홈페이지에 접속하면 제일 먼저 보게되는 화면이다.페이지의 구성은 크게 카테고리 정렬, 검색 기능을 담당하는 MainBar, 상품 목록을 나열해 표시해주는 AuctionList이다.먼저 Recoil을 이용해 사용자가 선택한 카테고리를 저장하였다.select 태그

AuctionList는 간단하다. 상품 목록을 서버에서 전달받아 표시만 해주면 된다.작동 순서는 다음과 같다.서버에게 post로 상품 목록을 요청한다.서버에게 상품 목록을 전달받아 '최신순'으로 정렬한다.(기본이 되는 정렬 방식이 최신순이기 때문이다.)정렬한 상품목록을

판매자가 상품을 등록하는 페이지이다.필수로 등록해야하는 항목은 다음과 같다.상품 사진(최대 5개)상품 이름카테고리경매 시작가(기본 1000원)종료 시간(최소 7일)사진 파일을 등록하면 등록한 사진이 미리보기로 표시된다.사용자가 사진을 삭제하고 싶을 시 미리보기로 표시된

핵심 기능이 될 상품 페이지이다. 해당 페이지에서 사용자가 이용할 수 있는 기능들은 다음과 같다.입찰(구매자)즉시입찰(구매자)결제(구매자)관심 등록(구매자)댓글 작성(구매자)수정(판매자)삭제(판매자)답글 작성(판매자)먼저 페이지에 접속을 하면 상품을 등록한 USER와

남은 경매 시간을 직관적으로 표시할 수 있게 카운트다운 컴포넌트를 만들었다.다음과 같이 종료 시간 문자열을 prop으로 전달한다.참고로 종료 시간은 Thu May 16 2024 10:26:00 GMT+0900 (한국 표준시)의 형식으로 되어있다.전달받은 종료시간으로 D

상품 페이지의 하단에 구매자가 판매자에게 질문할 수 있는 댓글 기능을 만들었다.판매자는 댓글을 작성한 구매자에게 답글을 달아 구매자가 질문한 사항을 답변할 수 있도록 하였다.useEffect hook을 통해 상품 페이지에 접속하면 서버로부터 댓글 목록을 불러와 표시한다

이용자의 프로필 페이지이다.프로필 사진과 닉네임은 이용자가 로그인한 Naver 계정에서 불러온다.이용자가 마이페이지에서 다음과 같은 정보를 확인할 수 있다.관심 등록한 상품들판매 등록한 상품들입찰한 상품들DB의 usertable에는 사용자가 스크랩한 상품의 id, 판매

경매가 마감되어 상품을 낙찰한 유저가 있다면 구매자는 결제를 진행한다.(실제로 결제를 구현할 순 없어서 시뮬레이션으로 대체하였다.)구매자가 결제 버튼을 누르면 브라우저의 새 창에 결제 페이지가 로딩된다.이후 새 창에서 구매자가 최종적으로 결제를 진행하면 결제 완료 알림