Feat #40 : 예약 버튼 수정

Author: Wisesaturn

app/reservation/page.jsx

@@ -94,6 +94,7 @@ export default function Reservation() {
   }, [reserveTime]);  
 
   return (
+    <>
     <main>
       <Modal 
         title="예약 정보가 맞나요?"
@@ -148,12 +149,15 @@ export default function Reservation() {
         />
       </div>
       </div>
+    </main>
+    <div className="fixed bottom-0 flex w-full full:w-[25rem]">
       <button 
-        disabled={reserveTime!="Invalid Date"?false:true} 
+        disabled={!!reserveTime=="Invalid Date"} 
         onClick={openModal}
-        className={reserveTime!="Invalid Date"?"rounded-lg bg-blue-600 w-full h-10 mt-3 text-center text-white text-lg font-bold":"rounded-lg bg-neutral-200 w-full h-10 mt-3 text-center text-white text-lg font-bold"}>
+        className={reserveTime!="Invalid Date" ? "bg-blue-600 w-full h-10 mt-3 text-center text-white text-lg font-bold":"rounded-lg bg-neutral-200 w-full h-10 mt-3 text-center text-white text-lg font-bold"}>
         예약하기
       </button>
-    </main>
+    </div>
+    </>
   );
 }

components/ImgAndDesc/index.jsx

@@ -1,6 +1,6 @@
 export default function ImgAndDesc({ imgURL, title, desc }) {
   return (
-    <div className="my-5 mb-10 shadow">
+    <div className="my-5 shadow">
       <img className="rounded-t-xl" src={imgURL} alt={title + ' 사진'} width="100%"></img>
       <div className="p-4">
         <h2 className="font-bold text-lg">{title}</h2>

components/ReservationBtn/index.jsx

@@ -7,7 +7,7 @@ export default function ReservationBtn({ time, status, selected, value, setSelec
         onClick={() => setSelectedTime(value)}
         className={`rounded-lg p-3 ${
           status == true && selected == true
-            ? 'bg-blue-600 text-white'
+            ? 'bg-primary-main text-white'
             : status == true && selected == false
             ? 'bg-sky-50 border-2 border-blue-500'
             : 'bg-neutral-200'

styles/global.css

@@ -22,6 +22,7 @@ main {
   background-color : white;
   box-shadow: rgba(100, 100, 111, 0.2) 0px 10px 30px 0px;
   height : var(--vh);
+  max-height : var(--vh);
 
   padding : 0 1rem;
 }

tailwind.config.js

@@ -25,7 +25,7 @@ module.exports = {
           dark: '#0B123B',
           lightdark: '#165EB0',
           main: '#1a70d2',
-          bright: '#2D4CFA',
+          bright: '#639EE0',
           light: '#4363E1',
         },
         secondary: {