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

Author: gustn99

src/pages/Home/HomeTopBar/styles.tsx

@@ -5,7 +5,7 @@ export const HomeTopBarContainer = styled.header`
 	padding: 0.5rem 1.25rem;
 	display: flex;
 	justify-content: space-between;
-	background-color: white;
+	background-color: ${({ theme }) => theme.colors.background.primary};
 	z-index: 20;
 	align-items: center;
 	position: fixed;

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { StyledText } from '@components/Text/StyledText';
 
 export const FeedWrapper = styled.article`
-	background-color: rgba(255, 255, 255, 0.5);
+	background-color: ${({ theme }) => theme.colors.background.primary};
 	width: 100%;
 	margin-bottom: 1rem;
 	height: auto;
@@ -35,7 +35,7 @@ export const FeedProfileImgWrapper = styled.img`
 	overflow: hidden;
 	object-fit: cover;
 
-	background: #ffdeed;
+	background: ${({ theme }) => theme.colors.brand.primaryLighter};
 
 	box-shadow:
 		0px 1px 2px 0px rgba(0, 0, 0, 0.12),
@@ -110,15 +110,15 @@ export const FeedImgBox = styled.div`
 		width: 0.375rem;
 		height: 0.375rem;
 		border: 0.0625rem solid ${({ theme }) => theme.colors.white};
-		background: rgba(255, 255, 255, 0.5);
+		background: ${({ theme }) => theme.colors.background.primary}50;
 		opacity: 1;
 		pointer-events: auto; /* 페이지네이션 클릭 가능 */
 	}
 
 	.ootdSwiper .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/Home/OOTD/index.tsx

@@ -119,7 +119,7 @@ const OOTD: React.FC = () => {
 					</div>
 				))}
 				{/* Intersection Observer가 감지할 마지막 요소 */}
-				<div ref={loadMoreRef} style={{ height: '1px', backgroundColor: 'transparent' }} />
+				<div ref={loadMoreRef} />
 			</FeedContainer>
 			{isStatusModalOpen && <Modal {...statusModalProps} />}
 		</OOTDContainer>