diff --git a/frontend/src/components/TradeNotificationListPage.tsx b/frontend/src/components/TradeNotificationListPage.tsx index 7a8f0ae..dd951a4 100644 --- a/frontend/src/components/TradeNotificationListPage.tsx +++ b/frontend/src/components/TradeNotificationListPage.tsx @@ -651,11 +651,14 @@ export const TradeNotificationListPage: React.FC = ({ 'vl-scroll', `tnl-grid--cols-${gridCols}`, ].join(' ')} + style={{ ['--tnl-grid-cols' as string]: gridCols }} + rowClassName="vl-grid-row tnl-grid-row" items={sorted} columns={gridCols} estimateRowSize={300} rowGap={14} measureDynamic + remeasureKey={gridCols} overscan={2} getItemKey={item => item.id} role="list" diff --git a/frontend/src/styles/tradeNotificationList.css b/frontend/src/styles/tradeNotificationList.css index 9a1b824..270c032 100644 --- a/frontend/src/styles/tradeNotificationList.css +++ b/frontend/src/styles/tradeNotificationList.css @@ -774,6 +774,52 @@ flex-shrink: 0; } +/* 상세 · 차트 · 매매 — 동일 세그먼트 버튼 */ +.tnl-summary-card-actions .tnl-row-action, +.tnl-summary-card-actions .tnl-row-chart, +.tnl-summary-card-actions .tnl-row-trade { + display: inline-flex; + align-items: center; + justify-content: center; + height: 32px; + padding: 0 14px; + margin: 0; + border: 1px solid var(--border); + border-radius: 0; + background: transparent; + color: var(--text2); + font-size: 12px; + font-weight: 500; + cursor: pointer; + transition: background 0.15s, color 0.15s, border-color 0.15s; +} + +.tnl-summary-card-actions .tnl-row-action { + border-radius: 6px 0 0 6px; +} + +.tnl-summary-card-actions .tnl-row-chart, +.tnl-summary-card-actions .tnl-row-trade { + margin-left: -1px; + border-left: none; +} + +.tnl-summary-card-actions .tnl-row-trade { + border-radius: 0 6px 6px 0; +} + +.tnl-summary-card-actions:not(:has(.tnl-row-trade)) .tnl-row-chart { + border-radius: 0 6px 6px 0; +} + +.tnl-summary-card-actions .tnl-row-action:hover, +.tnl-summary-card-actions .tnl-row-chart:hover, +.tnl-summary-card-actions .tnl-row-trade:hover { + background: var(--bg4); + color: var(--text); + z-index: 1; +} + .tnl-row-report { display: inline-flex; align-items: center; @@ -1338,16 +1384,11 @@ container-name: tnl-grid-wrap; } -ul.tnl-list.tnl-list--grid { +.tnl-list.tnl-list--grid { flex: 1; min-height: 0; width: 100%; - display: grid; - flex-direction: unset; - grid-auto-rows: auto; - gap: 14px; - align-content: start; - align-items: start; + display: block; list-style: none; margin: 0; padding: 4px 4px 16px; @@ -1357,23 +1398,32 @@ ul.tnl-list.tnl-list--grid { -webkit-overflow-scrolling: touch; } +/* VirtualGridScroll 행 단위 n열 배치 */ +.tnl-grid-row { + display: grid; + grid-template-columns: repeat(var(--tnl-grid-cols, 2), minmax(0, 1fr)); + gap: 14px; + align-items: start; + width: 100%; +} + @container tnl-grid-wrap (max-width: 640px) { - ul.tnl-list.tnl-list--grid { + .tnl-list-wrap--grid .tnl-grid-row { grid-template-columns: minmax(0, 1fr) !important; } } @container tnl-grid-wrap (max-width: 960px) { - ul.tnl-list.tnl-list--grid.tnl-grid--cols-3, - ul.tnl-list.tnl-list--grid.tnl-grid--cols-4, - ul.tnl-list.tnl-list--grid.tnl-grid--cols-5 { + .tnl-list-wrap--grid .tnl-list--grid.tnl-grid--cols-3 .tnl-grid-row, + .tnl-list-wrap--grid .tnl-list--grid.tnl-grid--cols-4 .tnl-grid-row, + .tnl-list-wrap--grid .tnl-list--grid.tnl-grid--cols-5 .tnl-grid-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @container tnl-grid-wrap (max-width: 1200px) { - ul.tnl-list.tnl-list--grid.tnl-grid--cols-4, - ul.tnl-list.tnl-list--grid.tnl-grid--cols-5 { + .tnl-list-wrap--grid .tnl-list--grid.tnl-grid--cols-4 .tnl-grid-row, + .tnl-list-wrap--grid .tnl-list--grid.tnl-grid--cols-5 .tnl-grid-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }