Osamloc Project

• 국내 대표 차(Tea) 브랜드 오설록을 모티브로 한 프로젝트입니다.
• 사이트 선정 이유
  • 처음 프로젝트인 만큼 그동안 배운 지식을 활용하여 e-커머스에 CRUD 기반으로 직접 기능들을 구현해보고 적용해볼 수 있는 사이트를 선정

1. 개발 기간 및 인원

• 개발 기간 : 2022.08.29 ~ 2022.09.08(11일)

• 프론트엔드 : 유상호, 김정연, 이동호, 이유나 (4명)

• 백엔드 : 김교은, 박지은 (2인)

• 프론트엔드 GitHub

• 백엔드 GitHub

• 팀 노션

2. 데이터 모델링

📎 dbdiogram 링크

3. 시연 영상

📎 유튜브 링크 - https://www.youtube.com/watch?v=jhNUPFSqefA (약 5분)

4. 적용 기술 및 구현 기능

4-1. 적용 기술(수정 필요)

• Front-end : JavaScript, React.js
• Back-end : JavaScript, Node.js, Express, bcrypt, JWT
• Database : MySQL
• HTTP : Postman
• Common : Slack, Zep, Notion, Git&Github

4-2. 구현 기능

프론트엔드

• 유상호

  • 제품 상세페이지
    • 제품별 댓글
      • 로그인 했을때만 댓글 추가가능
      • 내가 쓴 댓글만 삭제, 수정 가능
    • 상단 오른쪽 제품 갯수, 추가상품
      • 장바구니 클릭시 상품 갯수 포함 api 전달
      • 장바구니에 이미 존재하는 상품일 때 갯수만 추가
  • 제품 리스트 UI
    • 상위 필터 API
      • 리뷰많은순, 판매순, 신상품순, 높은 가격순, 낮은 가격순
    • 하위 필터 API
      • 전체, 잎차, 피라미드, 티백, 파우더
    • pagination
      • 요청받아오는 상품 갯수에 따라 구현

• 김정연

  • Main UI / 기능 구현
  • Main API 연동
  • Header

• 이동호

  • [장바구니] UI
  • [장바구니] 리스트 CRUD 기능 구현
  • [장바구니] 금액 합산 기능 추가
  • [결제페이지] UI
  • [결제페이지] 정규식 검증
  • [결제페이지] 주소API 연동
  • [결제페이지] 결제API 연동
  • [장바구니] 데이터 통신
  • [결제페이지] 데이터 통신

• 이유나

  • 로그인/ 회원가입 UI 기능 구현
  • 로그인/ 회원 가입 API 연동
  • Footer

백엔드

• 김교은

  • 카테고리 API
  • 상품 리스트 API
  • 상품 정렬 API
  • 장바구니 / 결제 API

• 박지은

  • 회원가입 / 로그인 API
  • 상품 상세 페이지 API
  • 리뷰 API

5. API Docs

📎 회원가입 / 로그인 / 상품 상세 페이지 / 리뷰 API
📎 카테고리 / 상품 필터, 정렬 / 상품 리스트 API
📎 장바구니 / 결제 API

---

Reference

• 이 프로젝트는 오설록 사이트를 참조하여 학습목적으로 만들었습니다.
• 실무수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다.