66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
"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>
|
|
);
|
|
} |