From 567d45c6e34391aa0101817e1f2b069737b82b9b Mon Sep 17 00:00:00 2001
From: Macbook <macbook@Macbookui-MacBookPro.local>
Date: Mon, 8 Jun 2026 01:11:57 +0900
Subject: [PATCH] =?UTF-8?q?=EC=95=8C=EB=A6=BC=EB=AA=A9=EB=A1=9D=20?=
 =?UTF-8?q?=EA=B7=B8=EB=A6=AC=EB=93=9C=ED=98=95=20=ED=91=9C=EC=8B=9C=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TradeNotificationListPage.tsx  |  3 +
 frontend/src/styles/tradeNotificationList.css | 76 +++++++++++++++----
 2 files changed, 66 insertions(+), 13 deletions(-)

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<Props> = ({
                   '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;
   }
 }