From 26c218f0e5e9f03c0d8992ce650f8b713e42a6e2 Mon Sep 17 00:00:00 2001
From: choi <cejewe@naver.com>
Date: Thu, 28 Nov 2024 02:05:51 +0900
Subject: [PATCH] =?UTF-8?q?=ED=8A=B8=EB=9E=99=20=EB=8D=94=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/more/track/page.tsx | 88 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 86 insertions(+), 2 deletions(-)

diff --git a/src/app/more/track/page.tsx b/src/app/more/track/page.tsx
index 0c4afad..d424fad 100644
--- a/src/app/more/track/page.tsx
+++ b/src/app/more/track/page.tsx
@@ -1,3 +1,87 @@
-export default function TrackPage() {
-  return <div>hi</div>;
+"use client";
+
+import SquareContainer from "@/components/container/square-container";
+import { useRouter } from "next/navigation";
+
+interface Track {
+  id: number;
+  name: string;
+  description?: string;
+  src: string;
+  onClickName?: () => void;
+  onClickDescription: () => void;
+}
+
+export default function MoreTrackPage() {
+  const router = useRouter();
+
+  const tracks: Track[] = [
+    {
+      id: 1,
+      name: "Blinding Lights",
+      description: "After Hours · The Weeknd",
+      src: "/images/albumcover.png",
+      onClickDescription: () => router.push("/album/123"),
+    },
+    {
+      id: 2,
+      name: "Levitating",
+      description: "Future Nostalgia · Dua Lipa",
+      src: "/images/albumcover.png",
+      onClickDescription: () => router.push("/album/123"),
+    },
+    {
+      id: 3,
+      name: "Watermelon Sugar",
+      description: "Fine Line · Harry Styles",
+      src: "/images/albumcover.png",
+      onClickDescription: () => router.push("/album/123"),
+    },
+    {
+      id: 4,
+      name: "Peaches",
+      description: "Justice · Justin Bieber",
+      src: "/images/albumcover.png",
+      onClickDescription: () => router.push("/album/123"),
+    },
+    {
+      id: 5,
+      name: "Save Your Tears",
+      description: "After Hours · The Weeknd",
+      src: "/images/albumcover.png",
+      onClickDescription: () => router.push("/album/123"),
+    },
+    {
+      id: 6,
+      name: "Good 4 U",
+      description: "SOUR · Olivia Rodrigo",
+      src: "/images/albumcover.png",
+      onClickDescription: () => router.push("/album/123"),
+    },
+  ];
+  
+  return (
+    <main className="flex flex-col 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-auto flex flex-col gap-y-4 lg:flex-row gap-x-4 items-center justify-center">
+        <div className="w-full h-full bg-[#D7C5C526] dark:bg-gradient-to-t dark:from-[#00000033] dark:to-[#41414133] backdrop-blur-xl lg:p-8 rounded-lg overflow-y-auto hide-scrollbar">
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 gap-8">
+            {tracks.map((track) => (
+              <div
+                className="flex flex-col items-center cursor-pointer"
+                key={track.id}
+              >
+                <SquareContainer
+                  src={track.src}
+                  name={track.name}
+                  description={track.description}
+                  design="rounded-lg"
+                  onClickDescription={track.onClickDescription}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </main>
+  );
 }