코로나 사태로 인해 새롭게 등장하는 취미와 학습 트렌드를 신속하게 반영하여 사용자들에게 최신의 경험을 제공하고자 기획하게 되었음
- 프로젝트 명 : 하루살이(MayFly)
- 프로젝트 목표 : 다양한 취미와 관심사에 맞는 클래스를 제공함으로써 모든 연령대와 배경을 가진 사람들에게 맞춤형 경험을 제공
- 기간 : 2023/11/06 ~ 2023/11/24(3주)
- 상세설명 : Notion
- 최민지(Project Manager) : Nav, 메인 페이지, 상품리스트 페이지
- 신희현 : 상세 페이지, 호스트 마이 페이지
- 임시현 : 소셜로그인, 충전, 유저 마이 페이지, 관리자 페이지
- 유진서(Product Manager) : 강의 및 스케줄 관련 API
- 이주현 : 이미지, 채팅 관련 API
- 김문영 : 강사, 수강생, 관리자 관련 API
- 노범석 : 결제 및 QR코드 전송, 위시리스트 관련 API
- 로그인(회원가입 포함) 페이지 : 카카오 소셜로그인 API를 통해 가입, 로그인 동시에 되도록 구현
- 메인 페이지 : 배너 표시와 정렬 기준(인기순, 최신순, 마감임박순)에 따른 상품 나열
- 크레딧 충전 페이지 : 카카오페이 API를 활용하여 결제, 크레딧을 충전하도록 구현
- 유저 마이페이지 : 유저 개인 정보 수정, 예약한 강의 내역 표시/취소/카카오톡 본인한테 보내기 기능, 위시리스트 내역 표시/취소 기능 구현
- 관리자 페이지 : 유저 목록 조회/삭제/복구, 호스트 목록 조회/삭제/복구, 클래스 목록 조회/삭제/복구/클래스별 상세 정보 모달창을 통해 조회 구현
- 리스트 페이지 : Nav에서 메인 카테고리 클릭시 해당되는 상품 리스트 페이지, 최근 본 상품 기능 구현, 정렬 및 검색바 기능 구현, 서브 카테고리 필터 기능 구현
- 상세 페이지 : 원데이 클래스에 대한 상세 내용 표시, 카카오 지도 API를 통해 지도 구현, Socket.io를 활용한 실시간 채팅 문의 기능, 스케줄과 인원수를 통한 강의 신청
- 호스트 마이페이지 : 호스트의 개인 정보 수정, 강의 내역 표시 / 추가(이미지 S3 업로드 후 S3에서 받은 URL 업로드) / 수정 기능(이미지 S3업로드 후 S3에서 받은 URL 업로드), 보유 크레딧을 현금화 시킬 수 있는 정산 기능(실제 현금화 X), Socket.io를 활용하여 유저와의 실시간 채팅 기능 구현
- 하루살이 웹사이트 접속
- 하루 로그인
- 로그인 시 이동하는 강의 리스트 페이지 이동
- 원하는 강의 클릭
- 상세 페이지에서 수강할 인원 수 변경
- 해당 스케줄이 있는 날짜 선택
- '강의 신청' 버튼을 눌러 예약
- 유저 탭을 클릭
- 크레딧 충전 페이지로 이동
- 원하는 금액을 클릭 후 결제 버튼 클릭
- 하루살이 웹사이트 접속
- 등대 로그인
- 우측 상단 등대 탭을 클릭
- 마이 페이지 이동
- 강의 내역 이동
- 강의 추가 버튼 클릭
- 강의 내용 입력
- 강의 추가 버튼 클릭
- 리포지토리 클론
git clone https://github.com/wecode-bootcamp-korea/50-3rd-mayfly-frontend/
- 의존성 패키지 설치
npm install
- 프로젝트 실행
npm start