diff --git a/src/components/feed/UserProfileItem.tsx b/src/components/feed/UserProfileItem.tsx
index 9bc0d305..04800814 100644
--- a/src/components/feed/UserProfileItem.tsx
+++ b/src/components/feed/UserProfileItem.tsx
@@ -3,6 +3,7 @@ import { useState } from 'react';
 import styled from '@emotion/styled';
 import rightArrow from '../../assets/feed/rightArrow.svg';
 import type { UserProfileItemProps } from '@/types/user';
+import { colors, typography } from '@/styles/global/global';
 
 const UserProfileItem = ({
   profileImgUrl,
@@ -66,7 +67,7 @@ const Wrapper = styled.div<{ isLast?: boolean }>`
   height: 78px;
   padding: 20px 0;
   border-bottom: ${({ isLast }) => (isLast ? 'none' : '1px solid var(--color-darkgrey-dark)')};
-  background-color: var(--color-black-main);
+  background-color: ${colors.black.main};
 `;
 
 const UserProfile = styled.div`
@@ -86,7 +87,7 @@ const UserProfile = styled.div`
       width: 36px;
       height: 36px;
       border-radius: 36px;
-      border: 0.5px solid var(--color-grey-300);
+      border: 0.5px solid ${colors.grey[300]};
     }
 
     .user {
@@ -95,16 +96,15 @@ const UserProfile = styled.div`
       gap: 4px;
 
       .username {
-        color: var(--color-white);
-        font-size: var(--font-size-sm);
-        font-weight: var(--font-weight-medium);
+        color: ${colors.white};
+        font-size: ${typography.fontSize.sm};
+        font-weight: ${typography.fontWeight.medium};
         line-height: normal;
       }
 
       .usertitle {
-        color: var(--color-text-literature_mint, #a0f8e8);
-        font-size: var(--font-size-xs);
-        font-weight: var(--font-weight-regular);
+        font-size: ${typography.fontSize.xs};
+        font-weight: ${typography.fontWeight.regular};
         line-height: 20px;
       }
     }
@@ -113,11 +113,11 @@ const UserProfile = styled.div`
   .followbutton {
     padding: 8px 12px;
     border-radius: 20px;
-    border: 1px solid var(--color-grey-300);
+    border: 1px solid ${colors.grey[300]};
     text-align: center;
-    color: var(--color-grey-100);
-    font-size: var(--font-size-sm);
-    font-weight: var(--font-weight-medium);
+    color: ${colors.grey[100]};
+    font-size: ${typography.fontSize.sm};
+    font-weight: ${typography.fontWeight.medium};
     line-height: normal;
     cursor: pointer;
   }
@@ -127,9 +127,9 @@ const UserProfile = styled.div`
     flex-direction: row;
     align-items: center;
     gap: 2px;
-    color: var(--color-white);
+    color: ${colors.white};
     font-size: ${typography.fontSize['2xs']};
-    font-weight: var(--font-weight-regular);
+    font-weight: ${typography.fontWeight.regular};
     line-height: 20px;
   }
 `;
diff --git a/src/mocks/searchBook.mock.ts b/src/mocks/searchBook.mock.ts
index 13921e44..b1539f02 100644
--- a/src/mocks/searchBook.mock.ts
+++ b/src/mocks/searchBook.mock.ts
@@ -51,6 +51,7 @@ export const mockSearchBook = {
       commentCount: 125,
       images: ['https://placehold.co/100x100', 'https://placehold.co/100x100'],
       isPublic: true,
+      feedId: 80,
     },
     {
       userId: 2,
@@ -68,6 +69,7 @@ export const mockSearchBook = {
       initialLikeCount: 125,
       commentCount: 125,
       isPublic: false,
+      feedId: 90,
     },
   ],
 };