feat: (#740) 알림 컨테이너 외부 크기에 맞추어 style 조정

- 사이드바에서 높이 설정
- 툴팁에서는 최대높이 및 가로길이 설정

frontend/src/components/common/WideHeader/index.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent, useRef } from 'react';
+import { CSSProperties, MouseEvent, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { useToggle } from '@hooks';
@@ -13,6 +13,12 @@ import ToolTip from '../ToolTip';
 
 import * as S from './style';
 
+// 70px = 토글 스위치의 크기(40px) 및 상하 padding(각 10px), gap(10px)
+const alarmToolTipStyle: CSSProperties = {
+ maxHeight: '600px',
+ width: '450px',
+};
+
 export default function WideHeader() {
  const navigate = useNavigate();
  const { isOpen, openComponent, closeComponent } = useToggle();
@@ -44,7 +50,7 @@ export default function WideHeader() {
  {isOpen && (
  <S.ToolTipBackdrop onClick={handleToolTipClick} ref={toolTipRef}>
  <ToolTip size="free">
- <AlarmContainer closeToolTip={closeComponent} />
+ <AlarmContainer closeToolTip={closeComponent} style={alarmToolTipStyle} />
  </ToolTip>
  </S.ToolTipBackdrop>
  )}

frontend/src/pages/HomePage/index.tsx

@@ -1,4 +1,4 @@
-import { Suspense } from 'react';
+import { CSSProperties, Suspense } from 'react';
 
 import { useToggle } from '@hooks';
 
@@ -25,6 +25,11 @@ import { smoothScrollToTop } from '@utils/scrollToTop';
 
 import * as S from './style';
 
+// 70px = 토글 스위치의 크기(40px) 및 상하 padding(각 10px), gap(10px)
+const alarmDrawerStyle: CSSProperties = {
+ height: 'calc(100vh - 70px)',
+};
+
 export default function HomePage() {
  const {
  drawerRef: categoryDrawerRdf,
@@ -71,10 +76,10 @@ export default function HomePage() {
  <Drawer
  handleDrawerClose={closeAlarmDrawer}
  placement="right"
- width="225px"
+ width="310px"
  ref={alarmDrawerRef}
  >
- <AlarmContainer closeToolTip={closeAlarmDrawer} />
+ <AlarmContainer closeToolTip={closeAlarmDrawer} style={alarmDrawerStyle} />
  </Drawer>
  </S.DrawerWrapper>
  <ErrorBoundary>