Refact: 이용약관 동의 페이지에 컬러시스템 적용

Author: mimizae

src/components/UserProfile/index.tsx

@@ -13,7 +13,7 @@ const UserProfile: React.FC<UserProfileProps> = React.memo(({ userImg, bio = '',
 			<UserImg src={userImg} alt={`${nickname}'s profile`} />
 			<UserDetailsContainer>
 				<StyledText $textTheme={{ style: 'headline2-bold' }}>{nickname}</StyledText>
-				<StyledBio $textTheme={{ style: 'body2-regular' }} color={theme.colors.gray3}>
+				<StyledBio $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.tertiary}>
 					{truncatedBio}
 				</StyledBio>
 			</UserDetailsContainer>

src/pages/Login/SocialLoginButton/index.tsx

@@ -27,7 +27,7 @@ const SocialLoginButton: React.FC<SocialLoginProps> = ({ bgColor, logoSrc, altTe
 			</LogoImgWrapper>
 			<StyledTextWrapper
 				$textTheme={{ style: 'body2-bold' }}
-				color={provider === 'kakao' ? theme.colors.black : theme.colors.white}
+				color={provider === 'kakao' ? theme.colors.text.primary : theme.colors.text.contrast}
 			>
 				{buttonText}
 			</StyledTextWrapper>

src/pages/Login/SocialLoginButton/style.tsx

@@ -1,15 +1,14 @@
 import styled from 'styled-components';
 import { StyledText } from '@components/Text/StyledText';
 
-export const SocialLoginContainer = styled.button<{ $bgColor: string; $border?: boolean }>`
+export const SocialLoginContainer = styled.button<{ $bgColor: string }>`
 	display: flex;
 	align-items: center;
 	width: calc(100% - 3.5rem);
 	max-width: 40rem;
 	height: 3.5rem;
 	background-color: ${({ $bgColor }) => $bgColor};
 	border-radius: 0.5rem;
-	border: ${({ $border }) => ($border ? '1px solid #000' : 'none')};
 	cursor: pointer;
 	margin-bottom: 0.5rem;
 	box-sizing: border-box;
@@ -28,10 +27,10 @@ export const LogoImage = styled.img`
 	max-height: 100%;
 `;
 
-export const StyledTextWrapper = styled(StyledText)<{ $left?: string }>`
+export const StyledTextWrapper = styled(StyledText)`
 	display: flex;
 	width: 12.5rem;
-	padding-left: ${({ $left }) => $left || '1.2rem'};
+	padding-left: 1.2rem;
 	align-items: center;
 	margin: 0 auto;
 `;

src/pages/Login/index.tsx

@@ -14,7 +14,7 @@ const Login: React.FC = () => {
 	return (
 		<OODDFrame>
 			<LoginContainer>
-				<StyledWelcomeWrapper $textTheme={{ style: 'title2-bold' }} color={theme.colors.black}>
+				<StyledWelcomeWrapper $textTheme={{ style: 'title2-bold' }} color={theme.colors.text.primary}>
 					{'반가워요! \n계정을 선택해주세요.'}
 				</StyledWelcomeWrapper>
 				<SocialLoginButton

src/pages/SignUp/style.tsx

@@ -55,7 +55,7 @@ export const InputContainer = styled.section`
 
 export const InputValue = styled.input`
 	width: 100%;
-	max-width: 300px;
+	max-width: 18.75rem;
 	height: 3.25rem;
 	font-family: Pretendard;
 	font-size: 2.5rem;

src/pages/TermsAgreement/styles.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { StyledText } from '@components/Text/StyledText';
+import theme from '@styles/theme';
 
 export const TermsAgreementLayout = styled.main`
 	display: flex;
@@ -29,12 +30,12 @@ export const CheckboxInput = styled.input`
 	appearance: none; /* 기본 스타일 제거 */
 	width: 1.25rem;
 	height: 1.25rem;
-	border: 0.125rem solid #e0e0e0;
+	border: 0.125rem solid ${theme.colors.border.divider};
 	border-radius: 0.25rem;
 	position: relative;
 	&:checked {
-		background-color: #ffbbda;
-		border-color: #ff2389;
+		background-color: ${theme.colors.brand.primaryLighter};
+		border-color: ${theme.colors.brand.primary};
 	}
 	&:checked::after {
 		content: '✓';
@@ -49,7 +50,7 @@ export const CheckboxInput = styled.input`
 
 export const Divider = styled.hr`
 	border: none;
-	border-top: 0.0625rem solid #e0e0e0;
+	border-top: 0.0625rem solid ${theme.colors.border.divider};
 	margin: 0.625rem 0;
 `;