refactor: 이벤트 주고 받는 코드 정리

figma-plugin/common/constants.ts

@@ -1,32 +1,7 @@
-export const ACTION = {
-  GET_USER_INFO: "get-user-info",
+export const FRAME_NAME = "icona-frame";
 
-  GET_GITHUB_REPO_URL: "get-github-repo-url",
-  GET_GITHUB_API_KEY: "get-github-api-key",
-  GET_ICON_PREVIEW: "get-icon-preview",
-  GET_DEPLOY_WITH_PNG: "get-deploy-with-png",
-
-  SET_GITHUB_REPO_URL: "set-github-repo-url",
-  SET_GITHUB_API_KEY: "set-github-api-key",
-  SET_DEPLOY_WITH_PNG: "set-deploy-with-png",
-
-  DEPLOY_ICON: "deploy-icon",
-  DEPLOY_ICON_STATUS: "deploy-icon-status",
-  DEPLOY_ICON_ERROR_MESSAGE: "deploy-icon-error-message",
-} as const;
-
-export const DATA = {
+export const KEY = {
   GITHUB_API_KEY: "github-api-key",
   GITHUB_REPO_URL: "github-repo-url",
-
-  ICON_FRAME_ID: "icona-frame",
-
   DEPLOY_WITH_PNG: "deploy-with-png",
-} as const;
-
-export const STATUS = {
-  IDLE: "idle",
-  LOADING: "loading",
-  SUCCESS: "success",
-  ERROR: "error",
-} as const;
+};

figma-plugin/common/fromPlugin.ts

@@ -0,0 +1,72 @@
+import { emit as e, on as o } from "@create-figma-plugin/utilities";
+import type { IconaIconData } from "@icona/types";
+
+interface UserInfoPayload {
+  name: string;
+  id: string;
+}
+
+interface GetGithubRepoUrlPayload {
+  repoUrl?: string;
+}
+
+interface GetGithubApiKeyPayload {
+  apiKey?: string;
+}
+
+interface GetDeployWithPngPayload {
+  deployWithPng?: boolean;
+}
+
+interface GetIconPreviewPayload {
+  icons: Record<string, IconaIconData>;
+}
+
+export type Events = {
+  GET_USER_INFO: {
+    name: "GET_USER_INFO";
+    payload: UserInfoPayload;
+    handler: (props: UserInfoPayload) => void;
+  };
+  GET_GITHUB_REPO_URL: {
+    name: "GET_GITHUB_REPO_URL";
+    payload: GetGithubRepoUrlPayload;
+    handler: (props: GetGithubRepoUrlPayload) => void;
+  };
+  GET_GITHUB_API_KEY: {
+    name: "GET_GITHUB_API_KEY";
+    payload: GetGithubApiKeyPayload;
+    handler: (props: GetGithubApiKeyPayload) => void;
+  };
+  GET_DEPLOY_WITH_PNG: {
+    name: "GET_DEPLOY_WITH_PNG";
+    payload: GetDeployWithPngPayload;
+    handler: (props: GetDeployWithPngPayload) => void;
+  };
+  GET_ICON_PREVIEW: {
+    name: "GET_ICON_PREVIEW";
+    payload: GetIconPreviewPayload;
+    handler: (props: GetIconPreviewPayload) => void;
+  };
+  DEPLOY_DONE: {
+    name: "DEPLOY_DONE";
+    payload: null;
+    handler: () => void;
+  };
+};
+
+type EventName = keyof Events;
+
+export const emit = <T extends EventName>(
+  name: T,
+  payload: Events[T]["payload"],
+) => {
+  return e(name, payload);
+};
+
+export const on = <T extends keyof Events>(
+  name: T,
+  handler: Events[T]["handler"],
+) => {
+  if (handler) return o(name, handler);
+};

figma-plugin/common/fromUi.ts

@@ -0,0 +1,64 @@
+import { emit as e, on as o } from "@create-figma-plugin/utilities";
+
+interface GithubData {
+  owner: string;
+  name: string;
+  apiKey: string;
+}
+
+interface IconaMetaData {
+  githubData: GithubData;
+  options?: {
+    withPng?: boolean;
+  };
+}
+
+interface SetPngOptionPayload {
+  withPng: boolean;
+}
+
+interface SetGithubUrlPayload {
+  url: string;
+}
+interface SetGithubApiKeyPayload {
+  apiKey: string;
+}
+
+export type Events = {
+  SET_GITHUB_URL: {
+    name: "SET_GITHUB_URL";
+    payload: SetGithubUrlPayload;
+    handler: (props: SetGithubUrlPayload) => void;
+  };
+  SET_GITHUB_API_KEY: {
+    name: "SET_GITHUB_API_KEY";
+    payload: SetGithubApiKeyPayload;
+    handler: (props: SetGithubApiKeyPayload) => void;
+  };
+  SET_PNG_OPTION: {
+    name: "SET_PNG_OPTION";
+    payload: SetPngOptionPayload;
+    handler: (props: SetPngOptionPayload) => void;
+  };
+  DEPLOY_ICON: {
+    name: "DEPLOY_ICON";
+    payload: IconaMetaData;
+    handler: (props: IconaMetaData) => void;
+  };
+};
+
+type EventName = keyof Events;
+
+export const emit = <T extends EventName>(
+  name: T,
+  payload: Events[T]["payload"],
+) => {
+  return e(name, payload);
+};
+
+export const on = <T extends keyof Events>(
+  name: T,
+  handler: Events[T]["handler"],
+) => {
+  return o(name, handler);
+};

figma-plugin/common/types.ts

@@ -1,7 +1,3 @@
-import type { IconaIconData } from "@icona/types";
-
-import type { ACTION, STATUS } from "./constants";
-
 export interface GithubData {
   owner: string;
   name: string;
@@ -14,30 +10,3 @@ export interface IconaMetaData {
     withPng?: boolean;
   };
 }
-
-export type Status = `${(typeof STATUS)[keyof typeof STATUS]}`;
-
-export type Messages =
-  | { type: `${typeof ACTION.GET_DEPLOY_WITH_PNG}`; payload: boolean }
-  | { type: `${typeof ACTION.GET_GITHUB_API_KEY}`; payload: string }
-  | { type: `${typeof ACTION.GET_GITHUB_REPO_URL}`; payload: string }
-  | {
-      type: `${typeof ACTION.GET_ICON_PREVIEW}`;
-      payload: Record<string, IconaIconData>;
-    }
-  | { type: `${typeof ACTION.SET_DEPLOY_WITH_PNG}`; payload: boolean }
-  | { type: `${typeof ACTION.SET_GITHUB_API_KEY}`; payload: string }
-  | { type: `${typeof ACTION.SET_GITHUB_REPO_URL}`; payload: string }
-  | { type: `${typeof ACTION.DEPLOY_ICON}`; payload: IconaMetaData }
-  | { type: `${typeof ACTION.DEPLOY_ICON_STATUS}`; payload: Status }
-  | {
-      type: `${typeof ACTION.GET_USER_INFO}`;
-      payload: {
-        id: string;
-        name: string;
-      };
-    }
-  | {
-      type: `${typeof ACTION.DEPLOY_ICON_ERROR_MESSAGE}`;
-      payload: string;
-    };

figma-plugin/package.json

@@ -2,19 +2,21 @@
   "name": "@icona/figma-plugin",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "build": "yarn build:ui && yarn build:plugin -- --minify",
-    "build:plugin": "node ./esbuild.plugin.js",
+    "build:plugin": "node ./esbuild.plugin.cjs",
     "build:ui": "yarn vite build --mode prod --minify esbuild --emptyOutDir=false",
-    "dev": "yarn build:ui:watch && yarn build:plugin:watch",
-    "dev:plugin": "WATCH=true node ./esbuild.plugin.js",
+    "dev": "yarn dev:ui && yarn dev:plugin",
+    "dev:plugin": "WATCH=true node ./esbuild.plugin.cjs",
     "dev:ui": "yarn vite build --mode dev --watch --emptyOutDir=false",
     "tsc": "yarn tsc:plugin && yarn tsc:ui",
     "tsc:plugin": "tsc --noEmit -p plugin",
     "tsc:ui": "tsc --noEmit -p ui-src"
   },
   "dependencies": {
     "@chakra-ui/react": "^2.6.1",
+    "@create-figma-plugin/utilities": "^3.0.2",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@vanilla-extract/css": "^1.11.0",