지금까지 내용 커밋

page/src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,34 @@
+import NextAuth, { NextAuthOptions } from "next-auth";
+import DiscordProvider from "next-auth/providers/discord";
+
+export const authOptions: NextAuthOptions = {
+  providers: [
+    DiscordProvider({
+      clientId: process.env.DISCORD_CLIENT_ID as string,
+      clientSecret: process.env.DISCORD_CLIENT_SECRET as string,
+      // 🌟 핵심: 로그인할 때 유저의 기본 정보(identify)와 서버 목록(guilds) 권한을 같이 가져옵니다!
+      authorization: { params: { scope: "identify email guilds" } },
+    }),
+  ],
+  session: {
+    strategy: "jwt",
+  },
+  callbacks: {
+    // 디스코드에서 받은 토큰(accessToken)을 우리 세션에 저장해두는 로직
+    async jwt({ token, account }) {
+      if (account) {
+        token.accessToken = account.access_token;
+      }
+      return token;
+    },
+    async session({ session, token }: any) {
+      session.accessToken = token.accessToken;
+      return session;
+    },
+  },
+};
+
+const handler = NextAuth(authOptions);
+
+// App Router 환경에서는 GET과 POST 메서드를 둘 다 내보내야 합니다.
+export { handler as GET, handler as POST };

page/src/app/api/search/route.ts

@@ -0,0 +1,43 @@
+// src/app/api/search/route.ts
+import { NextResponse } from "next/server";
+import { Redis } from "@/lib/Redis";
+
+export async function GET(request: Request) {
+  // 1. 검색어(query) 가져오기
+  const { searchParams } = new URL(request.url);
+  const query = searchParams.get("q");
+
+  if (!query) {
+    return NextResponse.json({ error: "검색어가 없습니다." }, { status: 400 });
+  }
+
+  // 2. 고유한 요청 ID 생성 (예: 1690001234567-abc)
+  const requestId = `${Date.now()}-${Math.random().toString(36).substring(7)}`;
+  const resultKey = `search:result:${requestId}`;
+
+  // 3. 봇에게 'site-bot' 채널로 검색 명령 발송 (Publish)
+  await Redis.publish("site-bot", JSON.stringify({
+    action: "search",
+    query: query,
+    requestId: requestId,
+  }));
+
+  // 4. 결과가 올라올 때까지 기다리기 (Polling)
+  // 최대 10번(약 5초) 동안 0.5초 간격으로 확인합니다.
+  for (let i=0; i<10; i++) {
+    // 0.5초 대기
+    await new Promise(resolve => setTimeout(resolve, 500));
+    
+    // Redis 게시판 확인
+    const resultData = await Redis.get(resultKey);
+    console.log(resultData);
+    
+    if (resultData) {
+      // 🌟 봇이 결과를 올렸다면! 데이터를 돌려주고 종료
+      return NextResponse.json(JSON.parse(resultData));
+    }
+  }
+
+  // 5초가 지나도 응답이 없으면 타임아웃
+  return NextResponse.json({ error: "봇이 검색에 응답하지 않습니다." }, { status: 504 });
+}

page/src/app/api/servers/route.ts

@@ -0,0 +1,34 @@
+import { NextResponse } from "next/server";
+import { getServerSession } from "next-auth";
+import { Redis } from "@/lib/Redis";
+import { authOptions } from "../auth/[...nextauth]/route";
+
+export async function GET() {
+  const session = await getServerSession(authOptions) as any;
+
+  if (!session || !session.accessToken) {
+    return NextResponse.json({ error: "인증되지 않았습니다." }, { status: 401 });
+  }
+
+  try {
+    // 1. 디스코드 API에서 유저가 속한 서버 목록 가져오기
+    const userGuildsRes = await fetch("https://discord.com/api/users/@me/guilds", {
+      headers: { Authorization: `Bearer ${session.accessToken}` },
+    });
+    const userGuilds = await userGuildsRes.json();
+
+    // 2. Redis에서 봇이 속한 서버 목록(화이트리스트) 가져오기
+    const botGuildsData = await Redis.get("bot-guilds");
+    const botGuildIds: string[] = botGuildsData ? JSON.parse(botGuildsData) : [];
+
+    // 3. 🌟 두 목록을 비교해서 봇이 있는 서버만 필터링!
+    const filteredGuilds = userGuilds.filter((guild: any) => 
+      botGuildIds.includes(guild.id)
+    );
+
+    return NextResponse.json(filteredGuilds);
+  } catch (error) {
+    console.error("서버 필터링 에러:", error);
+    return NextResponse.json({ error: "서버 목록을 가져오지 못했습니다." }, { status: 500 });
+  }
+}

page/src/app/globals.css

@@ -0,0 +1,30 @@
+/* Tailwind v4의 핵심! 이 한 줄로 모든 유틸리티 클래스를 불러옵니다. */
+@import "tailwindcss";
+
+/* 다크 모드 기반의 플레이어이므로 배경을 기본적으로 어둡게 세팅합니다. */
+@theme {
+  --color-background: #171717; /* neutral-900 */
+  --color-foreground: #ffffff;
+}
+
+body {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  margin: 0;
+  padding: 0;
+}
+
+/* 스크롤바 예쁘게 숨기기 (선택 사항) */
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: #3f3f46;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #52525b;
+}

page/src/app/layout.tsx

@@ -0,0 +1,23 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import Providers from "@/components/Providers"; // 🌟 방금 만든 Provider 불러오기
+
+export const metadata: Metadata = {
+  title: "MusicBot Web",
+  description: "디스코드 음악 봇 웹 대시보드",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="ko">
+      <body>
+        {/* 🌟 앱 전체를 Providers로 감싸줍니다 */}
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

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>
+  );
+}