다크모드 리덕스 적용

riroan/src/App.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { UseDispatch, useDispatch } from 'react-redux'
 import A from './components/A'
 import Assist from './components/Assist'
 import Div from './components/Div'
@@ -12,11 +13,20 @@ import Refer from './components/Refer'
 import Ul from './components/Ul'
 import './App.css'
 import Link from './components/Link'
+import { darkmodeActions } from './app/darkmodeSlice';
 
 export default function App() {
 	const [visible, setVisible] = useState(true)
+	const dispatch = useDispatch()
 	return (
 		<div className="DefaultContainer">
+			<button
+				onClick={() => {
+					dispatch(darkmodeActions.toggle());
+				}}
+			>
+				Dark Mode
+			</button>
 			<Div>
 				<H2>
 					김명기<Assist> riroan</Assist>

riroan/src/app/darkmodeSlice.js

@@ -0,0 +1,19 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+const darkmodeSlice = createSlice({
+	name: 'darkmode',
+	initialState: {
+		darkmode: '',
+	},
+	reducers: {
+		toggle(state) {
+			if (state.darkmode === '') {
+				state.darkmode = 'darkmode'
+			} else {
+				state.darkmode = ''
+			}
+		},
+	},
+})
+export const darkmodeActions = darkmodeSlice.actions
+export default darkmodeSlice

riroan/src/app/store.js

@@ -0,0 +1,6 @@
+import { configureStore } from '@reduxjs/toolkit'
+import darkmodeSlice from './darkmodeSlice'
+
+const store = configureStore({ reducer: { darkmode: darkmodeSlice.reducer } })
+
+export default store

riroan/src/index.js

@@ -3,6 +3,12 @@ import ReactDOM from 'react-dom/client'
 import App from './App'
 import './reset.css'
 import './default.css'
+import { Provider } from 'react-redux'
+import store from './app/store'
 
 const root = ReactDOM.createRoot(document.getElementById('root'))
-root.render(<App />)
+root.render(
+	<Provider store={store}>
+		<App />
+	</Provider>
+)