Add variable for z-index

javascript-practice/src/styles/abstracts/_variables.scss

@@ -28,3 +28,9 @@ $fs-md: 16px;
 $fs-lg: 17px;
 $fs-x-lg: 20px;
 $fs-2x-lg: 32px;
+
+// Z-index
+$zindex-lv-1: 1;
+$zindex-lv-2: 2;
+$zindex-lv-3: 3;
+$zindex-lv-4: 4;

javascript-practice/src/styles/bases/_base.scss

@@ -1,11 +1,10 @@
-// TODO
 .overlay {
   @extend %d-absolute;
 
   height: 100%;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.3);
-  z-index: 2;
+  z-index: $zindex-lv-1;
   opacity: 0;
   pointer-events: none;
 
@@ -18,5 +17,5 @@
   @extend .overlay;
 
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 3;
+  z-index: $zindex-lv-3;
 }

javascript-practice/src/styles/components/_dialog.scss

@@ -5,7 +5,7 @@
   top: 32%;
   transform: translate(-50%, -50%) scale(1);
   background-color: $white;
-  z-index: 2;
+  z-index: $zindex-lv-2;
 
   opacity: 0;
   pointer-events: none;

javascript-practice/src/styles/components/_loader.scss

@@ -8,7 +8,7 @@
   align-items: center;
   justify-content: center;
   background: #00000066;
-  z-index: 1;
+  z-index: $zindex-lv-1;
   transition:
     opacity 0.75s,
     visibility 0.75s;

javascript-practice/src/styles/components/_popup-form.scss

@@ -7,7 +7,7 @@
   top: 50%;
   transform: translate(-50%, -50%) scale(1);
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
-  z-index: 2;
+  z-index: $zindex-lv-2;
   padding: 40px 50px;
   border-radius: 10px;
   background-color: $white;

javascript-practice/src/styles/pages/_index.scss

@@ -643,5 +643,5 @@
 }
 
 #categoryForm {
-  z-index: 4;
+  z-index: $zindex-lv-4;
 }