feat: FCM 토큰 발급 기능 작성 (#183)

* chore: firebase 패키지 설치

* chore: 알림 권한 변경시 FCM 토큰 발급

* feat: 웹 푸쉬 아이콘을 모아밤 로고로 변경

* chore: .env 내용 수정

* style: TODO 주석 추가

* docs: readme 수정

* feat: 서버에 FCM 토큰 전달하는 기능 작성

.env.example

@@ -2,3 +2,12 @@ VITE_BACKEND_API_ENDPOINT= # 백엔드 API 주소. ex) https://something.com
 VITE_LOCALHOST= # 로컬 개발서버 주소. ex) http://localhost:1111
 VITE_DEPLOY_ENDPOINT= # 리액트 앱 배포 주소. ex) https://something.com
 VITE_KAKAO_LOGIN_CLIENT_ID= # 카카오 로그인 연동에 필요한 Client ID.
+
+VITE_FIREBASE_API_KEY= # Firebase 연동에 필요한 내용.
+VITE_FIREBASE_AUTH_DOMAIN= # Firebase 연동에 필요한 내용.
+VITE_FIREBASE_PROJECT_ID= # Firebase 연동에 필요한 내용.
+VITE_FIREBASE_STORAGE_BUCKET= # Firebase 연동에 필요한 내용.
+VITE_FIREBASE_MESSAGING_SENDER_ID= # Firebase 연동에 필요한 내용.
+VITE_FIREBASE_APP_ID= # Firebase 연동에 필요한 내용.
+VITE_FIREBASE_MEASUREMENT_ID= # Firebase 연동에 필요한 내용.
+VITE_FIREBASE_VAPID_PUBLIC_KEY= # FCM 연동에 필요한 내용.

.github/workflows/deploy.yml

@@ -37,6 +37,14 @@ jobs:
           AWS_S3_BUCKET: ${{ secrets.AWS_S3_DEV_WEB_HOST }}
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          VITE_FIREBASE_API_KEY: ${{ secrets.VITE_FIREBASE_API_KEY }}
+          VITE_FIREBASE_AUTH_DOMAIN: ${{ secrets.VITE_FIREBASE_AUTH_DOMAIN }}
+          VITE_FIREBASE_PROJECT_ID: ${{ secrets.VITE_FIREBASE_PROJECT_ID }}
+          VITE_FIREBASE_STORAGE_BUCKET: ${{ secrets.VITE_FIREBASE_STORAGE_BUCKET }}
+          VITE_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.VITE_FIREBASE_MESSAGING_SENDER_ID }}
+          VITE_FIREBASE_APP_ID: ${{ secrets.VITE_FIREBASE_APP_ID }}
+          VITE_FIREBASE_MEASUREMENT_ID: ${{ secrets.VITE_FIREBASE_MEASUREMENT_ID }}
+          VITE_FIREBASE_VAPID_PUBLIC_KEY: ${{ secrets.VITE_FIREBASE_VAPID_PUBLIC_KEY }}
 
       # - name: Invalidate CloudFront
       #   uses: chetan/invalidate-cloudfront-action@v2

README.md

@@ -1,7 +1,6 @@
 # 모아밤
 
 ## 개요
-
 > 열심히 사는 새가 벌레를 먹는다. 🐦🦉
 
 당신은 규칙적인 삶을 살고 계신가요? 혹시 집과 회사만을 오가는 일상에 치여 자신과의 약속을 미루고 있지는 않나요?  
@@ -15,7 +14,8 @@
 
 ## 개발 서버 실행 방법
 [➡️ 스토리북 URL](https://moabam-storybook.netlify.app/)  
-[➡️ 모아밤 배포 URL (현재 개발중!)](https://www.moabam.com/)
+[➡️ 모아밤 개발용 배포 URL (현재 개발중)](https://dev.moabam.com/)  
+[➡️ 모아밤 Production 배포 URL (준비중)](https://www.moabam.com/)  
 
 ```
 npm install