From e333b11090565eb875efcb86c13cdab25a82c44e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8F=84=ED=98=95?=
 <137859651+ohkjh1@users.noreply.github.com>
Date: Mon, 27 Nov 2023 08:39:52 +0900
Subject: [PATCH 1/4] medium commit

---
 src/app/components/cal.css | 88 +++++++++++++++++++++++---------------
 1 file changed, 53 insertions(+), 35 deletions(-)

diff --git a/src/app/components/cal.css b/src/app/components/cal.css
index 7fb4709..bdecb7f 100644
--- a/src/app/components/cal.css
+++ b/src/app/components/cal.css
@@ -5,39 +5,40 @@
   box-sizing: border-box;
 }
 
-/* 달력 몸통 */
+
+/* 달력 기본 스타일 */
 .react-calendar {
-  min-width: 550px; /* 달력의 너비 - 모바일 화면에 적합하게 조정 */
+  width: 80%; /* 너비를 %로 조정 */
+  max-width: 550px; /* 최대 너비 설정 */
   border-radius: 20px;
   border: 3px solid #afa4ce;
-  display: flex;
-  flex-direction: column;
-  margin: auto; /* 수평 중앙 정렬 */
-  margin-top: 75px; /* 상단에서의 마진 */
-  /*max-height: 700px; /* 부모 요소의 높이를 따르도록 설정 */
-  height: 760px;
-  overflow-y: hidden !important;
-  position: relative; /* 추가: 상대 위치 설정 */
+  margin: 70vh auto 0; /* 상단 마진을 뷰포트 높이의 %로 조정 */
+  height: auto;
+  overflow-y: hidden;
+  position: relative;
+  
 }
 
+
 /* 달력 내부 스타일 */
 .react-calendar__month-view {
   min-height: 420px !important; /* 내부 높이를 자동으로 조절 */
   display: flex;
   flex-direction: column;
-  margin: auto; /* 수평 중앙 정렬 */
-  margin-top: px; /* 상단에서의 마진 */
-  max-height: 620px; /* 부모 요소의 높이를 따르도록 설정 */
-  overflow-y: hidden !important; /* 내용이 넘칠 경우 스크롤 표시 */
+  margin: auto; /* 수평 중앙 정렬 */ 
+  max-height: 520px; /* 부모 요소의 높이를 따르도록 설정 */ 
   position: relative; /* 추가: 상대 위치 설정 */
+  overflow-y: auto;
 }
 
 /* 달력 내부 스타일 */
 .react-calendar__month-view__days {
   margin-top: 10px;
-  overflow-y: auto; /* 내용이 넘칠 경우 스크롤 표시 */
+  height:450px;
+  
 }
 
+
 /* 오버레이 스타일 */
 .react-calendar::before {
   content: '';
@@ -69,12 +70,12 @@
   cursor: pointer;
 }
 
-/* 미디어 쿼리 반응형 */
+/* 미디어 쿼리: 태블릿 */
 @media screen and (min-width: 768px) {
   .react-calendar {
-    min-width: 62%; /* 중간 크기 화면에 적합한 너비 */
-    max-width: 900px; /* 최대 너비 */
+    width: 70%; /* 태블릿에서의 너비 */
   }
+}
   .react-calendar__navigation {
     background-color: #e6e6fa;
     border-bottom: 4px solid #afa4ce;
@@ -91,15 +92,16 @@
   .react-calendar__navigation__prev-button {
     font-size: 40px;
   }
-}
 
-/* 더 큰 화면을 위한 미디어 쿼리 */
+
+/* 미디어 쿼리: 데스크톱 */
 @media screen and (min-width: 1024px) {
   .react-calendar {
-    min-width: 50%; /* 더 큰 화면에 적합한 너비 */
+    width: 60%; /* 데스크톱에서의 너비 */
   }
 }
 
+
 /* 다크 모드 스타일 */
 @media (prefers-color-scheme: dark) {
   .react-calendar {
@@ -108,8 +110,7 @@
   }
 }
 
-/* 기타 스타일 설정 */
-/* ... (나머지 스타일 설정은 동일하게 유지) */
+
 
 /* 달력 상단 */
 .react-calendar__navigation {
@@ -138,21 +139,15 @@
   color: red;
 }
 
-/* 달력 안쪽 여백 */
-.react-calendar__month-view {
-  padding: 20px 36px;
-}
 
-.react-calendar__month-view__days {
-  margin-top: 10px;
-  height: 450;
-}
 
 .react-calendar__tile {
   width: 40px; /* 날짜별 칸의 너비를 조절합니다. */
-  height: 105px !important; /* 날짜별 칸의 높이를 조절합니다. */
+  height: 100px !important; /* 날짜별 칸의 높이를 조절합니다. */
   font-size: 16px; /* 날짜의 글꼴 크기를 조절합니다. */
   margin-top: 10px;
+  margin-right: 8px; /* 날짜 칸 간격 늘림 */
+
 }
 
 /* 날짜 색상 및 크기 */
@@ -173,6 +168,21 @@
   color: black;
   text-decoration: none;
 }
+
+
+/* 요일 헤더 스타일 */
+.react-calendar__month-view__weekdays {
+  display: flex;
+  justify-content: space-around; /* 요일 헤더를 가로로 균등 배치 */
+}
+
+
+.react-calendar__month-view__weekdays__weekday,
+.react-calendar__month-view__weekdays__weekday abbr {
+  text-align: center;
+  flex-grow: 1;
+}
+
 .react-calendar__tile--active.react-calendar__year-view__months__month {
   background-color: transparent;
   color: black;
@@ -221,6 +231,7 @@
   align-items: center;
   padding: 0;
   margin-top: 10px !important; /* 수정된 부분: 날짜 간의 간격을 조절합니다. */
+  
 }
 
 /* 날짜 클릭했을 때 칸 색상 */
@@ -300,7 +311,14 @@
   position: relative; /* 컨테이너 위치 설정 */
 }
 
-.react-calendar {
+
+
+
+/* 추가된 부분: 정중앙 위치를 위한 스타일 */
+.calendar-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 90vh; /* 컨테이너의 높이를 뷰포트의 90%로 설정 */
   position: relative;
-  overflow-y: auto !important;
-}
+}
\ No newline at end of file

From 628e6480f44883a042f54802488bcc3973e3bdb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8F=84=ED=98=95?=
 <137859651+ohkjh1@users.noreply.github.com>
Date: Mon, 27 Nov 2023 10:08:03 +0900
Subject: [PATCH 2/4] Update cal.css

---
 src/app/components/cal.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/app/components/cal.css b/src/app/components/cal.css
index bdecb7f..4b1b2f6 100644
--- a/src/app/components/cal.css
+++ b/src/app/components/cal.css
@@ -108,6 +108,16 @@
     background-color: #333; /* 어두운 배경색 */
     color: white; /* 흰색 글자 */
   }
+
+  .react-calendar__navigation {
+    background-color: #444; /* 네비게이션 배경색 변경 */
+  }
+  .react-calendar__tile {
+    background-color: #555; /* 타일 배경색 변경 */
+    color: white; /* 타일 글자색 변경 */
+  }
+
+
 }
 
 

From eb877ae2ab924fcedb4b6098ca81266582a129fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8F=84=ED=98=95?=
 <137859651+ohkjh1@users.noreply.github.com>
Date: Mon, 27 Nov 2023 11:24:25 +0900
Subject: [PATCH 3/4] medium commit

---
 src/app/components/cal.css | 286 ++++++++++++++++++++++++-------------
 1 file changed, 186 insertions(+), 100 deletions(-)

diff --git a/src/app/components/cal.css b/src/app/components/cal.css
index 4b1b2f6..d9bfc62 100644
--- a/src/app/components/cal.css
+++ b/src/app/components/cal.css
@@ -6,37 +6,9 @@
 }
 
 
-/* 달력 기본 스타일 */
-.react-calendar {
-  width: 80%; /* 너비를 %로 조정 */
-  max-width: 550px; /* 최대 너비 설정 */
-  border-radius: 20px;
-  border: 3px solid #afa4ce;
-  margin: 70vh auto 0; /* 상단 마진을 뷰포트 높이의 %로 조정 */
-  height: auto;
-  overflow-y: hidden;
-  position: relative;
-  
-}
 
 
-/* 달력 내부 스타일 */
-.react-calendar__month-view {
-  min-height: 420px !important; /* 내부 높이를 자동으로 조절 */
-  display: flex;
-  flex-direction: column;
-  margin: auto; /* 수평 중앙 정렬 */ 
-  max-height: 520px; /* 부모 요소의 높이를 따르도록 설정 */ 
-  position: relative; /* 추가: 상대 위치 설정 */
-  overflow-y: auto;
-}
 
-/* 달력 내부 스타일 */
-.react-calendar__month-view__days {
-  margin-top: 10px;
-  height:450px;
-  
-}
 
 
 /* 오버레이 스타일 */
@@ -47,19 +19,19 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(
-    0,
-    0,
-    0,
-    0.3
-  ); /* 검정색 오버레이 색상 및 투명도 조절 */
+  background-color: rgba(0, 0, 0, 0.3 ); /* 검정색 오버레이 색상 및 투명도 조절 */
   z-index: -1; /* 달력 아래로 배치 */
 }
 
 .calendar-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 90vh; /* 컨테이너의 높이를 뷰포트의 90%로 설정 */
   position: relative;
 }
 
+
 .close-button {
   position: absolute;
   top: 10px;
@@ -76,13 +48,7 @@
     width: 70%; /* 태블릿에서의 너비 */
   }
 }
-  .react-calendar__navigation {
-    background-color: #e6e6fa;
-    border-bottom: 4px solid #afa4ce;
-    height: 100px !important; /* 크기를 고정합니다. */
-    border-radius: 17px 17px 0 0;
-    overflow: hidden;
-  }
+
 
   .react-calendar__navigation span {
     font-size: 32px;
@@ -102,25 +68,6 @@
 }
 
 
-/* 다크 모드 스타일 */
-@media (prefers-color-scheme: dark) {
-  .react-calendar {
-    background-color: #333; /* 어두운 배경색 */
-    color: white; /* 흰색 글자 */
-  }
-
-  .react-calendar__navigation {
-    background-color: #444; /* 네비게이션 배경색 변경 */
-  }
-  .react-calendar__tile {
-    background-color: #555; /* 타일 배경색 변경 */
-    color: white; /* 타일 글자색 변경 */
-  }
-
-
-}
-
-
 
 /* 달력 상단 */
 .react-calendar__navigation {
@@ -143,23 +90,22 @@
   font-size: 30px;
 }
 
-/* <> 글자 마우스 올렸을 때 색상 */
-.react-calendar__navigation button:enabled:hover,
-.react-calendar__navigation button:enabled:focus {
-  color: red;
-}
-
-
 
 .react-calendar__tile {
   width: 40px; /* 날짜별 칸의 너비를 조절합니다. */
   height: 100px !important; /* 날짜별 칸의 높이를 조절합니다. */
   font-size: 16px; /* 날짜의 글꼴 크기를 조절합니다. */
-  margin-top: 10px;
+  margin-top: 10px !important;
   margin-right: 8px; /* 날짜 칸 간격 늘림 */
-
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
 }
 
+
 /* 날짜 색상 및 크기 */
 .react-calendar__month-view abbr {
   color: black;
@@ -231,26 +177,6 @@
   text-decoration: none;
 }
 
-/* 날짜별 칸 스타일 */
-.react-calendar__tile {
-  text-align: center;
-  height: 87px; /* 수정된 부분: 날짜별 칸의 높이를 조절합니다. */
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-  margin-top: 10px !important; /* 수정된 부분: 날짜 간의 간격을 조절합니다. */
-  
-}
-
-/* 날짜 클릭했을 때 칸 색상 */
-.react-calendar__tile:enabled:hover,
-.react-calendar__tile:enabled:focus,
-.react-calendar__tile--active {
-  background-color: rgba(215, 175, 211, 0.3);
-  border-radius: 14px;
-}
 
 .react-calendar__tile--active,
 .react-calendar__tile--now {
@@ -278,10 +204,6 @@
   background: none !important;
 }
 
-.react-calendar__navigation__label {
-  font-size: 24px;
-  font-weight: 600;
-}
 
 .dot-img {
   width: 100%;
@@ -317,18 +239,182 @@
   pointer-events: auto; /* 클릭 이벤트 활성화 */
 }
 
-.calendar-container {
-  position: relative; /* 컨테이너 위치 설정 */
-}
 
 
+/* 라이트 모드일 때*/
+html.light .react-calendar {
+  width: 80%; /* 너비를 %로 조정 */
+  max-width: 550px; /* 최대 너비 설정 */
+  border-radius: 20px;
+  border: 3px solid #afa4ce;
+  margin: 80vh auto 0; /* 상단 마진을 뷰포트 높이의 %로 조정 */
+  height: auto; /* 높이를 자동으로 설정 */
+  overflow-y: hidden;
+  position: relative;
+}
 
+html.light  .react-calendar__navigation {
+  background-color: #e6e6fa;
+  border-bottom: 4px solid #afa4ce;
+  height: 100px !important; /* 크기를 고정합니다. */
+  border-radius: 17px 17px 0 0;
+  overflow: hidden;
+}
 
-/* 추가된 부분: 정중앙 위치를 위한 스타일 */
-.calendar-container {
+html.light  .react-calendar__month-view {
+  min-height: 320px !important; /* 내부 높이 줄임 */
   display: flex;
+  flex-direction: column;
+  margin: auto;
+  max-height: 520px; /* 부모 요소의 높이를 따르도록 설정 */
+  position: relative;
+  overflow-y: auto; 
+}
+html.light  .react-calendar__tile {
+  width: 40px; /* 날짜별 칸의 너비를 조절합니다. */
+  height: 100px !important; /* 날짜별 칸의 높이를 조절합니다. */
+  font-size: 16px; /* 날짜의 글꼴 크기를 조절합니다. */
+  margin-top: 10px !important;
+  margin-right: 8px; /* 날짜 칸 간격 늘림 */
+  text-align: center;
+  display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 90vh; /* 컨테이너의 높이를 뷰포트의 90%로 설정 */
+  padding: 0;
+}
+
+html.light .react-calendar__tile:enabled:hover,
+.react-calendar__tile:enabled:focus,
+.react-calendar__tile--active {
+  background-color: rgba(215, 175, 211, 0.3);
+  border-radius: 14px;
+}
+
+html.light .react-calendar__navigation button:enabled:hover,
+.react-calendar__navigation button:enabled:focus {
+  color: red;
+}
+
+html.light .react-calendar__navigation__label {
+  font-size: 24px;
+  font-weight: 600;
+}
+
+
+
+
+
+
+/* 다크 모드일 때 */
+html.dark .react-calendar {
+  width: 80%; /* 너비를 %로 조정 */
+  max-width: 550px; /* 최대 너비 설정 */
+  border-radius: 20px;
+  border: 3px solid #afa4ce;
+  margin: 80vh auto 0; /* 상단 마진을 뷰포트 높이의 %로 조정 */
+  height: auto; /* 높이를 자동으로 설정 */
+  overflow-y: hidden;
   position: relative;
-}
\ No newline at end of file
+}
+
+html.dark  .react-calendar__navigation {
+  background-color: #e6e6fa;
+  border-bottom: 4px solid #afa4ce;
+  height: 100px !important; /* 크기를 고정합니다. */
+  border-radius: 17px 17px 0 0;
+  overflow: hidden;
+}
+
+html.dark   .react-calendar__month-view {
+  min-height: 320px !important; /* 내부 높이 줄임 */
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  max-height: 520px; /* 부모 요소의 높이를 따르도록 설정 */
+
+  position: relative;
+  overflow-y: auto; 
+}
+
+html.dark  .react-calendar__tile {
+  width: 40px; /* 날짜별 칸의 너비를 조절합니다. */
+  height: 100px !important; /* 날짜별 칸의 높이를 조절합니다. */
+  font-size: 16px; /* 날짜의 글꼴 크기를 조절합니다. */
+  margin-top: 10px !important;
+  margin-right: 8px; /* 날짜 칸 간격 늘림 */
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  background-color: #333;
+  
+}
+
+html.dark .react-calendar__tile:enabled:hover,
+.react-calendar__tile:enabled:focus,
+.react-calendar__tile--active {
+  background-color: rgba(4, 3, 4, 0.3);
+  border-radius: 14px;
+}
+
+html.dark .react-calendar__tile--active,
+.react-calendar__tile--now {
+  pointer-events: auto; /* 클릭 이벤트 비활성화 */
+  background-color:  rgba(4, 3, 4, 0.3);/* RGB에 투명도 추가 */
+  border-radius: 14px;
+  height: 87px;
+}
+
+/* html.dark .react-calendar__month-view__weekdays abbr {
+  color: white; /* 다크 모드 요일 글자색 */
+
+
+
+
+html.dark .react-calendar__navigation button:enabled:hover,
+.react-calendar__navigation button:enabled:focus {
+  color: red;
+}
+
+
+html.dark .react-calendar__navigation__label {
+  font-size: 24px;
+  font-weight: 600;
+  background-color: #333;
+
+}
+
+html.dark .react-calendar__navigation__arrow .react-calendar__navigation__next-button{
+  background-color: #333;
+}
+
+
+/* 달력 내부 스타일 */
+html.dark .react-calendar__month-view__days {
+  margin-top: 10px;
+  height:450px;
+  background-color: #333;
+}
+
+html.dark .react-calendar__navigation__prev2-button {
+  display: none;
+  background-color: #333;
+}
+  
+  
+html.dark .react-calendar__navigation__next-button {
+  background: none;
+  background-color: #333;
+}
+  
+  
+html.dark .react-calendar__navigation__next2-button {
+  display: none;
+  background-color: #333;
+}
+  
+  
+  
\ No newline at end of file

From 6d9159af9803631c938a4fddbc0ba92f8e7a5cc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8F=84=ED=98=95?=
 <137859651+ohkjh1@users.noreply.github.com>
Date: Mon, 27 Nov 2023 12:10:44 +0900
Subject: [PATCH 4/4] final commit

---
 src/app/components/Calendar.tsx |   4 +-
 src/app/components/cal.css      | 272 +++++++++++---------------------
 2 files changed, 98 insertions(+), 178 deletions(-)

diff --git a/src/app/components/Calendar.tsx b/src/app/components/Calendar.tsx
index 353f12a..eaa8b14 100644
--- a/src/app/components/Calendar.tsx
+++ b/src/app/components/Calendar.tsx
@@ -133,7 +133,7 @@ const ModalCalendar = ({ isOpen, closeModal, setIsCalendarOpen }: any) => {
     return (
       <span
         onClick={changeMonth}
-        className='hover:text-[tomato]'
+        className='hover:text-[tomato] p-4'
       >{'<'}</span>
     )
   }
@@ -149,7 +149,7 @@ const ModalCalendar = ({ isOpen, closeModal, setIsCalendarOpen }: any) => {
     return (
       <span
         onClick={changeMonth}
-        className='hover:text-[tomato]'
+        className='hover:text-[tomato] p-4'
       >{'>'}
       </span>
     )
diff --git a/src/app/components/cal.css b/src/app/components/cal.css
index d9bfc62..acfde12 100644
--- a/src/app/components/cal.css
+++ b/src/app/components/cal.css
@@ -14,20 +14,24 @@
 /* 오버레이 스타일 */
 .react-calendar::before {
   content: '';
-  position: fixed; /* 변경: 오버레이를 화면에 고정합니다. */
+  position: fixed;
+  /* 변경: 오버레이를 화면에 고정합니다. */
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.3 ); /* 검정색 오버레이 색상 및 투명도 조절 */
-  z-index: -1; /* 달력 아래로 배치 */
+  background-color: rgba(0, 0, 0, 0.3);
+  /* 검정색 오버레이 색상 및 투명도 조절 */
+  z-index: -1;
+  /* 달력 아래로 배치 */
 }
 
 .calendar-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 90vh; /* 컨테이너의 높이를 뷰포트의 90%로 설정 */
+  height: 90vh;
+  /* 컨테이너의 높이를 뷰포트의 90%로 설정 */
   position: relative;
 }
 
@@ -45,25 +49,27 @@
 /* 미디어 쿼리: 태블릿 */
 @media screen and (min-width: 768px) {
   .react-calendar {
-    width: 70%; /* 태블릿에서의 너비 */
+    width: 70%;
+    /* 태블릿에서의 너비 */
   }
 }
 
 
-  .react-calendar__navigation span {
-    font-size: 32px;
-  }
+.react-calendar__navigation span {
+  font-size: 32px;
+}
 
-  .react-calendar__navigation__next-button,
-  .react-calendar__navigation__prev-button {
-    font-size: 40px;
-  }
+.react-calendar__navigation__next-button,
+.react-calendar__navigation__prev-button {
+  font-size: 40px;
+}
 
 
 /* 미디어 쿼리: 데스크톱 */
 @media screen and (min-width: 1024px) {
   .react-calendar {
-    width: 60%; /* 데스크톱에서의 너비 */
+    width: 60%;
+    /* 데스크톱에서의 너비 */
   }
 }
 
@@ -73,7 +79,8 @@
 .react-calendar__navigation {
   background-color: #e6e6fa;
   border-bottom: 4px solid #afa4ce;
-  height: 80px; /* 높이 조절을 원하는 값으로 수정 */
+  height: 80px;
+  /* 높이 조절을 원하는 값으로 수정 */
   border-radius: 17px 17px 0 0;
 }
 
@@ -92,11 +99,15 @@
 
 
 .react-calendar__tile {
-  width: 40px; /* 날짜별 칸의 너비를 조절합니다. */
-  height: 100px !important; /* 날짜별 칸의 높이를 조절합니다. */
-  font-size: 16px; /* 날짜의 글꼴 크기를 조절합니다. */
+  width: 40px;
+  /* 날짜별 칸의 너비를 조절합니다. */
+  height: 100px !important;
+  /* 날짜별 칸의 높이를 조절합니다. */
+  font-size: 16px;
+  /* 날짜의 글꼴 크기를 조절합니다. */
   margin-top: 10px !important;
-  margin-right: 8px; /* 날짜 칸 간격 늘림 */
+  margin-right: 8px;
+  /* 날짜 칸 간격 늘림 */
   text-align: center;
   display: flex;
   flex-direction: column;
@@ -129,7 +140,8 @@
 /* 요일 헤더 스타일 */
 .react-calendar__month-view__weekdays {
   display: flex;
-  justify-content: space-around; /* 요일 헤더를 가로로 균등 배치 */
+  justify-content: space-around;
+  /* 요일 헤더를 가로로 균등 배치 */
 }
 
 
@@ -143,45 +155,59 @@
   background-color: transparent;
   color: black;
   border-radius: 0;
-  pointer-events: auto; /* 클릭 이벤트 활성화 */
+  pointer-events: auto;
+  /* 클릭 이벤트 활성화 */
 }
 
 .react-calendar__year-view__months abbr {
-  pointer-events: auto; /* 클릭 이벤트 활성화 */
+  pointer-events: auto;
+  /* 클릭 이벤트 활성화 */
 }
 
 .react-calendar__month-view__days {
-  margin-top: 10px;
+  margin-top: 6px;
 }
 
 /* 요일 색상 및 크기 */
-.react-calendar__month-view__weekdays__weekday:nth-child(1) abbr /* 일 */ {
+.react-calendar__month-view__weekdays__weekday:nth-child(1) abbr
+
+/* 일 */
+  {
   font-size: 20px;
   font-weight: 900;
-  color: red !important; /* 검정색으로 수정 */
+  color: red !important;
+  /* 검정색으로 수정 */
   text-decoration: none;
 }
 
-.react-calendar__month-view__weekdays__weekday:nth-child(7) abbr /* 일 */ {
+.react-calendar__month-view__weekdays__weekday:nth-child(7) abbr
+
+/* 일 */
+  {
   font-size: 20px;
   font-weight: 900;
-  color: blue !important; /* 검정색으로 수정 */
+  color: blue !important;
+  /* 검정색으로 수정 */
   text-decoration: none;
 }
 
-.react-calendar__month-view__weekdays:nth-child(6), /* 목요일 */
+.react-calendar__month-view__weekdays:nth-child(6),
+/* 목요일 */
 .react-calendar__month-view__weekdays:nth-child(7) {
   font-size: 20px;
   font-weight: 900;
-  color: red !important; /* 검정색으로 수정 */
+  color: red !important;
+  /* 검정색으로 수정 */
   text-decoration: none;
 }
 
 
 .react-calendar__tile--active,
 .react-calendar__tile--now {
-  pointer-events: auto; /* 클릭 이벤트 비활성화 */
-  background-color: rgba(215, 175, 211, 0.3); /* RGB에 투명도 추가 */
+  pointer-events: auto;
+  /* 클릭 이벤트 비활성화 */
+  background-color: rgba(215, 175, 211, 0.3);
+  /* RGB에 투명도 추가 */
   border-radius: 14px;
   height: 87px;
 }
@@ -220,201 +246,95 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  pointer-events: auto; /* 클릭 이벤트 활성화 */
+  pointer-events: auto;
+  /* 클릭 이벤트 활성화 */
 }
 
 /* 스티커 크기 */
 .dot {
-  width: 80px; /* 이미지의 너비를 조절합니다. */
-  height: 80px; /* 이미지의 높이를 조절합니다. */
+  width: 65px;
+  height: 65px;
   display: flex;
   justify-content: center;
   align-items: center;
-  pointer-events: auto; /* 클릭 이벤트 활성화 */
+  pointer-events: auto;
+  /* 클릭 이벤트 활성화 */
 }
 
 .dot img {
-  max-width: 100%; /* 이미지의 최대 너비를 조절하여 비율을 유지합니다. */
-  max-height: 100%; /* 이미지의 최대 높이를 조절하여 비율을 유지합니다. */
-  pointer-events: auto; /* 클릭 이벤트 활성화 */
+  max-width: 100%;
+  /* 이미지의 최대 너비를 조절하여 비율을 유지합니다. */
+  max-height: 100%;
+  /* 이미지의 최대 높이를 조절하여 비율을 유지합니다. */
+  pointer-events: auto;
+  /* 클릭 이벤트 활성화 */
 }
 
 
 
-/* 라이트 모드일 때*/
-html.light .react-calendar {
-  width: 80%; /* 너비를 %로 조정 */
-  max-width: 550px; /* 최대 너비 설정 */
+.react-calendar {
+  width: 80%;
+  /* 너비를 %로 조정 */
+  max-width: 550px;
+  /* 최대 너비 설정 */
+  min-height: 300px !important;
+  max-height: 690px;
   border-radius: 20px;
   border: 3px solid #afa4ce;
-  margin: 80vh auto 0; /* 상단 마진을 뷰포트 높이의 %로 조정 */
-  height: auto; /* 높이를 자동으로 설정 */
+  margin: 75vh auto 0;
+  /* 상단 마진을 뷰포트 높이의 %로 조정 */
+  height: auto;
   overflow-y: hidden;
   position: relative;
 }
 
-html.light  .react-calendar__navigation {
-  background-color: #e6e6fa;
-  border-bottom: 4px solid #afa4ce;
-  height: 100px !important; /* 크기를 고정합니다. */
-  border-radius: 17px 17px 0 0;
-  overflow: hidden;
-}
-
-html.light  .react-calendar__month-view {
-  min-height: 320px !important; /* 내부 높이 줄임 */
-  display: flex;
-  flex-direction: column;
-  margin: auto;
-  max-height: 520px; /* 부모 요소의 높이를 따르도록 설정 */
-  position: relative;
-  overflow-y: auto; 
-}
-html.light  .react-calendar__tile {
-  width: 40px; /* 날짜별 칸의 너비를 조절합니다. */
-  height: 100px !important; /* 날짜별 칸의 높이를 조절합니다. */
-  font-size: 16px; /* 날짜의 글꼴 크기를 조절합니다. */
-  margin-top: 10px !important;
-  margin-right: 8px; /* 날짜 칸 간격 늘림 */
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-}
-
-html.light .react-calendar__tile:enabled:hover,
-.react-calendar__tile:enabled:focus,
-.react-calendar__tile--active {
-  background-color: rgba(215, 175, 211, 0.3);
-  border-radius: 14px;
-}
-
-html.light .react-calendar__navigation button:enabled:hover,
-.react-calendar__navigation button:enabled:focus {
-  color: red;
-}
-
-html.light .react-calendar__navigation__label {
-  font-size: 24px;
-  font-weight: 600;
-}
-
-
-
-
-
-
-/* 다크 모드일 때 */
-html.dark .react-calendar {
-  width: 80%; /* 너비를 %로 조정 */
-  max-width: 550px; /* 최대 너비 설정 */
-  border-radius: 20px;
-  border: 3px solid #afa4ce;
-  margin: 80vh auto 0; /* 상단 마진을 뷰포트 높이의 %로 조정 */
-  height: auto; /* 높이를 자동으로 설정 */
-  overflow-y: hidden;
-  position: relative;
-}
-
-html.dark  .react-calendar__navigation {
+.react-calendar__navigation {
   background-color: #e6e6fa;
   border-bottom: 4px solid #afa4ce;
-  height: 100px !important; /* 크기를 고정합니다. */
+  height: 100px !important;
+  /* 크기를 고정합니다. */
   border-radius: 17px 17px 0 0;
   overflow: hidden;
 }
 
-html.dark   .react-calendar__month-view {
-  min-height: 320px !important; /* 내부 높이 줄임 */
+.react-calendar__month-view {
+  min-height: 320px !important;
   display: flex;
   flex-direction: column;
   margin: auto;
-  max-height: 520px; /* 부모 요소의 높이를 따르도록 설정 */
-
+  max-height: 520px;
+  /* 부모 요소의 높이를 따르도록 설정 */
   position: relative;
-  overflow-y: auto; 
+  overflow-y: auto;
 }
 
-html.dark  .react-calendar__tile {
-  width: 40px; /* 날짜별 칸의 너비를 조절합니다. */
-  height: 100px !important; /* 날짜별 칸의 높이를 조절합니다. */
-  font-size: 16px; /* 날짜의 글꼴 크기를 조절합니다. */
+.react-calendar__tile {
+  width: 40px;
+  height: 80px !important;
+  font-size: 16px;
   margin-top: 10px !important;
-  margin-right: 8px; /* 날짜 칸 간격 늘림 */
+  margin-right: 8px;
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 0;
-  background-color: #333;
-  
 }
 
-html.dark .react-calendar__tile:enabled:hover,
+.react-calendar__tile:enabled:hover,
 .react-calendar__tile:enabled:focus,
 .react-calendar__tile--active {
-  background-color: rgba(4, 3, 4, 0.3);
-  border-radius: 14px;
-}
-
-html.dark .react-calendar__tile--active,
-.react-calendar__tile--now {
-  pointer-events: auto; /* 클릭 이벤트 비활성화 */
-  background-color:  rgba(4, 3, 4, 0.3);/* RGB에 투명도 추가 */
+  background-color: rgba(215, 175, 211, 0.3);
   border-radius: 14px;
-  height: 87px;
 }
 
-/* html.dark .react-calendar__month-view__weekdays abbr {
-  color: white; /* 다크 모드 요일 글자색 */
-
-
-
-
-html.dark .react-calendar__navigation button:enabled:hover,
+.react-calendar__navigation button:enabled:hover,
 .react-calendar__navigation button:enabled:focus {
   color: red;
 }
 
-
-html.dark .react-calendar__navigation__label {
+.react-calendar__navigation__label {
   font-size: 24px;
   font-weight: 600;
-  background-color: #333;
-
-}
-
-html.dark .react-calendar__navigation__arrow .react-calendar__navigation__next-button{
-  background-color: #333;
-}
-
-
-/* 달력 내부 스타일 */
-html.dark .react-calendar__month-view__days {
-  margin-top: 10px;
-  height:450px;
-  background-color: #333;
-}
-
-html.dark .react-calendar__navigation__prev2-button {
-  display: none;
-  background-color: #333;
-}
-  
-  
-html.dark .react-calendar__navigation__next-button {
-  background: none;
-  background-color: #333;
-}
-  
-  
-html.dark .react-calendar__navigation__next2-button {
-  display: none;
-  background-color: #333;
-}
-  
-  
-  
\ No newline at end of file
+}
\ No newline at end of file