feat: 기상음악 AI 분석 기능 추가

Dockerfile

@@ -39,6 +39,10 @@ ENV NODE_ENV=production \
     PORT=3000 \
     HOSTNAME=0.0.0.0
 
+# yt-dlp
+ADD https://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp_linux /usr/local/bin/yt-dlp
+RUN chmod a+rx /usr/local/bin/yt-dlp
+
 RUN groupadd -r nodejs && useradd -r -g nodejs nextjs
 
 # public assets + standalone server + static chunks

app/(main)/layout.tsx

@@ -7,7 +7,7 @@ import { Header } from "@/widgets/header/ui/header";
 import { AiChatButton } from "@/features/ai-chat/ui/AiChatButton";
 import { AiChatModal } from "@/features/ai-chat/ui/AiChatModal";
 import { useAiChatPanel } from "@/features/ai-chat/model/useAiChatPanel";
-import { WakeUpMusicRecommend } from "@/features/wake-up-music/ui/WakeUpMusicRecommend";
+import { WakeUpMusicRecommend } from "@/features/wake-up-music-recommend/ui/WakeUpMusicRecommend";
 import { RealtimeSubscriptions } from "@/widgets/realtime-subscription/ui/RealtimeSubscriptions";
 
 export default function MainLayout({

app/api/youtube/transcript/route.ts

@@ -0,0 +1,42 @@
+import { HttpStatusCode } from "axios";
+import { NextRequest, NextResponse } from "next/server";
+import { extractYoutubeVideoId } from "@/entities/music/lib/youtube";
+import { getYoutubeTranscript } from "@/entities/music/lib/transcript";
+
+export const runtime = "nodejs";
+
+export async function GET(request: NextRequest) {
+  const authorization = request.headers.get("authorization");
+  const accessToken = authorization?.startsWith("Bearer ")
+    ? authorization.slice("Bearer ".length)
+    : null;
+
+  if (!accessToken) {
+    return NextResponse.json(
+      { error: "access token 없음" },
+      { status: HttpStatusCode.Unauthorized },
+    );
+  }
+
+  const params = request.nextUrl.searchParams;
+  const urlParam = params.get("url");
+  const idParam = params.get("id");
+  const videoId =
+    idParam ?? (urlParam ? extractYoutubeVideoId(urlParam) : null);
+
+  const youtubeIdRegex = /^[a-zA-Z0-9_-]{11}$/;
+  if (!videoId || !youtubeIdRegex.test(videoId)) {
+    return NextResponse.json(
+      { error: "올바른 형식의 videoId(id) 또는 url이 필요합니다." },
+      { status: HttpStatusCode.BadRequest },
+    );
+  }
+
+  const result = await getYoutubeTranscript(videoId);
+
+  if ("error" in result) {
+    return NextResponse.json(result, { status: HttpStatusCode.NotFound });
+  }
+
+  return NextResponse.json(result);
+}

package.json

@@ -12,6 +12,7 @@
     "format:check": "prettier --check --ignore-unknown ."
   },
   "dependencies": {
+    "@mlc-ai/web-llm": "^0.2.84",
     "@sentry/nextjs": "^10.53.1",
     "@sun-typeface/suit": "^2.0.5",
     "@tanstack/react-query": "^5.90.20",

src/entities/ai/lib/webllm.worker.ts

@@ -0,0 +1,7 @@
+import { WebWorkerMLCEngineHandler } from "@mlc-ai/web-llm";
+
+const handler = new WebWorkerMLCEngineHandler();
+
+self.onmessage = (event: MessageEvent) => {
+  handler.onmessage(event);
+};

src/entities/ai/lib/webllmEngine.ts

@@ -0,0 +1,94 @@
+import type { WebWorkerMLCEngine } from "@mlc-ai/web-llm";
+
+export const MUSIC_LLM_MODEL_ID = "gemma-2-2b-it-q4f16_1-MLC";
+
+export type ModelState =
+  | { status: "idle" }
+  | { status: "loading"; progress: number }
+  | { status: "ready" }
+  | { status: "error"; message: string };
+
+const WEBGPU_UNSUPPORTED_MESSAGE =
+  "이 브라우저/기기에서 WebGPU를 사용할 수 없습니다.";
+
+let enginePromise: Promise<WebWorkerMLCEngine> | null = null;
+let modelState: ModelState = { status: "idle" };
+const listeners = new Set<() => void>();
+
+function setModelState(next: ModelState) {
+  modelState = next;
+  listeners.forEach((listener) => listener());
+}
+
+export function subscribeModelState(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+export function getModelStateSnapshot(): ModelState {
+  return modelState;
+}
+
+export async function ensureWebGpuSupport(): Promise<void> {
+  if (modelState.status !== "idle") return;
+
+  const gpu = (
+    navigator as Navigator & {
+      gpu?: { requestAdapter: () => Promise<unknown> };
+    }
+  ).gpu;
+
+  if (!gpu) {
+    setModelState({ status: "error", message: WEBGPU_UNSUPPORTED_MESSAGE });
+    return;
+  }
+
+  try {
+    const adapter = await gpu.requestAdapter();
+    if (!adapter) {
+      setModelState({ status: "error", message: WEBGPU_UNSUPPORTED_MESSAGE });
+    }
+  } catch {
+    setModelState({ status: "error", message: WEBGPU_UNSUPPORTED_MESSAGE });
+  }
+}
+
+export function getMusicLlmEngine(): Promise<WebWorkerMLCEngine> {
+  if (!enginePromise) {
+    setModelState({ status: "loading", progress: 0 });
+    enginePromise = (async () => {
+      const { CreateWebWorkerMLCEngine } = await import("@mlc-ai/web-llm");
+      const worker = new Worker(
+        new URL("./webllm.worker.ts", import.meta.url),
+        {
+          type: "module",
+        },
+      );
+
+      const engine = await CreateWebWorkerMLCEngine(
+        worker,
+        MUSIC_LLM_MODEL_ID,
+        {
+          initProgressCallback: (report) =>
+            setModelState({ status: "loading", progress: report.progress }),
+        },
+      );
+      setModelState({ status: "ready" });
+      return engine;
+    })().catch((error) => {
+      enginePromise = null;
+      const reason = error instanceof Error ? error.message : String(error);
+      setModelState({
+        status: "error",
+        message: reason.includes("WebGPU")
+          ? WEBGPU_UNSUPPORTED_MESSAGE
+          : "AI 모델을 불러오지 못했습니다.",
+      });
+      throw error;
+    });
+  }
+
+  return enginePromise;
+}

src/entities/ai/model/useModelState.ts

@@ -0,0 +1,16 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import {
+  getModelStateSnapshot,
+  subscribeModelState,
+  type ModelState,
+} from "@/entities/ai/lib/webllmEngine";
+
+export function useModelState(): ModelState {
+  return useSyncExternalStore(
+    subscribeModelState,
+    getModelStateSnapshot,
+    getModelStateSnapshot,
+  );
+}

src/entities/dormitory/lib/musicPermission.ts

@@ -1,11 +1,23 @@
 import type { UserRole } from "@/entities/user/model/user";
 
+// 기자위(DORMITORY_MANAGER) 중 AI 분석을 쓸 수 있는 사감 계정 이름
+const DORM_SUPERVISOR_NAME = "사감선생님";
+
 interface CreateMusicPermissionParams {
   role?: UserRole;
+  name?: string;
 }
 
-export function createMusicPermission({ role }: CreateMusicPermissionParams) {
+export function createMusicPermission({
+  role,
+  name,
+}: CreateMusicPermissionParams) {
+  const isDormManager = role === "DORMITORY_MANAGER";
+
   return {
-    canDeleteAnyMusic: role === "ADMIN" || role === "DORMITORY_MANAGER",
+    canDeleteAnyMusic: role === "ADMIN" || isDormManager,
+    // 어드민은 모두 가능, 기자위는 사감선생님만 가능
+    canUseAiAnalysis:
+      role === "ADMIN" || (isDormManager && name === DORM_SUPERVISOR_NAME),
   };
 }

src/entities/music/api/youtubeQueries.ts

@@ -13,6 +13,10 @@ interface YoutubeVideosResponse {
   videos: YoutubeVideoMetadata[];
 }
 
+export interface YoutubeTranscript {
+  text: string;
+}
+
 export async function getYoutubeVideos(
   videoIds: string[],
   signal?: AbortSignal,
@@ -35,6 +39,25 @@ export async function getYoutubeVideos(
   return Object.fromEntries(data.videos.map((video) => [video.id, video]));
 }
 
+const TRANSCRIPT_TIMEOUT_MS = 65_000;
+
+export async function getYoutubeTranscript(
+  videoId: string,
+  signal?: AbortSignal,
+): Promise<YoutubeTranscript> {
+  const { data } = await instance.get<YoutubeTranscript>(
+    "/api/youtube/transcript",
+    {
+      baseURL: undefined,
+      params: { id: videoId },
+      timeout: TRANSCRIPT_TIMEOUT_MS,
+      signal,
+    },
+  );
+
+  return data;
+}
+
 export const youtubeQueries = {
   videos: (videoIds: string[]) => {
     const ids = Array.from(new Set(videoIds)).sort();
@@ -45,4 +68,13 @@ export const youtubeQueries = {
       enabled: ids.length > 0,
     });
   },
+
+  transcript: (videoId: string) =>
+    queryOptions({
+      queryKey: ["music", "youtube-transcript", videoId],
+      queryFn: ({ signal }) => getYoutubeTranscript(videoId, signal),
+      enabled: Boolean(videoId),
+      staleTime: Infinity,
+      gcTime: Infinity,
+    }),
 } as const;