From 68dd25237dca4f824f3a028327a67bd7b5621d1c Mon Sep 17 00:00:00 2001
From: G-hoon <new0126@naver.com>
Date: Wed, 25 Sep 2024 14:27:35 +0900
Subject: [PATCH] =?UTF-8?q?[feat/#58]=20=ED=91=B8=EC=8B=9C=20=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20=EC=9D=B4=EC=8A=88=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Posture/PostrueCrew.tsx |  3 ++
 src/hooks/useNotiMutation.ts           |  3 --
 src/hooks/useNotification.ts           | 40 +++++++++++++++++---------
 3 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/components/Posture/PostrueCrew.tsx b/src/components/Posture/PostrueCrew.tsx
index 5bd9c74..397aef4 100644
--- a/src/components/Posture/PostrueCrew.tsx
+++ b/src/components/Posture/PostrueCrew.tsx
@@ -201,6 +201,9 @@ export default function PostrueCrew(props: PostureCrewProps): ReactElement {
             value={NOTI_VALUE_MAP(notification?.duration)}
             onClick={onClickNotiAlarmTime}
           />
+          {!hasPermission && (
+            <div className="pt-2 text-sm text-amber-500">브라우저의 알람 권한 설정이 필요 합니다.</div>
+          )}
         </div>
 
         <div className="group relative">
diff --git a/src/hooks/useNotiMutation.ts b/src/hooks/useNotiMutation.ts
index 3313e70..820e017 100644
--- a/src/hooks/useNotiMutation.ts
+++ b/src/hooks/useNotiMutation.ts
@@ -13,9 +13,6 @@ export const useModifyNoti = (): UseMutationResult<notification, unknown, notifi
     mutationFn: (notification: notification) => {
       return registerNotification(notification)
     },
-    onSuccess: (data) => {
-      console.log(data)
-    },
   })
 }
 
diff --git a/src/hooks/useNotification.ts b/src/hooks/useNotification.ts
index eda0737..2eed7a6 100644
--- a/src/hooks/useNotification.ts
+++ b/src/hooks/useNotification.ts
@@ -1,30 +1,42 @@
-import { getNotification, notification } from "@/api/notification"
+import { getNotification } from "@/api/notification"
 import { useNotificationStore } from "@/store/NotificationStore"
-import { useQuery } from "@tanstack/react-query"
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
 
 export default function useNotification() {
   const { notification, setNotification } = useNotificationStore()
+  const [isLoading, setIsLoading] = useState(true)
 
   // Fetch group data
-  const { data, isLoading, error } = useQuery<{ data: notification }, Error>({
-    queryKey: ["notification"],
-    queryFn: getNotification,
-    staleTime: 60 * 1000,
-    retry: false,
-    enabled: !notification,
-  })
+  // const { data, isLoading, error } = useQuery<{ data: notification }, Error>({
+  //   queryKey: ["notification"],
+  //   queryFn: getNotification,
+  //   staleTime: 60 * 1000,
+  // })
+
+  // useEffect(() => {
+  //   if (data) {
+  //     setNotification(data.data)
+  //   }
+  // }, [data])
 
   useEffect(() => {
-    if (data) {
-      setNotification(data.data)
+    if (!notification) {
+      getNotification()
+        .then(({ data }) => {
+          setNotification(data)
+          setIsLoading(false)
+        })
+        .catch((error) => {
+          console.log("useNotification Error: ", error)
+          setIsLoading(false)
+        })
     }
-  }, [data])
+  }, [notification])
 
   return {
     notification,
     setNotification,
     isLoading,
-    error,
+    // error,
   }
 }