지금까지 내용 커밋

page/src/components/layout/LeftSidebar.tsx

@@ -0,0 +1,25 @@
+"use client";
+import { ListMusic, Library } from "lucide-react";
+
+export default function LeftSidebar() {
+  return (
+    <aside className="w-60 bg-black p-6 flex flex-col gap-6">
+      <nav className="flex flex-col gap-4 text-neutral-400 font-medium">
+        <button className="flex items-center gap-3 hover:text-white transition-colors text-left">
+          <Library size={20} /> 내 플레이리스트
+        </button>
+        <button className="flex items-center gap-3 hover:text-white transition-colors text-left">
+          <ListMusic size={20} /> 좋아요 표시한 곡
+        </button>
+      </nav>
+
+      <hr className="border-neutral-800" />
+      
+      <div className="flex flex-col gap-3 text-sm text-neutral-400 overflow-y-auto">
+        <p className="hover:text-white cursor-pointer truncate">출근길 노동요 모음</p>
+        <p className="hover:text-white cursor-pointer truncate">2024 빌보드 탑 100</p>
+        <p className="hover:text-white cursor-pointer truncate">비 오는 날 듣기 좋은 재즈</p>
+      </div>
+    </aside>
+  );
+}

page/src/components/layout/TopNav.tsx

@@ -0,0 +1,94 @@
+"use client";
+import { Search, ListMusic, LogIn, LogOut, Home } from "lucide-react";
+import { signIn, signOut, useSession } from "next-auth/react";
+import { useState } from "react";
+
+interface TopNavProps {
+  onSearch: (query: string) => void;
+  onHome: () => void;
+  selectedServer: any; // 🌟 추가: 선택된 서버 정보
+}
+
+export default function TopNav({ onSearch, onHome, selectedServer }: TopNavProps) {
+  const { data: session, status } = useSession();
+  const [term, setTerm] = useState("");
+
+  const handleSearchClick = () => {
+    // 🌟 서버 선택 여부 체크
+    if (!selectedServer) {
+      alert("먼저 왼쪽 목록에서 관리할 서버를 선택해주세요!");
+      return;
+    }
+    
+    if (term.trim()) {
+      onSearch(term);
+    }
+  };
+  
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && term.trim()) {
+      onSearch(term);
+    }
+  };
+
+  // 🌟 홈 버튼 클릭 시 검색어 초기화 로직 추가
+  const handleHomeClick = () => {
+    setTerm(""); // 검색창 비우기
+    onHome();    // 원래 홈 기능 실행
+  };
+
+  return (
+    <nav className="h-16 flex-shrink-0 bg-black border-b border-neutral-800 flex items-center justify-between px-6 z-20">
+      {/* 1. 왼쪽: 로고 */}
+      <div className="flex items-center gap-2 text-xl font-bold text-white w-52">
+        <ListMusic className="text-green-500" />
+        <span>MusicBot</span>
+      </div>
+
+      {/* 2. 가운데: 검색창 & 홈 버튼 */}
+      <div className="flex-1 max-w-2xl px-4 flex items-center gap-4">
+        <button 
+          onClick={handleHomeClick} // 🌟 수정된 핸들러 연결
+          className="p-2 hover:bg-neutral-800 rounded-full transition-colors cursor-pointer text-neutral-400 hover:text-white"
+          title="홈으로"
+        >
+          <Home size={22} />
+        </button>
+
+        <div className="relative w-full">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400" size={18} />
+          <input 
+            type="text" 
+            value={term}
+            onChange={(e) => setTerm(e.target.value)}
+            onKeyDown={handleKeyDown}
+            disabled={!selectedServer} // 🌟 서버 미선택 시 입력창 비활성화 (선택 사항)
+            placeholder={selectedServer ? "노래 검색 후 엔터를 누르세요" : "서버를 먼저 선택해주세요"} 
+            className={`w-full h-10 pl-10 pr-4 rounded-full bg-neutral-800 border border-neutral-700 text-sm text-white focus:outline-none focus:ring-2 focus:ring-white/30 transition-all ${!selectedServer ? 'opacity-50 cursor-not-allowed' : 'opacity-100'}`}
+          />
+        </div>
+      </div>
+
+      {/* 3. 오른쪽: 유저 프로필 영역 (기존과 동일) */}
+      <div className="flex items-center justify-end w-auto min-w-[13rem]">
+        {status === "loading" ? (
+          <div className="text-sm text-neutral-400">로딩 중...</div>
+        ) : status === "authenticated" && session?.user ? (
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-2 bg-neutral-800/80 pr-4 pl-1 py-1 rounded-full border border-neutral-700 shadow-sm cursor-default">
+              <img src={session.user.image || ""} alt="Profile" className="w-7 h-7 rounded-full" />
+              <span className="text-sm font-medium text-white whitespace-nowrap">{session.user.name}</span>
+            </div>
+            <button onClick={() => signOut()} className="cursor-pointer text-neutral-400 hover:text-red-400 p-2 rounded-full hover:bg-neutral-800 transition-colors">
+              <LogOut size={18} />
+            </button>
+          </div>
+        ) : (
+          <button onClick={() => signIn("discord")} className="cursor-pointer flex items-center gap-2 bg-[#5865F2] hover:bg-[#4752C4] text-white px-5 py-2 rounded-full font-medium transition-colors text-sm shadow-md">
+            <LogIn size={16} /> Discord 로그인
+          </button>
+        )}
+      </div>
+    </nav>
+  );
+}