calendar 수정

2025-11-03 11:20:31 +09:00
parent 0b3c326768
commit f2b09cd2f8
7 changed files with 191 additions and 29 deletions
--- a/src/shared/ui/assets/css/calendar.css
+++ b/src/shared/ui/assets/css/calendar.css
@@ -0,0 +1,118 @@
+
+/*datepicker styling*/
+
+.calendar-container.calendar-style {
+  max-width: 768px;
+  display: flex;
+  justify-content: center;
+  padding: 10px;
+  background: white;
+  border-radius: 1rem;
+  box-shadow: none
+}
+
+.calendar-style .react-calendar {
+  max-width: 720px;
+  box-shadow: none;
+  background-color: white;
+  border-radius: 1rem;
+  padding: 0;
+}
+
+.calendar-style .react-calendar .react-calendar__navigation {
+  /* background-color: white;*/
+}
+
+.calendar-style .react-calendar .react-calendar__navigation button {
+  color: #2D3436;
+  padding: 0;
+}
+
+.calendar-style .react-calendar .react-calendar__navigation button.react-calendar__navigation__prev-button,
+.calendar-style .react-calendar .react-calendar__navigation button.react-calendar__navigation__next-button {
+  position: relative;
+  top: -3px;
+  font-size: 2rem;
+  font-weight: 400;
+  line-height: inherit;
+  border-radius: 0;
+}
+
+.calendar-style .react-calendar__month-view__weekdays {
+  font-weight: 400 !important;
+  background-color: white;
+}
+
+.calendar-style .react-calendar__month-view__weekdays__weekday {
+  padding: 0.75rem 0.5rem;
+  font-size: 0.9rem;
+  color: #999;
+  font-weight: bold;
+}
+
+.calendar-style.react-calendar__navigation button {
+  font-size: 1.1rem;
+}
+
+.react-calendar__tile.react-calendar__tile--now.react-calendar__tile--hasActive.react-calendar__decade-view__years__year {
+  color: inherit !important;
+}
+
+.calendar-style .react-calendar__tile--active {
+  background-color: #3E6AFC !important;
+  color: white !important;
+  border-radius: 100px;
+}
+
+.react-calendar__tile.react-calendar__tile--hasActive.react-calendar__year-view__months__month abbr {
+  color: white !important;
+  font-weight: bold;
+}
+
+.react-calendar__tile.react-calendar__tile--hasActive.react-calendar__decade-view__years__year, 
+.react-calendar__tile.react-calendar__tile--now.react-calendar__tile--hasActive.react-calendar__century-view__decades__decade {
+  color: white !important;
+  font-weight: bold;
+}
+
+.react-calendar__tile--hasActive {
+  background: #3E6AFC !important;
+  color: white !important;
+}
+
+.react-calendar__tile {
+  /* color: #2D3436 !important; */
+}
+
+abbr[title] {
+  text-decoration: none;
+}
+
+.react-calendar__navigation button:hover {
+  background: transparent !important;
+}
+
+.tile-weekday{
+  color: var(--color-111111) !important;
+}
+.tile-saturday{
+  color: var(--color-4968BD) !important;
+}
+.tile-sunday{
+  color: #FF0000 !important; 
+}
+
+
+@media (max-width: 768px) { 
+  .calendar-style {
+    position: absolute;
+    left: 10px;
+    right: 10px;
+    max-width: 768px;
+  }
+
+  .calendar-style .react-calendar {
+    max-width: 100%;
+  }
+}
+