전략조건 상세설명 기능 추가

2026-05-25 03:15:05 +09:00
parent 30dedc4abc
commit 67324ded9d
22 changed files with 1151 additions and 187 deletions
@@ -0,0 +1,85 @@
+/**
+ * 전략 조건 서술형 설명 팝업
+ */
+import React, { useMemo } from 'react';
+import DraggableModalFrame from '../DraggableModalFrame';
+import {
+  buildStrategyNarrative,
+  type StrategyDescriptionInput,
+} from '../../utils/strategyDescriptionNarrative';
+
+interface Props extends StrategyDescriptionInput {
+  onClose: () => void;
+}
+
+const StrategyDescriptionModal: React.FC<Props> = ({
+  onClose,
+  name,
+  description,
+  buyEditorState,
+  sellEditorState,
+  buyCondition,
+  sellCondition,
+  orphanCount,
+  def,
+}) => {
+  const narrative = useMemo(
+    () => buildStrategyNarrative({
+      name,
+      description,
+      buyEditorState,
+      sellEditorState,
+      buyCondition,
+      sellCondition,
+      orphanCount,
+      def,
+    }),
+    [name, description, buyEditorState, sellEditorState, buyCondition, sellCondition, orphanCount, def],
+  );
+
+  return (
+    <DraggableModalFrame
+      onClose={onClose}
+      title="전략 설명"
+      titleKo="Strategy Description"
+      badge="INFO"
+      width={560}
+      overlayClassName="se-desc-overlay"
+      dialogClassName="se-desc-modal app-popup-shell"
+      bodyClassName="se-desc-body app-popup-body"
+      zIndex={11000}
+    >
+      <div className="se-desc-content">
+        {narrative.intro.map((p, i) => (
+          <p key={`intro-${i}`} className="se-desc-intro">{p}</p>
+        ))}
+
+        {narrative.sections.map(section => (
+          <section key={section.title} className="se-desc-section">
+            <h3 className="se-desc-section-title">{section.title}</h3>
+            {section.paragraphs.map((p, i) => (
+              <p key={`${section.title}-p-${i}`} className="se-desc-para">{p}</p>
+            ))}
+            {section.bullets && section.bullets.length > 0 && (
+              <ul className="se-desc-list">
+                {section.bullets.map((line, i) => (
+                  <li key={`${section.title}-b-${i}`} className="se-desc-list-item">{line}</li>
+                ))}
+              </ul>
+            )}
+          </section>
+        ))}
+
+        {narrative.footnotes.length > 0 && (
+          <footer className="se-desc-footnotes">
+            {narrative.footnotes.map((note, i) => (
+              <p key={`fn-${i}`} className="se-desc-footnote">※ {note}</p>
+            ))}
+          </footer>
+        )}
+      </div>
+    </DraggableModalFrame>
+  );
+};
+
+export default StrategyDescriptionModal;