#1 GeonhaPark | responsive nav start

knupi-project · Dec 25, 2022 · 4f868ef · 4f868ef
1 parent 6b5358d
commit 4f868ef
Show file tree

Hide file tree

Showing 13 changed files with 98 additions and 70 deletions.
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { useState, useEffect } from 'react';
-
 import AppRouter from 'components/Router';
 import Loader from 'components/ui/Loader';
 import { useSelector } from 'react-redux';

diff --git a/src/components/ui/Footer.js → src/components/Footer.js b/src/components/ui/Footer.js → src/components/Footer.js
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Dropdown from 'components/Dropdown';
+import Dropdown from 'components/ui/Dropdown';
 import { Link } from 'react-router-dom';
 import { auth } from 'util/firebaseConfig';
 import 'stylesheet/Navigation.scss';
@@ -37,7 +37,6 @@ const Navigation = () => {
         <Link to="/contact" className="nav__link" onClick={navLinkClickHandler}>
           Contact
         </Link>
-        <div className="nav__link" />
       </div>
       <Link
         to="#"
@@ -55,7 +54,6 @@ const Navigation = () => {
       </Link>
 
       <div className="nav__row">
-        <div className="nav__link" />
         <Link to="/reserve" className="nav__link" onClick={navLinkClickHandler}>
           Reservation
         </Link>
@@ -66,14 +64,14 @@ const Navigation = () => {
               src={process.env.PUBLIC_URL + '/img/user-icon.png'}
               alt="user-login-icon"
             />
-            <div className="nav__usermenu__button">로그인</div>
+            <span>로그인</span>
           </Link>
         ) : (
           <div
             className="nav__usermenu nav__link"
-            onClick={() => {
-              dropdownHandler();
-              navLinkClickHandler();
+            onClick={(e) => {
+              dropdownHandler(e);
+              // navLinkClickHandlser(e);
             }}
           >
             <img

diff --git a/src/components/ReserveExec.js b/src/components/ReserveExec.js
@@ -10,9 +10,9 @@ const ReserveExec = () => {
         <p className="reservation_main_subtitle">Choose the Piano</p>
       </div>
       <div className="piano_card_box">
-        {[1, 2, 3, 4].map((element) => {
+        {[1, 2, 3, 4].map((element, index) => {
           return (
-            <div className="piano_card">
+            <div className="piano_card" key={index}>
               <span className="piano_card_title">업라이트 피아노</span>
               <span className="piano_card_time">진행 시간 : 30분</span>
               <span className="piano_card_subtitle">

diff --git a/src/components/Dropdown.js → src/components/ui/Dropdown.js b/src/components/Dropdown.js → src/components/ui/Dropdown.js
diff --git a/src/routes/Home.js b/src/routes/Home.js
@@ -6,10 +6,10 @@ const Home = () => {
 
   return (
     <div className="home">
-      <img src={process.env.PUBLIC_URL + '/img/Main 1.png'} alt="img" />
-      <div className="home__main__text">
-        <p className="home__main__title">KNUPI</p>
-        <p className="home__main__subtitle">KNU PIANO CLUB</p>
+      {/* <img src={process.env.PUBLIC_URL + '/img/Main 1.png'} alt="img" /> */}
+      <div className="home__main">
+        <span className="home__main__title">KNUPI</span>
+        <span className="home__main__subtitle">KNU PIANO CLUB</span>
         {loginUser ? (
           <>
             <Link

diff --git a/src/routes/Layout.js b/src/routes/Layout.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Navigation from 'components/Navigation';
-import Footer from 'components/ui/Footer';
+import Footer from 'components/Footer';
 import { Outlet } from 'react-router-dom';
 
 const Root = () => {

diff --git a/src/routes/Reserve.js b/src/routes/Reserve.js
@@ -24,13 +24,9 @@ const Reserve = () => {
   return (
     <div className="reservation">
       <div className="reservation_mid">
-        <img
-          src={process.env.PUBLIC_URL + '/img/reservation_mid.png'}
-          alt="img"
-        />
         <div className="reservation_mid-text">
           <span className="reservation_mid-title">Reservation</span>
-          <span className="reservation_mid-subtitle">피아노 예약하기</span>
+          <span className="reservation_mid-subtitle">피아노 예약</span>
         </div>
       </div>
       <div className="reservation_main">

diff --git a/src/routes/UserInfo.js b/src/routes/UserInfo.js
@@ -33,7 +33,7 @@ const UserInfo = () => {
         const docRef = doc(db, 'users', auth.currentUser.uid);
         const docSnap = await getDoc(docRef);
         if (docSnap.exists()) {
-          dispatch(updateUserInfo(docSnap.data()));
+          dispatch(updateUserInfo({ ...docSnap.data(), timestamp: '' }));
           setUserInfo(docSnap.data());
         }
       };
@@ -69,7 +69,7 @@ const UserInfo = () => {
           <form className="menu__content__form" onSubmit={formSubmitHandler}>
             {[1, 2, 3, 4].map((item, index) => {
               return (
-                <div className="inputbox">
+                <div className="inputbox" key={index}>
                   <div className="inputbox__title">이름</div>
                   <input
                     type="text"

diff --git a/src/stylesheet/App.scss b/src/stylesheet/App.scss
@@ -6,13 +6,15 @@ html {
   padding: 0px;
   margin: 0px;
   font-family: 'Noto Serif', 'Noto Serif KR', serif;
+  font-size: 18px;
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
 
 html ::-webkit-scrollbar {
   display: none; /* Chrome, Safari, Opera*/
 }
+
 body {
   padding: 0px;
   margin: 0px;
@@ -36,8 +38,8 @@ body {
   background-color: #fff;
   padding: 0;
   margin: 0;
-  height: 100vh;
   width: 100vw;
+  height: auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -49,26 +51,32 @@ body {
     height: 100%;
   }
 
-  .home__main__text {
-    width: 100%;
+  .home__main {
     display: flex;
     flex-direction: column;
     align-items: center;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    justify-content: center;
+    margin-top: 50px;
+    width: 100%;
+    height: 100vh;
+    background-image: url('../../public/img/Main\ 1.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+    // position: absolute;
+    // top: 50%;
+    // left: 50%;
+    // transform: translate(-50%, -50%);
 
     .home__main__title {
-      font-size: 45px;
+      font-size: 2.4rem;
       font-weight: 600;
       letter-spacing: 4px;
       font-display: center;
       margin-bottom: 20px;
     }
 
     .home__main__subtitle {
-      font-size: 25px;
+      font-size: 1.5rem;
       font-weight: 500;
       font-display: center;
       margin-bottom: 30px;
@@ -80,7 +88,7 @@ body {
       border: 1px solid black;
       border-radius: 5px;
       background-color: #000000bb;
-      font-size: 20px;
+      font-size: 1.2rem;
       letter-spacing: 2px;
       color: wheat;
       display: flex;
@@ -99,40 +107,49 @@ body {
 }
 
 .reservation {
-  width: 100vw;
-  height: auto;
   display: flex;
+  width: 100vw;
+  padding: 0;
+  margin: 0;
+
   flex-direction: column;
   justify-content: center;
   align-items: center;
 
   .reservation_mid {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-image: url('../../public/img/reservation_mid.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 100%;
+    height: 80vh;
+    min-height: 500px;
+    max-height: 740px;
     .reservation_mid-text {
-      position: absolute;
-      top: 40%;
-      left: 50%;
-      transform: translate(-50%, -50%);
       display: flex;
       flex-direction: column;
       justify-content: center;
+      margin-top: 140px;
       span {
+        font-family: 'Frank Ruhl Libre', serif;
         text-align: center;
       }
     }
 
     .reservation_mid-title {
-      font-size: 50px;
-      font-weight: 500;
+      font-size: 3rem;
+      font-weight: 550;
       padding: 25px;
       border-bottom: 1px solid black;
-      font-family: 'Helvetica Neue';
     }
 
     .reservation_mid-subtitle {
       margin-top: 30px;
-      font-size: 25px;
-      font-family: 'Noto Sans KR', sans-serif;
-      color: #000000;
+      font-size: 1.5rem;
+      color: black;
     }
   }
 
@@ -151,7 +168,7 @@ body {
         padding: 10px 0px;
         margin: 20px 6px;
 
-        font-size: 20px;
+        font-size: 1.2rem;
         color: rgb(0, 0, 0);
 
         cursor: pointer;
@@ -185,12 +202,12 @@ body {
       text-align: center;
     }
     .reservation_main_title {
-      font-size: 30px;
+      font-size: 2rem;
       margin: 10px 0px;
     }
 
     .reservation_main_subtitle {
-      font-size: 23px;
+      font-size: 1.7rem;
       color: rgb(0, 0, 0);
       opacity: 50%;
       margin: 10px 0px 20px 0px;
@@ -202,29 +219,34 @@ body {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: space-evenly;
     align-items: center;
     width: 80%;
     margin: 40px 0px;
 
     .piano_card {
       width: 45%;
-      // height: 450px;
+      min-width: 380px;
+      max-width: 500px;
+      height: 50vh;
+      min-height: 380px;
+      max-height: 500px;
+
       border: 3px solid $piano-border-color;
       border-top: 40px solid $piano-border-color;
       padding: 40px;
-      margin: 40px 20px;
+      margin: 40px 10px;
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
 
       .piano_card_title {
-        font-size: 30px;
+        font-size: 2rem;
         font-weight: 700;
       }
 
       .piano_card_time {
-        font-size: 20px;
+        font-size: 1.4rem;
         color: rgb(0, 0, 0);
         opacity: 70%;
 
@@ -237,7 +259,7 @@ body {
 
       .piano_card_bar {
         margin-top: 150px;
-        font-size: 25px;
+        font-size: 1.5rem;
         font-weight: 700;
         border-top: 4px solid rgb(0, 0, 0);
       }
@@ -288,21 +310,25 @@ body {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: flex-start;
+
     width: 320px;
-    height: 16.8px;
     text-align: left;
-    font-size: 12px;
+    font-size: 0.8rem;
     color: #f24957;
     margin-bottom: 24px;
   }
 
   .rq-msg {
-    margin-top: 48px;
     width: 320px;
     height: 46px;
     text-align: center;
-    font-size: 14px;
+
+    font-size: 1rem;
     font-weight: normal;
     text-decoration-line: black;
+
+    margin-top: 48px;
+    margin-bottom: 24px;
   }
 }