From 3c2474807a2eb9201ba2f7b45d2f352c87141099 Mon Sep 17 00:00:00 2001
From: riroan <riroan@naver.com>
Date: Sun, 7 Apr 2024 22:11:31 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8B=A4=ED=81=AC=EB=AA=A8=EB=93=9C=20?=
 =?UTF-8?q?=EB=A6=AC=EB=8D=95=EC=8A=A4=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 riroan/src/App.js               | 10 ++++++++++
 riroan/src/app/darkmodeSlice.js | 19 +++++++++++++++++++
 riroan/src/app/store.js         |  6 ++++++
 riroan/src/index.js             |  8 +++++++-
 4 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 riroan/src/app/darkmodeSlice.js
 create mode 100644 riroan/src/app/store.js

diff --git a/riroan/src/App.js b/riroan/src/App.js
index 738da50..f1b5591 100644
--- a/riroan/src/App.js
+++ b/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>
diff --git a/riroan/src/app/darkmodeSlice.js b/riroan/src/app/darkmodeSlice.js
new file mode 100644
index 0000000..8ba4d93
--- /dev/null
+++ b/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
diff --git a/riroan/src/app/store.js b/riroan/src/app/store.js
new file mode 100644
index 0000000..29bc706
--- /dev/null
+++ b/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
diff --git a/riroan/src/index.js b/riroan/src/index.js
index f051051..b052f05 100644
--- a/riroan/src/index.js
+++ b/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>
+)