Commit @1f69c05d37131066e9f06b97b7d45a656778c3e6

최정우 2023-05-08

230508 최정우 푸시 알림 관련 기능 추가

@1f69c05d37131066e9f06b97b7d45a656778c3e6

7517ff2

1f69c05

client/views/pages/App.jsx

--- client/views/pages/App.jsx

+++ client/views/pages/App.jsx


 function App() {
 
   /**************** Firebase 푸시 설정 (시작) ****************/
-  const [token, setToken] = React.useState('');
-
   const messaging = getMessaging();
-  getToken(messaging, {
-    vapidKey: 'BCVKYse4XZVC_IZHOBdq99RtUVHDtOwaPSv2tK3NNaJve2f-UTqmqOfQuJ-eZZbHDuPPeJyeStJtFjlACqtwz8s'
-  }).then((currentToken) => {
-    console.log('currentToken : ', currentToken);
-    if (currentToken) {
-      setToken(currentToken);
-
-      /* navigator.clipboard.writeText(currentToken).then(() => {
-          console.log("Text copied to clipboard... : ", currentToken);
-      }).catch(err => {
-          console.log('Something went wrong', err);
-      }); */
-
-      // Send the token to your server and update the UI if necessary
-      // ...
-    } else {
-      // Show permission request UI
-      console.log('No registration token available. Request permission to generate one.');
-      // ...
-    }
-  }).catch((err) => {
-    console.log('An error occurred while retrieving token. ', err);
-    // ...
-  });
-
+  
   onMessage(messaging, (payload) => {
     console.log('Message received. ', payload);
   });

     console.log('Message received. ', payload);
   }); */
 
-  function requestPermission() {
-    console.log("권한 요청 중...");
+  const [token, setToken] = React.useState(null);
+  const requestToken = (loginUser) => {
+    if (!window.Notification) {
+      console.log('[requestToken()] 푸쉬 알람을 지원하지 않는 브라우저라, 푸쉬 토큰을 가지고오지 않습니다.');
+    } else {
+      if (Notification.permission == "granted") {
+        getToken(messaging, {
+          vapidKey: 'BCVKYse4XZVC_IZHOBdq99RtUVHDtOwaPSv2tK3NNaJve2f-UTqmqOfQuJ-eZZbHDuPPeJyeStJtFjlACqtwz8s'
+        }).then((currentToken) => {
+          console.log('currentToken : ', currentToken);
+          if (currentToken) {
+            setToken(currentToken);
+
+            if (CommonUtil.isEmpty(loginUser) == false
+                && (CommonUtil.isEmpty(loginUser['push_token']) || loginUser['push_token'] != currentToken)) {  
+              loginUser['push_token'] = currentToken
+              userUpdateForPushToken(loginUser);
+            }
+      
+            /* navigator.clipboard.writeText(currentToken).then(() => {
+                console.log("Text copied to clipboard... : ", currentToken);
+            }).catch(err => {
+                console.log('Something went wrong', err);
+            }); */
+      
+          } else {
+            // Show permission request UI
+            console.log('No registration token available. Request permission to generate one.');
+            // ...
+          }
+        }).catch((err) => {
+          console.log('Firebase getToken Error ', err);
+        });
+      } else {
+        console.log('[requestToken()] 푸쉬 알람을 권한 : ', Notification.permission);
+      }
+    }
+  }
+
+  const [isPush, setIsPush] = React.useState(null);
+  const requestPermission = (loginUser) => {
     try {
-      Notification.requestPermission().then((permission) => {
-        if (permission === "granted") {
-          console.log("알림 권한이 허용됨");
-          // FCM 메세지 처리
-        } else {
-          console.log("알림 권한 허용 안됨");
-        }
-      });
+      if (!window.Notification) {
+        alert('푸쉬 알람을 지원하지 않는 브라우저입니다.');
+      } else {
+        Notification.requestPermission().then((permission) => {
+          console.log('permission : ', permission);
+          if (permission == "granted") {
+            setIsPush(true);
+
+            // FCM 메세지 처리
+            if (CommonUtil.isEmpty(loginUser) == false
+                && (CommonUtil.isEmpty(loginUser['is_push']) || loginUser['is_push'] == false)) {
+              loginUser['is_push'] = true;
+              userUpdateForIsPush(loginUser);
+            }
+          } else {
+            setIsPush(false);
+
+            if (CommonUtil.isEmpty(loginUser) == false
+                && (CommonUtil.isEmpty(loginUser['is_push']) || loginUser['is_push'] == true)) {
+              loginUser['is_push'] = false;
+              userUpdateForIsPush(loginUser);
+            }
+          }
+        });
+      }
     } catch (e) {
       console.error(e);
     }
   }
-
-  requestPermission();
   /**************** Firebase 푸시 설정 (종료) ****************/
 
 

       //로그인 사용자 정보 전역 변수에 저장
       dispatch(setLoginUser(data));
       //클라이언트 로그인 체크 (콜백)
-      clientLoginCheck(data);
+      if (CommonUtil.isEmpty(clientLoginCheck) == false) {
+        clientLoginCheck(data);
+      }
     }).catch((error) => {
       console.log('login() /user/loginUserSelectOne.json error : ', error);
+    });
+  };
+
+  //사용자 수정 (푸시 알림 여부)
+  const userUpdateForIsPush = (loginUser) => {
+    fetch("/user/userUpdateForIsPush.json", {
+      method: "POST",
+      headers: {
+        'Content-Type': 'application/json; charset=UTF-8'
+      },
+      body: JSON.stringify(loginUser),
+    }).then((response) => response.json()).then((data) => {
+      console.log("사용자 수정 (푸시 알림 여부) : ", data);
+      loginUserSelectOne();
+    }).catch((error) => {
+      console.log('login() /user/userUpdateForIsPush.json error : ', error);
+    });
+  };
+
+  //사용자 수정 (푸시 알림 토큰)
+  const userUpdateForPushToken = (loginUser) => {
+    fetch("/user/userUpdateForPushToken.json", {
+      method: "POST",
+      headers: {
+        'Content-Type': 'application/json; charset=UTF-8'
+      },
+      body: JSON.stringify(loginUser),
+    }).then((response) => response.json()).then((data) => {
+      console.log("사용자 수정 (푸시 알림 토큰) : ", data);
+      loginUserSelectOne();
+    }).catch((error) => {
+      console.log('login() /user/userUpdateForPushToken.json error : ', error);
     });
   };
 

           alert('권한 관련 에러 - 관리자에게 문의바랍니다.');
           console.log('권한 관련 에러 - 관리자에게 문의바랍니다 : ', loginResultData);
         }
+
+        if (CommonUtil.isEmpty(isPush)) {
+          requestPermission(loginResultData);
+        }
+        if (CommonUtil.isEmpty(token)) {
+          requestToken(loginResultData);
+        }
+      } else {
+        setIsPush(null);
+        setToken(null);
       }
     });
   }, [location]);

Add a comment

Open 0
Closed 0

List

...	...	@@ -47,34 +47,8 @@
47	47	function App() {
48	48
49	49	/************** Firebase 푸시 설정 (시작) **************/
50		- const [token, setToken] = React.useState('');
51		-
52	50	const messaging = getMessaging();
53		- getToken(messaging, {
54		- vapidKey: 'BCVKYse4XZVC_IZHOBdq99RtUVHDtOwaPSv2tK3NNaJve2f-UTqmqOfQuJ-eZZbHDuPPeJyeStJtFjlACqtwz8s'
55		- }).then((currentToken) => {
56		- console.log('currentToken : ', currentToken);
57		- if (currentToken) {
58		- setToken(currentToken);
59		-
60		- /* navigator.clipboard.writeText(currentToken).then(() => {
61		- console.log("Text copied to clipboard... : ", currentToken);
62		- }).catch(err => {
63		- console.log('Something went wrong', err);
64		- }); */
65		-
66		- // Send the token to your server and update the UI if necessary
67		- // ...
68		- } else {
69		- // Show permission request UI
70		- console.log('No registration token available. Request permission to generate one.');
71		- // ...
72		- }
73		- }).catch((err) => {
74		- console.log('An error occurred while retrieving token. ', err);
75		- // ...
76		- });
77		-
	51	+
78	52	onMessage(messaging, (payload) => {
79	53	console.log('Message received. ', payload);
80	54	});
...	...	@@ -83,23 +57,77 @@
83	57	console.log('Message received. ', payload);
84	58	}); */
85	59
86		- function requestPermission() {
87		- console.log("권한 요청 중...");
	60	+ const [token, setToken] = React.useState(null);
	61	+ const requestToken = (loginUser) => {
	62	+ if (!window.Notification) {
	63	+ console.log('[requestToken()] 푸쉬 알람을 지원하지 않는 브라우저라, 푸쉬 토큰을 가지고오지 않습니다.');
	64	+ } else {
	65	+ if (Notification.permission == "granted") {
	66	+ getToken(messaging, {
	67	+ vapidKey: 'BCVKYse4XZVC_IZHOBdq99RtUVHDtOwaPSv2tK3NNaJve2f-UTqmqOfQuJ-eZZbHDuPPeJyeStJtFjlACqtwz8s'
	68	+ }).then((currentToken) => {
	69	+ console.log('currentToken : ', currentToken);
	70	+ if (currentToken) {
	71	+ setToken(currentToken);
	72	+
	73	+ if (CommonUtil.isEmpty(loginUser) == false
	74	+ && (CommonUtil.isEmpty(loginUser['push_token']) \|\| loginUser['push_token'] != currentToken)) {
	75	+ loginUser['push_token'] = currentToken
	76	+ userUpdateForPushToken(loginUser);
	77	+ }
	78	+
	79	+ /* navigator.clipboard.writeText(currentToken).then(() => {
	80	+ console.log("Text copied to clipboard... : ", currentToken);
	81	+ }).catch(err => {
	82	+ console.log('Something went wrong', err);
	83	+ }); */
	84	+
	85	+ } else {
	86	+ // Show permission request UI
	87	+ console.log('No registration token available. Request permission to generate one.');
	88	+ // ...
	89	+ }
	90	+ }).catch((err) => {
	91	+ console.log('Firebase getToken Error ', err);
	92	+ });
	93	+ } else {
	94	+ console.log('[requestToken()] 푸쉬 알람을 권한 : ', Notification.permission);
	95	+ }
	96	+ }
	97	+ }
	98	+
	99	+ const [isPush, setIsPush] = React.useState(null);
	100	+ const requestPermission = (loginUser) => {
88	101	try {
89		- Notification.requestPermission().then((permission) => {
90		- if (permission === "granted") {
91		- console.log("알림 권한이 허용됨");
92		- // FCM 메세지 처리
93		- } else {
94		- console.log("알림 권한 허용 안됨");
95		- }
96		- });
	102	+ if (!window.Notification) {
	103	+ alert('푸쉬 알람을 지원하지 않는 브라우저입니다.');
	104	+ } else {
	105	+ Notification.requestPermission().then((permission) => {
	106	+ console.log('permission : ', permission);
	107	+ if (permission == "granted") {
	108	+ setIsPush(true);
	109	+
	110	+ // FCM 메세지 처리
	111	+ if (CommonUtil.isEmpty(loginUser) == false
	112	+ && (CommonUtil.isEmpty(loginUser['is_push']) \|\| loginUser['is_push'] == false)) {
	113	+ loginUser['is_push'] = true;
	114	+ userUpdateForIsPush(loginUser);
	115	+ }
	116	+ } else {
	117	+ setIsPush(false);
	118	+
	119	+ if (CommonUtil.isEmpty(loginUser) == false
	120	+ && (CommonUtil.isEmpty(loginUser['is_push']) \|\| loginUser['is_push'] == true)) {
	121	+ loginUser['is_push'] = false;
	122	+ userUpdateForIsPush(loginUser);
	123	+ }
	124	+ }
	125	+ });
	126	+ }
97	127	} catch (e) {
98	128	console.error(e);
99	129	}
100	130	}
101		-
102		- requestPermission();
103	131	/************** Firebase 푸시 설정 (종료) **************/
104	132
105	133
...	...	@@ -130,9 +158,43 @@
130	158	//로그인 사용자 정보 전역 변수에 저장
131	159	dispatch(setLoginUser(data));
132	160	//클라이언트 로그인 체크 (콜백)
133		- clientLoginCheck(data);
	161	+ if (CommonUtil.isEmpty(clientLoginCheck) == false) {
	162	+ clientLoginCheck(data);
	163	+ }
134	164	}).catch((error) => {
135	165	console.log('login() /user/loginUserSelectOne.json error : ', error);
	166	+ });
	167	+ };
	168	+
	169	+ //사용자 수정 (푸시 알림 여부)
	170	+ const userUpdateForIsPush = (loginUser) => {
	171	+ fetch("/user/userUpdateForIsPush.json", {
	172	+ method: "POST",
	173	+ headers: {
	174	+ 'Content-Type': 'application/json; charset=UTF-8'
	175	+ },
	176	+ body: JSON.stringify(loginUser),
	177	+ }).then((response) => response.json()).then((data) => {
	178	+ console.log("사용자 수정 (푸시 알림 여부) : ", data);
	179	+ loginUserSelectOne();
	180	+ }).catch((error) => {
	181	+ console.log('login() /user/userUpdateForIsPush.json error : ', error);
	182	+ });
	183	+ };
	184	+
	185	+ //사용자 수정 (푸시 알림 토큰)
	186	+ const userUpdateForPushToken = (loginUser) => {
	187	+ fetch("/user/userUpdateForPushToken.json", {
	188	+ method: "POST",
	189	+ headers: {
	190	+ 'Content-Type': 'application/json; charset=UTF-8'
	191	+ },
	192	+ body: JSON.stringify(loginUser),
	193	+ }).then((response) => response.json()).then((data) => {
	194	+ console.log("사용자 수정 (푸시 알림 토큰) : ", data);
	195	+ loginUserSelectOne();
	196	+ }).catch((error) => {
	197	+ console.log('login() /user/userUpdateForPushToken.json error : ', error);
136	198	});
137	199	};
138	200
...	...	@@ -186,6 +248,16 @@
186	248	alert('권한 관련 에러 - 관리자에게 문의바랍니다.');
187	249	console.log('권한 관련 에러 - 관리자에게 문의바랍니다 : ', loginResultData);
188	250	}
	251	+
	252	+ if (CommonUtil.isEmpty(isPush)) {
	253	+ requestPermission(loginResultData);
	254	+ }
	255	+ if (CommonUtil.isEmpty(token)) {
	256	+ requestToken(loginResultData);
	257	+ }
	258	+ } else {
	259	+ setIsPush(null);
	260	+ setToken(null);
189	261	}
190	262	});
191	263	}, [location]);

Delete comment