Refactor: Chats 컬러시스템 background/border 활용해 수정

Author: gustn99

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

@@ -11,7 +11,7 @@ export const ChatBoxContainer = styled.div`
 
 	display: flex;
 	padding: 0.5rem 1.12rem;
-	background-color: ${({ theme }) => theme.colors.text.white};
+	background-color: ${({ theme }) => theme.colors.background.primary};
 	gap: 0.5rem;
 	border-top: 1px solid ${({ theme }) => theme.colors.gray[300]};
 	align-items: center;

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

@@ -10,8 +10,8 @@ export const MessageLayout = styled.div<{ $isSenderChanged: boolean }>`
 
 export const Message = styled(StyledText)`
 	padding: 0.4rem 0.8rem;
-	/* background-color: ${({ theme }) => theme.colors.brand.primaryLight}; */
-	border: 1.2px solid ${({ theme }) => theme.colors.brand.primaryLight};
+	background-color: ${({ theme }) => theme.colors.brand.primaryLight};
+	/* border: 1.2px solid ${({ theme }) => theme.colors.brand.primaryLight}; */
 	border-radius: 0.8rem 0 0.8rem 0.8rem;
 	max-width: 75%;
 	overflow-wrap: break-word;

src/pages/Chats/Matching/Cards/Card/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import ArrowIcon from '@assets/arrow/min-right.svg';
 
 export const CardLayout = styled.div`
-	background-color: ${({ theme }) => theme.colors.gray[200]};
+	background-color: ${({ theme }) => theme.colors.background.divider};
 	border-radius: 0.5rem;
 	position: relative;
 	height: 100%;
@@ -108,7 +108,7 @@ export const OOTDImgBox = styled.div`
 	.childSwiper .swiper-pagination-bullet-active {
 		width: 0.375rem;
 		height: 0.375rem;
-		background-color: ${({ theme }) => theme.colors.white};
+		background-color: ${({ theme }) => theme.colors.background.primary};
 		opacity: 1;
 	}
 

src/pages/Chats/TabBar/styles.tsx

@@ -22,7 +22,7 @@ export const TabBarList = styled.ul`
 `;
 
 export const TabBarWrapper = styled.li<{ $isSelected: boolean; $isPointer: boolean }>`
-	border-bottom: 0.13rem solid ${({ theme }) => theme.colors.gray[200]};
+	border-bottom: 0.13rem solid ${({ theme }) => theme.colors.border.divider};
 	border-image: ${({ $isSelected, theme }) => ($isSelected ? `${theme.colors.brand.gradient} 0 0 1 0` : 'transparent')};
 	text-align: center;
 	flex-grow: 1;