Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web

src/pages/setting/setting-page.tsx

@@ -6,15 +6,18 @@ import { ServiceLanguageBottomSheet } from '@/entities/alarm/ui/service-language
 import { APP_LANGUAGE, APP_LOGIN_TYPE } from '@/entities/common/model/constant';
 import { AppLanguage, HeaderType, LoginType } from '@/entities/common/model/types';
 import { useStore } from '@/shared/model/store';
-import { 
+import {
 	useSetHeaderTitle,
 	useSetHeaderType,
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 import { ChangeEvent, useEffect, useState } from 'react';
+import { useAppBridge } from '@/hooks/useAppBridge';
 
 export const SettingPage = () => {
   let userInfo = useStore.getState().UserStore.userInfo;
+  const { isPushNotificationEnabled, openAppSettings } = useAppBridge();
+
   useSetHeaderTitle('설정');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
@@ -27,6 +30,7 @@ export const SettingPage = () => {
   const {mutateAsync: appAlarmFind} = useAppAlarmFindMutation();
   const {mutateAsync: appAlarmConsent} = useAppAlarmConsentMutation();
 
+  const [pushNotificationEnabled, setPushNotificationEnabled] = useState<boolean>(false);
   const [alarmSetting, setAlarmSetting] = useState<Record<string, boolean>>({
     '21': false,
     '11': false,
@@ -40,6 +44,16 @@ export const SettingPage = () => {
   const onClickPrivacyPolicy = () => {
     window.open('https://www.nicevan.co.kr/privacy-policy', '_blank');
   };
+
+  const checkPushNotificationStatus = () => {
+    isPushNotificationEnabled().then((enabled) => {
+      setPushNotificationEnabled(enabled);
+    });
+  };
+
+  const onClickPushNotificationToggle = () => {
+    openAppSettings();
+  };
   
   const callAppAlarmFind = () => {
     if(userInfo.usrid){
@@ -88,6 +102,26 @@ export const SettingPage = () => {
   
   useEffect(() => {
     callAppAlarmFind();
+    checkPushNotificationStatus();
+
+    // 앱이 포어그라운드로 돌아올 때 푸시 알림 권한 상태 재확인
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        checkPushNotificationStatus();
+      }
+    };
+
+    const handleFocus = () => {
+      checkPushNotificationStatus();
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    window.addEventListener('focus', handleFocus);
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      window.removeEventListener('focus', handleFocus);
+    };
   }, []);
 
   return (
@@ -96,8 +130,8 @@ export const SettingPage = () => {
         <div className="sub-wrap">
           <div className="settings-header">
             <div className="settings-title">알림 수신 설정</div>
-            <label className="settings-switch">
-              <input type="checkbox" />
+            <label className="settings-switch" onClick={onClickPushNotificationToggle}>
+              <input type="checkbox" checked={pushNotificationEnabled} readOnly />
               <span className="slider"></span>
             </label>
           </div>
@@ -109,9 +143,10 @@ export const SettingPage = () => {
             <div className="settings-row">
               <div className="settings-row-title">서비스 운영 및 장애</div>
               <label className="settings-switch">
-                <input 
-                  type="checkbox" 
+                <input
+                  type="checkbox"
                   checked={ alarmSetting['21'] }
+                  disabled={ !pushNotificationEnabled }
                   onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '21') }
                 />
                 <span className="slider"></span>
@@ -120,9 +155,10 @@ export const SettingPage = () => {
             <div className="settings-row">
               <div className="settings-row-title">무이자 혜택 및 이벤트</div>
               <label className="settings-switch">
-                <input 
-                  type="checkbox" 
+                <input
+                  type="checkbox"
                   checked={ alarmSetting['11'] }
+                  disabled={ !pushNotificationEnabled }
                   onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '11') }
                 />
                 <span className="slider"></span>
@@ -131,9 +167,10 @@ export const SettingPage = () => {
             <div className="settings-row">
               <div className="settings-row-title">서비스 이용 및 정책 변경</div>
               <label className="settings-switch">
-                <input 
-                  type="checkbox" 
+                <input
+                  type="checkbox"
                   checked={ alarmSetting['31'] }
+                  disabled={ !pushNotificationEnabled }
                   onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '31') }
                 />
                 <span className="slider"></span>
@@ -142,9 +179,10 @@ export const SettingPage = () => {
             <div className="settings-row">
               <div className="settings-row-title">NICE소식 및 기타 정보</div>
               <label className="settings-switch">
-                <input 
-                  type="checkbox" 
+                <input
+                  type="checkbox"
                   checked={ alarmSetting['41'] }
+                  disabled={ !pushNotificationEnabled }
                   onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '41') }
                 />
                 <span className="slider"></span>
@@ -157,9 +195,10 @@ export const SettingPage = () => {
             <div className="settings-row">
               <div className="settings-row-title">정산처리 현황</div>
               <label className="settings-switch">
-                <input 
-                  type="checkbox" 
+                <input
+                  type="checkbox"
                   checked={ alarmSetting['61'] }
+                  disabled={ !pushNotificationEnabled }
                   onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '61') }
                 />
                 <span className="slider"></span>
@@ -168,9 +207,10 @@ export const SettingPage = () => {
             <div className="settings-row nopadding">
               <div className="settings-row-title">정산한도 알림</div>
               <label className="settings-switch">
-                <input 
-                  type="checkbox" 
+                <input
+                  type="checkbox"
                   checked={ alarmSetting['62'] }
+                  disabled={ !pushNotificationEnabled }
                   onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '62') }
                 />
                 <span className="slider"></span>