tkrmagid/music_bot_v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

대부분 모든기능 제작

Browse Source 
하단 player연결, 일시정지, 스킵, 볼륨, 특정시간재생, queue 디자인 변경, queue 변경기능 제작
This commit is contained in:
tkrmagid-desktop
2026-04-10 00:40:40 +09:00
parent 88a5a88c51
commit 374fbdb1ce
18 changed files with 1265 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
page/src/components/player/MainContent.tsx
View File

@@ -2,7 +2,7 @@
import { useEffect, useState } from "react";
import { useSession } from "next-auth/react";
// 🌟 [수정됨] 상단 아이콘에 쓸 ListPlus 추가
import { Play, ChevronLeft, Server, Music, Loader2, SearchX, ListPlus } from "lucide-react";
import { Play, ChevronLeft, Server, Music, Loader2, SearchX, ListPlus } from "lucide-react";
import { ViewMode } from "@/app/page";
interface MainContentProps {
@@ -15,7 +15,7 @@ interface MainContentProps {
onSelectServer: (server: any) => void;
}
export default function MainContent({
export default function MainContent({
viewMode,
setViewMode,
selectedServer,
@@ -36,9 +36,8 @@ export default function MainContent({
alert("명령을 내릴 디스코드 서버가 선택되지 않았습니다.");
return;
}
// 🌟 [추가된 부분] next-auth 세션에서 유저 식별자 가져오기
// (NextAuth 설정에 따라 id가 없을 수도 있으므로 없을 경우 name을 대체로 사용합니다)
const userId = (session?.user as any)?.id;
let endpoint = "";
@@ -61,7 +60,7 @@ export default function MainContent({
const data = await res.json();
if (res.ok && data.success) {
alert(data.message || "요청이 성공했습니다.");
// alert(data.message || "요청이 성공했습니다.");
} else {
alert(data.message || data.error || "요청 처리 중 문제가 발생했습니다.");
}
@@ -143,7 +142,7 @@ export default function MainContent({
return (
<main className="flex-1 flex flex-col bg-gradient-to-b from-neutral-800/50 to-neutral-900 overflow-y-auto p-8">
{/* 화면 1: 서버 목록 */}
{viewMode === "SERVER_LIST" && (
<>
@@ -156,8 +155,8 @@ export default function MainContent({
) : (
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
{servers.map((server) => (
<div
key={server.id}
<div
key={server.id}
onClick={() => onSelectServer(server)}
className="bg-neutral-800/40 p-4 rounded-xl hover:bg-neutral-800 transition-all cursor-pointer group border border-transparent hover:border-neutral-700 shadow-md"
>
@@ -185,12 +184,12 @@ export default function MainContent({
<ChevronLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
서버 목록으로 돌아가기
</button>
<div className="flex items-end gap-6 mb-8">
<div className="w-48 h-48 bg-neutral-800 rounded-2xl shadow-2xl flex items-center justify-center overflow-hidden">
{selectedServer.icon ? (
<img src={`https://cdn.discordapp.com/icons/${selectedServer.id}/${selectedServer.icon}.png`} className="w-full h-full object-cover" alt="" />
) : <Server size={64} className="text-neutral-500" />}
{selectedServer.icon ? (
<img src={`https://cdn.discordapp.com/icons/${selectedServer.id}/${selectedServer.icon}.png`} className="w-full h-full object-cover" alt="" />
) : <Server size={64} className="text-neutral-500" />}
</div>
<div>
<span className="text-sm font-bold uppercase text-neutral-400 tracking-wider">서버 대시보드</span>
@@ -198,19 +197,19 @@ export default function MainContent({
<p className="text-neutral-400">이 서버에서 음악 봇이 활발하게 작동 중입니다.</p>
</div>
</div>
<div className="bg-black/20 rounded-xl p-6 border border-neutral-800">
<h3 className="text-lg font-bold mb-4 flex items-center gap-2"><Music size={20} /> 상세 정보</h3>
<div className="grid grid-cols-2 gap-4 text-sm">
<div className="bg-neutral-800/50 p-4 rounded-lg border border-white/5">
<p className="text-neutral-500 mb-1">서버 고유 ID</p>
<p className="font-mono text-white">{selectedServer.id}</p>
</div>
<div className="bg-neutral-800/50 p-4 rounded-lg border border-white/5">
<p className="text-neutral-500 mb-1">나의 서버 권한</p>
<p className="text-green-400 font-bold">{getPermissionLabel(selectedServer)}</p>
</div>
</div>
<h3 className="text-lg font-bold mb-4 flex items-center gap-2"><Music size={20} /> 상세 정보</h3>
<div className="grid grid-cols-2 gap-4 text-sm">
<div className="bg-neutral-800/50 p-4 rounded-lg border border-white/5">
<p className="text-neutral-500 mb-1">서버 고유 ID</p>
<p className="font-mono text-white">{selectedServer.id}</p>
</div>
<div className="bg-neutral-800/50 p-4 rounded-lg border border-white/5">
<p className="text-neutral-500 mb-1">나의 서버 권한</p>
<p className="text-green-400 font-bold">{getPermissionLabel(selectedServer)}</p>
</div>
</div>
</div>
</div>
)}
@@ -235,11 +234,11 @@ export default function MainContent({
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
{searchResults.map((track) => (
<div key={track.videoId} className="bg-neutral-800/40 p-4 rounded-xl hover:bg-neutral-800 transition-all group border border-transparent hover:border-neutral-700 shadow-md">
{/* 🌟 썸네일 이미지 영역 (여기 안에 버튼 2개가 떠다닙니다) */}
<div className="aspect-square bg-neutral-700 rounded-md mb-4 relative overflow-hidden shadow-lg">
{track.thumbnail && <img src={track.thumbnail} className="w-full h-full object-cover" alt={track.title} />}
{/* 🌟 [주석으로 제거] 우측 상단: 재생목록 추가 버튼 (위에서 아래로 스르륵) */}
{/* <button
onClick={(e) => {
@@ -253,7 +252,7 @@ export default function MainContent({
</button> */}
{/* 🌟 [수정됨] 우측 하단: 바로 재생 버튼 (기존 코드 유지 및 onClick 연결) */}
<button
<button
onClick={(e) => {
e.stopPropagation();
handleMusicAction('player_play', track);