import "bootstrap/dist/css/bootstrap.min.css";
import "./routes/login.js";
import "./routes/home.js";
import "./App.css";
import React, { useEffect, useState } from "react";
import { Routes, Route, Link, useNavigate, Outlet } from "react-router-dom";
import { Button, Navbar, Container, Nav } from "react-bootstrap";
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import Home from "./routes/home.js";
import Login from "./routes/login.js";
function App() {
// localStorage 구현
// 이유는 저장해야하니까 데이터를 일시적으로
const navigate = useNavigate();
const dispatch = useDispatch();
const authUserRedux = useSelector((state) => state.authUserReducer);
function Logout() {
localStorage.clear();
navigate.push("home");
dispatch({ type: "LOGOUT" });
setAuthUserLocal(false);
}
const [authUserLocal, setAuthUserLocal] = useState(false);
useEffect(() => {
const localToken = localStorage.getItem("token");
if (localToken) {
setAuthUserLocal(true);
}
});
return (
<div className="app">
<Navbar bg="light" variant="light">
{/* Navbar = 어느 페이지에서나 보이는 곳! 같은 */}
<Container>
{authUserLocal ? (
<div className="navbar">
<Navbar.Brand href="/">HOME</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link
onClick={() => {
navigate("/login", { replace: true });
}}
>
Login
</Nav.Link>
<Nav.Link
onClick={Logout}
LoginOut
</Nav.Link>
</Nav>
</div>
) : null}
</Container>
</Navbar>
<Routes>
<Route path="/home" element={<Home />}></Route>
<Route path="/login" element={<Login />}></Route>
</Routes>
</div>
);
}
export default App;
이렇게 코드를 짰습니다 삼항연산자 넣을려고 <div className="navbar">를 넣엇는데....네비게이션 역활을 제대로 못하네요 ㅠㅠ 부트스트랩이용해서 적용하기 어려울까요?
