[리액트] 커프재그 커피 캡슐 쇼핑몰 구축 - 미니프로젝트

- 기간:  4/12~4/22 (14일)

 

- 팀원 구성: 스프링 3명 + 리액트 2명

 

- 프로젝트명:Coffzag 커프재그 -> 커피 + 지그재그(의류쇼핑몰)의 합성어

 

- 목적: 커피를 좋아하는 사람들을 위해 커피캡슐에 대한 리뷰들을 모아서 보여주고, 구매로 바로 연계하고자 함

 

- 설명: 일리, 스타벅스, 네스프레소 공식몰을 크롤링 후 진행하였습니다. 각 브랜드 캡슐커피를 한번에 모아서 구매하고, 캡슐마다 리뷰를 달 수 있습니다. 각 캡슐의 최근 리뷰를 메인 화면 캡슐 카드에 보여지게 했습니다. 

 

- 개발언어/라이브러리: JavaScript / React

 

- 협업툴: git, slack, notion, figma

 

- 구현 기능: 

• 로그인(JWT)/회원가입
• Product Main(페이지네이션, GET)
• 리뷰(CRUD)
• 장바구니 (CRUD)
• 찜리스트(CRUD) - 좋아요 토글
• 결제페이지(CRUD)
• 우편번호 검색 API
• 스티키 헤더

 

 

- github 주소: github.com/hyemigwak/coffzag_front

 

- 배포(s3) : http://coffzaghyemi.s3-website.ap-northeast-2.amazonaws.com/

Coffzag

 

-유튜브 주소: https://youtu.be/jnIHHAxHKjM

 

- 사용 패키지 : 

• react-redux, redux (redux-actions, immer, logger)
• redux-thunk
• react-router-dom
• axios
• styled-components
• material-ui
• moment
• react-daum-postcode

- 프로젝트 image

로그인 페이지입니다.

회원가입 페이지입니다. (이메일 유효성 체크, 공란체크, 아이디 중복체크 기능 구현)

화면 첫 메인 페이지입니다.

메인 화면 하단 페이지네이션입니다.

 

캡슐커피 카드에는 좋아요 하트, 최신리뷰, 작성자, 날짜가 보여집니다.

디테일 페이지입니다. 리뷰 추가,수정,삭제가 가능하고, 상품 구매가 가능합니다.

댓글 수정 버튼 클릭시, 로그인 상태라면 수정 모달창이 뜹니다.

메인화면에서 하트를 누르면 찜리스트에 추가가 됩니다. 여기서 하트를 누르면 삭제됩니다.

 

상품 추가된 장바구니 화면

장바구니에서 구매를 누르면 구매페이지로 이동합니다. 장바구니 담긴 상품이 보여집니다.

카드/무통장입금을 선택할 수 있고 결제하기 누르면 알럿창이 뜹니다.