From b90df309ab1e114902deca7531f05965fd091c34 Mon Sep 17 00:00:00 2001
From: young <azerosong@gmail.com>
Date: Sat, 28 Dec 2024 23:07:28 +0900
Subject: [PATCH 01/13] =?UTF-8?q?Refactor:=20opponent=20->=20otherUser?=
 =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Chats/ChatRoom/ChatBox/index.tsx  | 8 ++++----
 src/pages/Chats/ChatRoom/ChatBox/styles.tsx | 8 ++++----
 src/pages/Chats/ChatRoom/index.tsx          | 6 +++---
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/pages/Chats/ChatRoom/ChatBox/index.tsx b/src/pages/Chats/ChatRoom/ChatBox/index.tsx
index 7b1890b1..0f7ddae1 100644
--- a/src/pages/Chats/ChatRoom/ChatBox/index.tsx
+++ b/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,7 +64,7 @@ const ChatBox: React.FC = () => {
 	return (
 		<ChatBoxContainer>
 			<Textarea
-				$isOpponentValid={isOpponentValid}
+				$isOtherUserValid={isOtherUserValid}
 				placeholder="메시지 보내기"
 				ref={textareaRef}
 				value={newMessage}
@@ -72,7 +72,7 @@ const ChatBox: React.FC = () => {
 				onKeyDown={handleEnterKeyDown}
 				onSubmit={handleNewMessageSubmit}
 			/>
-			<SendButton $isOpponentValid={isOpponentValid} onClick={handleNewMessageSubmit} />
+			<SendButton $isOtherUserValid={isOtherUserValid} onClick={handleNewMessageSubmit} />
 		</ChatBoxContainer>
 	);
 };
diff --git a/src/pages/Chats/ChatRoom/ChatBox/styles.tsx b/src/pages/Chats/ChatRoom/ChatBox/styles.tsx
index 39159fd2..1b01b0d1 100644
--- a/src/pages/Chats/ChatRoom/ChatBox/styles.tsx
+++ b/src/pages/Chats/ChatRoom/ChatBox/styles.tsx
@@ -17,7 +17,7 @@ export const ChatBoxContainer = styled.div`
 	align-items: center;
 `;
 
-export const Textarea = styled.textarea<{ $isOpponentValid: boolean }>`
+export const Textarea = styled.textarea<{ $isOtherUserValid: boolean }>`
 	width: 100%;
 	max-height: 5rem;
 	border: none;
@@ -27,7 +27,7 @@ export const Textarea = styled.textarea<{ $isOpponentValid: boolean }>`
 	resize: none;
 	overflow: hidden;
 	color: ${({ theme }) => theme.colors.black};
-	cursor: ${({ $isOpponentValid }) => ($isOpponentValid ? '' : 'not-allowed')};
+	cursor: ${({ $isOtherUserValid }) => ($isOtherUserValid ? '' : 'not-allowed')};
 	background-color: #f2f2f2;
 	${({ theme }) => theme.fontStyles['body2-regular']};
 
@@ -37,7 +37,7 @@ export const Textarea = styled.textarea<{ $isOpponentValid: boolean }>`
 	}
 `;
 
-export const SendButton = styled.button<{ $isOpponentValid: boolean }>`
+export const SendButton = styled.button<{ $isOtherUserValid: boolean }>`
 	padding: 1.12rem;
 	border-radius: 50%;
 	background-color: #ffe9f3;
@@ -45,5 +45,5 @@ export const SendButton = styled.button<{ $isOpponentValid: boolean }>`
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: 1.2rem 1.2rem;
-	cursor: ${({ $isOpponentValid }) => ($isOpponentValid ? 'pointer' : '')};
+	cursor: ${({ $isOtherUserValid }) => ($isOtherUserValid ? 'pointer' : '')};
 `;
diff --git a/src/pages/Chats/ChatRoom/index.tsx b/src/pages/Chats/ChatRoom/index.tsx
index 2e7a8dcd..d99f48db 100644
--- a/src/pages/Chats/ChatRoom/index.tsx
+++ b/src/pages/Chats/ChatRoom/index.tsx
@@ -61,12 +61,12 @@ const ChatRoom: React.FC = () => {
 
 	// 프로필 사진 클릭 시 프로필 페이지로 이동
 	const handleUserClick = useCallback(() => {
-		const opponentId = otherUser?.id ? otherUser.id : -1;
-		if (opponentId === -1) {
+		const otherUserId = otherUser?.id ? otherUser.id : -1;
+		if (otherUserId === -1) {
 			setModalContent('유저 정보를 찾을 수 없습니다.');
 			setIsStatusModalOpen(true);
 		} else {
-			nav(`/users/${opponentId}`);
+			nav(`/users/${otherUserId}`);
 		}
 	}, [otherUser, nav]);
 

From f37c32e62641c3b9e882acd2f175932441e5453f Mon Sep 17 00:00:00 2001
From: young <azerosong@gmail.com>
Date: Sat, 28 Dec 2024 23:31:56 +0900
Subject: [PATCH 02/13] =?UTF-8?q?Refactor:=20OOTD=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=A3=BC=EC=84=9D=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Home/OOTD/index.tsx | 34 ++++++++++++++++------------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/pages/Home/OOTD/index.tsx b/src/pages/Home/OOTD/index.tsx
index 7b8f79b8..eed671e5 100644
--- a/src/pages/Home/OOTD/index.tsx
+++ b/src/pages/Home/OOTD/index.tsx
@@ -14,35 +14,32 @@ const OOTD: React.FC = () => {
 	const [modalContent, setModalContent] = useState('알 수 없는 오류입니다.\n관리자에게 문의해 주세요.');
 	const [isStatusModalOpen, setIsStatusModalOpen] = useState(false);
 
-	// API 요청 중인지 확인하는 변수 (렌더링 없이 상태 관리)
 	const isFetchingRef = useRef(false);
-	// 모든 데이터를 불러왔는지 확인하는 변수
 	const isReachedEndRef = useRef(false);
-
-	// 현재 페이지 번호를 참조하는 변수, 리렌더링 없이 값만 업데이트하기 위해 상태가 아닌 useRef 사용
 	const feedPageRef = useRef(1);
 
-	// 세션 스토리지에서 이전 스크롤 위치를 가져와 초기화
-	const savedScrollPosition = sessionStorage.getItem('scrollPosition');
-	const scrollPositionRef = useRef(Number(savedScrollPosition) || 0);
-
 	// IntersectionObserver 인스턴스를 참조하는 변수
 	const observerRef = useRef<IntersectionObserver | null>(null);
-	// 더 많은 데이터를 로드할 때 관찰할 마지막 요소의 DOM을 참조
+	// observer 콜백 함수를 트리거하는 요소를 참조하는 변수
 	const loadMoreRef = useRef<HTMLDivElement | null>(null);
 
+	// 세션 스토리지에서 이전 스크롤 위치를 가져와 초기화
+	const savedScrollPosition = sessionStorage.getItem('scrollPosition');
+	const scrollPositionRef = useRef(Number(savedScrollPosition) || 0);
+
 	// 전체 게시글(피드) 조회 API
 	const getPostList = async () => {
 		// 모든 데이터를 불러왔거나 요청 중이라면 함수 실행 중단
 		if (isReachedEndRef.current || isFetchingRef.current) return;
 
-		isFetchingRef.current = true; // 요청 중임을 표시
+		isFetchingRef.current = true;
+
 		try {
 			const response = await getPostListApi(feedPageRef.current, 20);
 
 			if (response.isSuccess) {
 				if (response.data.post.length === 0) {
-					isReachedEndRef.current = true; // 더 이상 불러올 데이터가 없음을 표시
+					isReachedEndRef.current = true;
 				} else {
 					setFeeds((prevFeeds) => [...prevFeeds, ...response.data.post]);
 					feedPageRef.current += 1;
@@ -54,12 +51,15 @@ const OOTD: React.FC = () => {
 			setIsStatusModalOpen(true);
 		} finally {
 			isFetchingRef.current = false;
+			console.log(feeds);
 		}
 	};
 
 	useEffect(() => {
+		// 데이터의 끝에 다다르면 옵저버 해제 (더이상 피드가 없으면)
 		if (isReachedEndRef.current && observerRef.current && loadMoreRef.current) {
-			observerRef.current.unobserve(loadMoreRef.current); // 데이터의 끝에 다다르면 옵저버 해제 (더이상 피드가 없으면)
+			observerRef.current.unobserve(loadMoreRef.current);
+
 			return;
 		}
 
@@ -69,14 +69,13 @@ const OOTD: React.FC = () => {
 				const target = entries[0];
 				console.log('Intersection Observer:', target.isIntersecting);
 				if (target.isIntersecting && !isFetchingRef.current && !isReachedEndRef.current) {
-					// 요소가 화면에 보이고 있고, 요청 중이 아니며 끝에 도달하지 않았다면 API 호출
 					getPostList();
 				}
-			}, 300), // 디바운스 적용, 마지막 스크롤 이후 300ms 동안 동작이 없으면 이벤트 호출
+			}, 300),
 			{
 				root: null,
-				rootMargin: '100px', // 요소가 보이기 100px 전에 미리 데이터 로드
-				threshold: 0, // 요소가 아주 조금이라도 보이면 트리거
+				rootMargin: '100px',
+				threshold: 0,
 			},
 		);
 
@@ -93,10 +92,9 @@ const OOTD: React.FC = () => {
 	}, []);
 
 	useEffect(() => {
-		// 첫 로드 시 API 호출
 		getPostList();
 
-		// 세션 저장된 이전 스크롤 위치 복원
+		// 세션에 저장된 이전 스크롤 위치 복원
 		window.scrollTo(0, scrollPositionRef.current);
 
 		return () => {

From 33a9d019c18a58fbf2fd04e2be446846785deecc Mon Sep 17 00:00:00 2001
From: young <azerosong@gmail.com>
Date: Sat, 28 Dec 2024 23:32:27 +0900
Subject: [PATCH 03/13] =?UTF-8?q?Fix:=20=EB=A0=8C=EB=8D=94=EB=A7=81=20?=
 =?UTF-8?q?=EC=8B=9C=20=EC=A4=91=EB=B3=B5=20key=20=EC=9D=B4=EC=8A=88=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Home/OOTD/Feed/index.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/pages/Home/OOTD/Feed/index.tsx b/src/pages/Home/OOTD/Feed/index.tsx
index e429e0f2..ec221d14 100644
--- a/src/pages/Home/OOTD/Feed/index.tsx
+++ b/src/pages/Home/OOTD/Feed/index.tsx
@@ -227,20 +227,17 @@ const Feed: React.FC<FeedProps> = ({ feed }) => {
 					className="ootdSwiper"
 				>
 					{feed.postImages.map((postImage) => (
-						<div key={postImage.url}>
-							<SwiperSlide>
-								<img src={postImage.url} alt={`${feed.user.nickname}의 피드 이미지`} className="ootd-image-small" />
-								<div className="blur"></div>
-								<FeedImgBackground $src={postImage.url} />
-							</SwiperSlide>
-						</div>
+						<SwiperSlide key={postImage.url}>
+							<img src={postImage.url} alt={`${feed.user.nickname}의 피드 이미지`} className="ootd-image-small" />
+							<div className="blur"></div>
+							<FeedImgBackground $src={postImage.url} />
+						</SwiperSlide>
 					))}
 				</Swiper>
 				<ReactionWrapper>
 					<Reaction>
 						<img className="button" onClick={handleRejectButtonClick} src={xBtn} />
 						<div className="button" onClick={handleLikeButtonClick}>
-							{/* Heart 컴포넌트의 isFilled 프로퍼티에 isLikeClicked 상태를 전달 */}
 							<Heart isFilled={isLikeClicked} />
 						</div>
 					</Reaction>

From 520546039851582b2a2e448037b13a8c625ee7d3 Mon Sep 17 00:00:00 2001
From: young <azerosong@gmail.com>
Date: Sun, 29 Dec 2024 00:34:37 +0900
Subject: [PATCH 04/13] =?UTF-8?q?Refactor:=20isTimeVisible=EC=97=90=20?=
 =?UTF-8?q?=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20=EC=A1=B0=EA=B1=B4=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Chats/ChatRoom/createExtendedMessages.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/Chats/ChatRoom/createExtendedMessages.ts b/src/pages/Chats/ChatRoom/createExtendedMessages.ts
index cae8e8f2..a6f640bb 100644
--- a/src/pages/Chats/ChatRoom/createExtendedMessages.ts
+++ b/src/pages/Chats/ChatRoom/createExtendedMessages.ts
@@ -33,13 +33,12 @@ export const createExtendedMessages = (
 		let isProfileImageVisible =
 			prevMessage === null || prevMessage.fromUser.id !== message.fromUser.id || isDateBarVisible;
 
-		// 가장 마지막 메시지이거나, 전송자 또는 시간 또는 날짜가 바뀌기 직전인 경우
+		// 가장 마지막 메시지이거나, 전송자 또는 시간이 바뀌기 직전인 경우
 		// 메시지 전송 시각 출력
 		let isTimeVisible =
 			nextMessage === null ||
 			message.fromUser.id !== nextMessage.fromUser.id ||
-			formattedTime !== dayjs(nextMessage.createdAt).format('HH:mm') ||
-			isNewDay(nextMessage.createdAt, message.createdAt);
+			formattedTime !== dayjs(nextMessage.createdAt).format('HH:mm');
 
 		// 채팅의 첫 메시지가 아니고, 전송자가 바뀐 경우
 		// margin-top 추가

From 07db36da39161595cb0eef4a7f99fa7d33b9041a Mon Sep 17 00:00:00 2001
From: young <azerosong@gmail.com>
Date: Sun, 29 Dec 2024 00:34:57 +0900
Subject: [PATCH 05/13] =?UTF-8?q?Refactor:=20Chats=20=EC=BB=AC=EB=9F=AC?=
 =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Chats/ChatRoom/ChatBox/styles.tsx     | 10 +++++-----
 src/pages/Chats/ChatRoom/DateBar/index.tsx      |  2 +-
 src/pages/Chats/ChatRoom/RcvdMessage/index.tsx  | 11 ++++++++---
 src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx |  2 +-
 src/pages/Chats/ChatRoom/SentMessage/index.tsx  |  2 +-
 src/pages/Chats/ChatRoom/SentMessage/styles.tsx |  5 +++--
 src/pages/Chats/ChatRoomItem/index.tsx          |  7 ++++---
 src/pages/Chats/Matching/Cards/Card/index.tsx   | 12 ++++++++----
 src/pages/Chats/Matching/Cards/Card/styles.tsx  |  3 +--
 src/pages/Chats/Matching/index.tsx              |  4 ++--
 src/pages/Chats/RecentChat/index.tsx            |  5 +++--
 src/pages/Chats/TabBar/index.tsx                |  9 +++++++--
 src/pages/Chats/TabBar/styles.tsx               |  4 ++--
 src/pages/Chats/index.tsx                       |  2 +-
 14 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/src/pages/Chats/ChatRoom/ChatBox/styles.tsx b/src/pages/Chats/ChatRoom/ChatBox/styles.tsx
index 1b01b0d1..0463abb9 100644
--- 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,13 +26,13 @@ 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']};
 	}
 `;
@@ -40,7 +40,7 @@ export const Textarea = styled.textarea<{ $isOtherUserValid: 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;
diff --git a/src/pages/Chats/ChatRoom/DateBar/index.tsx b/src/pages/Chats/ChatRoom/DateBar/index.tsx
index c48776ed..39be4780 100644
--- 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
index b4f2c211..34efb361 100644
--- 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
index 65f47008..44b7046e 100644
--- 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
index d171cc70..35fb0a36 100644
--- 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
index 80bf131f..a6128c20 100644
--- 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
index f3198566..a63a0da7 100644
--- 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
index 62a074b8..0c1ae056 100644
--- 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
index a03b6eb9..7c029b4d 100644
--- 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
index 26b6b753..64480993 100644
--- 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
index 07535891..9256c3fb 100644
--- 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
index c2b98205..4091cd4e 100644
--- 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
index 4db08dec..b88f829f 100644
--- 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
index e4242a0d..97c43cfc 100644
--- 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>

From deb093b4cd2acaa00dd1879af37617131ce75f3c Mon Sep 17 00:00:00 2001
From: young <azerosong@gmail.com>
Date: Sun, 29 Dec 2024 00:43:03 +0900
Subject: [PATCH 06/13] =?UTF-8?q?Refactor:=20Home=20=EC=BB=AC=EB=9F=AC?=
 =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Home/OOTD/Feed/index.tsx  | 8 ++++----
 src/pages/Home/OOTD/Feed/styles.tsx | 4 +---
 src/pages/Home/OOTD/styles.tsx      | 6 ------
 src/pages/Home/styles.tsx           | 2 --
 4 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/src/pages/Home/OOTD/Feed/index.tsx b/src/pages/Home/OOTD/Feed/index.tsx
index ec221d14..94386fb0 100644
--- a/src/pages/Home/OOTD/Feed/index.tsx
+++ b/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>
diff --git a/src/pages/Home/OOTD/Feed/styles.tsx b/src/pages/Home/OOTD/Feed/styles.tsx
index 2a1a3f5a..b4b1f172 100644
--- a/src/pages/Home/OOTD/Feed/styles.tsx
+++ b/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`
diff --git a/src/pages/Home/OOTD/styles.tsx b/src/pages/Home/OOTD/styles.tsx
index 011a4aa8..6c2b59fd 100644
--- a/src/pages/Home/OOTD/styles.tsx
+++ b/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;
diff --git a/src/pages/Home/styles.tsx b/src/pages/Home/styles.tsx
index 5d6738dd..585d8362 100644
--- a/src/pages/Home/styles.tsx
+++ b/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;

From 5024c9fabca3f32a24b508ac12c21c796911571b Mon Sep 17 00:00:00 2001
From: young <azerosong@gmail.com>
Date: Sun, 29 Dec 2024 02:10:35 +0900
Subject: [PATCH 07/13] =?UTF-8?q?Refactor:=20Chats=20=EC=BB=AC=EB=9F=AC?=
 =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=20background/border=20=ED=99=9C?=
 =?UTF-8?q?=EC=9A=A9=ED=95=B4=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Chats/ChatRoom/ChatBox/styles.tsx     | 2 +-
 src/pages/Chats/ChatRoom/SentMessage/styles.tsx | 4 ++--
 src/pages/Chats/Matching/Cards/Card/styles.tsx  | 4 ++--
 src/pages/Chats/TabBar/styles.tsx               | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/Chats/ChatRoom/ChatBox/styles.tsx b/src/pages/Chats/ChatRoom/ChatBox/styles.tsx
index 0463abb9..43875546 100644
--- a/src/pages/Chats/ChatRoom/ChatBox/styles.tsx
+++ b/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;
diff --git a/src/pages/Chats/ChatRoom/SentMessage/styles.tsx b/src/pages/Chats/ChatRoom/SentMessage/styles.tsx
index a6128c20..2be29f1b 100644
--- a/src/pages/Chats/ChatRoom/SentMessage/styles.tsx
+++ b/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;
diff --git a/src/pages/Chats/Matching/Cards/Card/styles.tsx b/src/pages/Chats/Matching/Cards/Card/styles.tsx
index 7c029b4d..93de704e 100644
--- 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: ${({ 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;
 	}
 
diff --git a/src/pages/Chats/TabBar/styles.tsx b/src/pages/Chats/TabBar/styles.tsx
index b88f829f..9a9709b4 100644
--- a/src/pages/Chats/TabBar/styles.tsx
+++ b/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;

From cad73bdd83c0ab22e6545686e83564ecdc52df43 Mon Sep 17 00:00:00 2001
From: young <azerosong@gmail.com>
Date: Sun, 29 Dec 2024 02:23:30 +0900
Subject: [PATCH 08/13] =?UTF-8?q?Refactor:=20Home=20=EC=BB=AC=EB=9F=AC?=
 =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=20background/border=20=ED=99=9C?=
 =?UTF-8?q?=EC=9A=A9=ED=95=B4=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Home/HomeTopBar/styles.tsx | 2 +-
 src/pages/Home/OOTD/Feed/styles.tsx  | 8 ++++----
 src/pages/Home/OOTD/index.tsx        | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/Home/HomeTopBar/styles.tsx b/src/pages/Home/HomeTopBar/styles.tsx
index a375ea7e..1524495e 100644
--- a/src/pages/Home/HomeTopBar/styles.tsx
+++ b/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;
diff --git a/src/pages/Home/OOTD/Feed/styles.tsx b/src/pages/Home/OOTD/Feed/styles.tsx
index b4b1f172..f556ab15 100644
--- a/src/pages/Home/OOTD/Feed/styles.tsx
+++ b/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,7 +110,7 @@ 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; /* 페이지네이션 클릭 가능 */
 	}
@@ -118,7 +118,7 @@ export const FeedImgBox = styled.div`
 	.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;
 	}
 
diff --git a/src/pages/Home/OOTD/index.tsx b/src/pages/Home/OOTD/index.tsx
index eed671e5..d24b3037 100644
--- a/src/pages/Home/OOTD/index.tsx
+++ b/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>

From 94f94960198543cb0826d5f6bb9630f1493e17c1 Mon Sep 17 00:00:00 2001
From: young <azerosong@gmail.com>
Date: Sun, 29 Dec 2024 02:26:02 +0900
Subject: [PATCH 09/13] =?UTF-8?q?Design:=20=ED=94=BC=EB=93=9C=20=EB=A7=A4?=
 =?UTF-8?q?=EC=B9=AD=20=EC=9A=94=EC=B2=AD=20=EC=95=84=EC=9D=B4=EC=BD=98=20?=
 =?UTF-8?q?=ED=81=AC=EA=B8=B0=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Home/OOTD/Feed/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Home/OOTD/Feed/index.tsx b/src/pages/Home/OOTD/Feed/index.tsx
index 94386fb0..e662a569 100644
--- a/src/pages/Home/OOTD/Feed/index.tsx
+++ b/src/pages/Home/OOTD/Feed/index.tsx
@@ -242,7 +242,7 @@ const Feed: React.FC<FeedProps> = ({ feed }) => {
 						</div>
 					</Reaction>
 					<MatchingBtn onClick={handleMatchingButtonClick}>
-						<Message color="white" />
+						<Message width="16" height="16" color="white" />
 						<StyledText $textTheme={{ style: 'body1-regular' }} color={theme.colors.text.contrast}>
 							매칭 요청
 						</StyledText>

From 08cd9aa0fccd45c531d7d416ebc41a25d6258c4e Mon Sep 17 00:00:00 2001
From: young <azerosong@gmail.com>
Date: Sun, 29 Dec 2024 03:13:22 +0900
Subject: [PATCH 10/13] =?UTF-8?q?Fix:=20=EC=9C=A0=EC=A0=80=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=9C=ED=95=84=EB=A1=9C=EC=9D=98=20=EB=9D=BC=EC=9A=B0?=
 =?UTF-8?q?=ED=8C=85=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Chats/ChatRoom/index.tsx            | 2 +-
 src/pages/Chats/Matching/Cards/Card/index.tsx | 4 ++--
 src/pages/Home/OOTD/Feed/index.tsx            | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Chats/ChatRoom/index.tsx b/src/pages/Chats/ChatRoom/index.tsx
index d99f48db..ea877756 100644
--- a/src/pages/Chats/ChatRoom/index.tsx
+++ b/src/pages/Chats/ChatRoom/index.tsx
@@ -66,7 +66,7 @@ const ChatRoom: React.FC = () => {
 			setModalContent('유저 정보를 찾을 수 없습니다.');
 			setIsStatusModalOpen(true);
 		} else {
-			nav(`/users/${otherUserId}`);
+			nav(`/profile/${otherUserId}`);
 		}
 	}, [otherUser, nav]);
 
diff --git a/src/pages/Chats/Matching/Cards/Card/index.tsx b/src/pages/Chats/Matching/Cards/Card/index.tsx
index 0c1ae056..4497ea81 100644
--- a/src/pages/Chats/Matching/Cards/Card/index.tsx
+++ b/src/pages/Chats/Matching/Cards/Card/index.tsx
@@ -37,7 +37,7 @@ const Card: React.FC<CardProps> = ({ removeRejectedMatching, matching }) => {
 	const requester = matching.requester;
 
 	const handleUserClick = () => {
-		nav(`/users/${requester.id}`);
+		nav(`/profile/${requester.id}`);
 	};
 
 	const handleRejectButtonClick = () => {
@@ -109,7 +109,7 @@ const Card: React.FC<CardProps> = ({ removeRejectedMatching, matching }) => {
 						))}
 					</div>
 				</ProfileInfo>
-				<SeeMore onClick={() => nav(`/users/${requester.id}`)}>
+				<SeeMore onClick={() => nav(`/profile/${requester.id}`)}>
 					<StyledText $textTheme={{ style: 'caption2-regular' }} color={theme.colors.text.caption}>
 						OOTD 더 보기
 					</StyledText>
diff --git a/src/pages/Home/OOTD/Feed/index.tsx b/src/pages/Home/OOTD/Feed/index.tsx
index e662a569..ed21e79e 100644
--- a/src/pages/Home/OOTD/Feed/index.tsx
+++ b/src/pages/Home/OOTD/Feed/index.tsx
@@ -76,7 +76,7 @@ const Feed: React.FC<FeedProps> = ({ feed }) => {
 	const handleUserClick = (e: React.MouseEvent) => {
 		e.stopPropagation();
 		sessionStorage.setItem('scrollPosition', String(window.scrollY));
-		nav(`/users/${feed.user.id}`);
+		nav(`/profile/${feed.user.id}`);
 	};
 
 	const handleFeedClick = (e: React.MouseEvent) => {

From f3f33a1ff0cce9d0d1837516bb99c383531a5652 Mon Sep 17 00:00:00 2001
From: young <azerosong@gmail.com>
Date: Sun, 29 Dec 2024 03:29:20 +0900
Subject: [PATCH 11/13] =?UTF-8?q?Refactor:=20=EB=B0=94=ED=85=80=EC=8B=9C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=BB=AC=EB=9F=AC=EC=8B=9C=EC=8A=A4=ED=85=9C=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ReportBottomSheetMenu/styles.tsx          | 22 ++++++++++++-------
 .../BottomSheet/OptionsBottomSheet/index.tsx  |  2 +-
 .../BottomSheet/OptionsBottomSheet/styles.tsx |  4 ++--
 src/components/BottomSheet/styles.tsx         |  6 ++---
 src/components/BottomSheetMenu/index.tsx      |  3 ++-
 src/components/BottomSheetMenu/styles.tsx     |  2 +-
 .../CommentBottomSheet/Comment/styles.tsx     |  9 +++-----
 src/components/CommentBottomSheet/index.tsx   |  4 ++--
 src/components/CommentBottomSheet/styles.tsx  |  4 ++--
 9 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/components/BottomSheet/OptionsBottomSheet/ReportBottomSheetMenu/styles.tsx b/src/components/BottomSheet/OptionsBottomSheet/ReportBottomSheetMenu/styles.tsx
index 52a418e7..1d917001 100644
--- a/src/components/BottomSheet/OptionsBottomSheet/ReportBottomSheetMenu/styles.tsx
+++ b/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']};
+		}
 	}
 `;
diff --git a/src/components/BottomSheet/OptionsBottomSheet/index.tsx b/src/components/BottomSheet/OptionsBottomSheet/index.tsx
index 3ee66ca0..b5b9f505 100644
--- a/src/components/BottomSheet/OptionsBottomSheet/index.tsx
+++ b/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
diff --git a/src/components/BottomSheet/OptionsBottomSheet/styles.tsx b/src/components/BottomSheet/OptionsBottomSheet/styles.tsx
index ade74d3b..3d4cc083 100644
--- a/src/components/BottomSheet/OptionsBottomSheet/styles.tsx
+++ b/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`
diff --git a/src/components/BottomSheet/styles.tsx b/src/components/BottomSheet/styles.tsx
index 0a161cbd..082fce75 100644
--- a/src/components/BottomSheet/styles.tsx
+++ b/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;
 `;
diff --git a/src/components/BottomSheetMenu/index.tsx b/src/components/BottomSheetMenu/index.tsx
index c5689730..a8ba12d1 100644
--- a/src/components/BottomSheetMenu/index.tsx
+++ b/src/components/BottomSheetMenu/index.tsx
@@ -2,6 +2,7 @@ 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 (
@@ -9,7 +10,7 @@ const BottomSheetMenu: React.FC<BottomSheetMenuProps> = React.memo(({ items }) =
 			{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 && (
diff --git a/src/components/BottomSheetMenu/styles.tsx b/src/components/BottomSheetMenu/styles.tsx
index a9ed9dca..5e172c88 100644
--- a/src/components/BottomSheetMenu/styles.tsx
+++ b/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`
diff --git a/src/components/CommentBottomSheet/Comment/styles.tsx b/src/components/CommentBottomSheet/Comment/styles.tsx
index f0c602bc..377f0206 100644
--- a/src/components/CommentBottomSheet/Comment/styles.tsx
+++ b/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`
diff --git a/src/components/CommentBottomSheet/index.tsx b/src/components/CommentBottomSheet/index.tsx
index 103b9bbf..c735f0a7 100644
--- a/src/components/CommentBottomSheet/index.tsx
+++ b/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="닫기" />
diff --git a/src/components/CommentBottomSheet/styles.tsx b/src/components/CommentBottomSheet/styles.tsx
index 05c74196..0ae1a65e 100644
--- a/src/components/CommentBottomSheet/styles.tsx
+++ b/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`

From 99cf43d12cf32cf04a4dd0dc0b5d1f9dcbf3fd30 Mon Sep 17 00:00:00 2001
From: young <azerosong@gmail.com>
Date: Sun, 29 Dec 2024 03:40:49 +0900
Subject: [PATCH 12/13] =?UTF-8?q?Refactor:=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=82=B4=EB=B8=8C=EB=B0=94=20=EC=BB=AC=EB=9F=AC?=
 =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/styles.tsx  |  4 ++--
 src/components/NavBar/index.tsx  |  3 ++-
 src/components/NavBar/styles.tsx | 22 ++++++++++------------
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/components/Modal/styles.tsx b/src/components/Modal/styles.tsx
index 6572401f..b08b1453 100644
--- a/src/components/Modal/styles.tsx
+++ b/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']}
diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
index 96dde99b..1c36cda7 100644
--- a/src/components/NavBar/index.tsx
+++ b/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>
diff --git a/src/components/NavBar/styles.tsx b/src/components/NavBar/styles.tsx
index 4f60c0fc..ddfcff4a 100644
--- a/src/components/NavBar/styles.tsx
+++ b/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 {

From a3e4b631a1d4aa3f0a43b5c9f2f99aa7c3e229f6 Mon Sep 17 00:00:00 2001
From: young <azerosong@gmail.com>
Date: Sun, 29 Dec 2024 03:41:24 +0900
Subject: [PATCH 13/13] =?UTF-8?q?Refactor:=20OODDFrame=20&=20Loading=20&?=
 =?UTF-8?q?=20StyledText=20=EC=BB=AC=EB=9F=AC=EC=8B=9C=EC=8A=A4=ED=85=9C?=
 =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Frame/Frame.tsx     | 2 +-
 src/components/Loading/styles.tsx  | 2 +-
 src/components/Text/StyledText.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Frame/Frame.tsx b/src/components/Frame/Frame.tsx
index 4ca4387a..ce4a642f 100644
--- a/src/components/Frame/Frame.tsx
+++ b/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;
diff --git a/src/components/Loading/styles.tsx b/src/components/Loading/styles.tsx
index 0d244e5e..50982f8c 100644
--- a/src/components/Loading/styles.tsx
+++ b/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;
diff --git a/src/components/Text/StyledText.tsx b/src/components/Text/StyledText.tsx
index 247af562..b097228f 100644
--- a/src/components/Text/StyledText.tsx
+++ b/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' });