앱 버전표시

frontend/src/App.css

@@ -211,6 +211,14 @@ html.desktop-client .tmb-logo-text {
   font-weight: 600;
 }
 
+html.desktop-client .tmb-logo-version {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text3);
+  letter-spacing: 0;
+  white-space: nowrap;
+}
+
 /* 구분선 */
 .tmb-divider {
   width: 1px;

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, formatDesktopAppLabel } from '../hooks/useDesktopAppTitle';
+import { useDesktopAppTitle } from '../hooks/useDesktopAppTitle';
 import DesktopUpdateModal from './DesktopUpdateModal';
 import TopMenuBarNavGroups from './TopMenuBarNavGroups';
 
@@ -319,9 +319,10 @@ export const TopMenuBar = memo(function TopMenuBar({
           <rect width="20" height="20" rx="4" fill="#2196f3"/>
           <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">
-          {desktopClient ? formatDesktopAppLabel(desktopAppVersion) : 'GoldenChart'}
-        </span>
+        <span className="tmb-logo-text">GoldenChart</span>
+        {desktopClient && desktopAppVersion ? (
+          <span className="tmb-logo-version">(v{desktopAppVersion})</span>
+        ) : null}
       </div>
 
       <div className="tmb-divider" />

frontend/src/hooks/useDesktopAppTitle.ts

@@ -1,26 +1,19 @@
 import { useEffect, useState } from 'react';
 import { isDesktop } from '../utils/platform';
 import { getDesktopAppVersion, syncDesktopMainWindowTitle } from '../utils/desktopBridge';
-
-declare const __DESKTOP_APP_VERSION__: string | undefined;
-
-function readBakedDesktopVersion(): string | null {
-  if (typeof __DESKTOP_APP_VERSION__ === 'undefined') return null;
-  const v = __DESKTOP_APP_VERSION__.trim();
-  return v || null;
-}
+import { readBakedDesktopAppVersion } from '../utils/desktopAppVersion';
 
 /** Desktop — 네이티브 창 타이틀·document.title을 GoldenChart (vX.Y.Z) 로 맞춤 */
 export function useDesktopAppTitle(): string | null {
   const [version, setVersion] = useState<string | null>(() =>
-    isDesktop() ? readBakedDesktopVersion() : null,
+    isDesktop() ? readBakedDesktopAppVersion() : null,
   );
 
   useEffect(() => {
     if (!isDesktop()) return;
     let cancelled = false;
     void (async () => {
-      const v = (await getDesktopAppVersion()) ?? readBakedDesktopVersion();
+      const v = (await getDesktopAppVersion()) ?? readBakedDesktopAppVersion();
       if (cancelled || !v) return;
       setVersion(v);
       await syncDesktopMainWindowTitle();

frontend/src/utils/desktopAppVersion.ts

@@ -0,0 +1,25 @@
+declare const __DESKTOP_APP_VERSION__: string | undefined;
+
+declare global {
+  interface Window {
+    __GC_APP_VERSION__?: string;
+  }
+}
+
+/** Desktop Vite 빌드·index.html 인라인 스크립트에 주입된 앱 버전 */
+export function readBakedDesktopAppVersion(): string | null {
+  if (typeof window !== 'undefined') {
+    const fromWindow = window.__GC_APP_VERSION__?.trim();
+    if (fromWindow) return fromWindow;
+  }
+  if (typeof __DESKTOP_APP_VERSION__ !== 'undefined') {
+    const fromDefine = __DESKTOP_APP_VERSION__.trim();
+    if (fromDefine) return fromDefine;
+  }
+  return null;
+}
+
+export function formatDesktopWindowTitle(version: string | null | undefined): string {
+  const v = version?.trim();
+  return v ? `GoldenChart (v${v})` : 'GoldenChart';
+}

frontend/src/utils/platform.ts

@@ -2,7 +2,9 @@
 export type RuntimePlatform = 'web' | 'desktop' | 'mobile';
 
 export function isDesktop(): boolean {
-  return typeof window !== 'undefined' && '__TAURI__' in window;
+  if (typeof window === 'undefined') return false;
+  if ('__TAURI__' in window || '__TAURI_INTERNALS__' in window) return true;
+  return document.documentElement.classList.contains('desktop-client');
 }
 
 export function isMobileCapacitor(): boolean {