매매 시그널 알림 화면 수정

frontend/src/utils/tradeNotificationGridPresets.ts

@@ -0,0 +1,76 @@
+/** 매매 시그널 알림 — 그리드형 n×n 레이아웃 프리셋 (TradingView 스타일) */
+
+export type TradeNotificationGridPresetId =
+  | '1x1'
+  | '2x1'
+  | '1x2'
+  | '3x1'
+  | '1x3'
+  | '2x1-31'
+  | '2x2'
+  | '4x1'
+  | '1x4'
+  | '2x1-211'
+  | '5x1'
+  | '3x2'
+  | '2x3'
+  | '4x2'
+  | '2x4';
+
+export interface TradeNotificationGridPreset {
+  id: TradeNotificationGridPresetId;
+  /** 스크롤 목록에 적용할 열 수 */
+  cols: number;
+  /** 팝업 그룹 라벨 (패널 수) */
+  group: number;
+  /** 짧은 표기 (2×2 등) */
+  label: string;
+}
+
+export const TRADE_NOTIFICATION_GRID_PRESETS: TradeNotificationGridPreset[] = [
+  { id: '1x1', cols: 1, group: 1, label: '1×1' },
+  { id: '2x1', cols: 2, group: 2, label: '2×1' },
+  { id: '1x2', cols: 1, group: 2, label: '1×2' },
+  { id: '3x1', cols: 3, group: 3, label: '3×1' },
+  { id: '1x3', cols: 1, group: 3, label: '1×3' },
+  { id: '2x1-31', cols: 2, group: 3, label: '2+1' },
+  { id: '2x2', cols: 2, group: 4, label: '2×2' },
+  { id: '4x1', cols: 4, group: 4, label: '4×1' },
+  { id: '1x4', cols: 1, group: 4, label: '1×4' },
+  { id: '2x1-211', cols: 2, group: 4, label: '2+2' },
+  { id: '5x1', cols: 5, group: 5, label: '5×1' },
+  { id: '3x2', cols: 3, group: 6, label: '3×2' },
+  { id: '2x3', cols: 2, group: 6, label: '2×3' },
+  { id: '4x2', cols: 4, group: 8, label: '4×2' },
+  { id: '2x4', cols: 2, group: 8, label: '2×4' },
+];
+
+const PRESET_MAP = new Map(
+  TRADE_NOTIFICATION_GRID_PRESETS.map(p => [p.id, p]),
+);
+
+export const DEFAULT_TRADE_NOTIFICATION_GRID_PRESET: TradeNotificationGridPresetId = '2x2';
+
+export function getTradeNotificationGridPreset(
+  id: string | undefined | null,
+): TradeNotificationGridPreset {
+  const preset = id ? PRESET_MAP.get(id as TradeNotificationGridPresetId) : undefined;
+  return preset ?? PRESET_MAP.get(DEFAULT_TRADE_NOTIFICATION_GRID_PRESET)!;
+}
+
+export function normalizeTradeNotificationGridPreset(
+  id: string | undefined | null,
+): TradeNotificationGridPresetId {
+  return getTradeNotificationGridPreset(id).id;
+}
+
+/** 그룹별 프리셋 (팝업 행 구성) */
+export function gridPresetsByGroup(): Map<number, TradeNotificationGridPreset[]> {
+  const map = new Map<number, TradeNotificationGridPreset[]>();
+  for (const p of TRADE_NOTIFICATION_GRID_PRESETS) {
+    const list = map.get(p.group) ?? [];
+    list.push(p);
+    map.set(p.group, list);
+  }
+  return map;
+}

frontend/src/utils/tradeNotificationListLayout.ts

@@ -0,0 +1,27 @@
+import { getUiPreferences, patchUiPreferences } from './uiPreferencesDb';
+import {
+  DEFAULT_TRADE_NOTIFICATION_GRID_PRESET,
+  normalizeTradeNotificationGridPreset,
+  type TradeNotificationGridPresetId,
+} from './tradeNotificationGridPresets';
+
+export type TradeNotificationListLayout = 'list' | 'grid';
+
+export function loadTradeNotificationListLayout(): TradeNotificationListLayout {
+  const v = getUiPreferences().tradeNotifications?.listLayout;
+  return v === 'grid' ? 'grid' : 'list';
+}
+
+export function saveTradeNotificationListLayout(layout: TradeNotificationListLayout): void {
+  patchUiPreferences({ tradeNotifications: { listLayout: layout } });
+}
+
+export function loadTradeNotificationGridPreset(): TradeNotificationGridPresetId {
+  return normalizeTradeNotificationGridPreset(
+    getUiPreferences().tradeNotifications?.gridPreset ?? DEFAULT_TRADE_NOTIFICATION_GRID_PRESET,
+  );
+}
+
+export function saveTradeNotificationGridPreset(preset: TradeNotificationGridPresetId): void {
+  patchUiPreferences({ tradeNotifications: { gridPreset: preset } });
+}