Skip to content

Commit

Permalink
docs: 리드미 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@alswlfl29
alswlfl29 committed Oct 16, 2023
1 parent 0460ef8 commit 43acd13
Showing 1 changed file with 138 additions and 129 deletions.
267 changes: 138 additions & 129 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,14 @@
</p>

## 🧐 Introduce
---

<table width="1200px">
<thead>
</thead>
<tbody>
<tr>
<td width="600" align="center">
<img width="600" alt="image" src="https://user-images.githubusercontent.com/101381901/216728674-4d8bab83-026a-4120-a471-0ea3367c04cc.png">
<img width="600" alt="image" src="https://github.com/AI-ary/docker-v2/assets/79428205/637452e9-d233-4e94-a7e2-75033b283be1">
</td>
<td width="600" align="center">
<div align="left">
Expand All @@ -31,12 +30,11 @@
이 세상에 단 하나밖에 없는 그림 일기를 작성해보세요<br/><br/>

<b>

🔗 [www.gdiary.org](http://www.gdiary.org)<br>

📓 [medium](https://medium.com/@dkfud2121/g-diary-3e90e87722a2)

</b>
현재는 서버 중지된 상태입니다!<br>

🔗 [www.aiary.net](https://www.aiary.net)<br>

</br>
</div>
</tr>
</tbody>
Expand All @@ -47,72 +45,89 @@
<br>
<br>

## 👾 System Architecture
---
<img width="1212" alt="image" src="https://user-images.githubusercontent.com/101381901/216712397-df6ccc50-34bd-4374-a9a4-8720fda1edcf.png">
<br>
<!-- ## 👾 System Architecture
<img width="1212" alt="image" src="">
<br>
<br>


<br> -->

## 🌈 Feature
---

### JWT를 이용한 회원가입, 로그인 <br>
<img width="1200" alt="image" src="https://user-images.githubusercontent.com/101381901/229361241-371da87f-867f-4557-8f9b-573e99d08447.gif">
<img width="1200" alt="image" src="https://user-images.githubusercontent.com/101381901/216731251-d66ed03a-7ba0-48bc-b101-04b468f17c6c.gif">

<img width="1200" alt="image" src="https://github.com/AI-ary/docker-v2/assets/79428205/e2ecc6c3-2dc2-466b-a995-4807ad39c9f6">
<img width="1200" alt="image" src="https://github.com/AI-ary/docker-v2/assets/79428205/3ff6cb4f-3917-4af6-bb67-242b02671517">
<br>
<br>

### 커버사진 변경 및 시작 <br>
<img width="1200" alt="image" src="https://user-images.githubusercontent.com/101381901/216731286-10efe23c-9591-40d6-affd-e3bee4c5547a.gif">
### 커버사진, 테마 변경 및 시작 <br>

<img width="1200" alt="image" src="https://github.com/AI-ary/docker-v2/assets/79428205/de584f0b-3ae3-40f5-a9e6-5667390019f2">
<img width="1200" alt="image" src="https://github.com/AI-ary/docker-v2/assets/79428205/42830812-b2a4-47de-8b81-d7683c4cfb84">
<br>
<br>

### 일기작성 <br>
### 일기작성(with 키워드) <br>

일기를 작성하고 <그림가져오기> 를 누릅니다. AI 로 키워드를 추출하여 이미지를 출력됩니다. <br> 그림을 선택하거나 <그림그리기>로 직접 그릴 수 있습니다.
<img width="1200" alt="image" src="https://user-images.githubusercontent.com/101381901/216731234-23cc91b4-1400-487a-b76c-25806416bb57.gif">
<img width="1200" alt="image" src="https://github.com/AI-ary/docker-v2/assets/79428205/c7dc1597-927b-45ff-93d0-7d65af27f9c4">
<br>
<br>

### 일기작성(with Dall-E) <br>

일기를 작성하고 <Dall-E> 를 누릅니다. Dall-E AI 로 추출된 이미지를 선택하여 그림일기를 완성할 수 있습니다.
<img width="1200" alt="image" src="https://github.com/AI-ary/docker-v2/assets/79428205/afc35ac2-964f-4c60-9b34-fe692877caa7">
<br>
<br>

### 캘린더로 일기 조회 <br>
<img width="1200" alt="image" src="https://user-images.githubusercontent.com/101381901/216731257-23c1fe92-95cf-4a02-b727-f3914af8c9f5.gif">

<img width="1200" alt="image" src="https://github.com/AI-ary/docker-v2/assets/79428205/241768ff-a4f5-4a8e-919b-f0b91bfa08d0">
<br>
<br>

### 작성방법 및 소개 <br>
<img width="1200" alt="image" src="https://user-images.githubusercontent.com/101381901/216731261-319b0159-f066-4747-884b-b9168463055f.png">
### 일기 검색<br>

<img width="1200" alt="image" src="https://github.com/AI-ary/docker-v2/assets/79428205/7420bb16-65d7-4dea-90f1-3306c5a5a517">

<br>
<br>
<br>

## 📹 [Demo]((https://www.youtube.com/watch?v=RCUEUDk4sVw))
[![Video Label](http://img.youtube.com/vi/nJmduw8adEg/0.jpg)](https://youtu.be/nJmduw8adEg)
<!-- ## 📹 [Demo](<(https://www.youtube.com/watch?v=RCUEUDk4sVw)>) -->

<br>
<br>
<br>

## 💻 Tech Stack
---

<p align="center">
<img src="https://img.shields.io/badge/vite-646CFF?style=for-the-badge&logo=vite&logoColor=white">
<img src="https://img.shields.io/badge/react-61DAFB?style=for-the-badge&logo=react&logoColor=black">
<img src="https://img.shields.io/badge/javascript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black">
<img src="https://img.shields.io/badge/typescript-3178C6?style=for-the-badge&logo=typescript&logoColor=white">
<img src="https://img.shields.io/badge/reactquery-FF4154?style=for-the-badge&logo=reactquery&logoColor=white">
<img src="https://img.shields.io/badge/zustand-F3DF49?style=for-the-badge&logo=zustand&logoColor=white">
<img src="https://img.shields.io/badge/styled components-DB7093?style=for-the-badge&logo=styledcomponents&logoColor=black">
<img src="https://img.shields.io/badge/Prettier-F7B93E?style=for-the-badge&logo=Prettier&logoColor=white"/>
<img src="https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge&logo=ESLint&logoColor=white"/>
</p>
<p align="center">
<img src="https://img.shields.io/badge/django-528DD7?style=for-the-badge&logo=django&logoColor=white">
<img src="https://img.shields.io/badge/DJANGO-REST-ff1709?style=for-the-badge&logo=django&logoColor=white&color=ff1709&labelColor=gray">
<img src="https://img.shields.io/badge/java-007396?style=for-the-badge&logo=java&logoColor=white">
<img src="https://img.shields.io/badge/springboot-6DB33F?style=for-the-badge&logo=springboot&logoColor=white">
<img src="https://img.shields.io/badge/springsecurity-6DB33F?style=for-the-badge&logo=springsecurity&logoColor=white">
<img src="https://img.shields.io/badge/JPA-6DB33F?style=for-the-badge&logo=JPA&logoColor=white">
<img src="https://img.shields.io/badge/gradle-02303A?style=for-the-badge&logo=gradle&logoColor=white">
<img src="https://img.shields.io/badge/python-3776AB?style=for-the-badge&logo=python&logoColor=white">
<img src="https://img.shields.io/badge/flask-000000?style=for-the-badge&logo=flask&logoColor=white">
<img src="https://img.shields.io/badge/Celery-37814A?style=for-the-badge&logo=Celery&logoColor=white">
<img src="https://img.shields.io/badge/RabbitMQ-FF6600?style=for-the-badge&logo=RabbitMQ&logoColor=white">
<img src="https://img.shields.io/badge/MySQL-4479A1?style=for-the-badge&logo=MySQL&logoColor=white">
<img src="https://img.shields.io/badge/NGINX-009639?style=for-the-badge&logo=NGINX&logoColor=white">
<img src="https://img.shields.io/badge/Gunicorn-499848?style=for-the-badge&logo=Gunicorn&logoColor=white">
<img src="https://img.shields.io/badge/Konlpy-CC1319?style=for-the-badge&logo=Konlpy&logoColor=white">
<img src="https://img.shields.io/badge/DallE 2-73398D?style=for-the-badge&logo=DallE&logoColor=white">

</p>
<p align="center">
Expand All @@ -122,8 +137,6 @@
<img src="https://img.shields.io/badge/Amazon RDS-527FFF?style=for-the-badge&logo=amazon%20rds&logoColor=black">
<img src="https://img.shields.io/badge/Docker-2496ED?style=for-the-badge&logo=Docker&logoColor=white">
<img src="https://img.shields.io/badge/Swagger-85EA2D?style=for-the-badge&logo=Swagger&logoColor=white">
<img src="https://img.shields.io/badge/Prometheus-E6522C?style=for-the-badge&logo=Prometheus&logoColor=black">
<img src="https://img.shields.io/badge/Grafana-F46800?style=for-the-badge&logo=grafana&logoColor=black">
</p>
<p align="center">
<img src="https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white">
Expand All @@ -136,150 +149,146 @@
</p>

```
- Frontend: React, Zustand
- Backend : Django, Django-Rest-FrameWork
- Web Server: Nginx,
- Frontend: Vite, React, TypeScript, React-Query, Zustand, Styled-Components
- Backend : SpringBoot, Spring-Security, JPA, Gradle, Flask
- Web Server: Nginx
- Asynchronous: Celery, Rabbitmq
- WSGI: Gunicorn
- Database: AWS RDS MySQL
- AI : KoNLPy
- Database: AWS RDS MySQL, Redis
- AI : KoNLPy, Dall-E 2
- Deployment: Docker, AWS EC2, AWS S3 bucket
- API Test : Postman
- API Documentation : Swagger
- Monitoring : prometheus, grafana
- Others: Github, Notion, Zoom, Slack, Figma
```

<br>
<br>
<br>

## 🎯 ERD
---
<img width="1212" alt="image" src="https://user-images.githubusercontent.com/101381901/216731058-2d32d322-e90b-470d-8cdc-481dd30c11e6.png">
<br>
<br>
<br>

## 📕 API
---
<img width="1212" alt="image" src="https://user-images.githubusercontent.com/101381901/229366236-61dd9c49-2af2-4475-9b44-b9fc6f0f80c4.png"><br>

- api/v1/auth : 사용자 정보 확인, 로그인, 로그아웃
- api/v1/users : 사용자 커버 이미지 변경
- api/v1/results : 결과 키워드 별 이미지 조회
- api/v1/text/ : 일기내용 키워드 추출 (AI)
- api/v1/join : 회원가입
- api/v1/diaries : 일기 목록 조회, 등록, 조회
<br>
<br>
<br>
### 일기, 유저 관련 API

## Monitoring
---
| node exporter | Django |
| :------------: | :-------------: |
| <img width="600" alt="image" src="https://user-images.githubusercontent.com/101381901/229364462-cd6923ec-37cf-45f1-9ea3-dea7ff1091b0.png"> | <img width="600" alt="image" src="https://user-images.githubusercontent.com/101381901/229364485-faa2ea13-0618-4ee3-9477-63fba291c283.png"> |
<img width="1212" alt="image" src="https://github.com/AI-ary/docker-v2/assets/79428205/03613f28-15f6-4a0b-b2ed-e9e50405b5da"><br>

- api/users/login : 사용자 정보 확인, 로그인
- api/users/logout: 로그아웃
- api/users/join : 회원가입
- api/users/profile: 사용자 커버 이미지 조회, 변경
- api/users/theme: 테마 변경

<br>
<br>
<br>

- api/diaries : 일기 목록 조회, 등록
- api/diaries/{diaryId}: 일기 삭제
- api/diaries/search: 일기 제목/내용 검색
<br>
<br>
<br>

## 🐳 How to start
---

### 1. clone the repository

```
git clone https://github.com/2023-SV-winter-bootcamp-G-Diary/G-Diary.git
git clone https://github.com/AI-ary/docker-v2.git
```

<br>
<br>

### 2. Set environment file <br>

Path: G-Diary/backend/config/my_settings.py<br>
Django secret key & MySQL 환경변수 & S3 bucket
```
from pathlib import Path
BASE_DIR = Path(__file__).resolve().parent.parent
MY_SECRET = {
"SECRET_KEY" : ''
}
MY_DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME' : '',
'USER' : '',
'PASSWORD' : '',
'HOST': '',
'PORT': '3306',
'OPTIONS':{
'init_command' : "SET sql_mode='STRICT_TRANS_TABLES'"
}
}
}
MY_AWS_ACCESS_KEY_ID = {
"AWS_ACCESS_KEY_ID" :''
}
MY_AWS_ACCESS_ACCESS_KEY = {
"AWS_SECRET_ACCESS_KEY" : ""
}
MY_STORAGE_BUCKET_NAME = {
"BUCKET_NAME" : ""
}
```
<br>
Path: /G-Diary/backend/.env
MySQL container 환경 변수 & RabbitMQ 환경변수
Path: /docker-v2/backend-spring/src/main/resources/application.yml<br>
RDS, Redis, JWT 추가

```
DEBUG=False
MYSQL_DATABASE=
MYSQL_ROOT_PASSWORD=
MYSQL_PORT=3306
TZ=Asia/Seoul
RABBITMQ_HOST=
RABBITMQ_USER=
RABBITMQ_PASSWORD=
RABBITMQ_VHOST=
server:
servlet:
context-path: /api
spring:
application:
name: aiary
jpa:
database: mysql
show-sql: true
hibernate:
ddl-auto: update
properties:
hibernate:
dialect: org.hibernate.dialect.MySQL8Dialect
format_sql: true
generate-ddl: true
redis:
host: localhost # 로컬: localhost / docker: redis
port: 6379
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url:
username:
password:
cloud:
aws:
s3:
bucket:
stack.auto:
region.static:
credentials:
accessKey:
secretKey:
jwt:
secret:
```
<br>
Path: /G-Diary/frontend/.env.local <br>
카카오톡 공유하기 환경변수 (현재 로컬에서만 가능)

```
REACT_APP_KAKAO_KEY=''
```
<br>
Path: /G-Diary/.env <br>
RabbitMQ 환경변수
Path: /docker-v2/Ai-flask/.env
AI 환경변수

```
RABBITMQ_HOST=
# Dalle Open AI
OPEN_AI_KEY=
# Database
DB_USERNAME=
DB_PASSWORD=
DB_HOST=
DB_SCHEMA=
DB_PORT=
# RabbitMq
RABBITMQ_USER=
RABBITMQ_PASSWORD=
RABBITMQ_VHOST=
# S3
ACCESS_KEY_ID=
SECRET_ACCESS_KEY=
S3_BUCKET_REGION=
S3_BUCKET_NAME=
```

<br>
<br>

### 3. Run

```
docker-compose -f docker-compose.prod.yml up --build
```

<br>
<br>
<br>

## 👨‍💻 Members
---
| [박희경](https://github.com/gmlrude) | [이민지](https://github.com/alswlfl29) | [임광수](https://github.com/gs0428) |
| --- | --- | --- |
| <img width = "520" src="https://avatars.githubusercontent.com/u/101381901?v=4"> |<img width = "520" src ="https://avatars.githubusercontent.com/u/79428205?v=4"> | <img width = "520" src ="https://avatars.githubusercontent.com/u/114225974?v=4"> |
| Leader, Backend, DevOps | Frontend, DevOps | Frontend |

| [고원준](https://github.com/KoneJ) | [박희경](https://github.com/gmlrude) | [박준수](https://github.com/GaBaljaintheroom) | [이민지](https://github.com/alswlfl29) | [임광수](https://github.com/gs0428) | [이예은]() |
| ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| <img width = "520" src="https://avatars.githubusercontent.com/u/86594108?v=4"> | <img width = "520" src ="https://avatars.githubusercontent.com/u/101381901?v=4"> | <img width = "520" src ="https://avatars.githubusercontent.com/u/97604953?v=4"> | <img width = "520" src ="https://avatars.githubusercontent.com/u/79428205?v=4"> | <img width = "520" src ="https://avatars.githubusercontent.com/u/114225974?v=4"> | <img width = "520" src ="https://github.com/AI-ary/docker-v2/assets/79428205/999c40dd-aa19-4ae1-9b25-fb6f0350ed43"> |
| PM | Leader, Backend, DevOps | Backend, DevOps | Frontend | Frontend | Design |

![Footer](https://capsule-render.vercel.app/api?type=waving&color=auto&height=200&width=1212&section=footer)

0 comments on commit 43acd13

Please sign in to comment.