Merge pull request #1 from 0-ROK/add-web-demo

feat: 일렉트론 화면을 데모용 웹으로 배포

Author: 0-ROK

DEPLOYMENT.md

@@ -90,6 +90,37 @@ pnpm run package:all
 - 다운로드 페이지 제작
 - 버전 관리 수동 처리
 
+#### 3. Vercel 웹 데모 배포 (병행 운영)
+RiSA의 주요 기능을 브라우저에서 체험할 수 있도록 정적 웹 데모를 함께 제공할 수 있습니다.
+
+1. **웹 번들 생성**
+   ```bash
+   WEB_TARGET=web pnpm build:renderer
+   ```
+   빌드 결과는 `dist/web` 폴더에 생성됩니다.
+
+2. **Vercel 설정**
+   - 빌드 명령은 `WEB_TARGET=web pnpm build:renderer`를 사용합니다.
+   - 출력 디렉터리는 `dist/web`입니다.
+   - 히스토리 라우팅을 위해 `vercel.json`에 아래 설정을 추가합니다.
+
+   ```json
+   {
+     "builds": [
+       { "src": "package.json", "use": "@vercel/static-build", "config": { "distDir": "dist/web" } }
+     ],
+     "scripts": { "build": "WEB_TARGET=web pnpm build:renderer" },
+     "rewrites": [
+       { "source": "/(.*)", "destination": "/index.html" }
+     ]
+   }
+   ```
+
+3. **배포 시 주의사항**
+   - RSA 암·복호화, 키 생성 등 일부 기능은 웹 데모에서 비활성화되어 안내 메시지가 노출됩니다.
+   - 체인/HTTP 도구 등 클라이언트에서 실행 가능한 기능으로 데모를 구성합니다.
+   - 정적 자산(이미지, 아이콘 등)이 `dist/web`에 포함되어 있는지 확인합니다.
+
 ### 💰 유료 앱스토어 배포
 
 #### 1. Mac App Store
@@ -174,4 +205,4 @@ autoUpdater.setFeedURL({
 배포 완료 후 사용자들이 다운로드할 수 있는 링크가 생성됩니다!
 
 ---
-**💡 Tip:** 초기에는 베타 버전으로 출시하여 사용자 피드백을 받은 후 정식 버전을 릴리즈하는 것을 권장합니다.
+**💡 Tip:** 초기에는 베타 버전으로 출시하여 사용자 피드백을 받은 후 정식 버전을 릴리즈하는 것을 권장합니다.

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "concurrently \"npm run dev:renderer\" \"npm run dev:main\"",
     "dev:renderer": "webpack serve --config webpack.config.js --env NODE_ENV=development",
+    "dev:web": "cross-env WEB_TARGET=web NODE_ENV=development webpack serve --config webpack.config.js",
     "dev:main": "webpack --config webpack.config.js --env NODE_ENV=development --watch",
     "build": "npm run build:renderer && npm run build:main && npm run build:preload",
     "build:main": "cross-env TARGET=main webpack --config webpack.config.js --mode production",

src/renderer/App.tsx

@@ -1,14 +1,16 @@
-import React from 'react';
-import { Layout } from 'antd';
+import React, { Suspense, lazy } from 'react';
+import { Layout, Spin } from 'antd';
 import { Routes, Route } from 'react-router-dom';
 import Sidebar from './components/Sidebar';
-import MainPage from './pages/MainPage';
-import KeyManagerPage from './pages/KeyManagerPage';
-import HistoryPage from './pages/HistoryPage';
-import EncodingToolsPage from './pages/EncodingToolsPage';
-import ChainBuilderPage from './pages/ChainBuilderPage';
-import HttpParserPage from './pages/HttpParserPage';
-import UpdateNotification from './components/UpdateNotification';
+
+// Route-level code splitting
+const MainPage = lazy(() => import('./pages/MainPage'));
+const KeyManagerPage = lazy(() => import('./pages/KeyManagerPage'));
+const HistoryPage = lazy(() => import('./pages/HistoryPage'));
+const EncodingToolsPage = lazy(() => import('./pages/EncodingToolsPage'));
+const ChainBuilderPage = lazy(() => import('./pages/ChainBuilderPage'));
+const HttpParserPage = lazy(() => import('./pages/HttpParserPage'));
+const UpdateNotification = lazy(() => import('./components/UpdateNotification'));
 
 const { Content } = Layout;
 
@@ -22,19 +24,29 @@ const App: React.FC = () => {
           overflow: 'auto',
           backgroundColor: '#f0f2f5'
         }}>
-          <Routes>
-            <Route path="/" element={<MainPage />} />
-            <Route path="/keys" element={<KeyManagerPage />} />
-            <Route path="/encoding-tools" element={<EncodingToolsPage />} />
-            <Route path="/http-parser" element={<HttpParserPage />} />
-            <Route path="/chain-builder" element={<ChainBuilderPage />} />
-            <Route path="/history" element={<HistoryPage />} />
-          </Routes>
+          <Suspense
+            fallback={
+              <div style={{ display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
+                <Spin size="large" />
+              </div>
+            }
+          >
+            <Routes>
+              <Route path="/" element={<MainPage />} />
+              <Route path="/keys" element={<KeyManagerPage />} />
+              <Route path="/encoding-tools" element={<EncodingToolsPage />} />
+              <Route path="/http-parser" element={<HttpParserPage />} />
+              <Route path="/chain-builder" element={<ChainBuilderPage />} />
+              <Route path="/history" element={<HistoryPage />} />
+            </Routes>
+          </Suspense>
         </Content>
       </Layout>
-      <UpdateNotification />
+      <Suspense fallback={null}>
+        <UpdateNotification />
+      </Suspense>
     </Layout>
   );
 };
 
-export default App;
+export default App;

src/renderer/components/UpdateNotification.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Modal, Button, Progress, Typography, Space } from 'antd';
 import { DownloadOutlined, ReloadOutlined } from '@ant-design/icons';
+import { getPlatformServices } from '../services';
 
 const { Text, Title } = Typography;
 
@@ -17,46 +18,52 @@ interface DownloadProgress {
   total: number;
 }
 
+const services = getPlatformServices();
+
 const UpdateNotification: React.FC = () => {
+  if (services.environment !== 'electron') {
+    return null;
+  }
+
   const [updateAvailable, setUpdateAvailable] = useState<UpdateInfo | null>(null);
   const [downloadProgress, setDownloadProgress] = useState<DownloadProgress | null>(null);
   const [updateDownloaded, setUpdateDownloaded] = useState<UpdateInfo | null>(null);
   const [updateError, setUpdateError] = useState<string | null>(null);
 
   useEffect(() => {
-    if (!window.electronAPI) return;
+    const updateService = services.update;
+    if (!updateService) return;
 
-    // 업데이트 이벤트 리스너 등록
-    window.electronAPI.onUpdateAvailable((info: UpdateInfo) => {
+    updateService.onAvailable?.((info: UpdateInfo) => {
       setUpdateAvailable(info);
     });
 
-    window.electronAPI.onDownloadProgress((progress: DownloadProgress) => {
+    updateService.onDownloadProgress?.((progress: DownloadProgress) => {
       setDownloadProgress(progress);
     });
 
-    window.electronAPI.onUpdateDownloaded((info: UpdateInfo) => {
+    updateService.onDownloaded?.((info: UpdateInfo) => {
       setUpdateDownloaded(info);
       setDownloadProgress(null);
       setUpdateError(null);
     });
 
     // 업데이트 에러 핸들링
-    window.electronAPI.onUpdateError?.((error: string) => {
+    updateService.onError?.((error: string) => {
       setUpdateError(error);
       setDownloadProgress(null);
     });
 
     // 컴포넌트 언마운트 시 이벤트 리스너 제거
     return () => {
-      window.electronAPI.removeUpdateListeners();
+      updateService.removeAll?.();
     };
   }, []);
 
   const handleDownloadUpdate = () => {
     // === 자동 다운로드 ===
     // electron-updater가 GitHub Releases에서 직접 다운로드
-    window.electronAPI.startDownload?.();
+    services.update?.startDownload?.();
     setUpdateAvailable(null);
     // 다운로드 진행 상황은 onDownloadProgress로 추적됨
   };
@@ -71,7 +78,7 @@ const UpdateNotification: React.FC = () => {
   };
 
   const handleRestartAndInstall = () => {
-    window.electronAPI.restartAndInstall();
+    services.update?.restartAndInstall?.();
   };
 
   const formatBytes = (bytes: number): string => {
@@ -363,4 +370,4 @@ const UpdateNotification: React.FC = () => {
   );
 };
 
-export default UpdateNotification;
+export default UpdateNotification;

src/renderer/pages/KeyManagerPage.tsx

@@ -32,10 +32,14 @@ import { SavedKey } from '../../shared/types';
 import { RSA_KEY_SIZES } from '../../shared/constants';
 import AlgorithmSelector from '../components/AlgorithmSelector';
 import PageHeader from '../components/PageHeader';
+import { getPlatformServices } from '../services';
 
 const { Text } = Typography;
 const { TextArea } = Input;
 
+const services = getPlatformServices();
+const isWebEnvironment = services.environment === 'web';
+
 const KeyManagerPage: React.FC = () => {
   const { keys, loading, saveKey, deleteKey } = useKeys();
   const [generateLoading, setGenerateLoading] = useState(false);
@@ -54,9 +58,18 @@ const KeyManagerPage: React.FC = () => {
   const [selectedEditAlgorithm, setSelectedEditAlgorithm] = useState<'RSA-OAEP' | 'RSA-PKCS1'>('RSA-OAEP');
 
   const handleGenerateKey = async (values: { name: string; keySize: number; preferredAlgorithm: 'RSA-OAEP' | 'RSA-PKCS1' }) => {
+    if (isWebEnvironment) {
+      notification.info({
+        message: '웹 데모 제한',
+        description: '웹 데모에서는 RSA 키 생성을 지원하지 않습니다. 데스크톱 버전에서 키를 생성하거나 직접 등록 기능을 사용해주세요.',
+        placement: 'topRight',
+      });
+      return;
+    }
+
     setGenerateLoading(true);
     try {
-      const keyPair = await window.electronAPI.generateRSAKeys(values.keySize);
+      const keyPair = await services.crypto.generateKeyPair(values.keySize);
 
       const savedKey: SavedKey = {
         id: crypto.randomUUID(),
@@ -391,14 +404,17 @@ const KeyManagerPage: React.FC = () => {
         icon={<KeyOutlined />}
         extra={
           <Space>
-            <Button
-              type="primary"
-              icon={<PlusOutlined />}
-              onClick={() => setGenerateModalVisible(true)}
-              size="large"
-            >
-              새 키 생성
-            </Button>
+            <Tooltip title={isWebEnvironment ? '웹 데모에서는 키 생성을 지원하지 않습니다.' : undefined}>
+              <Button
+                type="primary"
+                icon={<PlusOutlined />}
+                onClick={() => setGenerateModalVisible(true)}
+                size="large"
+                disabled={isWebEnvironment}
+              >
+                새 키 생성
+              </Button>
+            </Tooltip>
             <Button
               type="default"
               icon={<ImportOutlined />}
@@ -418,6 +434,16 @@ const KeyManagerPage: React.FC = () => {
         flex: 1
       }}>
 
+        {isWebEnvironment && (
+          <Alert
+            type="info"
+            showIcon
+            message="웹 데모에서는 키 생성이 제한됩니다"
+            description="데스크톱 버전에서 생성한 키를 가져오거나 직접 키를 등록하여 기능을 체험할 수 있습니다."
+            style={{ marginBottom: 16 }}
+          />
+        )}
+
         <Card>
           <Table
             columns={columns}
@@ -852,4 +878,4 @@ MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQC..."
   );
 };
 
-export default KeyManagerPage;
+export default KeyManagerPage;

src/renderer/pages/MainPage.tsx

@@ -32,11 +32,15 @@ import { DEFAULT_ENCRYPTION_OPTIONS } from '../../shared/constants';
 import { HistoryItem } from '../../shared/types';
 import AlgorithmSelector from '../components/AlgorithmSelector';
 import PageHeader from '../components/PageHeader';
+import { getPlatformServices } from '../services';
 
 const { TextArea } = Input;
 const { Text } = Typography;
 const { TabPane } = Tabs;
 
+const services = getPlatformServices();
+const isWebEnvironment = services.environment === 'web';
+
 const MainPage: React.FC = () => {
   const { keys, selectedKey, selectKey } = useKeys();
   const { saveHistoryItem } = useHistory();
@@ -55,6 +59,14 @@ const MainPage: React.FC = () => {
   const [decryptionStatus, setDecryptionStatus] = useState<'idle' | 'success' | 'error'>('idle');
   const [lastError, setLastError] = useState<string>('');
 
+  const showWebRestrictionNotice = () => {
+    notification.info({
+      message: '웹 데모 제한',
+      description: '웹 데모에서는 RSA 암·복호화 기능을 사용할 수 없습니다. 데스크톱 버전에서 전체 기능을 이용해주세요.',
+      placement: 'topRight',
+    });
+  };
+
   // 선택된 키가 변경될 때마다 selectedKey 업데이트 및 알고리즘 자동 설정
   useEffect(() => {
     const key = keys.find(k => k.id === selectedKeyId);
@@ -67,6 +79,11 @@ const MainPage: React.FC = () => {
   }, [selectedKeyId, keys, selectKey]);
 
   const handleEncrypt = async () => {
+    if (isWebEnvironment) {
+      showWebRestrictionNotice();
+      return;
+    }
+
     if (!encryptText.trim()) {
       message.error('암호화할 텍스트를 입력해주세요.');
       return;
@@ -84,7 +101,7 @@ const MainPage: React.FC = () => {
     setLoading(true);
     setEncryptionStatus('idle');
     try {
-      const result = await window.electronAPI.encryptText(
+      const result = await services.crypto.encrypt(
         encryptText,
         selectedKey.publicKey,
         algorithm
@@ -140,6 +157,11 @@ const MainPage: React.FC = () => {
   };
 
   const handleDecrypt = async () => {
+    if (isWebEnvironment) {
+      showWebRestrictionNotice();
+      return;
+    }
+
     if (!decryptText.trim()) {
       message.error('복호화할 텍스트를 입력해주세요.');
       return;
@@ -188,7 +210,7 @@ const MainPage: React.FC = () => {
     setLoading(true);
     setDecryptionStatus('idle');
     try {
-      const result = await window.electronAPI.decryptText(
+      const result = await services.crypto.decrypt(
         decryptText,
         selectedKey.privateKey,
         algorithm
@@ -489,8 +511,8 @@ const MainPage: React.FC = () => {
   // 탭 오른쪽에 표시할 버튼들
   const renderTabBarExtraContent = () => {
     const isEncryptTab = activeTab === 'encrypt';
-    const hasInputText = isEncryptTab ? encryptText.trim() : decryptText.trim();
-    const canExecute = selectedKey && hasInputText && !loading;
+    const hasInputText = (isEncryptTab ? encryptText : decryptText).trim();
+    const canExecute = !isWebEnvironment && !!selectedKey && !!hasInputText && !loading;
 
     return (
       <Space>
@@ -534,6 +556,16 @@ const MainPage: React.FC = () => {
         flex: 1
       }}>
 
+        {isWebEnvironment && (
+          <Alert
+            type="info"
+            showIcon
+            message="웹 데모 제한 안내"
+            description="웹 데모에서는 RSA 암·복호화 기능이 비활성화되어 있습니다. 데스크톱 앱에서 전체 기능을 사용하거나 체인 빌더, HTTP 도구 등을 체험해보세요."
+            style={{ marginBottom: 16 }}
+          />
+        )}
+
         {/* 키 선택 및 알고리즘 선택 섹션 */}
         <Card style={{ marginBottom: 16, flexShrink: 0 }}>
           <Row gutter={[16, 16]} align="top">
@@ -938,4 +970,4 @@ const MainPage: React.FC = () => {
   );
 };
 
-export default MainPage;
+export default MainPage;