calendar 수정

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%;
+  }
+}
+

src/shared/ui/calendar/nice-calendar.tsx

@@ -19,6 +19,12 @@ interface NiceCalendarProps {
   maxDate?: Date;
 };
 
+interface TileClassNameProps {
+  activeStartDate: Date;
+  date: Date;
+  view: string;
+};
+
 const NiceCalendar = ({
   calendarOpen,
   setCalendarOpen,
@@ -84,12 +90,11 @@ const NiceCalendar = ({
   };
   const formatDay = (locale: string | undefined, date: Date) => {
     // For Korean locale, return only the day number without '일'
-    if (currentLocale === 'ko') {
-      return date.getDate().toString();
-    }
-    return date.toLocaleString(currentLocale, {
-      day: 'numeric'
+    
+    return date.toLocaleString('en', {
+      day: '2-digit',
     });
+    
   };
   const formatShortWeekday = (locale: string | undefined, date: Date) => {
     return date.toLocaleString(currentLocale, {
@@ -97,6 +102,30 @@ const NiceCalendar = ({
     });
   };
 
+  const tileClassName = ({
+    activeStartDate,
+    date, 
+    view
+  }: TileClassNameProps) => {
+    if(view === 'month'){
+      const dayOfWeek = date.getDay();
+      let activeMonth = moment(activeStartDate).format('MM');
+      let itemMonth = moment(date).format('MM');
+      if(itemMonth === activeMonth){
+        if(dayOfWeek === 0){
+          return 'tile-sunday';
+        }
+        else if(dayOfWeek === 6){
+          return 'tile-saturday';
+        }
+        else{
+          return 'tile-weekday';
+        }
+      }
+    }
+    return null;
+  };
+
   useEffect(() => {
     setMinMaxValueDate();
     
@@ -107,7 +136,10 @@ const NiceCalendar = ({
       { (calendarOpen) && 
         <>
         <div className="bg-dim"></div>
-        <CalendarWrapper onClick={ () => onClickToClose() }>
+        <CalendarWrapper 
+          className="calendar-container calendar-style"
+          onClick={ () => onClickToClose() }
+        >
           <Calendar
             locale={currentLocale}
             minDate={ minDate }
@@ -120,6 +152,8 @@ const NiceCalendar = ({
             formatDay={ formatDay }
             formatShortWeekday={ formatShortWeekday }
             showNeighboringMonth={ true }
+            calendarType='gregory'
+            tileClassName={ tileClassName }
           ></Calendar>
         </CalendarWrapper>
         </>
@@ -129,11 +163,6 @@ const NiceCalendar = ({
 };
 const CalendarWrapper = styled.div`
   z-index: 1100;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
 `;
 
 export default NiceCalendar;