From ba4ef5e230e7e0d4e48987429a55d091c604a3b8 Mon Sep 17 00:00:00 2001
From: Macbook <macbook@Macbookui-MacBookPro.local>
Date: Sat, 30 May 2026 16:46:59 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A7=A4=EB=A7=A4=20=EC=8B=9C=EA=B7=B8?=
 =?UTF-8?q?=EB=84=90=20=EC=95=8C=EB=A6=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.css                          | 18 ++--
 frontend/src/components/TopMenuBar.tsx        | 56 ++++++++-----
 .../components/TradeNotificationListPage.tsx  | 84 ++++++++-----------
 frontend/src/styles/tradeNotificationList.css | 10 +++
 .../src/utils/tradeNotificationListLayout.ts  | 19 +++++
 5 files changed, 108 insertions(+), 79 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index b9d6a6f..5ef595e 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -194,24 +194,23 @@ html.theme-blue {
 .tmb-divider {
   width: 1px;
   height: 20px;
-  background: var(--border);
-  margin: 0 8px;
+  background: color-mix(in srgb, var(--border) 90%, var(--text3));
+  margin: 0 6px;
   flex-shrink: 0;
+  align-self: center;
 }
-.tmb-sep {
-  width: 1px;
-  height: 20px;
-  background: var(--border);
+.tmb-divider--nav {
   margin: 0 4px;
-  flex-shrink: 0;
+  height: 18px;
 }
 
 /* 네비게이션 */
 .tmb-nav {
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: 0;
   flex: 1;
+  min-width: 0;
 }
 .tmb-nav-btn {
   display: inline-flex;
@@ -252,8 +251,7 @@ html.theme-blue {
 .tmb-right {
   display: flex;
   align-items: center;
-  gap: 4px;
-  margin-left: auto;
+  gap: 0;
   flex-shrink: 0;
 }
 
diff --git a/frontend/src/components/TopMenuBar.tsx b/frontend/src/components/TopMenuBar.tsx
index 6a0eb7c..0d15f12 100644
--- a/frontend/src/components/TopMenuBar.tsx
+++ b/frontend/src/components/TopMenuBar.tsx
@@ -207,33 +207,44 @@ export const TopMenuBar = memo(function TopMenuBar({
 
       {/* 내비게이션 메뉴 */}
       <nav className="tmb-nav">
-        {visibleItems.map(({ page, label, icon }) => (
-          <button
-            key={page}
-            className={`tmb-nav-btn ${activePage === page ? 'tmb-nav-btn--active' : ''}`}
-            onClick={() => onPage(page)}
-          >
-            <span className="tmb-nav-icon">{icon}</span>
-            <span className="tmb-nav-label">{label}</span>
-          </button>
+        {visibleItems.map(({ page, label, icon }, index) => (
+          <React.Fragment key={page}>
+            {index > 0 && <span className="tmb-divider tmb-divider--nav" aria-hidden="true" />}
+            <button
+              type="button"
+              className={`tmb-nav-btn ${activePage === page ? 'tmb-nav-btn--active' : ''}`}
+              onClick={() => onPage(page)}
+            >
+              <span className="tmb-nav-icon">{icon}</span>
+              <span className="tmb-nav-label">{label}</span>
+            </button>
+          </React.Fragment>
         ))}
       </nav>
 
+      <span className="tmb-divider" aria-hidden="true" />
+
       {/* 우측 영역 */}
       <div className="tmb-right">
         {onOpenAppDownload && (
-          <button
-            type="button"
-            className="tmb-app-download-btn"
-            onClick={onOpenAppDownload}
-            title="GoldenChart 모바일 앱 다운로드"
-            aria-label="앱 다운로드"
-          >
-            <IcAppDownload />
-          </button>
+          <>
+            <button
+              type="button"
+              className="tmb-app-download-btn"
+              onClick={onOpenAppDownload}
+              title="GoldenChart 모바일 앱 다운로드"
+              aria-label="앱 다운로드"
+            >
+              <IcAppDownload />
+            </button>
+            {onOpenNotifications && showNotifications && (
+              <span className="tmb-divider" aria-hidden="true" />
+            )}
+          </>
         )}
         {onOpenNotifications && showNotifications && (
-          <div className="tmb-notify-group">
+          <>
+            <div className="tmb-notify-group">
             <button
               type="button"
               className={`tmb-notify-btn ${activePage === 'notifications' ? 'tmb-nav-btn--active' : ''}`}
@@ -272,11 +283,14 @@ export const TopMenuBar = memo(function TopMenuBar({
                 <IcDismissPopups />
               </button>
             )}
-          </div>
+            </div>
+            <span className="tmb-divider" aria-hidden="true" />
+          </>
         )}
 
         {/* 테마 토글 버튼 */}
         <button
+          type="button"
           className={`tmb-theme-btn tmb-theme-btn--${theme}`}
           onClick={onTheme}
           title={`테마 전환 (현재: ${tc.label}) → ${THEME_CONFIG[tc.next].label}`}
@@ -285,7 +299,7 @@ export const TopMenuBar = memo(function TopMenuBar({
           <span className="tmb-theme-label">{tc.label}</span>
         </button>
 
-        <div className="tmb-sep" />
+        <span className="tmb-divider" aria-hidden="true" />
 
         {authUser ? (
           <>
diff --git a/frontend/src/components/TradeNotificationListPage.tsx b/frontend/src/components/TradeNotificationListPage.tsx
index db2ecb8..9358324 100644
--- a/frontend/src/components/TradeNotificationListPage.tsx
+++ b/frontend/src/components/TradeNotificationListPage.tsx
@@ -30,9 +30,12 @@ import {
   saveTradeNotificationListLayout,
   saveTradeNotificationListSort,
   TRADE_NOTIFICATION_CANDLE_FILTER_OPTIONS,
+  TRADE_NOTIFICATION_READ_FILTER_OPTIONS,
+  TRADE_NOTIFICATION_SORT_OPTIONS,
   type TradeNotificationCandleFilter,
   type TradeNotificationListLayout,
   type TradeNotificationListSort,
+  type TradeNotificationReadFilter,
 } from '../utils/tradeNotificationListLayout';
 import { normalizeStartCandleType } from '../utils/strategyStartNodes';
 import {
@@ -121,7 +124,7 @@ export const TradeNotificationListPage: React.FC<Props> = ({
     refreshHistory,
   } = useTradeNotification();
 
-  const [filter, setFilter] = useState<'all' | 'unread'>('all');
+  const [filter, setFilter] = useState<TradeNotificationReadFilter>('all');
   const [listSort, setListSort] = useState<TradeNotificationListSort>(
     () => loadTradeNotificationListSort(),
   );
@@ -337,61 +340,46 @@ export const TradeNotificationListPage: React.FC<Props> = ({
               {selectedCount > 0 && (
                 <span className="tnl-chip tnl-chip--selected">선택 {selectedCount}건</span>
               )}
-              <div className="tnl-filter">
-                <button
-                  type="button"
-                  className={filter === 'all' ? 'tnl-filter-btn--active' : ''}
-                  onClick={() => setFilter('all')}
+              <div className="tnl-toolbar-selects">
+                <select
+                  className="tnl-toolbar-select"
+                  value={filter}
+                  aria-label="표시 범위"
+                  onChange={e => setFilter(e.target.value as TradeNotificationReadFilter)}
                 >
-                  전체
-                </button>
-                <button
-                  type="button"
-                  className={filter === 'unread' ? 'tnl-filter-btn--active' : ''}
-                  onClick={() => setFilter('unread')}
+                  {TRADE_NOTIFICATION_READ_FILTER_OPTIONS.map(o => (
+                    <option key={o.value} value={o.value}>{o.label}</option>
+                  ))}
+                </select>
+                <span className="header-toolbar-divider" aria-hidden="true" />
+                <select
+                  className="tnl-toolbar-select"
+                  value={listSort}
+                  aria-label="목록 정렬"
+                  onChange={e => handleListSortChange(e.target.value as TradeNotificationListSort)}
                 >
-                  미확인
-                </button>
+                  {TRADE_NOTIFICATION_SORT_OPTIONS.map(o => (
+                    <option key={o.value} value={o.value}>{o.label}</option>
+                  ))}
+                </select>
+                <span className="header-toolbar-divider" aria-hidden="true" />
+                <select
+                  className="tnl-toolbar-select"
+                  value={candleFilter}
+                  aria-label="시간봉 필터"
+                  onChange={e => handleCandleFilterChange(e.target.value as TradeNotificationCandleFilter)}
+                >
+                  <option value="">전체</option>
+                  {TRADE_NOTIFICATION_CANDLE_FILTER_OPTIONS.map(o => (
+                    <option key={o.value} value={o.value}>{o.label}</option>
+                  ))}
+                </select>
               </div>
               {unreadCount > 0 && (
                 <button type="button" className="tnl-btn tnl-btn--primary" onClick={markAllAsRead}>
                   모두 읽음
                 </button>
               )}
-              <div className="tnl-filter tnl-sort-toggle" role="group" aria-label="목록 정렬">
-                <button
-                  type="button"
-                  className={listSort === 'market' ? 'tnl-filter-btn--active' : ''}
-                  onClick={() => handleListSortChange('market')}
-                >
-                  종목순
-                </button>
-                <button
-                  type="button"
-                  className={listSort === 'newest' ? 'tnl-filter-btn--active' : ''}
-                  onClick={() => handleListSortChange('newest')}
-                >
-                  최신시간순
-                </button>
-                <button
-                  type="button"
-                  className={listSort === 'oldest' ? 'tnl-filter-btn--active' : ''}
-                  onClick={() => handleListSortChange('oldest')}
-                >
-                  이전시간순
-                </button>
-              </div>
-              <select
-                className="tnl-candle-filter-select"
-                value={candleFilter}
-                aria-label="시간봉 필터"
-                onChange={e => handleCandleFilterChange(e.target.value as TradeNotificationCandleFilter)}
-              >
-                <option value="">전체</option>
-                {TRADE_NOTIFICATION_CANDLE_FILTER_OPTIONS.map(o => (
-                  <option key={o.value} value={o.value}>{o.label}</option>
-                ))}
-              </select>
               <div className="tnl-layout-toggle vtd-view-toggle" role="group" aria-label="목록 표시 방식">
                 <button
                   type="button"
diff --git a/frontend/src/styles/tradeNotificationList.css b/frontend/src/styles/tradeNotificationList.css
index 30d80a1..f310ab5 100644
--- a/frontend/src/styles/tradeNotificationList.css
+++ b/frontend/src/styles/tradeNotificationList.css
@@ -953,8 +953,17 @@
   gap: 10px;
 }
 
+.tnl-toolbar-selects {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.tnl-toolbar-select,
 .tnl-candle-filter-select {
   height: 32px;
+  min-width: 108px;
   padding: 0 10px;
   border: 1px solid var(--se-border, var(--border));
   border-radius: 8px;
@@ -965,6 +974,7 @@
   cursor: pointer;
 }
 
+.tnl-toolbar-select:focus-visible,
 .tnl-candle-filter-select:focus-visible {
   outline: 2px solid color-mix(in srgb, var(--accent, #3f7ef5) 55%, transparent);
   outline-offset: 1px;
diff --git a/frontend/src/utils/tradeNotificationListLayout.ts b/frontend/src/utils/tradeNotificationListLayout.ts
index 7a3e4f0..9a665e3 100644
--- a/frontend/src/utils/tradeNotificationListLayout.ts
+++ b/frontend/src/utils/tradeNotificationListLayout.ts
@@ -43,6 +43,25 @@ export function saveTradeNotificationListSort(sort: TradeNotificationListSort):
   patchUiPreferences({ tradeNotifications: { listSort: sort } });
 }
 
+export type TradeNotificationReadFilter = 'all' | 'unread';
+
+export const TRADE_NOTIFICATION_READ_FILTER_OPTIONS: {
+  value: TradeNotificationReadFilter;
+  label: string;
+}[] = [
+  { value: 'all', label: '전체' },
+  { value: 'unread', label: '미확인' },
+];
+
+export const TRADE_NOTIFICATION_SORT_OPTIONS: {
+  value: TradeNotificationListSort;
+  label: string;
+}[] = [
+  { value: 'market', label: '종목순' },
+  { value: 'newest', label: '최신시간순' },
+  { value: 'oldest', label: '이전시간순' },
+];
+
 /** 알림 목록 시간봉 필터 — '' = 전체 */
 export type TradeNotificationCandleFilter = '' | (typeof STRATEGY_CANDLE_TYPE_OPTIONS)[number]['value'];