- 식재료 시장에 새로운 가치를 부여한다 정육각 클론 프로젝트
- 개발은 초기 세팅부터 직접 구현!
- 개발기간 : 2021/7/5 ~ 2021/7/16
- 개발 인원 : 프론트엔드 3명, 백엔드 3명
- 백엔드 github 링크
- 리액트를 2주동안 배우고 props, state, 컴포넌트 재사용 등에 익숙해지기 위해 깔끔하고 간결한 사이트를 선정하였습니다.
유투브 영상 링크나 캡쳐 이미지 넣어주세요.
- Front-End : React.js, sass,
- Back-End : Python, Django web framework, Beautifulsoup, Selenium, Bcrypt, My SQL
- Tool : slack, AWS(EC2,RDS), git
- 일반 회원가입 / 로그인
- 네비, 푸터 구현
- 네비바에서 토큰을 이용해 로그인여부를 확인하여 로그인버튼을 보였다가 안보였다가 하도록 구현
- 추천 상품, 오늘의 상품, 베스트 상품 모두 각각 api 호출하여 구현
- 메인페이지 슬라이드 라이브러리를 사용하지 않고 직접 구현
-카테고리 filtering / sorting ( 동적 라우팅을 통해 각각의 카테고리별 아이템, 아이템 순서 정리) -item 컴포넌트 구현 ( main,list 컴포넌트에서 재사용) -장바구니 modal창 구현 ( main,list 컴포넌트 재사용 )
-카테고리 클릭 시 query 파라미터를 활용하여 새로고침 후에도 selected 유지
-메인 페이지와 리스트페이지에서 상품 클릭 시 각각의 상세페이지로 이동( 동적 라우팅 사용)
상품의 정보들 props로 모두 받아옴
상품의 수량변경
상품 button option 이 아닌 button 으로 구현
상품의 정보 담아서 장바구니로 post 해줌
상품이 장바구니에 담길때 keyfram 모션 활용
상품의 정보와 상품의 리뷰를 토글로 of&off 구현
상품이 장바구니에 담기고 나서 setTimeOut으로 모션이 지나간 후 장바구니 페이지로 이동
리뷰 : 상품 리뷰를 토큰을 받아와서 페이지에 뿌려줌
상품 리뷰 삭제 기능 추가
- 쿠폰 , 주문이력 백엔드와 통신
- 로그아웃 시 localStorage에서 삭제시키는 정도로 구현
- 카테고리별 회원 정보 뿌려주기 (동적 라우팅)
- 신선배송 가능 지역을 가진 회원의 경우 신선배송 태그 보여주기.
- 수량 변경 : 창고? 재고량을 초과하지 않도록 구현.
장바구니에 넣어둔 상품이 0개가 됬을 경우. 품절이라고 표시
품절인 상품이 있는데 구매하려들 경우 알람창 표시하고 삭제를 유도
- 카카오 주소 api 사용 ( 신선배송 가능 지역 백엔드와 통신 통해 가능 여부 판별)
아래 Reference 부분은 README.md에 꼭 포함되어야 하는 내용입니다
- 이 프로젝트는 네이버 사이트를 참조하여 학습목적으로 만들었습니다.
- 실무수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다.
- 이 프로젝트에서 사용하고 있는 사진 대부분은 위코드에서 구매한 것이므로 해당 프로젝트 외부인이 사용할 수 없습니다.