Merge pull request #64 from LikeLionHGU/hayoung_style/#62

style : 캘린더 데이트피커
LikeLionHGU · Feb 20, 2024 · 6f1125c · 6f1125c
2 parents 2e0503e + 8e85025
commit 6f1125c
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 {