#1 GeonhaPark | reserve page update

package.json

@@ -27,7 +27,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "pretter": "prettier --write ."
+    "prettier": "prettier --write ."
   },
   "eslintConfig": {
     "extends": [

src/components/ui/Navigation.js → src/components/Navigation.js

@@ -1,12 +1,21 @@
 import React from 'react';
-import Dropdown from 'components/ui/Dropdown';
+import Dropdown from 'components/Dropdown';
 import { Link } from 'react-router-dom';
 import { auth } from 'util/firebaseConfig';
 import 'stylesheet/Navigation.scss';
 
 const Navigation = () => {
   const loginUser = auth.currentUser;
 
+  const navLinkClickHandler = (e) => {
+    const elements = document.getElementsByClassName('nav__link');
+    for (let i = 0; i < elements.length; i++) {
+      elements[i].classList.remove('selected');
+    }
+    e.target.classList.add('selected');
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
   const dropdownHandler = (e) => {
     document.getElementById('dropdown-list').classList.toggle('show');
   };
@@ -16,29 +25,16 @@ const Navigation = () => {
       <div className="nav__row">
         <Link
           to="/home"
-          className="nav__link"
-          onClick={() => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-          }}
+          className="nav__link selected"
+          onClick={navLinkClickHandler}
+          autoFocus
         >
           Home
         </Link>
-        <Link
-          to="/about"
-          className="nav__link"
-          onClick={() => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-          }}
-        >
+        <Link to="/about" className="nav__link" onClick={navLinkClickHandler}>
           About
         </Link>
-        <Link
-          to="/contact"
-          className="nav__link"
-          onClick={() => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-          }}
-        >
+        <Link to="/contact" className="nav__link" onClick={navLinkClickHandler}>
           Contact
         </Link>
         <div className="nav__link" />
@@ -60,17 +56,11 @@ const Navigation = () => {
 
       <div className="nav__row">
         <div className="nav__link" />
-        <Link
-          to="/reserve#"
-          className="nav__link"
-          onClick={() => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-          }}
-        >
+        <Link to="/reserve" className="nav__link" onClick={navLinkClickHandler}>
           Reservation
         </Link>
         {!loginUser ? (
-          <Link to="/signin#" className="nav__usermenu nav__link">
+          <Link to="/signin" className="nav__usermenu nav__link">
             <img
               className="user-login-icon"
               src={process.env.PUBLIC_URL + '/img/user-icon.png'}
@@ -79,7 +69,13 @@ const Navigation = () => {
             <div className="nav__usermenu__button">로그인</div>
           </Link>
         ) : (
-          <div className="nav__usermenu nav__link" onClick={dropdownHandler}>
+          <div
+            className="nav__usermenu nav__link"
+            onClick={() => {
+              dropdownHandler();
+              navLinkClickHandler();
+            }}
+          >
             <img
               className="user-img"
               src={loginUser.photoURL}

src/components/ReserveExec.js

@@ -1,27 +1,48 @@
 import React from 'react';
+import { auth } from 'util/firebaseConfig';
 import { Link } from 'react-router-dom';
 const ReserveExec = () => {
+  const loginUser = auth.currentUser;
   return (
     <>
       <div className="reservation_main_explanation">
         <p className="reservation_main_title">피아노 종류를 선택해주세요</p>
         <p className="reservation_main_subtitle">Choose the Piano</p>
       </div>
-      <div className="reservation_main_piano">
-        <div className="reservation_main_piano-1">
-          <span className="reservation_main_piano-1_title">
-            업라이트 피아노
-          </span>
-          <span className="reservation_main_piano-1_time">
-            진행 시간 : 30분
-          </span>
-          <span className="reservation_main_piano-1_subtitle">
-            업라이트 피아노 예약하기
-          </span>
-          <p className="reservation_main_piano-1_btn">
-            <Link href="#">예약하기</Link>
-          </p>
-        </div>
+      <div className="piano_card_box">
+        {[1, 2, 3, 4].map((element) => {
+          return (
+            <div className="piano_card">
+              <span className="piano_card_title">업라이트 피아노</span>
+              <span className="piano_card_time">진행 시간 : 30분</span>
+              <span className="piano_card_subtitle">
+                업라이트 피아노 예약하기
+              </span>
+              <p className="piano_card_btn">
+                {loginUser && (
+                  <Link
+                    to={`/reserve/page:${loginUser.email}`}
+                    onClick={() => {
+                      window.scrollTo({ top: 0, behavior: 'smooth' });
+                    }}
+                  >
+                    예약하기
+                  </Link>
+                )}
+                {!loginUser && (
+                  <Link
+                    to="/signin"
+                    onClick={() => {
+                      alert('로그인이 필요합니다, 로그인 페이지로 이동합니다.');
+                    }}
+                  >
+                    예약하기
+                  </Link>
+                )}
+              </p>
+            </div>
+          );
+        })}
       </div>
     </>
   );

src/components/ReserveStatus.js

@@ -1,9 +1,12 @@
-import React from 'react'
+import React from 'react';
 
 const ReserveStatus = () => {
   return (
-    <div>ReserveStatus</div>
-  )
-}
+    <div className="reservation_main">
+      ReserveStatus
+      <div></div>
+    </div>
+  );
+};
 
-export default ReserveStatus
+export default ReserveStatus;

src/components/Router.js

@@ -11,6 +11,7 @@ import Home from '../routes/Home';
 import SignIn from '../routes/SignIn';
 import SignUp from '../routes/SignUp';
 import Reserve from 'routes/Reserve';
+import ReservePage from 'routes/ReservePage';
 import Profile from 'routes/Profile';
 import UserInfo from 'routes/UserInfo';
 import UserReserve from 'routes/UserReserve';
@@ -25,6 +26,7 @@ const AppRouter = () => {
         <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 />}>

src/components/ui/Footer.js

@@ -4,19 +4,19 @@ import 'stylesheet/Footer.scss';
 const Footer = () => {
   return (
     <div className="footer">
-      <div className="footer__title">Contacts</div>
+      {/* <div className="footer__title">Contacts</div> */}
       <div className="footer__menu">
         <div className="footer__menu__item">
           <img src={process.env.PUBLIC_URL + '/img/message.png'} alt="img" />
-          <p>[email protected]</p>
+          {/* <p>[email protected]</p> */}
         </div>
         <div className="footer__menu__item">
           <img src={process.env.PUBLIC_URL + '/img/call.png'} alt="img" />
-          <p>010-9985-8584 (회장 : 조연호)</p>
+          {/* <p>010-9985-8584 (회장 : 조연호)</p> */}
         </div>
         <div className="footer__menu__item">
           <img src={process.env.PUBLIC_URL + '/img/insta.png'} alt="img" />
-          <p>@knupi_official</p>
+          {/* <p>@knupi_official</p> */}
         </div>
       </div>
       <div className="footer__copyright">

src/routes/Home.js

@@ -12,13 +12,25 @@ const Home = () => {
         <p className="home__main__subtitle">KNU PIANO CLUB</p>
         {loginUser ? (
           <>
-            <Link to="/reserve" className="home__main__btn">
+            <Link
+              to="/reserve"
+              className="home__main__btn"
+              onClick={() => {
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+              }}
+            >
               Reservation
             </Link>
           </>
         ) : (
           <>
-            <Link to="/signin" className="home__main__btn">
+            <Link
+              to="/signin"
+              className="home__main__btn"
+              onClick={() => {
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+              }}
+            >
               JOIN
             </Link>
           </>

src/routes/Layout.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Navigation from 'components/ui/Navigation';
+import Navigation from 'components/Navigation';
 import Footer from 'components/ui/Footer';
 import { Outlet } from 'react-router-dom';
 

src/routes/Reserve.js

@@ -1,22 +1,24 @@
-import ReserveExec from 'components/ReserveExec';
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { useState } from 'react';
+import ReserveExec from 'components/ReserveExec';
+import ReserveStatus from 'components/ReserveStatus';
+// import { Link } from 'react-router-dom';
 
 const Reserve = () => {
-  const [page, setPage] = React.useState(0);
+  const [page, setPage] = useState(<ReserveExec />);
 
   const pageHandler = (e) => {
-    console.log(e.target.id);
     switch (e.target.id) {
       case 'exec':
-        setPage(0);
+        setPage(<ReserveExec />);
         break;
       case 'status':
-        setPage(1);
+        setPage(<ReserveStatus />);
         break;
       default:
         break;
     }
+    window.scrollTo({ top: e.clientY, behavior: 'smooth' });
   };
 
   return (
@@ -31,17 +33,16 @@ const Reserve = () => {
           <span className="reservation_mid-subtitle">피아노 예약하기</span>
         </div>
       </div>
-
       <div className="reservation_main">
         <div className="reservation_main_top-button">
-          <button id="exec" onClick={pageHandler} >
+          <button id="exec" autoFocus onClick={pageHandler}>
             예약하기
           </button>
           <button id="status" onClick={pageHandler}>
             예약현황
           </button>
         </div>
-        <ReserveExec />
+        {page}
       </div>
     </div>
   );

src/routes/ReservePage.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+const ReservePage = () => {
+  const { id } = useParams();
+  return (
+    <div className="home">
+      ReservePage
+      <div>{id}</div>
+    </div>
+  );
+};
+
+export default ReservePage;