36기 1차 프로젝트 Wesely

Project

• 와이즐리 클론 코딩

---

개발 기간

• 2022년 8월 16일 ~ 2022년 8월 25일 10일

---

기술스택

• 프론트엔드 : JavaScript, React.js, Sass
• 백엔드 : Node.js, Express, MySQL 8.0, Postman
• 협업 툴 : Notion, Slack, Gather

---

사용 라이브러리

• React.js
• CRA
• react-router-dom
• scss
• eslint
• prerttier

---

프론트

• 김진혁
• 문준기
• 김다현

백엔드

• 박명호
• 이솔
• 정재하

---

구현 기능

• 문준기

  • 장바구니 페이지

    • 상품 수량, 조절, 삭제
    • 백엔드랑 통신후 실시간 재고 반영
    • 정기 구독 주기 선택
    • 포인트 결제

  • 로그인 페이지

    • 백엔드와 실시간 유효성 검사
      • 이메일이 존재하면 백엔드에서 사용자의 이름을 가져와 표시 후 로그인 가능
      • 이메일이 존재하지 않으면 회원가입 페이지로 이동

  • 회원가입 페이지

    • 유효성 검사 후 회원가입 실시

• 김진혁

  • 상세 페이지

    • 상품 옵션 선택시 옵션 폼 생성
    • 상품 옵션별 수량, 조절, 삭제
    • 상품 정보 아코디언
    • 장바구니 담기 POST
    • 장바구니 담기 후 모달 생성
    • 장바구니 라우터 (장바구니 이동 버튼 클릭 후 장바구니 이동)
    • 리뷰 데이터 페이지네이션
    • Under Bar 스크롤 이벤트 (특정 영역 스크롤시 Under Bar 생성 제거)

  • Footer

    • 영역별 상수 데이터 분리

• 김다현

  • 메인 페이지

    • 메인 캐러셀
      • 기본 슬라이드
      • 무한 슬라이드
      • 자동 슬라이드

  • 카테고리 라우터

    • 선택한 제품의 카테고리로 이동

  • 인기있는 제품 리스트를 이용한 멀티 캐러셀

  • 제품 리스트 페이지

    • 제품 품절 확인
    • 카테고리 별 제품 불러오기
    • 정렬 기능
    • 페이지 네이션

  • Nav Bar

    • 메인 Nav Bar와 서브 Nav Bar를 이용한 2중 스크롤 이벤트 구현