[Genie95] #4. React에서 Webamp를 전역 변수로 관리하고 모달 없이 실행하는 방법

🔥 문제 상황: Webamp가 여러 개 실행되고 빈 모달이 뜨는 문제

 

React에서 Webamp를 실행할 때, 여러 개가 중복 실행되거나 빈 모달이 뜨는 문제가 발생할 수 있습니다. 이를 해결하기 위해 전역 변수를 사용하여 Webamp를 한 번만 실행하고, Taskbar에서 직접 Webamp를 실행하는 방법을 정리해보았습니다.

---

전역 변수란 무엇인가?

전역 변수(Global Variable)는 애플리케이션 전체에서 접근할 수 있는 변수입니다. React에서는 컴포넌트가 리렌더링될 때마다 내부 변수들이 초기화되지만, 전역 변수는 값이 유지됩니다.

📌 지역 변수 vs. 전역 변수

변수 위치	특징	Webamp 적용
지역 변수 (컴포넌트 내부 변수)	함수 실행될 때마다 새로 생성됨	startWebamp() 호출 시 Webamp가 계속 새로 생성됨
전역 변수 (let webampInstance)	한 번 생성되면 계속 유지됨	이미 실행된 Webamp가 있으면 새로 생성하지 않음

 

해결 방법: Webamp를 전역 변수로 관리하기

startWebamp.js에서 Webamp를 전역 변수로 저장

import Webamp from "webamp";

let webampInstance = null; // ✅ Webamp 인스턴스를 전역 변수로 저장

const startWebamp = () => {
    if (!Webamp.browserIsSupported()) return;

    // ✅ 이미 실행 중인 Webamp가 있다면 종료 후 새로 생성
    if (webampInstance) {
        try {
            const audio = webampInstance.getMediaElement();
            if (audio) {
                audio.pause(); // ✅ 먼저 오디오 정지
                audio.src = ""; // ✅ 기존 오디오 스트림을 완전히 초기화
            }
            webampInstance.dispose(); // ✅ 스트림을 완전히 닫은 후 Webamp 종료
            webampInstance = null;
        } catch (error) {
            console.warn("Webamp dispose error:", error);
        }
    }

    // ✅ 새로운 Webamp 인스턴스 생성
    webampInstance = new Webamp({
        initialTracks: [
            {
                metadata: { artist: "AJR", title: "Bang!" },
                url: "/AJR-bang!.mp3", // ✅ 파일 경로 확인 필요
            },
        ],
    });

    webampInstance.onClose(() => {
        try {
            const audio = webampInstance.getMediaElement();
            if (audio) {
                audio.pause();
                audio.src = ""; // ✅ 오디오 스트림을 초기화
            }
            webampInstance.dispose();
            webampInstance = null;
        } catch (error) {
            console.warn("Webamp dispose error:", error);
        }
    });

    webampInstance.renderWhenReady(document.getElementById("winamp-container"));
};

export { startWebamp };

• Webamp가 하나만 실행되도록 수정
• Webamp를 닫으면 전역 변수를 null로 초기화하여 새로운 인스턴스를 생성할 수 있도록 함
• 기존 Webamp가 있다면 dispose() 후 제거하고 새로 생성

ModalContext.js에서 media 모달 삭제

Taskbar에서 직접 Webamp를 실행하려면, ModalContext에서 media 관련 상태를 제거해야 합니다.

const ModalProvider = ({ children }) => {
    const [modals, setModals] = useState({
        contact: false, // ✅ media 관련 상태 제거
    });

    return (
        <ModalContext.Provider value={{ modals, openModal, closeModal }}>
            {children}
        </ModalContext.Provider>
    );
};

• 이제 빈 모달이 뜨지 않음
• 모달 없이 Webamp가 실행될 수 있도록 변경

Taskbar.js에서 Webamp 직접 실행하기

import React, { useState } from "react";
import { TaskBar as React95Taskbar, List } from "@react95/core";
import { Cdplayer107 } from "@react95/icons";
import Player from "../components/Player"; // ✅ Player 직접 불러오기

const CustomTaskbar = () => {
    const [showPlayer, setShowPlayer] = useState(false); // ✅ Player 상태 관리

    return (
        <>
            <React95Taskbar
                list={
                    <List>
                        <List.Item icon={<Cdplayer107 variant="32x32_4" />} onClick={() => setShowPlayer(true)}>
                            Media
                        </List.Item>
                    </List>
                }
            />

            {/* ✅ Taskbar에서 직접 Player 실행 */}
            {showPlayer && <Player closeModal={() => setShowPlayer(false)} />}
        </>
    );
};

export default CustomTaskbar;

• Taskbar에서 openModal("media") 대신 setShowPlayer(true)로 직접 실행
• Webamp를 ModalContext가 아닌 Taskbar에서 직접 관리

Player.js에서 Modal을 제거하고 Webamp만 실행

import React, { useEffect } from "react";
import { startWebamp } from "../utils/startWebamp";

const Player = ({ closeModal }) => {
    useEffect(() => {
        startWebamp(); // ✅ Webamp 실행
    }, []);

    return (
        <div id="winamp-container" style={{ width: "100%", height: "100%" }}></div>
    );
};

export default Player;

• Modal을 감싸지 않고 Webamp만 실행
• 빈 모달 없이 Webamp가 실행되도록 변경

---

🎯 최종 정리

문제	해결 방법
✅ Webamp가 여러 개 실행됨	Webamp를 전역 변수(let webampInstance)로 관리하여 한 개만 실행
✅ Taskbar에서 Media 클릭 시 빈 모달이 뜸	ModalContext.js에서 media 관련 상태를 삭제
✅ Taskbar에서 Webamp를 실행하고 싶음	openModal("media")를 제거하고 setShowPlayer(true)로 직접 실행
✅ Player.js에서 모달 없이 Webamp만 실행하고 싶음	Modal을 감싸지 않고 Webamp만 실행되도록 수정

 

 

이제 Taskbar에서 Webamp가 중복 없이 한 번만 실행되고, 빈 모달 없이 정상 작동됩니다!