[OD-167] Chats/Home/컴포넌트 컬러시스템 적용

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`

src/components/Frame/Frame.tsx

@@ -3,7 +3,7 @@ import theme from '@styles/theme';
 
 export const OODDFrame = styled.div`
 	${theme.breakPoints};
-	background-color: ${({ theme }) => theme.colors.white};
+	background-color: ${({ theme }) => theme.colors.background.primary};
 	height: 100vh;
 	margin: auto;
 	display: flex;

src/components/Loading/styles.tsx

@@ -35,7 +35,7 @@ export const Dot = styled.hr<{ $index: number }>`
 	z-index: 200;
 	border-radius: 50%;
 	border: none;
-	background-color: ${({ theme }) => theme.colors.gray2};
+	background-color: ${({ theme }) => theme.colors.gray[300]};
 
 	// 각 점에 대해 딜레이를 적용하여 순차적으로 애니메이션을 시작
 	animation: ${bounceGroup} 2s ease-in-out infinite;

src/components/Modal/styles.tsx

@@ -26,7 +26,7 @@ export const ModalContainer = styled.div<{ $isCloseButtonVisible: boolean }>`
 	max-height: 30%;
 	padding: 2rem 1.5rem 1.5rem 1.5rem;
 	${({ $isCloseButtonVisible }) => ($isCloseButtonVisible ? 'padding-top: 2.5rem' : '')};
-	background-color: ${({ theme }) => theme.colors.white};
+	background-color: ${({ theme }) => theme.colors.background.primary};
 	border-radius: 0.625rem;
 	box-shadow: 0 -0.125rem 0.625rem rgba(0, 0, 0, 0.1);
 	z-index: 999;
@@ -49,7 +49,7 @@ export const ConfirmButton = styled.button`
 	padding: 0.625rem 0.875rem;
 	justify-content: center;
 	align-items: center;
-	background: ${({ theme }) => theme.colors.gradient};
+	background: ${({ theme }) => theme.colors.brand.gradient};
 	border-radius: 0.5rem;
 	color: white;
 	${({ theme }) => theme.fontStyles['body1-medium']}

src/components/NavBar/index.tsx

@@ -22,6 +22,7 @@ import { StyledText } from '@components/Text/StyledText';
 import Modal from '@components/Modal';
 import type { ModalProps } from '@components/Modal/dto';
 import { getCurrentUserId } from '@utils/getCurrentUserId';
+import theme from '@styles/theme';
 
 const NavBar: React.FC = () => {
 	const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
@@ -120,7 +121,7 @@ const NavBar: React.FC = () => {
 								<StyledText
 									className="styled-text"
 									$textTheme={{ style: selectedTab === tab.name ? `heading2-bold` : 'heading2-medium' }}
-									color="#1d1d1d"
+									color={theme.colors.text.primary}
 								>
 									{tab.name}
 								</StyledText>

src/components/NavBar/styles.tsx

@@ -1,19 +1,17 @@
 import styled from 'styled-components';
 
 export const NavBarContainer = styled.nav`
-	// fixed 포지션에 breakPoint를 적용하는 방법
 	position: fixed;
-	${({ theme }) => theme.visibleOnMobileTablet}; // breakPoint 미디어쿼리
-	bottom: 0; // 경우에 따라 top 0 등으로 작성
-	left: 50%; // 수직 중앙에 위치
-	transform: translateX(-50%); // width에 따른 수직 중앙 조정
-	width: 100%; // brakePoint에 따른 width에 따르도록 설정
+	${({ theme }) => theme.visibleOnMobileTablet};
+	bottom: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 100%;
 
-	// 이후로 자기 코드에 맞춰서 작성
 	height: 5.5rem;
 	justify-content: center;
 	align-items: center;
-	background: ${({ theme }) => theme.colors.gradient}; // 여기서 그래디언트 색상 사용
+	background: ${({ theme }) => theme.colors.brand.gradient};
 	margin: 0;
 	border-radius: 1.25rem 1.25rem 0 0;
 	filter: drop-shadow(0rem 0rem 0.25rem rgba(0, 0, 0, 0.25));
@@ -66,7 +64,7 @@ export const SideNavBarContainer = styled.nav`
 	padding: 2.5rem 1.5rem;
 	border-radius: 0 3rem 3rem 0;
 	position: fixed;
-	background: white;
+	background: ${({ theme }) => theme.colors.background.primary};
 	filter: drop-shadow(0rem 0rem 0.25rem rgba(0, 0, 0, 0.25));
 `;
 
@@ -90,7 +88,7 @@ export const SideNavBarHeader = styled.header`
 	}
 
 	button:hover {
-		background: rgba(0, 0, 0, 0.1);
+		background: ${({ theme }) => theme.colors.gray[200]};
 	}
 `;
 
@@ -110,7 +108,7 @@ export const SideNavBarButton = styled.label`
 		align-items: center;
 		border-radius: 50%;
 		padding: 0.6rem;
-		background: white;
+		background: ${({ theme }) => theme.colors.background.primary};
 		transition: background 0.2s;
 
 		box-shadow:
@@ -120,7 +118,7 @@ export const SideNavBarButton = styled.label`
 	}
 
 	button:hover {
-		background: rgba(0, 0, 0, 0.1);
+		background: ${({ theme }) => theme.colors.gray[200]};
 	}
 
 	img {

src/components/Text/StyledText.tsx

@@ -4,7 +4,7 @@ import { useMediaQuery } from 'react-responsive';
 import type { StyledTextProps } from './dto';
 
 export const StyledText = styled.div<StyledTextProps>`
-	color: ${(props) => props.color || theme.colors.black};
+	color: ${(props) => props.color || theme.colors.text.primary};
 	white-space: pre-line;
 	${(props) => {
 		const isMobile = useMediaQuery({ maxWidth: '767px' });

src/pages/Chats/ChatRoom/ChatBox/index.tsx

@@ -14,10 +14,10 @@ const ChatBox: React.FC = () => {
 	const { chatRoomId } = useParams();
 	const currentUserId = getCurrentUserId();
 	const otherUser = useRecoilValue(OtherUserAtom);
-	const isOpponentValid = !!(otherUser && otherUser.id);
+	const isOtherUserValid = !!(otherUser && otherUser.id);
 
 	useEffect(() => {
-		if (textareaRef.current && !isOpponentValid) {
+		if (textareaRef.current && !isOtherUserValid) {
 			textareaRef.current.disabled = true;
 			textareaRef.current.placeholder = '메시지를 보낼 수 없습니다.';
 		}
@@ -64,15 +64,15 @@ const ChatBox: React.FC = () => {
 	return (
 		<ChatBoxContainer>
 			<Textarea
-				$isOpponentValid={isOpponentValid}
+				$isOtherUserValid={isOtherUserValid}
 				placeholder="메시지 보내기"
 				ref={textareaRef}
 				value={newMessage}
 				onChange={handleMessageChange}
 				onKeyDown={handleEnterKeyDown}
 				onSubmit={handleNewMessageSubmit}
 			/>
-			<SendButton $isOpponentValid={isOpponentValid} onClick={handleNewMessageSubmit} />
+			<SendButton $isOtherUserValid={isOtherUserValid} onClick={handleNewMessageSubmit} />
 		</ChatBoxContainer>
 	);
 };

src/pages/Chats/ChatRoom/ChatBox/styles.tsx

@@ -11,13 +11,13 @@ export const ChatBoxContainer = styled.div`
 
 	display: flex;
 	padding: 0.5rem 1.12rem;
-	background-color: white;
+	background-color: ${({ theme }) => theme.colors.background.primary};
 	gap: 0.5rem;
-	border-top: 1px solid ${({ theme }) => theme.colors.gray2};
+	border-top: 1px solid ${({ theme }) => theme.colors.gray[300]};
 	align-items: center;
 `;
 
-export const Textarea = styled.textarea<{ $isOpponentValid: boolean }>`
+export const Textarea = styled.textarea<{ $isOtherUserValid: boolean }>`
 	width: 100%;
 	max-height: 5rem;
 	border: none;
@@ -26,24 +26,24 @@ export const Textarea = styled.textarea<{ $isOpponentValid: boolean }>`
 	outline: none;
 	resize: none;
 	overflow: hidden;
-	color: ${({ theme }) => theme.colors.black};
-	cursor: ${({ $isOpponentValid }) => ($isOpponentValid ? '' : 'not-allowed')};
+	color: ${({ theme }) => theme.colors.text.primary};
+	cursor: ${({ $isOtherUserValid }) => ($isOtherUserValid ? '' : 'not-allowed')};
 	background-color: #f2f2f2;
 	${({ theme }) => theme.fontStyles['body2-regular']};
 
 	&::placeholder {
-		color: ${({ theme }) => theme.colors.gray2};
+		color: ${({ theme }) => theme.colors.text.tertiary};
 		${({ theme }) => theme.fontStyles['body2-regular']};
 	}
 `;
 
-export const SendButton = styled.button<{ $isOpponentValid: boolean }>`
+export const SendButton = styled.button<{ $isOtherUserValid: boolean }>`
 	padding: 1.12rem;
 	border-radius: 50%;
-	background-color: #ffe9f3;
+	background-color: ${({ theme }) => theme.colors.brand.primaryLight};
 	background-image: url(${SendIcon});
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: 1.2rem 1.2rem;
-	cursor: ${({ $isOpponentValid }) => ($isOpponentValid ? 'pointer' : '')};
+	cursor: ${({ $isOtherUserValid }) => ($isOtherUserValid ? 'pointer' : '')};
 `;

src/pages/Chats/ChatRoom/DateBar/index.tsx

@@ -10,7 +10,7 @@ const DateBar: React.FC<DateBarProps> = React.memo(({ formattedDate }) => {
 	return (
 		<DatebarLayout>
 			<Divider />
-			<Date $textTheme={{ style: 'caption1-regular' }} color={theme.colors.gray3}>
+			<Date $textTheme={{ style: 'caption1-regular' }} color={theme.colors.text.tertiary}>
 				{formattedDate}
 			</Date>
 			<Divider />