Refactor: 바텀시트 데스크톱 UI의 모달 닫기 버튼 렌더링 로직 통일

Author: gustn99

src/components/BottomSheet/OptionsBottomSheet/index.tsx

@@ -208,7 +208,7 @@ const OptionsBottomSheet: React.FC<OptionsBottomSheetProps> = ({
 										setIsReportBottomSheetOpen(false);
 									}}
 								>
-									<img src={closeIcon} alt="" />
+									<img src={closeIcon} alt="닫기" />
 								</CloseButton>
 							</ReportModalHeader>
 							<ReportModalBox>

src/components/BottomSheet/index.tsx

@@ -5,10 +5,11 @@ import {
 	BottomSheetLayout,
 	Handler,
 	SideBarLayout,
-	XButton,
+	CloseButton,
 	SideBarTopBar,
 	ComponentBox,
 } from './styles';
+import closeIcon from '@assets/default/x.svg';
 
 const BottomSheet: React.FC<BottomSheetProps> = ({
 	isOpenBottomSheet,
@@ -150,7 +151,9 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
 			{/* 데스크탑 UI */}
 			<SideBarLayout $isSideBarOpen={isSideBarOpen}>
 				<SideBarTopBar>
-					<XButton onClick={handleCloseButtonClick} />
+					<CloseButton onClick={handleCloseButtonClick}>
+						<img src={closeIcon} alt="닫기" />
+					</CloseButton>
 				</SideBarTopBar>
 				<ComponentBox>
 					<Component {...componentProps} />

src/components/BottomSheet/styles.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import styled from 'styled-components';
-import XIcon from '@assets/default/x.svg';
 
 export const BottomSheetWrapper = styled.div<{ $isBottomSheetOpen: boolean }>`
 	position: fixed;
@@ -65,18 +64,17 @@ export const SideBarLayout = styled.div<{ $isSideBarOpen: boolean }>`
 export const SideBarTopBar = styled.header`
 	display: flex;
 	width: 100%;
-	padding: 0.5rem 1rem;
+	padding: 1rem 1.25rem 1rem 1rem;
 	margin-top: 0;
+	justify-content: flex-end;
 `;
 
-export const XButton = styled.button`
-	width: 2.25rem;
-	height: 2.25rem;
-	margin: auto 0 auto auto;
-	background-image: url(${XIcon});
-	background-repeat: no-repeat;
-	background-size: 17px;
-	background-position: center;
+export const CloseButton = styled.button`
+	width: 1.875rem;
+	height: 1.875rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 `;
 
 export const ComponentBox = styled.section`