diff --git a/apps/client/src/widgets/home/components/info-section/recommended-info-section.tsx b/apps/client/src/widgets/home/components/info-section/recommended-info-section.tsx
index 27e7f7d8..cffef3f1 100644
--- a/apps/client/src/widgets/home/components/info-section/recommended-info-section.tsx
+++ b/apps/client/src/widgets/home/components/info-section/recommended-info-section.tsx
@@ -15,37 +15,27 @@ import { StatusType } from '@shared/types/type.ts';
 
 import * as styles from './recommended-info-section.css.ts';
 
-interface recommendedInfoSectionProps {
+interface StaticContentProps {
   userName?: string;
+  productName?: string;
+  company?: string;
+  keywordChips?: string[];
 }
 
-/** 보험 추천받은 유저가 볼 화면 */
-export const RecommendedInfoSection = ({
+const StaticContent = ({
   userName,
-}: recommendedInfoSectionProps) => {
-  const navigate = useNavigate();
-  const handleNavigateReport = () => {
-    navigate(routePath.REPORT);
-  };
-
-  const { data: reportSummary } = useSuspenseQuery(
-    HOME_QUERY_OPTIONS.REPORT_SUMMARY(),
-  );
-  const targetToIconMap = new Map(
-    homeCardConfig.map(({ target, icon }) => [target, icon]),
-  );
-
-  if (!reportSummary) {
-    return;
-  }
-
+  productName,
+  company,
+  keywordChips,
+}: StaticContentProps) => {
   return (
-    <section className={styles.infoSection}>
+    <>
       <img
         src={'./3Dicon_background.webp'}
         width={223}
         height={185}
         className={styles.backgroundLogo}
+        alt=""
       />
       <div className={styles.titleSection}>
         <InsuranceSubtitle
@@ -58,11 +48,11 @@ export const RecommendedInfoSection = ({
         <InsuranceTitle
           fontColor={'white'}
           fontStyle={'eb_28'}
-          name={reportSummary.productName}
-          company={reportSummary.company}
+          name={productName}
+          company={company}
         />
         <div className={styles.chipList}>
-          {reportSummary.keywordChips?.map((chip, index) => (
+          {keywordChips?.map((chip, index) => (
             <Chip
               key={index}
               variant="round"
@@ -74,7 +64,56 @@ export const RecommendedInfoSection = ({
           ))}
         </div>
       </div>
+    </>
+  );
+};
 
+interface BottomButtonProps {
+  onClick: () => void;
+}
+
+const BottomButton = ({ onClick }: BottomButtonProps) => {
+  return (
+    <div className={styles.bottomButton}>
+      <TextButton color={'white'} size="sm" onClick={onClick}>
+        <p>구체적인 내용 확인하기</p>
+        <Icon name={'caret_right_md'} color="white" />
+      </TextButton>
+    </div>
+  );
+};
+
+interface recommendedInfoSectionProps {
+  userName?: string;
+}
+
+/** 보험 추천받은 유저가 볼 화면 */
+export const RecommendedInfoSection = ({
+  userName,
+}: recommendedInfoSectionProps) => {
+  const navigate = useNavigate();
+  const handleNavigateReport = () => navigate(routePath.REPORT);
+
+  const { data: reportSummary } = useSuspenseQuery(
+    HOME_QUERY_OPTIONS.REPORT_SUMMARY(),
+  );
+
+  const targetToIconMap = new Map(
+    homeCardConfig.map(({ target, icon }) => [target, icon]),
+  );
+
+  if (!reportSummary) {
+    return;
+  }
+
+  return (
+    <section className={styles.infoSection}>
+      <StaticContent
+        userName={userName}
+        productName={reportSummary.productName}
+        company={reportSummary.company}
+        keywordChips={reportSummary.keywordChips}
+      />
       <Carousel slidesPerView={4.5} autoPlay className={styles.homeCardList}>
         {reportSummary.statuses?.map((card, index) => (
           <Carousel.Item key={index}>
@@ -92,13 +131,7 @@ export const RecommendedInfoSection = ({
           </Carousel.Item>
         ))}
       </Carousel>
-
-      <div className={styles.bottomButton}>
-        <TextButton color={'white'} size="sm" onClick={handleNavigateReport}>
-          <p>구체적인 내용 확인하기</p>
-          <Icon name={'caret_right_md'} color="white" />
-        </TextButton>
-      </div>
+      <BottomButton onClick={handleNavigateReport} />
     </section>
   );
 };