🔧 fix: modal z-index 수정

boostcampwm-2024 · Dec 4, 2024 · 6c25592 · 6c25592
1 parent 726dd4e
commit 6c25592
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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>
   );
 }