[Auction project] 경매 사이트 팀프로젝트 소개

엘리트 옥션

⭐️ 자신의 중고 물품을 경매형식으로 판매하는 사이트

📆 프로젝트 기간: 2023. 12. 26 ~ 2024. 01. 03

팀 소개

이동탁 : https://tak-web-front.tistory.com/
김은비 : https://velog.io/@eunbi/posts
이다원 : https://velog.io/@dawnrose
권경열 : https://velog.io/@yeol10

프로젝트 소개

판매자는 경매하고 싶은 물건을 등록하고 등록 시 내용, 경매 기간, 입찰 하한가를 설정할 수 있습니다.
구매자는 경매 게시클에 입찰가를 입력할 수 있으며 이는 하한가보다 높을 떄 입력할 수 있습니다. 경매 기간 시작 전과 끝난 후에는 입찰을 할 수 없으며 남은 시간으로 표시됩니다.
사용자는 상품에 대해 등록, 찜하기, 질문 등을 할 수 있고 이는 회원가입 및 로그인 후 회원 정보가 정상적으로 등록 시 접근할 수 있습니다.
등록한 게시물 및 찜한 게시물은 프로필 페이지에서 확인할 수 있으며, 이 곳에서 등록한 게시물 삭제 및 수정 그리고 찜한 개시물을 목록에서 삭제할 수 있습니다. 프로필 수정 탭에서 회원 정보를 변경할 수 있습니다.

Stack

Enviroment

   

   

  


Config

   

Development

   

   

전역 상태관리

서버 상태 관리 

클라이언트 상태 관리

Database

Communication

   

   

   


화면 구성 및 주요 기능

메인 페이지

카테고리별 필터링 및 정렬 기능
좋아요 기능
useInfinityQuery를 통한 무한 스크롤 구현

로그인 / 회원가입 페이지

supabase Auth를 통한 로그인과 회원가입 구현
supabase 소셜 로그인 기능을 사용한 소셜로그인 구현과 쿼리를 통한 회원정보 저장
react-hook-form을 사용한 로그인 및 회원가입 유효성 검사

상세 페이지

경매 시간과 입찰값을 supabse Realtime을 이용하여 구현
현재 최고 입찰가와 현재까지 입찰한 유저 정보과 입찰값을 한번에 볼 수 있도록 구현
QnA를 통해 해당 게시물의 질문과 답변을 할 수 있도록 구현

게시물 작성 페이지

경매품 이름, 소개, 최소입찰가격, 경매시작시간, 경매종료시간, 카테고리, 이미지를 입력받아 supabase에 insert
유효성 검사를 통해 ""값, 글자수제한, 날짜제한, 이미지수 제한등을 유효성 검사

게시물 수정 페이지

저 유저가 등록한 데이터 값을 화면에 뿌려주고 변경사항이 있으면 수정
auction_status를 받아와 경매가 진행중이면 최소입찰가겻, 경매 시작시간 변경 불가

프로필 페이지

페이지네이션을 통한 유저가 작성한 게시물 목록과 찜한 목록 구현
게시물 수정 및 삭제 기능과 찜한 목록에서 제거 기능 구현
supabase를 통한 회원정보(프로필 이미지, 닉네임, 주소) 업데이트 기능
유저가 작성한 개시물 수정, 삭제 가능

검색창

abase의 ilike와 or 쿼리를 사용한 검색 키워드 및 카테고리 별 검색 기능 구현

아키텍처

와이어프레임

https://www.figma.com/file/8EulxNUZx6EYdiQcVrxRtQ/Untitled?type=design&node-id=0-1&mode=design&t=ODhWJbj6GrptxR3z-0

ERD

https://teamsparta.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F83c75a39-3aba-4ba4-a792-7aefe4b07895%2F7375634c-2a28-470b-853a-075187172f76%2FScreen_Shot_2023-12-27_at_10.54.06_AM.png?table=block&id=10c593ca-8a16-4f0b-9b6f-ad24222b5612&spaceId=83c75a39-3aba-4ba4-a792-7aefe4b07895&width=1310&userId=&cache=v2

파일 구조

📦src
 ┣ 📂api
 ┃ ┣ 📜auction.ts
 ┃ ┣ 📜auth.ts
 ┃ ┣ 📜bid.ts
 ┃ ┣ 📜connectSupabase.ts
 ┃ ┣ 📜likes.ts
 ┃ ┣ 📜qna.ts
 ┃ ┗ 📜setAuction.ts
 ┣ 📂common
 ┃ ┣ 📜dayjs.ts
 ┃ ┣ 📜formatUtil.ts
 ┃ ┗ 📜util.ts
 ┣ 📂components
 ┃ ┣ 📂Home
 ┃ ┃ ┣ 📜AuctionList.tsx
 ┃ ┃ ┣ 📜CategorySelector.tsx
 ┃ ┃ ┗ 📜LikeButton.tsx
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📜Avatar.tsx
 ┃ ┃ ┗ 📜Button.tsx
 ┃ ┣ 📂detail
 ┃ ┃ ┣ 📂bidPopup
 ┃ ┃ ┃ ┣ 📜BidCard.tsx
 ┃ ┃ ┃ ┣ 📜BidList.tsx
 ┃ ┃ ┃ ┣ 📜BidPopUpLayout.tsx
 ┃ ┃ ┃ ┣ 📜PopupToggleButton.tsx
 ┃ ┃ ┃ ┗ 📜Title.tsx
 ┃ ┃ ┣ 📂qna
 ┃ ┃ ┃ ┣ 📜QnaButtonGroup.tsx
 ┃ ┃ ┃ ┣ 📜QnaTextArea.tsx
 ┃ ┃ ┃ ┣ 📜QnaWrapper.tsx
 ┃ ┃ ┃ ┣ 📜Question.tsx
 ┃ ┃ ┃ ┣ 📜QuestionAnswerCard.tsx
 ┃ ┃ ┃ ┣ 📜QuestionAnswerWrapper.tsx
 ┃ ┃ ┃ ┣ 📜QuestionCard.tsx
 ┃ ┃ ┃ ┣ 📜QuestionForm.tsx
 ┃ ┃ ┃ ┗ 📜QuestionList.tsx
 ┃ ┃ ┣ 📜BidButton.tsx
 ┃ ┃ ┣ 📜DetailCarousel.tsx
 ┃ ┃ ┣ 📜DetailContent.tsx
 ┃ ┃ ┣ 📜DetailInfo.tsx
 ┃ ┃ ┗ 📜DetailTimeStamp.tsx
 ┃ ┣ 📂layout
 ┃ ┃ ┣ 📜Header.tsx
 ┃ ┃ ┗ 📜Nav.tsx
 ┃ ┣ 📂login
 ┃ ┃ ┣ 📂SocialLogin
 ┃ ┃ ┃ ┗ 📜SocialLogin.tsx
 ┃ ┃ ┣ 📜AuthFormValue.ts
 ┃ ┃ ┣ 📜LoginForm.styles.ts
 ┃ ┃ ┗ 📜LoginForm.tsx
 ┃ ┣ 📂modalCloseButton
 ┃ ┃ ┗ 📜CloseButton.tsx
 ┃ ┣ 📂profile
 ┃ ┃ ┣ 📂PostList
 ┃ ┃ ┃ ┣ 📂PostItem
 ┃ ┃ ┃ ┃ ┣ 📜PostItem.styles.ts
 ┃ ┃ ┃ ┃ ┗ 📜PostItem.tsx
 ┃ ┃ ┃ ┗ 📜PostList.tsx
 ┃ ┃ ┣ 📂ProfileMenu
 ┃ ┃ ┃ ┗ 📜ProfileMenu.tsx
 ┃ ┃ ┣ 📂UserProfile
 ┃ ┃ ┃ ┣ 📂EditProfile
 ┃ ┃ ┃ ┃ ┗ 📜EditProfile.tsx
 ┃ ┃ ┃ ┗ 📜UserProfile.tsx
 ┃ ┃ ┣ 📂WishList
 ┃ ┃ ┃ ┗ 📜WishList.tsx
 ┃ ┃ ┗ 📜MyPagePosts.styles.ts
 ┃ ┣ 📂search
 ┃ ┃ ┣ 📂SearchItem
 ┃ ┃ ┃ ┗ 📜SearchItem.tsx
 ┃ ┃ ┣ 📜Search.styles.ts
 ┃ ┃ ┗ 📜Search.tsx
 ┃ ┣ 📂setAuction
 ┃ ┃ ┣ 📂setAuctionBtn
 ┃ ┃ ┃ ┣ 📜AddAuctionBtn.tsx
 ┃ ┃ ┃ ┗ 📜UpdateAuctionBtn.tsx
 ┃ ┃ ┣ 📜PriceAndDateAlert.tsx
 ┃ ┃ ┣ 📜SetAuctionAlert.tsx
 ┃ ┃ ┣ 📜SetAuctionBtn.tsx
 ┃ ┃ ┣ 📜SetAuctionCategory.tsx
 ┃ ┃ ┣ 📜SetAuctionContent.tsx
 ┃ ┃ ┣ 📜SetAuctionDate.tsx
 ┃ ┃ ┣ 📜SetAuctionImage.tsx
 ┃ ┃ ┣ 📜SetAuctionPrice.tsx
 ┃ ┃ ┣ 📜SetAuctionProductStatus.tsx
 ┃ ┃ ┣ 📜SetAuctionShippingType.tsx
 ┃ ┃ ┗ 📜SetAuctionTitle.tsx
 ┃ ┗ 📂ui
 ┃ ┃ ┣ 📂bidCustomModal
 ┃ ┃ ┃ ┣ 📂bidForm
 ┃ ┃ ┃ ┃ ┗ 📜BidForm.tsx
 ┃ ┃ ┃ ┗ 📜BidCustomModal.tsx
 ┃ ┃ ┣ 📂customModal
 ┃ ┃ ┃ ┗ 📜CustomModal.tsx
 ┃ ┃ ┣ 📂detailWrapper
 ┃ ┃ ┃ ┗ 📜DetailWrapper.tsx
 ┃ ┃ ┗ 📜Spacer.tsx
 ┣ 📂context
 ┃ ┣ 📜AnswerContext.tsx
 ┃ ┗ 📜AuctionDetailContext.tsx
 ┣ 📂hooks
 ┃ ┣ 📜useAddAuctionMutation.ts
 ┃ ┣ 📜useAuctionPostData.ts
 ┃ ┣ 📜useAuctionStatus.ts
 ┃ ┣ 📜useBidListState.ts
 ┃ ┣ 📜useCloseButtonState.ts
 ┃ ┣ 📜useCustomInfinityQuery.ts
 ┃ ┣ 📜useCustomModal.ts
 ┃ ┣ 📜useCustomMutation.ts
 ┃ ┣ 📜useCustomQuery.ts
 ┃ ┣ 📜useDebounce.ts
 ┃ ┣ 📜useDeleteAuctionMutation.ts
 ┃ ┣ 📜useDetailBidState.ts
 ┃ ┣ 📜useDidMountEffect.ts
 ┃ ┣ 📜useFetchAuctionChangeStatus.ts
 ┃ ┣ 📜useFormInput.ts
 ┃ ┣ 📜useGetAuthInfo.ts
 ┃ ┣ 📜useIsUpdateState.ts
 ┃ ┣ 📜useOnClickOutSide.tsx
 ┃ ┣ 📜useQuestionTanstackQuery.ts
 ┃ ┣ 📜useSubscribeBidTable.ts
 ┃ ┣ 📜useUpdateAuctionMutation.ts
 ┃ ┗ 📜useValidAddAuction.ts
 ┣ 📂images
 ┃ ┣ 📜clock.svg
 ┃ ┣ 📜coin.svg
 ┃ ┣ 📜end.svg
 ┃ ┣ 📜flag.svg
 ┃ ┣ 📜heart.svg
 ┃ ┣ 📜heart2.svg
 ┃ ┣ 📜logo.png
 ┃ ┣ 📜logo2.png
 ┃ ┣ 📜logo3.png
 ┃ ┣ 📜placeholder.svg
 ┃ ┣ 📜search.svg
 ┃ ┗ 📜thin_heart.svg
 ┣ 📂layout
 ┃ ┗ 📜Layout.tsx
 ┣ 📂pages
 ┃ ┣ 📜Auth.tsx
 ┃ ┣ 📜Detail.tsx
 ┃ ┣ 📜Home.tsx
 ┃ ┣ 📜Profile.tsx
 ┃ ┗ 📜SetAuction.tsx
 ┣ 📂query
 ┃ ┣ 📜keys.constant.ts
 ┃ ┣ 📜usePostsQuery.ts
 ┃ ┗ 📜useUsersQuery.ts
 ┣ 📂redux
 ┃ ┣ 📂config
 ┃ ┃ ┗ 📜configStore.tsx
 ┃ ┗ 📂modules
 ┃ ┃ ┣ 📜auctionSingleDataSlice.ts
 ┃ ┃ ┣ 📜auctionTimestampSlice.ts
 ┃ ┃ ┣ 📜bidCustomModalSlice.ts
 ┃ ┃ ┣ 📜bidListSlice.ts
 ┃ ┃ ┣ 📜customModalSlice.ts
 ┃ ┃ ┣ 📜profileSlice.ts
 ┃ ┃ ┣ 📜searchSlice.ts
 ┃ ┃ ┣ 📜setAuctionSlice.ts
 ┃ ┃ ┗ 📜templateSlice.ts
 ┣ 📂share
 ┃ ┣ 📜AuthLayout.tsx
 ┃ ┗ 📜Router.tsx
 ┣ 📂styled
 ┃ ┗ 📜GlobalStyle.ts
 ┣ 📂types
 ┃ ┣ 📜databaseRetrunTypes.ts
 ┃ ┣ 📜detailTyps.ts
 ┃ ┣ 📜supabase.ts
 ┃ ┗ 📜userType.ts
 ┣ 📜App.tsx
 ┣ 📜index.tsx
 ┣ 📜logo.svg
 ┣ 📜react-app-env.d.ts
 ┗ 📜supabase.ts