fix: 메인 스크롤바 ui 변경

Author: kjp1019

src/app/components/ui/scroll-area.tsx

@@ -40,16 +40,16 @@ function ScrollBar({
       className={cn(
         "flex touch-none p-px transition-colors select-none",
         orientation === "vertical" &&
-          "h-full w-2.5 border-l border-l-transparent",
+          "h-full w-3.5 border-l border-l-[rgba(32,227,255,0.10)] bg-[#070e1b]",
         orientation === "horizontal" &&
-          "h-2.5 flex-col border-t border-t-transparent",
+          "h-3.5 flex-col border-t border-t-[rgba(32,227,255,0.10)] bg-[#070e1b]",
         className,
       )}
       {...props}
     >
       <ScrollAreaPrimitive.ScrollAreaThumb
         data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
+        className="relative flex-1 rounded-full border-4 border-[#070e1b] bg-[#74849a]"
       />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
   );

src/styles/theme.css

@@ -573,45 +573,34 @@
 
 * {
   scrollbar-width: thin;
-  scrollbar-color: rgba(145, 175, 196, 0.42) transparent;
+  scrollbar-color: rgba(116, 132, 154, 0.9) rgba(7, 14, 27, 0.96);
 }
 
 *::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+  width: 14px;
+  height: 14px;
 }
 
 *::-webkit-scrollbar-track {
-  background: transparent;
+  background: #070e1b;
+  border-left: 1px solid rgba(32, 227, 255, 0.10);
 }
 
 *::-webkit-scrollbar-thumb {
   min-height: 56px;
-  border: 3px solid transparent;
+  border: 4px solid #070e1b;
   border-radius: 999px;
-  background:
-    linear-gradient(
-        180deg,
-        rgba(234, 247, 255, 0.54),
-        rgba(32, 227, 255, 0.36)
-      )
-      padding-box;
-  box-shadow: inset 0 0 0 1px rgba(234, 247, 255, 0.12);
+  background: #74849a;
+  box-shadow:
+    inset 0 0 0 1px rgba(234, 247, 255, 0.10),
+    0 0 14px rgba(32, 227, 255, 0.08);
 }
 
 *::-webkit-scrollbar-thumb:hover {
-  background:
-    linear-gradient(
-        180deg,
-        rgba(234, 247, 255, 0.68),
-        rgba(32, 227, 255, 0.5)
-      )
-      padding-box;
+  background: #8fa0b8;
 }
 
 *::-webkit-scrollbar-corner,
 *::-webkit-scrollbar-button {
-  display: none;
-  width: 0;
-  height: 0;
+  background: #070e1b;
 }