diff --git a/src/app/album/[albumId]/page.tsx b/src/app/album/[albumId]/page.tsx index 97fe5ab..f31d5de 100644 --- 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 index f1d7812..3904818 100644 --- 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 index b990408..8c35975 100644 --- 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 />