[Add] Debug page

@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.2.0",
         "@testing-library/user-event": "^13.5.0",
+        "localforage": "^1.10.0",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
         "react-router-dom": "^6.3.0",
@@ -8332,6 +8333,11 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
+    },
     "node_modules/immer": {
       "version": "9.0.14",
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.14.tgz",
@@ -10991,6 +10997,14 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
@@ -11025,6 +11039,14 @@
         "node": ">=8.9.0"
       }
     },
+    "node_modules/localforage": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+      "dependencies": {
+        "lie": "3.1.1"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -22223,6 +22245,11 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
       "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ=="
     },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
+    },
     "immer": {
       "version": "9.0.14",
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.14.tgz",
@@ -24138,6 +24165,14 @@
         "type-check": "~0.4.0"
       }
     },
+    "lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
     "lilconfig": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
@@ -24163,6 +24198,14 @@
         "json5": "^2.1.2"
       }
     },
+    "localforage": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+      "requires": {
+        "lie": "3.1.1"
+      }
+    },
     "locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
+    "localforage": "^1.10.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",

@@ -6,6 +6,7 @@ import Calendar from "./pages/Calendar";
 import Home from "./pages/Home";
 import Login from "./pages/Login";
 import Settings from "./pages/Settings";
+import Debug from "./pages/Debug";
 
 export const AppStateContext = React.createContext();
 
@@ -19,6 +20,7 @@ function App() {
             <Route path="/calendar/*" element={<Calendar />} />
             <Route path="/login" element={<Login />} />
             <Route path="/settings" element={<Settings />} />
+            <Route path="/debug" element={<Debug />} />
           </Routes>
         </div>
       </AppStateContext.Provider>

+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import localforage from "localforage";
+
+const Debug = () => {
+  const [state, setState] = useState({ input: "", output: "" });
+
+  const handleChangeState = (e) => {
+    setState({
+      ...state,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = async (e) => {
+    await localforage.setItem("test", state.input);
+    const result = await localforage.getItem("test");
+    setState({ ...state, output: result });
+  };
+
+  const navigate = useNavigate();
+
+  return (
+    <div className="Debug">
+      <div>
+        <button
+          onClick={() => {
+            navigate("/home");
+          }}
+        >
+          Home
+        </button>
+      </div>
+
+      <input value={state.input} onChange={handleChangeState} name="input" />
+      <button onClick={handleSubmit}>Enter</button>
+      <div>{"result : " + state.output}</div>
+    </div>
+  );
+};
+
+export default Debug;

 import { Navigate, useNavigate } from "react-router-dom";
 
+import "../styles/Settings.css";
+
 const Settings = () => {
   const session = localStorage.getItem("session");
 
@@ -12,7 +14,14 @@ const Settings = () => {
           navigate(-1);
         }}
       >
-        {"<"}
+        {"ᐸ"}
+      </button>
+      <button
+        onClick={() => {
+          navigate("/debug");
+        }}
+      >
+        디버그
       </button>
     </div>
   ) : (

+.Settings > button {
+  height: 30px;
+  margin: 5px;
+}