```js import Button from "@component/common/button/hybrid/Button"; import ModalTemplate from "@component/common/modal/hybrid/ModalTemplate"; import {faPause} from "@fortawesome/free-solid-svg-icons/faPause"; import {faPlay} from "@fortawesome/free-solid-svg-icons/faPlay"; import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import usePlayerStore from "@store/playerStore"; import useToastifyStore from "@store/toastifyStore"; import Image from "next/image"; import {useEffect, useRef, useState} from "react"; // src\component\common\layout\hybrid\Header.tsx 로컬에서 데이터를 받아옴 const YoutubePlayerModal = (props: IModalComponent) => { const inputRef = useRef(null); const playerStore = usePlayerStore(); const [openPlaylist, setOpenPlaylist] = useState( playerStore.currentYoutubePlaylist.id ? playerStore.currentYoutubePlaylist : null, ); // 화면에 보이는 플레이리스트 const toastifyStore = useToastifyStore(); const handlePlaylist = (item: IYoutubePlaylist) => { setOpenPlaylist((prev) => (prev != null ? null : item)); }; const createPlaylist = async () => { const title = inputRef.current?.value; const res = await fetch("/api/youtube/playlist", { method: "POST", body: JSON.stringify({playlistTitle: title}), }); if (!res.ok) { toastifyStore.setToastify({ type: "error", message: "에러", }); return; } const result: createYoutubePlaylistResponse = await res.json(); playerStore.setPlayer({ playlist: [...playerStore.playlist, result.data], }); inputRef.current!.value = ""; }; const handlePlayItemClick = (item: IYoutube) => { playerStore.setPlayer({ currentYoutube: item, currentYoutubePlaylist: openPlaylist!, }); window.localStorage.setItem("currentYoutube", JSON.stringify(item)); window.localStorage.setItem( "currentYoutubePlaylist", JSON.stringify(openPlaylist), ); }; const deletePlaylist = async (id: number) => { const res = await fetch(`/api/youtube/playlist?id=${id}`, { headers: { "Content-Type": "application/json", }, method: "DELETE", }); if (!res.ok) { toastifyStore.setToastify({ type: "error", message: "에러", }); return; } let currentYoutubePlaylist: IYoutubePlaylist | null = JSON.parse( localStorage.getItem("currentYoutubePlaylist")!, ); if (currentYoutubePlaylist) { if (currentYoutubePlaylist.id == id) { localStorage.removeItem("currentYoutubePlaylist"); localStorage.removeItem("currentYoutube"); } } playerStore.setPlayer({ playlist: playerStore.playlist.filter((i) => i.id != id), }); setOpenPlaylist(null); }; // ================================================================== const createYoutubeUrl = async () => { const url = inputRef.current?.value; const _url = new URL(url || ""); const regex = /^(https?:\/\/|www\.)[^\s]+(\?|\&)([^&]*v=([^&]*))[^]*$/; if (!regex.test(url || "")) { return; } const v = _url.searchParams.get("v"); const res = await fetch("/api/youtube/url", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ youtubePlaylistId: openPlaylist?.id, youtubeUrlKeyId: v, youtubeUrl: url, }), }); if (!res.ok) { toastifyStore.setToastify({ type: "error", message: "에러", }); return; } const result: createYoutubeUrlResponse = await res.json(); const temp: IYoutubePlaylist[] = playerStore.playlist.map((i) => { if (i.id == openPlaylist?.id) { return { ...i, youtubeList: [...i.youtubeList, result.data.youtube], // youtubeList 업데이트 }; } else { return i; // 다른 항목은 그대로 반환 } }); playerStore.setPlayer({ playlist: temp, }); if (playerStore.currentYoutubePlaylist.id == openPlaylist?.id) { playerStore.setPlayer({ playlist: temp, currentYoutubePlaylist: temp.filter((i) => i.id == openPlaylist.id)[0], }); localStorage.setItem( "currentYoutubePlaylist", JSON.stringify(temp.filter((i) => i.id == openPlaylist.id)[0]), ); } inputRef.current!.value = ""; }; const deleteYoutube = async (id: number) => { const res = await fetch(`/api/youtube/url?id=${id}`, { method: "DELETE", headers: { "Content-Type": "application/json", }, }); if (!res.ok) { toastifyStore.setToastify({ type: "error", message: "에러", }); return; } const temp = playerStore.playlist.map((i) => { if (i.id == openPlaylist?.id) { return { ...i, youtubeList: i.youtubeList.filter((j) => j.id != id), }; } else { return i; } }); playerStore.setPlayer({ playlist: temp, }); const currentYoutube: IYoutube = playerStore.currentYoutube; if (currentYoutube.id == id) { localStorage.removeItem("currentYoutube"); let currentYoutubePlaylist: IYoutubePlaylist = playerStore.currentYoutubePlaylist; currentYoutubePlaylist.youtubeList = currentYoutubePlaylist.youtubeList.filter( (youtube) => youtube.id != id, ); localStorage.setItem( "currentYoutubePlaylist", JSON.stringify(currentYoutubePlaylist), ); playerStore.removeCurrentYoutube(); playerStore.setPlayer({ currentYoutubePlaylist: currentYoutubePlaylist, }); } }; const handlePlayBackwardClick = () => { if (!playerStore.currentYoutubePlaylist.id) return; playerStore.currentYoutubePlaylist.youtubeList.forEach((i, index) => { if (i.id == playerStore.currentYoutube.id) { const newCurrentYoutube = playerStore.currentYoutubePlaylist.youtubeList[ index == 0 ? 0 : index - 1 ]; // store playerStore.setPlayer({ currentYoutube: newCurrentYoutube, }); // localStorage window.localStorage.setItem( "currentYoutube", JSON.stringify(newCurrentYoutube), ); } }); }; const handlePlayForwardClick = () => { if (!playerStore.currentYoutubePlaylist.id) return; playerStore.currentYoutubePlaylist.youtubeList.forEach((i, index) => { if (i.id == playerStore.currentYoutube.id) { const newCurrentYoutube = playerStore.currentYoutubePlaylist.youtubeList[ index == playerStore.currentYoutubePlaylist.youtubeList.length - 1 ? index : index + 1 ]; // store playerStore.setPlayer({ currentYoutube: newCurrentYoutube, }); // localStorage window.localStorage.setItem( "currentYoutube", JSON.stringify(newCurrentYoutube), ); } }); }; const copyLinkHandler = (youtubeUrl: string): void => { navigator.clipboard.writeText(youtubeUrl); toastifyStore.setToastify({ type: "success", message: "복사되었습니다.", }); }; const handlePlayRepeat = () => { if (!playerStore.playRepeatType) { playerStore.setPlayer({ playRepeatType: "one", }); localStorage.setItem("playRepeatType", "one"); } else if (playerStore.playRepeatType == "one") { playerStore.setPlayer({ playRepeatType: "all", }); localStorage.setItem("playRepeatType", "all"); } else { playerStore.setPlayer({ playRepeatType: null, }); localStorage.removeItem("playRepeatType"); } }; const handlePlaybackMode = () => { playerStore.setPlayer({ isPlayRandom: !playerStore.isPlayRandom, }); localStorage.setItem("isPlayRandom", !playerStore.isPlayRandom + ""); }; useEffect(() => { const getPlaylist = async () => { const res = await fetch("/api/youtube/playlist", { method: "GET", headers: { "Content-Type": "application/json", }, next: {tags: ["getPlaylist"]}, }); if (!res.ok) { toastifyStore.setToastify({ type: "error", message: "에러", }); return; } const result: getYoutubePlaylistResponse = await res.json(); playerStore.setPlayer({ isFetchYoutubePlaylist: true, playlist: result.data, playRepeatType: localStorage.getItem("playRepeatType"), isPlayRandom: localStorage.getItem("isPlayRandom") == "true" ? true : false, }); }; // 처음 요청이 아니라면 요청을 보내지 않음 if (!playerStore.isFetchYoutubePlaylist) { getPlaylist(); } }, []); return ( {props.closeButtonComponent}

{playerStore.currentYoutube?.imageUrl && ( {""}