From 588147280ead5d5b243a84a89d6899959424b88e Mon Sep 17 00:00:00 2001
From: Yun Chan <yunchan@twentyoz.kr>
Date: Wed, 8 Apr 2026 11:48:19 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9D=98=20=EB=AA=A9=EB=A1=9D?=
 =?UTF-8?q?=20=EB=B0=98=EC=9D=91=ED=98=95=20=EA=B7=B8=EB=A6=AC=EB=93=9C=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20+=20ellipsis=20UX=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

단일 열 리스트 → CSS Grid (1~4열 반응형).
제목/메타 text-overflow: ellipsis, hover translateY 효과,
상태 LED+날짜 상단 배치, d3roTypo 토큰 사용.
---
 src/renderer/pages/MeetingModePage.tsx | 85 ++++++++++++++++++++------
 1 file changed, 65 insertions(+), 20 deletions(-)

diff --git a/src/renderer/pages/MeetingModePage.tsx b/src/renderer/pages/MeetingModePage.tsx
index af619ef..6d4c618 100644
--- a/src/renderer/pages/MeetingModePage.tsx
+++ b/src/renderer/pages/MeetingModePage.tsx
@@ -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>