[feat/#467] ✨ feat: 페이지 별로 브금 다르게 세팅, 브금 반복

chatty-fe/src/app/(game)/create-room/page.css.ts

@@ -31,6 +31,7 @@ export const contentsContainer = style({
   gap: 10,
   backgroundColor: globals.color.blue_6,
   borderRadius: 20,
+  boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
 });
 
 export const contentsWrapper = style({

chatty-fe/src/app/_components/BgmComponent/BgmComponent.tsx

@@ -1,9 +1,11 @@
 'use client';
+import useBgm from '@/app/_hooks/useBgm';
 import useBgmStore from '@/app/_store/useBgmStore';
 import React, { useEffect, useRef } from 'react';
 
 export default function BgmComponent() {
   const { bgm, isPlaying } = useBgmStore();
+  const { checkUrlAndChangeBgm, url } = useBgm();
   const audioElement = useRef<HTMLAudioElement>(null);
 
   useEffect(() => {
@@ -14,5 +16,9 @@ export default function BgmComponent() {
     }
   }, [isPlaying]);
 
-  return <audio src={bgm} autoPlay ref={audioElement} />;
+  useEffect(() => {
+    checkUrlAndChangeBgm();
+  }, [url]);
+
+  return <audio src={bgm} autoPlay loop ref={audioElement} />;
 }

chatty-fe/src/app/_hooks/useBgm.ts

@@ -0,0 +1,20 @@
+import { usePathname } from 'next/navigation';
+import useBgmStore from '../_store/useBgmStore';
+
+const useBgm = () => {
+  const { setBgm } = useBgmStore();
+  const url = usePathname();
+  const quizUrl = ['/quiz-room'];
+  const mainBgm = '/bgm/main.mp3';
+  const quizBgm = '/bgm/quiz.mp3';
+  const checkUrlAndChangeBgm = () => {
+    if (quizUrl.includes(url)) {
+      setBgm(quizBgm);
+    } else {
+      setBgm(mainBgm);
+    }
+  };
+  return { checkUrlAndChangeBgm, url };
+};
+
+export default useBgm;