인코스런에서 진행한 화장품 커머스 웹 어플리케이션 프로젝트입니다.
👉 사이트 바로가기: https://incourserun.cf 배포 중단

• Frontend: https://github.com/INCOURSE-RUN/2-incourserun-commerce-fe
• Backend: https://github.com/INCOURSE-RUN/2-incourserun-commerce-be

• 개발 기간: 2022.06.13 ~ 2022.07.29
• 개발 인원
  • Frontend: 1명 (박태준)
  • Backend: 2명 (모창일, 최보미)

• Kakao 계정 소셜로그인으로 간편하게 회원가입이 가능합니다.
• 이후 회원가입 페이지에서 추가정보를 작성하여 회원가입을 완료하고 서비스를 이용할 수 있습니다.

👇 카카오 로그인 시퀀스 다이어그램

👇 로그인 → 회원가입 → 메인페이지 → 로그아웃

• 메뉴바를 열어서 홈, 상품보기, 마이페이지로 이동할 수 있습니다.

• 상품 목록

  • 상품 목록의 상품카드들을 보고 상품의 간략한 정보를 알 수 있습니다.
  • 상품카드를 클릭하면 상품 상세페이지로 이동합니다.

• 상품 상세페이지

  • 상품의 상세정보, 구매정보 그리고 리뷰를 확인할 수 있습니다.

👇 메인페이지 → 상품목록 → 상세페이지

• 장바구니에서 상품보기에서 담은 상품들을 확인할 수 있습니다.
• 주문할 상품을 선택 및 수량 변경을 하고 결제하기 버튼을 눌러 주문결제로 넘어갑니다.

👇 장바구니 전체삭제 → 빈 장바구니 → 상품목록에서 장바구니 담기

• 상품선택 → 바로구매 또는 장바구니 → 결제하기로 주문을 진행할 수 있습니다.

👇 장바구니 → 주문 → 메인페이지

👇 상품 상세페이지 → 바로구매 → 주문목록

• 회원정보 수정
  • 프로필사진, 닉네임 등의 회원정보를 수정할 수 있습니다.
• 주문내역
  • 날짜별, 주문별로 주문내역을 확인할 수 있습니다.
• 내상품 리뷰
  • 배송완료된 상품에 대해 리뷰를 작성할 수 있습니다.
  • 주문별로 각 상품에 대해 1회만 작성 가능합니다.
• 회원탈퇴
  • 탈퇴 사유 및 '인코스런' 텍스트를 입력해야 탈퇴가 가능합니다.
  • 탈퇴하기 버튼을 누르면 탈퇴 사유가 저장되고 사용자 정보는 초기화되며, 카카오 계정 연동도 자동으로 해제됩니다.
• 로그아웃
  • 로그아웃 시 '로그아웃 하시겠습니까?'라는 팝업창이 뜹니다.
  • 확인 버튼을 누르면 로그아웃되고 로그인 화면으로 넘어갑니다.

👇 로그인 → 마이페이지 → 회원정보수정 → 로그아웃

👇 메인페이지 → 마이페이지 → 주문내역 → 주문취소 → 리뷰작성 → 리뷰내역

👇 마이페이지 → 탈퇴 → 재가입

프론트엔드에서는 이런점을 고려하였어요!

• Chakra UI를 사용하여 간편하고 직관적인 UI 컴포넌트 작성
• 전역상태 최소화 및 Redux Tool Kit을 사용하여 전역 State를 효율적으로 관리
• React Hook Form을 사용하여 사용자가 제출한 form 관리 및 유효성 검사
• 전역 axios instance를 사용하여 API 통신 및 로그인 token 관리

백엔드에서는 이런점을 고려하였어요!

• REST API 설계 규칙을 준수
• 일관성, 사용성을 고려한 API 설계
• Validation, Permission을 꼼꼼하게 검사
• 관리자 페이지에서 필요한 데이터들을 쉽게 찾아볼 수 있도록 기능 추가

• Ubuntu 20.04.4 LTS
• python 3.8
• pip 21.2.4
• Django 3.2.7
• Django Rest Framework 3.12.4

https://api.incourserun.cf/swagger/

commerce

*backend

• ./app
  • [App name]
    • migrations
    • views.pyorviewsets.py
    • urls.py
    • serializers.py
    • models.py
    • signals.py
    • admins.py
  • urls.py
• ./config
  • settings
    • base.py
    • dev.py
    • prod.py

*AWS 배포 및 서버 세팅

• .ebextension
• .github/workflow

장고의 app 폴더들이 있습니다.

urls.py는 app의 API url들을 config/urls/api 에 연결할 url들을 설정한 파일입니다.

app 폴더는 모델(model.py)과 그 모델의 API(views.py) 그리고 모델의 종속적인 모델을 함께 포함하고 있습니다. app 폴더는 모델 혹은 기능을 기준으로 분리되어 있습니다.

app 폴더의 하위 폴더로 migrations 폴더가 있습니다. DB와 관련된 파일로, 수정할 경우 DB 오류가 발생합니다.

config 폴더는 프로젝트의 구성 파일들을 관리하는 폴더입니다.

settings 폴더는 프로젝트의 세팅 파일들을 관리합니다.

urls는 루트 urls 폴더입니다. hosts.py로 서브 도메인에 따라 분리되어 있습니다.

Elastic Beanstalk 관련 파일이 있습니다.

Github action 관련 파일이 있습니다.

API가 구현되어 있는 파일입니다.

views.py에서 구현된 API들을 어떤 url에서 호출할 것인지 명시되어 있는 파일입니다.

기본적으로 프로젝트의 url은

{project name}.co.kr/api/v1/{app name}/...

형태로 연결됩니다. (*프로젝트에 따라 변동 될 수 있습니다.)

API 별로 필요한 serailizer들을 구현한 파일입니다.

Django Rest Framework의 serializer는 DB에서 조회한 object를 JSON 형태로 변환하거나, Request의 JSON 데이터를 python data type으로 변환합니다.

모델(table)이 선언되어 있습니다.

관리자 페이지에서 해당 모델의 페이지를 어떻게 구성할 것인지 구현되어 있습니다.

app 모델의 데이터 수정 혹은 생성에 따라 실행되는 함수가 구현되어 있습니다.

• 사용자 관련 모델이 있는 앱
• 모델
  • User: 사용자 모델
  • Social: 소셜로그인 모델
  • Withdrawal: 탈퇴 모델

• 상품 관련 모델이 있는 앱
• 모델
  • Product: 상품 모델

• 장바구니 관련 모델이 있는 앱
• 모델
  • Cart: 장바구니 모델

• 주문 관련 모델이 있는 앱
• 모델
  • Order: 주문 모델
  • OrderProduct: 주문-상품 모델
• Custom Command
  • seed_orders.py: 주문 데이터 자동 생성 커맨드

• 리뷰 관련 모델이 있는 앱
• 모델
  • Review
  • Photo
  • Reply