Skip to content

Commit 01416c5

Browse files
heejin-kheejin-k
committed
redux-toolkit-login-logout
1 parent 883235a commit 01416c5

26 files changed

+859
-171
lines changed

Diff for: ‎package-lock.json

+327
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+5
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,17 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@reduxjs/toolkit": "^1.9.2",
67
"@testing-library/jest-dom": "^5.16.5",
78
"@testing-library/react": "^13.4.0",
89
"@testing-library/user-event": "^13.5.0",
10+
"axios": "^1.2.6",
911
"react": "^18.2.0",
1012
"react-dom": "^18.2.0",
13+
"react-redux": "^8.0.5",
14+
"react-router-dom": "^6.8.0",
1115
"react-scripts": "5.0.1",
16+
"redux": "^4.2.1",
1217
"web-vitals": "^2.1.4"
1318
},
1419
"scripts": {

Diff for: ‎public/favicon.ico

-3.78 KB
Binary file not shown.

Diff for: ‎public/index.html

+1-33
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,10 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
14-
manifest.json provides metadata used when your web app is installed on a
15-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16-
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
19-
Notice the use of %PUBLIC_URL% in the tags above.
20-
It will be replaced with the URL of the `public` folder during the build.
21-
Only files inside the `public` folder can be referenced from the HTML.
22-
23-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24-
work correctly both with client-side routing and a non-root public URL.
25-
Learn how to configure a non-root public URL by running `npm run build`.
26-
-->
275
<title>React App</title>
286
</head>
7+
298
<body>
30-
<noscript>You need to enable JavaScript to run this app.</noscript>
319
<div id="root"></div>
32-
<!--
33-
This HTML file is a template.
34-
If you open it directly in the browser, you will see an empty page.
35-
36-
You can add webfonts, meta tags, or analytics to this file.
37-
The build step will place the bundled scripts into the <body> tag.
38-
39-
To begin the development, run `npm start` or `yarn start`.
40-
To create a production bundle, use `npm run build` or `yarn build`.
41-
-->
4210
</body>
4311
</html>

Diff for: ‎public/logo192.png

-5.22 KB
Binary file not shown.

Diff for: ‎public/logo512.png

-9.44 KB
Binary file not shown.

Diff for: ‎public/manifest.json

-25
This file was deleted.

Diff for: ‎public/robots.txt

-3
This file was deleted.

Diff for: ‎src/App copy.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import {
2+
BrowserRouter,
3+
Navigate,
4+
Route,
5+
Routes,
6+
} from "react-router-dom";
7+
import Home from "./pages/Home";
8+
import Login from "./pages/Login";
9+
import Logout from "./pages/Logout";
10+
import UserInfo from "./pages/UserInfo";
11+
import NotFound from "./pages/NotFound";
12+
import { useSelector } from 'react-redux';
13+
import { selectUserToken } from "./store/userSlice";
14+
import "./style.css";
15+
16+
function Main() {
17+
const token = useSelector(selectUserToken)
18+
19+
return (
20+
<BrowserRouter>
21+
<Routes>
22+
<Route path="/" element={<Home />}></Route>
23+
<Route
24+
path="/login"
25+
element={token ? <Navigate to="/" /> : <Login />}
26+
></Route>
27+
<Route
28+
path="/logout"
29+
element={token ? <Logout /> : <Navigate to="/" />}
30+
></Route>
31+
<Route
32+
path="/user"
33+
element={token ? <UserInfo /> : <Navigate to="/login" />}
34+
></Route>
35+
<Route path="*" element={<NotFound />}></Route>
36+
</Routes>
37+
</BrowserRouter>
38+
);
39+
}
40+
41+
export default function App() {
42+
return (
43+
<Main />
44+
);
45+
}

Diff for: ‎src/App.css

-38
This file was deleted.

Diff for: ‎src/App.js

+35-20
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,40 @@
1-
import logo from './logo.svg';
2-
import './App.css';
1+
import {BrowserRouter,Navigate,Route,Routes,} from "react-router-dom";
2+
import Home from "./pages/Home";
3+
import Login from "./pages/Login";
4+
import Logout from "./pages/Logout";
5+
import UserInfo from "./pages/UserInfo";
6+
import NotFound from "./pages/NotFound";
7+
import { useSelector } from 'react-redux';
8+
import { selectUserToken } from "./store/userSlice";
9+
import "./style.css";
10+
11+
function Main() {
12+
const token = useSelector(selectUserToken)
313

4-
function App() {
514
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
21-
</div>
15+
<BrowserRouter>
16+
<Routes>
17+
<Route path="/" element={<Home />}></Route>
18+
<Route
19+
path="/login"
20+
element={token ? <Navigate to="/" /> : <Login />}
21+
></Route>
22+
<Route
23+
path="/logout"
24+
element={token ? <Logout /> : <Navigate to="/" />}
25+
></Route>
26+
<Route
27+
path="/user"
28+
element={token ? <UserInfo /> : <Navigate to="/login" />}
29+
></Route>
30+
<Route path="*" element={<NotFound />}></Route>
31+
</Routes>
32+
</BrowserRouter>
2233
);
2334
}
2435

25-
export default App;
36+
export default function App() {
37+
return (
38+
<Main />
39+
);
40+
}

Diff for: ‎src/App.test.js

-8
This file was deleted.

Diff for: ‎src/index copy.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom/client";
3+
import { Provider } from "react-redux";
4+
import {store} from './store/store'
5+
import App from "./App";
6+
7+
const root = ReactDOM.createRoot(document.getElementById("root"));
8+
root.render(
9+
<Provider store={store}>
10+
<App />
11+
</Provider>
12+
);
13+

Diff for: ‎src/index.css

-13
This file was deleted.

Diff for: ‎src/index.js

+8-12
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom/client';
3-
import './index.css';
4-
import App from './App';
5-
import reportWebVitals from './reportWebVitals';
1+
import React from "react";
2+
import ReactDOM from "react-dom/client";
3+
import { Provider } from "react-redux";
4+
import {store} from './store/store'
5+
import App from "./App";
66

7-
const root = ReactDOM.createRoot(document.getElementById('root'));
7+
const root = ReactDOM.createRoot(document.getElementById("root"));
88
root.render(
9-
<React.StrictMode>
9+
<Provider store={store}>
1010
<App />
11-
</React.StrictMode>
11+
</Provider>
1212
);
1313

14-
// If you want to start measuring performance in your app, pass a function
15-
// to log results (for example: reportWebVitals(console.log))
16-
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17-
reportWebVitals();

Diff for: ‎src/logo.svg

-1
This file was deleted.

Diff for: ‎src/pages/Home.jsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from "react";
2+
import { Link } from "react-router-dom";
3+
import { useSelector } from 'react-redux';
4+
import { selectUser,selectUserToken } from "../store/userSlice";
5+
6+
function Home() {
7+
const user = useSelector(selectUser).user
8+
console.log('user',user)
9+
const token = useSelector(selectUserToken)
10+
11+
return (
12+
<main className="wrapper">
13+
<div className="container">
14+
{token ? (
15+
<>
16+
<h1 className="title">환영합니다! {user.username}님</h1>
17+
<Link to="/user" className="link-login">
18+
프로필 보기
19+
</Link>
20+
</>
21+
) : (
22+
<>
23+
<h2 className="title">반갑습니다! 로그인 해주세요</h2>
24+
<Link to="/login" className="link-login">
25+
로그인 하기!
26+
</Link>
27+
</>
28+
)}
29+
</div>
30+
</main>
31+
);
32+
}
33+
34+
export default Home;

0 commit comments

Comments
 (0)