yunchan/d3ro-voice
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions

feat: 회의 목록 반응형 그리드 레이아웃 + ellipsis UX 개선

Browse source 
단일 열 리스트 → CSS Grid (1~4열 반응형).
제목/메타 text-overflow: ellipsis, hover translateY 효과,
상태 LED+날짜 상단 배치, d3roTypo 토큰 사용.
This commit is contained in:
Yun Chan 2026-04-08 11:48:19 +09:00
parent 6dd4846de7
commit 588147280e
1 changed files with 65 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

85
src/renderer/pages/MeetingModePage.tsx
View file

@ -238,42 +238,87 @@ export function MeetingModePage(): React.ReactElement {
) : sessions.length === 0 ? (
<EmptyStateCard message={`${t('meeting.noSessions')}\n${t('meeting.noSessionsDesc')}`} />
) : (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
<Box
sx={{
display: 'grid',
gridTemplateColumns: {
xs: '1fr',
sm: 'repeat(2, 1fr)',
md: 'repeat(3, 1fr)',
lg: 'repeat(4, 1fr)',
},
gap: 1.5,
}}
>
{sessions.map((session) => (
<Box
key={session.id}
onClick={() => handleViewDetail(session.id)}
sx={{ cursor: 'pointer', '&:hover': { opacity: 0.85 } }}
sx={{
cursor: 'pointer',
transition: 'transform 0.15s ease, box-shadow 0.15s ease',
'&:hover': { transform: 'translateY(-2px)' },
}}
>
<MetalCard>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Box>
<PhosphorText variant="label">
{session.title ?? t('meeting.untitled')}
</PhosphorText>
<PhosphorText variant="dim" sx={{ mt: 0.5 }}>
{session.durationMs != null
? t('meeting.duration', { minutes: Math.round(session.durationMs / 60000) })
: '—'}
{' · '}
{t('meeting.memos')}: {session.memoCount}
{/* 상태 LED + 날짜 */}
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
<Led color={statusColor(session.status)} size={6} />
<PhosphorText variant="dim" sx={{ fontSize: d3roTypo.meta.size }}>
{session.status === 'completed' ? t('meeting.completed')
: session.status === 'error' ? t('meeting.error')
: session.status === 'processing' ? t('meeting.processing')
: t('meeting.recording')}
</PhosphorText>
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<PhosphorText variant="dim">{formatDate(session.startedAt)}</PhosphorText>
<Led color={statusColor(session.status)} size={8} />
</Box>
<PhosphorText variant="dim" sx={{ fontSize: d3roTypo.meta.size }}>
{formatDate(session.startedAt)}
</PhosphorText>
</Box>
{/* 프로세싱 중인 세션 표시 */}
{/* 제목 — ellipsis */}
<PhosphorText
variant="compact"
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
display: 'block',
mb: 0.5,
}}
>
{session.title ?? t('meeting.untitled')}
</PhosphorText>
{/* 메타 — 소요 시간 · 메모 수 */}
<PhosphorText variant="dim" sx={{
fontSize: d3roTypo.meta.size,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}>
{session.durationMs != null
? t('meeting.duration', { minutes: Math.round(session.durationMs / 60000) })
: '—'}
{' · '}
{t('meeting.memos')}: {session.memoCount}
</PhosphorText>
{/* 프로세싱 진행 바 */}
{session.status === 'processing' && progress && progress.sessionId === session.id && (
<Box sx={{ mt: 1 }}>
<LinearProgress
variant="determinate"
value={progress.percent}
sx={{ height: 4, borderRadius: 2 }}
sx={{
height: 3,
borderRadius: 2,
bgcolor: d3roPalette.bg.inset,
'& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.amber },
}}
/>
<PhosphorText variant="dim" sx={{ mt: 0.5, fontSize: 11 }}>
<PhosphorText variant="dim" sx={{ mt: 0.5, fontSize: d3roTypo.nano.size }}>
{t(`meeting.processingStep.${progress.step}` as Parameters<typeof t>[0])}
</PhosphorText>
</Box>