Merge branch 'develop' into release

src/renderer/src/assets/main.css

@@ -369,6 +369,91 @@ body,
   box-shadow: none;
 }
 
+.launch-action-wrap {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.launch-action-group {
+  display: inline-flex;
+  overflow: hidden;
+  border-radius: 6px;
+  box-shadow: 0 4px 20px rgba(59, 127, 250, 0.35);
+}
+
+.launch-action-group .launch-btn {
+  box-shadow: none;
+}
+
+.launch-action-group .launch-btn:hover,
+.launch-action-group .launch-btn:active {
+  transform: none;
+  box-shadow: none;
+}
+
+.launch-main-btn {
+  border-radius: 6px 0 0 6px;
+  border-right-color: rgba(255, 255, 255, 0.18);
+}
+
+.launch-menu-btn {
+  display: grid;
+  width: 24px;
+  place-items: center;
+  background: var(--accent);
+  border: 1px solid var(--accent);
+  border-left: 0;
+  border-radius: 0 6px 6px 0;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.launch-menu-btn:hover {
+  background: #5592ff;
+}
+
+.launch-action-dropdown {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 7px);
+  z-index: 30;
+  min-width: 104px;
+  overflow: hidden;
+  border-radius: 7px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(18, 23, 34, 0.96);
+  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
+  backdrop-filter: blur(12px);
+}
+
+.launch-action-dropdown button {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  width: 100%;
+  padding: 9px 12px;
+  background: transparent;
+  border: 0;
+  color: #fca5a5;
+  font-family: 'NanumGothic', sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: left;
+  cursor: pointer;
+}
+
+.launch-action-dropdown button:hover:not(:disabled) {
+  background: rgba(239, 68, 68, 0.12);
+}
+
+.launch-action-dropdown button:disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+
 /* ── Car Video ── */
 .car-video {
   position: absolute;

src/renderer/src/pages/Dashboard.tsx

@@ -83,7 +83,11 @@ function Dashboard({ authSession, onSessionUpdate, onLogout }: DashboardProps):
   const [showManual, setShowManual] = useState(false)
   const [runningApps, setRunningApps] = useState<Set<string>>(new Set())
   const [launchingApp, setLaunchingApp] = useState<string | null>(null)
+  const [appActionMenuOpen, setAppActionMenuOpen] = useState(false)
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false)
+  const [deletingApps, setDeletingApps] = useState<Record<string, boolean>>({})
   const noticeRef = useRef<HTMLDivElement>(null)
+  const appActionMenuRef = useRef<HTMLDivElement>(null)
   const initialAppSelectionDoneRef = useRef(false)
 
   const appConfig = apps.find((app) => app.appKey === activeApp) ?? null
@@ -99,6 +103,7 @@ function Dashboard({ authSession, onSessionUpdate, onLogout }: DashboardProps):
     && Boolean(appConfig?.launchUrl || appConfig?.execPath || appStatus?.installed)
   const hasAnyUpdatingApp = Object.values(updatingApps).some(Boolean)
   const activeAppUpdating = Boolean(updatingApps[activeApp])
+  const activeAppDeleting = Boolean(deletingApps[activeApp])
   const activeAppLaunching = launchingApp === activeApp
   const activeUpdateProgress = updateProgressByApp[activeApp] ?? 0
   const launcherUpdateAvailable = launcherStatus?.action === 'UPDATE'
@@ -110,6 +115,7 @@ function Dashboard({ authSession, onSessionUpdate, onLogout }: DashboardProps):
   const activeAppVersion = activeApp
     ? activeLocalVersion ?? appStatus?.localVersion ?? appStatus?.latestVersion ?? null
     : null
+  const activeAppDisplayName = appStatus?.displayName || appConfig?.name || activeApp
   const refreshSession = useCallback(async (): Promise<AuthSession | null> => {
     const response = await fetch(`${LAUNCHER_API_BASE_URL}/api/auth/refresh`, {
       method: 'POST',
@@ -462,6 +468,51 @@ function Dashboard({ authSession, onSessionUpdate, onLogout }: DashboardProps):
     }
   }, [appConfig, completeLocalUpdate, hasAnyUpdatingApp])
 
+  const handleUninstallApp = useCallback(async (): Promise<void> => {
+    if (!appConfig || isRunning || activeAppUpdating || activeAppDeleting) return
+
+    setDeleteConfirmOpen(false)
+    setAppActionMenuOpen(false)
+    setDeletingApps((prev) => ({ ...prev, [activeApp]: true }))
+
+    try {
+      await window.electron.ipcRenderer.invoke('uninstall-app', {
+        appName: activeApp,
+        execPath: appConfig.execPath,
+      })
+
+      setInstalledOverrides((prev) => ({ ...prev, [activeApp]: false }))
+      setLocalVersions((prev) => {
+        const next = { ...prev }
+        delete next[activeApp]
+        return next
+      })
+      setAppStatus((prev) => prev
+        ? {
+            ...prev,
+            installed: false,
+            localVersion: null,
+            status: 'NOT_INSTALLED',
+            action: 'INSTALL',
+            updateRequired: false,
+          }
+        : prev)
+    } catch (error) {
+      alert(error instanceof Error ? error.message : '앱 삭제에 실패했습니다.')
+    } finally {
+      setDeletingApps((prev) => {
+        const next = { ...prev }
+        delete next[activeApp]
+        return next
+      })
+    }
+  }, [activeApp, activeAppDeleting, activeAppUpdating, appConfig, isRunning])
+
+  const openDeleteConfirm = (): void => {
+    setAppActionMenuOpen(false)
+    setDeleteConfirmOpen(true)
+  }
+
   const createHandoffToken = useCallback(async (audienceApp: string): Promise<string | null> => {
     const requestHandoff = async (accessToken: string): Promise<Response> => {
       return fetch(`${LAUNCHER_API_BASE_URL}/api/auth/handoff`, {
@@ -562,6 +613,21 @@ function Dashboard({ authSession, onSessionUpdate, onLogout }: DashboardProps):
     return () => document.removeEventListener('mousedown', handler)
   }, [noticeOpen])
 
+  useEffect(() => {
+    setAppActionMenuOpen(false)
+  }, [activeApp])
+
+  useEffect(() => {
+    if (!appActionMenuOpen) return
+    const handler = (e: MouseEvent): void => {
+      if (appActionMenuRef.current && !appActionMenuRef.current.contains(e.target as Node)) {
+        setAppActionMenuOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [appActionMenuOpen])
+
   return (
     <div className="w-screen h-screen overflow-hidden flex flex-col bg-[var(--bg-deep)]">
       <TitleBar />
@@ -684,12 +750,43 @@ function Dashboard({ authSession, onSessionUpdate, onLogout }: DashboardProps):
                         실행중
                       </button>
                     ) : (
-                      <button className="launch-btn" onClick={handleLaunch}>
+                      <div className="launch-action-wrap" ref={appActionMenuRef}>
+                        <div className="launch-action-group">
+                          <button className="launch-btn launch-main-btn" onClick={handleLaunch}>
                             <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                               <polygon points="5 3 19 12 5 21 5 3"/>
                             </svg>
                             실행
                           </button>
+                          <button
+                            type="button"
+                            className="launch-menu-btn"
+                            onClick={() => setAppActionMenuOpen((open) => !open)}
+                            aria-label="앱 작업 더보기"
+                            aria-expanded={appActionMenuOpen}
+                          >
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                              <circle cx="12" cy="5" r="1" />
+                              <circle cx="12" cy="12" r="1" />
+                              <circle cx="12" cy="19" r="1" />
+                            </svg>
+                          </button>
+                        </div>
+                        {appActionMenuOpen && (
+                          <div className="launch-action-dropdown">
+                            <button type="button" onClick={openDeleteConfirm} disabled={activeAppDeleting}>
+                              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                                <path d="M3 6h18" />
+                                <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                                <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+                                <path d="M10 11v6" />
+                                <path d="M14 11v6" />
+                              </svg>
+                              <span>{activeAppDeleting ? '삭제 중...' : '삭제'}</span>
+                            </button>
+                          </div>
+                        )}
+                      </div>
                     )
                   ) : (
                     <button className="updating-btn" disabled>
@@ -745,6 +842,54 @@ function Dashboard({ authSession, onSessionUpdate, onLogout }: DashboardProps):
             </div>
           )}
 
+          {deleteConfirmOpen && (
+            <div
+              className="fixed inset-x-0 bottom-0 top-[38px] z-[10000] flex items-center justify-center bg-[rgba(2,6,18,0.48)] backdrop-blur-[10px]"
+              style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
+            >
+              <div className="relative w-[340px] overflow-hidden rounded-lg border border-[rgba(255,255,255,0.18)] bg-[rgba(22,27,39,0.72)] shadow-[0_28px_90px_rgba(0,0,0,0.58),inset_0_1px_0_rgba(255,255,255,0.12)] backdrop-blur-2xl">
+                <header className="flex h-[54px] items-center justify-between px-5">
+                  <h2 className="text-[15px] font-bold text-[var(--text-primary)]">앱 삭제</h2>
+                  <button
+                    type="button"
+                    onClick={() => setDeleteConfirmOpen(false)}
+                    className="grid h-8 w-8 place-items-center rounded-md text-white/55 hover:bg-white/[0.06] hover:text-white cursor-pointer transition-colors"
+                  >
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M18 6 6 18" />
+                      <path d="m6 6 12 12" />
+                    </svg>
+                  </button>
+                </header>
+                <div className="px-5 py-5">
+                  <p className="text-[13px] leading-relaxed text-[var(--text-secondary)]">
+                    {activeAppDisplayName} 앱을 삭제하시겠습니까?
+                  </p>
+                  <p className="mt-2 text-[12px] leading-relaxed text-white/42">
+                    다시 사용하려면 재설치가 필요합니다.
+                  </p>
+                </div>
+                <footer className="flex h-[58px] items-center justify-end gap-2 px-5">
+                  <button
+                    type="button"
+                    onClick={() => setDeleteConfirmOpen(false)}
+                    className="rounded-md border border-[rgba(255,255,255,0.12)] px-5 py-2 text-[12px] font-semibold text-[var(--text-secondary)] hover:bg-white/[0.06] hover:text-white cursor-pointer transition-colors"
+                  >
+                    취소
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => void handleUninstallApp()}
+                    className="rounded-md border border-red-400/35 bg-red-500/15 px-5 py-2 text-[12px] font-bold text-red-100 hover:border-red-400/50 hover:bg-red-500/24 cursor-pointer transition-colors disabled:cursor-default disabled:opacity-60"
+                    disabled={activeAppDeleting}
+                  >
+                    {activeAppDeleting ? '삭제 중...' : '삭제'}
+                  </button>
+                </footer>
+              </div>
+            </div>
+          )}
+
         </main>
       </div>
     </div>