diff --git a/public/images/dark-to-light.svg b/public/images/dark-to-light.svg index cb0d252..e177fb2 100644 --- a/public/images/dark-to-light.svg +++ b/public/images/dark-to-light.svg @@ -1,4 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/images/github-logo-dark.svg b/public/images/github-logo-dark.svg new file mode 100644 index 0000000..399ffab --- /dev/null +++ b/public/images/github-logo-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/github-logo.svg b/public/images/github-logo-light.svg similarity index 100% rename from public/images/github-logo.svg rename to public/images/github-logo-light.svg diff --git a/public/images/light-github-logo.svg b/public/images/light-github-logo.svg new file mode 100644 index 0000000..f15f6b1 --- /dev/null +++ b/public/images/light-github-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/light-to-dark.svg b/public/images/light-to-dark.svg index 54665ac..aedd29e 100644 --- a/public/images/light-to-dark.svg +++ b/public/images/light-to-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/images/mypage-dark.svg b/public/images/mypage-dark.svg new file mode 100644 index 0000000..9a28d94 --- /dev/null +++ b/public/images/mypage-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/mypage-light.svg b/public/images/mypage-light.svg new file mode 100644 index 0000000..6c3918a --- /dev/null +++ b/public/images/mypage-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Common/Header/Header.tsx b/src/components/Common/Header/Header.tsx index 8a98537..b5ef2a7 100644 --- a/src/components/Common/Header/Header.tsx +++ b/src/components/Common/Header/Header.tsx @@ -6,18 +6,19 @@ import { toast } from "react-toastify"; import Button from "react-bootstrap/Button"; import Overlay from "react-bootstrap/Overlay"; import { useNavigate, Link } from "react-router-dom"; - +import ThemeContext from "context/ThemeContext"; import { app } from "../../../firebaseApp"; const Header = () => { const auth = getAuth(app); const [isAuthenticated, setIsAuthenticated] = useState(!!auth?.currentUser); const [show, setShow] = useState(false); + const context = useContext(ThemeContext); const target = useRef(null); const navigate = useNavigate(); useEffect(() => { - const unsubscribe = onAuthStateChanged(auth, (user) => { + const unsubscribe = onAuthStateChanged(auth, user => { if (user) { setIsAuthenticated(true); } else { @@ -28,7 +29,6 @@ const Header = () => { return () => unsubscribe(); }, [auth]); - const onSignOut = async () => { try { await signOut(auth); @@ -49,15 +49,27 @@ const Header = () => {
- - github - - dark - - + {context.theme === "light" ? ( + <> + + github + + light + + + ) : ( + <> + + github + + dark + + + )} {({ placement: _placement, diff --git a/src/context/ThemeContext.tsx b/src/context/ThemeContext.tsx new file mode 100644 index 0000000..8f4317c --- /dev/null +++ b/src/context/ThemeContext.tsx @@ -0,0 +1,29 @@ +import React, { ReactNode, createContext, useState } from "react"; + +const ThemeContext = createContext({ + theme: "light", + toggleMode: () => {}, +}); + +interface ThemeProps { + children: ReactNode; +} + +export const ThemeContextProvider = ({ children }: ThemeProps) => { + const [theme, setTheme] = useState( + window.localStorage.getItem("theme") || "light" + ); + + const toggleMode = () => { + setTheme((prev) => (prev === "light" ? "dark" : "light")); + window.localStorage.setItem("theme", theme === "light" ? "dark" : "light"); + }; + + return ( + + {children} + + ); +}; + +export default ThemeContext; \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index e3f5fb4..9e4bbc1 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,12 +1,14 @@ import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter as Router } from "react-router-dom"; -import { AuthContextProvider } from "context/AuthContext"; + import App from "./pages/App"; import firebase from "./firebaseApp"; import "../src/styles/global.css"; import "bootstrap/dist/css/bootstrap.min.css"; import { SectionProvider } from "context/SectionContext"; +import { ThemeContextProvider } from "context/ThemeContext"; +import { AuthContextProvider } from "context/AuthContext"; const rootElement = document.getElementById("root"); @@ -17,11 +19,13 @@ if (rootElement) { root.render( - - - - - + + + + + + + , ); diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 725c174..ed07b1a 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -1,13 +1,15 @@ import { ToastContainer } from "react-toastify"; import { getAuth, onAuthStateChanged } from "firebase/auth"; -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, useContext } from "react"; import { Routes } from "./Routes"; import { app } from "../firebaseApp"; +import ThemeContext from "context/ThemeContext"; import LoadingSpinner from "../components/Common/LoadingSpinner/LoadingSpinner"; import "react-toastify/dist/ReactToastify.css"; function App() { const auth = getAuth(app); + const context = useContext(ThemeContext); const [init, setInit] = useState(false); const [isAuthenticated, setIsAuthenticated] = useState(!!auth?.currentUser); @@ -24,19 +26,21 @@ function App() { return ( <> - - {init ? : } +
+ + {init ? : } +
); } diff --git a/src/pages/HomePage/index.tsx b/src/pages/HomePage/index.tsx index 5ed7b71..a1c79ce 100644 --- a/src/pages/HomePage/index.tsx +++ b/src/pages/HomePage/index.tsx @@ -8,15 +8,16 @@ interface ButtonProps { backgroundColor: string; description: string; hover: string; + dark: string; testId: string; } function HomePage() { return ( -
+
로고 - + README-MONSTER

{ router.push(url); @@ -67,7 +70,8 @@ export function Button({ url, color, backgroundColor, description, hover, testId font-medium text-xl ${backgroundColor} ${hover} - border border-transparent rounded-lg + border-transparent rounded-lg + dark:${dark} ${color} w-[250px] h-[54px] justify-center diff --git a/src/pages/LoginPage/index.tsx b/src/pages/LoginPage/index.tsx index 3a1918a..c735350 100644 --- a/src/pages/LoginPage/index.tsx +++ b/src/pages/LoginPage/index.tsx @@ -84,10 +84,10 @@ const LoginPage = () => { return (

-

로그인

+

로그인

- 또는 + 또는

@@ -113,7 +113,7 @@ const LoginPage = () => {