diff --git a/hooks/NotificationHooks.tsx b/hooks/NotificationHooks.tsx
new file mode 100644
index 000000000..20e5868f4
--- /dev/null
+++ b/hooks/NotificationHooks.tsx
@@ -0,0 +1,24 @@
+import { useToast } from "./custom/CustomToast";
+
+export const useRequestPermission = () => {
+ const toast = useToast();
+
+ const requestPermission = (func: () => void) => {
+ Notification.requestPermission().then((result) => {
+ if (result === "granted") {
+ func();
+ const notification = new Notification("알림 제목", {
+ body: "알림 내용입니다.",
+ icon: "url_to_icon.png",
+ tag: "message1", // 알림을 식별하기 위한 태그
+ });
+ notification.onclick = function () {
+ window.open("https://studyabout.herokuapp.com/home?location=suw&date=2024-05-15"); // 알림 클릭 시 웹사이트 열기
+ };
+ console.log(54);
+ }
+ });
+ };
+
+ return requestPermission;
+};
diff --git a/pages/home/index.tsx b/pages/home/index.tsx
index 683cc3e0a..cb1d0df5d 100644
--- a/pages/home/index.tsx
+++ b/pages/home/index.tsx
@@ -1,9 +1,11 @@
-import { useRouter, useSearchParams } from "next/navigation";
+import { Button } from "@chakra-ui/react";
import { useSession } from "next-auth/react";
+import { useRouter, useSearchParams } from "next/navigation";
import { useEffect } from "react";
import Slide from "../../components/layouts/PageSlide";
import { HAS_STUDY_TODAY } from "../../constants/keys/localStorage";
+import { useRequestPermission } from "../../hooks/NotificationHooks";
import EventBanner from "../../pageTemplates/home/EventBanner";
import HomeCategoryNav from "../../pageTemplates/home/HomeCategoryNav";
import HomeGatherSection from "../../pageTemplates/home/HomeGatherSection";
@@ -37,11 +39,20 @@ function Home() {
router.replace(initialUrl);
}
}, [session?.user, locationParam, dateParam]);
+ const AAA = useRequestPermission();
+
+ const B = () => {
+ console.log("test");
+ };
+ const handleClick = () => {
+ AAA(B);
+ };
return (
<>
+
diff --git a/pages/test.tsx b/pages/test.tsx
index 1461b0f0a..fc95a8289 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,6 +1,6 @@
/* eslint-disable */
-import { Box } from "@chakra-ui/react";
+import { Button } from "@chakra-ui/react";
import dayjs from "dayjs";
import { useState } from "react";
import { useRecoilValue } from "recoil";
@@ -9,6 +9,7 @@ import styled from "styled-components";
import { useGroupBelongMatchMutation, useMonthCalcMutation } from "../hooks/admin/mutation";
import { useAdminStudyRecordQuery } from "../hooks/admin/quries";
import { useImageUploadMutation } from "../hooks/image/mutations";
+import { useRequestPermission } from "../hooks/NotificationHooks";
import { studyDateStatusState } from "../recoils/studyRecoils";
function Test() {
const { data } = useAdminStudyRecordQuery(dayjs("2024-04-01"), dayjs("2024-04-07"), null, "인천");
@@ -65,68 +66,19 @@ function Test() {
A(formData);
};
+ const AAA = useRequestPermission();
+
+ const B = () => {
+ console.log("test");
+ };
+ const handleClick = () => {
+ AAA(B);
+ };
+
return (
<>
-
-
-
+
);