Merge pull request #3 from 0-ROK/integration-landing-demo-page

feat: 랜딩 페이지에서 RSA 키 사용 가능하도록 수정

Author: 0-ROK

README.md

@@ -99,6 +99,8 @@ _최신 릴리즈는 [GitHub Releases](https://github.com/0-ROK/RiSA/releases/la
 
 - **[RiSA Web](https://ri-sa-kklc.vercel.app/)**: 실제 앱과 동일한 사용자 흐름을 체험하며 주요 탭과 기능을 탐색할 수 있습니다.
 - 웹에서 작업하다가 로컬 설치가 필요하면 화면 하단의 다운로드 팝업에서 데스크톱 설치 파일을 받을 수 있습니다.
+- 브라우저에서도 RSA 키 생성과 암·복호화를 체험할 수 있으며, 생성된 키는 로컬 스토리지에 안전하게 보관됩니다.
+- 브라우저 로컬 스토리지에 저장된 데이터는 30일이 지나면 자동으로 삭제되어 장기 보관을 방지합니다.
 - 팝업은 GitHub Releases의 최신 버전을 조회해 운영체제에 맞는 설치 파일 링크를 직접 제공합니다.
 - macOS 사용자는 애플 실리콘과 인텔 아키텍처를 자동으로 감지해 올바른 설치 파일을 안내받습니다.
 - 팝업은 닫아도 현재 방문 중에만 숨겨지며, 페이지를 다시 열면 자동으로 나타납니다.

src/renderer/components/WebDownloadPrompt.tsx

@@ -338,7 +338,7 @@ const WebDownloadPrompt: React.FC = () => {
             로컬 앱을 설치하면 모든 RSA 암·복호화 기능을 사용할 수 있어요.
           </Text>
           <Text type="secondary" style={{ fontSize: 13 }}>
-            웹 데모에서는 키 생성과 암·복호화가 제한되므로, 데스크톱 앱을 다운로드해 보세요.
+            브라우저에서도 키 생성과 암·복호화를 체험할 수 있지만, 민감한 데이터는 데스크톱 앱에서 처리하는 것이 더 안전합니다. 로컬에 저장된 데이터는 30일 후 자동으로 정리됩니다.
           </Text>
           <Text type={error ? 'danger' : 'secondary'} style={{ fontSize: 12 }}>
             {statusMessage(loading, error, asset)}

src/renderer/pages/KeyManagerPage.tsx

@@ -58,15 +58,6 @@ 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 services.crypto.generateKeyPair(values.keySize);
@@ -86,8 +77,9 @@ const KeyManagerPage: React.FC = () => {
       form.resetFields();
       message.success(`"${values.name}" 키가 생성되었습니다.`);
     } catch (error) {
-      message.error('키 생성 중 오류가 발생했습니다.');
-      console.error(error);
+      const messageText = error instanceof Error ? error.message : '키 생성 중 오류가 발생했습니다.';
+      message.error(messageText);
+      console.error('Key generation failed:', error);
     } finally {
       setGenerateLoading(false);
     }
@@ -399,18 +391,17 @@ const KeyManagerPage: React.FC = () => {
       display: 'flex',
       flexDirection: 'column'
     }}>
-      <PageHeader 
+      <PageHeader
         title="키 관리"
         icon={<KeyOutlined />}
         extra={
           <Space>
-            <Tooltip title={isWebEnvironment ? '웹 데모에서는 키 생성을 지원하지 않습니다.' : undefined}>
+            <Tooltip title={isWebEnvironment ? '브라우저에서도 키를 생성하고 저장할 수 있습니다. 민감한 데이터는 데스크톱 앱에서 처리하는 것을 권장합니다.' : undefined}>
               <Button
                 type="primary"
                 icon={<PlusOutlined />}
                 onClick={() => setGenerateModalVisible(true)}
                 size="large"
-                disabled={isWebEnvironment}
               >
                 새 키 생성
               </Button>
@@ -438,8 +429,8 @@ const KeyManagerPage: React.FC = () => {
           <Alert
             type="info"
             showIcon
-            message="웹 데모에서는 키 생성이 제한됩니다"
-            description="데스크톱 버전에서 생성한 키를 가져오거나 직접 키를 등록하여 기능을 체험할 수 있습니다."
+            message="브라우저에서도 RSA 키를 생성해볼 수 있습니다"
+            description="생성된 키는 이 브라우저의 로컬 스토리지에 저장되며 30일이 지나면 자동으로 삭제됩니다. 민감한 데이터를 다룰 때에는 데스크톱 앱 사용을 권장합니다."
             style={{ marginBottom: 16 }}
           />
         )}

src/renderer/pages/MainPage.tsx

@@ -59,14 +59,6 @@ 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);
@@ -79,11 +71,6 @@ const MainPage: React.FC = () => {
   }, [selectedKeyId, keys, selectKey]);
 
   const handleEncrypt = async () => {
-    if (isWebEnvironment) {
-      showWebRestrictionNotice();
-      return;
-    }
-
     if (!encryptText.trim()) {
       message.error('암호화할 텍스트를 입력해주세요.');
       return;
@@ -157,11 +144,6 @@ const MainPage: React.FC = () => {
   };
 
   const handleDecrypt = async () => {
-    if (isWebEnvironment) {
-      showWebRestrictionNotice();
-      return;
-    }
-
     if (!decryptText.trim()) {
       message.error('복호화할 텍스트를 입력해주세요.');
       return;
@@ -512,7 +494,7 @@ const MainPage: React.FC = () => {
   const renderTabBarExtraContent = () => {
     const isEncryptTab = activeTab === 'encrypt';
     const hasInputText = (isEncryptTab ? encryptText : decryptText).trim();
-    const canExecute = !isWebEnvironment && !!selectedKey && !!hasInputText && !loading;
+    const canExecute = !!selectedKey && !!hasInputText && !loading;
 
     return (
       <Space>
@@ -560,8 +542,8 @@ const MainPage: React.FC = () => {
           <Alert
             type="info"
             showIcon
-            message="웹 데모 제한 안내"
-            description="웹 데모에서는 RSA 암·복호화 기능이 비활성화되어 있습니다. 데스크톱 앱에서 전체 기능을 사용하거나 체인 빌더, HTTP 도구 등을 체험해보세요."
+            message="브라우저 환경에서는 로컬에서만 데이터를 처리합니다"
+            description="암·복호화는 이 브라우저에서만 실행되고 키는 로컬 스토리지에 보관되며 30일이 지나면 자동으로 삭제됩니다. 민감한 데이터는 데스크톱 앱에서 처리하는 것을 권장합니다."
             style={{ marginBottom: 16 }}
           />
         )}