From 16cffe84a4d8cd91e7e5b3d1b04704f594b79d12 Mon Sep 17 00:00:00 2001
From: pipisebastian <yrt7998@pusan.ac.kr>
Date: Thu, 28 Nov 2024 21:29:31 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20esc=EB=A5=BC=20=EB=88=84=EB=A5=B4?=
 =?UTF-8?q?=EA=B1=B0=EB=82=98,=20=EC=98=B5=EC=85=98=EC=B0=BD=20=EC=99=B8?=
 =?UTF-8?q?=EB=B6=80=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EC=98=B5=EC=85=98?=
 =?UTF-8?q?=EC=B0=BD=20=EC=82=AC=EB=9D=BC=EC=A7=80=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#239
---
 .../TypeOptionModal/TypeOptionModal.tsx       | 74 +++++++++++--------
 1 file changed, 44 insertions(+), 30 deletions(-)

diff --git a/client/src/features/editor/components/TypeOptionModal/TypeOptionModal.tsx b/client/src/features/editor/components/TypeOptionModal/TypeOptionModal.tsx
index e808271b..9ccaac93 100644
--- a/client/src/features/editor/components/TypeOptionModal/TypeOptionModal.tsx
+++ b/client/src/features/editor/components/TypeOptionModal/TypeOptionModal.tsx
@@ -40,7 +40,6 @@ export const TypeOptionModal = ({
       case "Enter":
         e.preventDefault();
         onTypeSelect(options[selectedIndex].id);
-
         onClose();
         break;
 
@@ -60,35 +59,50 @@ export const TypeOptionModal = ({
   if (!isOpen) return null;
 
   return createPortal(
-    <motion.div
-      ref={modalRef}
-      tabIndex={0}
-      className={optionModal}
-      style={{
-        left: `${position.left}px`,
-        top: `${position.top}px`,
-        outline: "none",
-      }}
-      initial={modal.initial}
-      animate={modal.animate}
-      onKeyDown={handleKeyDown}
-    >
-      <div className={modalContainer}>
-        {options.map((option, index) => (
-          <button
-            key={option.id}
-            className={`${optionTypeButton} ${index === selectedIndex && "selected"}`}
-            onClick={() => {
-              onTypeSelect(option.id);
-              onClose();
-            }}
-            onMouseEnter={() => setSelectedIndex(index)}
-          >
-            {option.label}
-          </button>
-        ))}
-      </div>
-    </motion.div>,
+    <>
+      <div
+        style={{
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: "transparent",
+          zIndex: 999,
+        }}
+        onClick={onClose}
+      />
+      <motion.div
+        ref={modalRef}
+        tabIndex={0}
+        className={optionModal}
+        style={{
+          left: `${position.left}px`,
+          top: `${position.top}px`,
+          outline: "none",
+          zIndex: 1000,
+        }}
+        initial={modal.initial}
+        animate={modal.animate}
+        onKeyDown={handleKeyDown}
+      >
+        <div className={modalContainer}>
+          {options.map((option, index) => (
+            <button
+              key={option.id}
+              className={`${optionTypeButton} ${index === selectedIndex && "selected"}`}
+              onClick={() => {
+                onTypeSelect(option.id);
+                onClose();
+              }}
+              onMouseEnter={() => setSelectedIndex(index)}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+      </motion.div>
+    </>,
     document.body,
   );
 };