[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 쿼리를 사용한 검색 키워드 및 카테고리 별 검색 기능 구현
아키텍처
와이어프레임
ERD
파일 구조
📦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