[Refector Style] 마감일 달력 팝업 CSS 커스텀

[Refector Style] 마감일 달력 팝업 CSS 커스텀

Author: MINJI121

src/components/modalInput/ModalInput.tsx

@@ -163,6 +163,7 @@ export default function ModalInput({
               dateFormat="yyyy-MM-dd HH:mm"
               placeholderText="날짜를 입력해 주세요"
               className="w-full h-full text-black3 text-[14px] sm:text-[16px] font:normal outline-none bg-transparent"
+              calendarClassName="text-[14px]"
               popperPlacement="bottom-start"
               popperContainer={({ children }) => <div>{children}</div>}
               popperClassName="custom-datepicker-popper"

src/styles/globals.css

@@ -319,11 +319,6 @@
   font-display: swap;
 }
 
-.custom-datepicker-popper {
-  transform: translateX(-10px) !important;
-  transform: translateY(50px) !important;
-}
-
 /* 스크롤바 숨기기용 유틸리티 */
 .scrollbar-hidden {
   -ms-overflow-style: none; /* IE & Edge */
@@ -332,3 +327,49 @@
 .scrollbar-hidden::-webkit-scrollbar {
   display: none; /* Chrome, Safari */
 }
+
+.custom-datepicker-popper {
+  transform: translateX(-10px) !important;
+  transform: translateY(50px) !important;
+}
+
+@media (max-width: 640px) {
+  .custom-datepicker-popper {
+    font-size: 8px !important;
+  }
+
+  /*시간 선택 컨테이너 폭 조절 */
+  .custom-datepicker-popper .react-datepicker__time-container {
+    width: 45px !important;
+  }
+
+  /* 시간 리스트 영역 크기와 정렬 보정 */
+  .custom-datepicker-popper .react-datepicker__time {
+    width: 50px !important;
+  }
+
+  .custom-datepicker-popper .react-datepicker__time-box {
+    width: 100% !important;
+  }
+
+  .custom-datepicker-popper .react-datepicker__time-list {
+    padding: 2px !important;
+    line-height: 1.2 !important;
+    width: 100% !important;
+    text-align: left !important;
+  }
+
+  .custom-datepicker-popper .react-datepicker__time-list-item {
+    font-size: 10px !important;
+    padding: 2px 4px !important;
+    height: auto !important;
+    word-break: keep-all !important;
+  }
+
+  /*선택된 항목도 작게 & 잘림 방지 */
+  .custom-datepicker-popper .react-datepicker__time-list-item--selected {
+    font-size: 8px !important;
+    padding: 2px 4px !important;
+    border-radius: 4px !important;
+  }
+}