Refactor: BottomSheetMenu 리팩토링

Author: gustn99

src/components/BottomSheetMenu/dto.ts

@@ -1,12 +1,11 @@
-// SheetItemWithDivider에서 사용되는 Items 배열 요소
-export interface SheetItemDto {
-	text: string;
-	action: () => void;
-	icon?: string; // svg를 import하여 값으로 사용
-}
-
 //TODO: marginBottom prop 제거
 export interface BottomSheetMenuProps {
 	items: SheetItemDto[];
 	marginBottom?: string;
 }
+
+export interface SheetItemDto {
+	text: string;
+	action: () => void;
+	icon?: string; // svg를 import하여 값으로 사용
+}

src/components/BottomSheetMenu/index.tsx

@@ -1,5 +1,5 @@
-import { StyledText } from '../Text/StyledText';
-import { BottomSheetMenuLayout, SheetItem, Icon } from './styles';
+import { StyledText } from '@components/Text/StyledText';
+import { BottomSheetMenuLayout, SheetItem, IconButton } from './styles';
 import { BottomSheetMenuProps, SheetItemDto } from './dto';
 import React from 'react';
 
@@ -12,7 +12,11 @@ const BottomSheetMenu: React.FC<BottomSheetMenuProps> = React.memo(({ items }) =
 						<StyledText $textTheme={{ style: 'body1-medium' }} color={'#7b7b7b'}>
 							{item.text}
 						</StyledText>
-						{item.icon && <Icon src={item.icon} />}
+						{item.icon && (
+							<IconButton>
+								<img src={item.icon} alt={`${item.text} 아이콘`} />
+							</IconButton>
+						)}
 					</SheetItem>
 				</div>
 			))}

src/components/BottomSheetMenu/styles.tsx

@@ -16,7 +16,10 @@ export const SheetItem = styled.li`
 	border-bottom: 1px solid rgb(0, 0, 0, 0.2);
 `;
 
-export const Icon = styled.img`
+export const IconButton = styled.button`
 	width: 1.5rem;
 	height: 1.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 `;

src/pages/Chats/ChatRoom/index.tsx

@@ -184,7 +184,6 @@ const ChatRoom: React.FC = () => {
 				icon: Block,
 			},
 		],
-		marginBottom: '4.38rem',
 	};
 
 	const leaveModalProps: ModalProps = {