메시지 listener, sender, hook 추가

hooks/useMessage.tsx

@@ -0,0 +1,41 @@
+import { useState, useEffect, useCallback } from "react";
+import {
+  ActionNames,
+  Actions,
+  postMessage,
+  makeAction,
+  ActionParam,
+} from "../libs/message/message";
+import { isBrowser } from "../utils/browser";
+
+export function useMessage<ActionName extends ActionNames>(options: {
+  actionName: ActionName;
+}) {
+  const { actionName } = options;
+  const [payload, setPayload] = useState<Actions[ActionName] | null>(null);
+  const sendMessage = useCallback((params: ActionParam<ActionName>) => {
+    postMessage(makeAction(params));
+  }, []);
+
+  const handleMessage = useCallback((message: MessageEvent) => {
+    if (!message.data) {
+      return;
+    }
+    const payload = JSON.parse(message.data) as Actions[ActionName];
+    setPayload(payload);
+    console.log(payload);
+  }, []);
+
+  useEffect(() => {
+    if (!isBrowser) {
+      return;
+    }
+    window.addEventListener("message", handleMessage);
+  }, [handleMessage]);
+
+  return {
+    actionName,
+    actionPayload: payload,
+    sendMessage,
+  };
+}

lib/messages/messages.spec.ts → libs/message/message.spec.ts

@@ -1,4 +1,4 @@
-import { makeAction } from "./messages";
+import { makeAction } from "./message";
 
 describe("messages", () => {
   it("NAVIGATE_TO_EDIT", async () => {

lib/messages/messages.ts → libs/message/message.ts

@@ -1,13 +1,14 @@
+import { isBrowser } from "../../utils/browser";
 
 
-type Actions = {
+export type Actions = {
     NAVIGATE_TO_MY: {
         payload: {
             userId: string;
         }
     },
     NAVIGATE_TO_EDIT: {
-    }
+    },
 }
 
 export type ActionNames = keyof Actions;
@@ -18,11 +19,18 @@ Actions[ActionName] extends { payload: infer TPath extends Record<string, string
     : [ActionName];
 
 
-export const makeAction = <Path extends ActionNames>(params: ActionParam<Path>) => {
+export const makeAction = <ActionName extends ActionNames>(params: ActionParam<ActionName>) => {
     const [actionName, payload] = params
     return {
         action: actionName,
         payload,
     }
 }
 
+export const postMessage = (data: unknown) => {
+    if(!isBrowser) {
+        return
+    }
+    window.postMessage(JSON.stringify(data))
+}
+

utils/browser.ts

@@ -0,0 +1,3 @@
+export const isBrowser = () => {
+    return (typeof window !== "undefined")
+}