관련 코드

KioskRentContainer.js

/** @jsxImportSource @emotion/react */
import KioskHeader from "../components/KioskHeader";
import KioskRentSection from "../components/KioskRentSection";
import Player from "../components/button/Player";
import audioFile from "../assets/KioskRentContainerAudio.mp3";
import {
  AudioPlayStyle,
  KioskRentStyle,
  fadeInStyles,
} from "../style/rentStyle";

const KioskRentContainer = () => {
  return (
    <div css={fadeInStyles}>
      <div css={KioskRentStyle}>
        <header>
          <KioskHeader />
        </header>
        <section>
          <KioskRentSection />
        </section>
        <div css={AudioPlayStyle}>
          <Player url={audioFile} />
          {/* 오디오 파일과 현재 위치를 Player 컴포넌트에 전달합니다. */}
        </div>
      </div>
    </div>
  );
};

export default KioskRentContainer;

Player.js

import VolumeUpIcon from "@mui/icons-material/VolumeUp";
import useAudioCall from "../../hooks/useAudioCall";

const Player = ({ url }) => {
  const [id, navigate, location, playing, toggle] = useAudioCall(url);

  return (
    <>
      <VolumeUpIcon fontSize="large" onClick={toggle} />
      <span>{playing ? "Pause" : "Play"}</span>
    </>
  );
};

export default Player;

useAudio.js

import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { setAudio, setPlaying } from "../redux/actions/audioActions";

const useAudio = (url) => {
  const audio = useSelector((state) => state.audio.audio); // Redux state에서 audio 객체를 가져옵니다.
  const playing = useSelector((state) => state.audio.playing); // Redux state에서 audio 재생 상태를 가져옵니다.
  const dispatch = useDispatch(); // Redux 액션을 dispatch하기 위한 함수입니다.

  const toggle = () => dispatch(setPlaying(!playing)); // 재생 상태를 변경하는 함수입니다.

  const stop = () => {
    // 오디오를 중지하고 초기화하는 함수입니다.
    if (audio) {
      audio.pause(); // 오디오를 일시 중지합니다.
      audio.currentTime = 0; // 오디오 재생 위치를 초기화합니다.
      dispatch(setPlaying(false)); // 재생 상태를 false로 변경합니다.
    }
  };

  useEffect(() => {
    // 재생 상태나 audio 객체가 변경될 때마다 실행됩니다.
    if (playing && audio) {
      audio.currentTime = 0; // 오디오 재생 위치를 초기화합니다.
      audio.play(); // 오디오를 재생합니다.
    } else if (!playing && audio) {
      audio.pause(); // 오디오를 일시 정지합니다.
      dispatch(setPlaying(false));
    }
  }, [playing, audio]);

  useEffect(() => {
    // audio 객체가 변경될 때마다 실행됩니다.
    if (audio) {
      // 오디오가 끝나면 재생 상태를 false로 변경합니다.
      audio.addEventListener("ended", () => dispatch(setPlaying(false)));
      return () => {
        // 컴포넌트가 언마운트될 때 이벤트 리스너를 제거합니다.
        audio.removeEventListener("ended", () => dispatch(setPlaying(false)));
      };
    }
  }, [audio, dispatch]);

  useEffect(() => {
    // url이나 dispatch 함수가 변경될 때마다 실행됩니다.
    const newAudio = new Audio(url); // 새로운 Audio 객체를 생성합니다.
    dispatch(setAudio(newAudio)); // Redux state에 새로운 Audio 객체를 저장합니다.
    dispatch(setPlaying(false)); // 재생 상태를 false로 변경합니다.
  }, [url, dispatch]);

  return [playing, toggle, stop]; // 재생 상태와 재생 상태를 변경하는 함수를 반환합니다.
};

export default useAudio;

useAudioCall.js

import { useEffect } from "react";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import useAudio from "../hooks/useAudio";

const useAudioCall = (url) => {
  const { id } = useParams();
  const navigate = useNavigate();
  const location = useLocation();

  const [playing, toggle, stop] = useAudio(url);

  useEffect(() => {
    let myTimer = setTimeout(() => {
      navigate(`/kiosk/${id}`);
    }, 500000);
    return () => {
      clearTimeout(myTimer);
    };
  }, [id, navigate]);

  return [id, navigate, location, playing, toggle, stop];
};

export default useAudioCall;

작성 로직 설명

KioskRentContainer.js

이 파일은 오디오를 재생하는 페이지 컴포넌트를 정의하고 있습니다.

간략한 설명:

• 페이지가 로드되면, 오디오를 재생합니다. (useEffect 이용)
• 페이지가 바뀔 때 오디오를 멈춥니다. (useEffect 이용)
• 일정 시간이 지나면 지정한 페이지로 이동합니다. (useEffect 이용)
• 오디오의 상태 (재생 / 정지)는 Redux 를 이용하여 관리합니다.

주요 코드 섹션:

1. 오디오 재생 세팅:
   페이지가 로드되면 오디오를 재생합니다. 여기서 오디오의 currentTime을 0으로 설정하고, Redux의 setPlaying을 이용하여 오디오의 상태를 재생 상태로 변경합니다. 그 후 audio.play()를 이용하여 오디오를 재생합니다.

2. 오디오 중지 세팅:
   페이지를 나갈 때 (즉, 페이지 경로가 바뀔 때) 오디오를 중지합니다. 오디오를 pause하고, currentTime을 0으로 설정합니다. 그 후 Redux의 setPlaying을 이용하여 오디오의 상태를 정지 상태로 변경합니다.

3. 일정 시간 후 페이지 이동:
   setTimeout을 이용하여 5분 후에 다른 페이지로 이동하게 합니다. 이 때, clearTimeout을 이용하여 컴포넌트가 언마운트 될 때 타이머를 정리합니다.

Player.js

이 파일은 오디오를 재생하고 정지하는 데 사용되는 버튼 컴포넌트를 정의하고 있습니다.

간략한 설명:

• 볼륨 아이콘을 클릭하면 오디오 재생 상태를 변경합니다.
• 오디오 재생 상태는 useAudio 훅을 이용하여 관리합니다.

주요 코드 섹션:

1. 플레이어 토글:
   오디오 재생 상태를 토글하는 함수와 현재 오디오 재생 상태를 가져옵니다. 이 정보는 useAudio 훅에서 가져옵니다.

2. 볼륨 아이콘:
   이 아이콘을 클릭하면 오디오 재생 상태가 토글됩니다.

useAudio.js

이 파일은 오디오 재생 상태를 관리하는 커스텀 훅을 정의하고 있습니다.

간략한 설명:

• 오디오 재생 상태는 Redux를 이용하여 관리합니다.
• 오디오의 URL이 바뀌면 새로운 오디오를 로드하고, 오디오를 정지 상태로 설정합니다.

주요 코드 섹션:

1. 재생 상태 토글:
   setPlaying 액션을 이용하여 오디오 재생 상태를 토글하는 함수를 정의합니다.

2. 재생 및 정지:
   오디오 재생 상태가 바뀌면 오디오를 재생하거나 정지합니다.

3. 오디오 종료 이벤트 핸들링:
   오디오가 종료되면 재생 상태를 정지 상태로 설정합니다.

4. 오디오 로드:
   오디오의 URL이 바뀔 때마다 새로운 오디오를 로드하고, 재생 상태를 정지 상태로 설정합니다.