Refactor: Home 컬러시스템 적용

Author: gustn99

src/pages/Home/OOTD/Feed/index.tsx

@@ -203,18 +203,18 @@ const Feed: React.FC<FeedProps> = ({ feed }) => {
 			<FeedTop>
 				<Info onClick={handleUserClick}>
 					<FeedProfileImgWrapper src={feed.user.profilePictureUrl || defaultProfile} alt="profile" />
-					<StyledText $textTheme={{ style: 'body2-medium' }} color={theme.colors.black}>
+					<StyledText $textTheme={{ style: 'body2-medium' }} color={theme.colors.text.primary}>
 						{feed.user.nickname}
 					</StyledText>
 				</Info>
-				<FeedTimeAgo $textTheme={{ style: 'caption2-medium' }} color={theme.colors.gray2}>
+				<FeedTimeAgo $textTheme={{ style: 'caption2-regular' }} color={theme.colors.text.caption}>
 					{timeAgo}
 				</FeedTimeAgo>
 				<MoreBtn onClick={handleMoreButtonClick}>
 					<img src={more} />
 				</MoreBtn>
 			</FeedTop>
-			<FeedText $textTheme={{ style: 'body2-regular' }} color={theme.colors.black}>
+			<FeedText $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
 				{feed.content}
 			</FeedText>
 			<FeedImgBox>
@@ -243,7 +243,7 @@ const Feed: React.FC<FeedProps> = ({ feed }) => {
 					</Reaction>
 					<MatchingBtn onClick={handleMatchingButtonClick}>
 						<Message color="white" />
-						<StyledText $textTheme={{ style: 'body1-regular' }} color={theme.colors.white}>
+						<StyledText $textTheme={{ style: 'body1-regular' }} color={theme.colors.text.contrast}>
 							매칭 요청
 						</StyledText>
 					</MatchingBtn>

src/pages/Home/OOTD/Feed/styles.tsx

@@ -162,16 +162,14 @@ export const Reaction = styled.div`
 `;
 
 export const MatchingBtn = styled.button`
-	background: ${({ theme }) => theme.colors.gradient};
+	background: ${({ theme }) => theme.colors.brand.gradient};
 	border-radius: 3.19rem;
-	backdrop-filter: blur(0.3125rem);
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	padding: 0.85rem 1.25rem;
 	gap: 0.58rem;
 	width: 11.5rem;
-	color: white;
 `;
 
 export const MoreBtn = styled.button`

src/pages/Home/OOTD/styles.tsx

@@ -9,12 +9,6 @@ export const OOTDContainer = styled.div`
 	margin-bottom: 4.25rem;
 `;
 
-export const OOTDLoading = styled.div`
-	margin-top: 200px;
-`;
-
-// Feed
-
 export const FeedContainer = styled.div`
 	display: flex;
 	flex-direction: column;

src/pages/Home/styles.tsx

@@ -1,7 +1,5 @@
 import styled from 'styled-components';
 
-// HomeContainer
-
 export const HomeContainer = styled.div`
 	flex-grow: 1;
 	height: auto;