💸 가계부를 자동으로 입력해준다고? SHOW ME THE MONEY 💸

가계부를 직접 작성하지 않고, 자동으로 작성해주는 SMTM입니다!

SMTM과 함께 절약을 해보러 가볼까요?
: 네이버 OCR 를 활용해 영수증 사진을 넣으면 결제 정보를 자동으로 읽어 가계부를 작성해주는 웹 서비스

❓ WHAT IS SHOW ME THE MONEY?

1. 영수증 자동 작성

→ 영수증 사진만 넣으면 편리하게 자동 작성

2. 수입/지출 한눈에 그래프화

→ 수입/지출 그래프화
→ 용도별 지출 그래프화
→ 3개월 수입/지출/평균 그래프화

3. 과도한 지출 NO! 챌린지

→ 챌린지 금액 설정 후, 남은 금액 확인 ⇒ 나만의 과소비 지출 패턴 확인
→ 편하게 +1000씩 눌러 금액 설정

🌈 Table of Contents

• System Architecture
• Tech Stack
• Service
• ERD
• API
• Monitoring Tools
• File Directory
• Installation
• Member

📍 System Architecture

🛠️ Tech Stack

Frontend	Backend	DevOps	Monitoring	ETC

🔎 Service

[ First ]

[ Sign Up & Login ]

[ Income ]

[ Spending ]

[ Graph ]

[ Spending Challenge ]

✏ ERD

✨ API

Swagger

📊 Monitoring Tools

Prometheus & Grafana

Google Analytics

📂 File Directory

docker

📦docker
 ┣ 📂.github
 ┃ ┗ 📂workflows
 ┃ ┃ ┗ 📜Deploy.yml
 ┣ 📂backend
 ┃ ┣ 📂backend
 ┃ ┃ ┣ 📜.env
 ┃ ┃ ┣ 📜__init__.py
 ┃ ┃ ┣ 📜asgi.py
 ┃ ┃ ┣ 📜settings.py
 ┃ ┃ ┣ 📜urls.py
 ┃ ┃ ┗ 📜wsgi.py
 ┃ ┣ 📂income
 ┃ ┃ ┣ 📂migrations
 ┃ ┃ ┃ ┣ 📜0001_initial.py
 ┃ ┃ ┃ ┗ 📜__init__.py
 ┃ ┃ ┣ 📜__init__.py
 ┃ ┃ ┣ 📜admin.py
 ┃ ┃ ┣ 📜apps.py
 ┃ ┃ ┣ 📜models.py
 ┃ ┃ ┣ 📜serializers.py
 ┃ ┃ ┣ 📜tests.py
 ┃ ┃ ┣ 📜urls.py
 ┃ ┃ ┗ 📜views.py
 ┃ ┣ 📂mediafiles
 ┃ ┣ 📂ocr
 ┃ ┃ ┣ 📂migrations
 ┃ ┃ ┃ ┗ 📜__init__.py
 ┃ ┃ ┣ 📜__init__.py
 ┃ ┃ ┣ 📜admin.py
 ┃ ┃ ┣ 📜apps.py
 ┃ ┃ ┣ 📜models.py
 ┃ ┃ ┣ 📜serializers.py
 ┃ ┃ ┣ 📜tests.py
 ┃ ┃ ┣ 📜urls.py
 ┃ ┃ ┗ 📜views.py
 ┃ ┣ 📂prometheus
 ┃ ┣ 📂sample_swagger
 ┃ ┃ ┣ 📂migrations
 ┃ ┃ ┃ ┗ 📜__init__.py
 ┃ ┃ ┣ 📜__init__.py
 ┃ ┃ ┣ 📜admin.py
 ┃ ┃ ┣ 📜apps.py
 ┃ ┃ ┣ 📜models.py
 ┃ ┃ ┣ 📜open_api_params.py
 ┃ ┃ ┣ 📜serializers.py
 ┃ ┃ ┣ 📜tests.py
 ┃ ┃ ┣ 📜urls.py
 ┃ ┃ ┗ 📜views.py
 ┃ ┣ 📂sltaticfies
 ┃ ┣ 📂spending
 ┃ ┃ ┣ 📂migrations
 ┃ ┃ ┃ ┣ 📜0001_initial.py
 ┃ ┃ ┃ ┗ 📜__init__.py
 ┃ ┃ ┣ 📜__init__.py
 ┃ ┃ ┣ 📜admin.py
 ┃ ┃ ┣ 📜apps.py
 ┃ ┃ ┣ 📜models.py
 ┃ ┃ ┣ 📜serializers.py
 ┃ ┃ ┣ 📜tests.py
 ┃ ┃ ┣ 📜urls.py
 ┃ ┃ ┗ 📜views.py
 ┃ ┣ 📂spending_challenge
 ┃ ┃ ┣ 📂migrations
 ┃ ┃ ┃ ┣ 📜0001_initial.py
 ┃ ┃ ┃ ┗ 📜__init__.py
 ┃ ┃ ┣ 📜__init__.py
 ┃ ┃ ┣ 📜admin.py
 ┃ ┃ ┣ 📜apps.py
 ┃ ┃ ┣ 📜models.py
 ┃ ┃ ┣ 📜serializers.py
 ┃ ┃ ┣ 📜tests.py
 ┃ ┃ ┣ 📜urls.py
 ┃ ┃ ┗ 📜views.py
 ┃ ┣ 📂staticfiles
 ┃ ┃ ┣ 📂admin
 ┃ ┃ ┣ 📂drf-yasg
 ┃ ┃ ┗ 📂rest_framework
 ┃ ┣ 📂user
 ┃ ┃ ┣ 📂migrations
 ┃ ┃ ┃ ┣ 📜0001_initial.py
 ┃ ┃ ┃ ┗ 📜__init__.py
 ┃ ┃ ┣ 📜__init__.py
 ┃ ┃ ┣ 📜admin.py
 ┃ ┃ ┣ 📜apps.py
 ┃ ┃ ┣ 📜models.py
 ┃ ┃ ┣ 📜serializers.py
 ┃ ┃ ┣ 📜service.py
 ┃ ┃ ┣ 📜tests.py
 ┃ ┃ ┣ 📜urls.py
 ┃ ┃ ┗ 📜views.py
 ┃ ┣ 📜Dockerfile
 ┃ ┣ 📜db.sqlite3
 ┃ ┣ 📜manage.py
 ┃ ┣ 📜requirements.txt
 ┃ ┗ 📜secrets.json
 ┣ 📂data
 ┃ ┗ 📂grafana
 ┃ ┃ ┣ 📂alerting
 ┃ ┃ ┃ ┗ 📂1
 ┃ ┃ ┃ ┃ ┗ 📜__default__.tmpl
 ┃ ┃ ┣ 📂csv
 ┃ ┃ ┣ 📂file-collections
 ┃ ┃ ┣ 📂plugins
 ┃ ┃ ┣ 📂png
 ┃ ┃ ┗ 📜grafana.db
 ┣ 📂db
 ┃ ┣ 📜.env.db
 ┃ ┣ 📜.env.dev
 ┃ ┣ 📜.env.prod
 ┃ ┣ 📜.env.prod.db
 ┃ ┗ 📜Dockerfile
 ┣ 📂frontend
 ┃ ┣ 📂build
 ┃ ┗ 📂node_modules
 ┣ 📂frontend_repo
 ┃ ┣ 📂public
 ┃ ┃ ┣ 📂assets
 ┃ ┃ ┃ ┗ 📜user.png
 ┃ ┃ ┣ 📜favicon.ico
 ┃ ┃ ┣ 📜index.html
 ┃ ┃ ┣ 📜logo192.png
 ┃ ┃ ┣ 📜logo512.png
 ┃ ┃ ┣ 📜manifest.json
 ┃ ┃ ┣ 📜pig.ico
 ┃ ┃ ┗ 📜robots.txt
 ┃ ┣ 📂src
 ┃ ┃ ┣ 📂assets
 ┃ ┃ ┃ ┣ 📂fonts
 ┃ ┃ ┃ ┃ ┣ 📜LINESeedKR-Bd.ttf
 ┃ ┃ ┃ ┃ ┣ 📜LINESeedKR-Rg.ttf
 ┃ ┃ ┃ ┃ ┗ 📜LINESeedKR-Th.ttf
 ┃ ┃ ┃ ┗ 📂images
 ┃ ┃ ┃ ┃ ┣ 📜logo.svg
 ┃ ┃ ┃ ┃ ┣ 📜side_four.svg
 ┃ ┃ ┃ ┃ ┣ 📜side_one.svg
 ┃ ┃ ┃ ┃ ┣ 📜side_three.svg
 ┃ ┃ ┃ ┃ ┣ 📜side_two.svg
 ┃ ┃ ┃ ┃ ┗ 📜sm.svg
 ┃ ┃ ┣ 📂components
 ┃ ┃ ┃ ┣ 📂css
 ┃ ┃ ┃ ┃ ┣ 📜Button.css
 ┃ ┃ ┃ ┃ ┣ 📜Challenge.css
 ┃ ┃ ┃ ┃ ┣ 📜IntroSwiper.css
 ┃ ┃ ┃ ┃ ┣ 📜Login.css
 ┃ ┃ ┃ ┃ ┣ 📜Nav.css
 ┃ ┃ ┃ ┃ ┗ 📜Signup.css
 ┃ ┃ ┃ ┣ 📜BarChart.jsx
 ┃ ┃ ┃ ┣ 📜Button.jsx
 ┃ ┃ ┃ ┣ 📜Challenge.jsx
 ┃ ┃ ┃ ┣ 📜Header.jsx
 ┃ ┃ ┃ ┣ 📜IncomeAddModal.jsx
 ┃ ┃ ┃ ┣ 📜IntroSwiper.jsx
 ┃ ┃ ┃ ┣ 📜LineChart.jsx
 ┃ ┃ ┃ ┣ 📜Login.jsx
 ┃ ┃ ┃ ┣ 📜Nav.jsx
 ┃ ┃ ┃ ┣ 📜PieChart.jsx
 ┃ ┃ ┃ ┣ 📜ProgressCircle.jsx
 ┃ ┃ ┃ ┣ 📜Signup.jsx
 ┃ ┃ ┃ ┣ 📜SpendingAddModal.jsx
 ┃ ┃ ┃ ┗ 📜StatBox.jsx
 ┃ ┃ ┣ 📂pages
 ┃ ┃ ┃ ┣ 📂bar
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📂challenge
 ┃ ┃ ┃ ┃ ┗ 📜challenge.jsx
 ┃ ┃ ┃ ┣ 📂dashboard
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📂global
 ┃ ┃ ┃ ┃ ┣ 📜Sidebar.jsx
 ┃ ┃ ┃ ┃ ┗ 📜Topbar.jsx
 ┃ ┃ ┃ ┣ 📂income
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📂intro
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📂line
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📂login
 ┃ ┃ ┃ ┃ ┣ 📜login.jsx
 ┃ ┃ ┃ ┃ ┗ 📜signup.jsx
 ┃ ┃ ┃ ┣ 📂pie
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┗ 📂spending
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📜App.js
 ┃ ┃ ┣ 📜index.css
 ┃ ┃ ┣ 📜index.js
 ┃ ┃ ┣ 📜setupProxy.js
 ┃ ┃ ┗ 📜theme.js
 ┃ ┣ 📜.gitignore
 ┃ ┣ 📜README.md
 ┃ ┣ 📜db.json
 ┃ ┣ 📜package-lock.json
 ┃ ┗ 📜package.json
 ┣ 📂grafana
 ┃ ┗ 📂provisioning
 ┃ ┃ ┗ 📂dashboards
 ┃ ┃ ┃ ┣ 📜dashboard.yml
 ┃ ┃ ┃ ┗ 📜docker_host.json
 ┣ 📂nginx
 ┃ ┣ 📂log
 ┃ ┃ ┣ 📜access.log
 ┃ ┃ ┗ 📜error.log
 ┃ ┣ 📜Dockerfile
 ┃ ┗ 📜nginx.conf
 ┣ 📂prometheus
 ┃ ┣ 📂consoles
 ┃ ┃ ┗ 📜django.html
 ┃ ┣ 📜django.rules
 ┃ ┗ 📜prometheus.yml
 ┣ 📜.DS_Store
 ┣ 📜.gitignore
 ┣ 📜README.md
 ┣ 📜docker-compose.logging.yml
 ┣ 📜docker-compose.prod.yml
 ┗ 📜docker-compose.yml

♻ Installation

1. Clone Repository

git clone https://github.com/2022-Winter-Bootcamp-Team-C/docker.git

2. Front-end : package.json 파일 수정

{
  "proxy": "http://<ip>:<server_port>",
}

3. terminal에서 docker 명령어 실행 🐳

docker-compose -f docker-compose.prod.yml -f docker-compose.logging.yml up --build
# DB table 생성
docker-compose -f docker-compose.prod.yml -f docker-compose.logging.yml exec backend python manage.py migrate --noinput 

👫 Member

Pictures
Name	김정연	이지원	유건	정진원	조은주
Position	Frontend Leader	Backend DevOps	Backend DevOps	Frontend	Backend DevOps
GitHub

💬 Medium

🇺🇸 Medium English.ver
🇰🇷 Medium Korean.ver

⬆️ Back to Top