실전 프로젝트 →

실전 프로젝트 →

// src/components/Navigation.js import React from "react"; import styled from "styled-components"; import { useHistory } from "react-router-dom"; import RequireLogin from "../components/RequireLogin"; const Navigation = (props) => { const history = useHistory(); const token = localStorage.getItem("token"); const [diaryModal, setDiaryModal] = React.useState(false); const diary = () => { if (!token) { setDiaryModal(true); } else { history.push("/diary"); } }; return ( <> { history.push("/"); }} > 홈 { history.push("/asmr"); }} > ASMR 다이어리 {diaryModal && ( )} { history.push("/mypage"); }} > 마이 ); }; const Icon = styled.div` width: 30px; height: 30px; border: 1px dotted black; margin: auto; `; export default Navigation;

// src/components/RequireLogin.js import { fontWeight, margin, textAlign } from "@mui/system"; import React from "react"; import Modal from "react-modal"; import { history } from "../redux/configureStore"; const RequireLogin = (props) => { const [modal, setModal] = React.useState(props.modal ? true : false); // 모달창 const modalOff = () => { setModal(false); props.setDiaryModal(false); }; return ( <> 해당 서비스는 로그인 후 이용 가능합니다 로그인하러 가시겠습니까? history.push("/login")} > 예 아니오 ); }; export default RequireLogin;

from http://eundol1113.tistory.com/332 by ccl(A) rewrite - 2021-12-31 11:00:50