Merge pull request #120 from oodd-team/feat/OD-171

[OD-171] Login, SignUp, TermsAgreement 페이지와 담당 공통 컴포넌트에 컬러시스템 적용

Author: gustn99

src/components/PostItem/index.tsx

@@ -5,9 +5,10 @@ import theme from '@styles/theme';
 import PinIcon from '@assets/default/pin.svg';
 import Like from '@components/Icons/Like';
 import Message from '@components/Icons/Message';
+import { StyledText } from '@components/Text/StyledText';
 
 import type { PostItemProps } from './dto';
-import { PostItemLayout, PostImageContainer, PostImage, LikesCountStyledText, LikesOverlay, Pin } from './style';
+import { PostItemLayout, PostImageContainer, PostImage, LikesOverlay, Pin } from './style';
 
 const PostItem: React.FC<PostItemProps> = ({ post }) => {
 	const navigate = useNavigate();
@@ -25,13 +26,13 @@ const PostItem: React.FC<PostItemProps> = ({ post }) => {
 				{post.isRepresentative && <Pin src={PinIcon} />}
 				<LikesOverlay>
 					<Like />
-					<LikesCountStyledText $textTheme={{ style: 'caption1-regular' }} color={theme.colors.gray3}>
+					<StyledText $textTheme={{ style: 'caption1-regular' }} color={theme.colors.text.tertiary}>
 						{post.postLikesCount}
-					</LikesCountStyledText>
-					<Message />
-					<LikesCountStyledText $textTheme={{ style: 'caption1-regular' }} color={theme.colors.gray3}>
+					</StyledText>
+					<Message color="#8E8E8E" />
+					<StyledText $textTheme={{ style: 'caption1-regular' }} color={theme.colors.text.tertiary}>
 						{post.postCommentsCount}
-					</LikesCountStyledText>
+					</StyledText>
 				</LikesOverlay>
 			</PostImageContainer>
 		</PostItemLayout>

src/components/PostItem/style.tsx

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { StyledText } from '@components/Text/StyledText';
 
 export const PostItemLayout = styled.article`
 	flex: 1 1 calc(50% - 0.5rem); /* 기본적으로 두 개씩 배치되도록 설정 */
@@ -43,20 +42,14 @@ export const PostImage = styled.img`
 
 export const LikesOverlay = styled.div`
 	position: absolute;
-	bottom: 0; /* 하단에 배치 */
+	bottom: 0.625rem; /* 하단에 배치 */
+	right: 0.625rem;
 	width: 100%;
 	display: flex;
-	align-items: center;
 	justify-content: flex-end;
+	align-items: center;
 	box-sizing: border-box;
-`;
-
-export const Icon = styled.img`
-	margin-bottom: 0.5rem;
-`;
-
-export const LikesCountStyledText = styled(StyledText)`
-	margin: 0 8px 0.5rem 4px;
+	gap: 5px;
 `;
 
 export const Pin = styled.img`

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};
 	`}
 `;
 

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;
 `;