관리자가 상품 정보 및 카테고리를 추가하고, 상품을 장바구니에 담아 결제할 수 있는 Web POS 사이트 구현 프로젝트로, 회사 CHERGROUND에서 1개월 동안 인턴으로 일하면서 진행한 프로젝트다.

사이트의 기획과 디자인은 기업 협업을 진행한 CHERGROUND에서 Zeplin으로 제공해주셨으며, 클린 아키텍쳐를 준수하기 위해 MVVM 모델을 적용하였다.

• 기간: 2021. 11. 01. ~ 2021. 11. 26.
• Backend GitHub
• Zeplin에 명시 되어있는 기획과 디자인을 보고 구현하였습니다.
• CRA 없이 프로젝트 초기 세팅부터 레이아웃 및 기능을 직접 구현하였으며, 모든 데이터는 프론트와 백의 통신으로 받아온 데이터입니다.

• Frontend: 정민지, 성해호
• Backend: 김도훈, 송영록

• Frontend: React, Hook, Styled-Components
• Backend: Node.js, Express, AWS, MySQL, Docker
• Common: Typescript, MVVM Design Pattern, Git

• Clean Architecture를 프로젝트에 적용하기 위해 MVVM 디자인 패턴을 사용하였습니다.
• entity - data(API) - repository - usecase - view model - view 로 계층을 분리하여, 데이터 통신이 이루어지는 코드와 뷰를 작동시키는 코드를 분리하였습니다.
• Entity에 User, Product, Category 등 객체의 속성들을 interface로 만들어 정의해두고, Entity를 import 하여 Promise 객체의 반환 타입이나 함수 인자 타입을 지정해주었습니다.
• 계층마다 index.ts 파일에 class에서 사용할 함수와 타입들을 지정해둔 interface를 정의하고 각 class에 implement하여 사용함으로써, class를 일일히 보지 않고 index.ts 파일만 확인하면 어떤 함수들이 정의되어 있는지 알 수 있도록 하였습니다.

• 로그인: 관리자가 아이디와 비밀번호를 입력하여 로그인
• 장바구니: 전체 상품 리스트 확인 및 유저가 장바구니에 추가한 상품 리스트 확인
• 상품 옵션 선택: 장바구니에 담을 상품의 옵션과 개수를 선택
• 상품 옵션 수정: 장바구니에 담긴 상품의 옵션 수정 및 할인율 적용
• 새 상품 추가: 관리자가 POS에 새 상품을 추가하기 위해, 상품명/가격/옵션/이미지/카테고리 등을 입력하고 저장
• 상품 정보 수정: 관리자가 POS에 등록된 상품의 정보들을 수정하고 저장
• 새 카테고리 추가: 관리자가 POS에 등록된 상품의 카테고리를 새로 생성하기 위해, 카테고리명과 해당 카테고리에 포함시킬 상품들을 등록
• 카테고리 정보 수정: 관리자가 POS에 등록된 카테고리 정보를 수정 및 삭제

• 정민지: 로그인, 장바구니, 상품 옵션 선택 및 수정, 새 카테고리 추가, 카테고리 정보 수정
• 성해호: 새 상품 추가, 상품 정보 수정

1. 로그인

• 아이디/패스워드 유효성 검사 통과 시, SignIn 버튼 활성화
• SignIn 버튼 클릭 시, 해당 계정을 서버에 POST 하여 유효하지 않은 계정이면 경고 문구를 띄우고, 유효하면 Checkout 페이지로 이동

2. 장바구니(Checkout)

• 전체 상품 리스트를 보여주고, 상품명 또는 SKU Number로 상품 검색 및 카테고리 선택 시 해당 카테고리 상품으로 필터링
• 유저가 장바구니에 추가한 상품 리스트 확인 및 삭제 기능, 상품 추가할 때 마다 실시간으로 총 가격 변동, Checkout 버튼 클릭 시 상품 주문 완료
• 주문 완료 시, 주문된 상품들의 리스트와 할인율을 적용한 총 가격 보여주는 기능

3. 상품 옵션 선택

• 전체 상품 리스트에서 상품을 클릭하면, 해당 상품의 정보를 서버에 요청하여 받아와서 띄워줌
• 관리자는 상품의 옵션들 중, 원하는 옵션과 수량을 선택하고 Add to Cart 버튼을 누르면 장바구니에 추가됨

4. 상품 옵션 수정

• 장바구니 리스트에서 수정하고자 하는 상품을 클릭하면, 유저의 장바구니에 담긴 해당 상품의 정보들을 불러와 띄워줌
• 관리자는 상품의 개수와 할인율을 수정할 수 있고, 카트에서 해당 상품을 삭제할 수도 있음
• 할인율은 Override 선택 시 입력된 가격을 적용하고, Percentage 선택 시 입력값 % 만큼 할인됨

5. 새 카테고리 추가

• 새로 추가할 카테고리의 이름을 입력하고, Search for products를 클릭하면 전체 상품 리스트를 보여주는 모달을 띄움
• 모달에서 이름으로 상품 검색 가능
• 모달에서 새로 생성한 카테고리에 포함시킬 상품들을 체크하고 Done 버튼을 누르면, 모달이 꺼지면서 선택한 상품 리스트를 보여줌
• Save 버튼을 누르면 새로운 카테고리가 생성되어 DB에 저장됨

6. 카테고리 수정

• 전체 카테고리 리스트에서 수정하고자 하는 카테고리를 클릭하면, 해당 카테고리 정보를 서버에 요청하여 카테고리명과 포함된 상품들을 받아와서 띄워줌
• 카테고리명이나 포함된 상품리스트를 수정할 수 있음. 상품 리스트에서 x 버튼을 누르면 서버와 DELETE 통신하여 즉시 삭제하고, 모달에서 다시 상품을 선택할 수 있음
• Save 버튼 클릭 시, 수정된 카테고리 정보가 DB에 저장됨