From b52814d1d5937e6f8f7c0e32cc9740e7b1bd3049 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A7=80=EC=B0=AC=EA=B7=9C?= <ckj9014@gmail.com>
Date: Mon, 2 Jan 2023 23:11:18 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Readme=20=EC=97=85=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=8A=B8=20(docker=20compose=20=EA=B4=80=EB=A0=A8=20=EC=84=A4?=
 =?UTF-8?q?=EB=AA=85=20=EC=B6=94=EA=B0=80)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 103 ++++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 72 insertions(+), 31 deletions(-)

diff --git a/README.md b/README.md
index c1bdfeb..576f362 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-<img src="https://user-images.githubusercontent.com/24591259/155010131-b34115a5-d393-4791-ab97-763d6eeb903d.png"/>
+<img src="https://user-images.githubusercontent.com/24591259/210239909-7dab9b9a-f796-4495-a58d-091d25e0dc7c.png"/>
 </p>
 
 # 🤩 Hey + Emoji = Heymoji 🏆
@@ -11,16 +11,14 @@
 좀 더 ``재미난 기능 + 완성도 있는 프로젝트``가 되기위해 유지보수는 지속적으로 할 예정입니다.💪<br/>
 FastAPI에 구조나 프로젝트 관련된 추가기능, 개선사항 ``PR``은 언제나 환영입니다! <br/>
 
-🙈 TMI: <br/> 
-아이콘은 이름 그대로 `랭크`에서 순간 `LoL랭크`가 떠올랐고, 제가 골드라서...😂<br/>
-디자인 잘하시는분 기여해 주세요!ㅋㅋ <br/><br/>
-
+<br/>
 
-# Server 🖥
 ## 👋  개요 
 ``Heymoji``는 ``Python 3.7.9``, ``FastAPI`` 로 개발되었습니다.<br/> 
 그 외 버전에서 패키지 및 동작에 대한 호환은 보장하지 않습니다. (근데 거의 다 될거에요 python 3 이상이면...아마두~😁 )<br/>
 
+<br/>
+
 ## 🛠  프로젝트 구조
 처음 Heymoji를 개발할때는 DDD 구조가 아니었습니다. <br/> 
 DDD에 대한 스터디를 위해 구조를 변경했으며 https://github.com/Ermlab/python-ddd 를 참고하였습니다.<br/> 
@@ -45,38 +43,58 @@ DDD에 대한 스터디를 위해 구조를 변경했으며 https://github.com/E
 ├── conf
 |   └── settings.py
 ├── scripts
-└── seed_work (프로젝트에서 기본적으로 제공해야하는 작업, 코드)
+├── migrations (alembic DB 마이그레이션 설정)
+├── seed_work (프로젝트에서 기본적으로 제공해야하는 작업, 코드)
+├── alembic.ini
+├── requirements.txt
+├── .env_sample
+├── docker-compose.yaml
+├── Dockerfile
+├── web.Dockerfile
+└── frontend (heymoji 웹페이지 관련 코드)
 ```
 
-## ⚙️ 패키지 설치
-```
-pip install -r requirements
-```
+<br/>
 
 ## 💾  세팅
-``.env``파일을 통해 환경변수 등을 세팅 할 수 있습니다.
-``.env_sample``을 참고하셔서 원하시는 타입의 이모지등을 세팅해 보세요!
+``.env_sample``을 참고해서 ``.env``파일을 생성합니다.<br/>
+원하시는 세팅으로 환경변수들을 세팅합니다.<br/>
 DB는 ``MySQL``을 사용합니다. 비동기 처리를 위해 ``aiomysql`` 와 함께 사용합니다.<br/>
 다른 DB 사용하려면 `config` 설정이 조금 달라질 수 있습니다.
 
 |이름|설명|
 |----|----|
 |ENV|배포환경 정의|
-|ALLOWED_EMOJI_TYPES|이모지 타입들을 정의합니다.|
 |REACTION_LIST|웹훅 리액션으로 허용된 이모지(reaction)들을 정의합니다.|
-|DAY_MAX_REACTION|하루 최대 사용할 수 있는 Reaction 개수 (선택요소 입니다.)|
+|ALLOWED_EMOJI_TYPES|핸들링할 이모지들을 정의합니다.|
+|DAY_MAX_REACTION|하루 최대 사용할 수 있는 Reaction 개수 (optinal)|
 |SLACK_TOKEN|슬랙 토큰|
 |BOT_NAME|슬랙봇 이름|
 |ERROR_CHANNEL|슬랙 에러 리포팅 채널|
 |HOST|DB 호스트|
 |PORT|DB 포트|
 |DATABASE|DB 이름|
-|USERNAME|DB 접속 유저네임
-|PASSWORD|DB 패스워드)|
+|USERNAME|DB 접속 유저네임|
+|PASSWORD|DB 패스워드|
+|DEFAULT_AVATAR_URL|기본 프로필 이미지 URL)|
 
+<br/>
+
+## 🐳  Docker-Compose 실행
+``.env``파일을 생성한뒤 `docker-compose up -d` 를 실행합니다.<br/>
+몇분후 api, web, db 컨테이너가 모두 실행 된 후 http://127.0.0.1:8080 에 접속하여 동작을 확인합니다.<br/>
+
+<img width="352" alt="스크린샷 2023-01-02 오후 10 54 35" src="https://user-images.githubusercontent.com/24591259/210240727-139572eb-5874-4fb9-8cd5-fdbc4761cea7.png">
+
+`docker-comopse` 실행 전에 README 하단에 있는 `Slack Bot 설정` 설명을 먼저 보시고 `SlackToken` 같은 환경변수를 주입해주세요!
 
-## 💡  실행 
-`root경로`(/emoji_rank) 에 가서 <a href="https://www.uvicorn.org/">uvicorn</a>으로 서버를 실행시킵니다.<br/>
+<br/>
+
+## 💡  로컬 실행 
+```
+pip install -r requirements
+```
+`root경로`(/heymoji) 에 가서 <a href="https://www.uvicorn.org/">uvicorn</a>으로 서버를 실행시킵니다.<br/>
 백그라운드로 실행하기 위해서는 `&`를 마지막에 붙여주세요.
 ```
 uvicorn app.main:app --port 8080
@@ -88,11 +106,15 @@ uvicorn app.main:app --port 8080
 ```
 잘못된 프로세스 kill을 주의하세요!<br/>
 
+<br/>
+
 ## 📝  API 문서 및 테스트
 ``HOST_URL/docs``로 접속하면 ``Swagger``로 만들어진 web 페이지를 확인할 수 있습니다. (FastAPI는 swagger, redoc 지원) 
 <img src="https://user-images.githubusercontent.com/24591259/115111371-09f9d200-9fbb-11eb-8115-e0ff86d677fd.png" width="400px"/>
 <br/>
 
+<br/>
+
 ## 👾  슬랙 맨션 명령어
 |이름|설명|
 |----|----|
@@ -105,17 +127,33 @@ uvicorn app.main:app --port 8080
 
 
 ```
-ex) 실제 사용시 '{{ }}' 는 제거해주세요
-@슬랙봇 --create_user --name={{이름}} --avatar_url={{이미지URL}}
+🥳 멤버 등록
+이름은 필수 입니다!
+@EmojiBot --create_user --name=이름 --avatar_url=이미지URL --department=부서
+
+🛠 멤버 정보 업데이트
+업데이트할 정보만 적어주세요!
+@EmojiBot --update_user --avatar_url=이미지URL
+
+🎖 이번달 베스트 멤버 리스트 추출
+@EmojiBot --show_best_member --year=2022 --month=1
+
+🙈 유저 숨기기
+@EmojiBot --hide_user --slack_id=슬랙ID
+
+🙉 유저 보이기
+@EmojiBot --show_user --slack_id=슬랙ID
 ```
 
+<br/>
+
 ## 🧟‍♂️  프로세스 Live 체크 (선택)
 shell script로 간단하게 Live 체크를 진행 할 수 있습니다! 크론탭에 1분마다 실행하도록 등록.<br/>
 로깅도 추가하면 좋습니다.
 ```
 #! /bin/bash
 PYTHON_PATH=/{{ path }}/venv/bin/python
-SCRIPT_PATH=/{{ path }}/emoji_rank/app
+SCRIPT_PATH=/{{ path }}/heymoji/app
 
 checker=`ps aux | grep -v "grep" | grep "{{ 검색할 이름}}" | wc -l`
 
@@ -125,15 +163,15 @@ if [ "$checker" == "0" ]; then
 fi
 ```
 
-## 🏃🏻‍ 배치 스크립트 크론탭 등록 (선택)
-멤버당 하루에 허용된 ``DAY_MAX_REACTION`` 만큼 이모지(Emoji)를 다른 멤버에게 줄 수 있도록 했습니다.<br/>
-매일 자정에 다시 ``DAY_MAX_REACTION``만큼 카운트를 리셋하는 배치 스크립트를 ``크론탭``에 등록합니다.<br/>
-저는 ``쉘스크립트``를 만들어서 ``크론탭``에 등록했습니다.
+## ~🏃🏻‍ 배치 스크립트 크론탭 등록~
+~멤버당 하루에 허용된 ``DAY_MAX_REACTION`` 만큼 이모지(Emoji)를 다른 멤버에게 줄 수 있도록 했습니다.~<br/>
+~매일 자정에 다시 ``DAY_MAX_REACTION``만큼 카운트를 리셋하는 배치 스크립트를 ``크론탭``에 등록합니다.~<br/>
+~저는 ``쉘스크립트``를 만들어서 ``크론탭``에 등록했습니다.~
 ```
 #!/bin/bash
 
 PYTHON_PATH=/{{ path }}/venv/bin/python
-SCRIPT_PATH=/{{ path }}/emoji_rank/scripts/update_emoji_count.py
+SCRIPT_PATH=/{{ path }}/heymoji/scripts/update_emoji_count.py
 
 source '{{ path }}/venv/bin/activate'
 
@@ -142,12 +180,15 @@ $PYTHON_PATH $SCRIPT_PATH
 <br/>
 
 # 🤖 Slack Bot 설정 
+<img width="400" alt="스크린샷 2023-01-02 오후 10 12 32" src="https://user-images.githubusercontent.com/24591259/210241355-8add5de3-b9ea-4156-a500-682b04a4040b.png">
+
+위 화면에서 슬랙토큰을 copy하여 ``.env`` 파일에 추가합니다.
+
 <img src="https://user-images.githubusercontent.com/24591259/114943304-bf743a80-9e80-11eb-85ad-30cb26591ea3.png" width="400px"/>
 
 https://api.slack.com/apps 에 접속하여 create app 버튼을 클릭한 후, <br/>
 원하는 ``workspace``에 ``app``을 생성해주세요!
 
-
 <img src="https://user-images.githubusercontent.com/24591259/114943770-78d31000-9e81-11eb-84fc-3e5964591eed.png" width="400px"/>
 
 `Basic Information` 탭을 클릭후 하단에서 app의 ``프로필 이미지``를 추가하고 Save 해줍니다.<br/>
@@ -178,10 +219,10 @@ https://api.slack.com/apps 에 접속하여 create app 버튼을 클릭한 후,
 
 마지막으로 `app`을 `workspace`에 설치(install)하면 설정한 이벤트가 일어날때마다 `slack`에서 `Heymoji`서버로 웹훅 api를 호출합니다.
 
+<br/>
 
-# 프론트 예제 📲
-![vllo 5](https://user-images.githubusercontent.com/24591259/115112136-0405f000-9fbf-11eb-8fcf-9527d0bc5188.GIF)
+# 웹페이지 📲
+<img width="2189" alt="스크린샷 2023-01-02 오후 11 03 36" src="https://user-images.githubusercontent.com/24591259/210241714-9ccd6cdc-5eaa-41d3-ac82-b9de99f6ea6e.png">
 
 간단하게 ``vue``프로젝트에서 `Heymoji`의 api를 호출해 **User list**를 보여주도록 만들어 봤습니다.<br/>
 이모지 추가, 제거 event에 따라 서버에서 count 로직을 처리해주는걸 확인 할 수 있습니다.
-<a href="https://github.com/JAY-Chan9yu/emoji_rank_web">Emoji rank web<a/> 프로젝트를 **clone** 해서 확인해보세요😃