버튼 누르면 알림권한 요청

 

// turtle_co/src/App.js

import React, { useEffect, useState } from 'react';
import {Routes, Route, Link} from "react-router-dom";

import './App.css';

function App() {
    // 맨 밑에 드래그
    const [notificationPermission, setNotificationPermission] = useState(null);

    // Notification 권한 요청
    const requestNotificationPermission = () => {
        Notification.requestPermission().then(permission => {
            setNotificationPermission(permission);
        });
    };

    // 알림 보내기
    const sendNotification = () => {
        if (notificationPermission === 'granted') {
            const notification = new Notification('전화가 왔습니다!', {
                body: '전화를 받으시겠습니까?',
            });

            notification.onclick = () => {
                // 전화 받기 동작 구현
                console.log('전화를 받았습니다!');
            };
        } else if (notificationPermission === 'denied') {
            alert('알림 권한이 거부되었습니다. 설정에서 허용해주세요.');
        } else {
            alert('알림 권한을 요청합니다.');
            requestNotificationPermission();
        }
    };

    return (
            <div>
                <h1>전화알림</h1>
                <button onClick={sendNotification}>전화받기</button>
            </div>
        </div>
    );
}

export default App;