feat: 히스토리 페이지 반응형 그리드 레이아웃

단일 열 리스트 → CSS Grid (1~3열 반응형).
maxWidth: 900 제한 제거 → 전체 너비 활용.
This commit is contained in:
Yun Chan 2026-04-08 11:50:57 +09:00
parent 588147280e
commit b452ebbe52

View file

@ -84,7 +84,7 @@ export function HistoryPage(): React.ReactElement {
}, [activeTag])
return (
<Box sx={{ maxWidth: 900, mx: 'auto', p: 4 }}>
<Box sx={{ mx: 'auto', p: 4 }}>
{/* 페이지 헤더 -- 각인 스타일 */}
<PageHeader
title={t('history.title').toUpperCase()}
@ -176,8 +176,16 @@ export function HistoryPage(): React.ReactElement {
</PhosphorText>
</Box>
{/* 항목 */}
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
{/* 항목 — 반응형 그리드 */}
<Box sx={{
display: 'grid',
gridTemplateColumns: {
xs: '1fr',
sm: 'repeat(2, 1fr)',
md: 'repeat(3, 1fr)',
},
gap: 1.5,
}}>
{group.entries.map((entry: HistoryEntry) => (
<HistoryEntryCard
key={entry.id}