[DESIGN] TimePicker에서 시작 시간 및 종료 시간이 1시간 단위로 표현되게 UI 수정

src/components/TimePicker.css

@@ -4,32 +4,32 @@
   align-items: center;
   margin-top: 20px;
   padding: 20px;
+  /* height: 800px; */
 }
-.modal-overlay {
-  touch-action: none; /* 모바일에서 스크롤 방지 */
-  -webkit-tap-highlight-color: transparent; /* 탭 하이라이트 제거 */
+/* .modal-overlay {
+  touch-action: none; 
+  -webkit-tap-highlight-color: transparent; 
 }
 
 .modal-content {
-  touch-action: pan-y; /* 모달 내부는 세로 스크롤 허용 */
-  -webkit-overflow-scrolling: touch; /* iOS에서 부드러운 스크롤 */
+  touch-action: pan-y; 
+  -webkit-overflow-scrolling: touch; 
+} */
+.time-section {
+  width: 100%;
+  margin-bottom: 16px;
 }
 
-
 .time-option.disabled {
   opacity: 0.5;
   cursor: not-allowed;
   color: #ccc;
 }
 .time-label {
-  color: #444444;
-  font-family: "Pretendard-Medium", Helvetica;
-  font-size: 14px;
-  font-weight: 500;
-  margin-left: 0;
-  margin-bottom: 10px;
-  text-align: left;
-  width: 100%;
+
+  display: flex;
+  flex-direction: row;
+
 }
 
 .time-range {
@@ -38,9 +38,11 @@
   background-color: #ffffff;
   border: 1px solid #f2f2f2;
   border-radius: 6px;
-  height: 48px;
+  height: auto;
   padding: 0 27px;
   gap: 10px;
+  flex-direction: column;
+
 }
 
 .time-range.disabled {
@@ -64,6 +66,13 @@
   font-size: 16px;
   cursor: pointer;
 }
+.time-title {
+  background-color: white;
+  border: none;
+  padding: 14px 21px;
+  font-size: 16px;
+  cursor: pointer;
+}
 
 .time-button.disabled {
   /* 필요한 경우 스타일 추가 */
@@ -192,16 +201,26 @@ input:checked + .slider:before {
   margin: 30px auto;
 }
 
-.hour-select,
-.minute-select {
-  max-height: 200px; /* 필요에 따라 높이 조정 */
+.hour-select{
+  max-height: 160px; /* 필요에 따라 높이 조정 */
   overflow-y: auto; /* 스크롤 가능하게 변경 */
   margin: 0 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
+  width:200px;
 }
 
+.time-options {
+  display: flex;
+  flex-direction: column;
+  max-height: 150px; /* 3개만 표시 */
+  overflow-y: auto; /* 초과 숨김 */
+  padding: 8px;
+}
+
+
+
 .time-option {
   padding: 19px 25px;
   cursor: pointer;
@@ -217,7 +236,7 @@ input:checked + .slider:before {
 }
 
 .time-option.selected {
-  color: black;
+  color: blue;
 }
 
 .time-option:hover {
@@ -232,7 +251,8 @@ input:checked + .slider:before {
 
 /* 스크롤바 숨기기 (필요 시) */
 .hour-select::-webkit-scrollbar,
-.minute-select::-webkit-scrollbar {
+.minute-select::-webkit-scrollbar
+.time-option::-webkit-scrollbar {
   width: 0;
   background: transparent;
 }