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