create useDevice hooks, optimize DesktopView and MobileView, and show category API data

1 files changed, 47 insertions, 11 deletions

diff --git a/src/styles/globals.css b/src/styles/globals.css
index f551f9f7..12589e7d 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -381,23 +381,59 @@ button {
     @apply !border-yellow_r-9;
 }
 
-.category-box {
-    @apply py-2 border border-gray_r-6;
+.category-mega-box {
+    @apply relative py-2 border border-gray_r-6 h-full;
 }
 
-.category-box > div {
-    @apply relative text-gray_r-12/80;
+.category-mega-box > div {
+    @apply text-gray_r-12/80;
 }
 
-.category-box a {
-    @apply py-2.5 px-4 idt-transition text-gray_r-12/80 hover:bg-gray_r-4;
+.category-mega-box > div:hover .category-mega-box__parent {
+    @apply bg-yellow_r-4;
 }
 
-.category-box a + div {
-    @apply absolute left-[100%] top-0 w-[40vw] bg-gray_r-1 border border-gray_r-6 p-4 hidden;
+.category-mega-box > div:hover .category-mega-box__child-wrapper {
+    @apply block;
 }
 
-.category-box a:hover + div,
-.category-box a + div:hover {
-    @apply block;
+.category-mega-box .category-mega-box__parent {
+    @apply py-2.5
+        px-4
+        idt-transition
+        text-gray_r-12/80
+        font-normal
+}
+
+.category-mega-box__child-wrapper {
+    @apply absolute 
+        left-[100%] 
+        top-0 
+        w-[50vw] 
+        bg-gray_r-1/90
+        backdrop-blur-md
+        border 
+        border-gray_r-6 
+        p-6 
+        hidden 
+        h-full
+        z-50;
+}
+
+.category-mega-box__child-one {
+    @apply text-gray_r-12/80 
+        hover:text-red_r-11 
+        transition-colors 
+        ease-linear 
+        duration-100 
+        font-semibold;
+}
+
+.category-mega-box__child-two {
+    @apply text-gray_r-12/80 
+        hover:text-red_r-11 
+        transition-colors 
+        ease-linear 
+        duration-100 
+        font-normal;
 }