대부분 모든기능 제작

하단 player연결, 일시정지, 스킵, 볼륨, 특정시간재생, queue 디자인 변경, queue 변경기능 제작
2026-04-10 00:40:40 +09:00
parent 88a5a88c51
commit 374fbdb1ce
18 changed files with 1265 additions and 83 deletions
--- a/page/src/app/api/player/events/route.ts
+++ b/page/src/app/api/player/events/route.ts
@@ -0,0 +1,54 @@
+// src/app/api/queue/events/route.ts
+import { NextRequest } from "next/server";
+import { Redis } from "@/lib/Redis"; // 사용 중인 Redis 클라이언트
+
+// 이 API는 캐시되지 않고 항상 실시간으로 작동해야 합니다.
+export const dynamic = "force-dynamic";
+
+export async function GET(req: NextRequest) {
+  // 프론트엔드에서 보낸 serverId 가져오기
+  const serverId = req.nextUrl.searchParams.get("serverId");
+
+  if (!serverId) {
+    return new Response("Missing serverId", { status: 400 });
+  }
+
+  // SSE(Server-Sent Events) 스트림 생성
+  const stream = new ReadableStream({
+    async start(controller) {
+      // 🚨 중요: 구독(Subscribe) 전용으로 쓸 독립적인 Redis 연결을 하나 복제합니다.
+      const subscriber = Redis.duplicate();
+
+      // 'bot-site' 채널 구독
+      await subscriber.subscribe("bot-site");
+
+      // 메세지가 들어올 때마다 실행
+      subscriber.on("message", (channel, message) => {
+        if (channel !== "bot-site") return;
+        const data = JSON.parse(message);
+        if (data.guildId !== serverId) return;
+        // 알림이 울린 서버와 현재 유저가 보고 있는 서버가 일치할 때만!
+        if (data.event === "player_update") {
+          // 프론트엔드로 "새로고침해!" 라는 데이터를 전송
+          controller.enqueue(`data: ${JSON.stringify({ type: "player_update" })}\n\n`);
+        }
+      });
+
+      // 클라이언트(웹사이트)가 브라우저를 닫거나 다른 페이지로 가면 연결 종료 및 정리
+      req.signal.addEventListener("abort", () => {
+        subscriber.unsubscribe("bot-site");
+        subscriber.quit();
+        controller.close();
+      });
+    }
+  });
+
+  // 스트림 응답 헤더 설정 (연결을 끊지 않고 계속 유지)
+  return new Response(stream, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache",
+      "Connection": "keep-alive",
+    },
+  });
+}
--- a/page/src/app/api/player/now/route.ts
+++ b/page/src/app/api/player/now/route.ts
@@ -0,0 +1,42 @@
+import { NextResponse } from "next/server";
+import { Redis } from "@/lib/Redis";
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { serverId, userId } = body;
+
+    if (!serverId) return NextResponse.json({ error: "serverId 정보가 필요합니다." }, { status: 400 });
+    if (!userId) return NextResponse.json({ error: "userId 정보가 필요합니다." }, { status: 400 });
+
+    const requestId = `req:${Date.now()}-${Math.random().toString(36).substring(7)}`;
+    const resultKey = `player:now:${requestId}`; // 봇이 대답을 남길 Redis 방 이름
+
+    // 봇에게 'player_now' 명령 전송
+    await Redis.publish("site-bot", JSON.stringify({
+      action: "player_now",
+      requestId: requestId,
+      serverId: serverId,
+      userId: userId,
+    }));
+
+    // 3. 봇의 대답 기다리기 (최대 약 3초 대기)
+    for (let i = 0; i < 15; i++) {
+      await new Promise(resolve => setTimeout(resolve, 200)); // 0.2초씩 대기
+      const botReply = await Redis.get(resultKey);
+      if (botReply) {
+        // 봇이 대답을 남겼다면! 읽었으니 Redis에서 삭제하고 프론트로 전달
+        await Redis.del(resultKey);
+        const replyData = JSON.parse(botReply);
+        // replyData.success 가 false면 에러 상태코드(400)로 보냄
+        return NextResponse.json(replyData, { status: replyData.success ? 200 : 400 });
+      }
+    }
+
+    // 3초가 지나도 봇이 묵묵부답일 때
+    return NextResponse.json({ success: false, message: "봇이 응답하지 않거나 오프라인 상태입니다." }, { status: 504 });
+  } catch (error) {
+    console.error("Play API Error:", error);
+    return NextResponse.json({ error: "서버 오류가 발생했습니다." }, { status: 500 });
+  }
+}
--- a/page/src/app/api/player/pause/route.ts
+++ b/page/src/app/api/player/pause/route.ts
@@ -0,0 +1,43 @@
+import { NextResponse } from "next/server";
+import { Redis } from "@/lib/Redis";
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { serverId, userId, isPaused } = body;
+    if (!serverId) return NextResponse.json({ error: "serverId 정보가 필요합니다." }, { status: 400 });
+    if (!userId) return NextResponse.json({ error: "userId 정보가 필요합니다." }, { status: 400 });
+    if (!isPaused) return NextResponse.json({ error: "isPaused 정보가 필요합니다." }, { status: 400 });
+
+    const requestId = `req:${Date.now()}-${Math.random().toString(36).substring(7)}`;
+    const resultKey = `player:paused:${requestId}`; // 봇이 대답을 남길 Redis 방 이름
+
+    // 봇에게 'player_pause' 명령 전송
+    await Redis.publish("site-bot", JSON.stringify({
+      action: "player_paused",
+      requestId: requestId,
+      serverId: serverId,
+      userId: userId,
+      isPaused: isPaused,
+    }));
+
+    // 3. 봇의 대답 기다리기 (최대 약 3초 대기)
+    for (let i = 0; i < 15; i++) {
+      await new Promise(resolve => setTimeout(resolve, 200)); // 0.2초씩 대기
+      const botReply = await Redis.get(resultKey);
+      if (botReply) {
+        // 봇이 대답을 남겼다면! 읽었으니 Redis에서 삭제하고 프론트로 전달
+        await Redis.del(resultKey);
+        const replyData = JSON.parse(botReply);
+        // replyData.success 가 false면 에러 상태코드(400)로 보냄
+        return NextResponse.json(replyData, { status: replyData.success ? 200 : 400 });
+      }
+    }
+
+    // 3초가 지나도 봇이 묵묵부답일 때
+    return NextResponse.json({ success: false, message: "봇이 응답하지 않거나 오프라인 상태입니다." }, { status: 504 });
+  } catch (error) {
+    console.error("Play API Error:", error);
+    return NextResponse.json({ error: "서버 오류가 발생했습니다." }, { status: 500 });
+  }
+}
--- a/page/src/app/api/player/seek/route.ts
+++ b/page/src/app/api/player/seek/route.ts
@@ -0,0 +1,44 @@
+import { NextResponse } from "next/server";
+import { Redis } from "@/lib/Redis";
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { serverId, userId, seek } = body;
+
+    if (!serverId) return NextResponse.json({ error: "serverId 정보가 필요합니다." }, { status: 400 });
+    if (!userId) return NextResponse.json({ error: "userId 정보가 필요합니다." }, { status: 400 });
+    if (!seek) return NextResponse.json({ error: "seek 정보가 필요합니다." }, { status: 400 });
+
+    const requestId = `req:${Date.now()}-${Math.random().toString(36).substring(7)}`;
+    const resultKey = `player:seek:${requestId}`; // 봇이 대답을 남길 Redis 방 이름
+
+    // 봇에게 'player_seek' 명령 전송
+    await Redis.publish("site-bot", JSON.stringify({
+      action: "player_seek",
+      requestId: requestId,
+      serverId: serverId,
+      userId: userId,
+      seek: seek,
+    }));
+
+    // 3. 봇의 대답 기다리기 (최대 약 3초 대기)
+    for (let i = 0; i < 15; i++) {
+      await new Promise(resolve => setTimeout(resolve, 200)); // 0.2초씩 대기
+      const botReply = await Redis.get(resultKey);
+      if (botReply) {
+        // 봇이 대답을 남겼다면! 읽었으니 Redis에서 삭제하고 프론트로 전달
+        await Redis.del(resultKey);
+        const replyData = JSON.parse(botReply);
+        // replyData.success 가 false면 에러 상태코드(400)로 보냄
+        return NextResponse.json(replyData, { status: replyData.success ? 200 : 400 });
+      }
+    }
+
+    // 3초가 지나도 봇이 묵묵부답일 때
+    return NextResponse.json({ success: false, message: "봇이 응답하지 않거나 오프라인 상태입니다." }, { status: 504 });
+  } catch (error) {
+    console.error("Play API Error:", error);
+    return NextResponse.json({ error: "서버 오류가 발생했습니다." }, { status: 500 });
+  }
+}
--- a/page/src/app/api/player/skip/route.ts
+++ b/page/src/app/api/player/skip/route.ts
@@ -0,0 +1,42 @@
+import { NextResponse } from "next/server";
+import { Redis } from "@/lib/Redis";
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { serverId, userId } = body;
+
+    if (!serverId) return NextResponse.json({ error: "serverId 정보가 필요합니다." }, { status: 400 });
+    if (!userId) return NextResponse.json({ error: "userId 정보가 필요합니다." }, { status: 400 });
+
+    const requestId = `req:${Date.now()}-${Math.random().toString(36).substring(7)}`;
+    const resultKey = `player:skip:${requestId}`; // 봇이 대답을 남길 Redis 방 이름
+
+    // 봇에게 'player_skip' 명령 전송
+    await Redis.publish("site-bot", JSON.stringify({
+      action: "player_skip",
+      requestId: requestId,
+      serverId: serverId,
+      userId: userId,
+    }));
+
+    // 3. 봇의 대답 기다리기 (최대 약 3초 대기)
+    for (let i = 0; i < 15; i++) {
+      await new Promise(resolve => setTimeout(resolve, 200)); // 0.2초씩 대기
+      const botReply = await Redis.get(resultKey);
+      if (botReply) {
+        // 봇이 대답을 남겼다면! 읽었으니 Redis에서 삭제하고 프론트로 전달
+        await Redis.del(resultKey);
+        const replyData = JSON.parse(botReply);
+        // replyData.success 가 false면 에러 상태코드(400)로 보냄
+        return NextResponse.json(replyData, { status: replyData.success ? 200 : 400 });
+      }
+    }
+
+    // 3초가 지나도 봇이 묵묵부답일 때
+    return NextResponse.json({ success: false, message: "봇이 응답하지 않거나 오프라인 상태입니다." }, { status: 504 });
+  } catch (error) {
+    console.error("Play API Error:", error);
+    return NextResponse.json({ error: "서버 오류가 발생했습니다." }, { status: 500 });
+  }
+}
--- a/page/src/app/api/player/volume/route.ts
+++ b/page/src/app/api/player/volume/route.ts
@@ -0,0 +1,44 @@
+import { NextResponse } from "next/server";
+import { Redis } from "@/lib/Redis";
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { serverId, userId, volume } = body;
+
+    if (!serverId) return NextResponse.json({ error: "serverId 정보가 필요합니다." }, { status: 400 });
+    if (!userId) return NextResponse.json({ error: "userId 정보가 필요합니다." }, { status: 400 });
+    if (!volume) return NextResponse.json({ error: "volume 정보가 필요합니다." }, { status: 400 });
+
+    const requestId = `req:${Date.now()}-${Math.random().toString(36).substring(7)}`;
+    const resultKey = `player:volume:${requestId}`; // 봇이 대답을 남길 Redis 방 이름
+
+    // 봇에게 'player_volume' 명령 전송
+    await Redis.publish("site-bot", JSON.stringify({
+      action: "player_volume",
+      requestId: requestId,
+      serverId: serverId,
+      userId: userId,
+      volume: volume,
+    }));
+
+    // 3. 봇의 대답 기다리기 (최대 약 3초 대기)
+    for (let i = 0; i < 15; i++) {
+      await new Promise(resolve => setTimeout(resolve, 200)); // 0.2초씩 대기
+      const botReply = await Redis.get(resultKey);
+      if (botReply) {
+        // 봇이 대답을 남겼다면! 읽었으니 Redis에서 삭제하고 프론트로 전달
+        await Redis.del(resultKey);
+        const replyData = JSON.parse(botReply);
+        // replyData.success 가 false면 에러 상태코드(400)로 보냄
+        return NextResponse.json(replyData, { status: replyData.success ? 200 : 400 });
+      }
+    }
+
+    // 3초가 지나도 봇이 묵묵부답일 때
+    return NextResponse.json({ success: false, message: "봇이 응답하지 않거나 오프라인 상태입니다." }, { status: 504 });
+  } catch (error) {
+    console.error("Play API Error:", error);
+    return NextResponse.json({ error: "서버 오류가 발생했습니다." }, { status: 500 });
+  }
+}
--- a/page/src/app/api/queue/events/route.ts
+++ b/page/src/app/api/queue/events/route.ts
@@ -0,0 +1,54 @@
+// src/app/api/queue/events/route.ts
+import { NextRequest } from "next/server";
+import { Redis } from "@/lib/Redis"; // 사용 중인 Redis 클라이언트
+
+// 이 API는 캐시되지 않고 항상 실시간으로 작동해야 합니다.
+export const dynamic = "force-dynamic";
+
+export async function GET(req: NextRequest) {
+  // 프론트엔드에서 보낸 serverId 가져오기
+  const serverId = req.nextUrl.searchParams.get("serverId");
+
+  if (!serverId) {
+    return new Response("Missing serverId", { status: 400 });
+  }
+
+  // SSE(Server-Sent Events) 스트림 생성
+  const stream = new ReadableStream({
+    async start(controller) {
+      // 🚨 중요: 구독(Subscribe) 전용으로 쓸 독립적인 Redis 연결을 하나 복제합니다.
+      const subscriber = Redis.duplicate();
+
+      // 'bot-site' 채널 구독
+      await subscriber.subscribe("bot-site");
+
+      // 메세지가 들어올 때마다 실행
+      subscriber.on("message", (channel, message) => {
+        if (channel !== "bot-site") return;
+        const data = JSON.parse(message);
+        if (data.guildId !== serverId) return;
+        // 알림이 울린 서버와 현재 유저가 보고 있는 서버가 일치할 때만!
+        if (data.event === "queue_update") {
+          // 프론트엔드로 "새로고침해!" 라는 데이터를 전송
+          controller.enqueue(`data: ${JSON.stringify({ type: "queue_update" })}\n\n`);
+        }
+      });
+
+      // 클라이언트(웹사이트)가 브라우저를 닫거나 다른 페이지로 가면 연결 종료 및 정리
+      req.signal.addEventListener("abort", () => {
+        subscriber.unsubscribe("bot-site");
+        subscriber.quit();
+        controller.close();
+      });
+    }
+  });
+
+  // 스트림 응답 헤더 설정 (연결을 끊지 않고 계속 유지)
+  return new Response(stream, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache",
+      "Connection": "keep-alive",
+    },
+  });
+}
--- a/page/src/app/api/queue/list/route.ts
+++ b/page/src/app/api/queue/list/route.ts
@@ -0,0 +1,44 @@
+import { NextResponse } from "next/server";
+import { Redis } from "@/lib/Redis";
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { serverId, userId } = body;
+
+    if (!serverId) return NextResponse.json({ error: "serverId 정보가 필요합니다." }, { status: 400 });
+    if (!userId) return NextResponse.json({ error: "userId 정보가 필요합니다." }, { status: 400 });
+
+    // 1. 고유한 요청 ID(진동벨) 생성
+    const requestId = `${Date.now()}-${Math.random().toString(36).substring(7)}`;
+    const resultKey = `queue:list:${requestId}`;
+
+    // 2. 봇에게 'queue_list' 명령 발송
+    await Redis.publish("site-bot", JSON.stringify({
+      action: "queue_list",
+      serverId: serverId,
+      userId: userId,
+      requestId: requestId, // 🌟 봇이 대답을 남길 키
+    }));
+
+    // 3. 봇의 대답 기다리기 (최대 약 3초 대기)
+    for (let i = 0; i < 15; i++) {
+      await new Promise(resolve => setTimeout(resolve, 200)); // 0.2초씩 대기
+      const botReply = await Redis.get(resultKey);
+      if (botReply) {
+        // 봇이 대답을 남겼다면! 읽었으니 Redis에서 삭제하고 프론트로 전달
+        await Redis.del(resultKey);
+        const replyData = JSON.parse(botReply);
+        // replyData.success 가 false면 에러 상태코드(400)로 보냄
+        return NextResponse.json(replyData, { status: replyData.success ? 200 : 400 });
+      }
+    }
+
+    // 3초가 지나도 봇이 묵묵부답일 때
+    return NextResponse.json({ success: false, message: "봇이 응답하지 않거나 오프라인 상태입니다." }, { status: 504 });
+
+  } catch (error) {
+    console.error("Queue List API Error:", error);
+    return NextResponse.json({ success: false, message: "서버 오류가 발생했습니다." }, { status: 500 });
+  }
+}
--- a/page/src/app/api/queue/remove/route.ts
+++ b/page/src/app/api/queue/remove/route.ts
@@ -0,0 +1,46 @@
+import { NextResponse } from "next/server";
+import { Redis } from "@/lib/Redis";
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { serverId, index, userId } = body;
+
+    if (!serverId) return NextResponse.json({ error: "serverId 정보가 필요합니다." }, { status: 400 });
+    if (!userId) return NextResponse.json({ error: "userId 정보가 필요합니다." }, { status: 400 });
+    if (!index) return NextResponse.json({ error: "index 정보가 필요합니다." }, { status: 400 });
+
+    const requestId = `${Date.now()}-${Math.random().toString(36).substring(7)}`;
+    const resultKey = `queue:remove:${requestId}`;
+
+    // 봇에게 'remove_queue' 명령 발송 (몇 번째 인덱스를 지워라)
+    await Redis.publish("site-bot", JSON.stringify({
+      action: "queue_remove",
+      serverId: serverId,
+      requestId: requestId,
+      userId: userId,
+      index: index,
+    }));
+
+    // 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 });
+  } catch (error) {
+    return NextResponse.json({ error: "서버 오류" }, { status: 500 });
+  }
+}
--- a/page/src/app/api/queue/set/route.ts
+++ b/page/src/app/api/queue/set/route.ts
@@ -0,0 +1,47 @@
+import { NextResponse } from "next/server";
+import { Redis } from "@/lib/Redis";
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { serverId, newQueue, userId } = body;
+
+    if (!serverId) return NextResponse.json({ error: "serverId 정보가 필요합니다." }, { status: 400 });
+    if (!userId) return NextResponse.json({ error: "userId 정보가 필요합니다." }, { status: 400 });
+    if (newQueue === undefined || newQueue === null) return NextResponse.json({ error: "newQueue 정보가 필요합니다." }, { status: 400 });
+
+    const requestId = `${Date.now()}-${Math.random().toString(36).substring(7)}`;
+    const resultKey = `queue:set:${requestId}`;
+
+    // 봇에게 'queue_set' 명령 발송 (전체 대기열을 통째로 덮어써라!)
+    await Redis.publish("site-bot", JSON.stringify({
+      action: "queue_set",
+      serverId: serverId,
+      requestId: requestId,
+      userId: userId,
+      newQueue: newQueue,
+    }));
+
+    // 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 });
+  } catch (error) {
+    console.error("Queue Reorder API Error:", error);
+    return NextResponse.json({ error: "서버 오류" }, { status: 500 });
+  }
+}