From 8408da536f155193ba5c7e6d0c081c1a6ca48037 Mon Sep 17 00:00:00 2001
From: pipisebastian <yrt7998@pusan.ac.kr>
Date: Tue, 26 Nov 2024 22:52:15 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=83=80=EC=9E=85=20=EC=98=B5=EC=85=98?=
 =?UTF-8?q?=20=EB=AA=A8=EB=8B=AC=EC=B0=BD=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#39
---
 .../editor/components/block/Block.tsx         | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/client/src/features/editor/components/block/Block.tsx b/client/src/features/editor/components/block/Block.tsx
index fdbac776..96e210cf 100644
--- a/client/src/features/editor/components/block/Block.tsx
+++ b/client/src/features/editor/components/block/Block.tsx
@@ -20,6 +20,7 @@ import { MenuBlock } from "../MenuBlock/MenuBlock";
 import { TextOptionModal } from "../TextOptionModal/TextOptionModal";
 import { blockAnimation } from "./Block.animation";
 import { textContainerStyle, blockContainerStyle, contentWrapperStyle } from "./Block.style";
+import { TypeOptionModal } from "../TypeOptionModal/TypeOptionModal";
 
 interface BlockProps {
   id: string;
@@ -86,6 +87,9 @@ export const Block: React.FC<BlockProps> = memo(
       },
     });
 
+    const [slashModalOpen, setSlashModalOpen] = useState(false);
+    const [slashModalPosition, setSlashModalPosition] = useState({ top: 0, left: 0 });
+
     const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
       const currentElement = e.currentTarget;
       // 텍스트를 삭제하면 <br> 태그가 생김
@@ -115,7 +119,18 @@ export const Block: React.FC<BlockProps> = memo(
 
       const caretPosition = getAbsoluteCaretPosition(e.currentTarget);
       block.crdt.currentCaret = caretPosition;
-      onInput(e, block);
+
+      const element = e.currentTarget;
+      const newContent = element.textContent || "";
+
+      if (newContent === "/" && !slashModalOpen) {
+        const rect = e.currentTarget.getBoundingClientRect();
+        setSlashModalPosition({
+          top: rect.top,
+          left: rect.left + 0,
+        });
+        setSlashModalOpen(true);
+      }
     };
 
     const handleAnimationSelect = (animation: AnimationType) => {
@@ -258,6 +273,12 @@ export const Block: React.FC<BlockProps> = memo(
           onTextColorSelect={handleTextColorSelect}
           onTextBackgroundColorSelect={handleTextBackgroundColorSelect}
         />
+        <TypeOptionModal
+          isOpen={slashModalOpen}
+          onClose={() => setSlashModalOpen(false)}
+          onTypeSelect={(type) => handleTypeSelect(type)}
+          position={slashModalPosition}
+        />
       </motion.div>
     );
   },