goldenChat base source add

2026-05-23 15:11:48 +09:00
commit a4ea7762b5
2081 changed files with 1155760 additions and 0 deletions
@@ -0,0 +1,84 @@
+/**
+ * 설정 화면 — 매매 알림 팝업 배치 미리보기
+ */
+import React from 'react';
+import {
+  type TradeAlertPopupLayout,
+  type TradeAlertPopupPosition,
+  tradeAlertPopupClassNames,
+} from '../utils/tradeAlertPopupLayout';
+
+interface Props {
+  position: TradeAlertPopupPosition;
+  layout: TradeAlertPopupLayout;
+  gridCols: number;
+  enabled?: boolean;
+}
+
+const MOCK_ITEMS = [
+  { id: '1', side: 'BUY' as const,  title: 'KRW-BTC 매수',  price: '98,500,000' },
+  { id: '2', side: 'SELL' as const, title: 'KRW-ETH 매도',  price: '4,620,000' },
+  { id: '3', side: 'BUY' as const,  title: 'KRW-SOL 매수',  price: '245,000' },
+  { id: '4', side: 'SELL' as const, title: 'KRW-XRP 매도', price: '890' },
+];
+
+const PreviewCard: React.FC<{ side: 'BUY' | 'SELL'; title: string; price: string; compact?: boolean }> = ({
+  side, title, price, compact,
+}) => (
+  <div className={`tsn-card tsn-card--preview ${side === 'BUY' ? 'tsn-card--buy' : 'tsn-card--sell'}${compact ? ' tsn-card--compact' : ''}`}>
+    <div className="tsn-card-header tsn-card-header--preview">
+      <span className={`tsn-badge ${side === 'BUY' ? 'tsn-badge--buy' : 'tsn-badge--sell'}`}>{side}</span>
+      <span className="tsn-card-title">{title}</span>
+    </div>
+    {!compact && (
+      <div className="tsn-preview-body">
+        <span>₩{price}</span>
+      </div>
+    )}
+  </div>
+);
+
+export const TradeAlertPopupPreview: React.FC<Props> = ({
+  position,
+  layout,
+  gridCols,
+  enabled = true,
+}) => {
+  const { stack, cards } = tradeAlertPopupClassNames(position, layout);
+  const visible = layout === 'single' ? MOCK_ITEMS.slice(0, 1) : MOCK_ITEMS.slice(0, layout === 'grid' ? gridCols * 2 : 3);
+  const compact = layout === 'grid' || layout === 'strip';
+
+  return (
+    <div className={`stg-alert-preview${enabled ? '' : ' stg-alert-preview--off'}`}>
+      <div className="stg-alert-preview-frame">
+        <div className="stg-alert-preview-screen">
+          <span className="stg-alert-preview-label">화면</span>
+          <div
+            className={`${stack} tsn-stack--preview`}
+            style={layout === 'grid' ? { ['--tsn-grid-cols' as string]: gridCols } : undefined}
+          >
+            <div
+              className={cards}
+              style={layout === 'grid' ? { ['--tsn-grid-cols' as string]: gridCols } : undefined}
+            >
+              {visible.map(item => (
+                <PreviewCard
+                  key={item.id}
+                  side={item.side}
+                  title={item.title}
+                  price={item.price}
+                  compact={compact}
+                />
+              ))}
+            </div>
+            {layout === 'single' && MOCK_ITEMS.length > 1 && (
+              <span className="tsn-single-more">+{MOCK_ITEMS.length - 1}건</span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TradeAlertPopupPreview;