[Feat] 인게임 점수 획득시 효과음, 라운드시작 카운트다운 효과음

src/pages/GamePage/GameCode/GameCode.tsx

@@ -1,6 +1,9 @@
 import { useCallback, useMemo, useRef } from 'react';
 import IngameHeader from '@/common/Ingame/IngameHeader';
 import IngameRank from '@/common/Ingame/IngameRank';
+import playSoundEffect, {
+  SOUND_SCORE,
+} from '@/pages/GamePage/common/playSoundEffect';
 import useIngameStore from '@/store/useIngameStore';
 import CanvasTrack from '../common/CanvasTrack';
 import TrackLine from '../common/TrackLine';
@@ -91,6 +94,8 @@ const GameCode = ({ publishIngame, userId }: GameCodeProps) => {
   const handleUpdateScore = useCallback(() => {
     const newScore = currentScore + scorePerSubmit;
     publishIngame('/info', { currentScore: newScore });
+    const sound = playSoundEffect(SOUND_SCORE);
+    sound.then((audio) => audio.play());
   }, [currentScore, scorePerSubmit]);
 
   return (

src/pages/GamePage/GameSentence/GameSentence.tsx

@@ -3,6 +3,9 @@ import Dashboard from '@/common/Ingame/Dashboard';
 import IngameHeader from '@/common/Ingame/IngameHeader';
 import IngameRank from '@/common/Ingame/IngameRank';
 import { SentenceNext } from '@/common/Ingame/SentenceBlocks';
+import playSoundEffect, {
+  SOUND_SCORE,
+} from '@/pages/GamePage/common/playSoundEffect';
 import useIngameStore from '@/store/useIngameStore';
 import CanvasTrack from '../common/CanvasTrack';
 import TrackLine from '../common/TrackLine';
@@ -26,6 +29,8 @@ export interface I_RankInfoList {
 }
 
 const GameSentence = ({ publishIngame, userId }: GameSentenceProps) => {
+  const sound = playSoundEffect(SOUND_SCORE);
+
   const { ingameRoomRes, isRoundWaiting } = useIngameStore();
 
   const currentScore = ingameRoomRes.allMembers.find(
@@ -40,6 +45,7 @@ const GameSentence = ({ publishIngame, userId }: GameSentenceProps) => {
   const handleNextRound = useCallback(() => {
     sentenceList.current = ingameRoomRes.questions!;
     setSentenceIdx(0);
+    sound.then((audio) => audio.play());
   }, [ingameRoomRes.questions]);
 
   const {
@@ -87,12 +93,12 @@ const GameSentence = ({ publishIngame, userId }: GameSentenceProps) => {
   );
 
   const scorePerTrankLength = Math.ceil((1 / TotalSpacedWord) * 100);
-
   const handleUpdateScore: UpdateScoreType = useCallback(() => {
     const newScore = currentScore + scorePerTrankLength;
     publishIngame('/info', {
       currentScore: newScore,
     });
+    sound.then((audio) => audio.play());
   }, [currentScore, scorePerTrankLength]);
 
   return (

src/pages/GamePage/GameWord/WordGameLayout.tsx

@@ -5,6 +5,7 @@ import {
   I_IngameWsResponse,
   PublishIngameType,
 } from '../../GamePage/types/websocketType';
+import playSoundEffect, { SOUND_SCORE } from '../common/playSoundEffect';
 import useFocusInput from '../hooks/useFocusInput';
 import WordCell from './WordCell';
 import WordRankContainer from './WordRankContainer';
@@ -65,6 +66,7 @@ const WordGameLayout = ({
   useEffect(() => {
     onInputChange(0, 100, 150); //동기화..
   }, [ingameRoomRes]);
+  const sound = playSoundEffect(SOUND_SCORE);
 
   return (
     <>
@@ -99,6 +101,7 @@ const WordGameLayout = ({
               setValue('wordInput', '');
               initializeTyping();
               submitCount.current += 1;
+              sound.then((audio) => audio.play());
             })}>
             <input
               autoFocus

src/pages/GamePage/common/RoundWaitModal.tsx

@@ -2,6 +2,7 @@ import * as Dialog from '@radix-ui/react-dialog';
 import { useEffect } from 'react';
 import { convertTime } from '@/common/Timer/utils/convertTime';
 import useTimer from '@/hooks/useTimer';
+import playSoundEffect, { SOUND_COUNTDOWN } from './playSoundEffect';
 
 interface RoundWaitModalProps {
   isOpen: boolean;
@@ -17,9 +18,12 @@ const RoundWaitModal = ({ isOpen, onTimeFinish }: RoundWaitModalProps) => {
     },
     autoStart: false,
   });
-
+  const sound = playSoundEffect(SOUND_COUNTDOWN);
   useEffect(() => {
-    isOpen && startTimer();
+    if (isOpen) {
+      startTimer();
+      sound.then((audio) => audio.play());
+    }
   }, [isOpen]);
 
   return (

src/pages/GamePage/common/playSoundEffect.ts

@@ -0,0 +1,17 @@
+export const SOUND_SCORE = 'SCORE';
+export const SOUND_COUNTDOWN = 'COUNTDOWN';
+type SoundEffectType = typeof SOUND_SCORE | typeof SOUND_COUNTDOWN;
+
+const mappedSoundFiles: Record<SoundEffectType, () => Promise<string>> = {
+  SCORE: () =>
+    import('@/assets/audio/soundEffect.mp3').then((module) => module.default),
+  COUNTDOWN: () =>
+    import('@/assets/audio/countDown.mp3').then((module) => module.default),
+};
+
+const playSoundEffect = async (type: SoundEffectType) => {
+  const src = await mappedSoundFiles[type]();
+  const audio = new Audio(src);
+  return audio;
+};
+export default playSoundEffect;