Refactor: 바텀시트 컬러시스템 적용

Author: gustn99

src/components/BottomSheet/OptionsBottomSheet/ReportBottomSheetMenu/styles.tsx

@@ -11,21 +11,27 @@ export const InputLayout = styled.div`
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
+	background-color: ${({ theme }) => theme.colors.background.primary};
+	padding: 0 1rem;
+	margin-bottom: 6.25rem;
+	margin-top: -1rem;
 
 	textarea {
 		display: block;
 		width: 100%;
 		height: 5.25rem;
-		border-radius: 0.5rem;
-		border: 0.0625rem solid #ededed;
-		margin-bottom: 5.25rem;
-		margin-top: -1rem;
+		padding: 0.8rem 0.9375rem;
 		outline: none;
-		padding: 1rem 0.9375rem;
+		border-radius: 0.5rem;
+		border: 0.0625rem solid ${({ theme }) => theme.colors.border.divider};
 		${({ theme }) => theme.fontStyles['body1-medium']};
-		line-height: 1.25%;
-		color: #1d1d1d;
-		background-color: #f8f8f8;
+		color: ${({ theme }) => theme.colors.text.primary};
+		background-color: ${({ theme }) => theme.colors.background.secondary};
 		resize: none;
+
+		&::placeholder {
+			color: ${({ theme }) => theme.colors.text.tertiary};
+			${({ theme }) => theme.fontStyles['body2-regular']};
+		}
 	}
 `;

src/components/BottomSheet/OptionsBottomSheet/index.tsx

@@ -200,7 +200,7 @@ const OptionsBottomSheet: React.FC<OptionsBottomSheetProps> = ({
 					<ReportModalWrapper onClick={handleBackgroundClick}>
 						<ReportModalContainer>
 							<ReportModalHeader>
-								<StyledText $textTheme={{ style: 'heading1-bold' }} color={theme.colors.white}>
+								<StyledText $textTheme={{ style: 'heading1-bold' }} color={theme.colors.text.contrast}>
 									신고 사유 선택
 								</StyledText>
 								<CloseButton

src/components/BottomSheet/OptionsBottomSheet/styles.tsx

@@ -33,7 +33,7 @@ export const ReportModalContainer = styled.div`
 	justify-content: center;
 	align-items: center;
 	border-radius: 0.38rem;
-	background-color: ${({ theme }) => theme.colors.white};
+	background-color: ${({ theme }) => theme.colors.background.primary};
 `;
 
 export const ReportModalHeader = styled.header`
@@ -44,7 +44,7 @@ export const ReportModalHeader = styled.header`
 	justify-content: space-between;
 	align-items: center;
 	border-radius: 0.38rem 0.38rem 0 0;
-	background: ${({ theme }) => theme.colors.gradient};
+	background: ${({ theme }) => theme.colors.brand.gradient};
 `;
 
 export const ReportModalBox = styled.section`

src/components/BottomSheet/styles.tsx

@@ -31,7 +31,7 @@ export const BottomSheetLayout = styled.div.attrs<{ $currentTranslateY: number;
 	max-width: 512px;
 	left: 50%;
 	border-radius: 0.938rem 0.938rem 0 0;
-	background-color: ${({ theme }) => theme.colors.white};
+	background-color: ${({ theme }) => theme.colors.background.primary};
 	padding: 0 1.25rem;
 	z-index: 200;
 	user-select: none;
@@ -43,7 +43,7 @@ export const Handler = React.memo(styled.hr`
 	width: 2.88rem;
 	margin: 0.6rem auto 0 auto;
 	height: 0.125rem;
-	background-color: #d9d9d9;
+	background-color: ${({ theme }) => theme.colors.gray[300]};
 	border: none;
 	border-radius: 0.125rem;
 	z-index: 300;
@@ -56,7 +56,7 @@ export const SideBarLayout = styled.div<{ $isSideBarOpen: boolean }>`
 	height: 100%;
 	position: fixed;
 	right: 0;
-	background: white;
+	background: ${({ theme }) => theme.colors.background.primary};
 	transform: translateX(${({ $isSideBarOpen }) => ($isSideBarOpen ? 0 : '100%')});
 	transition: transform 0.3s;
 `;

src/components/BottomSheetMenu/index.tsx

@@ -2,14 +2,15 @@ import { StyledText } from '@components/Text/StyledText';
 import { BottomSheetMenuLayout, SheetItem, IconButton } from './styles';
 import type { BottomSheetMenuProps, SheetItemDto } from './dto';
 import React from 'react';
+import theme from '@styles/theme';
 
 const BottomSheetMenu: React.FC<BottomSheetMenuProps> = React.memo(({ items }) => {
 	return (
 		<BottomSheetMenuLayout>
 			{items.map((item: SheetItemDto, index) => (
 				<div key={index}>
 					<SheetItem onClick={item.action}>
-						<StyledText $textTheme={{ style: 'body1-medium' }} color={'#7b7b7b'}>
+						<StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.text.tertiary}>
 							{item.text}
 						</StyledText>
 						{item.icon && (

src/components/BottomSheetMenu/styles.tsx

@@ -13,7 +13,7 @@ export const SheetItem = styled.li`
 	align-items: center;
 	justify-content: space-between;
 	cursor: pointer;
-	border-bottom: 1px solid rgb(0, 0, 0, 0.2);
+	border-bottom: 1px solid ${({ theme }) => theme.colors.gray[300]};
 `;
 
 export const IconButton = styled.button`

src/components/CommentBottomSheet/Comment/styles.tsx

@@ -13,7 +13,7 @@ export const SendContainer = styled.div`
 	width: 100%;
 	min-height: 2.5rem;
 	display: flex;
-	border: 1px solid #ff2389;
+	border: 1px solid ${({ theme }) => theme.colors.border.active};
 	border-radius: 0.5rem;
 	align-items: center;
 `;
@@ -27,11 +27,8 @@ export const CommentTextarea = styled.textarea`
 	background-color: transparent;
 	resize: none;
 	overflow: hidden;
-	font-family: 'Pretendard Variable';
-	font-size: 1rem;
-	font-style: normal;
-	font-weight: 300;
-	line-height: 1.2rem;
+	color: ${({ theme }) => theme.colors.text.primary};
+	${({ theme }) => theme.fontStyles['body2-regular']};
 `;
 
 export const SendButton = styled.button`

src/components/CommentBottomSheet/index.tsx

@@ -52,8 +52,8 @@ const CommentBottomSheet: React.FC<CommentBottomSheetProps> = ({
 					<CommentModalWrapper onClick={handleBackgroundClick}>
 						<CommentModalContainer>
 							<CommentModalHeader>
-								<StyledText $textTheme={{ style: 'heading1-bold' }} color={theme.colors.white}>
-									메시지 보내기
+								<StyledText $textTheme={{ style: 'heading1-bold' }} color={theme.colors.text.contrast}>
+									매칭 요청
 								</StyledText>
 								<CloseButton onClick={handleCloseButtonClick}>
 									<img src={closeIcon} alt="닫기" />

src/components/CommentBottomSheet/styles.tsx

@@ -33,7 +33,7 @@ export const CommentModalContainer = styled.div`
 	justify-content: center;
 	align-items: center;
 	border-radius: 0.38rem;
-	background-color: ${({ theme }) => theme.colors.white};
+	background-color: ${({ theme }) => theme.colors.background.primary};
 `;
 
 export const CommentModalHeader = styled.header`
@@ -44,7 +44,7 @@ export const CommentModalHeader = styled.header`
 	justify-content: space-between;
 	align-items: center;
 	border-radius: 0.38rem 0.38rem 0 0;
-	background: ${({ theme }) => theme.colors.gradient};
+	background: ${({ theme }) => theme.colors.brand.gradient};
 `;
 
 export const CommentModalBox = styled.section`