Merge branch 'fe/feat/fcm-token' into 'fe/develop'

Refactor: FCM 토큰 발급 후 서버에 바로 저장하도록 로직 개선

See merge request s11-s-project/S11P21S002!228
This commit is contained in:
정현조 2024-09-27 16:28:18 +09:00
commit b65590002a
3 changed files with 29 additions and 39 deletions

View File

@ -1,5 +1,6 @@
import api from '@/api/axiosConfig';
import { MemberResponse, RefreshTokenResponse } from '@/types';
import { getFcmToken } from './firebaseConfig';
export async function reissueToken() {
return api.post<RefreshTokenResponse>('/auth/reissue', null, { withCredentials: true }).then(({ data }) => data);
@ -13,8 +14,9 @@ export async function logout() {
return api.post('/auth/logout').then(({ data }) => data);
}
export async function saveFcmToken(token: string) {
return api.post('/auth/fcm', { token }).then(({ data }) => data);
export async function saveFcmToken() {
const fcmToken = await getFcmToken();
return api.post('/auth/fcm', { token: fcmToken }).then(({ data }) => ({ data, fcmToken }));
}
export async function createFcmNotification() {

View File

@ -1,5 +1,5 @@
import { initializeApp } from 'firebase/app';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getMessaging, onMessage } from 'firebase/messaging';
const firebaseConfig = {
apiKey: String(import.meta.env.VITE_FIREBASE_API_KEY),
@ -22,30 +22,31 @@ const getFcmToken = async () => {
return existingToken;
}
try {
const permission = await Notification.requestPermission();
// try {
// const permission = await Notification.requestPermission();
if (permission === 'granted') {
console.log('알림 권한이 허용되었습니다.');
// if (permission === 'granted') {
// console.log('알림 권한이 허용되었습니다.');
console.log('FCM 토큰 발급 중...');
const currentToken = await getToken(messaging, {
vapidKey: 'BApIruZrx83suCd09dnDCkFSP_Ts08q38trrIL6GHpChtbjQHTHk_38_JRyTiKLqciHxLQ8iXtie3lvgyb4Iphg',
});
console.log('FCM 토큰 발급 성공');
// console.log('FCM 토큰 발급 중...');
// const currentToken = await getToken(messaging, {
// vapidKey: 'BApIruZrx83suCd09dnDCkFSP_Ts08q38trrIL6GHpChtbjQHTHk_x38_JRyTiKLqciHxLQ8iXtie3lvgyb4Iphg',
// });
// console.log('FCM 토큰 발급 성공');
if (currentToken) {
sessionStorage.setItem('fcmToken', currentToken);
return currentToken;
}
// if (currentToken) {
// sessionStorage.setItem('fcmToken', currentToken);
// return currentToken;
// }
console.warn('FCM 토큰을 가져올 수 없습니다.');
} else {
console.log('알림 권한이 거부되었습니다.');
}
} catch (error) {
console.error('FCM 토큰을 가져오는 중 오류가 발생했습니다. : ', error);
}
// console.warn('FCM 토큰을 가져올 수 없습니다.');
// } else {
// console.log('알림 권한이 거부되었습니다.');
// }
// } catch (error) {
// console.error('FCM 토큰을 가져오는 중 오류가 발생했습니다. : ', error);
// }
return null;
};
const handleForegroundMessages = () => {

View File

@ -1,36 +1,23 @@
import { createFcmNotification, saveFcmToken } from '@/api/authApi';
import { getFcmToken, handleForegroundMessages } from '@/api/firebaseConfig';
import { handleForegroundMessages } from '@/api/firebaseConfig';
import { Button } from '@/components/ui/button';
export default function FirebaseTest() {
const handleSaveFcmToken = async () => {
const fcmToken = await getFcmToken();
if (fcmToken) {
await saveFcmToken(fcmToken);
return;
}
console.log('FCM 토큰이 없습니다.');
await saveFcmToken();
};
const handleCreateNotification = async () => {
await createFcmNotification();
};
handleSaveFcmToken();
handleForegroundMessages();
return (
<div>
<h1 className="heading p-2">hello, firebase!</h1>
<div className="p-2">
<Button
onClick={handleSaveFcmToken}
variant="outlinePrimary"
className="mr-2"
>
FCM
</Button>
<Button
onClick={handleCreateNotification}
variant="outlinePrimary"