Fix: 캘린더 height 버그 수정 (#372)

co-KKIRI · May 31, 2024 · 8c61fe3 · 8c61fe3
1 parent 93cec5a
commit 8c61fe3
Showing 1 changed file with 18 additions and 13 deletions.
diff --git a/co-kkiri/src/components/commons/DropDowns/DeadlineDropdown/DeadlineDropdown.tsx b/co-kkiri/src/components/commons/DropDowns/DeadlineDropdown/DeadlineDropdown.tsx
@@ -34,13 +34,15 @@ export default function DeadlineDropdown({ placeholder, selectedOption, onChange
       />
       {isOpen && (
         <CalendarWrapper>
-          <Calendar
-            mode="single"
-            selected={selectedOption ? new Date(selectedOption) : undefined}
-            onSelect={handleSelectDate}
-            initialFocus
-            className="scale-125"
-          />
+          <CalendarBox>
+            <Calendar
+              mode="single"
+              selected={selectedOption ? new Date(selectedOption) : undefined}
+              onSelect={handleSelectDate}
+              initialFocus
+              className="scale-125"
+            />
+          </CalendarBox>
         </CalendarWrapper>
       )}
     </Container>
@@ -66,18 +68,21 @@ const Container = styled.div`
     width: 32rem;
   }
 `;
-
 const CalendarWrapper = styled.div`
   position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 21rem;
-  height: 24.2rem;
   top: 5.4rem;
   left: 0;
   background-color: white;
   border-radius: 0.5rem;
   border: 0.1rem solid ${color.gray[2]};
   ${zIndex.dropdown}
 `;
+
+const CalendarBox = styled.div`
+  width: 21rem;
+  height: fit-content;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 3rem;
+`;