✨ [Feat]: 방송 송출 창 테마도 체크인 시 테마와 같도록 수정

Author: zero0205

apps/client/src/pages/Broadcast/BroadcastTitle.tsx

@@ -63,7 +63,7 @@ function BroadcastTitle({ currentTitle, onTitleChange }: BroadcastTitleProps) {
       ) : (
         <div className="flex flex-row justify-between p-4 h-20">
           <div className="text-text-default text-display-bold24">{currentTitle}</div>
-          <Button className="bg-transparent border border-border-default" onClick={handleEditTitle}>
+          <Button className="bg-transparent border border-border-default text-text-strong" onClick={handleEditTitle}>
             수정
           </Button>
         </div>

apps/client/src/pages/Broadcast/index.tsx

@@ -14,13 +14,14 @@ import {
   ScreenShareIconOff,
 } from '@/components/Icons';
 import { Button } from '@components/ui/button';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import useScreenShare from '@/hooks/useScreenShare';
 import BroadcastPlayer from './BroadcastPlayer';
 import { Tracks } from '@/types/mediasoupTypes';
 import RecordButton from './RecordButton';
 import axiosInstance from '@/services/axios';
 import { useMedia } from '@/hooks/useMedia';
+import { useTheme } from '@/hooks/useTheme';
 
 const mediaServerUrl = import.meta.env.VITE_MEDIASERVER_URL;
 
@@ -59,6 +60,16 @@ function Broadcast() {
   });
   // 방송 정보
   const [title, setTitle] = useState<string>('');
+  // 테마
+  const { theme } = useTheme();
+
+  useLayoutEffect(() => {
+    if (theme === 'light') {
+      document.querySelector('html')?.setAttribute('data-theme', 'light');
+    } else {
+      document.querySelector('html')?.removeAttribute('data-theme');
+    }
+  }, []);
 
   useEffect(() => {
     tracksRef.current['mediaAudio'] = mediaStream?.getAudioTracks()[0];