Refactor: Chats 컬러시스템 적용

gustn99 · gustn99 · commit 07db36da3916 · 2024-12-29T00:34:57.000+09:00
diff --git a/src/pages/Chats/ChatRoom/ChatBox/styles.tsx b/src/pages/Chats/ChatRoom/ChatBox/styles.tsx
@@ -11,9 +11,9 @@ export const ChatBoxContainer = styled.div`
 
 	display: flex;
 	padding: 0.5rem 1.12rem;
-	background-color: white;
+	background-color: ${({ theme }) => theme.colors.text.white};
 	gap: 0.5rem;
-	border-top: 1px solid ${({ theme }) => theme.colors.gray2};
+	border-top: 1px solid ${({ theme }) => theme.colors.gray[300]};
 	align-items: center;
 `;
 
@@ -26,21 +26,21 @@ export const Textarea = styled.textarea<{ $isOtherUserValid: boolean }>`
 	outline: none;
 	resize: none;
 	overflow: hidden;
-	color: ${({ theme }) => theme.colors.black};
+	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<{ $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;
diff --git a/src/pages/Chats/ChatRoom/DateBar/index.tsx b/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 />
diff --git a/src/pages/Chats/ChatRoom/RcvdMessage/index.tsx b/src/pages/Chats/ChatRoom/RcvdMessage/index.tsx
@@ -19,19 +19,24 @@ const RcvdMessage: React.FC<RcvdMessageProps & { onClickProfile: () => void }> =
 				<FirstMessageLayout $isSenderChanged={isSenderChanged}>
 					<UserImage onClick={onClickProfile} src={profilePictureUrl} alt="프로필 사진" />
 					<MessageBox>
-						<UsernameText onClick={onClickProfile} $textTheme={{ style: 'body2-regular' }} color={theme.colors.black}>
+						<UsernameText
+							onClick={onClickProfile}
+							$textTheme={{ style: 'body2-regular' }}
+							color={theme.colors.text.primary}
+						>
 							{fromUserNickname}
 						</UsernameText>
-						<Message $textTheme={{ style: 'body2-regular' }} color={theme.colors.black}>
+						<Message $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
 							{content}
 						</Message>
 					</MessageBox>
+					{isTimeVisible && <TimeWrapper>{formattedTime}</TimeWrapper>}
 				</FirstMessageLayout>
 			);
 		} else {
 			return (
 				<MessageLayout>
-					<Message $textTheme={{ style: 'body2-regular' }} color={theme.colors.black}>
+					<Message $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
 						{content}
 					</Message>
 					{isTimeVisible && <TimeWrapper>{formattedTime}</TimeWrapper>}
diff --git a/src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx b/src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx
@@ -43,7 +43,7 @@ export const Message = styled(StyledText)`
 export const TimeWrapper = styled.time`
 	display: flex;
 	align-items: flex-end;
-	color: ${({ theme }) => theme.colors.gray3};
+	color: ${({ theme }) => theme.colors.text.caption};
 	font-family: 'Pretendard Variable';
 	font-size: 0.5625rem;
 	font-style: normal;
diff --git a/src/pages/Chats/ChatRoom/SentMessage/index.tsx b/src/pages/Chats/ChatRoom/SentMessage/index.tsx
@@ -8,7 +8,7 @@ const SentMessage: React.FC<SentMessageProps> = React.memo(
 		return (
 			<MessageLayout $isSenderChanged={isSenderChanged}>
 				{isTimeVisible && <TimeWrapper>{formattedTime}</TimeWrapper>}
-				<Message $textTheme={{ style: 'body2-regular' }} color={theme.colors.black}>
+				<Message $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
 					{content}
 				</Message>
 			</MessageLayout>
diff --git a/src/pages/Chats/ChatRoom/SentMessage/styles.tsx b/src/pages/Chats/ChatRoom/SentMessage/styles.tsx
@@ -10,7 +10,8 @@ export const MessageLayout = styled.div<{ $isSenderChanged: boolean }>`
 
 export const Message = styled(StyledText)`
 	padding: 0.4rem 0.8rem;
-	background-color: #ffe9f3;
+	/* 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;
@@ -20,7 +21,7 @@ export const TimeWrapper = styled.time`
 	display: flex;
 	align-items: flex-end;
 	margin-right: 0.5rem;
-	color: #8e8e93;
+	color: ${({ theme }) => theme.colors.text.caption};
 	font-family: 'Pretendard Variable';
 	font-size: 0.5625rem;
 	font-style: normal;
diff --git a/src/pages/Chats/ChatRoomItem/index.tsx b/src/pages/Chats/ChatRoomItem/index.tsx
@@ -9,6 +9,7 @@ import 'dayjs/locale/ko';
 import { useEffect, useState } from 'react';
 import type { ChatRoomData } from '@apis/chatting/dto';
 import defaultProfile from '@assets/default/defaultProfile.svg';
+import theme from '@styles/theme';
 dayjs.extend(relativeTime);
 
 const ChatRoomItem: React.FC<ChatRoomData> = ({ id, otherUser, latestMessage }) => {
@@ -42,15 +43,15 @@ const ChatRoomItem: React.FC<ChatRoomData> = ({ id, otherUser, latestMessage })
 		<ChatRoomItemLayout onClick={handleChatRoomClick}>
 			<UserImage src={otherUser?.profilePictureUrl || defaultProfile} alt="user" />
 			<LeftBox>
-				<StyledText $textTheme={{ style: 'body2-medium' }} color="#1D1D1D">
+				<StyledText $textTheme={{ style: 'body2-medium' }} color={theme.colors.text.primary}>
 					{otherUser?.nickname || '알수없음'}
 				</StyledText>
-				<LatestMessage $textTheme={{ style: 'caption2-regular' }} color="#1D1D1D">
+				<LatestMessage $textTheme={{ style: 'caption2-regular' }} color={theme.colors.text.primary}>
 					{latestMessage.content}
 				</LatestMessage>
 			</LeftBox>
 			<RightBox>
-				<StyledText $textTheme={{ style: 'caption2-regular' }} color="#8e8e93">
+				<StyledText $textTheme={{ style: 'caption2-regular' }} color={theme.colors.text.caption}>
 					{timeAgo}
 				</StyledText>
 			</RightBox>
diff --git a/src/pages/Chats/Matching/Cards/Card/index.tsx b/src/pages/Chats/Matching/Cards/Card/index.tsx
@@ -87,17 +87,21 @@ const Card: React.FC<CardProps> = ({ removeRejectedMatching, matching }) => {
 					<img src={requester.profilePictureUrl || defaultProfile} alt="profile" />
 				</ProfileImgBox>
 				<ProfileInfo>
-					<StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.black} onClick={handleUserClick}>
+					<StyledText
+						$textTheme={{ style: 'body1-medium' }}
+						color={theme.colors.text.primary}
+						onClick={handleUserClick}
+					>
 						{requester.nickname || '알수없음'}
 					</StyledText>
 					<div className="row-flex">
 						{requester.representativePost.styleTags.map((tag, index) => (
 							<div className="row-flex" key={tag}>
-								<StyledText $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray1}>
+								<StyledText $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray[200]}>
 									{tag}
 								</StyledText>
 								{index < requester.representativePost.styleTags.length - 1 && (
-									<StyledText $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray1}>
+									<StyledText $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray[200]}>
 										,&nbsp;
 									</StyledText>
 								)}
@@ -106,7 +110,7 @@ const Card: React.FC<CardProps> = ({ removeRejectedMatching, matching }) => {
 					</div>
 				</ProfileInfo>
 				<SeeMore onClick={() => nav(`/users/${requester.id}`)}>
-					<StyledText $textTheme={{ style: 'caption2-regular' }} color="#8e8e93">
+					<StyledText $textTheme={{ style: 'caption2-regular' }} color={theme.colors.text.caption}>
 						OOTD 더 보기
 					</StyledText>
 					<ArrowButton />
diff --git a/src/pages/Chats/Matching/Cards/Card/styles.tsx b/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: #ececec;
+	background-color: ${({ theme }) => theme.colors.gray[200]};
 	border-radius: 0.5rem;
 	position: relative;
 	height: 100%;
@@ -79,7 +79,6 @@ export const OOTDImgBox = styled.div`
 
 	.childSwiper {
 		z-index: 10;
-		// align-items: stretch;
 		width: 100%;
 		height: 100%;
 	}
diff --git a/src/pages/Chats/Matching/index.tsx b/src/pages/Chats/Matching/index.tsx
@@ -8,9 +8,9 @@ import type { MatchingProps } from './dto';
 const Matching: React.FC<MatchingProps> = ({ matchingCount, decreaseMatchingCount }) => {
 	return (
 		<>
-			<ReqeustInfo $textTheme={{ style: 'body2-regular' }} color={theme.colors.black}>
+			<ReqeustInfo $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
 				Message&nbsp;
-				<StyledText $textTheme={{ style: 'body1-bold' }} color="#FF2389">
+				<StyledText $textTheme={{ style: 'body1-bold' }} color={theme.colors.brand.primary}>
 					{matchingCount}
 				</StyledText>
 			</ReqeustInfo>
diff --git a/src/pages/Chats/RecentChat/index.tsx b/src/pages/Chats/RecentChat/index.tsx
@@ -7,6 +7,7 @@ import { StyledText } from '@components/Text/StyledText';
 import { useSocket } from '@context/SocketProvider';
 import type { ChatRoomData } from '@apis/chatting/dto';
 import { getCurrentUserId } from '@utils/getCurrentUserId';
+import theme from '@styles/theme';
 
 interface RecentChatProps {
 	matchingCount: number;
@@ -46,7 +47,7 @@ const RecentChat: React.FC<RecentChatProps> = () => {
 				<Loading />
 			) : chatRoomList.length !== 0 ? (
 				<>
-					<RecentChatInfo $textTheme={{ style: 'body2-regular' }} color="#1d1d1d">
+					<RecentChatInfo $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
 						최근 채팅방
 					</RecentChatInfo>
 					<ChatRoomList>
@@ -57,7 +58,7 @@ const RecentChat: React.FC<RecentChatProps> = () => {
 				</>
 			) : (
 				<NoChatRoomWrapper>
-					<StyledText $textTheme={{ style: 'headline1-medium' }} color="#8e8e93">
+					<StyledText $textTheme={{ style: 'headline1-medium' }} color={theme.colors.text.tertiary}>
 						개설된 채팅방이 없어요.
 					</StyledText>
 				</NoChatRoomWrapper>
diff --git a/src/pages/Chats/TabBar/index.tsx b/src/pages/Chats/TabBar/index.tsx
@@ -8,12 +8,13 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 import SwiperCore from 'swiper';
 import 'swiper/css';
 import { getMatchingListApi } from '@apis/matching';
+import theme from '@styles/theme';
 
 const TabBar: React.FC = () => {
 	const [matchingCount, setMatchingCount] = useState(0);
 	const [hasMatchingRequest, setHasMatchingRequest] = useState(false);
 
-	const [activeIndex, setActiveIndex] = useState<number>(1);
+	const [activeIndex, setActiveIndex] = useState(1);
 	const swiperRef = useRef<SwiperCore | null>(null);
 	const tabs = [`요청 ${activeIndex === 1 ? matchingCount : ''}`, '최근 채팅'];
 
@@ -91,7 +92,11 @@ const TabBar: React.FC = () => {
 								$textTheme={{
 									style: activeIndex === index && (index !== 0 || hasMatchingRequest) ? 'body2-bold' : 'body2-medium',
 								}}
-								color={activeIndex === index && (index !== 0 || hasMatchingRequest) ? '#FF2389' : '#888888'}
+								color={
+									activeIndex === index && (index !== 0 || hasMatchingRequest)
+										? theme.colors.brand.primary
+										: theme.colors.text.caption
+								}
 							>
 								{tab}
 							</StyledText>
diff --git a/src/pages/Chats/TabBar/styles.tsx b/src/pages/Chats/TabBar/styles.tsx
@@ -22,8 +22,8 @@ export const TabBarList = styled.ul`
 `;
 
 export const TabBarWrapper = styled.li<{ $isSelected: boolean; $isPointer: boolean }>`
-	border-bottom: 0.13rem solid #e9e9e9;
-	border-image: ${({ $isSelected, theme }) => ($isSelected ? `${theme.colors.gradient} 0 0 1 0` : 'transparent')};
+	border-bottom: 0.13rem solid ${({ theme }) => theme.colors.gray[200]};
+	border-image: ${({ $isSelected, theme }) => ($isSelected ? `${theme.colors.brand.gradient} 0 0 1 0` : 'transparent')};
 	text-align: center;
 	flex-grow: 1;
 	padding: 0.62rem;
diff --git a/src/pages/Chats/index.tsx b/src/pages/Chats/index.tsx
@@ -7,7 +7,7 @@ import TabBar from './TabBar/index';
 const Chats: React.FC = () => {
 	return (
 		<OODDFrame>
-			<Header $textTheme={{ style: 'title1-bold' }} color={theme.colors.black}>
+			<Header $textTheme={{ style: 'title1-bold' }} color={theme.colors.text.primary}>
 				Chats
 			</Header>
 			<TabBar></TabBar>
