feat: add isEmpty on src/utils & pwa script regist logic udpate

AboutClan · Aug 5, 2024 · 077bfc0 · 077bfc0
1 parent 17bd0b6
commit 077bfc0
Show file tree

Hide file tree

Showing 12 changed files with 11,130 additions and 46 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -53,5 +53,6 @@ module.exports = {
     "import/no-default-export": "off", // default export 금지 설정
     "react/react-in-jsx-scope": "off", // jsx를 쓸 때 React가 scope 에 있어야 하는지 여부
     "react-hooks/exhaustive-deps": "off", // React Hook useEffect의 의존성 배열 검사 비활성화
+    "@typescript-eslint/ban-types": "off",
   },
 };
diff --git a/components/BottomNav.tsx b/components/BottomNav.tsx
@@ -10,7 +10,7 @@ import { slideDirectionState } from "../recoils/navigationRecoils";
 import { isWebView } from "../utils/appEnvUtils";
 import { convertLocationLangTo } from "../utils/convertUtils/convertDatas";
 import { getBottomNavSize } from "../utils/mathUtils";
-import { NATIVE_METHODS } from "../utils/nativeMethodUtils";
+import { nativeMethodUtils } from "../utils/nativeMethodUtils";
 
 interface INavButtonProps {
   url: string;
@@ -69,7 +69,7 @@ function NavButton({ text, url, activeIcon, defaultIcon, active, idx }: INavButt
 
   const handleMove = () => {
     if (isWebView()) {
-      NATIVE_METHODS.HAPTIC();
+      nativeMethodUtils.haptic();
     }
     setSlideDirection(null);
   };

diff --git a/components/atoms/Icons/KakaoShareBtn.tsx b/components/atoms/Icons/KakaoShareBtn.tsx
@@ -4,7 +4,7 @@ import styled from "styled-components";
 
 import { REVIEW_DATA } from "../../../storage/Review";
 import { isWebView } from "../../../utils/appEnvUtils";
-import { NATIVE_METHODS } from "../../../utils/nativeMethodUtils";
+import { nativeMethodUtils } from "../../../utils/nativeMethodUtils";
 
 const kakaoAppKey = process.env.NEXT_PUBLIC_KAKAO_JS;
 
@@ -32,7 +32,7 @@ function KakaoShareBtn({
   const handleShareOnApp = () => {
     if (!isWebView()) return;
 
-    NATIVE_METHODS.SHARE(url);
+    nativeMethodUtils.share(url);
   };
 
   useEffect(() => {

diff --git a/components/molecules/ExternalLink.tsx b/components/molecules/ExternalLink.tsx
@@ -3,7 +3,7 @@ import NextLink from "next/link";
 import React, { type PropsWithChildren, type ReactHTML } from "react";
 
 import { isWebView } from "../../utils/appEnvUtils";
-import { NATIVE_METHODS } from "../../utils/nativeMethodUtils";
+import { nativeMethodUtils } from "../../utils/nativeMethodUtils";
 
 interface IExternalLink {
   href: string;
@@ -22,7 +22,7 @@ const ExternalLink = React.forwardRef<HTMLElement, PropsWithChildren<IExternalLi
           ...props,
           ref,
           className,
-          onClick: () => NATIVE_METHODS.OPEN_EXTERNAL_LINK(href),
+          onClick: () => nativeMethodUtils.openExternalLink(href),
         },
         children,
       );

diff --git a/hooks/fcm/mutaion.ts b/hooks/fcm/mutaion.ts
@@ -1,19 +1,15 @@
-import { isEmpty } from "lodash-es";
 import { useEffect } from "react";
 
-import { isPWA, isWebView } from "../../utils/appEnvUtils";
+import { isWebView } from "../../utils/appEnvUtils";
 import { urlBase64ToUint8Array } from "../../utils/convertUtils/convertBase64";
-import { NATIVE_METHODS } from "../../utils/nativeMethodUtils";
+import { nativeMethodUtils } from "../../utils/nativeMethodUtils";
+import { isEmpty } from "../../utils/validationUtils";
 import { registerPushServiceWithApp, registerPushServiceWithPWA } from "./apis";
 import { DeviceInfo } from "./types";
 import { requestNotificationPermission } from "./utils";
 
 export const usePushServiceInitialize = () => {
   useEffect(() => {
-    if (isPWA()) {
-      subscribePushServiceOnPWA();
-    }
-
     if (isWebView()) {
       const deviceInfoMessageListener = ({ data }: MessageEvent) => {
         if (typeof data === "string" && data.includes("deviceInfo")) {
@@ -23,19 +19,23 @@ export const usePushServiceInitialize = () => {
 
       window.addEventListener("message", deviceInfoMessageListener);
 
-      NATIVE_METHODS.GET_DEVICE_INFO();
+      nativeMethodUtils.getDeviceInfo();
 
       return () => {
         window.removeEventListener("message", deviceInfoMessageListener);
       };
+    } else {
+      subscribePushServiceOnPWA();
     }
   }, []);
 };
 
 const subscribePushServiceOnAPP = async (data: string) => {
   try {
-    const deviceInfos: DeviceInfo = JSON.parse(data);
-    if (!isEmpty(deviceInfos)) {
+    const deviceInfos: DeviceInfo = data ? JSON.parse(data) : {};
+    const hasInfos = !isEmpty(deviceInfos);
+
+    if (hasInfos) {
       await registerPushServiceWithApp({
         fcmToken: deviceInfos.fcmToken,
         platform: deviceInfos.platform,
@@ -53,15 +53,17 @@ const subscribePushServiceOnPWA = async () => {
   }
 
   try {
-    const registration = await navigator.serviceWorker.getRegistration();
-    const hasSubscription = await registration?.pushManager.getSubscription();
+    const register = await navigator.serviceWorker.register("/worker.js", {
+      scope: "/",
+    });
+    const hasSubscription = await register.pushManager.getSubscription();
 
     if (hasSubscription) {
       return;
     }
 
     const publicVapidKey = process.env.NEXT_PUBLIC_PWA_KEY;
-    const subscription = await registration?.pushManager.subscribe({
+    const subscription = await register?.pushManager.subscribe({
       userVisibleOnly: true,
       applicationServerKey: urlBase64ToUint8Array(publicVapidKey),
     });

diff --git a/modals/study/StudyInviteModal.tsx b/modals/study/StudyInviteModal.tsx
@@ -8,7 +8,7 @@ import { WEB_URL } from "../../constants/system";
 import { ModalSubtitle } from "../../styles/layout/modal";
 import { IModal } from "../../types/components/modalTypes";
 import { isWebView } from "../../utils/appEnvUtils";
-import { NATIVE_METHODS } from "../../utils/nativeMethodUtils";
+import { nativeMethodUtils } from "../../utils/nativeMethodUtils";
 import { IFooterOptions, ModalLayout } from "../Modals";
 const kakaoAppKey = process.env.NEXT_PUBLIC_KAKAO_JS;
 
@@ -34,7 +34,7 @@ function StudyInviteModal({ setIsModal, place }: IStudyInviteModal) {
   const handleShareOnApp = () => {
     if (!isWebView()) return;
 
-    NATIVE_METHODS.SHARE(url);
+    nativeMethodUtils.share(url);
   };
 
   useEffect(() => {

diff --git a/next.config.js b/next.config.js
@@ -6,7 +6,6 @@ const isProduction = process.env.NODE_ENV === "production";
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const withPWA = require("next-pwa")({
   dest: "public",
-  register: isProduction,
   disable: !isProduction,
   sourcemap: !isProduction,
 });

diff --git a/package.json b/package.json
@@ -28,7 +28,6 @@
     "dayjs": "^1.11.10",
     "framer-motion": "^11.0.3",
     "heic2any": "^0.0.4",
-    "lodash-es": "^4.17.21",
     "mongoose": "^8.1.1",
     "next": "^14.1.0",
     "next-auth": "^4.24.5",
@@ -57,7 +56,6 @@
     "@storybook/react": "^8.0.10",
     "@storybook/test": "^8.0.10",
     "@tanstack/eslint-plugin-query": "^5.28.11",
-    "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.11.17",
     "@types/react": "18.2.55",
     "@types/styled-components": "^5.1.34",

diff --git a/worker/index.js → public/worker.js b/worker/index.js → public/worker.js
diff --git a/utils/nativeMethodUtils.ts b/utils/nativeMethodUtils.ts
@@ -1,67 +1,53 @@
 import { NATIVE_CUSTOM_EVENTS } from "../constants/nativeCustomEvent";
 
-export const NATIVE_METHODS = {
-  HAPTIC: () => {
+export const nativeMethodUtils = {
+  haptic: () => {
     window.ReactNativeWebView?.postMessage(
       JSON.stringify({
         type: NATIVE_CUSTOM_EVENTS.HAPTIC,
       }),
     );
   },
-  VIBRATE: () => {
+  vibrate: () => {
     window.ReactNativeWebView?.postMessage(
       JSON.stringify({
         type: NATIVE_CUSTOM_EVENTS.VIBRATE,
       }),
     );
   },
-  OPEN_EXTERNAL_LINK: (link: string) => {
+  openExternalLink: (link: string) => {
     window.ReactNativeWebView?.postMessage(
       JSON.stringify({
         link,
         type: NATIVE_CUSTOM_EVENTS.OPEN_EXTERNAL_LINK,
       }),
     );
   },
-  SHARE: (link: string) => {
+  share: (link: string) => {
     window.ReactNativeWebView?.postMessage(
       JSON.stringify({
         link,
         type: NATIVE_CUSTOM_EVENTS.SHARE,
       }),
     );
   },
-  SEND_TEXT_MESSAGE: (number: number) => {
+  sendTextMessage: (number: number) => {
     window.ReactNativeWebView?.postMessage(
       JSON.stringify({
         number,
         type: NATIVE_CUSTOM_EVENTS.SEND_TEXT_MESSAGE,
       }),
     );
   },
-  CALL_PHONE: (number: number) => {
+  callPhone: (number: number) => {
     window.ReactNativeWebView?.postMessage(
       JSON.stringify({
         number,
         type: NATIVE_CUSTOM_EVENTS.CALL_PHONE,
       }),
     );
   },
-  KAKAO_LOGIN: () => {
-    window.ReactNativeWebView?.postMessage(
-      JSON.stringify({
-        type: NATIVE_CUSTOM_EVENTS.KAKAO_LOGIN,
-      }),
-    );
-  },
-  APPLE_LOGIN: () => {
-    window.ReactNativeWebView?.postMessage(
-      JSON.stringify({
-        type: NATIVE_CUSTOM_EVENTS.APPLE_LOGIN,
-      }),
-    );
-  },
-  GET_DEVICE_INFO: () => {
+  getDeviceInfo: () => {
     window.ReactNativeWebView?.postMessage(
       JSON.stringify({
         type: NATIVE_CUSTOM_EVENTS.GET_DEVICE_INFO,

diff --git a/utils/validationUtils.ts b/utils/validationUtils.ts
@@ -73,3 +73,15 @@ export const detectDevice = () => {
     return "PC";
   }
 };
+
+export const isNil = <T>(val: T | undefined | null): val is null | undefined => {
+  return val == null;
+};
+
+export const isEmpty = <T>(value: T | undefined | null): boolean => {
+  return (
+    isNil(value) ||
+    (Array.isArray(value) && value.length === 0) ||
+    (typeof value === "object" && Object.keys(value).length === 0)
+  );
+};