스크롤바 디자인

BDD-CLUB · Nov 24, 2024 · 9a5f32d · 9a5f32d
1 parent 829593b
commit 9a5f32d
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 2 deletions.
diff --git a/src/app/album/[albumId]/page.tsx b/src/app/album/[albumId]/page.tsx
@@ -52,7 +52,7 @@ export default function AlbumPage() {
 
   return (
     <main className="flex gap-x-12 bg-transparent h-full mb-20 md:mb-10 pl-4 md:pl-0 md:ml-48 mt-8 md:mt-24 pt-2 pr-4 md:pr-0 md:mr-28 overflow-y-auto hide-scrollbar">
-      <div className="h-full lg:w-1/2 w-full flex flex-col gap-y-12">
+      <div className="h-full lg:w-1/2 w-full flex flex-col gap-y-12 overflow-y-auto">
         <div className="flex w-full flex-col md:flex-row md:h-[250px] gap-x-8 pr-2">
           <div className="relative h-full w-full flex flex-col items-center justify-center group">
             <Image

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -25,6 +25,36 @@ body,
   display: none;
 }
 
+/* 가로 스크롤바 스타일링 */
+::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* 라이트 모드 스크롤바 */
+::-webkit-scrollbar-thumb {
+  background: #FF9DE1; 
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #FF40C4;  
+}
+
+/* 다크 모드 스크롤바 */
+.dark ::-webkit-scrollbar-thumb {
+  background: #FFFFFF80; 
+  border-radius: 3px;
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: #FFFFFF;  
+}
+
 @layer base {
   :root {
     --background:0 0% 100%;

diff --git a/src/app/playlist/[playlistId]/page.tsx b/src/app/playlist/[playlistId]/page.tsx
@@ -100,7 +100,7 @@ export default function PlaylistPage() {
 
   return (
     <main className="flex gap-x-12 bg-transparent h-full mb-20 md:mb-10 pl-4 md:pl-0 md:ml-48 mt-8 md:mt-24 pt-2 pr-4 md:pr-0 md:mr-28 overflow-y-auto hide-scrollbar">
-      <div className="h-full lg:w-1/2 w-full flex flex-col gap-y-12">
+      <div className="h-full lg:w-1/2 w-full flex flex-col gap-y-12 overflow-y-auto">
         <div className="flex w-full flex-col md:flex-row md:h-[250px] gap-x-8 pr-2">
           <div className="relative h-full w-full flex flex-col items-center justify-center group">
             <GridImage />