Refact: TopBar 컬러시스템 적용

Author: mimizae

src/components/TopBar/index.tsx

@@ -30,7 +30,7 @@ const TopBar: React.FC<TopBarProps> = ({
 			>
 				<img src={LeftButtonSrc || ''} alt="뒤로가기" />
 			</LeftButton>
-			<StyledTextWrapper $textTheme={{ style: 'body1-bold' }} color={theme.colors.black}>
+			<StyledTextWrapper $textTheme={{ style: 'heading1-bold' }} color={theme.colors.text.primary}>
 				{text}
 			</StyledTextWrapper>
 			<RightButton

src/components/TopBar/styles.tsx

@@ -1,20 +1,20 @@
 import styled from 'styled-components';
+import theme from '@styles/theme';
 import { StyledText } from '@components/Text/StyledText';
 import type { TopBarLayoutProps } from './dto';
-
 export const TopBarLayout = styled.header<TopBarLayoutProps>`
 	display: flex;
 	position: sticky;
 	top: 0; /* 부모 요소의 상단에 붙도록 설정 */
 	z-index: 99;
-	background-color: white;
+	background-color: ${theme.colors.background.primary};
 	width: 100%; /* 부모 너비에 맞춤 */
 	align-items: center;
 	padding: 0.5rem 1.25rem;
 	${({ $withBorder, theme }) =>
 		$withBorder &&
 		`
-		border-bottom: solid 0.0625rem ${theme.colors.gray2};
+		border-bottom: solid 0.0625rem ${theme.colors.border.divider};
 	`}
 `;