Refact: 공통 PostItem 컴포넌트에 컬러시스템 적용

Author: mimizae

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, isMyPost = true }) => {
 	const navigate = useNavigate();
@@ -25,13 +26,13 @@ const PostItem: React.FC<PostItemProps> = ({ post, isMyPost = true }) => {
 				{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`