Wepleats 프로젝트 Front-end/Back-end 소개

• 개발자들의 보다 개성있는 데스크를 위해 다채로운 색상의 프로덕트 판매하는 사이트를 기획하였습니다.
• 밋밋하고 칙칙한 개발자 책상이라는 편견은 이제 그만, WePleats는 하루종일 데스크에서 일하는 개발자들의 개성을 표현해줄 수 있는 아이템을 추천해주는 곳입니다.

개발 인원 및 기간

• 개발기간 : 2022/09/19 ~ 2022/09/30
• 개발 인원 : 프론트엔드 3명, 백엔드 2명
• 프로젝트 회고 Blog Link

프로젝트 선정이유

• 커머스 사이트 중에서 개발하는 데 기본적인 flow를 모둔 갖춘 사이트로 회원가입/로그인, 장바구니, 상품구매, 리뷰평 작성까지 모두 경험할 수 있어 선정하게 되었습니다.

데모 영상(이미지 클릭)

프로젝트 영상 배포 링크

적용 기술 및 구현 기능

적용 기술

• Front-End : React.js, sass, slick, react-modal
• Back-End : Node.js, Express framework, JSON WEB TOKEN, Bcrypt, MySQL, multer
• Common : AWS(EC2,RDS), RESTful API

구현 페이지

1. Nav, Footer
2. 회원가입/로그인
3. 메인
4. 리스트
5. 상세
6. 장바구니
7. 결제
8. 리뷰

### 나의 역할 - JWT 토큰 검증
- 베스트 상품 카테고리
- order 테이블을 활용해 상위 판매 제품 리스트 업
- 장바구니 CRUD
- 장바구니 추가 (동일 제품이 장바구니에 존재 할 경우, 갯수 추가)
- 장바구니 물품 변경
- 장바구니 체크 유무
- 장바구니 체크된 물품 삭제
- 결제 페이지, 주문 조회, 주문 생성
- 결제 페이지 진입시 장바구니에 체크 된 물품 리스트 업
- 상세페이지에서 주문시 장바구니를 제외한 상세페이지 물품만 주문
- 주문 성공시 order Table 기록 후 리뷰 권한 부여
- 주문 목록 조회
- 리뷰 CRUD
- multer 를 이용한 S3 이미지 업로드 구현
- 리뷰 수정, 리뷰 삭제
- 제품 상세 페이지
- 제품 상세 페이지당 카테고리 명, 필요한 사진 리스트 업
- AWS (EC2, RDS, S3) 를 이용한 백엔드 서버 배포
- 백엔드 서버 유지를 위한 EC2 배포
- 백엔드 개발자간의 DB 통일성을 위한 RDS 배포

Reference

• 이 프로젝트는 플리츠 마마 사이트를 참조하여 학습목적으로 만들었습니다.
• 실무수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다.
• 이 프로젝트에서 사용하고 있는 사진 대부분은 위코드에서 구매한 것이므로 해당 프로젝트 외부인이 사용할 수 없습니다.