[✨feat]: 동적import, 상수 분리

src/pages/GamePage/GameCode/GameCode.tsx

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

src/pages/GamePage/GameSentence/GameSentence.tsx

@@ -3,7 +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 from '@/pages/GamePage/common/playSoundEffect';
+import playSoundEffect, {
+  SOUND_SCORE,
+} from '@/pages/GamePage/common/playSoundEffect';
 import useIngameStore from '@/store/useIngameStore';
 import CanvasTrack from '../common/CanvasTrack';
 import TrackLine from '../common/TrackLine';
@@ -27,7 +29,7 @@ export interface I_RankInfoList {
 }
 
 const GameSentence = ({ publishIngame, userId }: GameSentenceProps) => {
-  const sound = playSoundEffect('SCORE');
+  const sound = playSoundEffect(SOUND_SCORE);
 
   const { ingameRoomRes, isRoundWaiting } = useIngameStore();
 
@@ -43,7 +45,7 @@ const GameSentence = ({ publishIngame, userId }: GameSentenceProps) => {
   const handleNextRound = useCallback(() => {
     sentenceList.current = ingameRoomRes.questions!;
     setSentenceIdx(0);
-    sound.play();
+    sound.then((audio) => audio.play());
   }, [ingameRoomRes.questions]);
 
   const {
@@ -96,7 +98,7 @@ const GameSentence = ({ publishIngame, userId }: GameSentenceProps) => {
     publishIngame('/info', {
       currentScore: newScore,
     });
-    sound.play();
+    sound.then((audio) => audio.play());
   }, [currentScore, scorePerTrankLength]);
 
   return (

src/pages/GamePage/GameWord/WordGameLayout.tsx

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

src/pages/GamePage/common/RoundWaitModal.tsx

@@ -2,7 +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 from './playSoundEffect';
+import playSoundEffect, { SOUND_COUNTDOWN } from './playSoundEffect';
 
 interface RoundWaitModalProps {
   isOpen: boolean;
@@ -18,11 +18,11 @@ const RoundWaitModal = ({ isOpen, onTimeFinish }: RoundWaitModalProps) => {
     },
     autoStart: false,
   });
-  const sound = playSoundEffect('COUNTDOWN');
+  const sound = playSoundEffect(SOUND_COUNTDOWN);
   useEffect(() => {
     if (isOpen) {
       startTimer();
-      sound.play();
+      sound.then((audio) => audio.play());
     }
   }, [isOpen]);
 

src/pages/GamePage/common/playSoundEffect.ts

@@ -1,8 +1,26 @@
-import countDown from '@/assets/audio/countDown.mp3';
-import soundEffect from '@/assets/audio/soundEffect.mp3';
+export const SOUND_SCORE = 'SCORE';
+export const SOUND_COUNTDOWN = 'COUNTDOWN';
+type SoundEffectType = typeof SOUND_SCORE | typeof SOUND_COUNTDOWN;
 
-const playSoundEffect = (type: 'SCORE' | 'COUNTDOWN') => {
-  const src = type === 'SCORE' ? soundEffect : countDown;
-  return new Audio(src);
+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;
+
+// import countDown from '@/assets/audio/countDown.mp3';
+// import soundEffect from '@/assets/audio/soundEffect.mp3';
+
+// const playSoundEffect = (type: 'SCORE' | 'COUNTDOWN') => {
+//   const src = type === 'SCORE' ? soundEffect : countDown;
+//   return new Audio(src);
+// };
+// export default playSoundEffect;