#1 GeonhaPark | routing bugfix complete

src/components/Navigation.js

@@ -24,23 +24,37 @@ const Navigation = () => {
     <div className="nav">
       <div className="nav__row">
         <Link
-          to="/home"
+          id="nav__home"
+          to="/app/home"
           className="nav__link selected"
           onClick={navLinkClickHandler}
           autoFocus
         >
           Home
         </Link>
-        <Link to="/about" className="nav__link" onClick={navLinkClickHandler}>
+        <Link
+          to="/app/about"
+          className="nav__link"
+          onClick={navLinkClickHandler}
+        >
           About
         </Link>
-        <Link to="/contact" className="nav__link" onClick={navLinkClickHandler}>
+        <Link
+          to="/app/contact"
+          className="nav__link"
+          onClick={navLinkClickHandler}
+        >
           Contact
         </Link>
       </div>
       <Link
-        to="/home"
+        to="/app/home"
         onClick={() => {
+          const elements = document.getElementsByClassName('nav__link');
+          for (let i = 0; i < elements.length; i++) {
+            elements[i].classList.remove('selected');
+          }
+          document.getElementById('nav__home').classList.add('selected');
           window.scrollTo({ top: 0, behavior: 'smooth' });
         }}
         className="nav__logo"
@@ -54,7 +68,11 @@ const Navigation = () => {
       </Link>
 
       <div className="nav__row">
-        <Link to="/reserve" className="nav__link" onClick={navLinkClickHandler}>
+        <Link
+          to="/app/reserve"
+          className="nav__link"
+          onClick={navLinkClickHandler}
+        >
           Reservation
         </Link>
         {!loginUser ? (
@@ -71,7 +89,6 @@ const Navigation = () => {
             className="nav__usermenu nav__link"
             onClick={(e) => {
               dropdownHandler(e);
-              // navLinkClickHandlser(e);
             }}
           >
             <img

src/components/Reserve/ReserveExec.js

@@ -54,7 +54,7 @@ const ReserveExec = () => {
                 <p className="piano_card_btn">
                   {loginUser && (
                     <Link
-                      to={`/reserve/page:${loginUser.email}`}
+                      to={`/app/reserve/page/:${loginUser.email}`}
                       onClick={() => {
                         window.scrollTo({ top: 0, behavior: 'smooth' });
                       }}
@@ -64,7 +64,7 @@ const ReserveExec = () => {
                   )}
                   {!loginUser && (
                     <Link
-                      to="/login"
+                      to="/signin"
                       onClick={() => {
                         window.scrollTo({ top: 0, behavior: 'smooth' });
                       }}

src/components/Router.js

@@ -22,16 +22,19 @@ import Error from './Error';
 const AppRouter = () => {
   const router = createBrowserRouter(
     createRoutesFromElements(
-      <Route path="/" element={<Layout />} errorElement={<Error />}>
-        <Route path="/home" element={<Home />}></Route>
-        <Route path="/reserve" element={<Reserve />}></Route>
-        <Route path="/reserve/page/:id" element={<ReservePage />} />
-        <Route path="/about" element={<About />} />
-        <Route path="/contact" element={<Contact />} />
-        <Route path="/profile/:id" element={<Profile />}>
-          <Route path="/profile/:id/info" element={<UserInfo />} />
-          <Route path="/profile/:id/reserve" element={<UserReserve />} />
+      <Route path="/" errorElement={<Error />}>
+        <Route path="/app" element={<Layout />}>
+          <Route path="/app/home" element={<Home />}></Route>
+          <Route path="/app/reserve" element={<Reserve />}></Route>
+          <Route path="/app/reserve/page/:id" element={<ReservePage />} />
+          <Route path="/app/about" element={<About />} />
+          <Route path="/app/contact" element={<Contact />} />
+          <Route path="/app/profile/:id" element={<Profile />}>
+            <Route path="/app/profile/:id/info" element={<UserInfo />} />
+            <Route path="/app/profile/:id/reserve" element={<UserReserve />} />
+          </Route>
         </Route>
+        <Route path="/" element={<Navigate to="/app/home" />}></Route>
         <Route path="/signin" element={<SignIn />} />
         <Route path="/signup" element={<SignUp />} />
       </Route>

src/components/ui/Dropdown.js

@@ -42,15 +42,15 @@ const Dropdown = () => {
       </div>
       <div id="dropdown-list" className="dropdown-content">
         <Link
-          to={`/profile/:${auth.currentUser.email}/info`}
+          to={`/app/profile/:${auth.currentUser.email}/info`}
           onClick={() => {
             window.scrollTo({ top: 0, behavior: 'smooth' });
           }}
         >
           내 정보
         </Link>
         <Link
-          to={`/profile/:${auth.currentUser.email}/reserve`}
+          to={`/app/profile/:${auth.currentUser.email}/reserve`}
           onClick={() => {
             window.scrollTo({ top: 0, behavior: 'smooth' });
           }}

src/routes/Home.js

@@ -13,7 +13,7 @@ const Home = () => {
         {loginUser ? (
           <>
             <Link
-              to="/reserve"
+              to="/app/reserve"
               className="home__main__btn"
               onClick={() => {
                 window.scrollTo({ top: 0, behavior: 'smooth' });

src/routes/Layout.js

@@ -8,27 +8,6 @@ const Root = () => {
     <div className="layout">
       <Navigation />
       <Outlet />
-      {/* <div className="btns">
-        <div
-          className="moveTopBtn"
-          onClick={() => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-          }}
-        >
-          맨 위로
-        </div>
-        <div
-          className="moveBottomBtn"
-          onClick={() => {
-            window.scrollTo({
-              top: document.body.scrollHeight,
-              behavior: 'smooth',
-            });
-          }}
-        >
-          맨 아래로
-        </div>
-      </div> */}
       <Footer />
     </div>
   );

src/routes/Profile.js

@@ -22,7 +22,7 @@ const Profile = () => {
         </div>
         <div className="menu">
           <Link
-            to={`/profile/:${auth.currentUser.email}/info`}
+            to={`/app/profile/:${auth.currentUser.email}/info`}
             className="profile__menu__item"
             onClick={() => {
               window.scrollTo({ top: 0, behavior: 'smooth' });
@@ -31,7 +31,7 @@ const Profile = () => {
             My Account
           </Link>
           <Link
-            to={`/profile/:${auth.currentUser.email}/reserve`}
+            to={`/app/profile/:${auth.currentUser.email}/reserve`}
             className="profile__menu__item"
             onClick={() => {
               window.scrollTo({ top: 0, behavior: 'smooth' });

src/routes/SignIn.js

@@ -47,7 +47,7 @@ const SignIn = () => {
     <div className="sign">
       <BackButton />
       <div className="sign-loginbox">
-        <Link to="/home">
+        <Link to="/">
           <img
             src={process.env.PUBLIC_URL + '/img/logo1.png'}
             width="236"

src/routes/SignUp.js

@@ -87,7 +87,7 @@ const SignUp = () => {
     <div className="sign">
       <BackButton />
       <div className="sign-loginbox">
-        <Link to="/home">
+        <Link to="/">
           <img
             src={process.env.PUBLIC_URL + '/img/logo1.png'}
             width="236"

src/routes/UserReserve.js

@@ -39,7 +39,7 @@ const UserReserve = () => {
       {reserveList.length === 0 && (
         <div className="menu__content none">
           <div className="msg">현재 예약 현황이 없습니다.</div>
-          <Link to="/reserve">예약하기</Link>
+          <Link to="/app/reserve">예약하기</Link>
         </div>
       )}
       {reserveList.length === 0 && (

src/util/reducer/loginSlice.js

@@ -12,17 +12,17 @@ const loginSlice = createSlice({
     setLogout: (state) => {
       state.isLoggedIn = false;
       state.userInfo = null;
-      console.log('setLogout 실행', state.isLoggedIn);
-      console.log('userInfo : ', state.userInfo);
+      // console.log('setLogout 실행', state.isLoggedIn);
+      // console.log('userInfo : ', state.userInfo);
     },
     setLogIn: (state, action) => {
       state.isLoggedIn = true;
-      console.log('setLogIn 실행', state.isLoggedIn);
-      console.log('userInfo : ', state.userInfo);
+      // console.log('setLogIn 실행', state.isLoggedIn);
+      // console.log('userInfo : ', state.userInfo);
     },
     setAuthErrorMsg: (state, action) => {
       state.authErrorMsg = action.payload;
-      console.log('setAuthErrorMsg 실행', state.authErrorMsg);
+      // console.log('setAuthErrorMsg 실행', state.authErrorMsg);
     },
     setIsSignUpSuccess: (state, action) => {
       state.isSignUpSuccess = action.payload;