Skip to content

Team-YUMU/YUMU-FE

Repository files navigation

YUMU - 라이브 커머스 웹 사이트

👨🏻‍💻 소개 및 사이트 링크

아마추어 예술가들은 처리가 곤란한 자신의 작품을 경매로 선보여 뒷처리와 금전,
자기 어필의 기회를 얻고 일반 사용자들은 마음에 드는 작품을 비교적 저렴한 가격에 구매할 수 있는 기회를 얻는 웹 서비스입니다.

🔗 YUMU Demo Site Link

🔗 YUMU Figma Link

🔗 YUMU Swagger

📆 프로젝트 기간

2024/02/29 ~ 진행 중

🛠️ 기술 스택

⚙️ Front-End

FrameWorks

Libraries

Lints

style

env

OAuth 2.0

⚙️ Back-End

DB

DevOps

🖼️ Designer


Brainstorming



👫 팀원 소개 & 역할

프론트엔드


정현진


박지원


김윤미


성은지


이서영

백엔드


서민수


성루비

디자이너


조효은

🎯 주요 페이지 및 기능

✅ 로그인/회원가입 페이지

회원가입

- 이메일, 닉네임, 비밀번호, 비밀번호 확인
- 이메일, 닉네임 중복 및 정규 표현식 사용 시, 에러 메세지 반환
- 비밀번호 확인 시, 비밀번호와 다르면 메세지 반환 비밀번호 대문자, 숫자,특수기호 포함
- 프로필 이미지는 가입 시, 유무 기본 이미지
- 회원가입 성공 시 “회원가입이 완료되었습니다!” 모달 출현 → 로그인 페이지로 이동

로그인

- 이메일, 비밀번호
- 존재하지 않은 이메일 에러 메세지
- 이메일 형식 맞지 않다면 에러 메세지 
- 비밀번호 틀릴 시, 에러 메세지
- 주요 기능 및 페이지는 로그인 후에 사용 및 확인 가능
- 로그인 전 사용 가능 기능: 메인 페이지, 경매품 리스트 열람
- 로그인 후 회원만 가능한 기능 - 결제, 라이브 참여,마이 페이지,로그아웃 수정
- sns 회원가입 및 로그인 (카카오)
- 비밀번호 찾기 (추 후 구현 예정)

💫 메인 페이지

- 헤더 검색 기능,배너,인기 있는 경매, 최신 경매,현재 라이브 중인 경매,라이브 예정 경매 캐러셀 기반으로 구현

📋 전체 작품 목록 페이지 (전체 경매 목록)

- 필터링 : 최신 순,  관심 순
- 기본 : 최신순 정렬
- 카드 : 대표 이미지, 아티스트명, 작품명,�찜 갯수
- 검색 : 작품명, 아티스트명
- 페이지네이션으로 진행

📝 작품 등록 페이지 (경매 등록)

1. 작품 제목
2. 작품 요약
3. 대표 이미지 (1개만)
4. 작품 규모 (숫자x숫자x숫자)
5. 제작 일자 (년월일)
6. 작품 상세
7. 경매 일시 (년월일 시분)
- 경매 시작일시
- 경매 종료 일시
8. 경매 시작가
9. 수령 방법
- 드롭 다운 또는 라디오 그룹
- 1개만 선택
10. 유의 사항
- 필수 아님. 선택

🤳🏻 라이브 경매 페이지

- 실시간 채팅
- 구매자들이 사용
- 일정 금액만큼 자동 가산 되는 버튼, 더블로 올리는 버튼, 원하는 가격 입력하는 버튼

✍🏻 마이페이지(설정)

목록 화면

- 낙찰/판매/관심 목록 최신순으로 정렬 및 무한스크롤 기능
- 입찰 대기 중 상태인 낙찰 목록은 카카오 결제 버튼, 입찰 완료 상태인 목록은 구매 상세페이지로 이동
- 찜 해제 기능 
- 카카오 페이 결제 기능 (추 후 구현 예정)

정보 수정 화면

- 이미지변경 및 삭제/닉네임/소개말/비밀번호 변경 기능 

⛔️ 404 페이지

- 잘못된 경로로 이동 시 404페이지 이동

📦 폴더 구조

📦src
 ┣ 📂components
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📜AuctionCard.tsx
 ┃ ┃ ┣ 📜AuctionDetail.tsx
 ┃ ┃ ┣ 📜BestAuction.tsx
 ┃ ┃ ┣ 📜EmptyView.tsx
 ┃ ┃ ┣ 📜ExhibitionCarousel.tsx
 ┃ ┃ ┣ 📜Footer.tsx
 ┃ ┃ ┣ 📜Header.tsx
 ┃ ┃ ┣ 📜InfoBox.tsx
 ┃ ┃ ┣ 📜Layout.tsx
 ┃ ┃ ┣ 📜LikeButton.tsx
 ┃ ┃ ┣ 📜LiveTimer.tsx
 ┃ ┃ ┣ 📜Modal.tsx
 ┃ ┃ ┣ 📜Pagination.tsx
 ┃ ┃ ┣ 📜ScrollButton.tsx
 ┃ ┃ ┣ 📜ScrollButtons.tsx
 ┃ ┃ ┣ 📜SearchForm.tsx
 ┃ ┃ ┣ 📜SortSelect.tsx
 ┃ ┃ ┗ 📜SubLayout.tsx
 ┃ ┣ 📂domain
 ┃ ┃ ┣ 📂landing
 ┃ ┃ ┃ ┣ 📜LadingPopular.tsx
 ┃ ┃ ┃ ┣ 📜LandingBanner.tsx
 ┃ ┃ ┃ ┗ 📜LandingLivePopular.tsx
 ┃ ┃ ┣ 📂live
 ┃ ┃ ┃ ┣ 📜BidHistories.tsx
 ┃ ┃ ┃ ┣ 📜BiddingBox.tsx
 ┃ ┃ ┃ ┣ 📜bids.tsx
 ┃ ┃ ┃ ┣ 📜chats.tsx
 ┃ ┃ ┃ ┣ 📜date-time-picker-demo.tsx
 ┃ ┃ ┃ ┣ 📜livechatting.tsx
 ┃ ┃ ┃ ┣ 📜livevideo.tsx
 ┃ ┃ ┃ ┣ 📜time-picker-demo.tsx
 ┃ ┃ ┃ ┣ 📜time-picker-input.tsx
 ┃ ┃ ┃ ┗ 📜time-picker-utils.tsx
 ┃ ┃ ┣ 📂myPage
 ┃ ┃ ┃ ┗ 📂Tabs
 ┃ ┃ ┃ ┃ ┣ 📂Edit
 ┃ ┃ ┃ ┃ ┃ ┣ 📜Edit.tsx
 ┃ ┃ ┃ ┃ ┃ ┣ 📜IntroEditForm.tsx
 ┃ ┃ ┃ ┃ ┃ ┣ 📜NewPasswordModalForm.tsx
 ┃ ┃ ┃ ┃ ┃ ┣ 📜NickNameEditForm.tsx
 ┃ ┃ ┃ ┃ ┃ ┗ 📜UserDeleteModal.tsx
 ┃ ┃ ┃ ┃ ┣ 📜BuyHistory.tsx
 ┃ ┃ ┃ ┃ ┣ 📜MyPageTabs.tsx
 ┃ ┃ ┃ ┃ ┣ 📜SalesHistory.tsx
 ┃ ┃ ┃ ┃ ┗ 📜WishList.tsx
 ┃ ┃ ┗ 📂search
 ┃ ┃ ┃ ┗ 📜AuctionList.tsx
 ┃ ┣ 📂svgs
 ┃ ┃ ┣ 📜ColorChangeMoreArrow.tsx
 ┃ ┃ ┣ 📜EmailIcon.tsx
 ┃ ┃ ┗ 📜PwdIcon.tsx
 ┃ ┗ 📂ui
 ┃ ┃ ┣ 📜AuthInput.tsx
 ┃ ┃ ┣ 📜ErrorMessage.tsx
 ┃ ┃ ┣ 📜alert-dialog.tsx
 ┃ ┃ ┣ 📜aspect-ratio.tsx
 ┃ ┃ ┣ 📜avatar.tsx
 ┃ ┃ ┣ 📜button.tsx
 ┃ ┃ ┣ 📜calendar.tsx
 ┃ ┃ ┣ 📜card.tsx
 ┃ ┃ ┣ 📜carousel.tsx
 ┃ ┃ ┣ 📜dropdown-menu.tsx
 ┃ ┃ ┣ 📜form.tsx
 ┃ ┃ ┣ 📜hover-card.tsx
 ┃ ┃ ┣ 📜input.tsx
 ┃ ┃ ┣ 📜label.tsx
 ┃ ┃ ┣ 📜mainCarousel.tsx
 ┃ ┃ ┣ 📜my-page-textarea.tsx
 ┃ ┃ ┣ 📜popover.tsx
 ┃ ┃ ┣ 📜select.tsx
 ┃ ┃ ┣ 📜separator.tsx
 ┃ ┃ ┣ 📜skeleton.tsx
 ┃ ┃ ┣ 📜tabs.tsx
 ┃ ┃ ┗ 📜textarea.tsx
 ┣ 📂contexts
 ┃ ┗ 📜AuthProvider.tsx
 ┣ 📂lib
 ┃ ┗ 📜utils.ts
 ┣ 📂pages
 ┃ ┣ 📂auction
 ┃ ┃ ┗ 📂[auctionid]
 ┃ ┃ ┃ ┣ 📂detail
 ┃ ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┃ ┣ 📂live
 ┃ ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┃ ┗ 📂streaming
 ┃ ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂callback
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂chatting
 ┃ ┃ ┣ 📜[roomId].tsx
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂detail
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂landing
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂mypage
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂registration
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂search
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂signin
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂signup
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📜404.tsx
 ┃ ┣ 📜_app.tsx
 ┃ ┣ 📜_document.tsx
 ┃ ┗ 📜index.tsx
 ┣ 📂services
 ┃ ┣ 📜api.ts
 ┃ ┗ 📜axios.ts
 ┣ 📂styles
 ┃ ┗ 📜globals.css
 ┣ 📂types
 ┃ ┣ 📂validator
 ┃ ┃ ┣ 📜auctionForm.ts
 ┃ ┃ ┣ 📜myPageForm.ts
 ┃ ┃ ┗ 📜signForm.ts
 ┃ ┣ 📜next.ts
 ┃ ┗ 📜types.ts