Merge branch 'develop' of https://github.com/prgrms-web-devcourse-final-project/WEB2_3_9crops_FE into 130-feat-admin-qa

Author: wldnjs990

src/App.tsx

@@ -27,9 +27,23 @@ import RandomLettersPage from './pages/RandomLetters';
 import RollingPaperPage from './pages/RollingPaper';
 import WritePage from './pages/Write';
 import ShareApprovalPage from './pages/Share';
+import useThemeStore from './stores/themeStore';
+import { useServerSentEvents } from './hooks/useServerSentEvents';
 
 const App = () => {
+  const theme = useThemeStore((state) => state.theme);
   useViewport();
+  useServerSentEvents();
+
+  const initializeTheme = () => {
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  };
+
+  initializeTheme();
 
   return (
     <Routes>

src/assets/images/background-dark.png

@@ -1,13 +1,17 @@
 import BgItem from '@/assets/images/field-4.png';
+import BgItemDark from '@/assets/images/field-4-dark.png';
 
 import BackgroundImageWrapper from './BackgroundImageWrapper';
+import useThemeStore from '@/stores/themeStore';
 
 const BackgroundBottom = () => {
+  const theme = useThemeStore((state) => state.theme);
+
   return (
     <BackgroundImageWrapper
       as="div"
-      className="fixed bottom-[-40px] left-1/2 h-42 w-full -translate-x-1/2 opacity-70"
-      imageUrl={BgItem}
+      className="fixed bottom-[-40px] left-1/2 z-[-10] h-42 w-full -translate-x-1/2 opacity-70"
+      imageUrl={theme === 'light' ? BgItem : BgItemDark}
     />
   );
 };

src/assets/images/field-4-dark.png

@@ -46,12 +46,12 @@ const NoticeRollingPaper = () => {
     <Link to={`/board/rolling/${data?.eventPostId}`}>
       <article
         className={twMerge(
-          'text-gray-60 flex w-full items-center gap-2.5 rounded-lg px-4 py-2',
+          'text-gray-60 flex w-full items-center gap-2.5 rounded-lg px-4 py-2 dark:text-white',
           'bg-linear-[275deg,rgba(255,255,255,0.4)_13.74%,rgba(238,238,238,0.4)_67.61%]',
-          'shadow-[0_1px_6px_rgba(218,189,74,0.8)]',
+          'shadow-[0_1px_6px_rgba(218,189,74,0.8)] dark:shadow-[0_1px_6px_rgba(255,255,255,0.8)]',
         )}
       >
-        <NoticeIcon className="h-6 w-6 shrink-0 text-gray-50" />
+        <NoticeIcon className="h-6 w-6 shrink-0 text-gray-50 dark:text-white" />
         <div ref={containerRef} className="w-full overflow-hidden whitespace-nowrap">
           <p
             ref={textRef}