mobile download

2026-05-28 14:44:19 +09:00
parent e2816b037f
commit 3503ef33f5
152 changed files with 11021 additions and 687 deletions
@@ -0,0 +1,92 @@
+import React from 'react';
+import { useTradeNotification } from '../../contexts/TradeNotificationContext';
+import { useNavigation } from '../../contexts/NavigationContext';
+
+export default function NotificationsScreen() {
+  const {
+    allNotifications,
+    unreadCount,
+    markAsRead,
+    markAllAsRead,
+    deleteNotification,
+    deleteAllNotifications,
+    refreshHistory,
+  } = useTradeNotification();
+  const { openVirtualFocus } = useNavigation();
+  const [refreshing, setRefreshing] = React.useState(false);
+
+  const onRefresh = async () => {
+    setRefreshing(true);
+    await refreshHistory();
+    setRefreshing(false);
+  };
+
+  return (
+    <div className="screen">
+      <header className="screen-header">
+        <h1 className="screen-title">알림 {unreadCount > 0 && `(${unreadCount})`}</h1>
+        <div style={{ display: 'flex', gap: 8 }}>
+          <button type="button" className="chip" onClick={() => void onRefresh()}>{refreshing ? '…' : '새로고침'}</button>
+          <button type="button" className="chip" onClick={markAllAsRead}>모두 읽음</button>
+        </div>
+      </header>
+
+      {allNotifications.length === 0 ? (
+        <div className="empty-state">
+          <h3>알림 없음</h3>
+          <p>전략 조건 충족 시 알림이 표시됩니다</p>
+        </div>
+      ) : (
+        <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
+          {allNotifications.map(item => (
+            <div
+              key={item.id}
+              className="card"
+              style={{
+                padding: 14,
+                opacity: item.isRead ? 0.65 : 1,
+                borderLeft: `3px solid ${item.signalType === 'BUY' ? 'var(--gc-green)' : 'var(--gc-red)'}`,
+              }}
+              onClick={() => {
+                markAsRead(item.id);
+                openVirtualFocus(item.market);
+              }}
+              role="button"
+              tabIndex={0}
+            >
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                <div>
+                  <span className={item.signalType === 'BUY' ? 'text-green' : 'text-red'} style={{ fontWeight: 700 }}>
+                    {item.signalType === 'BUY' ? '매수' : '매도'}
+                  </span>
+                  <span style={{ marginLeft: 8, fontWeight: 600 }}>{item.market}</span>
+                </div>
+                <button
+                  type="button"
+                  className="chip"
+                  style={{ minHeight: 28, padding: '4px 8px', color: 'var(--gc-red)' }}
+                  onClick={e => { e.stopPropagation(); void deleteNotification(item.id); }}
+                >
+                  삭제
+                </button>
+              </div>
+              <div style={{ fontSize: 14, marginTop: 4 }}>₩{item.price?.toLocaleString()}</div>
+              {item.strategyName && (
+                <div className="text-muted" style={{ fontSize: 11, marginTop: 2 }}>{item.strategyName}</div>
+              )}
+              <div className="text-muted" style={{ fontSize: 10, marginTop: 4 }}>
+                {new Date(item.receivedAt).toLocaleString('ko-KR')}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {allNotifications.length > 0 && (
+        <div style={{ padding: 16, textAlign: 'center' }}>
+          <button type="button" className="btn-danger" onClick={() => void deleteAllNotifications()}>전체 삭제</button>
+        </div>
+      )}
+    </div>
+  );
+}