feat: 다크모드 구현

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/components/BackgroundBottom.tsx

@@ -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/components/NoticeRollingPaper.tsx

@@ -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}

src/components/PageTitle.tsx

@@ -7,7 +7,7 @@ interface PageTitleProps {
 
 const PageTitle = ({ className, children }: PageTitleProps) => {
   return (
-    <h1 className={twMerge('text-gray-60 body-b w-fit rounded-full bg-white px-6 py-4', className)}>
+    <h1 className={twMerge('text-gray-60 body-b w-fit rounded-full bg-white px-6 py-4 dark:shadow-[0_0px_10px_rgba(255,255,255,0.8)]', className)}>
       {children}
     </h1>
   );

src/layouts/Header.tsx

@@ -2,8 +2,14 @@ import { Link, useNavigate } from 'react-router';
 
 import { ArrowLeftIcon, PersonIcon } from '@/assets/icons';
 import NotificationButton from '@/components/NotificationButton';
+import FlareRoundedIcon from '@mui/icons-material/FlareRounded';
+import DarkModeOutlinedIcon from '@mui/icons-material/DarkModeOutlined';
+import useThemeStore from '@/stores/themeStore';
 
 const Header = () => {
+  const theme = useThemeStore((state) => state.theme);
+  const toggleTheme = useThemeStore((state) => state.toggleTheme);
+
   const navigate = useNavigate();
 
   return (
@@ -12,6 +18,11 @@ const Header = () => {
         <ArrowLeftIcon className="h-6 w-6 text-white" />
       </button>
       <div className="flex items-center gap-3">
+        {theme === 'light' ? (
+          <FlareRoundedIcon className="h-6 w-6 text-white" onClick={toggleTheme} />
+        ) : (
+          <DarkModeOutlinedIcon className="h-6 w-6 text-white" onClick={toggleTheme} />
+        )}
         <NotificationButton />
         <Link to="/mypage">
           <PersonIcon className="h-6 w-6 text-white" />

src/layouts/MobileLayout.tsx

@@ -3,7 +3,7 @@ import { Outlet } from 'react-router';
 const MobileLayout = () => {
   return (
     <div className="mobile-bg">
-      <div className="mobile-layout">
+      <div className="mobile-layout z-2">
         <Outlet />
       </div>
     </div>

src/pages/Home/components/GoToLetterBoard.tsx

@@ -6,7 +6,7 @@ const GoToLetterBoard = () => {
   return (
     <div className="absolute bottom-48 left-[calc(var(--vh)*33)] z-9 flex w-full">
       <div className="text-left">
-        <p className="text-gray-60 body-r mb-1 ml-2">게시판</p>
+        <p className="text-gray-60 body-r mb-1 ml-2 dark:text-white">게시판</p>
         <Link to="/board/letter">
           <img src={goToLetterBoard} alt="go to letter board" className="w-[177px]" />
         </Link>

src/pages/Home/components/GoToLetterBox.tsx

@@ -23,7 +23,7 @@ const GoToLetterBox = () => {
   return (
     <div className="absolute bottom-15 left-5 z-9 flex">
       <div className="text-left">
-        <p className="text-gray-60 body-r mb-1 ml-2">내 편지함</p>
+        <p className="text-gray-60 body-r mb-1 ml-2 dark:text-white">내 편지함</p>
         <Link to="/letter/box">
           <img
             src={arrivedCount ? goToLetterBoxNewLetters : goToLetterBox}

src/pages/Home/components/GoToRandomLetter.tsx

@@ -6,7 +6,9 @@ const GoToRandomLetter = () => {
   return (
     <>
       <div className="z-20 h-fit w-fit">
-        <p className="text-gray-60 body-r mb-1 ml-5 rotate-[-5.277deg]">고민편지 보러가기</p>
+        <p className="text-gray-60 body-r mb-1 ml-5 rotate-[-5.277deg] dark:text-white">
+          고민편지 보러가기
+        </p>
         <Link to={'/letter/random'}>
           <img src={goToRandomLetter} alt="go to random letter" />
         </Link>

src/pages/Home/components/GoToWrite.tsx

@@ -5,7 +5,9 @@ import goToWrite from '@/assets/images/postoffice-letter.png';
 const GoToWrite = () => {
   return (
     <div className="h-fit w-fit pl-[87px]">
-      <p className="text-gray-60 body-r mb-1 rotate-[-5.277deg]">속마음 나누기</p>
+      <p className="text-gray-60 body-r dark:body-b mb-1 rotate-[-5.277deg] dark:text-white">
+        속마음 나누기
+      </p>
       <Link to={'/letter/write'}>
         <img src={goToWrite} alt="go to write" />
       </Link>

src/pages/Home/components/HomeBackgroundLeft.tsx

@@ -1,12 +1,17 @@
 import homeLeftMountain from '@/assets/images/home-left-mountain.png';
+import homeLeftMountainDark from '@/assets/images/home-left-mountain-dark.png';
+
 import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
+import useThemeStore from '@/stores/themeStore';
 
 const HomeBackgroundLeft = () => {
+  const theme = useThemeStore((state) => state.theme);
+
   return (
     <BackgroundImageWrapper
       as="div"
       className="absolute bottom-0 left-0 z-[11] h-[calc(var(--vh)*25)] w-full min-w-[700px] -translate-x-1/3"
-      imageUrl={homeLeftMountain}
+      imageUrl={theme === 'light' ? homeLeftMountain : homeLeftMountainDark}
     />
   );
 };

src/pages/Home/components/HomeBackgroundRightBottom.tsx

@@ -1,12 +1,16 @@
 import homeRightMountainBottom from '@/assets/images/home-right-mountain-bottom.png';
+import homeRightMountainBottomDark from '@/assets/images/home-right-mountain-bottom-dark.png';
 import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
+import useThemeStore from '@/stores/themeStore';
 
 const HomeBackgroundRightBottom = () => {
+  const theme = useThemeStore((state) => state.theme);
+
   return (
     <BackgroundImageWrapper
       as="div"
       className="absolute bottom-0 z-[10] h-[calc(var(--vh)*20)] w-full min-w-[600px] -translate-x-1/4 overflow-hidden"
-      imageUrl={homeRightMountainBottom}
+      imageUrl={theme === 'light' ? homeRightMountainBottom : homeRightMountainBottomDark}
     />
   );
 };

src/pages/Home/components/HomeBackgroundRightTop.tsx

@@ -1,11 +1,17 @@
 import homeRightMountainTop from '@/assets/images/home-right-mountain-top.png';
+import homeRightMountainTopDark from '@/assets/images/home-right-mountain-top-dark.png';
+
 import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
+import useThemeStore from '@/stores/themeStore';
+
 const HomeBackgroundRightTop = () => {
+  const theme = useThemeStore((state) => state.theme);
+
   return (
     <BackgroundImageWrapper
       as="div"
       className="absolute bottom-0 z-8 h-[calc(var(--vh)*32)] w-full min-w-[760px] -translate-x-1/4 overflow-hidden"
-      imageUrl={homeRightMountainTop}
+      imageUrl={theme === 'light' ? homeRightMountainTop : homeRightMountainTopDark}
     />
   );
 };

src/pages/Home/components/HomeHeader.tsx

@@ -1,12 +1,23 @@
 import { Link } from 'react-router';
 
 import { PersonIcon } from '@/assets/icons';
+import FlareRoundedIcon from '@mui/icons-material/FlareRounded';
+import DarkModeOutlinedIcon from '@mui/icons-material/DarkModeOutlined';
+import useThemeStore from '@/stores/themeStore';
 import NotificationButton from '@/components/NotificationButton';
 
 const HomeHeader = () => {
+  const theme = useThemeStore((state) => state.theme);
+  const toggleTheme = useThemeStore((state) => state.toggleTheme);
+
   return (
     <header className="fixed top-0 z-40 flex h-16 w-full max-w-150 items-center justify-end p-5">
       <div className="flex items-center gap-3">
+        {theme === 'light' ? (
+          <FlareRoundedIcon className="h-6 w-6 text-white" onClick={toggleTheme} />
+        ) : (
+          <DarkModeOutlinedIcon className="h-6 w-6 text-white" onClick={toggleTheme} />
+        )}
         <NotificationButton />
         <Link to="/mypage">
           <PersonIcon className="h-6 w-6 text-white" />

src/pages/Home/components/LetterActions.tsx

@@ -34,7 +34,7 @@ const LetterActions = () => {
             <button
               key={index}
               onClick={() => setActiveModal(item.title)}
-              className="flex h-12 w-12 items-center justify-center gap-[10px] rounded-full bg-white/40 text-gray-50 shadow-[inset_0_-2px_2px_0_rgba(208,169,14,0.30),_0_0px_4px_0_rgba(199,164,29,0.30)]"
+              className="flex h-12 w-12 items-center justify-center gap-[10px] rounded-full bg-white/40 text-gray-50 shadow-[inset_0_-2px_2px_0_rgba(208,169,14,0.30),_0_0px_4px_0_rgba(199,164,29,0.30)] dark:text-white dark:shadow-[inset_0_-2px_2px_0_rgba(255,255,255,0.30),_0_0px_4px_0_rgba(180,180,180,0.30)]"
             >
               {item.icon}
             </button>

src/pages/Home/components/RandomCheer.tsx

@@ -1,10 +1,13 @@
 import { useState } from 'react';
 
 import randomCheerBird from '@/assets/images/field-theme-asset-bird.png';
+import randomCheerBirdDark from '@/assets/images/field-theme-asset-bird-dark.png';
 
 import { RANDOM_CHEER_LIST } from '../constants';
+import useThemeStore from '@/stores/themeStore';
 
 const RandomCheer = () => {
+  const theme = useThemeStore((state) => state.theme);
   const getRandomCheer = (): string => {
     const randomIndex = Math.floor(Math.random() * RANDOM_CHEER_LIST.length);
     return RANDOM_CHEER_LIST[randomIndex];
@@ -22,7 +25,7 @@ const RandomCheer = () => {
         <div className="absolute right-2 bottom-[-15px] -translate-x-1/2 transform border-x-[10px] border-t-[15px] border-x-transparent border-t-white"></div>
       </div>
       <img
-        src={randomCheerBird}
+        src={theme === 'light' ? randomCheerBird : randomCheerBirdDark}
         alt="random cheer bird"
         className="h-[26.5px] w-[21px] opacity-80"
         onClick={() => setRandomCheer(getRandomCheer())}

src/pages/Landing/index.tsx

@@ -3,14 +3,17 @@ import { Navigate, useNavigate } from 'react-router';
 import { twMerge } from 'tailwind-merge';
 
 import LandingImg from '@/assets/images/landing.png';
+import LandingImgDark from '@/assets/images/landing-dark.png';
 import useAuthStore from '@/stores/authStore';
+import useThemeStore from '@/stores/themeStore';
 
 import { STYLE_CLASS } from './constants';
 
 const Landing = () => {
   const [step, setStep] = useState(0);
   const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
   const navigate = useNavigate();
+  const theme = useThemeStore((state) => state.theme);
 
   useEffect(() => {
     if (isLoggedIn) navigate('/');
@@ -21,7 +24,7 @@ const Landing = () => {
   return (
     <main className="relative flex grow justify-center" onClick={() => setStep((prev) => prev + 1)}>
       <img
-        src={LandingImg}
+        src={theme === 'light' ? LandingImg : LandingImgDark}
         alt="서비스 소개 이미지"
         className={twMerge(
           'fixed bottom-0 h-70 w-auto max-w-none -translate-x-1/2 transition-all duration-200',

src/pages/LetterBoard/index.tsx

@@ -69,7 +69,7 @@ const LetterBoardPage = () => {
         <>
           <NoticeRollingPaper />
           <PageTitle className="mx-auto mt-4">게시판</PageTitle>
-          <p className="text-gray-60 caption-m mt-4.5 text-center">
+          <p className="text-gray-60 caption-m mt-4.5 text-center dark:text-white">
             따숨이에게 힘이 되었던 다양한 편지들을 모아두었어요
           </p>
         </>

src/pages/LetterBox/index.tsx

@@ -43,13 +43,13 @@ const LetterBoxPage = () => {
       <main className="flex grow flex-col items-center px-5 pt-20">
         <PageTitle>내 편지함</PageTitle>
         <div className="w-full max-w-94">
-          <p className="body-sb mt-16 mb-[7px] place-self-start text-gray-50">
+          <p className="body-sb mt-16 mb-[7px] place-self-start text-gray-50 dark:text-white">
             나와 연락한 사람들 {letterBox?.length}
           </p>
           <section className="letter-box-bg flex grow flex-col items-center px-4 pt-5">
             <div className="flex w-full flex-col gap-5">
               {isLoading ? (
-                <p className="body-m text-gray-60 text-center">로딩중..</p>
+                <p className="body-m text-gray-60 text-center dark:text-white">로딩중..</p>
               ) : letterBox.length > 0 ? (
                 chunkBox(
                   letterBox.map((data: LetterBoxData, index) => (

src/pages/LetterBoxDetail/components/InformationTooltip.tsx

@@ -20,7 +20,7 @@ const InformationTooltip = () => {
   return (
     <div ref={ref} className="relative flex items-center">
       <button type="button" onClick={() => setIsShow((prev) => !prev)}>
-        <InformationIcon className="text-gray-40 h-5 w-5" />
+        <InformationIcon className="text-gray-40 h-5 w-5 dark:text-white/80" />
       </button>
       <article
         className={twMerge(

src/pages/LetterBoxDetail/index.tsx

@@ -171,7 +171,7 @@ const LetterBoxDetailPage = () => {
             ? '게시판에 올릴 편지를 선택해주세요'
             : `${userInfo.zipCode}님과 주고 받은 편지`}
         </PageTitle>
-        <section className="text-gray-60 body-sb mt-18 mb-2 flex w-full justify-between">
+        <section className="text-gray-60 body-sb mt-18 mb-2 flex w-full justify-between dark:text-white">
           <p>주고 받은 편지 {mailLists.length}</p>
           <div className="flex items-center gap-0.5 underline">
             {!userInfo.isClosed && (
@@ -207,7 +207,7 @@ const LetterBoxDetailPage = () => {
         {!isShareMode && !userInfo.isClosed && !isLoading && (
           <button
             type="button"
-            className="body-sb text-gray-60 mt-auto text-left underline"
+            className="body-sb text-gray-60 mt-auto text-left underline dark:text-white"
             onClick={() => setIsOpenDisConnectModal(true)}
           >
             더 이상 편지하지 않을래요

src/pages/Login/components/Background.tsx

@@ -1,19 +1,24 @@
 import { Link } from 'react-router';
 
 import FieldImg from '@/assets/images/home-left-mountain.png';
+import FieldImgDark from '@/assets/images/home-left-mountain-dark.png';
+
 import BlurImg from '@/assets/images/landing-blur.png';
 import EnvelopeImg from '@/assets/images/postoffice-letter.png';
 import PostofficeImg from '@/assets/images/postoffice.png';
 import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
+import useThemeStore from '@/stores/themeStore';
 
 const Background = () => {
+  const theme = useThemeStore((state) => state.theme);
+
   return (
     <>
       <div className="fixed -bottom-8 z-0 flex justify-center overflow-hidden">
         <div className="relative flex h-[440px] min-w-[759.5px] items-end justify-center">
           <Link to="/landing">
             <div className="animate-login-move-up-down absolute bottom-[313px] left-1/2 z-1 -translate-x-1/2">
-              <p className="text-gray-60 body-r -rotate-[5.28deg] pr-1 text-center">
+              <p className="text-gray-60 body-r -rotate-[5.28deg] pr-1 text-center dark:text-white">
                 36.5 설명 보기
               </p>
               <img
@@ -29,7 +34,7 @@ const Background = () => {
             className="absolute bottom-[93px] left-1/2 z-1 h-[184.5px] w-full -translate-x-1/2 object-contain object-[calc(50%-78px)]"
           />
           <img
-            src={FieldImg}
+            src={theme === 'light' ? FieldImg : FieldImgDark}
             alt="언덕 이미지"
             className="z-0 h-[205px] w-full object-cover object-[calc(50%-26px)]"
           />

src/pages/Login/index.tsx

@@ -24,9 +24,13 @@ const LoginPage = () => {
       <main className="mt-10 flex grow flex-col items-center justify-between">
         <section className="relative mt-10 text-center">
           <StampIcon className="absolute -top-2 -right-0.5 -translate-y-1/2 translate-x-1/2" />
-          <h2 className="text-xl leading-[24px] font-medium tracking-[-1px]">마음이 맞닿는 온도</h2>
-          <h1 className="font-malang my-2 text-5xl leading-[57.6px] text-[#F15847]">36.5</h1>
-          <p className="body-sb text-gray-60">
+          <h2 className="text-xl leading-[24px] font-medium tracking-[-1px] dark:text-white">
+            마음이 맞닿는 온도
+          </h2>
+          <h1 className="font-malang dark:text-primary-3 my-2 text-5xl leading-[57.6px] text-[#F15847]">
+            36.5
+          </h1>
+          <p className="body-sb text-gray-60 dark:text-white">
             모르는 사람과 편지를 주고 받으며
             <br />
             마음의 위안을 얻어보세요.