feat: 히스토리 페이지 반응형 그리드 레이아웃
단일 열 리스트 → CSS Grid (1~3열 반응형). maxWidth: 900 제한 제거 → 전체 너비 활용.
This commit is contained in:
parent
588147280e
commit
b452ebbe52
1 changed files with 11 additions and 3 deletions
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue