Merge remote-tracking branch 'origin/fcm-click' into feat/#72

kakao-tech-campus-2nd-step3 · Nov 15, 2024 · a2c1f5a · a2c1f5a
2 parents 03097e2 + 79a8957
commit a2c1f5a
Show file tree

Hide file tree

Showing 21 changed files with 3,146 additions and 306 deletions.
diff --git a/dist/assets/index-DNagE171.js b/dist/assets/index-DNagE171.js
diff --git a/dist/assets/index-KWo6zzW6.css b/dist/assets/index-KWo6zzW6.css
diff --git a/dist/assets/logo-CmO4ZKwy.svg b/dist/assets/logo-CmO4ZKwy.svg
diff --git a/dist/assets/mock2-BvRgIRQl.svg b/dist/assets/mock2-BvRgIRQl.svg
diff --git a/dist/assets/step1-DsUboUzH.svg b/dist/assets/step1-DsUboUzH.svg
diff --git a/dist/assets/step2-CJ8X2DvV.svg b/dist/assets/step2-CJ8X2DvV.svg
diff --git a/dist/assets/step3-DSVRkaDE.svg b/dist/assets/step3-DSVRkaDE.svg
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+    rel="stylesheet"
+  />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:[email protected]&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+    <script type="module" crossorigin src="/assets/index-DNagE171.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-KWo6zzW6.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "tsc": "tsc --noEmit"
+    "tsc": "tsc"
   },
   "dependencies": {
     "@emotion/react": "^11.13.3",

diff --git a/public/firebase-messaging-sw.js b/public/firebase-messaging-sw.js
@@ -24,8 +24,20 @@ messaging.onBackgroundMessage((payload) => {
   const notificationTitle = payload.notification.title;
   const notificationOptions = {
     body: payload.notification.body,
-    icon: "/icon.png", // 아이콘 이미지 경로
+    icon: "./src/assets/icon.png", // 아이콘 이미지 경로
+    data: { click_action: payload.data.click_action } // 클릭 시 이동할 URL을 data에 추가
   };
 
   self.registration.showNotification(notificationTitle, notificationOptions);
 });
+
+// 알림 클릭 이벤트 리스너 추가
+self.addEventListener("notificationclick", (event) => {
+  event.notification.close(); // 알림 닫기
+
+  // 알림에 설정된 URL로 이동
+  const targetUrl = event.notification.data.click_action || "https://splanet.co.kr/";
+  event.waitUntil(
+    clients.openWindow(targetUrl)
+  );
+});
diff --git a/src/api/hooks/useCreatePlan.ts b/src/api/hooks/useCreatePlan.ts
@@ -1,36 +1,3 @@
-// import { useMutation } from "@tanstack/react-query";
-// import { apiClient } from "../instance";
-
-// interface PlanCard {
-//   title: string;
-//   description: string;
-//   startDate: string;
-//   endDate: string;
-//   accessibility?: boolean;
-//   isCompleted?: boolean;
-// }
-// interface SavePlanData {
-//   deviceId: string;
-//   groupId: string;
-//   planCards: PlanCard[];
-// }
-// const savePlan = async (data: SavePlanData) => {
-//   const response = await apiClient.post("/api/gpt/plan/save", data);
-//   return response.data;
-// };
-
-// const useCreatePlan = (p0: {
-//   onSuccess: (data: any) => void;
-//   onError: (error: any) => void;
-// }) => {
-//   return useMutation({
-//     mutationFn: savePlan,
-//     onSuccess: p0.onSuccess,
-//     onError: p0.onError,
-//   });
-// };
-// export default useCreatePlan;
-
 import { useMutation, UseMutationOptions } from "@tanstack/react-query";
 import { AxiosResponse } from "axios";
 import { apiClient } from "@/api/instance";

diff --git a/src/api/hooks/useFcmOffsetUpdate.ts b/src/api/hooks/useFcmOffsetUpdate.ts
@@ -0,0 +1,34 @@
+import { useMutation } from "@tanstack/react-query";
+import { apiClient } from "../instance";
+
+interface FcmOffsetUpdateRequest {
+  token: string;
+  notificationOffset: number;
+}
+
+type FcmOffsetUpdateResponse = string;
+
+const useFcmOffsetUpdate = () => {
+  return useMutation<FcmOffsetUpdateResponse, Error, FcmOffsetUpdateRequest>({
+    mutationFn: async (data: FcmOffsetUpdateRequest) => {
+      // query parameter로 변경
+      const response = await apiClient.put<FcmOffsetUpdateResponse>(
+        "/api/fcm/update/notification-offset",
+        null, // body는 null로 설정
+        {
+          params: {
+            // query parameters로 전송
+            token: data.token,
+            notificationOffset: data.notificationOffset,
+          },
+        },
+      );
+      return response.data;
+    },
+    onError: (error) => {
+      console.error("FCM 알림 오프셋 업데이트 실패:", error);
+    },
+  });
+};
+
+export default useFcmOffsetUpdate;
diff --git a/src/api/hooks/useFcmUpdate.ts b/src/api/hooks/useFcmUpdate.ts
@@ -1,33 +1,35 @@
 import { useMutation } from "@tanstack/react-query";
-import { apiClient } from "../instance";
+import { apiClient } from "@/api/instance";
 
-interface FcmUpdateRequest {
+interface UpdateNotificationEnabledRequest {
   token: string;
-  isNotificatioinEnabled?: boolean;
-  notificationOffset?: number;
+  isNotificationEnabled: boolean;
 }
 
-interface FcmUpdateResponse {
-  message: string;
-}
-
-const useFcmUpdate = () => {
-  return useMutation<FcmUpdateResponse, Error, FcmUpdateRequest>({
-    mutationFn: async (data: FcmUpdateRequest) => {
-      const response = await apiClient.put<FcmUpdateResponse>(
-        "/api/fcm/update",
+export const useUpdateNotificationEnabled = () => {
+  return useMutation({
+    mutationFn: async ({
+      token,
+      isNotificationEnabled,
+    }: UpdateNotificationEnabledRequest) => {
+      const response = await apiClient.put(
+        `/api/fcm/update/notification-enabled?token=${token}&isNotificationEnabled=${isNotificationEnabled}`,
+        {}, // 빈 body
         {
-          token: data.token,
-          isNotificationEnabled: data.isNotificatioinEnabled ?? true,
-          notificationOffset: data.notificationOffset ?? 0,
+          withCredentials: true,
         },
       );
+
       return response.data;
     },
-    onError: (error) => {
-      console.error("FCM 토큰 업데이트 실패:", error);
+    onError: (error: any) => {
+      if (error.response?.status === 401) {
+        console.error("인증 정보가 없거나 만료되었습니다.");
+      } else {
+        console.error("알림 설정 업데이트 실패:", error);
+      }
     },
   });
 };
 
-export default useFcmUpdate;
+export default useUpdateNotificationEnabled;
diff --git a/src/assets/icon.png b/src/assets/icon.png
diff --git a/src/components/features/CustomCalendar/CustomCalendar.tsx b/src/components/features/CustomCalendar/CustomCalendar.tsx
@@ -234,6 +234,8 @@ const EventContent = ({
                 }
               `,
             ]}
+            role="button"
+            tabIndex={0}
             onClick={(e) => {
               e.stopPropagation();
               handleOptionClick("edit");
@@ -260,6 +262,8 @@ const EventContent = ({
                 }
               `,
             ]}
+            role="button"
+            tabIndex={0}
             onClick={(e) => {
               e.stopPropagation();
               handleOptionClick("delete");
@@ -286,10 +290,18 @@ const EventContent = ({
                 }
               `,
             ]}
+            role="button"
+            tabIndex={0}
             onClick={(e) => {
               e.stopPropagation();
               handleOptionClick("toggleComplete");
             }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleOptionClick("toggleComplete");
+              }
+            }}
           >
             완료
           </div>

diff --git a/src/components/features/DatePicker/DatePicker.tsx b/src/components/features/DatePicker/DatePicker.tsx
@@ -9,11 +9,12 @@ import "react-datepicker/dist/react-datepicker.css";
 // StyledInput 스타일 정의
 const StyledInput = styled.input`
   width: 100%;
-  padding: 12px; /* 좌우 패딩을 동일하게 유지 */
+  padding: 12px;
   margin-bottom: 10px;
   border: 1px solid #ccc;
   border-radius: 8px;
   font-size: 1rem;
+  margin-left: -20px;
   &:focus {
     outline: none;
     border-color: #39a7f7;
@@ -40,6 +41,20 @@ const CustomDateInput = forwardRef<HTMLInputElement, CustomDateInputProps>(
   ),
 );
 
+// CustomInputWrapper를 만들어 CustomDateInput을 감싸기
+const CustomInputWrapper = forwardRef<HTMLInputElement, CustomDateInputProps>(
+  ({ value, onClick, placeholder }, ref) => (
+    <div className="datepicker-wrapper">
+      <CustomDateInput
+        onClick={onClick}
+        ref={ref}
+        value={value}
+        placeholder={placeholder}
+      />
+    </div>
+  ),
+);
+
 interface ReactDatePickerProps {
   placeholderText: string;
   onDateChange: (date: Date | null) => void;
@@ -48,7 +63,7 @@ interface ReactDatePickerProps {
   dateFormat?: string;
 }
 
-const ReactDatePickerComponent = ({
+const ReactDatePicker = ({
   placeholderText,
   onDateChange,
   selectedDate,
@@ -119,6 +134,10 @@ const ReactDatePickerComponent = ({
             li.react-datepicker__time-list-item--selected:hover {
             background-color: #2196f3;
           }
+          /* Custom styling for the wrapper to set full width */
+          .datepicker-wrapper {
+            width: 100%;
+          }
         `}
       />
       <DatePicker
@@ -132,10 +151,11 @@ const ReactDatePickerComponent = ({
           showTimeSelect ? "yyyy/MM/dd HH:mm" : dateFormat
         } /* 시간 선택 시 포맷 포함 */
         popperPlacement="bottom-start"
-        customInput={<CustomDateInput placeholder={placeholderText} />}
+        wrapperClassName="datepicker-wrapper" /* Wrapper class name */
+        customInput={<CustomInputWrapper placeholder={placeholderText} />}
       />
     </>
   );
 };
 
-export default ReactDatePickerComponent;
+export default ReactDatePicker;
diff --git a/src/hooks/useNotificationSetup.ts b/src/hooks/useNotificationSetup.ts
@@ -0,0 +1,77 @@
+import { useEffect, useRef } from "react";
+import { requestForToken, setupOnMessageListener } from "@/api/firebaseConfig";
+import { apiClient } from "@/api/instance";
+
+const FCM_TOKEN_KEY = "fcm_token";
+
+// 모듈 레벨에서 전역 플래그 선언
+let isTokenRequestedGlobal = false;
+
+const useNotificationSetup = () => {
+  const tokenRequestedRef = useRef(false);
+
+  useEffect(() => {
+    const initializeFCM = async () => {
+      // 알림 API 지원 여부 확인
+      if (!("Notification" in window)) {
+        alert("현재 사용 중인 브라우저는 알림 기능을 지원하지 않습니다.");
+        return;
+      }
+
+      // 이미 토큰 요청이 진행 중이거나 완료된 경우 중복 실행 방지
+      if (isTokenRequestedGlobal || tokenRequestedRef.current) {
+        return;
+      }
+
+      try {
+        isTokenRequestedGlobal = true; // 전역 플래그 설정
+        tokenRequestedRef.current = true;
+
+        const existingToken = localStorage.getItem(FCM_TOKEN_KEY);
+        if (!existingToken) {
+          if (Notification.permission === "denied") {
+            return;
+          }
+
+          const permission = await Notification.requestPermission();
+          if (permission === "granted") {
+            const fcmToken = await requestForToken();
+            if (fcmToken) {
+              await apiClient.post("/api/fcm/register", { token: fcmToken });
+              localStorage.setItem(FCM_TOKEN_KEY, fcmToken);
+              console.log("New FCM token registered and saved:", fcmToken);
+            }
+          } else if (permission === "denied") {
+            alert(
+              "알림 권한이 거부되었습니다. 브라우저 설정에서 알림을 활성화해주세요.",
+            );
+          }
+        }
+
+        // 메시지 리스너 설정
+        setupOnMessageListener();
+      } catch (error) {
+        console.error("Failed to initialize FCM:", error);
+        // 에러 발생 시 플래그 초기화
+        isTokenRequestedGlobal = false;
+        tokenRequestedRef.current = false;
+      }
+    };
+
+    initializeFCM();
+
+    return () => {
+      tokenRequestedRef.current = false;
+    };
+  }, []);
+
+  const getFCMToken = () => {
+    return localStorage.getItem(FCM_TOKEN_KEY);
+  };
+
+  return {
+    getFCMToken,
+  };
+};
+
+export default useNotificationSetup;