This commit is contained in:
focp212@naver.com
2025-10-27 16:57:47 +09:00
4 changed files with 98 additions and 19 deletions

View File

@@ -53,6 +53,12 @@ interface UseAppBridgeReturn {
openBiometricRegistrationPopup: () => Promise<boolean>;
// 간편 인증 등록 팝업 닫기
closeBiometricRegistrationPopup: () => Promise<void>;
// 푸시 알림 권한 확인
isPushNotificationEnabled: () => Promise<boolean>;
// 앱 설정 화면 열기
openAppSettings: () => Promise<void>;
}
export const useAppBridge = (): UseAppBridgeReturn => {
@@ -214,7 +220,7 @@ export const useAppBridge = (): UseAppBridgeReturn => {
console.warn('Web Share API failed:', error);
}
}
// 폴백: 클립보드에 복사
const shareText = `${content.title}\n${content.text}${content.url ? `\n${content.url}` : ''}`;
if (navigator.clipboard) {
@@ -225,10 +231,25 @@ export const useAppBridge = (): UseAppBridgeReturn => {
}
return;
}
return appBridge.safeCall(() => appBridge.shareContent(content));
}, [isNativeEnvironment]);
const isPushNotificationEnabled = useCallback(async (): Promise<boolean> => {
if (!isNativeEnvironment) {
return true;
}
const result = await appBridge.safeCall(() => appBridge.isPushNotificationEnabled(), false);
return result || false;
}, [isNativeEnvironment]);
const openAppSettings = useCallback(async (): Promise<void> => {
if (!isNativeEnvironment) {
return;
}
return appBridge.safeCall(() => appBridge.openAppSettings());
}, [isNativeEnvironment]);
return {
isNativeEnvironment,
isAndroid,
@@ -249,6 +270,8 @@ export const useAppBridge = (): UseAppBridgeReturn => {
requestRefreshToken,
registerBiometric,
openBiometricRegistrationPopup,
closeBiometricRegistrationPopup
closeBiometricRegistrationPopup,
isPushNotificationEnabled,
openAppSettings
};
};

View File

@@ -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>

View File

@@ -65,7 +65,13 @@ export enum BridgeMessageType {
GET_LANGUAGE = 'getLanguage',
// 메시지 카운트 업데이트
UPDATE_MESSAGE_COUNT = 'updateMessageCount'
UPDATE_MESSAGE_COUNT = 'updateMessageCount',
// 푸시 알림 권한 확인
IS_PUSH_NOTIFICATION_ENABLED = 'isPushNotificationEnabled',
// 앱 설정 화면 열기
OPEN_APP_SETTINGS = 'openAppSettings'
}
export interface DeviceInfo {

View File

@@ -195,6 +195,16 @@ class AppBridge {
return this.sendMessage(BridgeMessageType.UPDATE_MESSAGE_COUNT, { count });
}
// 푸시 알림 권한 확인
async isPushNotificationEnabled(): Promise<boolean> {
return this.sendMessage(BridgeMessageType.IS_PUSH_NOTIFICATION_ENABLED);
}
// 앱 설정 화면 열기
async openAppSettings(): Promise<void> {
return this.sendMessage(BridgeMessageType.OPEN_APP_SETTINGS);
}
// 네이티브 환경 체크
isNativeEnvironment(): boolean {
return !!(