[Feat] 데스크탑 앱을 위한 electron 도입

.eslintrc.cjs

@@ -31,12 +31,7 @@ module.exports = {
     'import/no-unresolved': 'off',
     'import/prefer-default-export': 0,
     'global-require': 0,
-    'import/no-extraneous-dependencies': [
-      1,
-      {
-        dependencies: ['**/*.ts', '**/*.tsx'],
-      },
-    ], // package.json의 의존성에 있지 않는 외부 모듈 import 시 에러
+    'import/no-extraneous-dependencies': 0, // package.json의 의존성에 있지 않는 외부 모듈 import 시 에러
     'import/newline-after-import': [2, { count: 1 }], // import 구문들 뒤에 한 칸 띄우고 코드 작성
 
     // 'react-hooks/rules-of-hooks': 2, // 리액트 훅의 순서를 지키게끔 한다. (React는 Hook이 호출되는 순서에 의존하기 때문에)

.gitignore

@@ -22,6 +22,9 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
 .env
 *storybook.log
 storybook-static/*
+release
+dist-electron

.npmrc

@@ -0,0 +1,3 @@
+# For electron-builder
+# https://github.com/electron-userland/electron-builder/issues/6289#issuecomment-1042620422
+shamefully-hoist=true

electron-builder.json5

@@ -0,0 +1,55 @@
+/**
+ * @see https://www.electron.build/configuration/configuration
+ */
+{
+  appId: 'com.tiki.app',
+  productName: 'TIKI',
+  copyright: 'Copyright © 2024 ${author}',
+  asar: true,
+  directories: {
+    output: 'release/${version}',
+    buildResources: 'electron/resources',
+  },
+  files: ['dist'],
+  win: {
+    target: [
+      {
+        target: 'nsis',
+        arch: ['x64'],
+      },
+      {
+        target: 'portable',
+        arch: ['x64'],
+      },
+    ],
+    artifactName: '${productName}-${version}-Windows-${arch}-Installer.${ext}',
+  },
+  nsis: {
+    oneClick: false,
+    perMachine: false,
+    allowToChangeInstallationDirectory: true,
+    deleteAppDataOnUninstall: false,
+  },
+  portable: {
+    artifactName: '${productName}-${version}-Windows-${arch}-Portable.${ext}',
+  },
+  mac: {
+    target: [
+      {
+        target: 'dmg',
+        arch: ['x64', 'arm64'],
+      },
+    ],
+    artifactName: '${productName}-${version}-OSX-${arch}.${ext}',
+  },
+  linux: {
+    target: [
+      {
+        target: 'AppImage',
+        arch: ['x64'],
+      },
+    ],
+    artifactName: '${productName}-${version}-Linux-${arch}.${ext}',
+  },
+  publish: ['github'],
+}

electron/main/index.ts

@@ -0,0 +1,92 @@
+import { BrowserWindow, app, dialog, shell } from 'electron';
+import log from 'electron-log';
+import { autoUpdater } from 'electron-updater';
+import path from 'path';
+
+let win: BrowserWindow | null = null;
+
+const preload = path.join(__dirname, '../preload/index.js');
+const createWindow = async () => {
+  win = new BrowserWindow({
+    title: 'Tiki',
+    width: 1366,
+    height: 875,
+    autoHideMenuBar: true,
+    titleBarStyle: 'hidden',
+
+    // attach preload file to renderer process
+    webPreferences: {
+      preload,
+      nodeIntegration: true,
+      contextIsolation: false,
+    },
+  });
+
+  if (process.env.VITE_DEV_SERVER_URL) {
+    // You can use `process.env.VITE_DEV_SERVER_URL` when the vite command is called `serve`
+    win.loadURL(process.env.VITE_DEV_SERVER_URL);
+  } else {
+    // Load your file
+    win.loadFile('dist/index.html');
+  }
+};
+
+app.whenReady().then(() => {
+  createWindow();
+
+  setAutoUpdater();
+
+  app.on('activate', () => {
+    const allWindows = BrowserWindow.getAllWindows();
+    if (allWindows.length) {
+      allWindows[0].focus();
+    } else {
+      // create Window and Error handling
+      createWindow().catch((err) => {
+        dialog.showErrorBox('오류가 발생하여 실행에 실패했습니다', err);
+      });
+    }
+  });
+});
+
+// quitting the app when no windows are open on non-macOS platforms
+app.on('window-all-closed', () => {
+  win = null;
+  if (process.platform !== 'darwin') app.quit();
+});
+
+app.on('second-instance', () => {
+  if (win) {
+    // Focus on the main window if the user tried to open another
+    if (win.isMinimized()) win.restore();
+    win.focus();
+  }
+});
+
+const setAutoUpdater = async () => {
+  log.transports.file.level = 'debug';
+  autoUpdater.logger = log;
+
+  if (process.platform === 'darwin') {
+    const checks = await autoUpdater.checkForUpdates();
+
+    if (!checks) return;
+
+    const { updateInfo } = checks;
+
+    if (!win) return;
+
+    const { response } = await dialog.showMessageBox(win, {
+      message: `업데이트가 존재합니다.\n버전: ${updateInfo.version}\n날짜: ${updateInfo.releaseDate}`,
+      buttons: ['취소', '다운로드 페이지로 이동'],
+      defaultId: 1,
+    });
+
+    if (response === 1) {
+      // 랜딩 페이지를 별도의 도메인으로 프로덕트를 분리한다면 해당 URL이 들어감.
+      shell.openExternal('https://ti-kii.com');
+    }
+  }
+
+  autoUpdater.checkForUpdatesAndNotify();
+};

electron/preload/index.ts

@@ -0,0 +1,3 @@
+// import { contextBridge } from "electron";
+
+// contextBridge.exposeInMainWorld("bridge", {});

index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/common/asset/svg/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
     <link
       rel="stylesheet"
       as="style"

package.json

@@ -2,16 +2,45 @@
   "name": "tiki-client",
   "private": true,
   "version": "0.0.0",
-  "type": "module",
+  "license": "MIT",
+  "author": "Wuzoo <wndyd9911@gmail.com>",
+  "contributors": [
+    {
+      "name": "JuYong Choi",
+      "email": "wndyd9911@gmail.com",
+      "url": "https://github.com/wuzoo"
+    },
+    {
+      "name": "Daeun Nam",
+      "email": "nde40345@gmail.com",
+      "url": "https://github.com/namdaeun"
+    },
+    {
+      "name": "ChaeWon Lee",
+      "email": "cindy1769@gachon.ac.kr",
+      "url": "https://github.com/cindy-chaewon"
+    },
+    {
+      "name": "KyuHong Kim",
+      "email": "bobo376637@gmail.com",
+      "url": "https://github.com/rtttr1"
+    },
+    {
+      "name": "BoWoon Jeong",
+      "email": "happyanne200212@gmail.com",
+      "url": "https://github.com/Bowoon1216"
+    }
+  ],
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build && electron-builder -mwl",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "npx chromatic --project-token=chpt_f4088febbfb82b7"
   },
+  "main": "dist/electron/main/index.js",
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@sentry/react": "^8.22.0",
@@ -49,6 +78,10 @@
     "@vitejs/plugin-react-swc": "^3.5.0",
     "chromatic": "^11.5.4",
     "date-fns": "^3.6.0",
+    "electron": "^31.3.1",
+    "electron-builder": "^24.13.3",
+    "electron-log": "^5.1.7",
+    "electron-updater": "^6.2.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -70,8 +103,18 @@
     "typescript": "^5.2.2",
     "typescript-eslint": "^7.14.1",
     "vite": "^5.3.2",
+    "vite-plugin-electron": "^0.28.7",
+    "vite-plugin-electron-renderer": "^0.14.5",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",
     "zustand": "^4.5.4"
-  }
+  },
+  "debug": {
+    "env": {
+      "VITE_DEV_SERVER_HOSTNAME": "127.0.0.1",
+      "VITE_DEV_SERVER_PORT": 5173,
+      "VITE_DEV_SERVER_URL": "https://127.0.0.1:5173"
+    }
+  },
+  "productName": "Tiki-Client"
 }