지금까지 내용 커밋

page/src/components/player/PlayerBar.tsx

@@ -0,0 +1,47 @@
+"use client";
+import { SkipForward, SkipBack, Volume2, Pause } from "lucide-react";
+
+export default function PlayerBar() {
+  return (
+    <footer className="h-24 flex-shrink-0 bg-black border-t border-neutral-800 px-6 flex items-center justify-between z-50">
+      <div className="flex items-center gap-4 w-1/4">
+        <div className="w-14 h-14 bg-neutral-800 rounded-md shadow-md"></div>
+        <div className="flex flex-col">
+          <span className="text-sm font-bold text-white hover:underline cursor-pointer">내 손을 잡아</span>
+          <span className="text-xs text-neutral-400 hover:underline cursor-pointer">아이유(IU)</span>
+        </div>
+      </div>
+
+      <div className="flex flex-col items-center gap-2 w-2/4 max-w-2xl">
+        <div className="flex items-center gap-6">
+          <button className="text-neutral-400 hover:text-white transition-colors">
+            <SkipBack size={20} />
+          </button>
+          <button className="w-8 h-8 rounded-full bg-white flex items-center justify-center hover:scale-105 transition-transform text-black">
+            <Pause size={18} fill="black" />
+          </button>
+          <button className="text-neutral-400 hover:text-white transition-colors">
+            <SkipForward size={20} />
+          </button>
+        </div>
+
+        <div className="flex items-center gap-2 w-full text-xs text-neutral-400">
+          <span>01:12</span>
+          <div className="h-1 bg-neutral-600 rounded-full flex-1 cursor-pointer group">
+            <div className="h-full bg-white rounded-full w-1/3 group-hover:bg-green-500 transition-colors relative">
+              <div className="absolute right-0 top-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full opacity-0 group-hover:opacity-100 shadow-md"></div>
+            </div>
+          </div>
+          <span>03:16</span>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-end gap-3 w-1/4 text-neutral-400">
+        <Volume2 size={20} />
+        <div className="w-24 h-1 bg-neutral-600 rounded-full cursor-pointer group">
+          <div className="h-full bg-white rounded-full w-2/3 group-hover:bg-green-500 transition-colors"></div>
+        </div>
+      </div>
+    </footer>
+  );
+}