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

feat: MTG 카드 세로 풍성한 레이아웃

Browse source 
제목 heading 크기 + 2줄, 날짜/소요시간/메모수 구조적 배치,
하단 구분선 + 상태 LED + UPPERCASE 상태 텍스트.
This commit is contained in:
Yun Chan 2026-04-08 11:59:25 +09:00
parent 4b14fa9553
commit da25791c75
1 changed files with 35 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -261,49 +261,49 @@ export function MeetingModePage(): React.ReactElement {
}}
>
<MetalCard>
{/* 상태 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>
<PhosphorText variant="dim" sx={{ fontSize: d3roTypo.meta.size }}>
{formatDate(session.startedAt)}
</PhosphorText>
</Box>
{/* 제목 — ellipsis */}
{/* 제목 — 여러 줄 허용 */}
<PhosphorText
variant="compact"
variant="heading"
sx={{
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
display: 'block',
mb: 0.5,
mb: 1.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>
{/* 정보 그리드 */}
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75, mb: 1.5 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<PhosphorText variant="dim" sx={{ fontSize: d3roTypo.meta.size, fontFamily: d3roFontMono }}>
{formatDate(session.startedAt)}
</PhosphorText>
</Box>
<Box sx={{ display: 'flex', gap: 1.5 }}>
<PhosphorText variant="dim" sx={{ fontSize: d3roTypo.meta.size, fontFamily: d3roFontMono }}>
{session.durationMs != null
? t('meeting.duration', { minutes: Math.round(session.durationMs / 60000) })
: '—'}
</PhosphorText>
<PhosphorText variant="dim" sx={{ fontSize: d3roTypo.meta.size, fontFamily: d3roFontMono }}>
{t('meeting.memos')}: {session.memoCount}
</PhosphorText>
</Box>
</Box>
{/* 하단 — 상태 표시 */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, pt: 1, borderTop: `1px solid ${d3roPalette.border.subtle}` }}>
<Led color={statusColor(session.status)} size={6} />
<PhosphorText variant="dim" sx={{ fontSize: d3roTypo.label.size, textTransform: 'uppercase', letterSpacing: d3roTypo.label.spacing }}>
{session.status === 'completed' ? t('meeting.completed')
: session.status === 'error' ? t('meeting.error')
: session.status === 'processing' ? t('meeting.processing')
: t('meeting.recording')}
</PhosphorText>
</Box>
{/* 프로세싱 진행 바 */}
{session.status === 'processing' && progress && progress.sessionId === session.id && (