Refactor: 바텀시트 내부 핸들러 & BottomSheetMenu 불필요한 리렌더링 방지

Author: gustn99

src/components/BottomSheet/styles.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 export const BottomSheetWrapper = styled.div<{ $isOpenBottomSheet: boolean }>`
@@ -39,7 +40,7 @@ export const BottomSheetLayout = styled.div<{
 	transition: transform 0.3s;
 `;
 
-export const Handler = styled.hr`
+export const Handler = React.memo(styled.hr`
 	width: 3rem;
 	margin: 0 auto;
 	height: 0.25rem;
@@ -48,4 +49,4 @@ export const Handler = styled.hr`
 	border-radius: 0.125rem;
 	z-index: 300;
 	cursor: pointer;
-`;
+`);

src/components/BottomSheetMenu/index.tsx

@@ -2,8 +2,9 @@ import { StyledText } from '../Text/StyledText';
 import theme from '../../styles/theme';
 import { BottomSheetMenuLayout, SheetItem, Icon } from './styles';
 import { BottomSheetMenuProps, SheetItemDto } from './dto';
+import React from 'react';
 
-const BottomSheetMenu: React.FC<BottomSheetMenuProps> = ({ items, marginBottom }) => {
+const BottomSheetMenu: React.FC<BottomSheetMenuProps> = React.memo(({ items, marginBottom }) => {
 	return (
 		<BottomSheetMenuLayout $marginBottom={marginBottom}>
 			{items.map((item: SheetItemDto, index) => (
@@ -19,6 +20,6 @@ const BottomSheetMenu: React.FC<BottomSheetMenuProps> = ({ items, marginBottom }
 			))}
 		</BottomSheetMenuLayout>
 	);
-};
+});
 
 export default BottomSheetMenu;