Merge : 다크모드 구현

Merge : 다크모드 구현

client/src/App.js

@@ -3,16 +3,23 @@ import { Route, Routes } from "react-router-dom";
 import LaindingPage from "./components/views/LandingPage/LandingPage";
 import LoginPage from "./components/views/LoginPage/LoginPage";
 import RegisterPage from "./components/views/RegisterPage/RegisterPage";
+import { ThemeProvider } from "styled-components";
+import { dark, light } from "./styles/theme";
+import { useSelector } from "react-redux";
 
 function App() {
+  const isDark = useSelector((state) => state.darkmode.isDark);
+  const theme = isDark ? dark : light;
   return (
     <>
-      <GlobalStyles />
-      <Routes>
-        <Route path="/" element={<LaindingPage />} />
-        <Route path="/login" element={<LoginPage />} />
-        <Route path="/register" element={<RegisterPage />} />
-      </Routes>
+      <ThemeProvider theme={theme}>
+        <GlobalStyles />
+        <Routes>
+          <Route path="/" element={<LaindingPage />} />
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/register" element={<RegisterPage />} />
+        </Routes>
+      </ThemeProvider>
     </>
   );
 }

client/src/_reducers/darkmode.js

@@ -0,0 +1,17 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const darkModeSlice = createSlice({
+  name: "darkMode",
+  initialState: {
+    isDark: true,
+  },
+  reducers: {
+    toggleDarkMode: (state) => {
+      state.isDark = !state.isDark;
+    },
+  },
+});
+
+export const { toggleDarkMode } = darkModeSlice.actions;
+
+export default darkModeSlice.reducer;

client/src/_reducers/rootReducer.js

@@ -1,8 +1,10 @@
 import { combineReducers } from "@reduxjs/toolkit";
 import user from "./user";
+import darkmode from "./darkmode";
 
 const reducer = combineReducers({
   user,
+  darkmode,
 });
 
 export default reducer;

client/src/_reducers/user.js

@@ -73,6 +73,7 @@ export const userSlice = createSlice({
     });
     builder.addCase(asynsLogout.fulfilled, (state, action) => {
       state.auth = action.payload;
+      state.value = { loginSuccess: false };
       // accesstoken default삭제
       httpClientForCredentials.defaults.headers.common["Authorization"] = "";
     });

client/src/components/views/Header/Header.js

@@ -1,10 +1,12 @@
-import React from "react";
+import React, { Component } from "react";
 import styled from "styled-components";
 import SvgIcon from "@mui/material/SvgIcon";
 import NightlightIcon from "@mui/icons-material/Nightlight";
+import LightModeIcon from "@mui/icons-material/LightMode";
 import { useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import { asynsLogout } from "../../../_reducers/user";
+import { toggleDarkMode } from "../../../_reducers/darkmode";
 
 const Wapper = styled.div`
   position: fixed;
@@ -84,6 +86,7 @@ const Logo = styled.img`
   margin-top: 8px;
   width: 120px;
   height: 40px;
+  color: #fff;
 `;
 
 const RightBox = styled.div`
@@ -178,6 +181,7 @@ const Span = styled.span`
 
 function Header() {
   const isLogin = useSelector((state) => state.user.auth.isAuth);
+  const isDark = useSelector((state) => state.darkmode.isDark);
   const navigate = useNavigate();
   const dispatch = useDispatch();
   return (
@@ -192,11 +196,29 @@ function Header() {
         onClick={() => {
           navigate("/");
         }}
-        src={`${process.env.PUBLIC_URL}/img/logo.png`}
+        src={`${process.env.PUBLIC_URL}/img/${
+          isDark ? "lightlogo" : "logo"
+        }.png`}
         alt="home"
       />
       <RightBox>
-        <SvgIcon component={NightlightIcon} fontSize={"large"} />
+        {isDark ? (
+          <SvgIcon
+            onClick={() => {
+              dispatch(toggleDarkMode());
+            }}
+            component={NightlightIcon}
+            fontSize={"large"}
+          />
+        ) : (
+          <SvgIcon
+            onClick={() => {
+              dispatch(toggleDarkMode());
+            }}
+            component={LightModeIcon}
+            fontSize={"large"}
+          />
+        )}
         {isLogin ? (
           <LoginBtn
             onClick={() => {

client/src/components/views/LandingPage/LandingPage.js

@@ -11,6 +11,8 @@ const Wrapper = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  background-color: ${(props) => props.theme.bgColor};
+  color: ${(props) => props.theme.textColor};
 `;
 
 const H1 = styled.h1`

client/src/styles/theme.js

@@ -0,0 +1,11 @@
+export const dark = {
+  bgColor: "rgb(21, 25, 42)",
+  boxBgColor: "#1d1f33",
+  textColor: "white",
+};
+
+export const light = {
+  bgColor: "rgb(233, 236, 241)",
+  boxBgColor: "white",
+  textColor: "black",
+};