수정

frontend/src/components/DesktopUpdatePanel.tsx

@@ -1,15 +1,12 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { isDesktop } from '../utils/platform';
-import {
-  checkDesktopUpdates,
-  getDesktopAppVersion,
-} from '../utils/desktopBridge';
+import { getDesktopAppVersion } from '../utils/desktopBridge';
+import DesktopUpdateModal from './DesktopUpdateModal';
 
 /** PC(Tauri) 앱 — 버전 표시 및 업데이트 확인 */
 const DesktopUpdatePanel: React.FC = () => {
   const [version, setVersion] = useState<string>('—');
-  const [status, setStatus] = useState<string>('');
-  const [busy, setBusy] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
 
   useEffect(() => {
     if (!isDesktop()) return;
@@ -18,44 +15,43 @@ const DesktopUpdatePanel: React.FC = () => {
     });
   }, []);
 
-  const handleCheck = useCallback(async () => {
-    setBusy(true);
-    setStatus('업데이트 확인 중…');
-    try {
-      const res = await checkDesktopUpdates();
-      setStatus(res.message ?? (res.available ? `새 버전 ${res.version}` : '최신 버전입니다.'));
-    } finally {
-      setBusy(false);
-    }
+  const handleOpen = useCallback(() => {
+    setModalOpen(true);
   }, []);
 
   if (!isDesktop()) return null;
 
   return (
-    <div className="stg-section">
-      <h3 className="stg-section-title">PC 앱 (GoldenChart Desktop)</h3>
-      <div className="stg-row">
-        <div className="stg-row-label">
-          <strong>현재 버전</strong>
-          <p className="stg-row-desc">설치된 데스크톱 클라이언트 버전입니다.</p>
+    <>
+      <div className="stg-section">
+        <h3 className="stg-section-title">PC 앱 (GoldenChart Desktop)</h3>
+        <div className="stg-row">
+          <div className="stg-row-label">
+            <strong>현재 버전</strong>
+            <p className="stg-row-desc">설치된 데스크톱 클라이언트 버전입니다.</p>
+          </div>
+          <div className="stg-row-control">
+            <span>{version}</span>
+          </div>
         </div>
-        <div className="stg-row-control">
-          <span>{version}</span>
+        <div className="stg-row">
+          <div className="stg-row-label">
+            <strong>업데이트</strong>
+            <p className="stg-row-desc">서버에서 새 버전을 확인하고 다운로드합니다.</p>
+          </div>
+          <div className="stg-row-control">
+            <button type="button" className="stg-btn-secondary" onClick={handleOpen}>
+              업데이트 확인
+            </button>
+          </div>
         </div>
       </div>
-      <div className="stg-row">
-        <div className="stg-row-label">
-          <strong>업데이트</strong>
-          <p className="stg-row-desc">서버에서 새 버전을 확인하고 다운로드합니다.</p>
-        </div>
-        <div className="stg-row-control">
-          <button type="button" className="stg-btn-secondary" disabled={busy} onClick={() => { void handleCheck(); }}>
-            {busy ? '확인 중…' : '업데이트 확인'}
-          </button>
-          {status && <span className="stg-hint" style={{ marginLeft: 8 }}>{status}</span>}
-        </div>
-      </div>
-    </div>
+      <DesktopUpdateModal
+        open={modalOpen}
+        onClose={() => setModalOpen(false)}
+        autoStart
+      />
+    </>
   );
 };