넛징 버블: 10초 자동 숨김 + X 닫기 버튼 추가

This commit is contained in:
Yun Chan 2026-04-05 13:40:34 +09:00
parent dc06a326b5
commit 39eb8b20fe

View file

@ -2,7 +2,8 @@
// 인스트루먼트 섀시 하단 — 각인 스타일 상태 표시 + Ollama 오프라인 넛징
import { useState, useEffect } from 'react'
import { Box, Typography, Fade } from '@mui/material'
import { Box, Typography, Fade, IconButton } from '@mui/material'
import CloseIcon from '@mui/icons-material/Close'
import { Led } from './ds'
import { d3roPalette, d3roFontMono } from '../theme'
import { OllamaGuideModal } from './OllamaGuideModal'
@ -30,11 +31,12 @@ export function StatusBar(): React.ReactElement {
const connected = llmStatus?.connectionState === 'connected'
// 오프라인 3초 후 넛징 버블 표시
// 오프라인 3초 후 넛징 버블 표시 → 10초 후 자동 숨김
useEffect(() => {
if (!connected) {
const timer = setTimeout(() => setShowNudge(true), 3000)
return () => clearTimeout(timer)
const showTimer = setTimeout(() => setShowNudge(true), 3000)
const hideTimer = setTimeout(() => setShowNudge(false), 13000)
return () => { clearTimeout(showTimer); clearTimeout(hideTimer) }
}
setShowNudge(false)
return undefined
@ -86,9 +88,14 @@ export function StatusBar(): React.ReactElement {
},
}}
>
<Typography sx={{ fontSize: '12px', color: d3roPalette.text.primary, mb: 0.5, fontWeight: 600 }}>
Ollama가
</Typography>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
<Typography sx={{ fontSize: '12px', color: d3roPalette.text.primary, mb: 0.5, fontWeight: 600 }}>
Ollama가
</Typography>
<IconButton size="small" onClick={() => setShowNudge(false)} sx={{ color: d3roPalette.text.inactive, p: 0, ml: 1 }}>
<CloseIcon sx={{ fontSize: 14 }} />
</IconButton>
</Box>
<Typography sx={{ fontSize: '11px', color: d3roPalette.text.inactive, mb: 1 }}>
LLM (, ) Ollama가 .
</Typography>