BOF_codeReview

👩🏻‍💻 프로젝트 소개

Function Of Beauty 는 자신의 헤어 타입에 맞는 퀴즈를 통해 헤어,스킨 및 바디 케어 제품을 커스텀 제작할 수 있는 사이트 입니다.

• 이 프로젝트는 Function of Beauty 사이트를 참조하여 학습목적으로 만들었습니다.
• 실무수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다.
• 이 프로젝트에서 사용하고 있는 사진 대부분은 위코드에서 구매한 것이므로 해당 프로젝트 외부인이 사용할 수 없습니다.
• 클론 프로젝트는 전적으로 개발에 집중하기 위하여, 기획이나 디자인 시간 절약을 위해 타 사이트를 참고하되 로직은 직접짜고, 레이아웃을 참고하는 정도로만 했습니다.

🗓 프로젝트 기간

2020.11.02 ~ 11.13 (11일)

👨‍👨‍👧‍👦개발 기간 및 인원

• 개발 기간: 2020/11/02 ~ 2020/11/13 (2주)
• 개발 인원
  
  . Fontend: 이지영, 김정현, 김보라, 임수현
  . Backend: 허소정(PM), 김예진

🎬 데모 영상

https://youtu.be/qM-2oUBUGS8

💻 적용 기술

• Frontend: React.js(Class), React-router, React-slick, AOS, Sass
• Backend: Django, MySQL, bycrypt, PyJWT, cors-headers
• 공통: git / github, Postman, Trello

✔️ 진행방식

• github를 이용해 Team으로 개발하는 방법을 학습하고자 했습니다.
• 협업툴로 Trello를 사용하였고, 1일 1회의 스탠딩 미팅을 진행하였습니다
• 11.02~11.13(11일 간) 1주에 한 스프린트로 진행하는 scrum 방식으로 프로젝트를 진행하였습니다.

📑 개인 별 구현 기능

0. CRA setting ✅

1. 회원가입, 로그인 페이지

• 카카오톡 소셜 로그인 기능
• 회원가입 유효성 검사(Validation) 기능
• local Storage 를 활용한 로그인 기능

2. 메인 페이지

• 제품리스트 슬릭 애니메이션 기능
• 제품리스트 + 상단바 데이터 fetch
• 제품 클릭시 해당제품 상세페이지로 이동

3. 상세 페이지

• 제품 사진 + 리뷰 슬릭 기능
• 제품 리스트 + 리뷰 + 이미지 데이터 fetch

4. 리뷰 페이지

• 제품 리뷰 데이터에 따른 그래프 변화 ✅
• 카테고리 별 리뷰 4단 필터 기능 ✅

5. 퀴즈 페이지

• 색깔 선택 시 병 색깔 변경 기능
• 제품 병 안에 원하는 각인 입력 기능
• 자신의 타입들을 local Storage에 저장 기능
• 모든 데이터 백엔드에 전송후 장바구니에 데이터 담기

6. About 페이지

7. Cart 페이지

• 퀴즈에서 저장한 제품 정보 GET 으로 가져오기 ✅