From 6c25592377bef2780b51301713514c97b778e1a4 Mon Sep 17 00:00:00 2001
From: dongree <dongwoo0307@naver.com>
Date: Wed, 4 Dec 2024 11:11:21 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20fix:=20modal=20z-index=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/components/Login/index.tsx                         | 4 ++--
 FE/src/components/Mypage/CancelAlertModal.tsx             | 8 ++++----
 .../StocksDetail/TradeSection/TradeAlertModal.tsx         | 8 ++++----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/FE/src/components/Login/index.tsx b/FE/src/components/Login/index.tsx
index 836b896..01aba2e 100644
--- a/FE/src/components/Login/index.tsx
+++ b/FE/src/components/Login/index.tsx
@@ -62,7 +62,7 @@ export default function Login() {
   };
 
   return (
-    <>
+    <div className='z-30'>
       <Overay onClick={() => toggleModal()} />
       <section className='fixed left-1/2 top-1/2 flex w-[500px] -translate-x-1/2 -translate-y-1/2 flex-col rounded-2xl bg-white p-20 shadow-lg'>
         <h2 className='mb-5 text-3xl font-bold'>JuGa</h2>
@@ -98,6 +98,6 @@ export default function Login() {
           <XMarkIcon className='h-7 w-7 text-juga-grayscale-500' />
         </button>
       </section>
-    </>
+    </div>
   );
 }
diff --git a/FE/src/components/Mypage/CancelAlertModal.tsx b/FE/src/components/Mypage/CancelAlertModal.tsx
index 66a378b..23af5bf 100644
--- a/FE/src/components/Mypage/CancelAlertModal.tsx
+++ b/FE/src/components/Mypage/CancelAlertModal.tsx
@@ -8,7 +8,7 @@ export default function CancelAlertModal() {
   const { stock_name, amount, trade_type } = order;
 
   return (
-    <>
+    <div className='z-30'>
       <Overay onClick={() => close()} />
       <section className='fixed left-1/2 top-1/2 flex w-[440px] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-2xl bg-white p-7 shadow-lg'>
         <div className='text-lg font-semibold'>
@@ -17,7 +17,7 @@ export default function CancelAlertModal() {
         </div>
         <div className='flex justify-center gap-2'>
           <button
-            className='w-24 rounded-xl bg-juga-grayscale-500 px-6 py-2 text-white transition hover:bg-juga-grayscale-black'
+            className='w-24 px-6 py-2 text-white transition rounded-xl bg-juga-grayscale-500 hover:bg-juga-grayscale-black'
             onClick={() => {
               onSuccess();
               close();
@@ -26,13 +26,13 @@ export default function CancelAlertModal() {
             네
           </button>
           <button
-            className='w-24 rounded-xl bg-juga-grayscale-100 px-6 py-2 text-gray-800 hover:bg-juga-grayscale-200'
+            className='w-24 px-6 py-2 text-gray-800 rounded-xl bg-juga-grayscale-100 hover:bg-juga-grayscale-200'
             onClick={close}
           >
             아니오
           </button>
         </div>
       </section>
-    </>
+    </div>
   );
 }
diff --git a/FE/src/components/StocksDetail/TradeSection/TradeAlertModal.tsx b/FE/src/components/StocksDetail/TradeSection/TradeAlertModal.tsx
index 5a075af..cf04b1b 100644
--- a/FE/src/components/StocksDetail/TradeSection/TradeAlertModal.tsx
+++ b/FE/src/components/StocksDetail/TradeSection/TradeAlertModal.tsx
@@ -36,13 +36,13 @@ export default function TradeAlertModal({
   };
 
   return (
-    <>
+    <div className='z-30'>
       <Overay onClick={() => toggleModal()} />
       <section className='fixed left-1/2 top-1/2 flex w-[500px] -translate-x-1/2 -translate-y-1/2 flex-col rounded-2xl bg-white p-5 shadow-lg'>
         <div className='self-start text-lg font-bold'>
           {stockName} {type === 'BUY' ? '매수' : '매도'} {count}주
         </div>
-        <div className='my-5 flex flex-col gap-2 text-juga-grayscale-500'>
+        <div className='flex flex-col gap-2 my-5 text-juga-grayscale-500'>
           <div className='flex justify-between'>
             <p>{count}주 희망가격</p>
             <p>{totalPrice.toLocaleString()}원</p>
@@ -59,7 +59,7 @@ export default function TradeAlertModal({
 
         <div className='flex justify-end gap-2'>
           <button
-            className='rounded-xl bg-juga-grayscale-100 px-6 py-2 text-gray-800'
+            className='px-6 py-2 text-gray-800 rounded-xl bg-juga-grayscale-100'
             onClick={toggleModal}
           >
             취소
@@ -72,6 +72,6 @@ export default function TradeAlertModal({
           </button>
         </div>
       </section>
-    </>
+    </div>
   );
 }