wip

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;
+};

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 (
     <>
       <HomeInitialSetting />
       <HomeHeader />
+      <Button onClick={handleClick}>테스트 </Button>
       <Slide>
         <HomeCategoryNav />
         <HomeLocationBar />

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 (
     <>
       <Layout>
-        <Box w="72px" h="72px">
-          <div
-            style={{
-              width: "100%",
-              height: "100%",
-              justifyContent: "center",
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-            }}
-          >
-            <div
-              style={{
-                padding: "0 4px",
-                borderRadius: "8px",
-                textAlign: "center",
-                backgroundColor: "white",
-                fontWeight: "600",
-                fontSize: "12px",
-                whiteSpace: "nowrap",
-              }}
-            >
-              테스트테스트테스트
-            </div>
-            <button
-              style={{
-                width: "48px",
-                height: "48px",
-                padding: "8px",
-                borderRadius: "50%",
-                backgroundColor: "rgba(0, 194, 179, 0.1)",
-              }}
-            >
-              <div
-                style={{
-                  width: "100%",
-                  height: "100%",
-                  backgroundColor: "#00c2b3",
-                  borderRadius: "50%",
-                  display: "flex",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  color: "white",
-                  fontWeight: "700",
-                  padding: "4px",
-                }}
-              >
-                <div
-                  style={{
-                    width: "100%",
-                    height: "100%",
-                    borderRadius: "50%",
-                    backgroundColor: "white",
-                  }}
-                ></div>
-              </div>
-            </button>
-          </div>
-        </Box>
+        <Button onClick={handleClick}>테스트</Button>
       </Layout>
     </>
   );