[Feat] :: Router authentication 완료, react-router-dom v6 변경 #35

package.json

@@ -13,8 +13,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-reveal": "^1.2.2",
-    "react-router": "^6.0.2",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "4.0.3",
     "react-spinners": "^0.11.0",
     "recoil": "^0.5.2",

src/Components/Common/Card.jsx

@@ -64,11 +64,12 @@ Card.propTypes = {
   address: PropTypes.string.isRequired,
   step: PropTypes.number,
   resId: PropTypes.number.isRequired,
-  pic: PropTypes.string.isRequired,
+  pic: PropTypes.string,
 };
 
 Card.defaultProps = {
   step: 0,
+  pic: '사진이 없어여',
 };
 
 export default Card;

src/Components/Common/Header2.jsx

@@ -7,9 +7,8 @@ import { NavLink } from 'react-router-dom';
 const Container = styled.div`
   box-sizing: border-box;
   height: 100px;
-  .selected span {
-    display: inline-block;
-    box-sizing: border-box;
+
+  .active span {
     font-weight: 700;
   }
 `;
@@ -33,6 +32,12 @@ const StyledNavLink = styled(NavLink)`
     color: black;
     text-decoration: none;
   }
+
+  &.active {
+    display: inline-block;
+    box-sizing: border-box;
+    font-weight: 700;
+  }
 `;
 
 const Header2 = () => {
@@ -67,10 +72,10 @@ const Header2 = () => {
 
   return (
     <Container>
-      <StyledNavLink to="/district1" activeClassName="selected">
+      <StyledNavLink to="/district1">
         <Place>서북구</Place>
       </StyledNavLink>
-      <StyledNavLink exact to="/district2" activeClassName="selected">
+      <StyledNavLink to="/district2">
         <Place>동남구</Place>
       </StyledNavLink>
     </Container>

src/Components/Common/Sidebar2.jsx

@@ -31,7 +31,7 @@ const Container = styled.div`
   div svg {
     padding: 20px;
   }
-  .selected svg {
+  .active svg {
     stroke: ${Colors.main};
   }
   // 전체 svg
@@ -58,14 +58,14 @@ const Sidebar2 = () => {
     <Container>
       <Logo width="75" height="60" />
       <div>
-        <StyledNavLink to="/search" activeClassName="selected">
+        <StyledNavLink to="/search">
           <Search stroke="black" width="45" height="45" />
         </StyledNavLink>
-        <StyledNavLink to="/reservation" activeClassName="selected">
+        <StyledNavLink to="/reservation">
           <MyReservation stroke="black" />
         </StyledNavLink>
       </div>
-      <StyledNavLink to="/mypage" activeClassName="selected">
+      <StyledNavLink to="/mypage">
         <Profile stroke="black" />
       </StyledNavLink>
     </Container>

src/Components/Detail/Content.jsx

@@ -26,7 +26,7 @@ const BtnDiv = styled.div`
 
 const Container = styled.div``;
 
-const Content = ({ restaurantName, waiting, address, step, match }) => {
+const Content = ({ restaurantName, waiting, address, step, resId }) => {
   const [visible, setVisible] = useState(false);
   const [ResId, setResId] = useRecoilState(restaurantState);
   const [FriendsList, setFriendsList] = useRecoilState(friendsState);
@@ -36,7 +36,7 @@ const Content = ({ restaurantName, waiting, address, step, match }) => {
   // 모달 열기
   const toggleModal = () => {
     setVisible(true);
-    setResId(match.params.resId);
+    setResId(resId);
   };
 
   // 모달 닫기
@@ -106,7 +106,7 @@ Content.propTypes = {
   address: PropTypes.string,
   waiting: PropTypes.number,
   step: PropTypes.number,
-  match: PropTypes.any.isRequired,
+  resId: PropTypes.any.isRequired,
 };
 
 Content.defaultProps = {

src/Components/Detail/Reservation/Step2.jsx

@@ -5,7 +5,7 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import Button from '../../Common/Button';
 import Colors from '../../../Assets/Colors/Colors';
 import {
@@ -83,7 +83,7 @@ const Person = styled.span`
 `;
 
 const Step2 = ({ restaurantName, increasePageFunc, decreasePageFunc }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const [Today, setToday] = useState('');
   // 현재 날짜 가져오는 함수
   const createDate = () => {
@@ -121,7 +121,7 @@ const Step2 = ({ restaurantName, increasePageFunc, decreasePageFunc }) => {
       if (res.data.success === false) {
         alert('식당에서 요구하는 백신 접종 차수에 미달합니다.');
         alert('예약을 종료하고 홈 화면으로 돌아갑니다.');
-        history.push('/district1');
+        navigate('/district1');
       }
     } catch (error) {
       return error;

src/Components/Join/Contents.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable consistent-return */
 /* eslint-disable no-alert */
 import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { userJoin } from '../../api/User';
 import Button from '../Common/Button';
@@ -36,7 +36,7 @@ const Title = styled.p`
 
 const Contents = () => {
   // useHistory 사용
-  const history = useHistory();
+  const navigate = useNavigate();
   // input 관련 로직
   const [inputs, setinputs] = useState({});
 
@@ -71,7 +71,7 @@ const Contents = () => {
     // 비밀번호가 동일한 경우에만 회원가입
     if (inputs.password === inputs.password2) {
       fetch();
-      history.push('/');
+      navigate('/');
     } else {
       alert('비밀번호가 동일하지 않습니다. 비밀번호를 동일하게 맞춰주세요.');
     }

src/Components/Login/Contents.jsx

@@ -3,7 +3,7 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable consistent-return */
 import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { useRecoilState } from 'recoil';
 import { ReactComponent as Logo } from '../../Assets/Icons/Logo.svg';
@@ -57,7 +57,7 @@ const JoinInfo = styled.p`
 `;
 
 const Contents = () => {
-  const history = useHistory();
+  const navigate = useNavigate();
   // 로그인 정보 저장
   const [User, setUser] = useRecoilState(UserData);
   // 유저 정보 저장
@@ -87,7 +87,7 @@ const Contents = () => {
         setUser(userData.data);
         const info = await userInfoAPI(userData.data.username);
         setUserProfile(info.data);
-        history.push('/select');
+        navigate('/select');
         // false 인 경우 로그인 실패하고 알림 출력
       } else {
         alert('로그인에 실패했습니다. 다시 로그인해주세요.');

src/Components/MyPage/PageContent.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import Tag from '../Common/Tag';
@@ -47,9 +47,9 @@ const Container = styled.div`
 // 각각 하양송이, 아이디값, 핸드폰번호값, 날짜 받아오기 => 태그는...
 // eslint-disable-next-line react/prop-types
 const Contents = ({ userName, userID, userNumber, userStep, userDate }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const routeChange = () => {
-    history.push('./modifypage');
+    navigate('./modifypage');
   };
   return (
     <div>

src/Components/MyPage/PageModify.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-alert */
 import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import Button from '../Common/Button';
@@ -53,7 +53,7 @@ const Container = styled.div`
 
 // eslint-disable-next-line react/prop-types
 const Contents = ({ userName, userID, userNumber, userStep, userDate }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const [inputs, setinputs] = useState({});
 
   const handleInputs = e => {
@@ -75,7 +75,7 @@ const Contents = ({ userName, userID, userNumber, userStep, userDate }) => {
       // api 통신
       const modifyData = await userModify(values);
       if (modifyData) {
-        history.push('/mypage');
+        navigate('/mypage');
       } else {
         alert('수정 실패');
       }

src/Components/MyReservation/Contents.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import Colors from '../../Assets/Colors/Colors';
 
 const Wrapper = styled.div`
@@ -66,7 +66,7 @@ const CancelBtn = styled.button`
 `;
 
 const Contents = ({ remainTime, order, resName, peopleNum }) => {
-  const history = useHistory();
+  const history = useNavigate();
   // 줄서기 취소이벤트
   const cancel = () => {
     if (window.confirm('정말 줄서기를 취소하시나요?')) {

src/Components/Search/SearchContent.jsx

@@ -76,6 +76,7 @@ const SearchContent = ({ listData, handleInput }) => {
           <ResultBox2>
             {listData.map(item => (
               <Card
+                key={item.id}
                 title={item.name}
                 address={item.branch_name}
                 step={item.vaccine_condition}

src/Components/Select/District.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { ReactComponent as People } from '../../Assets/Icons/People.svg';
 
 const Container = styled.div`
@@ -34,9 +34,9 @@ const Percent = styled.p`
 `;
 
 const District = ({ districtName, percent, Url }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const chooseDistrict = () => {
-    history.push(`${Url}`);
+    navigate(`${Url}`);
   };
   return (
     <Container onClick={chooseDistrict}>

src/Layouts/Detail/Detail.jsx

@@ -15,15 +15,14 @@ const Container = styled.div`
   overflow-y: auto;
 `;
 
-const Detail = ({ match }) => {
+const Detail = ({ resId }) => {
   const [Restaurant, setRestaurant] = useState([]);
   const [ResId, setResId] = useRecoilState(restaurantState);
-  const { resId } = match.params;
   const fetch = async () => {
     try {
       const restaurant = await restaurantDetail(resId);
       setRestaurant(restaurant.data);
-      setResId(match.params.resId);
+      setResId(resId);
     } catch (error) {
       return error;
     }
@@ -44,15 +43,15 @@ const Detail = ({ match }) => {
         <Content
           restaurantName={Restaurant.name}
           menu={Restaurant.menu}
-          match={match}
+          resId={resId}
         />
       </Container>
     </>
   );
 };
 
 Detail.propTypes = {
-  match: PropTypes.any.isRequired,
+  resId: PropTypes.any.isRequired,
 };
 
 export default Detail;

src/Pages/DetailPage.jsx

@@ -1,22 +1,20 @@
 /* eslint-disable react/forbid-prop-types */
 import React from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
+import { useParams } from 'react-router-dom';
 import Detail from '../Layouts/Detail/Detail';
 import Header2 from '../Components/Common/Header2';
 import Sidebar2 from '../Components/Common/Sidebar2';
 
-const DetailPage = ({ match }) => {
+const DetailPage = () => {
+  const { resId } = useParams();
   return (
     <>
       <Sidebar2 />
       <Header2 />
-      <Detail match={match} />
+      <Detail resId={resId} />
     </>
   );
 };
 
-DetailPage.propTypes = {
-  match: PropTypes.any.isRequired,
-};
-
 export default DetailPage;

src/Router/PublicRouter.jsx

@@ -0,0 +1,9 @@
+/* eslint-disable react/react-in-jsx-scope */
+import { Navigate, Outlet } from 'react-router-dom';
+
+const PublicRouter = () => {
+  const user = JSON.parse(sessionStorage.getItem('user'));
+  return !user ? <Navigate to="/" /> : <Outlet />;
+};
+
+export default PublicRouter;