위젯 기능 추가

2026-06-14 01:03:51 +09:00
parent 95595f7e9e
commit 6936792ad4
57 changed files with 6728 additions and 540 deletions
@@ -0,0 +1,98 @@
+import React from 'react';
+import type { WidgetSlot as WidgetSlotModel } from '../../types/widgetDashboard';
+import type { WidgetZoneId } from '../../types/widgetDashboard';
+import { getWidgetDefinition, widgetLabel } from '../../widgets/widgetRegistry';
+
+interface Props {
+  slot: WidgetSlotModel;
+  zoneId: WidgetZoneId;
+  onPickWidget: (slotId: string) => void;
+  onClearWidget?: (slotId: string) => void;
+}
+
+const WidgetSlotView: React.FC<Props> = ({
+  slot,
+  zoneId,
+  onPickWidget,
+  onClearWidget,
+}) => {
+  const def = getWidgetDefinition(slot.widgetType);
+  const category = zoneId === 'center' ? 'center' : 'side';
+  const Host = def?.Host;
+  const filledEmbed = Boolean(Host);
+
+  return (
+    <div
+      className={[
+        'wd-slot',
+        filledEmbed ? 'wd-slot--filled' : '',
+        filledEmbed && zoneId === 'center' ? 'wd-slot--filled-center' : '',
+      ].filter(Boolean).join(' ')}
+    >
+      {!filledEmbed && (
+        <header className="wd-slot-head">
+          <span className="wd-slot-title">{widgetLabel(slot.widgetType)}</span>
+          <div className="wd-slot-actions">
+            {slot.widgetType && onClearWidget && (
+              <button
+                type="button"
+                className="wd-slot-action"
+                title="위젯 제거"
+                aria-label="위젯 제거"
+                onClick={() => onClearWidget(slot.id)}
+              >
+                ✕
+              </button>
+            )}
+          </div>
+        </header>
+      )}
+      <div className="wd-slot-body">
+        {Host ? (
+          <Host config={slot.config} />
+        ) : (
+          <div className="wd-slot-empty">
+            <button
+              type="button"
+              className="wd-slot-add"
+              title="위젯 추가"
+              aria-label="위젯 추가"
+              onClick={() => onPickWidget(slot.id)}
+            >
+              <span className="wd-slot-add-icon">+</span>
+            </button>
+            <p className="wd-slot-empty-hint">
+              {category === 'center' ? '메인 위젯을 추가하세요' : '패널 위젯을 추가하세요'}
+            </p>
+          </div>
+        )}
+        {Host && (
+          <>
+            {filledEmbed && onClearWidget && (
+              <button
+                type="button"
+                className="wd-slot-overlay-clear"
+                title="위젯 제거"
+                aria-label="위젯 제거"
+                onClick={() => onClearWidget(slot.id)}
+              >
+                ✕
+              </button>
+            )}
+            <button
+              type="button"
+              className="wd-slot-change"
+              title="위젯 변경"
+              aria-label="위젯 변경"
+              onClick={() => onPickWidget(slot.id)}
+            >
+              +
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default WidgetSlotView;