SmartCart - Frontend

Smart Cart  🛒

온/오프라인 마트 최저가 비교 서비스
Explore the team »

 📖 목차

1.   🔍 Introduction
2.   📹 Demo
3.   💻 Architecture
4.   💡 Tech Stack
5.   🗂️ Database
6.   📗 API
7.   🤝 Git Convention
8.   📂 Package Convention
9.   👨‍👩‍👧‍👧 Team

🔍 Introduction

Description

물가가 치솟는 요즘, 장보기가 부담스럽진 않으신가요?
오프라인 매장의 "특가" 상품이 정말 최저가인지, 소비자의 의문을 해결하고자 합니다.
스마트카트가 오프라인과 온라인의 가격을 실시간으로 비교해 현명한 소비를 도와드립니다.

Main Feature

• PWA 지원 :  웹 내에서 간편하게 앱을 설치할 수 있도록 안내
• 소셜 로그인 :  Google, Naver, Kakao 계정으로 간편하게 로그인
• 체크리스트 :  장 볼 항목을 손쉽게 관리
• 스마트 렌즈 :  오프라인 매장의 가격표 촬영 후, 온라인 최저가와 비교 확인
  • 1단계 :  ChatGPT Vision API - 촬영한 가격표의 '상품명, 용량, 가격' 추출
  • 2단계 :  Naver Shopping API - 해당 상품의 온라인 최저가 목록 3곳 제공
  • 3단계 :  ChatGPT Text API - 최저가 목록의 불필요한 내용을 깔끔히 정리
• 장바구니 :  원하는 상품을 선택하여 담고, 총 결제 금액 및 절약 금액을 확인
• 내 정보 :  스마트카트로 아낀 누적 절약 금액 확인

📹 Demo

📀  Demo Video :  Play!

PWA 지원	소셜 로그인	체크리스트
PWA 웹앱 설치	구글, 네이버, 카카오 계정	장 볼 항목 관리

스마트 렌즈	장바구니	내 정보
가격표 촬영 & 최저가 비교	결제 금액 & 절약 금액	프로필 관리 & 누적 절약 금액

💻 Architecture

System

Network

💡 Tech Stack

Frontend	Backend	Security  &  DB	Deployment	Other

- Frontend : React, JavaScript
- Backend : Spring Boot, Java | Security, JWT, OAuth2 | MySQL
- External API : ChatGPT, Naver Shopping
- Deployment : AWS Amplify, AWS Elastic Beanstalk, Docker, Github Actions
- Documentation : Notion, Swagger

🗂️ Database

📗 API

🤝 Git Convention

Branch

• 반드시 "develop"에서 뻗어나와 develop으로 "merge" 되어야한다.
• main : 출시 배포 CI/CD용 branch (미사용)
• develop : 개발 배포 CI/CD용 branch
• feature : 기능 구현용 branch
• Issue_종류/#Issue_번호 : branch 생성

Issue

✨ Feat 🐛 Fix ♻️ Refactor ✅ Test
📁 File 📝 Docs 🔧 Chore ⚙️ Setting

종류	내용
✨ Feat	기능 구현
🐛 Fix	버그 수정
♻️ Refactor	코드 리팩토링
✅ Test	테스트 업무
📁 File	파일 이동 또는 삭제, 파일명 변경
📝 Docs	md, yml 등의 문서 작업
🔧 Chore	이외의 애매하거나 자잘한 수정
⚙️ Setting	빌드 및 패키지 등 프로젝트 설정

< Issue Title >
[Issue_종류] 구현_주요내용
ex-1) [Feat] 로그인 페이지 UI 구현
ex-2) [Feat] 로그인 페이지 기능 구현
ex-3) [Fix] 로그인 연동로직 오류 수정

Commit

< Commit Message >
[#Issue_번호] Issue_종류: 구현_내용
ex-1) [#32] Feat: 로그인 안내모달 UI 구현
ex-2) [#33] Feat: 로그인 기능 서버 연동
ex-3) [#34] Fix: 로그인 연동 API Path 수정

Pull Request

• Pull Request만 날리고, 중요 Approve는 reviewer가 한다.
• PR에 대해 최소 1명 이상의 승인이 있어야 Merge가 가능하다.

< PR Title >
[#Issue_번호] Issue_종류: 이슈내용
ex) [#32] Feat: 로그인 페이지 UI 구현

📂 Package Convention

Structure

├── .github : Issue 및 PR 템플릿
├── public : PWA 구성 파일
└── src
    ├── apis : Axios 인터셉터
    ├── assets : 이미지 파일
    ├── components
    │   ├── Modal : 모달
    │   └── Navigation : 네비바
    ├── pages
    │   ├── Product : 상품 페이지
    │   └── User : 사용자 페이지
    └── utils

 Detailed Structure : Open!

├── .github
│   ├── ISSUE_TEMPLATE
│   │   ├── custom.md
│   │   ├── feature.md
│   │   ├── fix.md
│   │   └── refactor.md
│   └── PULL_REQUEST_TEMPLATE.md
├── package.json
├── public
│   ├── carticon128.png
│   ├── carticon192.png
│   ├── carticon512.png
│   ├── favicon.ico
│   ├── index.html
│   ├── linkthumbnail.png
│   ├── manifest.json
│   └── service-worker.js
└── src
    ├── App.css
    ├── App.js
    ├── index.css
    ├── index.js
    ├── apis
    │   └── Api.jsx
    ├── assets
    │   └── images
    │       ├── google.png
    │       ├── kakao.png
    │       ├── mainicon.png
    │       ├── naver.png
    │       └── smartcartlogo.png
    ├── components
    │   ├── Modal
    │   │   ├── ConfirmModal.jsx
    │   │   └── DeleteUserModal.jsx
    │   └── Navigation
    │       └── BottomNav.jsx
    ├── pages
    │   ├── Product
    │   │   ├── CameraPage.jsx
    │   │   ├── CartPage.jsx
    │   │   ├── ItemInfoPage.jsx
    │   │   └── LowestItemPage.jsx
    │   └── User
    │       ├── LoginPage.jsx
    │       ├── MainPage.jsx
    │       └── MyPage.jsx
    └── utils
        └── CheckToken.js

👨‍👩‍👧‍👧 Team

사현진	김희원	목경민
FullStack Developer, DevOps Engineer	Frontend Developer, Designer	Frontend Developer, Designer