From 8e8502582bad6cf0867c4c0b4bd86191867dab9e Mon Sep 17 00:00:00 2001
From: Hayoung04 <22300209@handong.ac.kr>
Date: Tue, 20 Feb 2024 15:58:06 +0900
Subject: [PATCH] =?UTF-8?q?style=20:=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=8A=B8=ED=94=BC=EC=BB=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                        |  3 +-
 src/calendar/Calendar.css         | 64 +++++++++++++++++++++++++++++++
 src/calendar/Calendarr.jsx        | 38 +++++++++---------
 src/calendar/Calendarr.module.css |  4 +-
 4 files changed, 87 insertions(+), 22 deletions(-)

diff --git a/src/App.js b/src/App.js
index bcfbbd6..db067e9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,12 +9,11 @@ import BoardList from "./board/BoardList";
 import LogIn from "./account/LogIn";
 import SignUp from "./account/SignUp";
 
-import Register from "./account/Register";
+// import Register from "./account/Register";
 
 import Complete from "./account/Complete";
 import Calendarr from "./calendar/Calendarr";
 
-
 function App() {
   return (
     <div className="App">
diff --git a/src/calendar/Calendar.css b/src/calendar/Calendar.css
index 645b499..54bb755 100644
--- a/src/calendar/Calendar.css
+++ b/src/calendar/Calendar.css
@@ -58,3 +58,67 @@
 .Calendarr_select_date__eoyVO {
   margin: 0px;
 }
+
+.react-datepicker__day--outside-month {
+  cursor: default;
+  visibility: hidden;
+}
+
+.react-datepicker__day--keyboard-selected {
+  background-color: white;
+}
+
+.react-datepicker__time-list {
+  width: 160px;
+  height: 180px;
+}
+
+.react-datepicker__time-container
+  .react-datepicker__time
+  .react-datepicker__time-box
+  ul.react-datepicker__time-list
+  li.react-datepicker__time-list-item--selected {
+  background-color: rgba(255, 139, 197, 0.2);
+  color: black;
+  height: 24px;
+  padding: 0px;
+  padding-top: 10px;
+}
+
+.react-datepicker__time-container
+  .react-datepicker__time
+  .react-datepicker__time-box
+  ul.react-datepicker__time-list
+  li.react-datepicker__time-list-item--selected:hover {
+  background-color: rgba(255, 139, 197, 0.2);
+  color: black;
+}
+
+.react-datepicker__time-container
+  .react-datepicker__time
+  .react-datepicker__time-box {
+  width: 160px;
+  height: 250px;
+  overflow: hidden;
+  position: fixed;
+  left: 45px;
+}
+
+#Calendarr_date__GhPew {
+  border-bottom: 2px solid black;
+  width: 300px;
+}
+
+.Calendarr_timeinput__ib3pf {
+  border-bottom: 2px solid black;
+  width: 300px;
+  color: black;
+}
+
+.Calendarr_timeinput__ib3pf:focus {
+  outline: none;
+}
+
+.react-datepicker__tab-loop {
+  border: none;
+}
diff --git a/src/calendar/Calendarr.jsx b/src/calendar/Calendarr.jsx
index 55227cc..8b119fa 100644
--- a/src/calendar/Calendarr.jsx
+++ b/src/calendar/Calendarr.jsx
@@ -105,7 +105,7 @@ function Calendarr() {
               <div className={styles.selected_date}>
                 {reservedDate && (
                   <p>
-                    원하는 날짜
+                    원하는 요일
                     <br />
                     <div id={styles.date}>
                       {format(reservedDate, "yyyy/MM/dd")}
@@ -116,23 +116,25 @@ function Calendarr() {
               </div>
 
               <div className={styles.selected_time}>
-                <p>원하는 시간</p>
-                <DatePicker
-                  selected={startTime}
-                  dateFormat="HH:mm"
-                  onChange={onSelect}
-                  // locale={ko}
-                  showTimeSelect
-                  showTimeSelectOnly
-                  timeIntervals={60}
-                  // minTime={setHours(setMinutes(new Date(), 0), 10)}
-                  // minTime={setHours(setMinutes(new Date(), 10))}
-                  // maxTime={setHours(setMinutes(new Date(), 0), 23)}
-                  timeCaption=""
-                  timeFormat="HH:mm"
-                  placeholderText="XX:00"
-                  className={styles.timeinput}
-                />
+                <p>
+                  원하는 시간
+                  <DatePicker
+                    selected={startTime}
+                    dateFormat="HH:mm"
+                    onChange={onSelect}
+                    // locale={ko}
+                    showTimeSelect
+                    showTimeSelectOnly
+                    timeIntervals={60}
+                    // minTime={setHours(setMinutes(new Date(), 0), 10)}
+                    // minTime={setHours(setMinutes(new Date(), 10))}
+                    // maxTime={setHours(setMinutes(new Date(), 0), 23)}
+                    timeCaption=""
+                    timeFormat="HH:mm"
+                    placeholderText="XX:00"
+                    className={styles.timeinput}
+                  />
+                </p>
               </div>
             </div>
           </span>
diff --git a/src/calendar/Calendarr.module.css b/src/calendar/Calendarr.module.css
index bca8d0b..5faae83 100644
--- a/src/calendar/Calendarr.module.css
+++ b/src/calendar/Calendarr.module.css
@@ -73,9 +73,9 @@
 
 .selected_date,
 .selected_time {
-  margin-left: 60px;
+  margin-left: 80px;
   margin-right: 60px;
-  margin-bottom: 30px;
+  margin-bottom: 22px;
 }
 .selected_date p,
 .selected_time p {