버전명 표시

frontend/src/App.css

@@ -206,6 +206,14 @@ html.theme-blue {
   white-space: nowrap;
 }
 
+.tmb-logo-version {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text3);
+  letter-spacing: 0;
+  white-space: nowrap;
+}
+
 html.desktop-client .tmb-logo-text {
   font-size: 13px;
   font-weight: 600;
@@ -213,10 +221,6 @@ html.desktop-client .tmb-logo-text {
 
 html.desktop-client .tmb-logo-version {
   font-size: 12px;
-  font-weight: 500;
-  color: var(--text3);
-  letter-spacing: 0;
-  white-space: nowrap;
 }
 
 /* 구분선 */

frontend/src/components/TopMenuBar.tsx

@@ -10,7 +10,7 @@ import type { AuthSession } from '../utils/auth';
 import type { TradeAlertPopupLayout, TradeAlertPopupPosition } from '../utils/tradeAlertPopupLayout';
 import { canAccessMenu } from '../utils/permissions';
 import { isDesktop } from '../utils/platform';
-import { useDesktopAppTitle } from '../hooks/useDesktopAppTitle';
+import { useAppTitleBarVersion } from '../hooks/useDesktopAppTitle';
 import DesktopUpdateModal from './DesktopUpdateModal';
 import TopMenuBarNavGroups from './TopMenuBarNavGroups';
 
@@ -298,7 +298,7 @@ export const TopMenuBar = memo(function TopMenuBar({
   const [isFullscreen, setIsFullscreen] = useState(() => !!document.fullscreenElement);
   const [desktopUpdateOpen, setDesktopUpdateOpen] = useState(false);
   const desktopClient = isDesktop();
-  const desktopAppVersion = useDesktopAppTitle();
+  const appVersion = useAppTitleBarVersion();
 
   useEffect(() => {
     const sync = () => setIsFullscreen(!!document.fullscreenElement);
@@ -320,8 +320,8 @@ export const TopMenuBar = memo(function TopMenuBar({
           <polyline points="3,14 7,9 10,12 14,6 17,6" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
         </svg>
         <span className="tmb-logo-text">GoldenChart</span>
-        {desktopClient && desktopAppVersion ? (
-          <span className="tmb-logo-version">(v{desktopAppVersion})</span>
+        {appVersion ? (
+          <span className="tmb-logo-version">(v{appVersion})</span>
         ) : null}
       </div>
 

frontend/src/hooks/useDesktopAppTitle.ts

@@ -1,26 +1,47 @@
 import { useEffect, useState } from 'react';
+import { fetchPublishedAppVersion, readBakedAppVersion } from '../utils/appVersion';
 import { isDesktop } from '../utils/platform';
 import { getDesktopAppVersion, syncDesktopMainWindowTitle } from '../utils/desktopBridge';
 
-/** Desktop — Tauri getVersion() 기준 (설치된 앱 버전). baked 0.1.4 등 git 고정값 사용 안 함 */
-export function useDesktopAppTitle(): string | null {
-  const [version, setVersion] = useState<string | null>(null);
+/** 타이틀바 GoldenChart 옆 (vX.Y.Z) — Desktop: Tauri, Web: latest.json */
+export function useAppTitleBarVersion(): string | null {
+  const desktop = isDesktop();
+  const [version, setVersion] = useState<string | null>(() => readBakedAppVersion());
 
   useEffect(() => {
-    if (!isDesktop()) return;
     let cancelled = false;
+
+    if (desktop) {
+      void (async () => {
+        const v = await getDesktopAppVersion();
+        if (cancelled) return;
+        if (v?.trim()) {
+          setVersion(v.trim());
+          await syncDesktopMainWindowTitle();
+          return;
+        }
+        setVersion(readBakedAppVersion());
+      })();
+      return () => { cancelled = true; };
+    }
+
     void (async () => {
-      const v = await getDesktopAppVersion();
-      if (cancelled || !v?.trim()) return;
-      setVersion(v.trim());
-      await syncDesktopMainWindowTitle();
+      const published = await fetchPublishedAppVersion();
+      if (cancelled) return;
+      setVersion(published ?? readBakedAppVersion());
     })();
+
     return () => { cancelled = true; };
-  }, []);
+  }, [desktop]);
 
   return version;
 }
 
+/** @deprecated useAppTitleBarVersion 사용 */
+export function useDesktopAppTitle(): string | null {
+  return useAppTitleBarVersion();
+}
+
 export function formatDesktopAppLabel(version: string | null | undefined): string {
   if (!version?.trim()) return 'GoldenChart';
   return `GoldenChart (v${version.trim()})`;

frontend/src/utils/appVersion.ts

@@ -0,0 +1,23 @@
+import { readBakedDesktopAppVersion } from './desktopAppVersion';
+
+const LATEST_JSON_PATH = '/desktop/updates/latest.json';
+
+/** Vite 빌드·desktop 번들에 주입된 앱 버전 */
+export function readBakedAppVersion(): string | null {
+  const fromVite = import.meta.env.VITE_APP_VERSION?.trim();
+  if (fromVite) return fromVite;
+  return readBakedDesktopAppVersion();
+}
+
+/** 서버에 배포된 desktop latest.json — 웹 타이틀바 런타임 버전 */
+export async function fetchPublishedAppVersion(): Promise<string | null> {
+  try {
+    const res = await fetch(LATEST_JSON_PATH, { cache: 'no-store' });
+    if (!res.ok) return null;
+    const data = (await res.json()) as { version?: string };
+    const v = data.version?.trim();
+    return v || null;
+  } catch {
+    return null;
+  }
+}

frontend/src/vite-env.d.ts

@@ -1 +1,10 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_VERSION?: string;
+  readonly VITE_API_BASE_URL?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}