Refactor: CommentBottomSheet 리팩토링

Author: gustn99

src/components/Comment/dto.ts …onents/CommentBottomSheet/Comment/dto.tssrc/components/Comment/dto.ts renamed to src/components/CommentBottomSheet/Comment/dto.ts src/components/Comment/dto.ts renamed to src/components/CommentBottomSheet/Comment/dto.ts

@@ -1,10 +1,11 @@
-import { StyledText } from '../Text/StyledText';
-import theme from '../../styles/theme';
+import { StyledText } from '@components/Text/StyledText';
+import theme from '@styles/theme';
 
-import BottomSheet from '../BottomSheet';
-import Comment from '../Comment';
-import { BottomSheetProps } from '../BottomSheet/dto';
-import { CommentBottomSheetProps } from './dto';
+import BottomSheet from '@components/BottomSheet';
+import Comment from './Comment/index';
+import type { BottomSheetProps } from '@components/BottomSheet/dto';
+import type { CommentBottomSheetProps } from './dto';
+import closeIcon from '@assets/default/modal-close-white.svg';
 
 import {
 	CommentBottomSheetLayout,
@@ -13,32 +14,32 @@ import {
 	CommentModalHeader,
 	CommentModalLayout,
 	CommentModalWrapper,
-	XButton,
+	CloseButton,
 } from './styles';
 
 const CommentBottomSheet: React.FC<CommentBottomSheetProps> = ({
 	isBottomSheetOpen,
 	commentProps,
 	handleCloseBottomSheet,
 }) => {
-	const bottomSheetProps: BottomSheetProps = {
-		isOpenBottomSheet: isBottomSheetOpen,
-		Component: Comment,
-		componentProps: commentProps,
-		onCloseBottomSheet: handleCloseBottomSheet,
-	};
-
 	const handleBackgroundClick = (e: React.MouseEvent<HTMLDivElement>) => {
 		e.stopPropagation();
 		if (e.target === e.currentTarget) {
 			handleCloseBottomSheet();
 		}
 	};
 
-	const handleButtonClick = () => {
+	const handleCloseButtonClick = () => {
 		handleCloseBottomSheet();
 	};
 
+	const bottomSheetProps: BottomSheetProps = {
+		isOpenBottomSheet: isBottomSheetOpen,
+		Component: Comment,
+		componentProps: commentProps,
+		onCloseBottomSheet: handleCloseBottomSheet,
+	};
+
 	return (
 		<>
 			{/* 모바일 & 태블릿 UI */}
@@ -54,7 +55,9 @@ const CommentBottomSheet: React.FC<CommentBottomSheetProps> = ({
 								<StyledText $textTheme={{ style: 'heading1-bold' }} color={theme.colors.white}>
 									메시지 보내기
 								</StyledText>
-								<XButton onClick={handleButtonClick} />
+								<CloseButton onClick={handleCloseButtonClick}>
+									<img src={closeIcon} alt="닫기" />
+								</CloseButton>
 							</CommentModalHeader>
 							<CommentModalBox>
 								<Comment {...commentProps} isModal={true} />

src/components/Comment/index.tsx …nts/CommentBottomSheet/Comment/index.tsxsrc/components/Comment/index.tsx renamed to src/components/CommentBottomSheet/Comment/index.tsx src/components/Comment/index.tsx renamed to src/components/CommentBottomSheet/Comment/index.tsx

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import CloseIcon from '../../assets/default/modal-close-white.svg';
 
 export const CommentBottomSheetLayout = styled.div`
 	${({ theme }) => theme.visibleOnMobileTablet};
@@ -54,13 +53,11 @@ export const CommentModalBox = styled.section`
 	width: 100%;
 `;
 
-export const XButton = styled.button`
+export const CloseButton = styled.button`
 	width: 1.875rem;
 	height: 1.875rem;
-	margin: auto 0 auto auto;
-	background-image: url(${CloseIcon});
-	background-repeat: no-repeat;
-	background-size: 1.875rem;
-	background-position: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 	opacity: 0.5;
 `;