From aa3bc5c7374a49bf1f5272a4f716773e506413f4 Mon Sep 17 00:00:00 2001
From: heeyongKim <166043860+heeeeyong@users.noreply.github.com>
Date: Wed, 23 Jul 2025 22:59:45 +0900
Subject: [PATCH 1/2] fix: build Error

---
 src/components/feed/UserProfileItem.tsx | 1 +
 src/mocks/searchBook.mock.ts            | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/components/feed/UserProfileItem.tsx b/src/components/feed/UserProfileItem.tsx
index 9bc0d305..6619c001 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 { typography } from '@/styles/global/global';
 
 const UserProfileItem = ({
   profileImgUrl,
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,
     },
   ],
 };

From bbaf7dc3e047f93772ba35f3b1a96d5806766394 Mon Sep 17 00:00:00 2001
From: heeyongKim <166043860+heeeeyong@users.noreply.github.com>
Date: Wed, 23 Jul 2025 23:07:45 +0900
Subject: [PATCH 2/2] design: fix UserProfileItem css style

---
 src/components/feed/UserProfileItem.tsx | 29 ++++++++++++-------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/components/feed/UserProfileItem.tsx b/src/components/feed/UserProfileItem.tsx
index 6619c001..04800814 100644
--- a/src/components/feed/UserProfileItem.tsx
+++ b/src/components/feed/UserProfileItem.tsx
@@ -3,7 +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 { typography } from '@/styles/global/global';
+import { colors, typography } from '@/styles/global/global';
 
 const UserProfileItem = ({
   profileImgUrl,
@@ -67,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`
@@ -87,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 {
@@ -96,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;
       }
     }
@@ -114,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;
   }
@@ -128,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;
   }
 `;