Feat: 다른 페이지로 이동해도 테마 변경 유지되게 추가

src/App.tsx

@@ -7,20 +7,41 @@ import Board from './pages/Board';
 import Post from './pages/Post';
 import MyPage from './pages/MyPage';
 import Sidebar from './components/layout/sideBar';
-import { AppContainer, ContentWrapper } from './components/layout/style'; 
+import { AppContainer, ContentWrapper } from './components/layout/style';
+import { useEffect, useState } from 'react';
 
 function App() {
+  const [theme, setTheme] = useState(() => {
+    return localStorage.getItem('theme') || 'dark'; // 기본값은 'dark'
+  });
+
+  useEffect(() => {
+    document.body.className = theme; // body의 className 변경하여 테마 적용
+  }, [theme]);
+
+  const handleThemeChange = (newTheme: string) => {
+    setTheme(newTheme);
+    if (newTheme === 'light') {
+      localStorage.setItem('theme', 'light'); // light 모드 저장
+    } else {
+      localStorage.removeItem('theme'); // dark 모드는 저장 X (기본값)
+    }
+  };
+
   return (
     <Router>
       <AppContainer>
-        <Sidebar /> 
+        <Sidebar />
         <ContentWrapper>
           <Routes>
             <Route path="/sign-up" element={<SignUp />} />
             <Route path="/sign-in" element={<SignIn />} />
             <Route path="/" element={<Board />} />
             <Route path="/post" element={<Post />} />
-            <Route path="/my-page" element={<MyPage />} />
+            <Route
+              path="/my-page"
+              element={<MyPage theme={theme} setTheme={handleThemeChange} />}
+            />
           </Routes>
         </ContentWrapper>
       </AppContainer>

src/components/myPage/ThemeSelection/index.tsx

@@ -1,51 +1,37 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import {
   RadioOption,
   ThemeSelectionForm,
   ThemeSelectionSection,
   UncheckedCircle,
 } from './style';
 import { BsFillCheckCircleFill } from 'react-icons/bs';
+import { ThemeSelectionProps } from '../../../models/MyPage';
 
-export const ThemeSelection: React.FC = () => {
-  const [selectedTheme, setSelectedTheme] = useState(() => {
-    return localStorage.getItem('theme') || 'dark';
-  });
-
-  const handleThemeChange = (theme: string) => {
-    setSelectedTheme(theme);
-
-    if (theme === 'light') {
-      localStorage.setItem('theme', theme);
-    } else {
-      localStorage.removeItem('theme');
-    }
-  };
-
-  useEffect(() => {
-    document.body.className = selectedTheme;
-  }, [selectedTheme]);
-
+export const ThemeSelection: React.FC<ThemeSelectionProps> = ({
+  theme,
+  setTheme,
+}) => {
   return (
     <ThemeSelectionSection aria-labelledby="theme-selection">
       <h2 id="theme-selection">테마 선택</h2>
       <ThemeSelectionForm action="">
         <RadioOption
-          isChecked={selectedTheme === 'dark'}
-          onClick={() => handleThemeChange('dark')}
+          isChecked={theme === 'dark'}
+          onClick={() => setTheme('dark')}
         >
-          {selectedTheme === 'dark' ? (
+          {theme === 'dark' ? (
             <BsFillCheckCircleFill size="1.5rem" />
           ) : (
             <UncheckedCircle />
           )}
           <label>Dark Mode</label>
         </RadioOption>
         <RadioOption
-          isChecked={selectedTheme === 'light'}
-          onClick={() => handleThemeChange('light')}
+          isChecked={theme === 'light'}
+          onClick={() => setTheme('light')}
         >
-          {selectedTheme === 'light' ? (
+          {theme === 'light' ? (
             <BsFillCheckCircleFill size="1.5rem" />
           ) : (
             <UncheckedCircle />

src/models/MyPage.ts

@@ -1,3 +1,8 @@
+export interface MyPageProps {
+  theme: string;
+  setTheme: (theme: string) => void;
+}
+
 export interface ProfileImageProps {
   profileImage: string;
   patchUserProfileImage: (file: File) => void;
@@ -13,3 +18,8 @@ export interface ProfileDetailsProps {
   handleChange: () => void;
   detail: string;
 }
+
+export interface ThemeSelectionProps {
+  theme: string;
+  setTheme: (theme: string) => void;
+}

src/pages/MyPage/index.tsx

@@ -12,8 +12,9 @@ import { useUpdateProfile } from '../../hooks/Auth/useUpdateProfile';
 import { ProfileImg } from '../../components/myPage/ProfileImage';
 import { ProfileDetails } from '../../components/myPage/ProfileDetails';
 import { ThemeSelection } from '../../components/myPage/ThemeSelection';
+import { MyPageProps } from '../../models/MyPage';
 
-const MyPage: React.FC = () => {
+const MyPage: React.FC<MyPageProps> = ({ theme, setTheme }) => {
   const { data, isLoading, error, refetch } = useUserProfile();
   const { patchUserNickName, patchUserLoginId, patchUserProfileImage } =
     useUpdateProfile();
@@ -96,7 +97,7 @@ const MyPage: React.FC = () => {
           </ProfileInfo>
         </UserInfoSection>
 
-        <ThemeSelection />
+        <ThemeSelection theme={theme} setTheme={setTheme} />
       </MyPageContent>
     </MyPageContainer>
   );