fix: 캘린더 바텀시트 가운데정렬

TEAM-SEONYAK · Oct 28, 2024 · a7ba16b · a7ba16b
1 parent d7b5d7d
commit a7ba16b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/src/pages/juniorPromiseRequest/components/CalendarBottomBar.tsx b/src/pages/juniorPromiseRequest/components/CalendarBottomBar.tsx
@@ -80,15 +80,17 @@ const ButtonLayout = styled.footer`
   gap: 1.1rem;
   justify-content: center;
   position: fixed;
-  bottom: 5rem;
-  left: 0;
+  bottom: 0;
+  left: 50%;
 
   width: 100%;
   height: 9.4rem;
   padding: 1.5rem 0 3rem;
 
   background: ${({ theme }) => theme.colors.grayScaleWhite};
   box-shadow: 0 -8px 30px rgb(0 0 0 / 10%);
+
+  transform: translate(-50%, -50%);
 `;
 
 const ReloadBtn = styled.button`

diff --git a/src/pages/juniorPromiseRequest/components/CalendarBottomSheet.tsx b/src/pages/juniorPromiseRequest/components/CalendarBottomSheet.tsx
@@ -7,6 +7,7 @@ import { useSeniorTimeQuery } from '../hooks/queries';
 import { getDayOfWeek } from '../utils/getDay';
 import Loading from '@components/commons/Loading';
 import { BottomSheetRectangleIc } from '@assets/svgs';
+import { Wrapper } from '@pages/seniorProfile/components/TimeSelect/TimeWeekdays';
 
 interface BottomSheetPropType {
   selectedTime: { id: number; selectedTime: string; clickedDay: string }[];
@@ -98,13 +99,14 @@ const BottomSheetRectangleIcon = styled(BottomSheetRectangleIc)`
 
 const Background = styled.div<{ $isCalendarOpen: boolean }>`
   display: ${({ $isCalendarOpen }) => ($isCalendarOpen ? 'flex' : 'none')};
-  position: fixed;
-  top: 0;
+  position: absolute;
+  left: 50%;
   z-index: 2;
 
+  transform: translate(-50%, -50%);
+
   width: 100%;
   height: 100dvh;
-  margin-left: -2rem;
 
   background: ${({ theme }) => theme.colors.transparentBlack_65};
 `;
@@ -115,11 +117,11 @@ const BottomSheetWrapper = styled.div<{ $isCalendarOpen: boolean }>`
   position: fixed;
   top: 5rem;
   bottom: 0;
+  left: 50%;
   z-index: 4;
 
   width: 100%;
   height: 100vh;
-  margin-left: -2rem;
   padding: 3.8rem 0 0;
   border-radius: 16px 16px 0 0;
 
@@ -129,7 +131,7 @@ const BottomSheetWrapper = styled.div<{ $isCalendarOpen: boolean }>`
   transition:
     transform 250ms ease-out,
     opacity 250ms ease-out;
-  transform: translateY(${({ $isCalendarOpen }) => ($isCalendarOpen ? '0' : '100%')});
+  transform: translate(-50%, ${({ $isCalendarOpen }) => ($isCalendarOpen ? '0' : '100%')});
 `;
 
 const GrayLine = styled.div`