지금까지 내용 커밋

page/src/app/page.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import TopNav from "@/components/layout/TopNav";
+import LeftSidebar from "@/components/layout/LeftSidebar";
+import MainContent from "@/components/player/MainContent";
+import QueueSidebar from "@/components/player/QueueSidebar";
+import PlayerBar from "@/components/player/PlayerBar";
+
+// 화면 모드 타입 정의
+export type ViewMode = "SERVER_LIST" | "SERVER_DETAIL" | "SEARCH_RESULT";
+
+export default function MusicPlayerLayout() {
+  const [viewMode, setViewMode] = useState<ViewMode>("SERVER_LIST");
+  const [selectedServer, setSelectedServer] = useState<any>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  // 홈 버튼 클릭 시: 서버 목록(또는 상세)으로 복귀
+  const handleHome = () => {
+    if (selectedServer) {
+      setViewMode("SERVER_DETAIL");
+    } else {
+      setViewMode("SERVER_LIST");
+      setSelectedServer(null);
+      setSearchQuery("");
+    }
+  };
+
+  // 검색 실행 시
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+    setViewMode("SEARCH_RESULT");
+  };
+
+  // 서버 선택 시
+  const handleSelectServer = (server: any) => {
+    setSelectedServer(server);
+    setViewMode("SERVER_DETAIL");
+  };
+
+  return (
+    <div className="flex flex-col h-screen bg-neutral-900 text-white overflow-hidden font-sans">
+      <TopNav 
+        onSearch={handleSearch} 
+        onHome={handleHome} 
+        selectedServer={selectedServer} // 🌟 이 줄을 추가해서 선택된 서버 정보를 넘깁니다.
+      />
+
+      <div className="flex flex-1 overflow-hidden">
+        <LeftSidebar />
+        <MainContent 
+          viewMode={viewMode}
+          setViewMode={setViewMode}
+          selectedServer={selectedServer}
+          setSelectedServer={setSelectedServer}
+          searchQuery={searchQuery}
+          setSearchQuery={setSearchQuery}
+          onSelectServer={handleSelectServer}
+        />
+        <QueueSidebar />
+      </div>
+
+      <PlayerBar />
+    </div>
+  );
+}