sei-color / momo_online_store Goto Github PK

대학생 코딩 연합 동아리 멋쟁이 사자처럼 스터디에서 진행한 프로젝트로, E-commerce형태의 웹 서비스를 구현해보는 스터디가 진행되어 시작하게 된 프로젝트입니다.

✨ 아래 링크에서 프로젝트 데모 확인이 가능합니다.
MOMO Demo

• HTML5 / CSS3
• JavaScript(ES6+)
• React
• Redux, Redux-thunk
• MongoDB, Mongoose
• Node.js
• Express
• SCSS(BEM 활용)
• Gsap

• 회원가입/로그인/로그아웃
• 프로덕트 페이지네이션
• 상품 검색
• 카테고리 검색
• 제품 상세 페이지
• 상품 리뷰
• 주문확인용 사용자 마이 페이지 , 프로필
• 주문 Checkout 프로세스 (shipping -> payment method -> order)
• 장바구니
• 페이팔/신용카드 결제기능
• Admin 유저, 제품, 주문 관리 페이지
• 반응형 웹

GSAP을 이용한 스크롤 애니메이션, Landing page 내에서 view를 누르면 프로덕트 페이지(/shop)으로 이동합니다.

카테고리별로 상품 검색을 할 수 있는 카테고리 필터 기능과 페이지네이션 구현

로그인을 하면 랜딩페이지('/')로 이동하고 로그아웃을 하면 '/login'페이지로 리다이렉트 됩니다.
jwt를 이용하여 토큰을 생성하고 비워주고(로그아웃), authMiddleware를 통해 토큰을 비교하는 방식으로
로그인 authorization을 구현하였으며, user가 admin인 확인해주는 미들웨어 또한 구현하였습니다.

제품 상세페이지에서 재고확인과 상품 리뷰를 남길 수 있으며, 장바구니에 담을 수 있는 기능을 구현하였습니다.

navbar의 돋보기 아이콘을 클릭하면, 검색이 가능한 페이지로 이동되고**('/shop/search')**
키워드를 입력하면 해당하는 아이템을 볼 수 있도록 구현하였습니다.

제품 상세페이지에서 마음에 드는 상품을 장바구니에 추가가 가능하며, Cart 페이지에서 삭제와 수량 변경, 주문하기 등의 기능이 가능합니다.

유저가 장바구니에서 주문하기를 누르면 Checkout process 페이지로 넘어가 배송지를 입력하고, 결제 방식을 선택, 주문 확인을 하면 결제 페이지로 이동하게 됩니다.

페이팔 결제 모듈을 통해 페이팔이나 신용카드로 결제가 가능하도록 구현하였습니다.

유저는 프로필에서 유저 정보와 주문 정보, 배송 상태 등이 확인 가능합니다.

Admin 페이지에서 admin 유저는 전체 유저의 목록확인, 유저 정보 수정, 삭제가 가능하며
전체 제품 확인, 등록, 삭제, 업데이트(수정) 할 수 있도록 각각 CRUD 기능을 구현하였습니다.

order 페이지 주문 목록 리스트가 확인 가능하며, 배송이 완료되면 admin유저는 배송완료를 클릭하여 유저에게 배송이 완료되었음을 알립니다.

데스크탑, 아이패드, 모바일 순으로 반응형 웹을 구현하였습니다.

프론트엔드 개발자도 백엔드 로직을 충분히 이해해야 한다 판단하였습니다.
Node.js와 express, mongoDB를 사용해 서버와 데이터베이스를 구성하고 코드를 구현하면서 오랜 시간이 걸렸지만,
프론트엔드 쪽에서 요청하고 받아오는 데이터가 어떤 것인지 이해하고 이것을 어떻게 활용하여 클라이언트 상에서 화면에 나타낼 수 있는지에 대해 더 깊은 이해를 할 수 있었던 경험이었습니다.
이번 프로젝트를 통해 전반적인 e-commerce 플랫폼의 비즈니스 로직과 RESTful-api에 대한 이해,
토큰을 이용한 회원가입 / 로그인 / 로그아웃 구현, MongoDB를 통한 NoSQL에 대한 이해, css 전처리기SCSS 를 이용하고 BEM을 따른 스타일링,
GSAP 을 이용한 애니메이션 구현, Redux 를 이용한 상태관리에 관한 공부를 할 수 있었습니다.