HyeonJun Jeon

[Add] Debug page

...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
11 "@testing-library/jest-dom": "^5.16.4", 11 "@testing-library/jest-dom": "^5.16.4",
12 "@testing-library/react": "^13.2.0", 12 "@testing-library/react": "^13.2.0",
13 "@testing-library/user-event": "^13.5.0", 13 "@testing-library/user-event": "^13.5.0",
14 + "localforage": "^1.10.0",
14 "react": "^18.1.0", 15 "react": "^18.1.0",
15 "react-dom": "^18.1.0", 16 "react-dom": "^18.1.0",
16 "react-router-dom": "^6.3.0", 17 "react-router-dom": "^6.3.0",
...@@ -8332,6 +8333,11 @@ ...@@ -8332,6 +8333,11 @@
8332 "node": ">= 4" 8333 "node": ">= 4"
8333 } 8334 }
8334 }, 8335 },
8336 + "node_modules/immediate": {
8337 + "version": "3.0.6",
8338 + "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
8339 + "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
8340 + },
8335 "node_modules/immer": { 8341 "node_modules/immer": {
8336 "version": "9.0.14", 8342 "version": "9.0.14",
8337 "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.14.tgz", 8343 "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.14.tgz",
...@@ -10991,6 +10997,14 @@ ...@@ -10991,6 +10997,14 @@
10991 "node": ">= 0.8.0" 10997 "node": ">= 0.8.0"
10992 } 10998 }
10993 }, 10999 },
11000 + "node_modules/lie": {
11001 + "version": "3.1.1",
11002 + "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
11003 + "integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
11004 + "dependencies": {
11005 + "immediate": "~3.0.5"
11006 + }
11007 + },
10994 "node_modules/lilconfig": { 11008 "node_modules/lilconfig": {
10995 "version": "2.0.5", 11009 "version": "2.0.5",
10996 "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz", 11010 "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
...@@ -11025,6 +11039,14 @@ ...@@ -11025,6 +11039,14 @@
11025 "node": ">=8.9.0" 11039 "node": ">=8.9.0"
11026 } 11040 }
11027 }, 11041 },
11042 + "node_modules/localforage": {
11043 + "version": "1.10.0",
11044 + "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
11045 + "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
11046 + "dependencies": {
11047 + "lie": "3.1.1"
11048 + }
11049 + },
11028 "node_modules/locate-path": { 11050 "node_modules/locate-path": {
11029 "version": "6.0.0", 11051 "version": "6.0.0",
11030 "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", 11052 "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
...@@ -22223,6 +22245,11 @@ ...@@ -22223,6 +22245,11 @@
22223 "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz", 22245 "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
22224 "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==" 22246 "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ=="
22225 }, 22247 },
22248 + "immediate": {
22249 + "version": "3.0.6",
22250 + "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
22251 + "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
22252 + },
22226 "immer": { 22253 "immer": {
22227 "version": "9.0.14", 22254 "version": "9.0.14",
22228 "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.14.tgz", 22255 "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.14.tgz",
...@@ -24138,6 +24165,14 @@ ...@@ -24138,6 +24165,14 @@
24138 "type-check": "~0.4.0" 24165 "type-check": "~0.4.0"
24139 } 24166 }
24140 }, 24167 },
24168 + "lie": {
24169 + "version": "3.1.1",
24170 + "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
24171 + "integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
24172 + "requires": {
24173 + "immediate": "~3.0.5"
24174 + }
24175 + },
24141 "lilconfig": { 24176 "lilconfig": {
24142 "version": "2.0.5", 24177 "version": "2.0.5",
24143 "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz", 24178 "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
...@@ -24163,6 +24198,14 @@ ...@@ -24163,6 +24198,14 @@
24163 "json5": "^2.1.2" 24198 "json5": "^2.1.2"
24164 } 24199 }
24165 }, 24200 },
24201 + "localforage": {
24202 + "version": "1.10.0",
24203 + "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
24204 + "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
24205 + "requires": {
24206 + "lie": "3.1.1"
24207 + }
24208 + },
24166 "locate-path": { 24209 "locate-path": {
24167 "version": "6.0.0", 24210 "version": "6.0.0",
24168 "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", 24211 "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
6 "@testing-library/jest-dom": "^5.16.4", 6 "@testing-library/jest-dom": "^5.16.4",
7 "@testing-library/react": "^13.2.0", 7 "@testing-library/react": "^13.2.0",
8 "@testing-library/user-event": "^13.5.0", 8 "@testing-library/user-event": "^13.5.0",
9 + "localforage": "^1.10.0",
9 "react": "^18.1.0", 10 "react": "^18.1.0",
10 "react-dom": "^18.1.0", 11 "react-dom": "^18.1.0",
11 "react-router-dom": "^6.3.0", 12 "react-router-dom": "^6.3.0",
......
...@@ -6,6 +6,7 @@ import Calendar from "./pages/Calendar"; ...@@ -6,6 +6,7 @@ import Calendar from "./pages/Calendar";
6 import Home from "./pages/Home"; 6 import Home from "./pages/Home";
7 import Login from "./pages/Login"; 7 import Login from "./pages/Login";
8 import Settings from "./pages/Settings"; 8 import Settings from "./pages/Settings";
9 +import Debug from "./pages/Debug";
9 10
10 export const AppStateContext = React.createContext(); 11 export const AppStateContext = React.createContext();
11 12
...@@ -19,6 +20,7 @@ function App() { ...@@ -19,6 +20,7 @@ function App() {
19 <Route path="/calendar/*" element={<Calendar />} /> 20 <Route path="/calendar/*" element={<Calendar />} />
20 <Route path="/login" element={<Login />} /> 21 <Route path="/login" element={<Login />} />
21 <Route path="/settings" element={<Settings />} /> 22 <Route path="/settings" element={<Settings />} />
23 + <Route path="/debug" element={<Debug />} />
22 </Routes> 24 </Routes>
23 </div> 25 </div>
24 </AppStateContext.Provider> 26 </AppStateContext.Provider>
......
1 +import { useState } from "react";
2 +import { useNavigate } from "react-router-dom";
3 +import localforage from "localforage";
4 +
5 +const Debug = () => {
6 + const [state, setState] = useState({ input: "", output: "" });
7 +
8 + const handleChangeState = (e) => {
9 + setState({
10 + ...state,
11 + [e.target.name]: e.target.value,
12 + });
13 + };
14 +
15 + const handleSubmit = async (e) => {
16 + await localforage.setItem("test", state.input);
17 + const result = await localforage.getItem("test");
18 + setState({ ...state, output: result });
19 + };
20 +
21 + const navigate = useNavigate();
22 +
23 + return (
24 + <div className="Debug">
25 + <div>
26 + <button
27 + onClick={() => {
28 + navigate("/home");
29 + }}
30 + >
31 + Home
32 + </button>
33 + </div>
34 +
35 + <input value={state.input} onChange={handleChangeState} name="input" />
36 + <button onClick={handleSubmit}>Enter</button>
37 + <div>{"result : " + state.output}</div>
38 + </div>
39 + );
40 +};
41 +
42 +export default Debug;
1 import { Navigate, useNavigate } from "react-router-dom"; 1 import { Navigate, useNavigate } from "react-router-dom";
2 2
3 +import "../styles/Settings.css";
4 +
3 const Settings = () => { 5 const Settings = () => {
4 const session = localStorage.getItem("session"); 6 const session = localStorage.getItem("session");
5 7
...@@ -12,7 +14,14 @@ const Settings = () => { ...@@ -12,7 +14,14 @@ const Settings = () => {
12 navigate(-1); 14 navigate(-1);
13 }} 15 }}
14 > 16 >
15 - {"<"} 17 + {"ᐸ"}
18 + </button>
19 + <button
20 + onClick={() => {
21 + navigate("/debug");
22 + }}
23 + >
24 + 디버그
16 </button> 25 </button>
17 </div> 26 </div>
18 ) : ( 27 ) : (
......
1 +.Settings > button {
2 + height: 30px;
3 + margin: 5px;
4 +}