diff --git a/client/package.json b/client/package.json
index 5e59dde..f24ac90 100644
--- a/client/package.json
+++ b/client/package.json
@@ -15,11 +15,13 @@
     "axios": "^1.10.0",
     "framer-motion": "^12.18.1",
     "react": "^19.1.0",
+    "react-confetti": "^6.4.0",
     "react-dom": "^19.1.0",
     "react-gradient-scroll-indicator": "^1.0.1",
     "react-router-dom": "^7.6.2",
     "react-spring": "^10.0.1",
     "react-spring-bottom-sheet": "3.5.0-alpha.0",
+    "react-use": "^17.6.0",
     "socket.io-client": "^4.8.1",
     "swiper": "^11.2.8",
     "tailwindcss": "^4.1.10"
diff --git a/client/public/background.png b/client/public/background.png
new file mode 100644
index 0000000..f32c74e
Binary files /dev/null and b/client/public/background.png differ
diff --git a/client/src/App.tsx b/client/src/App.tsx
index c32b10d..76209b7 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -14,12 +14,16 @@ import ComparePage from './pages/ComparePage';
 import TestResultPage from './pages/TestResultPage';
 import MainPage from './pages/MainPage';
 import Footer from './components/common/Footer';
+import ServiceGuidePage from './pages/ServiceGuidePage';
 
 const MainLayout = () => {
   return (
     <>
       <div className=" min-h-screen flex flex-col">
-        <main className="flex-grow mt-[55px]">
+        <main
+          className="flex-1"
+          style={{ minHeight: 'calc(100vh - 50px - 80px)' }}
+        >
           <Outlet />
         </main>
         <Footer />
@@ -40,6 +44,7 @@ function App() {
           <Route path="test-wait" element={<TestWaitingPage />} />
           <Route path="test-result" element={<TestResultPage />} />
           <Route path="compare" element={<ComparePage />} />
+          <Route path="service-guide" element={<ServiceGuidePage />} />
           <Route path="/chat-test" element={<ChatTestPage />} />
           <Route path="*" element={<Navigate to="/" replace />} />
         </Route>
diff --git a/client/src/api/testPlan.ts b/client/src/api/testPlan.ts
new file mode 100644
index 0000000..045f8ae
--- /dev/null
+++ b/client/src/api/testPlan.ts
@@ -0,0 +1,8 @@
+import axios from 'axios';
+
+const baseURL = import.meta.env.VITE_API_BASE_URL;
+
+export const getAllPlans = async () => {
+  const response = await axios.get(`${baseURL}/api/plan/explore`);
+  return response.data;
+};
diff --git a/client/src/assets/icon/robot_icon.png b/client/src/assets/icon/robot_icon.png
deleted file mode 100644
index d776fdd..0000000
Binary files a/client/src/assets/icon/robot_icon.png and /dev/null differ
diff --git a/client/src/assets/icon/service_guide_icon1.png b/client/src/assets/icon/service_guide_icon1.png
new file mode 100644
index 0000000..f831178
Binary files /dev/null and b/client/src/assets/icon/service_guide_icon1.png differ
diff --git a/client/src/assets/icon/service_guide_icon2.png b/client/src/assets/icon/service_guide_icon2.png
new file mode 100644
index 0000000..3364150
Binary files /dev/null and b/client/src/assets/icon/service_guide_icon2.png differ
diff --git a/client/src/assets/icon/service_guide_icon34.png b/client/src/assets/icon/service_guide_icon34.png
new file mode 100644
index 0000000..f03ac22
Binary files /dev/null and b/client/src/assets/icon/service_guide_icon34.png differ
diff --git a/client/src/assets/icon/service_guide_icon5.png b/client/src/assets/icon/service_guide_icon5.png
new file mode 100644
index 0000000..1114f7a
Binary files /dev/null and b/client/src/assets/icon/service_guide_icon5.png differ
diff --git a/client/src/assets/icon/sorry_robot_icon.png b/client/src/assets/icon/sorry_robot_icon.png
new file mode 100644
index 0000000..496de9d
Binary files /dev/null and b/client/src/assets/icon/sorry_robot_icon.png differ
diff --git a/client/src/components/ComparePage/BenefitComparisonRow.tsx b/client/src/components/ComparePage/BenefitComparisonRow.tsx
index 949ba06..e6a05d4 100644
--- a/client/src/components/ComparePage/BenefitComparisonRow.tsx
+++ b/client/src/components/ComparePage/BenefitComparisonRow.tsx
@@ -1,12 +1,43 @@
+import type { ReactNode } from 'react';
+import sorryRobotIcon from '@/assets/icon/sorry_robot_icon.png';
+
 interface BenefitComparisonRowProps {
-  leftContent: string | null;
-  rightContent: string | null;
+  leftContent: ReactNode | null;
+  rightContent: ReactNode | null;
   title: string;
   leftIcon?: string;
   rightIcon?: string;
   iconAlt?: string;
+  hasLeftPlan?: boolean;
+  hasRightPlan?: boolean;
 }
+const ImageWrapper = ({ children }: { children: ReactNode }) => (
+  <div className="w-[80px] h-[68px] flex items-center justify-center">
+    {children}
+  </div>
+);
 
+const TextWrapper = ({ children }: { children: ReactNode }) => (
+  <div className="min-h-[32px] text-xs text-center">{children}</div>
+);
+const SorryMessage = ({ title }: { title: string }) => (
+  <>
+    <ImageWrapper>
+      <img
+        src={sorryRobotIcon}
+        alt="sorry robot"
+        // className="w-[80px] h-[68px]"
+      />
+    </ImageWrapper>
+    <TextWrapper>
+      <div className="text-gray400">
+        {title.includes('혜택')
+          ? '제공되는 혜택이 없습니다'
+          : '제공되는 서비스가 없습니다'}
+      </div>
+    </TextWrapper>
+  </>
+);
 const BenefitComparisonRow: React.FC<BenefitComparisonRowProps> = ({
   leftContent,
   rightContent,
@@ -14,19 +45,47 @@ const BenefitComparisonRow: React.FC<BenefitComparisonRowProps> = ({
   leftIcon,
   rightIcon,
   iconAlt = 'benefit icon',
+  hasLeftPlan,
+  hasRightPlan,
 }) => {
   return (
     <div className="flex w-full">
-      <div className="flex-[2] relative flex flex-col items-center gap-1 justify-center">
-        {leftIcon && leftContent && <img src={leftIcon} alt={iconAlt} />}
-        <div className="text-xs text-gray500">{leftContent || '-'}</div>
-      </div>
-      <div className="flex-[1] text-sm flex items-center justify-center">
-        {title}
+      <div className="flex-[2] relative flex flex-col items-center gap-1 ">
+        {leftIcon && leftContent && (
+          <ImageWrapper>
+            <img src={leftIcon} alt={iconAlt} />
+          </ImageWrapper>
+        )}
+        {leftContent ? (
+          <TextWrapper>
+            <div className="text-gray500">{leftContent}</div>
+          </TextWrapper>
+        ) : hasLeftPlan ? (
+          <SorryMessage title={title} />
+        ) : (
+          <TextWrapper>
+            <div className="text-xs text-gray500"></div>
+          </TextWrapper>
+        )}
       </div>
+      <div className="pt-[13%] w-25 text-sm flex justify-center">{title}</div>
       <div className="flex-[2] relative flex flex-col items-center gap-1 justify-center">
-        {rightIcon && rightContent && <img src={rightIcon} alt={iconAlt} />}
-        <div className="text-xs text-gray500">{rightContent || '-'}</div>
+        {rightIcon && rightContent && (
+          <ImageWrapper>
+            <img src={rightIcon} alt={iconAlt} />
+          </ImageWrapper>
+        )}
+        {rightContent ? (
+          <TextWrapper>
+            <div className="text-xs text-gray500">{rightContent}</div>
+          </TextWrapper>
+        ) : hasRightPlan ? (
+          <SorryMessage title={title} />
+        ) : (
+          <TextWrapper>
+            <div className="text-xs text-gray500"></div>
+          </TextWrapper>
+        )}
       </div>
     </div>
   );
diff --git a/client/src/components/ComparePage/Carousel.tsx b/client/src/components/ComparePage/Carousel.tsx
index b809c9d..889c316 100644
--- a/client/src/components/ComparePage/Carousel.tsx
+++ b/client/src/components/ComparePage/Carousel.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect } from 'react';
 
 interface CategoryCarouselProps {
   categoryList: string[];
@@ -58,7 +58,7 @@ const Carousel: React.FC<CategoryCarouselProps> = ({
   return (
     <div
       ref={scrollContainerRef}
-      className="w-full flex gap-2 overflow-x-auto py-3 text-xs select-none"
+      className="w-full flex gap-2 overflow-x-auto py-[5px] px-5 text-xs select-none"
       style={{
         scrollbarWidth: 'none',
         msOverflowStyle: 'none',
@@ -69,11 +69,14 @@ const Carousel: React.FC<CategoryCarouselProps> = ({
       {categoryList.map((label, idx) => (
         <div
           key={idx}
-          className={`h-9 rounded-xl shadow-small flex justify-center items-center cursor-pointer transition-colors duration-100 px-[13px] whitespace-nowrap ${
-            activeIndex === idx
-              ? 'bg-secondary-purple-60 text-background-40'
-              : 'bg-white'
-          }`}
+          className={`h-9 rounded-xl shadow-sm flex justify-center items-center cursor-pointer
+    transition-colors duration-200 ease-in-out px-[13px] whitespace-nowrap
+    ${
+      activeIndex === idx
+        ? 'bg-secondary-purple-60 text-background-40'
+        : 'bg-white text-gray-700 hover:bg-gray-100'
+    }
+  `}
           onClick={() => handleCardClick(idx)}
         >
           {label}
diff --git a/client/src/components/ComparePage/ComparisonActionButtons.tsx b/client/src/components/ComparePage/ComparisonActionButtons.tsx
index 269be80..fc82e96 100644
--- a/client/src/components/ComparePage/ComparisonActionButtons.tsx
+++ b/client/src/components/ComparePage/ComparisonActionButtons.tsx
@@ -1,3 +1,5 @@
+import Button from '@/components/common/Button';
+
 interface ComparisonActionButtonsProps {
   leftButtonText?: string;
   rightButtonText?: string;
@@ -13,29 +15,31 @@ const ComparisonActionButtons: React.FC<ComparisonActionButtonsProps> = ({
 }) => {
   return (
     <div
-      className="flex flex-col justify-center items-center text-center gap-6 fixed bottom-[24px] max-w-[560px] h-[116px]"
+      className="flex flex-col justify-center items-center text-center gap-6 fixed bottom-[50px] max-w-[560px]"
       style={{ width: 'calc(100% - 40px)' }}
     >
       <div className="flex w-full">
-        <div className="flex-[2] relative flex flex-col items-center gap-1 justify-center rounded-[10px]">
+        <div className="flex-[2] relative flex flex-col items-center justify-center rounded-[10px]">
           {leftButtonText && (
-            <button
+            <Button
               onClick={onLeftClick}
               className="text-xs text-background-40 font-semibold bg-primary-pink w-full h-[38px] flex items-center justify-center rounded-[10px] cursor-pointer shadow-basic"
+              variant="custom"
             >
               {leftButtonText}
-            </button>
+            </Button>
           )}
         </div>
         <div className="flex-[1] text-sm flex items-center justify-center" />
         <div className="flex-[2] relative flex flex-col items-center gap-1 justify-center rounded-[10px]">
           {rightButtonText && (
-            <button
+            <Button
               onClick={onRightClick}
               className="text-xs text-background-40 font-semibold bg-primary-pink w-full h-[38px] flex items-center justify-center rounded-[10px] cursor-pointer shadow-basic"
+              variant="custom"
             >
               {rightButtonText}
-            </button>
+            </Button>
           )}
         </div>
       </div>
diff --git a/client/src/components/ComparePage/ComparisonResult.tsx b/client/src/components/ComparePage/ComparisonResult.tsx
index 5c94b3f..31d7ff8 100644
--- a/client/src/components/ComparePage/ComparisonResult.tsx
+++ b/client/src/components/ComparePage/ComparisonResult.tsx
@@ -1,9 +1,10 @@
-import DataComparisonBar from './DataComparisonBar';
-import BenefitComparisonRow from './BenefitComparisonRow';
-import ComparisonActionButtons from './ComparisonActionButtons';
 import togetherIcon from '@/assets/image/card_family.png';
 import premiumAddonsIcon from '@/assets/icon/special.png';
 import mediaAddonsIcon from '@/assets/icon/media.png';
+import BenefitText from '@/components/common/BenefitText';
+import DataComparisonBar from '@/components/ComparePage/DataComparisonBar';
+import BenefitComparisonRow from '@/components/ComparePage/BenefitComparisonRow';
+import ComparisonActionButtons from '@/components/ComparePage/ComparisonActionButtons';
 import type { Plan } from '@/components/types/Plan';
 
 interface ComparisonResultProps {
@@ -75,7 +76,6 @@ const ComparisonResult: React.FC<ComparisonResultProps> = ({
             leftLabel={leftDataLabel}
             rightLabel={rightDataLabel}
             title="데이터"
-            // showComparison={hasBothPlans}
           />
           <DataComparisonBar
             leftValue={leftSharedDataValue}
@@ -83,7 +83,6 @@ const ComparisonResult: React.FC<ComparisonResultProps> = ({
             leftLabel={leftSharedDataLabel}
             rightLabel={rightSharedDataLabel}
             title="공유 데이터"
-            // showComparison={hasBothPlans}
           />
         </div>
 
@@ -91,24 +90,34 @@ const ComparisonResult: React.FC<ComparisonResultProps> = ({
 
         <div className="flex flex-col justify-center items-center text-center w-full gap-6 mb-[106px]">
           <BenefitComparisonRow
-            leftContent={selectedLeft?.bundleBenefit || null}
-            rightContent={selectedRight?.bundleBenefit || null}
+            leftContent={
+              selectedLeft?.bundleBenefit ? (
+                <BenefitText text={selectedLeft.bundleBenefit} />
+              ) : null
+            }
+            rightContent={
+              selectedRight?.bundleBenefit ? (
+                <BenefitText text={selectedRight.bundleBenefit} />
+              ) : null
+            }
             title="결합 할인"
             leftIcon={selectedLeft?.bundleBenefit ? togetherIcon : undefined}
             rightIcon={selectedRight?.bundleBenefit ? togetherIcon : undefined}
             iconAlt="togetherIcon"
+            hasLeftPlan={!!selectedLeft}
+            hasRightPlan={!!selectedRight}
           />
 
           <BenefitComparisonRow
             leftContent={
-              selectedLeft?.premiumAddons
-                ? `(택1) ${selectedLeft?.premiumAddons}`
-                : null
+              selectedLeft?.premiumAddons ? (
+                <BenefitText text={`(택1) ${selectedLeft.premiumAddons}`} />
+              ) : null
             }
             rightContent={
-              selectedRight?.premiumAddons
-                ? `(택1) ${selectedRight?.premiumAddons}`
-                : null
+              selectedRight?.premiumAddons ? (
+                <BenefitText text={`(택1) ${selectedRight.premiumAddons}`} />
+              ) : null
             }
             title="프리미엄 서비스"
             leftIcon={
@@ -118,23 +127,27 @@ const ComparisonResult: React.FC<ComparisonResultProps> = ({
               selectedRight?.premiumAddons ? premiumAddonsIcon : undefined
             }
             iconAlt="premiumIcon"
+            hasLeftPlan={!!selectedLeft}
+            hasRightPlan={!!selectedRight}
           />
 
           <BenefitComparisonRow
             leftContent={
-              selectedLeft?.mediaAddons
-                ? `(택1) ${selectedLeft?.mediaAddons}`
-                : null
+              selectedLeft?.mediaAddons ? (
+                <BenefitText text={`(택1) ${selectedLeft.mediaAddons}`} />
+              ) : null
             }
             rightContent={
-              selectedRight?.mediaAddons
-                ? `(택1) ${selectedRight?.mediaAddons}`
-                : null
+              selectedRight?.mediaAddons ? (
+                <BenefitText text={`(택1) ${selectedRight.mediaAddons}`} />
+              ) : null
             }
             title="미디어 서비스"
             leftIcon={selectedLeft?.mediaAddons ? mediaAddonsIcon : undefined}
             rightIcon={selectedRight?.mediaAddons ? mediaAddonsIcon : undefined}
             iconAlt="premiumIcon"
+            hasLeftPlan={!!selectedLeft}
+            hasRightPlan={!!selectedRight}
           />
         </div>
       </div>
diff --git a/client/src/components/ComparePage/DataComparisonBar.tsx b/client/src/components/ComparePage/DataComparisonBar.tsx
index 3bcfcb8..e170f90 100644
--- a/client/src/components/ComparePage/DataComparisonBar.tsx
+++ b/client/src/components/ComparePage/DataComparisonBar.tsx
@@ -26,7 +26,7 @@ const DataComparisonBar: React.FC<DataComparisonBarProps> = ({
         />
         <div className="text-xs text-gray500">{leftLabel}</div>
       </div>
-      <div className="flex-[1] text-sm">{title}</div>
+      <div className="w-20 text-sm flex justify-center">{title}</div>
       <div className="flex-[2] relative flex flex-col items-start gap-1">
         <div
           className="bg-gradation rounded-r-full h-5 transition-all duration-800"
diff --git a/client/src/components/ComparePage/FilterSection.tsx b/client/src/components/ComparePage/FilterSection.tsx
index c7a7fe6..0945a92 100644
--- a/client/src/components/ComparePage/FilterSection.tsx
+++ b/client/src/components/ComparePage/FilterSection.tsx
@@ -18,14 +18,14 @@ const FilterSection: React.FC<FilterSectionProps> = ({
   onPriceIndexChange,
 }) => {
   return (
-    <div className="w-full pt-2 bg-background-40 z-5">
-      <div className="flex flex-col gap-1">
+    <div className="fixed top-[45px] w-full pt-2 bg-background-40 z-5">
+      <div className="flex flex-col gap-1 px-5">
         <p className="text-[22px] font-semibold">요금제 선택</p>
         <p className="text-[13px] text-gray500">
           비교하고 싶은 요금제를 선택해주세요
         </p>
       </div>
-      <div className="mb-[3px] flex flex-col justify-center ">
+      <div className="pt-2 pb-3 flex flex-col justify-center ">
         <Carousel
           categoryList={dataList}
           activeIndex={activeDataIndex}
diff --git a/client/src/components/ComparePage/PlanDetailInfo.tsx b/client/src/components/ComparePage/PlanDetailInfo.tsx
index 9e391f9..955cccd 100644
--- a/client/src/components/ComparePage/PlanDetailInfo.tsx
+++ b/client/src/components/ComparePage/PlanDetailInfo.tsx
@@ -1,5 +1,5 @@
+import Button from '@/components/common/Button';
 import type { Plan } from '@/components/types/Plan';
-import Button from '../common/Button';
 
 interface PlanDetailInfoProps {
   plan: Plan;
@@ -18,7 +18,7 @@ const PlanDetailInfo: React.FC<PlanDetailInfoProps> = ({
   const formattedSmsCount =
     plan.smsCount === -1 ? '무제한' : `${plan.smsCount}건`;
   return (
-    <div className="bg-background rounded-b-[7px] p-3 text-[13px] flex flex-col gap-2">
+    <div className="bg-background rounded-b-[7px] p-3 text-[13px] flex flex-col gap-[10px]">
       <div className="flex gap-[5px]">
         <p className="min-w-[90px] text-secondary-purple-80">전화</p>
         <p className="w-full">{formattedVoiceMinutes}</p>
@@ -44,14 +44,15 @@ const PlanDetailInfo: React.FC<PlanDetailInfoProps> = ({
         <p className="w-full">{plan.mediaAddons ? plan.mediaAddons : ' - '}</p>
       </div>
 
-      <div className="h-[43px] mt-2">
+      <div className="mt-">
         <Button
+          className="rounded-[12px] flex items-center justify-center"
           fullWidth
           variant="primary"
           onClick={onClick}
           disabled={disabled}
         >
-          선택하기
+          <span>선택하기</span>
         </Button>
       </div>
     </div>
diff --git a/client/src/components/ComparePage/PlanList.tsx b/client/src/components/ComparePage/PlanList.tsx
new file mode 100644
index 0000000..afbda58
--- /dev/null
+++ b/client/src/components/ComparePage/PlanList.tsx
@@ -0,0 +1,41 @@
+import FadeInUpDiv from '@/components/common/FadeInUpDiv';
+import PlanListItem from '@/components/ComparePage/PlanListItem';
+import type { Plan } from '@/components/types/Plan';
+
+interface PlanListProps {
+  plans: Plan[];
+  selectedLeft: Plan | null;
+  selectedRight: Plan | null;
+  openDropdowns: Record<string, boolean>;
+  onToggle: (id: string) => void;
+  onSelect: (plan: Plan) => void;
+}
+
+const PlanList: React.FC<PlanListProps> = ({
+  plans,
+  selectedLeft,
+  selectedRight,
+  openDropdowns,
+  onToggle,
+  onSelect,
+}) => {
+  return (
+    <div className="flex flex-col gap-2 select-none mb-3 px-5 mt-[178px]">
+      {plans.map((plan, i) => (
+        <FadeInUpDiv key={plan._id} custom={i} delayUnit={0.07} duration={0.3}>
+          <PlanListItem
+            plan={plan}
+            isOpen={openDropdowns[plan._id] || false}
+            isDisabled={
+              selectedLeft?._id === plan._id || selectedRight?._id === plan._id
+            }
+            onToggle={() => onToggle(plan._id)}
+            onSelect={() => onSelect(plan)}
+          />
+        </FadeInUpDiv>
+      ))}
+    </div>
+  );
+};
+
+export default PlanList;
diff --git a/client/src/components/ComparePage/PlanListItem.tsx b/client/src/components/ComparePage/PlanListItem.tsx
index 36e760c..4f1367b 100644
--- a/client/src/components/ComparePage/PlanListItem.tsx
+++ b/client/src/components/ComparePage/PlanListItem.tsx
@@ -1,5 +1,6 @@
-import PlanDetailInfo from './PlanDetailInfo';
+import { AnimatePresence, motion } from 'framer-motion';
 import dropdownIcon from '@/assets/icon/dropdown_icon.svg';
+import PlanDetailInfo from '@/components/ComparePage/PlanDetailInfo';
 import type { Plan } from '@/components/types/Plan';
 
 interface PlanListItemProps {
@@ -19,8 +20,21 @@ const PlanListItem: React.FC<PlanListItemProps> = ({
 }) => {
   return (
     <div>
-      <div
-        className="flex justify-between items-center h-[38px] cursor-pointer"
+      <motion.div
+        whileHover={
+          !isOpen
+            ? {
+                scale: 1.01,
+                boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.08)',
+              }
+            : undefined
+        }
+        whileTap={{
+          scale: 0.99,
+          boxShadow: '0px 0px 0px rgba(0,0,0,0)',
+        }}
+        transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+        className="flex justify-between items-center cursor-pointer rounded-md px-2 py-[10px]"
         onClick={onToggle}
       >
         <div>{plan.name}</div>
@@ -28,19 +42,31 @@ const PlanListItem: React.FC<PlanListItemProps> = ({
           <img
             src={dropdownIcon}
             alt="열기"
-            className={`w-3 h-[6px] ${isOpen ? 'rotate-180' : ''}`}
+            className={`w-3 h-[6px] transition-transform duration-200 ${
+              isOpen ? 'rotate-180' : ''
+            }`}
           />
         </div>
-      </div>
-      {isOpen && (
-        <>
-          <PlanDetailInfo
-            plan={plan}
-            onClick={onSelect}
-            disabled={isDisabled}
-          />
-        </>
-      )}
+      </motion.div>
+
+      <AnimatePresence initial={false}>
+        {isOpen && (
+          <motion.div
+            key="content"
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.25, ease: 'easeInOut' }}
+            className="overflow-hidden"
+          >
+            <PlanDetailInfo
+              plan={plan}
+              onClick={onSelect}
+              disabled={isDisabled}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 };
diff --git a/client/src/components/ComparePage/PlanSelectionCard.tsx b/client/src/components/ComparePage/PlanSelectionCard.tsx
deleted file mode 100644
index 668d8f1..0000000
--- a/client/src/components/ComparePage/PlanSelectionCard.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import versusIcon from '@/assets/icon/versus_icon.svg';
-import closeIcon from '@/assets/icon/close.svg';
-import type { Plan } from '@/components/types/Plan';
-
-interface PlanSelectionCardProps {
-  selectedLeft: Plan | null;
-  selectedRight: Plan | null;
-  onSelectSlot: (slot: 'left' | 'right') => void;
-  onClearSlot: (slot: 'left' | 'right') => void;
-}
-
-const PlanSelectionCard: React.FC<PlanSelectionCardProps> = ({
-  selectedLeft,
-  selectedRight,
-  onSelectSlot,
-  onClearSlot,
-}) => {
-  return (
-    <div className="flex justify-center my-[29px]">
-      <div className="flex justify-between w-full">
-        <div
-          onClick={() => onSelectSlot('left')}
-          className={`relative flex-[2] flex w-full aspect-square rounded-[17px] cursor-pointer bg-background-40 py-4 px-3 justify-center  ${selectedLeft ? 'outline outline-primary-pink flex-col gap-[clamp(0px,2vw,8px)]' : 'shadow-basic items-center '}`}
-        >
-          {selectedLeft ? (
-            <>
-              <div
-                className="absolute top-0 right-0 p-[10px]"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onClearSlot('left');
-                }}
-              >
-                <img src={closeIcon} alt="closeIcon" className="w-4 h-4" />
-              </div>
-              <p className="text-[15px] font-semibold text-gradation w-fit">
-                {selectedLeft.name}
-              </p>
-              <p className="text-xs font-semibold text-gray500 w-fit">
-                {selectedLeft.dataGb === -1
-                  ? '무제한'
-                  : selectedLeft.dataGb + 'GB'}
-              </p>
-              <p className="font-semibold text-primary-pink w-fit">
-                {selectedLeft.monthlyFee.toLocaleString()}원
-              </p>
-            </>
-          ) : (
-            <p className="text-gradation text-2xl font-semibold text-center">
-              요금제
-              <br />
-              선택
-            </p>
-          )}
-        </div>
-        <div className="flex-[1] flex justify-center items-center">
-          <img src={versusIcon} alt="versusIcon" />
-        </div>
-        <div
-          onClick={() => onSelectSlot('right')}
-          className={`relative flex-[2] flex w-full aspect-square rounded-[17px] cursor-pointer bg-background-40 py-4 px-3 justify-center  ${selectedRight ? 'outline outline-primary-pink flex-col gap-[8px]' : 'shadow-basic items-center '}`}
-        >
-          {selectedRight ? (
-            <>
-              <div
-                className="absolute top-0 right-0 p-[10px]"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onClearSlot('right');
-                }}
-              >
-                <img src={closeIcon} alt="closeIcon" className="w-4 h-4" />
-              </div>
-              <p className="text-[15px] font-semibold text-gradation w-fit">
-                {selectedRight.name}
-              </p>
-              <p className="text-xs font-semibold text-gray500 w-fit">
-                {selectedRight.dataGb === -1
-                  ? '무제한'
-                  : selectedRight.dataGb + 'GB'}
-              </p>
-              <p className="font-semibold text-primary-pink w-fit">
-                {selectedRight.monthlyFee.toLocaleString()}원
-              </p>
-            </>
-          ) : (
-            <p className="text-gradation text-2xl font-semibold text-center">
-              요금제
-              <br />
-              선택
-            </p>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PlanSelectionCard;
diff --git a/client/src/components/ComparePage/PlanSelectionCardArea.tsx b/client/src/components/ComparePage/PlanSelectionCardArea.tsx
new file mode 100644
index 0000000..5791a6f
--- /dev/null
+++ b/client/src/components/ComparePage/PlanSelectionCardArea.tsx
@@ -0,0 +1,106 @@
+import versusIcon from '@/assets/icon/versus_icon.svg';
+import closeIcon from '@/assets/icon/close.svg';
+import AnimatedCardWrapper from '@/components/common/AnimatedWrapper';
+import FloatingIcon from '@/components/common/FloatingIcon';
+import type { Plan } from '@/components/types/Plan';
+
+const SlotCard = ({
+  selected,
+  onClick,
+  onClear,
+  shouldHighlight = false,
+}: {
+  selected: Plan | null;
+  onClick: () => void;
+  onClear: () => void;
+  shouldHighlight?: boolean;
+}) => {
+  return (
+    <div className="relative flex-[2] w-full flex rounded-[17px] cursor-pointer justify-center">
+      <AnimatedCardWrapper
+        className={`relative flex-1 flex justify-center bg-background-40 rounded-[17px] aspect-square max-w-[160px] ${
+          selected
+            ? 'outline outline-primary-pink gap-[clamp(0px,2vw,8px)]'
+            : 'shadow-md items-center'
+        }`}
+        onClick={onClick}
+        shouldHighlight={!selected && shouldHighlight} // 여기에 넘기기
+      >
+        {selected ? (
+          <div className="w-full h-full flex justify-center items-center">
+            <div
+              className="absolute top-0 right-0 z-20 p-[10px]"
+              onClick={(e) => {
+                e.stopPropagation();
+                onClear();
+              }}
+            >
+              <img src={closeIcon} alt="closeIcon" className="w-4 h-4" />
+            </div>
+            <div className="flex flex-col justify-center gap-[5%] items-start z-10 h-[92%] w-[92%]">
+              <h3 className="text-[15px] font-semibold text-gradation w-fit leading-tight">
+                {selected.name}
+              </h3>
+              <p className="text-xs font-semibold text-gray500 w-fit">
+                {selected.dataGb === -1
+                  ? '데이터 무제한'
+                  : `데이터 ${selected.dataGb}GB`}
+              </p>
+              <p className="font-semibold text-primary-pink w-fit">
+                {selected.monthlyFee.toLocaleString()}원
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="flex justify-center items-center w-full h-full">
+            <p className="text-gradation text-2xl font-semibold text-center select-none">
+              {' '}
+              요금제
+              <br />
+              선택
+            </p>
+          </div>
+        )}
+      </AnimatedCardWrapper>
+    </div>
+  );
+};
+
+interface PlanSelectionCardAreaProps {
+  selectedLeft: Plan | null;
+  selectedRight: Plan | null;
+  onSelectSlot: (slot: 'left' | 'right') => void;
+  onClearSlot: (slot: 'left' | 'right') => void;
+}
+
+const PlanSelectionCardArea: React.FC<PlanSelectionCardAreaProps> = ({
+  selectedLeft,
+  selectedRight,
+  onSelectSlot,
+  onClearSlot,
+}) => {
+  const noneSelected = !selectedLeft && !selectedRight;
+  return (
+    <div className="my-[29px]">
+      <div className="flex w-full">
+        <SlotCard
+          selected={selectedLeft}
+          onClick={() => onSelectSlot('left')}
+          onClear={() => onClearSlot('left')}
+          shouldHighlight={noneSelected || !selectedLeft}
+        />
+        <div className="flex justify-center items-center w-20">
+          <FloatingIcon src={versusIcon} alt="versus icon" />
+        </div>
+        <SlotCard
+          selected={selectedRight}
+          onClick={() => onSelectSlot('right')}
+          onClear={() => onClearSlot('right')}
+          shouldHighlight={noneSelected || !selectedRight}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PlanSelectionCardArea;
diff --git a/client/src/components/ServiceGuide/ServiceGuide.tsx b/client/src/components/ServiceGuide/ServiceGuide.tsx
deleted file mode 100644
index 64e6f80..0000000
--- a/client/src/components/ServiceGuide/ServiceGuide.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { Swiper, SwiperSlide } from 'swiper/react';
-
-import { Pagination } from 'swiper/modules';
-
-import serviceGuide1 from '@/assets/image/service_guide1.png';
-import serviceGuide2 from '@/assets/image/service_guide2.png';
-import serviceGuide3 from '@/assets/image/service_guide3.png';
-import serviceGuide4 from '@/assets/image/service_guide4.png';
-import serviceGuide5 from '@/assets/image/service_guide5.png';
-import serviceGuideIcon1 from '@/assets/icon/robot_icon.png';
-import serviceGuideIcon2 from '@/assets/icon/chatbot_icon.png';
-import serviceGuideIcon34 from '@/assets/icon/test_icon.png';
-import serviceGuideIcon5 from '@/assets/icon/compare_icon.png';
-import guideCloseIcon from '@/assets/icon/guide_close.svg';
-
-interface ServiceGuideProps {
-  onClose: () => void;
-}
-
-const ServiceGuide: React.FC<ServiceGuideProps> = ({ onClose }) => {
-  const pagination = {
-    clickable: true,
-    renderBullet: function (index, className) {
-      return '<span class="' + className + '" id="' + index + '"></span>';
-    },
-  };
-  return (
-    <div className="absolute inset-0 bg-background-40 flex flex-col items-center justify-center z-100 max-h-screen overflow-hidden">
-      <div className="w-full h-screen select-none">
-        <Swiper
-          pagination={pagination}
-          modules={[Pagination]}
-          className="mySwiper h-full"
-        >
-          <img
-            src={guideCloseIcon}
-            alt="guideCloseIcon"
-            onClick={onClose}
-            className="absolute top-5 right-5 p-2 m-3 cursor-pointer z-9999"
-          />
-          <SwiperSlide>
-            <div className="flex flex-col gap-5 items-center text-xl font-semibold text-center w-full justify-center absolute top-[50px]">
-              <img src={serviceGuideIcon1} alt="serviceGuideIcon1" />
-              <div>
-                <span className="text-gradation">Me플러스</span>
-                에서 <br />
-                내게 딱 맞는 요금제를 추천해드려요
-              </div>
-              <img
-                src={serviceGuide1}
-                alt="serviceGuide1"
-                className="max-w-[200px] w-3/5"
-              />
-            </div>
-          </SwiperSlide>
-          <SwiperSlide>
-            <div className="flex flex-col gap-5 items-center text-xl font-semibold text-center w-full justify-center absolute top-[50px]">
-              <img src={serviceGuideIcon2} alt="serviceGuideIcon1" />
-              <div>
-                사소한 궁금증부터 필요한 정보
-                <br />
-                챗봇에서 편하게 물어보고
-              </div>
-              <img
-                src={serviceGuide2}
-                alt="serviceGuide1"
-                className="max-w-[200px] w-3/5"
-              />
-            </div>
-          </SwiperSlide>
-          <SwiperSlide>
-            <div className="flex flex-col gap-5 items-center text-xl font-semibold text-center w-full justify-center absolute top-[50px]">
-              <img src={serviceGuideIcon34} alt="serviceGuideIcon1" />
-              <div>
-                무엇을 물어볼지 모를 때는,
-                <br />
-                맞춤형 요금제 찾아보기에서
-              </div>
-              <img
-                src={serviceGuide3}
-                alt="serviceGuide1"
-                className="max-w-[200px] w-3/5"
-              />
-            </div>
-          </SwiperSlide>
-          <SwiperSlide>
-            <div className="flex flex-col gap-5 items-center text-xl font-semibold text-center w-full justify-center absolute top-[50px]">
-              <img src={serviceGuideIcon34} alt="serviceGuideIcon1" />
-              <div>
-                간단한 테스트로
-                <br />딱 맞는 요금제를 찾아드려요
-              </div>
-              <img
-                src={serviceGuide4}
-                alt="serviceGuide1"
-                className="max-w-[200px] w-3/5"
-              />
-            </div>
-          </SwiperSlide>
-          <SwiperSlide>
-            <div className="flex flex-col gap-5 items-center text-xl font-semibold text-center w-full justify-center absolute top-[50px]">
-              <img
-                src={serviceGuideIcon5}
-                alt="serviceGuideIcon1"
-                className="w-[75px] h-[75px]"
-              />
-              <div>
-                어떤 요금제가 더 좋은지 모를 땐,
-                <br />
-                요금제 비교하기에서!
-              </div>
-              <img
-                src={serviceGuide5}
-                alt="serviceGuide1"
-                className="max-w-[200px] w-3/5"
-              />
-            </div>
-            <div
-              onClick={onClose}
-              className="absolute bottom-[23px] left-1/2 -translate-x-1/2 w-[calc(100%-40px)] h-[46px] bg-primary-pink text-sm font-semibold text-background-40 flex justify-center items-center cursor-pointer rounded-[10px]"
-            >
-              Me플러스 시작하기
-            </div>
-          </SwiperSlide>
-        </Swiper>
-      </div>
-    </div>
-  );
-};
-
-export default ServiceGuide;
diff --git a/client/src/components/ServiceGuidePage/GuideSlide.tsx b/client/src/components/ServiceGuidePage/GuideSlide.tsx
new file mode 100644
index 0000000..7f93dfd
--- /dev/null
+++ b/client/src/components/ServiceGuidePage/GuideSlide.tsx
@@ -0,0 +1,21 @@
+interface GuideSlideProps {
+  icon: string;
+  text: React.ReactNode;
+  image: string;
+}
+
+const GuideSlide: React.FC<GuideSlideProps> = ({ icon, text, image }) => {
+  return (
+    <div className="flex flex-col items-center text-xl font-semibold text-center w-full h-full absolute top-1/16">
+      <img src={icon} alt="icon" className="h-[75px]" />
+      <div className="flex items-center h-[84px]">{text}</div>
+      <img
+        src={image}
+        alt="guide"
+        className="max-h-[500px] h-[50%] aspect-1/2"
+      />
+    </div>
+  );
+};
+
+export default GuideSlide;
diff --git a/client/src/components/chatbot/BotBubble.tsx b/client/src/components/chatbot/BotBubble.tsx
index 1124101..f7b9450 100644
--- a/client/src/components/chatbot/BotBubble.tsx
+++ b/client/src/components/chatbot/BotBubble.tsx
@@ -127,7 +127,7 @@ const BotBubble = ({ messageChunks }: BotBubbleProps) => {
       {/* 숨겨진 텍스트로 크기 측정용 박스 (패딩 추가로 여유공간 확보) */}
       <div
         ref={ghostRef}
-        className="absolute invisible max-w-[309px] p-2 text-[14px] leading-5 whitespace-pre-wrap break-words"
+        className="absolute invisible max-w-[265px] p-2 text-[14px] leading-5 whitespace-pre-wrap break-words"
         style={{ minHeight: '24px', padding: '12px' }}
       >
         <MarkedText chars={chars} />
diff --git a/client/src/components/chatbot/BotBubbleFrame.tsx b/client/src/components/chatbot/BotBubbleFrame.tsx
index 1918ea3..1241525 100644
--- a/client/src/components/chatbot/BotBubbleFrame.tsx
+++ b/client/src/components/chatbot/BotBubbleFrame.tsx
@@ -72,6 +72,7 @@ export interface BotBubbleFrameProps {
   ) => void;
   onOttSelect?: (selectedServices: string[], messageIndex?: number) => void;
   onOxSelect?: (selectedOption: string, messageIndex?: number) => void;
+  onToggleCardClick?: (cardElement: HTMLDivElement) => void;
   messageIndex?: number;
   selectedData?: {
     selectedItem?: CarouselItem;
@@ -89,6 +90,7 @@ const BotBubbleFrame = ({
   onCarouselSelect,
   onOttSelect,
   onOxSelect,
+  onToggleCardClick,
   messageIndex,
   selectedData,
   showChatbotIcon = true,
@@ -137,10 +139,6 @@ const BotBubbleFrame = ({
         ) : null;
       case 'requestOTTServiceList':
         // 디버깅 로그 추가
-        console.log(
-          '🎬 BotBubbleFrame rendering OTT with selectedData:',
-          selectedData,
-        );
 
         return (
           <OttButtonGroup
@@ -174,7 +172,11 @@ const BotBubbleFrame = ({
         return args?.plans ? (
           <div className="space-y-3">
             {args.plans.map((plan, index) => (
-              <ToggleCard key={plan._id || index} plan={plan} />
+              <ToggleCard
+                key={plan._id || index}
+                plan={plan}
+                onToggleClick={onToggleCardClick}
+              />
             ))}
           </div>
         ) : null;
@@ -199,11 +201,14 @@ const BotBubbleFrame = ({
             />
           </div>
         ) : (
-          <div className="flex-shrink-0 w-8 h-8 mt-1" />
+          <div className="flex-shrink-0 w-8  mt-1" />
         )}
 
         {/* 메시지 및 버튼 그룹 영역 */}
-        <div className="flex-1 space-y-2">
+        <div
+          className=" flex-1 space-y-2"
+          style={{ maxWidth: 'calc(min(100vw, 600px) - 40px)' }}
+        >
           {shouldShowMessage && <BotBubble messageChunks={messageChunks} />}
           {buttonGroup && (
             <motion.div
diff --git a/client/src/components/chatbot/ChatButton.tsx b/client/src/components/chatbot/ChatButton.tsx
index 693ec8f..b96700f 100644
--- a/client/src/components/chatbot/ChatButton.tsx
+++ b/client/src/components/chatbot/ChatButton.tsx
@@ -13,7 +13,6 @@ const ChatButton = ({
 }: ChatButtonProps) => {
   const handleClick = () => {
     if (disabled) return;
-    console.log('사용자 메시지:', label);
     if (onClick) onClick();
   };
 
@@ -21,7 +20,7 @@ const ChatButton = ({
     <button
       onClick={handleClick}
       disabled={disabled}
-      className={`flex items-center p-[10px] gap-[6px] rounded-[12px] shadow-small min-w-fit whitespace-nowrap transition-all ${
+      className={`flex items-center p-[10px] gap-[6px] rounded-[12px] shadow-md min-w-fit whitespace-nowrap transition-all ${
         disabled ? 'bg-white ' : 'bg-white hover:bg-gray-50 cursor-pointer'
       }`}
     >
diff --git a/client/src/components/chatbot/ChatButtonGroups/CarouselButtonGroup.tsx b/client/src/components/chatbot/ChatButtonGroups/CarouselButtonGroup.tsx
index 83c8757..28fc1e0 100644
--- a/client/src/components/chatbot/ChatButtonGroups/CarouselButtonGroup.tsx
+++ b/client/src/components/chatbot/ChatButtonGroups/CarouselButtonGroup.tsx
@@ -39,16 +39,18 @@ const CarouselButtonGroup = ({
   };
 
   return (
-    <DraggableScroll className="flex flex-nowrap gap-1 hide-scrollbar overflow-visible mx-1.5">
-      {options.map((option, idx) => (
-        <ChatButton
-          key={idx}
-          label={option.label}
-          disabled={clickedButton !== null && clickedButton !== option.label}
-          onClick={() => handleButtonClick(option)}
-        />
-      ))}
-    </DraggableScroll>
+    <>
+      <DraggableScroll className="flex flex-nowrap gap-2">
+        {options.map((option, idx) => (
+          <ChatButton
+            key={idx}
+            label={option.label}
+            disabled={clickedButton !== null && clickedButton !== option.label}
+            onClick={() => handleButtonClick(option)}
+          />
+        ))}
+      </DraggableScroll>
+    </>
   );
 };
 
diff --git a/client/src/components/chatbot/ChatButtonGroups/OXButtonGroup.tsx b/client/src/components/chatbot/ChatButtonGroups/OXButtonGroup.tsx
index 8a35200..863fb5f 100644
--- a/client/src/components/chatbot/ChatButtonGroups/OXButtonGroup.tsx
+++ b/client/src/components/chatbot/ChatButtonGroups/OXButtonGroup.tsx
@@ -30,10 +30,8 @@ const OXButtonGroup = ({
   // selectedData가 변경될 때마다 상태 업데이트
   useEffect(() => {
     if (selectedData?.isSelected && selectedData.selectedOption) {
-      console.log('🔄 OX 버튼 선택 상태 복원:', selectedData.selectedOption);
       setClickedButton(selectedData.selectedOption);
     } else {
-      console.log('🔄 OX 버튼 선택 상태 초기화');
       setClickedButton(null);
     }
   }, [selectedData]);
@@ -47,17 +45,19 @@ const OXButtonGroup = ({
   };
 
   return (
-    <DraggableScroll className="overflow-visible gap-1 items-start px-1 mx-1.5">
-      {options.map((option) => (
-        <ChatButton
-          key={option.id}
-          label={option.label}
-          icon={iconMap[option.id]}
-          disabled={clickedButton !== null && clickedButton !== option.label}
-          onClick={() => handleButtonClick(option.label)}
-        />
-      ))}
-    </DraggableScroll>
+    <>
+      <DraggableScroll className="flex flex-nowrap gap-2">
+        {options.map((option) => (
+          <ChatButton
+            key={option.id}
+            label={option.label}
+            icon={iconMap[option.id]}
+            disabled={clickedButton !== null && clickedButton !== option.label}
+            onClick={() => handleButtonClick(option.label)}
+          />
+        ))}
+      </DraggableScroll>
+    </>
   );
 };
 
diff --git a/client/src/components/chatbot/ChatButtonGroups/OttButtonGroup.tsx b/client/src/components/chatbot/ChatButtonGroups/OttButtonGroup.tsx
index a6fcc11..5a6f865 100644
--- a/client/src/components/chatbot/ChatButtonGroups/OttButtonGroup.tsx
+++ b/client/src/components/chatbot/ChatButtonGroups/OttButtonGroup.tsx
@@ -31,15 +31,11 @@ const OttButtonGroup = ({
   selectedData,
 }: OttButtonGroupProps) => {
   // 디버깅 로그 추가
-  console.log('🎬 OttButtonGroup rendered with selectedData:', selectedData);
 
   const [selectedServices, setSelectedServices] = useState<string[]>(
     selectedData?.isSelected ? selectedData.selectedServices : [],
   );
 
-  // 디버깅 로그 추가
-  console.log('🎬 OttButtonGroup selectedServices state:', selectedServices);
-
   // selectedData가 변경될 때마다 state 업데이트
   useEffect(() => {
     if (selectedData?.isSelected && selectedData.selectedServices) {
@@ -49,7 +45,6 @@ const OttButtonGroup = ({
       );
       setSelectedServices(selectedData.selectedServices);
     } else {
-      console.log('🔄 Resetting selectedServices (no selection data)');
       setSelectedServices([]);
     }
   }, [selectedData]);
@@ -65,8 +60,9 @@ const OttButtonGroup = ({
   };
 
   return (
-    <div className="px-1 -mx-1">
-      <DraggableScroll className="flex overflow-visible flex-nowrap gap-1  mx-1.5">
+    <>
+      <DraggableScroll className="flex flex-nowrap gap-2">
+
         {OTT_SERVICES.map((service) => (
           <ChatButton
             key={service.id}
@@ -80,7 +76,7 @@ const OttButtonGroup = ({
           />
         ))}
       </DraggableScroll>
-    </div>
+    </>
   );
 };
 
diff --git a/client/src/components/chatbot/FirstCardList.tsx b/client/src/components/chatbot/FirstCardList.tsx
index 41764ab..38164c1 100644
--- a/client/src/components/chatbot/FirstCardList.tsx
+++ b/client/src/components/chatbot/FirstCardList.tsx
@@ -52,7 +52,7 @@ const CardItem = ({
   onButtonClick: (message: string) => void;
 }) => {
   return (
-    <div className="w-[180px] shrink-0 flex flex-col items-center gap-[18px] p-[10px] rounded-[12px] bg-gradation-background shadow-small">
+    <div className="w-[180px] shrink-0 flex flex-col items-center gap-[18px] p-[10px] rounded-[12px] bg-gradient-to-b from-[#dfe4fd] to-white shadow-md">
       <img
         src={item.image}
         alt={item.title}
@@ -92,8 +92,8 @@ const FirstCardList = ({
   };
 
   return (
-    <div className="mx-1 w-full max-w-[450px]">
-      <DraggableScroll className="flex flex-nowrap gap-[6px] hide-scrollbar overflow-visible">
+    <div className="w-full">
+      <DraggableScroll className="flex flex-nowrap gap-[10px]">
         {cardData.map((item) => (
           <CardItem
             key={item.id}
diff --git a/client/src/components/chatbot/ImageCard.tsx b/client/src/components/chatbot/ImageCard.tsx
index 9dbeb7a..c522fb2 100644
--- a/client/src/components/chatbot/ImageCard.tsx
+++ b/client/src/components/chatbot/ImageCard.tsx
@@ -15,7 +15,7 @@ const ImageCard = ({
 }: ImageCardProps) => {
   return (
     <div className="w-[227px] shadow-small rounded-2xl overflow-hidden bg-white text-gray700 flex flex-col">
-      <div className="h-[123px]">
+      <div className="h-[123px] bg-secondary-purple-40">
         <img
           src={imageUrl || NoImage}
           alt="preview"
@@ -26,6 +26,7 @@ const ImageCard = ({
         />
       </div>
 
+      {/* <hr className="border-b-[1px] border-[#eaeaea] my-[0px]" /> */}
       <div className="text-gray700 flex flex-col gap-[13px] p-[10px]">
         <p className="leading-[18px] text-xs break-all">{text}</p>
         <button
diff --git a/client/src/components/chatbot/InputBox.tsx b/client/src/components/chatbot/InputBox.tsx
index 4e4c9a7..c2a596b 100644
--- a/client/src/components/chatbot/InputBox.tsx
+++ b/client/src/components/chatbot/InputBox.tsx
@@ -57,7 +57,7 @@ const InputBox = ({
         onChange={(e) => onChange(e.target.value)}
         onKeyDown={handleKeyDown}
         placeholder="AI챗봇에게 물어보고 싶은 내용을 질문하세요."
-        className="flex-grow h-10 bg-white rounded-full focus:outline-none text-gray-700 placeholder-gray-400 text-sm px-5"
+        className="flex-grow h-10 w-full bg-white rounded-full focus:outline-none text-gray-700 placeholder-gray-400 text-sm px-5"
         disabled={disabled}
         autoFocus={shouldAutoFocus}
       />
@@ -65,7 +65,7 @@ const InputBox = ({
         type="button"
         onClick={handleSubmit}
         disabled={disabled}
-        className={`ml-3 rounded-full w-8 h-8 flex items-center justify-center transition-all duration-200 ${
+        className={`ml-3 rounded-full w-10 h-10 sm:w-8 sm:h-8 flex items-center justify-center transition-all duration-200 flex-shrink-0 ${
           disabled
             ? 'bg-gray-300 cursor-not-allowed'
             : 'bg-secondary-purple-80 hover:bg-secondary-purple-60 active:scale-95'
diff --git a/client/src/components/chatbot/ToggleCard.tsx b/client/src/components/chatbot/ToggleCard.tsx
index d82d598..36bac7d 100644
--- a/client/src/components/chatbot/ToggleCard.tsx
+++ b/client/src/components/chatbot/ToggleCard.tsx
@@ -13,12 +13,14 @@ export interface ColorTheme {
 
 interface ToggleCardProps {
   plan: PlanData;
+  onToggleClick?: (cardRef: HTMLDivElement) => void;
 }
 
-function ToggleCard({ plan }: ToggleCardProps) {
+function ToggleCard({ plan, onToggleClick }: ToggleCardProps) {
   const [isOpen, setIsOpen] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
   const [contentHeight, setContentHeight] = useState(0);
+  const cardRef = useRef<HTMLDivElement>(null);
 
   // 색상 테마 중앙 관리
   const colorTheme = {
@@ -108,10 +110,24 @@ function ToggleCard({ plan }: ToggleCardProps) {
     config: { tension: 250, friction: 25 },
   });
 
+  const handleClick = () => {
+    const wasOpen = isOpen;
+    setIsOpen(!isOpen);
+
+    // 카드가 닫혀있다가 열릴 때만 스크롤 요청
+    if (!wasOpen && onToggleClick && cardRef.current) {
+      // 애니메이션이 완료된 후 스크롤하도록 지연
+      setTimeout(() => {
+        onToggleClick(cardRef.current!);
+      }, 300); // 애니메이션 duration과 맞춤
+    }
+  };
+
   return (
     <div
-      className="w-[309px] bg-background-40 rounded-lg relative cursor-pointer overflow-hidden"
-      onClick={() => setIsOpen(!isOpen)}
+      ref={cardRef}
+      className="w-[265px] bg-background-40 rounded-lg relative cursor-pointer overflow-hidden"
+      onClick={handleClick}
     >
       <div
         className={`absolute top-0 left-0 w-[5px] h-full ${colorTheme.bgColor}`}
diff --git a/client/src/components/chatbot/ToggleCardContent.tsx b/client/src/components/chatbot/ToggleCardContent.tsx
index 3d32a04..e8c1d28 100644
--- a/client/src/components/chatbot/ToggleCardContent.tsx
+++ b/client/src/components/chatbot/ToggleCardContent.tsx
@@ -29,7 +29,7 @@ const ToggleCardContent = ({
 
       {/* 상세 정보 그리드 */}
       <div
-        className={`grid w-[274px] grid-cols-[24%_76%] gap-x-[5px] gap-y-[10px] text-xs ${colorTheme.textColor} text-[12px] py-[10px]`}
+        className={`grid w-full grid-cols-[24%_76%] gap-x-[5px] gap-y-[10px] text-xs ${colorTheme.textColor} text-[12px] py-[10px]`}
       >
         {otherDetails.map(({ key, value }, idx) => (
           <React.Fragment key={idx}>
diff --git a/client/src/components/chatbot/UserBubble.tsx b/client/src/components/chatbot/UserBubble.tsx
index ed73be5..b075f7c 100644
--- a/client/src/components/chatbot/UserBubble.tsx
+++ b/client/src/components/chatbot/UserBubble.tsx
@@ -1,13 +1,28 @@
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+
 interface UserBubbleProps {
   message: string;
 }
 
 function UserBubble({ message }: UserBubbleProps) {
+  const [isVisible, setIsVisible] = useState(false);
+
   return (
     <div className="space-y-2">
-      <div className="user-bubble w-fit max-w-[309px] p-[10px] rounded-tl-xl rounded-br-xl rounded-bl-xl text-sm text-white leading-5 whitespace-pre-wrap break-words overflow-hidden ml-auto">
+      <motion.div
+        initial={{ scale: 0, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        exit={{ scale: 0, opacity: 0 }}
+        transition={{ duration: 0.4, ease: 'easeOut' }}
+        onAnimationComplete={() => setIsVisible(true)}
+        style={{ originX: 1, originY: 0 }}
+        className={`w-fit max-w-[265px] p-[10px] rounded-tl-xl rounded-br-xl rounded-bl-xl text-sm text-white leading-5 whitespace-pre-wrap break-words overflow-hidden ml-auto ${
+          isVisible ? 'user-bubble' : 'bg-[#5732a1]'
+        }`}
+      >
         {message}
-      </div>
+      </motion.div>
     </div>
   );
 }
diff --git a/client/src/components/common/AnimatedWrapper.tsx b/client/src/components/common/AnimatedWrapper.tsx
index 6264a2b..8b30560 100644
--- a/client/src/components/common/AnimatedWrapper.tsx
+++ b/client/src/components/common/AnimatedWrapper.tsx
@@ -1,5 +1,5 @@
-import { motion, useAnimation } from 'framer-motion';
-import React from 'react';
+import { motion } from 'framer-motion';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 interface AnimatedCardWrapperProps {
@@ -7,66 +7,89 @@ interface AnimatedCardWrapperProps {
   children: React.ReactNode;
   to?: string;
   onClick?: () => void;
+  shouldHighlight?: boolean;
+  animationDisabled?: boolean;
 }
-const AnimatedCardWrapper: React.FC<AnimatedCardWrapperProps> = ({
+
+const AnimatedWrapper: React.FC<AnimatedCardWrapperProps> = ({
   className = '',
   children,
   to,
   onClick,
+  shouldHighlight = false,
+  animationDisabled = false,
 }) => {
-  const controls = useAnimation();
   const navigate = useNavigate();
-
-  const handleTapStart = () => {
-    controls.start({
-      scaleX: 2,
-      opacity: 0.15,
-      transition: { duration: 0.2, ease: 'easeOut' },
-    });
-  };
-
-  const handleTapEnd = () => {
-    controls.start({
-      opacity: 0,
-      transition: { duration: 0.3, ease: 'easeIn' },
-    });
-  };
+  const [isTapping, setIsTapping] = useState(false);
 
   const handleTap = () => {
-    if (onClick) {
-      onClick();
-    }
+    if (onClick) onClick();
     if (to) {
       setTimeout(() => {
         navigate(to);
       }, 400);
     }
   };
+  if (animationDisabled) {
+    return (
+      <div className={className} onClick={handleTap}>
+        {shouldHighlight && (
+          <div
+            className="absolute inset-0 rounded-[17px] pointer-events-none z-0"
+            style={{ boxShadow: '0 0 6px 1.5px rgba(255, 192, 203, 0.6)' }}
+          />
+        )}
+        <div className="relative z-10 w-full">{children}</div>
+      </div>
+    );
+  }
 
   return (
     <motion.div
-      whileHover={{
+      className={className}
+      whileHover={
+        !isTapping
+          ? {
+              scale: 0.98,
+              transition: { duration: 0.2, ease: 'easeInOut' },
+            }
+          : {}
+      }
+      whileTap={{
         scale: 0.97,
-        transition: { duration: 0.2, ease: 'easeInOut' },
+        transition: { duration: 0.2, ease: 'easeOut' },
       }}
-      whileTap={{ scale: 0.95, transition: { duration: 0.2, ease: 'easeOut' } }}
-      onTapStart={handleTapStart}
-      onTapCancel={handleTapEnd}
+      onTapStart={() => setIsTapping(true)}
+      onTapCancel={() => setIsTapping(false)}
       onTap={() => {
+        setIsTapping(false);
         handleTap();
-        handleTapEnd();
       }}
-      className={`relative w-full inline-flex rounded-[17px] p-[1px] overflow-hidden cursor-pointer ${className}`}
+      onPointerUp={() => setIsTapping(false)}
     >
-      <motion.div
-        style={{ transformOrigin: 'center' }}
-        className="absolute top-0 bottom-0 left-[20px] right-[20px] z-20 bg-black/90 rounded-[16px]"
-        initial={{ scaleX: 0, opacity: 0 }}
-        animate={controls}
-      />
+      {shouldHighlight && (
+        <motion.div
+          className="absolute inset-0 rounded-[17px] pointer-events-none z-0"
+          style={{ boxShadow: '0 0 6px 1.5px rgba(255, 192, 203, 0.6)' }}
+          animate={{
+            scale: [1, 1.01, 1],
+            boxShadow: [
+              '0 0 6px 1.5px rgba(255, 192, 203, 0.6)',
+              '0 0 8px 2px rgba(255, 192, 203, 0.9)',
+              '0 0 6px 1.5px rgba(255, 192, 203, 0.6)',
+            ],
+          }}
+          transition={{
+            repeat: Infinity,
+            duration: 1.5,
+            ease: 'easeInOut',
+          }}
+        />
+      )}
+
       <div className="relative z-10 w-full">{children}</div>
     </motion.div>
   );
 };
 
-export default AnimatedCardWrapper;
+export default AnimatedWrapper;
diff --git a/client/src/components/common/BenefitText.tsx b/client/src/components/common/BenefitText.tsx
new file mode 100644
index 0000000..5d35798
--- /dev/null
+++ b/client/src/components/common/BenefitText.tsx
@@ -0,0 +1,43 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+interface BenefitTextProps {
+  text: string;
+}
+
+const BenefitText: React.FC<BenefitTextProps> = ({ text }) => {
+  const [expanded, setExpanded] = useState(false);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const textRef = useRef<HTMLParagraphElement>(null);
+
+  const checkOverflow = () => {
+    const el = textRef.current;
+    if (el) {
+      setIsOverflowing(el.scrollHeight > el.clientHeight + 1);
+    }
+  };
+
+  useEffect(() => {
+    checkOverflow();
+
+    window.addEventListener('resize', checkOverflow);
+    return () => window.removeEventListener('resize', checkOverflow);
+  }, [text]);
+
+  const toggleExpanded = () => setExpanded((prev) => !prev);
+
+  return (
+    <div>
+      <p ref={textRef} className={`${!expanded ? 'clamped' : ''}`}>
+        {text}
+      </p>
+
+      {isOverflowing && (
+        <button className="toggleBtn" onClick={toggleExpanded}>
+          {expanded ? '간단히' : '더보기'}
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default BenefitText;
diff --git a/client/src/components/common/BounceIcon.tsx b/client/src/components/common/BounceIcon.tsx
new file mode 100644
index 0000000..05fb269
--- /dev/null
+++ b/client/src/components/common/BounceIcon.tsx
@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+
+interface BounceIconProps {
+  src: string;
+  alt?: string;
+  className?: string;
+  playAnimation?: boolean;
+  animationType?: 'scaleIn' | 'bounce';
+}
+
+const BounceIcon: React.FC<BounceIconProps> = ({
+  src,
+  alt = 'bounce icon',
+  className = '',
+  playAnimation = true,
+  animationType = 'scaleIn',
+}) => {
+  const [shouldAnimate, setShouldAnimate] = useState(false);
+
+  useEffect(() => {
+    if (playAnimation) {
+      const timeout = setTimeout(() => setShouldAnimate(true), 50);
+      return () => clearTimeout(timeout);
+    } else {
+      setShouldAnimate(false);
+    }
+  }, [playAnimation]);
+
+  const getScaleAnimation = () => {
+    if (!shouldAnimate) return {};
+    if (animationType === 'scaleIn') {
+      return { scale: [0.4, 1.2, 1.1] };
+    }
+    if (animationType === 'bounce') {
+      return { scale: [0.4, 1.3, 1.2] };
+    }
+    return {};
+  };
+
+  return (
+    <motion.img
+      src={src}
+      alt={alt}
+      className={className}
+      initial={{ scale: 1 }}
+      animate={getScaleAnimation()}
+      transition={{
+        duration: 1.2,
+        ease: 'easeInOut',
+      }}
+    />
+  );
+};
+
+export default BounceIcon;
diff --git a/client/src/components/common/Button.tsx b/client/src/components/common/Button.tsx
index a2883d5..3e47d96 100644
--- a/client/src/components/common/Button.tsx
+++ b/client/src/components/common/Button.tsx
@@ -81,13 +81,9 @@ const Button: React.FC<ButtonProps> = ({
   const sizeStyles = getSizeStyles();
 
   return (
-    <AnimatedCardWrapper onClick={onClick}>
-      <button
-        type={type}
-        onClick={onClick}
-        disabled={disabled}
-        className={`
-        ${sizeStyles.padding} 
+    <AnimatedCardWrapper
+      className={`
+        flex items-center justify-center shadow-special
         ${sizeStyles.fontSize} 
         ${sizeStyles.height} 
         ${sizeStyles.borderRadius}
@@ -101,7 +97,17 @@ const Button: React.FC<ButtonProps> = ({
             : 'hover:cursor-pointer'
         }
         ${className}
+
       `}
+      onClick={onClick}
+    >
+      <button
+        // onClick={disabled ? undefined : onClick}
+        type={type}
+        disabled={disabled}
+        className={`cursor-pointer w-full h-full flex items-center justify-center
+    ${sizeStyles.padding}
+  `}
       >
         {children}
       </button>
diff --git a/client/src/components/common/DraggableScroll.tsx b/client/src/components/common/DraggableScroll.tsx
index 3e576dc..8871891 100644
--- a/client/src/components/common/DraggableScroll.tsx
+++ b/client/src/components/common/DraggableScroll.tsx
@@ -57,19 +57,23 @@ const DraggableScroll = ({ children, className = '' }: Props) => {
   return (
     <div
       ref={containerRef}
-      className={`${className.includes('overflow-') ? '' : 'overflow-hidden'} ${className}`}
+      className={`overflow-hidden max-w-full -ml-1`}
+      style={{ maxWidth: 'calc(min(100vw, 600px) - 74px)' }}
     >
-      <motion.div
-        ref={innerRef}
-        className={`flex ${className}`}
-        drag="x"
-        dragConstraints={constraints}
-        dragElastic={0.1}
-        whileTap={{ cursor: 'grabbing' }}
-        style={{ cursor: 'grab' }}
-      >
-        {children}
-      </motion.div>
+      <div className="overflow-hidden">
+        <motion.div
+          ref={innerRef}
+          className={`flex pl-1 py-[10px] ${className}`}
+          style={{ maxWidth: 'calc(min(100vw, 600px) - 90px)', cursor: 'grab' }}
+          drag="x"
+          dragConstraints={constraints}
+          dragElastic={0.1}
+          whileTap={{ cursor: 'grabbing' }}
+        >
+          {children}
+          <div className="w-[1px] shrink-0" />
+        </motion.div>
+      </div>
     </div>
   );
 };
diff --git a/client/src/components/common/FadeInUpDiv.tsx b/client/src/components/common/FadeInUpDiv.tsx
index be2ea71..ea78531 100644
--- a/client/src/components/common/FadeInUpDiv.tsx
+++ b/client/src/components/common/FadeInUpDiv.tsx
@@ -1,26 +1,48 @@
 import { motion } from 'framer-motion';
 import type { Variants, HTMLMotionProps } from 'framer-motion';
 
-const fadeInUp = (custom: number): Variants => ({
-  hidden: { opacity: 0, y: 20 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    transition: { delay: custom * 0.2, duration: 0.6, ease: 'easeOut' },
-  },
-});
+const fadeInY = (
+  custom: number,
+  reverse: boolean,
+  delayUnit = 0.2,
+  duration = 0.6,
+): Variants => {
+  const offsetY = reverse ? -20 : 20;
+  return {
+    hidden: { opacity: 0, y: offsetY },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        delay: custom * delayUnit,
+        duration,
+        ease: 'easeOut',
+      },
+    },
+  };
+};
 
 interface FadeInUpDivProps extends HTMLMotionProps<'div'> {
   custom: number;
   children: React.ReactNode;
+  delayUnit?: number;
+  duration?: number;
+  reverse?: boolean;
 }
 
-const FadeInUpDiv = ({ custom, children, ...rest }: FadeInUpDivProps) => (
+const FadeInUpDiv = ({
+  custom,
+  delayUnit = 0.2,
+  duration = 0.6,
+  reverse = false,
+  children,
+  ...rest
+}: FadeInUpDivProps) => (
   <motion.div
     initial="hidden"
     animate="visible"
     custom={custom}
-    variants={fadeInUp(custom)}
+    variants={fadeInY(custom, reverse, delayUnit, duration)}
     {...rest}
   >
     {children}
diff --git a/client/src/components/common/FloatingIcon.tsx b/client/src/components/common/FloatingIcon.tsx
new file mode 100644
index 0000000..b6968c9
--- /dev/null
+++ b/client/src/components/common/FloatingIcon.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+interface FloatingIconProps {
+  src: string;
+  alt?: string;
+  className?: string;
+  variant?: 'default' | 'large';
+}
+
+const FloatingIcon: React.FC<FloatingIconProps> = ({
+  src,
+  alt = 'floating icon',
+  className = '',
+  variant = 'default',
+}) => {
+  const isLarge = variant === 'large';
+
+  return (
+    <motion.img
+      src={src}
+      alt={alt}
+      className={className}
+      animate={{
+        y: isLarge ? [0, -10, 0] : [0, -5, 0],
+        rotateY: isLarge ? [0, 0, 0] : [0, 15, 0],
+      }}
+      transition={{
+        duration: isLarge ? 1.5 : 3,
+        repeat: Infinity,
+        ease: 'easeInOut',
+      }}
+    />
+  );
+};
+
+export default FloatingIcon;
diff --git a/client/src/components/common/Header.tsx b/client/src/components/common/Header.tsx
index e90a342..b7747b4 100644
--- a/client/src/components/common/Header.tsx
+++ b/client/src/components/common/Header.tsx
@@ -10,7 +10,7 @@ interface HeaderProps {
     icon: ReactNode;
     onClick: () => void;
   }[];
-  isTransparent?: boolean;
+  isSpecialColor?: boolean;
   className?: string;
 }
 
@@ -18,7 +18,7 @@ const Header = ({
   title,
   onBackClick,
   iconButtons,
-  isTransparent = false,
+  isSpecialColor = false,
   className = '',
 }: HeaderProps) => {
   const navigate = useNavigate();
@@ -32,8 +32,8 @@ const Header = ({
   return (
     <>
       <header
-        className={`fixed top-0 left-1/2 transform -translate-x-1/2 w-full max-w-[600px] px-3 pt-3 pb-3 flex items-center justify-between z-50 ${
-          isTransparent ? 'bg-transparent' : 'bg-white'
+        className={`fixed top-0 left-1/2 transform -translate-x-1/2 w-full max-w-[600px] px-3 pt-4 pb-3 flex items-center justify-between z-50 ${
+          isSpecialColor ? 'bg-secondary-purple-40' : 'bg-background'
         } ${className}`}
       >
         <TintedWrapper>
diff --git a/client/src/components/common/IconSwitcher.tsx b/client/src/components/common/IconSwitcher.tsx
new file mode 100644
index 0000000..b9b28d5
--- /dev/null
+++ b/client/src/components/common/IconSwitcher.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+interface IconSwitcherProps {
+  isAnswered: boolean;
+  shouldBounce: boolean;
+  srcAnswered: string;
+  srcIdle: string;
+  alt?: string;
+  className?: string;
+}
+
+const IconSwitcher: React.FC<IconSwitcherProps> = ({
+  isAnswered,
+  shouldBounce,
+  srcAnswered,
+  srcIdle,
+  alt = 'icon',
+  className = '',
+}) => {
+  const isLarge = true;
+
+  const animation = isAnswered
+    ? shouldBounce
+      ? { scale: [1, 0.9, 1.1, 1], y: 0, rotateY: 0 }
+      : { scale: 1, y: [0, -5, 0], rotateY: [0, 7, 0] }
+    : { scale: 1, y: [0, -5, 0], rotateY: [0, 7, 0] };
+
+  return (
+    <motion.img
+      // key={isAnswered ? 'answered' : 'idle'}
+      src={isAnswered ? srcAnswered : srcIdle}
+      alt={alt}
+      className={className}
+      initial={{ scale: 1 }}
+      animate={animation}
+      transition={{
+        duration: shouldBounce ? 0.6 : isLarge ? 1.5 : 3,
+        repeat: shouldBounce ? 0 : Infinity,
+        ease: 'easeInOut',
+      }}
+    />
+  );
+};
+
+export default IconSwitcher;
diff --git a/client/src/components/common/Modal.tsx b/client/src/components/common/Modal.tsx
index b17c567..717714f 100644
--- a/client/src/components/common/Modal.tsx
+++ b/client/src/components/common/Modal.tsx
@@ -20,7 +20,7 @@ const Modal: React.FC<ModalProps> = ({
     if (isOpen) {
       document.body.style.overflow = 'hidden';
     } else {
-      document.body.style.overflow = 'auto';
+      document.body.style.overflow = 'hidden';
     }
 
     const handleEsc = (event: KeyboardEvent) => {
@@ -32,7 +32,7 @@ const Modal: React.FC<ModalProps> = ({
     window.addEventListener('keydown', handleEsc);
     return () => {
       window.removeEventListener('keydown', handleEsc);
-      document.body.style.overflow = 'auto';
+      document.body.style.overflow = 'hidden';
     };
   }, [isOpen, onClose]);
 
diff --git a/client/src/components/testPage/SelectButton.tsx b/client/src/components/testPage/SelectButton.tsx
index 4b31c0a..f65ed14 100644
--- a/client/src/components/testPage/SelectButton.tsx
+++ b/client/src/components/testPage/SelectButton.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import YesIcon from '@/assets/icon/yes.svg?react';
 import NoIcon from '@/assets/icon/no.svg?react';
+import AnimatedWrapper from '@/components/common/AnimatedWrapper';
 
 interface SelectButtonProps {
   label: string;
@@ -8,6 +9,7 @@ interface SelectButtonProps {
   onClick: () => void;
   type: 'yes' | 'no';
   disabled?: boolean;
+  animationDisabled?: boolean;
 }
 
 const SelectButton: React.FC<SelectButtonProps> = ({
@@ -16,9 +18,10 @@ const SelectButton: React.FC<SelectButtonProps> = ({
   onClick,
   type,
   disabled,
+  animationDisabled,
 }) => {
   const baseClass =
-    'w-[153px] h-[153px] flex flex-col items-center justify-center text-[16px] transition-all rounded-[20px]';
+    'w-[153px] h-[153px] flex flex-col items-center justify-center text-[16px] transition-all rounded-[20px] bg-white';
 
   const textColor = selected ? 'text-[var(--color-gray700)]' : 'text-gray-400';
   const iconColor = selected
@@ -30,29 +33,40 @@ const SelectButton: React.FC<SelectButtonProps> = ({
 
   const selectedStyle = selected
     ? {
-        borderWidth: '3px',
-        borderStyle: 'solid',
-        borderImage: 'var(--color-gradation)',
+        // borderWidth: '3px',
+        // borderStyle: 'solid',
+        // borderImage: 'var(--color-gradation)',
         borderImageSlice: 1,
         backgroundImage: 'var(--color-gradation-20)',
-        borderRadius: '20px',
+        // borderRadius: '20px',
       }
     : {};
 
   const IconComponent = type === 'yes' ? YesIcon : NoIcon;
 
+  const selectedBorder = selected ? 'bg-gradation' : 'bg-gray200';
+
   return (
-    <button
-      onClick={onClick}
-      disabled={disabled}
-      className={`${baseClass} ${textColor} ${
-        selected ? '' : 'border border-gray300 bg-white'
-      } ${fadeClass}`}
-      style={selectedStyle}
+    <AnimatedWrapper
+      className={`p-[2px] rounded-[22px] ${selectedBorder}`}
+      animationDisabled={animationDisabled}
     >
-      <IconComponent className={`w-[50px] h-[50px] mb-1 ${iconColor}`} />
-      <span>{label}</span>
-    </button>
+      <button
+        onClick={onClick}
+        disabled={disabled}
+        className={`
+          ${baseClass}
+          ${textColor}
+          ${selected ? '' : ' bg-white'}
+          ${fadeClass}
+          ${!disabled ? 'cursor-pointer' : ''}
+          `}
+        style={selectedStyle}
+      >
+        <IconComponent className={`w-[50px] h-[50px] mb-1 ${iconColor}`} />
+        <span>{label}</span>
+      </button>
+    </AnimatedWrapper>
   );
 };
 
diff --git a/client/src/components/testPage/SelectButton3.tsx b/client/src/components/testPage/SelectButton3.tsx
index aa7a97a..f2c352c 100644
--- a/client/src/components/testPage/SelectButton3.tsx
+++ b/client/src/components/testPage/SelectButton3.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
+import AnimatedWrapper from '../common/AnimatedWrapper';
 
 interface SelectButton3Props {
   label: string;
   selected: boolean;
   onClick: () => void;
   disabled?: boolean;
+  animationDisabled?: boolean;
 }
 
 const SelectButton3: React.FC<SelectButton3Props> = ({
@@ -12,37 +14,45 @@ const SelectButton3: React.FC<SelectButton3Props> = ({
   selected,
   onClick,
   disabled,
+  animationDisabled,
 }) => {
   const baseClass =
-    'w-full px-[27px] py-[25px] text-[16px] rounded-xl font-medium transition-all text-left flex justify-start';
+    'w-full px-[27px] py-[25px] text-[16px] rounded-xl font-medium transition-all text-left flex justify-start bg-white';
 
   const selectedClass = selected
-    ? 'text-[var(--color-gray700)]'
-    : 'text-gray500 bg-white border border-gray200';
+    ? 'text-[var(--color-gray700)] opacity-90 border-none'
+    : 'text-gray500 bg-white border-[2px] border-none';
 
   const fadeClass =
     !selected && disabled ? 'opacity-50 cursor-not-allowed' : '';
 
   const style = selected
     ? {
-        borderWidth: '3px',
-        borderStyle: 'solid',
-        borderImage: 'var(--color-gradation)',
+        // borderWidth: '2px',
+        // borderStyle: 'solid',
+        // borderImage: 'var(--color-gradation)',
         borderImageSlice: 1,
         backgroundImage: 'var(--color-gradation-20)',
-        borderRadius: '20px',
+        // borderRadius: '20px',
       }
     : {};
 
+  const selectedBorder = selected ? 'bg-gradation' : 'bg-gray200';
+
   return (
-    <button
-      onClick={onClick}
-      disabled={disabled}
-      className={`${baseClass} ${selectedClass} ${fadeClass}`}
-      style={style}
+    <AnimatedWrapper
+      className={`p-[2px] rounded-[14px] ${selectedBorder}`}
+      animationDisabled={animationDisabled}
     >
-      {label}
-    </button>
+      <button
+        onClick={onClick}
+        disabled={disabled}
+        className={`${baseClass} ${selectedClass} ${fadeClass} ${!disabled ? 'cursor-pointer' : ''}`}
+        style={style}
+      >
+        {label}
+      </button>
+    </AnimatedWrapper>
   );
 };
 
diff --git a/client/src/components/testPage/UsageBar.tsx b/client/src/components/testPage/UsageBar.tsx
index 185f836..f8293b9 100644
--- a/client/src/components/testPage/UsageBar.tsx
+++ b/client/src/components/testPage/UsageBar.tsx
@@ -15,14 +15,14 @@ const iconMap: Record<string, string> = {
 
 const UsageBar = ({ label, percent }: UsageBarProps) => {
   return (
-    <div className="flex items-center gap-3 px-4 py-2">
+    <div className="flex items-center gap-3 py-2">
       {/* 아이콘 + 라벨 */}
-      <div className="flex items-center gap-2 w-[100px]">
+      <div className="flex items-center gap-3 w-[100px]">
         <img src={iconMap[label]} alt={label + ' 아이콘'} className="w-5 h-5" />
         <span className="text-sm font-medium text-gray800">{label}</span>
       </div>
 
-      <div className="relative flex-1 bg-gray200 rounded-full h-3 overflow-hidden">
+      <div className="relative flex-1 bg-gray200 rounded-full h-4 overflow-hidden">
         {/* 칠해진 그래프 */}
         <div
           className="bg-gradation h-full rounded-full"
diff --git a/client/src/components/types/TestResult.ts b/client/src/components/types/TestResult.ts
index 35844a3..780e1d2 100644
--- a/client/src/components/types/TestResult.ts
+++ b/client/src/components/types/TestResult.ts
@@ -1,6 +1,7 @@
 export type Answer = string;
 
 export type PlanResult = {
+  _id: string;
   id: string;
   name: string;
   description: string;
@@ -11,4 +12,5 @@ export type PlanResult = {
   price: number;
   tagLine?: string;
   link: string;
+  isActive: boolean;
 };
diff --git a/client/src/constants/localFallbackPlans.ts b/client/src/constants/localFallbackPlans.ts
new file mode 100644
index 0000000..5c1f492
--- /dev/null
+++ b/client/src/constants/localFallbackPlans.ts
@@ -0,0 +1,1111 @@
+import type { Plan } from '@/components/types/Plan';
+
+export const localFallbackPlans: Plan[] = [
+  {
+    _id: '6854f00d7ed56e59bef61127',
+    category: '5G',
+    name: '5G 시그니처',
+    description:
+      'U⁺5G 서비스와 프리미엄 혜택을 마음껏 즐기고, 가족과 공유할 수 있는 데이터까지 추가로 받는 5G 요금제',
+    isPopular: false,
+    dataGb: -1,
+    sharedDataGb: 120,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 130000,
+    optionalDiscountAmount: 92250,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/Z202205253',
+    bundleBenefit:
+      'U+ 투게더 결합, 5G 시그니처 가족할인, 태블릿/스마트기기 월정액 할인, 프리미어 요금제 약정할인, 로밍 혜택 프로모션',
+    mediaAddons:
+      '아이들나라 스탠다드+러닝, 바이브 앱+PC 음악감상, 유플레이, 밀리의 서재, 지니뮤직 앱+PC 음악감상',
+    premiumAddons:
+      '폰교체 패스, 삼성팩, 티빙 이용권 할인, 디즈니+, 넷플릭스, 헬로렌탈구독, 일리커피구독, 우리집지킴이 Easy2+, 우리집돌봄이 Kids, 신한카드 Air, 유튜브 프리미엄 할인',
+    basicService: 'U+ 모바일tv 기본 월정액 무료, U+멤버십 VVIP 등급 혜택',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61128',
+    category: '5G',
+    name: '5G 프리미어 슈퍼',
+    description:
+      'U⁺5G 서비스와 프리미엄 혜택을 마음껏 즐기고, 가족과 공유할 수 있는 데이터까지 추가로 받는 5G 요금제',
+    isPopular: false,
+    dataGb: -1,
+    sharedDataGb: 100,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 115000,
+    optionalDiscountAmount: 81000,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/Z202205251',
+    bundleBenefit:
+      'U+ 투게더 결합, 태블릿/스마트기기 월정액 할인, 프리미어 요금제 약정할인, 로밍 혜택 프로모션',
+    mediaAddons:
+      '아이들나라 스탠다드+러닝, 유플레이, 밀리의 서재, 지니뮤직 앱+PC 음악감상, 바이브 앱 음악감상',
+    premiumAddons:
+      '폰교체 패스, 삼성팩, 티빙 이용권 할인, 디즈니+, 넷플릭스, 헬로렌탈구독, 일리커피구독, 우리집지킴이 Easy2+, 우리집돌봄이 Kids, 신한카드 Air, 유튜브 프리미엄 할인',
+    basicService: 'U+ 모바일tv 기본 월정액 무료, U+멤버십 VVIP 등급 혜택',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61129',
+    category: '5G',
+    name: '5G 프리미어 플러스',
+    description:
+      'U⁺5G 서비스는 물론, 스마트 기기 2개와 다양한 콘텐츠까지 마음껏 이용할 수 있는 5G 요금제',
+    isPopular: false,
+    dataGb: -1,
+    sharedDataGb: 100,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 105000,
+    optionalDiscountAmount: 73500,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/Z202205252',
+    bundleBenefit:
+      'U+ 투게더 결합, 태블릿/스마트기기 월정액 할인, 프리미어 요금제 약정할인, 로밍 혜택 프로모션',
+    mediaAddons:
+      '아이들나라 스탠다드+러닝, 유플레이, 밀리의 서재, 지니뮤직 앱+PC 음악감상, 바이브 앱 음악감상',
+    premiumAddons:
+      '폰교체 패스, 삼성팩, 티빙 이용권 할인, 넷플릭스, 디즈니+, 헬로렌탈구독, 일리커피구독, 우리집지킴이 Easy2+, 우리집돌봄이 Kids, 신한카드 Air, 유튜브 프리미엄 할인',
+    basicService: 'U+ 모바일tv 기본 월정액 무료, U+멤버십 VVIP 등급 혜택',
+  },
+  {
+    _id: '6854f00d7ed56e59bef6112a',
+    category: '5G',
+    name: '5G 프리미어 레귤러',
+    description:
+      'U⁺5G 서비스는 물론, 스마트기기 1개와 다양한 콘텐츠까지 마음껏 이용할 수 있는 5G 요금제',
+    isPopular: true,
+    dataGb: -1,
+    sharedDataGb: 80,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 95000,
+    optionalDiscountAmount: 66000,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000433',
+    bundleBenefit:
+      'U+ 투게더 결합, 태블릿/스마트기기 월정액 할인, 프리미어 요금제 약정할인, 로밍 혜택 프로모션',
+    mediaAddons:
+      '아이들나라 스탠다드+러닝, 유플레이, 밀리의 서재, 바이브 300회 음악감상, 지니뮤직 300회 음악감상',
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료, U+멤버십 VVIP 등급 혜택',
+  },
+  {
+    _id: '6854f00d7ed56e59bef6112b',
+    category: '5G',
+    name: '5G 프리미어 에센셜',
+    description: 'U⁺5G 서비스를 마음껏 즐길 수 있는 5G 요금제',
+    isPopular: true,
+    dataGb: -1,
+    sharedDataGb: 70,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 85000,
+    optionalDiscountAmount: 58500,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000409',
+    bundleBenefit:
+      'U+ 투게더 결합, 태블릿/스마트기기 월정액 할인, 프리미어 요금제 약정할인, 로밍 혜택 프로모션',
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료, U+멤버십 VIP 등급 혜택',
+  },
+  {
+    _id: '6854f00d7ed56e59bef6112c',
+    category: '5G',
+    name: '5G 복지 75',
+    description: '복지할인 받는 고객님을 위한 5G 요금제',
+    isPopular: false,
+    dataGb: 150,
+    sharedDataGb: 60,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 600,
+    smsCount: -1,
+    monthlyFee: 75000,
+    optionalDiscountAmount: 56250,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-welfare/LPZ0000348',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료, U+멤버십 VIP 등급 혜택',
+  },
+  {
+    _id: '6854f00d7ed56e59bef6112d',
+    category: '5G',
+    name: '5G 스탠다드',
+    description: '넉넉한 데이터로 U⁺5G 서비스를 이용할 수 있는 5G 표준 요금제',
+    isPopular: true,
+    dataGb: 150,
+    sharedDataGb: 60,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 75000,
+    optionalDiscountAmount: 56250,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000415',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료, U+멤버십 VIP 등급 혜택',
+  },
+  {
+    _id: '6854f00d7ed56e59bef6112e',
+    category: '5G',
+    name: '유쓰 5G 스탠다드',
+    description:
+      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제',
+    isPopular: true,
+    dataGb: 210,
+    sharedDataGb: 65,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 75000,
+    optionalDiscountAmount: 56250,
+    premiumDiscountAmount: 0,
+    ageGroup: 'YOUTH',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000232',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료, U+멤버십 VIP 등급 혜택',
+  },
+  {
+    _id: '6854f00d7ed56e59bef6112f',
+    category: '5G',
+    name: '5G 스탠다드 에센셜',
+    description:
+      '필요한 만큼만 데이터를 선택할 수 있고, 다 쓰고 난 후에도 추가 요금 없이 데이터를 사용할 수 있는 요금제',
+    isPopular: false,
+    dataGb: 125,
+    sharedDataGb: 55,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 70000,
+    optionalDiscountAmount: 52500,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000784',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61130',
+    category: '5G',
+    name: '유쓰 5G 스탠다드 에센셜',
+    description:
+      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제',
+    isPopular: false,
+    dataGb: 185,
+    sharedDataGb: 60,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 70000,
+    optionalDiscountAmount: 52500,
+    premiumDiscountAmount: 0,
+    ageGroup: 'YOUTH',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000231',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61131',
+    category: 'LTE',
+    name: '추가 요금 걱정 없는 데이터 69',
+    description:
+      '추가 요금 걱정 없이 동영상, 고용량 콘텐츠까지 마음껏 이용할 수 있는 LTE요금제',
+    isPopular: true,
+    dataGb: 0.5,
+    sharedDataGb: 11,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 69000,
+    optionalDiscountAmount: 51750,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-unlimited/LPZ0000464',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61132',
+    category: 'LTE',
+    name: '추가 요금 걱정 없는 데이터 시니어 69',
+    description:
+      '추가 요금 걱정없이 동영상, 고용량 콘텐츠까지 마음껏 이용할 수 있는 시니어 전용 LTE 요금제',
+    isPopular: false,
+    dataGb: 0.5,
+    sharedDataGb: 15,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 69000,
+    optionalDiscountAmount: 51750,
+    premiumDiscountAmount: 0,
+    ageGroup: 'SENIOR',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-senior/LPZ0002352',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료, 실버지킴이',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61133',
+    category: 'LTE',
+    name: '추가 요금 걱정 없는 데이터 청소년 69',
+    description:
+      '추가 요금 걱정 없이 동영상, 고용량 콘텐츠까지 마음껏 이용할 수 있는 청소년 전용 LTE 요금제',
+    isPopular: false,
+    dataGb: 0.5,
+    sharedDataGb: 15,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 69000,
+    optionalDiscountAmount: 51750,
+    premiumDiscountAmount: 0,
+    ageGroup: 'YOUTH',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-youth/LPZ0002351',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61134',
+    category: '5G',
+    name: '5G 데이터 슈퍼',
+    description:
+      '필요한 만큼만 데이터를 선택할 수 있고, 다 쓰고 난 후에도 추가 요금 없이 데이터를 사용할 수 있는 요금제',
+    isPopular: false,
+    dataGb: 95,
+    sharedDataGb: 50,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 68000,
+    optionalDiscountAmount: 51000,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000781',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61135',
+    category: '5G',
+    name: '유쓰 5G 데이터 슈퍼',
+    description:
+      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제',
+    isPopular: false,
+    dataGb: 135,
+    sharedDataGb: 55,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 68000,
+    optionalDiscountAmount: 51000,
+    premiumDiscountAmount: 0,
+    ageGroup: 'YOUTH',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000230',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61136',
+    category: '5G',
+    name: '5G 데이터 플러스',
+    description:
+      '필요한 만큼만 데이터를 선택할 수 있고, 다 쓰고 난 후에도 추가 요금 없이 데이터를 사용할 수 있는 요금제',
+    isPopular: false,
+    dataGb: 80,
+    sharedDataGb: 45,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 66000,
+    optionalDiscountAmount: 49500,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000782',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61137',
+    category: '5G',
+    name: '유쓰 5G 데이터 플러스',
+    description:
+      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제',
+    isPopular: false,
+    dataGb: 110,
+    sharedDataGb: 50,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 66000,
+    optionalDiscountAmount: 49500,
+    premiumDiscountAmount: 0,
+    ageGroup: 'YOUTH',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000229',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61138',
+    category: '5G',
+    name: '5G 데이터 레귤러',
+    description:
+      '필요한 만큼만 데이터를 선택할 수 있고, 다 쓰고 난 후에도 추가 요금 없이 데이터를 사용할 수 있는 요금제',
+    isPopular: false,
+    dataGb: 50,
+    sharedDataGb: 40,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 63000,
+    optionalDiscountAmount: 47250,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000783',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61139',
+    category: '5G',
+    name: '유쓰 5G 데이터 레귤러',
+    description:
+      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제',
+    isPopular: false,
+    dataGb: 70,
+    sharedDataGb: 45,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 63000,
+    optionalDiscountAmount: 47250,
+    premiumDiscountAmount: 0,
+    ageGroup: 'YOUTH',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000228',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef6113a',
+    category: '5G',
+    name: '5G 심플+',
+    description: '합리적인 요금으로 U+5G 서비스를 이용할 수 있는 5G 요금제',
+    isPopular: true,
+    dataGb: 31,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 61000,
+    optionalDiscountAmount: 45750,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0002860',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef6113b',
+    category: '5G',
+    name: '유쓰 5G 심플+',
+    description:
+      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제',
+    isPopular: false,
+    dataGb: 41,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 61000,
+    optionalDiscountAmount: 45750,
+    premiumDiscountAmount: 0,
+    ageGroup: 'YOUTH',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000227',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef6113c',
+    category: '5G',
+    name: '5G 베이직+',
+    description:
+      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 5G 요금제',
+    isPopular: false,
+    dataGb: 24,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 59000,
+    optionalDiscountAmount: 44250,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ1001268',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U⁺ 모바일tv라이트 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef6113d',
+    category: '5G',
+    name: '유쓰 5G 베이직+',
+    description:
+      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G 요금제',
+    isPopular: false,
+    dataGb: 36,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 59000,
+    optionalDiscountAmount: 44250,
+    premiumDiscountAmount: 0,
+    ageGroup: 'YOUTH',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1001056',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U⁺ 모바일tv라이트 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef6113e',
+    category: 'LTE',
+    name: '추가 요금 걱정 없는 데이터 청소년 59',
+    description:
+      '추가 요금 걱정 없이 SNS, 메신저, 웹서핑 등의 서비스를 마음껏 이용할 수 있는 청소년 전용 LTE 요금제',
+    isPopular: false,
+    dataGb: 9,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 59000,
+    optionalDiscountAmount: 44250,
+    premiumDiscountAmount: 0,
+    ageGroup: 'STUDENT',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-youth/LPZ0000469',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef6113f',
+    category: '5G',
+    name: '5G 라이트+',
+    description: '저렴한 요금으로 U⁺5G 서비스를 이용할 수 있는 5G 실속 요금제',
+    isPopular: false,
+    dataGb: 14,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 55000,
+    optionalDiscountAmount: 41250,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000437',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U⁺ 모바일tv라이트 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61140',
+    category: '5G',
+    name: '5G 복지 55',
+    description: '복지할인 받는 고객님을 위한 5G 요금제',
+    isPopular: false,
+    dataGb: 14,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 600,
+    smsCount: -1,
+    monthlyFee: 55000,
+    optionalDiscountAmount: 41250,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-welfare/LPZ0000349',
+    bundleBenefit: '로밍 혜택 프로모션',
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U⁺ 모바일tv라이트 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61141',
+    category: '5G',
+    name: '유쓰 5G 라이트+',
+    description:
+      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제',
+    isPopular: false,
+    dataGb: 26,
+    sharedDataGb: 1,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 55000,
+    optionalDiscountAmount: 41250,
+    premiumDiscountAmount: 0,
+    ageGroup: 'YOUTH',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000224',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U⁺ 모바일tv라이트 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61142',
+    category: 'LTE',
+    name: '현역병사 데이터 55',
+    description:
+      '추가 요금 걱정 없이 동영상, 고용량 콘텐츠까지 마음껏 이용할 수 있는 현역병사 전용 LTE 요금제',
+    isPopular: false,
+    dataGb: 5,
+    sharedDataGb: 5,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 55000,
+    optionalDiscountAmount: 41250,
+    premiumDiscountAmount: 0,
+    ageGroup: 'SOLDIER',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-soldier/LPZ0002507',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U+ 모바일tv 기본 월정액 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61143',
+    category: 'LTE',
+    name: '복지 49',
+    description: '복지할인 받는 고객님을 위한 LTE 요금제',
+    isPopular: false,
+    dataGb: 6,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 600,
+    smsCount: -1,
+    monthlyFee: 49000,
+    optionalDiscountAmount: 36750,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-welfare/LPZ0002584',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U⁺ 모바일tv라이트 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61144',
+    category: '5G',
+    name: '5G 슬림+',
+    description: '저렴한 요금으로 U⁺5G 서비스를 이용할 수 있는 5G 실속 요금제',
+    isPopular: true,
+    dataGb: 9,
+    sharedDataGb: 2,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 47000,
+    optionalDiscountAmount: 35250,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000487',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U⁺ 모바일tv라이트 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61145',
+    category: '5G',
+    name: '유쓰 5G 슬림+',
+    description:
+      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제',
+    isPopular: false,
+    dataGb: 15,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 47000,
+    optionalDiscountAmount: 35250,
+    premiumDiscountAmount: 0,
+    ageGroup: 'YOUTH',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000223',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U⁺ 모바일tv라이트 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61146',
+    category: '5G',
+    name: '5G 라이트 청소년',
+    description:
+      '저렴한 요금으로 실속있게 U⁺5G 서비스를 이용할 수 있는 청소년 전용 5G 요금제',
+    isPopular: false,
+    dataGb: 8,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 45000,
+    optionalDiscountAmount: 33750,
+    premiumDiscountAmount: 0,
+    ageGroup: 'STUDENT',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-youth/LPZ0000417',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U⁺ 모바일tv라이트 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61147',
+    category: '5G',
+    name: '5G 시니어 A형',
+    description:
+      '저렴한 요금으로 실속있게 U⁺5G 서비스를 이용할 수 있는 만 65세 이상~70세 미만 전용 5G 요금제',
+    isPopular: false,
+    dataGb: 10,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 400,
+    smsCount: -1,
+    monthlyFee: 45000,
+    optionalDiscountAmount: 33750,
+    premiumDiscountAmount: 0,
+    ageGroup: 'SENIOR',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-senior/LPZ0000418',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U⁺ 모바일tv라이트 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61148',
+    category: '5G',
+    name: '5G 키즈 45',
+    description:
+      '저렴한 요금으로 실속 있게 U+5G 서비스를 이용할 수 있는\n만 12세 이하 전용 5G요금제',
+    isPopular: false,
+    dataGb: 9,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 45000,
+    optionalDiscountAmount: 33750,
+    premiumDiscountAmount: 0,
+    ageGroup: 'CHILD',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-youth/LPZ0002818',
+    bundleBenefit: null,
+    mediaAddons: '바이브 300회 음악감상',
+    premiumAddons: null,
+    basicService: null,
+  },
+  {
+    _id: '6854f00d7ed56e59bef61149',
+    category: '5G',
+    name: '5G 시니어 B형',
+    description:
+      '저렴한 요금으로 실속있게 U+5G 서비스를 이용할 수 있는 만 70세 이상~80세 미만 전용 5G 요금제',
+    isPopular: false,
+    dataGb: 10,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 400,
+    smsCount: -1,
+    monthlyFee: 43000,
+    optionalDiscountAmount: 32250,
+    premiumDiscountAmount: 0,
+    ageGroup: 'SENIOR',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-senior/LPZ1000127',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U⁺ 모바일tv라이트 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef6114a',
+    category: '5G',
+    name: '5G 시니어 C형',
+    description:
+      '저렴한 요금으로 실속있게 U+5G 서비스를 이용할 수 있는 만 80세 이상 전용 5G 요금제',
+    isPopular: false,
+    dataGb: 10,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 400,
+    smsCount: -1,
+    monthlyFee: 39000,
+    optionalDiscountAmount: 29250,
+    premiumDiscountAmount: 0,
+    ageGroup: 'SENIOR',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-senior/LPZ1000128',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U⁺ 모바일tv라이트 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef6114b',
+    category: '5G',
+    name: '5G 키즈 39',
+    description:
+      '저렴한 요금으로 실속 있게 U+5G 서비스를 이용할 수 있는\n만 12세 이하 전용 5G요금제',
+    isPopular: false,
+    dataGb: 5.5,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 37000,
+    optionalDiscountAmount: 27750,
+    premiumDiscountAmount: 0,
+    ageGroup: 'CHILD',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-youth/LPZ0002810',
+    bundleBenefit: null,
+    mediaAddons: '바이브 300회 음악감상',
+    premiumAddons: null,
+    basicService: null,
+  },
+  {
+    _id: '6854f00d7ed56e59bef6114c',
+    category: '5G',
+    name: '5G 미니',
+    description:
+      '월 3만 원대 가벼운 요금으로 필요한 만큼 데이터를 실속 있게 즐길 수 있는 5G 요금제',
+    isPopular: false,
+    dataGb: 5,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 37000,
+    optionalDiscountAmount: 27750,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ1000325',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U⁺ 모바일tv라이트 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef6114d',
+    category: '5G',
+    name: '유쓰 5G 미니',
+    description:
+      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제',
+    isPopular: false,
+    dataGb: 9,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 300,
+    smsCount: -1,
+    monthlyFee: 37000,
+    optionalDiscountAmount: 27750,
+    premiumDiscountAmount: 0,
+    ageGroup: 'YOUTH',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1001051',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: 'U⁺ 모바일tv라이트 무료',
+  },
+  {
+    _id: '6854f00d7ed56e59bef6114e',
+    category: 'LTE',
+    name: '데이터 33',
+    description:
+      '음성통화와 문자메시지는 기본으로 사용하고 저렴한 요금으로 데이터를 이용할 수 있는 실속형 요금제',
+    isPopular: false,
+    dataGb: 1.5,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 110,
+    smsCount: -1,
+    monthlyFee: 33000,
+    optionalDiscountAmount: 24750,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-general/LPZ0000472',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: null,
+  },
+  {
+    _id: '6854f00d7ed56e59bef6114f',
+    category: 'LTE',
+    name: '데이터 시니어 33',
+    description:
+      '음성통화와 문자메시지는 기본으로 사용하고 저렴한 요금으로 데이터를 이용할 수 있는 실속형 시니어 전용 LTE 요금제',
+    isPopular: false,
+    dataGb: 1.7,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 110,
+    smsCount: -1,
+    monthlyFee: 33000,
+    optionalDiscountAmount: 24750,
+    premiumDiscountAmount: 0,
+    ageGroup: 'SENIOR',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-senior/LPZ0000296',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: '실버지킴이',
+  },
+  {
+    _id: '6854f00d7ed56e59bef61150',
+    category: 'LTE',
+    name: '복지 33',
+    description: '복지할인 받는 고객님을 위한 요금제',
+    isPopular: false,
+    dataGb: 2,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 600,
+    smsCount: -1,
+    monthlyFee: 33000,
+    optionalDiscountAmount: 24750,
+    premiumDiscountAmount: 0,
+    ageGroup: 'ALL',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-welfare/LPZ0002583',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: null,
+  },
+  {
+    _id: '6854f00d7ed56e59bef61151',
+    category: 'LTE',
+    name: '추가 요금 걱정 없는 데이터 청소년 33',
+    description:
+      '추가 요금 걱정 없이 SNS, 메신저, 웹서핑, 이메일 등의 서비스를 마음껏 이용할 수 있는 청소년 전용 LTE 요금제',
+    isPopular: false,
+    dataGb: 2,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 110,
+    smsCount: -1,
+    monthlyFee: 33000,
+    optionalDiscountAmount: 24750,
+    premiumDiscountAmount: 0,
+    ageGroup: 'STUDENT',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-youth/LPZ0000467',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: null,
+  },
+  {
+    _id: '6854f00d7ed56e59bef61152',
+    category: 'LTE',
+    name: '현역병사 데이터 33',
+    description:
+      '추가 요금 걱정 없이 SNS,메신저, 웹서핑 등의 서비스를 마음껏 이용할 수 있는 현역병사 LTE 요금제',
+    isPopular: false,
+    dataGb: 2,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 110,
+    smsCount: -1,
+    monthlyFee: 33000,
+    optionalDiscountAmount: 24750,
+    premiumDiscountAmount: 0,
+    ageGroup: 'SOLDIER',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-soldier/LPZ0002506',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: null,
+  },
+  {
+    _id: '6854f00d7ed56e59bef61153',
+    category: '5G',
+    name: '5G 키즈 29',
+    description:
+      '저렴한 요금으로 실속 있게 U+5G 서비스를 이용할 수 있는\n만 12세 이하 전용 5G요금제',
+    isPopular: false,
+    dataGb: 3.3,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 100,
+    smsCount: -1,
+    monthlyFee: 29000,
+    optionalDiscountAmount: 21750,
+    premiumDiscountAmount: 0,
+    ageGroup: 'CHILD',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-youth/LPZ0002811',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: null,
+  },
+  {
+    _id: '6854f00d7ed56e59bef61154',
+    category: 'LTE',
+    name: '키즈 22(만 12세 이하)',
+    description:
+      '저렴한 가격으로 음성통화, 메시지, 데이터를 함께 쓸 수 있는 LTE 요금제',
+    isPopular: false,
+    dataGb: 0.7,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 60,
+    smsCount: -1,
+    monthlyFee: 22000,
+    optionalDiscountAmount: 16500,
+    premiumDiscountAmount: 0,
+    ageGroup: 'CHILD',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-youth/LPZ0002473',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: null,
+  },
+  {
+    _id: '6854f00d7ed56e59bef61155',
+    category: 'LTE',
+    name: '청소년19',
+    description:
+      '기본 제공 링 안에서 자유롭게 조절하며 쓸 수 있고, 추가로 LTE 데이터까지 사용할 수 있는 LTE 요금제',
+    isPopular: false,
+    dataGb: 0.35,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 133,
+    smsCount: 1000,
+    monthlyFee: 20900,
+    optionalDiscountAmount: 15675,
+    premiumDiscountAmount: 0,
+    ageGroup: 'STUDENT',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-youth/LPZ0001369',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: null,
+  },
+  {
+    _id: '6854f00d7ed56e59bef61156',
+    category: 'LTE',
+    name: '시니어16.5',
+    description:
+      '가족과 통화는 자주 하고 LTE 데이터사용을 원하는 만 65세 이상 고객님을 위한 LTE 요금제',
+    isPopular: false,
+    dataGb: 0.3,
+    sharedDataGb: 0,
+    voiceMinutes: -1,
+    addonVoiceMinutes: 70,
+    smsCount: 100,
+    monthlyFee: 16500,
+    optionalDiscountAmount: 12375,
+    premiumDiscountAmount: 0,
+    ageGroup: 'SENIOR',
+    detailUrl:
+      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-senior/LPZ0002291',
+    bundleBenefit: null,
+    mediaAddons: null,
+    premiumAddons: null,
+    basicService: '실버지킴이',
+  },
+];
diff --git a/client/src/data/TestResult.ts b/client/src/data/TestResult.ts
index ca4d148..d4903de 100644
--- a/client/src/data/TestResult.ts
+++ b/client/src/data/TestResult.ts
@@ -1,22 +1,8 @@
 import type { PlanResult } from '@/components/types/TestResult';
 
 export const planResults: PlanResult[] = [
-  //음악
-  {
-    id: 'music-plus',
-    name: '5G 프리미어 레귤러',
-    description:
-      'U⁺5G 서비스는 물론, 스마트기기 1개와 다양한 콘텐츠까지 마음껏 이용할 수 있는 5G 요금제\n미디어 서비스 기본 제공(택1)\n지니, 벅스, FLO 중 선택 가능',
-    priority: 3,
-    dataUsage: 100,
-    callUsage: 100,
-    messageUsage: 100,
-    price: 95000,
-    tagLine: '지니뮤직 제휴 결합',
-    link: 'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000433',
-  },
-  //OTT
   {
+    _id: '6858ee7ffc03f10c86710103',
     id: 'ott-plus',
     name: '5G 프리미어 플러스',
     description:
@@ -28,23 +14,10 @@ export const planResults: PlanResult[] = [
     price: 105000,
     tagLine: '넷플릭스 / 왓챠 제휴 결합',
     link: 'https://www.lguplus.com/plan/limit-plans/Z202205254',
+    isActive: true,
   },
-  //결합
-  {
-    id: 'family',
-    name: '5G 프리미어 에센셜',
-    description:
-      'U⁺5G 서비스를 마음껏 즐길 수 있는 5G 요금제\n친구, 가족과 결합하면 데이터 무제한 요금제를 최대 20,000원 할인',
-    priority: 4,
-    dataUsage: 100,
-    callUsage: 100,
-    messageUsage: 100,
-    price: 85000,
-    tagLine: 'U+ 투게더 결합',
-    link: 'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000409',
-  },
-  // 청소년
   {
+    _id: '6858ee7ffc03f10c86710105',
     id: 'youth1-special',
     name: '5G 라이트 청소년',
     description:
@@ -56,9 +29,10 @@ export const planResults: PlanResult[] = [
     price: 45000,
     tagLine: '데이터 무제한 최대 1Mbps 속도',
     link: 'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-youth/LPZ0000417',
+    isActive: true,
   },
-  //유스
   {
+    _id: '6858ee7ffc03f10c86710106',
     id: 'youth2-special',
     name: '유스 5G 스탠다드',
     description:
@@ -70,9 +44,10 @@ export const planResults: PlanResult[] = [
     price: 75000,
     tagLine: '데이터 무제한 최대 5Mbps 속도',
     link: 'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000232',
+    isActive: true,
   },
-  //시니어
   {
+    _id: '6858ee7ffc03f10c86710107',
     id: 'youth3-special',
     name: 'LTE 데이터 시니어 33',
     description:
@@ -84,9 +59,55 @@ export const planResults: PlanResult[] = [
     price: 33000,
     tagLine: '실버지킴이 서비스',
     link: 'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-senior/LPZ0000296',
+    isActive: true,
+  },
+  {
+    _id: '6858ee7ffc03f10c86710103',
+    id: 'ott-plus',
+    name: '5G 프리미어 플러스',
+    description:
+      'U⁺5G 서비스는 물론, 스마트 기기 2개와 다양한 콘텐츠까지 마음껏 이용할 수 있는 5G 요금제\n프리미엄 서비스 기본 제공(택1)\n음악 구독 서비스 지니, 벅스, FLO 중 선택 가능',
+    priority: 2,
+    dataUsage: 100,
+    callUsage: 100,
+    messageUsage: 100,
+    price: 105000,
+    tagLine: '넷플릭스 / 왓챠 제휴 결합',
+    link: 'https://www.lguplus.com/plan/limit-plans/Z202205254',
+    isActive: true,
+  },
+  {
+    _id: '6858ee7ffc03f10c86710102',
+    id: 'music-plus',
+    name: '5G 프리미어 레귤러',
+    description:
+      'U⁺5G 서비스는 물론, 스마트기기 1개와 다양한 콘텐츠까지 마음껏 이용할 수 있는 5G 요금제\n미디어 서비스 기본 제공(택1)\n지니, 벅스, FLO 중 선택 가능',
+    priority: 3,
+    dataUsage: 100,
+    callUsage: 100,
+    messageUsage: 100,
+    price: 95000,
+    tagLine: '지니뮤직 제휴 결합',
+    link: 'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000433',
+    isActive: true,
+  },
+  {
+    _id: '6858ee7ffc03f10c86710104',
+    id: 'family',
+    name: '5G 프리미어 에센셜',
+    description:
+      'U⁺5G 서비스를 마음껏 즐길 수 있는 5G 요금제\n친구, 가족과 결합하면 데이터 무제한 요금제를 최대 20,000원 할인',
+    priority: 4,
+    dataUsage: 100,
+    callUsage: 100,
+    messageUsage: 100,
+    price: 85000,
+    tagLine: 'U+ 투게더 결합',
+    link: 'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000409',
+    isActive: true,
   },
-  //무제한데이터
   {
+    _id: '6858ee7ffc03f10c86710108',
     id: 'max-data',
     name: '5G 프리미어 에센셜',
     description:
@@ -98,9 +119,10 @@ export const planResults: PlanResult[] = [
     price: 85000,
     tagLine: '데이터 무제한',
     link: 'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000409',
+    isActive: true,
   },
-  //고용량데이터
   {
+    _id: '6858ee7ffc03f10c86710109',
     id: 'data-high',
     name: '5G 스탠다드',
     description:
@@ -112,9 +134,10 @@ export const planResults: PlanResult[] = [
     price: 75000,
     tagLine: '데이터 무제한 최대 5Mbps 속도',
     link: 'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000415',
+    isActive: true,
   },
-  //중용량데이터
   {
+    _id: '6858ee7ffc03f10c8671010a',
     id: 'data-medium',
     name: '5G 데이터 플러스',
     description:
@@ -126,6 +149,7 @@ export const planResults: PlanResult[] = [
     price: 66000,
     tagLine: '데이터 무제한 최대 1Mbps 속도',
     link: 'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000782',
+    isActive: true,
   },
 ];
 
diff --git a/client/src/hooks/useChatSocket.ts b/client/src/hooks/useChatSocket.ts
index 229f97b..c3e7058 100644
--- a/client/src/hooks/useChatSocket.ts
+++ b/client/src/hooks/useChatSocket.ts
@@ -12,6 +12,7 @@ import {
   convertFromStoredMessage,
   type ChatSession,
   type StoredMessage,
+  type UserProfile,
 } from '@/utils/chatStorage';
 
 // 서버 에러 타입 정의
@@ -82,13 +83,45 @@ export const useChatSocket = () => {
   const [isStreaming, setIsStreaming] = useState(false);
   const [sessionId, setSessionId] = useState<string | null>(null);
   const [isInitialLoading, setIsInitialLoading] = useState(true); // 초기 로딩 상태 추가
+  const [storedUserProfile, setStoredUserProfile] =
+    useState<UserProfile | null>(null); // 저장된 사용자 프로필
   // 항상 로컬스토리지 사용
   const useLocalStorage = true;
   const responseRef = useRef('');
+  const followUpResponseRef = useRef(''); // 역질문 전용 ref
+  const hasLoggedSession = useRef(false); // 세션 로그 출력 여부 추적
 
-  // 로컬스토리지에 메시지 저장하는 함수
+  // 로컬스토리지에서 메시지 불러오는 함수
+  const loadMessagesFromLocal = useCallback(
+    (
+      sessionIdToLoad: string,
+    ): { messages: Message[]; userProfile?: UserProfile } => {
+      if (!useLocalStorage) return { messages: [] };
+
+      try {
+        const session = getSession(sessionIdToLoad);
+        console.log('🔍 실제 로컬스토리지 세션 데이터:', session);
+        if (!session) return { messages: [] };
+
+        const messages: Message[] = session.messages.map(
+          (msg) => convertFromStoredMessage(msg) as Message,
+        );
+
+        return {
+          messages,
+          userProfile: session.userProfile,
+        };
+      } catch (error) {
+        console.error('❌ Failed to load messages from localStorage:', error);
+        return { messages: [] };
+      }
+    },
+    [useLocalStorage],
+  );
+
+  // 로컬스토리지에 메시지 저장하는 함수 (userProfile도 함께 저장)
   const saveMessagesToLocal = useCallback(
-    (messagesArray: Message[]) => {
+    (messagesArray: Message[], userProfile?: UserProfile | null) => {
       if (!useLocalStorage || !sessionId) return;
 
       try {
@@ -99,39 +132,16 @@ export const useChatSocket = () => {
         const chatSession: ChatSession = {
           sessionId,
           messages: storedMessages,
+          userProfile: userProfile || storedUserProfile || undefined,
           lastUpdated: Date.now(),
         };
 
         saveSession(chatSession);
-        console.log('💾 Messages saved to localStorage:', messagesArray.length);
       } catch (error) {
         console.error('❌ Failed to save messages to localStorage:', error);
       }
     },
-    [useLocalStorage, sessionId],
-  );
-
-  // 로컬스토리지에서 메시지 불러오는 함수
-  const loadMessagesFromLocal = useCallback(
-    (sessionIdToLoad: string): Message[] => {
-      if (!useLocalStorage) return [];
-
-      try {
-        const session = getSession(sessionIdToLoad);
-        if (!session) return [];
-
-        const messages: Message[] = session.messages.map(
-          (msg) => convertFromStoredMessage(msg) as Message,
-        );
-
-        console.log('📂 Messages loaded from localStorage:', messages.length);
-        return messages;
-      } catch (error) {
-        console.error('❌ Failed to load messages from localStorage:', error);
-        return [];
-      }
-    },
-    [useLocalStorage],
+    [useLocalStorage, sessionId, storedUserProfile],
   );
 
   const handleSessionId = useCallback(
@@ -141,15 +151,38 @@ export const useChatSocket = () => {
 
       // 로컬스토리지 사용 시 기존 세션 불러오기
       if (useLocalStorage) {
-        const localMessages = loadMessagesFromLocal(id);
+        const { messages: localMessages, userProfile } =
+          loadMessagesFromLocal(id);
+
         if (localMessages.length > 0) {
           setMessages(localMessages);
-          console.log(
-            '📂 로컬스토리지에서 세션 히스토리 불러옴:',
-            localMessages.length,
-          );
+          // userProfile이 있을 때만 설정, 없으면 기존 storedUserProfile 유지
+          if (userProfile) {
+            setStoredUserProfile(userProfile);
+          }
+          if (!hasLoggedSession.current) {
+            console.log(
+              '📂 로컬스토리지에서 기존 채팅 히스토리를 불러왔습니다:',
+              localMessages.length,
+              '개',
+            );
+            if (userProfile) {
+              console.log(
+                '👤 사용자 프로필도 복원되었습니다:',
+                userProfile.plan.name,
+              );
+            }
+            hasLoggedSession.current = true;
+          }
         } else {
-          console.log('📭 로컬스토리지에 저장된 히스토리 없음');
+          // 메시지가 없어도 userProfile이 있으면 설정
+          if (userProfile) {
+            setStoredUserProfile(userProfile);
+          }
+          if (!hasLoggedSession.current) {
+            console.log('📭 새로운 세션을 시작합니다');
+            hasLoggedSession.current = true;
+          }
         }
       }
 
@@ -163,17 +196,13 @@ export const useChatSocket = () => {
     (
       logs: { role: string; content: string; type?: string; data?: unknown }[],
     ) => {
-      console.log('📋 Session history received from server:', logs);
-
       // 로컬스토리지 사용 시에는 서버 히스토리 무시
       if (useLocalStorage) {
-        console.log('💾 로컬스토리지 사용 중이므로 서버 히스토리 무시');
         return;
       }
 
       // 서버 히스토리가 비어있으면 처리하지 않음
       if (!logs || logs.length === 0) {
-        console.log('📭 서버 히스토리가 비어있음');
         return;
       }
 
@@ -194,8 +223,6 @@ export const useChatSocket = () => {
 
         // 새로 추가: function_call 타입 처리
         if (msg.type === 'function_call' && msg.role === 'assistant') {
-          console.log('🔧 Function call message detected:', msg.data);
-
           // data에서 function call 정보 추출
           const functionCallData = msg.data as {
             name?: string;
@@ -222,7 +249,6 @@ export const useChatSocket = () => {
                 selectedServices: functionCallData.selectedServices,
                 isSelected: functionCallData.isSelected,
               };
-              console.log('✅ Selected data loaded:', botMessage.selectedData);
             }
 
             return botMessage;
@@ -374,31 +400,6 @@ export const useChatSocket = () => {
     socket.on('text-card', handleTextCard);
     socket.on('first-card-list', handleFirstCardList);
 
-    // 제거: 서버에서 더 이상 이벤트를 보내지 않음 (로컬스토리지 사용)
-    // socket.on('carousel-selection-updated', ({ messageIndex, selectedItem, isSelected }) => {
-    //   console.log('✅ Carousel selection updated:', { messageIndex, selectedItem, isSelected });
-    //   setMessages((prev) =>
-    //     prev.map((msg, idx) => {
-    //       if (idx === messageIndex && msg.type === 'bot') {
-    //         return { ...msg, selectedData: { selectedItem, isSelected } };
-    //       }
-    //       return msg;
-    //     }),
-    //   );
-    // });
-
-    // socket.on('ott-selection-updated', ({ messageIndex, selectedServices, isSelected }) => {
-    //   console.log('✅ OTT selection updated:', { messageIndex, selectedServices, isSelected });
-    //   setMessages((prev) =>
-    //     prev.map((msg, idx) => {
-    //       if (idx === messageIndex && msg.type === 'bot') {
-    //         return { ...msg, selectedData: { selectedServices, isSelected } };
-    //       }
-    //       return msg;
-    //     }),
-    //   );
-    // });
-
     return () => {
       socket.off('session-id', handleSessionId);
       socket.off('session-history', handleSessionHistory);
@@ -410,8 +411,6 @@ export const useChatSocket = () => {
       socket.off('plan-lists', handlePlanLists);
       socket.off('text-card', handleTextCard);
       socket.off('first-card-list', handleFirstCardList);
-      // socket.off('carousel-selection-updated'); // 제거: 더 이상 사용 안 함
-      // socket.off('ott-selection-updated'); // 제거: 더 이상 사용 안 함
     };
   }, [
     handleSessionId,
@@ -430,7 +429,6 @@ export const useChatSocket = () => {
     const handleStream = (chunk: string) => {
       responseRef.current += chunk;
 
-      // console.log('📥 Stream chunk:', chunk, responseRef.current);
       setMessages((prev) => {
         const last = prev[prev.length - 1];
         if (last?.type === 'bot') {
@@ -447,9 +445,32 @@ export const useChatSocket = () => {
       });
     };
 
+    // 역질문 전용 스트림 핸들러
+    const handleFollowUpStream = (chunk: string) => {
+      followUpResponseRef.current += chunk;
+
+      setMessages((prev) => {
+        // 첫 번째 청크인 경우 새 메시지 추가, 그 외는 마지막 메시지 업데이트
+        if (chunk === followUpResponseRef.current) {
+          // 첫 번째 청크 - 새 메시지 추가
+          return [
+            ...prev,
+            { type: 'bot', messageChunks: [followUpResponseRef.current] },
+          ];
+        } else {
+          // 후속 청크 - 마지막 메시지 업데이트
+          return [
+            ...prev.slice(0, -1),
+            { type: 'bot', messageChunks: [followUpResponseRef.current] },
+          ];
+        }
+      });
+    };
+
     const handleDone = () => {
       console.log('✅ Stream completed');
       setIsStreaming(false);
+      followUpResponseRef.current = ''; // 역질문 완료 시 리셋
     };
 
     const handleError = (error: ServerError) => {
@@ -491,12 +512,14 @@ export const useChatSocket = () => {
     };
 
     socket.on('stream', handleStream);
+    socket.on('follow-up-stream', handleFollowUpStream);
     socket.on('done', handleDone);
     socket.on('error', handleError);
     socket.on('disconnect', handleDisconnect);
 
     return () => {
       socket.off('stream', handleStream);
+      socket.off('follow-up-stream', handleFollowUpStream);
       socket.off('done', handleDone);
       socket.off('error', handleError);
       socket.off('disconnect', handleDisconnect);
@@ -508,18 +531,80 @@ export const useChatSocket = () => {
     (text: string) => {
       if (!text.trim() || !sessionId) return;
 
+      // 🔧 현재 메시지를 추가한 전체 대화 히스토리 생성
+      const newUserMessage: Message = { type: 'user', text: text.trim() };
+      const allMessages = [...messages, newUserMessage];
+
+      // 🔧 GPT 형식으로 변환 (user/assistant 역할)
+      const chatHistory = allMessages
+        .map((msg) => {
+          if (msg.type === 'user') {
+            return { role: 'user', content: msg.text };
+          } else if (msg.type === 'bot' && 'messageChunks' in msg) {
+            const content = msg.messageChunks.join('');
+            // 빈 문자열인 메시지는 제외 (function call만 있는 메시지들)
+            if (content.trim() === '') {
+              const functionName = msg.functionCall?.name;
+              if (
+                functionName === 'showPlanLists' &&
+                msg.functionCall?.args?.plans
+              ) {
+                const planNames = msg.functionCall.args.plans
+                  .map((plan: { name: string }) => plan.name)
+                  .join(', ');
+                return {
+                  role: 'assistant',
+                  content: `${planNames}를 추천받았다`,
+                };
+              }
+              if (
+                functionName === 'requestCarouselButtons' &&
+                msg.functionCall?.args?.items
+              ) {
+                const itemLabels = msg.functionCall.args.items
+                  .map((item: { label: string }) => item.label)
+                  .join(', ');
+                return {
+                  role: 'assistant',
+                  content: `${itemLabels} 선택지를 제공했다`,
+                };
+              }
+              if (functionName === 'requestOXCarouselButtons') {
+                return {
+                  role: 'assistant',
+                  content: '예/아니오 선택지를 제공했다',
+                };
+              }
+              if (functionName === 'requestOTTServiceList') {
+                return {
+                  role: 'assistant',
+                  content: 'OTT 서비스 선택지를 제공했다',
+                };
+              }
+              return {
+                role: 'assistant',
+                content: `${functionName}을 수행하였음`,
+              };
+            }
+            return { role: 'assistant', content };
+          }
+          return null;
+        })
+        .filter(Boolean);
+
       const payload = {
         sessionId,
         message: text.trim(),
+        history: chatHistory, // 🔧 전체 대화 히스토리 추가
       };
-
-      setMessages((prev) => [...prev, { type: 'user', text }]);
+      console.log(payload);
+      setMessages((prev) => [...prev, newUserMessage] as Message[]);
       setIsStreaming(true);
       responseRef.current = '';
 
-      socket.emit('recommend-plan', payload);
+      socket.emit('chat', payload);
     },
-    [sessionId],
+    [sessionId, messages], // 🔧 messages 의존성 추가
   );
 
   // 제거: 서버에 더 이상 선택 상태를 보내지 않음 (로컬스토리지 사용)
@@ -605,12 +690,20 @@ export const useChatSocket = () => {
     [],
   );
 
+  // storedUserProfile 상태 변화 디버깅
+  useEffect(() => {
+    console.log(
+      '📊 storedUserProfile 상태 변화:',
+      storedUserProfile?.plan?.name || 'null',
+    );
+  }, [storedUserProfile]);
+
   // 메시지가 변경될 때마다 로컬스토리지에 저장
   useEffect(() => {
     if (useLocalStorage && messages.length > 0) {
-      saveMessagesToLocal(messages);
+      saveMessagesToLocal(messages, storedUserProfile);
     }
-  }, [messages, useLocalStorage, saveMessagesToLocal]);
+  }, [messages, useLocalStorage, saveMessagesToLocal, storedUserProfile]);
 
   // 제거: 항상 로컬스토리지 사용으로 토글 불필요
 
@@ -620,17 +713,27 @@ export const useChatSocket = () => {
     socket.emit('reset-session', { sessionId });
     setMessages([]);
     responseRef.current = '';
+    hasLoggedSession.current = false; // 새 채팅 시작 시 로그 플래그 리셋
+    setStoredUserProfile(null); // 새 채팅 시작 시 사용자 프로필도 리셋
   }, [sessionId]);
 
+  // userProfile 설정 함수 (ChatbotPage에서 사용)
+  const setUserProfile = useCallback((userProfile: UserProfile | null) => {
+    console.log('💾 setUserProfile 호출됨:', userProfile?.plan?.name || 'null');
+    setStoredUserProfile(userProfile);
+  }, []);
+
   return {
     messages,
     isStreaming,
     sessionId,
     isInitialLoading,
+    storedUserProfile, // 복원된 사용자 프로필
     sendMessage,
     updateCarouselSelection,
     updateOttSelection,
     updateOxSelection,
     startNewChat,
+    setUserProfile, // 사용자 프로필 설정 함수
   };
 };
diff --git a/client/src/index.css b/client/src/index.css
index 555a97c..70e65ad 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -52,6 +52,8 @@
 
   --shadow-basic: 0 0 20px rgba(0, 0, 0, 0.1);
   --shadow-small: 0 0 15px rgba(0, 0, 0, 0.07);
+  --shadow-special:
+    0.9px 0.9px 5px rgba(0, 0, 0, 0.1), 0px 0.9px 3px rgba(0, 0, 0, 0.1);
 }
 @layer base {
   :root {
@@ -76,9 +78,15 @@
   }
   html,
   body {
-    background-color: var(--color-gray300);
+    background-color: var(--color-gray300); /* 필요 없으면 제거 가능 */
+    background-image: url('/background.png'); /* 이미지 경로 정확히 */
+    background-repeat: no-repeat;
+    background-size: cover; /* 또는 contain, auto 등 필요에 따라 */
+    background-position: center;
+
     @apply flex items-start justify-center relative w-full;
   }
+
   body {
     scrollbar-width: none; /* Firefox */
     -ms-overflow-style: none; /* IE 10+ */
@@ -88,7 +96,7 @@
   }
   #root {
     @apply overflow-x-hidden overflow-y-auto relative max-w-[600px] w-full min-h-screen;
-    @apply pr-[20px] pb-[0px] pl-[20px];
+    @apply p-[0px];
     box-shadow: var(--shadow-basic);
     background-color: var(--color-background);
     /* 스크롤바 숨기기 */
@@ -119,11 +127,11 @@
 .user-bubble {
   background: linear-gradient(
       180deg,
-      #5732a1 0%,
-      #5b038c 25%,
+      #eb008b 0%,
+      #ce018b 25%,
       #a0018b 50%,
-      #ce018b 75%,
-      #eb008b 100%
+      #5b038c 75%,
+      #5732a1 100%
     )
     no-repeat center;
   background-attachment: fixed;
@@ -143,6 +151,48 @@
       opacity: 1;
     }
   }
+  .fade-in-up {
+    opacity: 0;
+    transform: translateY(20px);
+    animation: fadeInUp 0.5s ease-in-out forwards;
+  }
+  @keyframes fadeInUp {
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  .shimmer-text {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .shimmer-text::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -150%;
+    width: 150%;
+    height: 100%;
+    background: linear-gradient(
+      120deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.6) 50%,
+      transparent 100%
+    );
+    animation: shimmer-move 1.5s infinite;
+  }
+  .shimmer-text-slow::after {
+    animation: shimmer-move 2.5s infinite;
+  }
+  @keyframes shimmer-move {
+    0% {
+      left: -150%;
+    }
+    100% {
+      left: 150%;
+    }
+  }
 }
 @layer components {
   .dot {
@@ -212,7 +262,7 @@
   background: none !important;
   background-image: none !important;
 }
-/* 상단 그라데이션만 숨기기 */
+/* 상단 그라데이션만 숨기기
 .gradient-scroll-container > div:first-child {
   -webkit-mask-image: linear-gradient(
     to bottom,
@@ -224,13 +274,12 @@
     transparent 0px,
     black 30px
   ) !important;
-}
+} */
 
 /* 서비스 가이드 스와이퍼 */
 .swiper-pagination {
   z-index: -1;
-  top: 250px !important;
-  /* height: 640px; */
+  top: 185px !important;
   display: flex;
   justify-content: center;
   align-items: end;
@@ -238,8 +287,9 @@
   transform: translateX(-50%);
   aspect-ratio: 1 / 2;
   bottom: auto !important;
-  max-width: 200px !important;
-  width: 63% !important;
+  max-height: 500px;
+  height: 55%;
+  width: 35% !important;
 }
 .swiper-pagination-bullet {
   border-radius: 100px;
@@ -253,7 +303,7 @@
 }
 /* 채팅 페이지 헤더 */
 .custom-header {
-  padding-bottom: 45px !important;
+  /* padding-bottom: 45px !important; */
   background: linear-gradient(
     to bottom,
     rgba(255, 255, 255, 1) 0%,
@@ -281,3 +331,24 @@
     transform: rotate(1turn);
   }
 }
+.clamped {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.toggleBtn {
+  margin-top: 2px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: block;
+  margin-left: auto;
+  margin-right: 4px;
+}
+
+.toggleBtn:hover {
+  text-decoration: underline;
+}
diff --git a/client/src/pages/ChatTestPage.tsx b/client/src/pages/ChatTestPage.tsx
index 9a5933b..600ea6d 100644
--- a/client/src/pages/ChatTestPage.tsx
+++ b/client/src/pages/ChatTestPage.tsx
@@ -153,17 +153,24 @@ const PlanChatTester = () => {
     const messageToSend = text || input.trim();
     if (!messageToSend || !sessionId) return;
 
+    // 🔧 현재 메시지를 추가한 전체 대화 히스토리 생성
+    const newUserMessage = { role: 'user', content: messageToSend };
+    const allMessages = [...chatLog, newUserMessage];
+
+    // 🔧 전체 대화 히스토리를 서버로 전송
     const payload = {
       sessionId,
       message: messageToSend,
+      history: allMessages, // 🔧 전체 대화 히스토리 추가
     };
+
     setChatLog((prev) => [...prev, { role: 'user', content: messageToSend }]);
     setInput('');
     setIsStreaming(true);
     responseRef.current = '';
     setOptionButtons([]);
 
-    socket.emit('recommend-plan', payload);
+    socket.emit('chat', payload);
   };
 
   const handleNewChat = () => {
diff --git a/client/src/pages/ChatbotPage.tsx b/client/src/pages/ChatbotPage.tsx
index 9d2bd3a..6da23c7 100644
--- a/client/src/pages/ChatbotPage.tsx
+++ b/client/src/pages/ChatbotPage.tsx
@@ -17,23 +17,9 @@ import ChatbotIcon from '@/assets/icon/meplus_icon.png';
 import Modal from '@/components/common/Modal';
 import Button from '@/components/common/Button';
 import LoadingSpinner from '@/components/common/LoadingSpinner';
+import type { UserProfile } from '@/utils/chatStorage';
 
-// 사용자 정보 타입 (TestResultPage와 동일)
-interface UserProfile {
-  plan: {
-    id: string;
-    name: string;
-    monthlyFee: number;
-    benefits: string[];
-  };
-  usage: {
-    call: number;
-    message: number;
-    data: number;
-  };
-  preferences: string[];
-  source: 'plan-test' | 'url-params';
-}
+// 사용자 정보 타입 제거 (chatStorage에서 import)
 
 type Message =
   | { type: 'user'; text: string }
@@ -102,33 +88,41 @@ const ChatbotPage = () => {
     messages,
     isStreaming,
     isInitialLoading,
+    storedUserProfile, // 복원된 사용자 프로필
     sendMessage,
     updateCarouselSelection,
     updateOttSelection,
     updateOxSelection,
     startNewChat,
+    setUserProfile, // 사용자 프로필 설정 함수
   } = useChatSocket();
   const [initialMessages, setInitialMessages] = useState<Message[]>([]);
   const [isInitialized, setIsInitialized] = useState(false);
   const [searchParams] = useSearchParams();
   const [showBackModal, setShowBackModal] = useState(false);
+  const [showCallModal, setShowCallModal] = useState(false);
+  const hasInitializedForUrlParams = useRef(false); // URL 파라미터 초기화 여부 추적
 
   // 사용자 정보 확인: URL 파라미터에서만 읽음 - 메모이제이션으로 최적화
-  const userProfile = useMemo(
+  const urlUserProfile = useMemo(
     () => parseUserProfileFromURL(searchParams),
     [searchParams],
   );
+  // 최종 사용자 프로필: URL 파라미터가 있으면 우선, 없으면 저장된 프로필 사용
+  const userProfile = urlUserProfile || storedUserProfile;
 
-  // userProfile이 있으면 새 채팅 시작
+  // URL 파라미터 사용자의 경우 프로필 저장
   useEffect(() => {
-    if (userProfile) {
-      startNewChat(); // 기존 세션 초기화
+    if (urlUserProfile && !hasInitializedForUrlParams.current) {
+      hasInitializedForUrlParams.current = true;
+      setUserProfile(urlUserProfile); // 사용자 프로필 저장
     }
-  }, [userProfile, startNewChat]);
+  }, [urlUserProfile, setUserProfile]);
 
   // 초기 메시지 설정 (사용자 정보에 따라 다르게)
   useEffect(() => {
-    if (!isInitialized) {
+    // 로딩이 완료되고, 아직 초기화되지 않았고, 기존 메시지가 없을 때만 실행
+    if (!isInitialLoading && !isInitialized) {
       if (userProfile) {
         // 맞춤형 요금제 찾기에서 온 사용자
         setInitialMessages([
@@ -168,10 +162,11 @@ const ChatbotPage = () => {
       }
       setIsInitialized(true);
     }
-  }, [isInitialized, userProfile]);
+  }, [isInitialLoading, isInitialized, userProfile, messages.length]);
 
   const handleClose = () => {
     setShowBackModal(false);
+    setShowCallModal(false);
   };
   // 인라인 함수들을 useCallback으로 최적화
   const handleInputChange = useCallback((value: string) => {
@@ -210,17 +205,7 @@ const ChatbotPage = () => {
 
   // 새로 추가: 캐러셀 선택 처리 (업데이트 방식)
   const handleCarouselSelect = useCallback(
-    (
-      carouselData: CarouselItem[],
-      selectedItem: CarouselItem,
-      displayIndex?: number, // 화면에 표시된 인덱스
-    ) => {
-      console.log('🎯 캐러셀 선택:', {
-        carouselData,
-        selectedItem,
-        displayIndex,
-      });
-
+    (carouselData: CarouselItem[], selectedItem: CarouselItem) => {
       // 실제 function_call 메시지의 인덱스를 찾기 (messages 배열에서만)
       const actualIndex = messages.findIndex((msg) => {
         return (
@@ -231,10 +216,6 @@ const ChatbotPage = () => {
         );
       });
 
-      console.log(
-        '🔍 실제 function_call 메시지 인덱스 (messages 배열):',
-        actualIndex,
-      );
       console.log('🔍 전체 messages 배열 길이:', messages.length);
       console.log('🔍 전체 allMessages 배열 길이:', allMessages.length);
 
@@ -262,8 +243,6 @@ const ChatbotPage = () => {
         );
       });
 
-      console.log('🔍 실제 OTT function_call 메시지 인덱스:', actualIndex);
-
       if (actualIndex !== -1) {
         updateOttSelection(actualIndex, selectedServices);
       } else {
@@ -286,8 +265,6 @@ const ChatbotPage = () => {
         );
       });
 
-      console.log('🔍 실제 OX function_call 메시지 인덱스:', actualIndex);
-
       if (actualIndex !== -1) {
         updateOxSelection(actualIndex, selectedOption);
       } else {
@@ -303,13 +280,68 @@ const ChatbotPage = () => {
     lastMessage?.type === 'bot' && lastMessage.functionCall;
   const isNewMessageAdded = allMessages.length > prevMessageLengthRef.current;
 
-  // 새 메시지가 추가되었을 때만 스크롤 조정
+  // 스크롤을 맨 아래로 보내는 함수
+  const scrollToBottom = useCallback(() => {
+    if (!containerRef.current) return;
+    containerRef.current.scrollTo({
+      top: 0, // flex-col-reverse에서는 음수값이 맨 아래
+      behavior: 'smooth',
+    });
+  }, []);
+
+  // ToggleCard 위치로 스크롤하는 함수
+  const scrollToToggleCard = useCallback((cardElement: HTMLDivElement) => {
+    if (!containerRef.current) return;
+
+    // 카드의 위치 정보 가져오기
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const cardRect = cardElement.getBoundingClientRect();
+
+    // flex-col-reverse 때문에 계산이 복잡함
+    // 카드가 뷰포트 상단에 오도록 스크롤 위치 계산
+    const scrollTop = containerRef.current.scrollTop;
+    const targetScrollTop = scrollTop + (cardRect.top - containerRect.top) - 50;
+
+    containerRef.current.scrollTo({
+      top: targetScrollTop,
+      behavior: 'smooth',
+    });
+  }, []);
+
+  // 새 메시지가 추가되었을 때 스크롤 조정
   useEffect(() => {
-    if (!containerRef.current || !isNewMessageAdded) return;
-    const container = containerRef.current;
-    container.scrollTop = container.scrollHeight - container.clientHeight;
+    if (!isNewMessageAdded) return;
+
+    // 즉시 스크롤 (텍스트 메시지용)
+    scrollToBottom();
+
+    // 컴포넌트 렌더링을 위한 지연 스크롤
+    const timer = setTimeout(scrollToBottom, 150);
+
     prevMessageLengthRef.current = allMessages.length;
-  }, [allMessages, isNewMessageAdded]);
+
+    return () => clearTimeout(timer);
+  }, [allMessages, isNewMessageAdded, scrollToBottom]);
+
+  // ResizeObserver로 컨테이너 크기 변화 감지 (캐러셀 등 동적 컴포넌트용)
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const container = containerRef.current;
+    const observer = new ResizeObserver(() => {
+      // 컨테이너 내용이 변경되어 크기가 바뀔 때마다 자동 스크롤
+      scrollToBottom();
+    });
+
+    // 컨테이너의 첫 번째 자식 (실제 메시지들이 들어있는 div) 관찰
+    const messageContainer = container.querySelector('div');
+    console.log(messageContainer);
+    if (messageContainer) {
+      observer.observe(messageContainer);
+    }
+
+    return () => observer.disconnect();
+  }, [scrollToBottom]);
 
   const reversedMessages = useMemo(
     () =>
@@ -323,7 +355,7 @@ const ChatbotPage = () => {
   const iconButtons = useMemo(
     () => [
       { icon: <NewChatIcon />, onClick: () => setShowBackModal(true) },
-      { icon: <CallIcon />, onClick: () => {} },
+      { icon: <CallIcon />, onClick: () => setShowCallModal(true) },
     ],
     [], // setShowBackModal은 setState 함수로 안정적이므로 의존성 불필요
   );
@@ -338,20 +370,18 @@ const ChatbotPage = () => {
       <MemoizedHeader
         title="요금제 추천 AI 챗봇 Me+"
         iconButtons={iconButtons}
-        isTransparent={true}
-        className="custom-header"
       />
       {/* 원래 삭제해도 되는데 같이 넣으니까 더 자연스러워서 넣음 */}
-      <div className="pointer-events-none fixed top-13 left-1/2 -translate-x-1/2 w-full max-w-[600px] h-[40px] z-30 bg-gradient-to-b from-[#ffffff] to-transparent" />
+      {/* <div className="pointer-events-none fixed top-13 left-1/2 -translate-x-1/2 w-full max-w-[600px] h-[40px] z-30 bg-gradient-to-b from-[#ffffff] to-transparent" /> */}
       {/* 2. ChatArea - Flex */}
-      <div className="gradient-scroll-container flex flex-col h-[100vh]">
+      <div className="px-5 pt-[70px] pb-[70px] gradient-scroll-container flex flex-col h-[100vh] overflow-x-visible">
         {/* 패딩으로 보이는 영역 조절 (= 스크롤 가능 영역) */}
         {/* 마진으로 안하고 패딩으로 한 이유 : 마진으로 하면 그라데이션 넣은 이유 사라짐 */}
         <div
           ref={containerRef}
-          className="relative flex-1 overflow-y-auto mt-[50px] pb-[60px] flex flex-col-reverse"
+          className="relative flex-1 overflow-y-auto  pb-5 flex flex-col-reverse"
         >
-          <div className="gap-5 max-w-[560px] min-h-full flex flex-col-reverse">
+          <div className="gap-2 max-w-[560px] min-h-full flex flex-col-reverse">
             {reversedMessages.map((msg, idx) => {
               // 역순 배열에서 이전 메시지 확인 (역순이므로 다음 인덱스가 실제로는 이전 메시지)
               const nextMessage =
@@ -391,6 +421,7 @@ const ChatbotPage = () => {
                     onCarouselSelect={handleCarouselSelect}
                     onOttSelect={handleOttSelect}
                     onOxSelect={handleOxSelect}
+                    onToggleCardClick={scrollToToggleCard}
                     messageIndex={allMessages.length - 1 - idx} // 역순 배열에서 실제 인덱스 계산
                     selectedData={msg.selectedData}
                     showChatbotIcon={showChatbotIcon}
@@ -425,7 +456,7 @@ const ChatbotPage = () => {
           fullWidth
           onClick={handleClose}
         >
-          닫기
+          돌아가기
         </Button>
 
         <Button
@@ -440,7 +471,34 @@ const ChatbotPage = () => {
           새로 시작하기
         </Button>
       </Modal>
-      즉,
+
+      <Modal
+        isOpen={showCallModal}
+        onClose={() => setShowCallModal(false)}
+        modalTitle="고객센터 080-019-7000"
+        modalDesc="상담원 연결을 시작할 경우, 이전에 진행한 상담은 모두 초기화됩니다."
+      >
+        <Button
+          variant="secondary"
+          size="medium"
+          fullWidth
+          onClick={handleClose}
+        >
+          돌아가기
+        </Button>
+
+        <Button
+          variant="primary"
+          size="medium"
+          fullWidth
+          onClick={() => {
+            handleNewChat();
+            handleClose();
+          }}
+        >
+          전화하기
+        </Button>
+      </Modal>
     </>
   );
 };
diff --git a/client/src/pages/ComparePage.tsx b/client/src/pages/ComparePage.tsx
index 5d34519..6990362 100644
--- a/client/src/pages/ComparePage.tsx
+++ b/client/src/pages/ComparePage.tsx
@@ -1,1135 +1,28 @@
 import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import 'react-spring-bottom-sheet/dist/style.css';
+import { BottomSheet } from 'react-spring-bottom-sheet';
+
+import { getAllPlans } from '@/api/plan';
 
 import Header from '@/components/common/Header';
-import PlanSelectionCard from '@/components/ComparePage/PlanSelectionCard';
-import FilterSection from '@/components/ComparePage/FilterSection';
-import PlanListItem from '@/components/ComparePage/PlanListItem';
-import { usePlanFilter } from '@/hooks/usePlanFilter';
-import ComparisonResult from '@/components/ComparePage/ComparisonResult';
-import type { Plan } from '@/components/types/Plan';
-import Modal from '@/components/common/Modal';
+import ExitConfirmModal from '@/components/common/Modal';
 import Button from '@/components/common/Button';
+import FadeInUpDiv from '@/components/common/FadeInUpDiv';
+import LoadingSpinner from '@/components/common/LoadingSpinner';
+import PlanSelectionCardArea from '@/components/ComparePage/PlanSelectionCardArea';
+import ComparisonResult from '@/components/ComparePage/ComparisonResult';
+import FilterSection from '@/components/ComparePage/FilterSection';
+import PlanList from '@/components/ComparePage/PlanList';
 
-import { useNavigate } from 'react-router-dom';
-import { getAllPlans } from '@/api/plan';
+import type { Plan } from '@/components/types/Plan';
 
-import 'react-spring-bottom-sheet/dist/style.css';
-import { BottomSheet } from 'react-spring-bottom-sheet';
-import LoadingBubble from '@/components/chatbot/LoadingBubble';
+import { localFallbackPlans } from '@/constants/localFallbackPlans';
 
-// 컴포넌트 외부로 이동하여 재생성 방지
-const localFallbackPlans: Plan[] = [
-  {
-    _id: '6854f00d7ed56e59bef61127',
-    category: '5G',
-    name: '5G 시그니처',
-    description:
-      'U⁺5G 서비스와 프리미엄 혜택을 마음껏 즐기고, 가족과 공유할 수 있는 데이터까지 추가로 받는 5G 요금제',
-    isPopular: false,
-    dataGb: -1,
-    sharedDataGb: 120,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 130000,
-    optionalDiscountAmount: 92250,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/Z202205253',
-    bundleBenefit:
-      'U+ 투게더 결합, 5G 시그니처 가족할인, 태블릿/스마트기기 월정액 할인, 프리미어 요금제 약정할인, 로밍 혜택 프로모션',
-    mediaAddons:
-      '아이들나라 스탠다드+러닝, 바이브 앱+PC 음악감상, 유플레이, 밀리의 서재, 지니뮤직 앱+PC 음악감상',
-    premiumAddons:
-      '폰교체 패스, 삼성팩, 티빙 이용권 할인, 디즈니+, 넷플릭스, 헬로렌탈구독, 일리커피구독, 우리집지킴이 Easy2+, 우리집돌봄이 Kids, 신한카드 Air, 유튜브 프리미엄 할인',
-    basicService: 'U+ 모바일tv 기본 월정액 무료, U+멤버십 VVIP 등급 혜택',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61128',
-    category: '5G',
-    name: '5G 프리미어 슈퍼',
-    description:
-      'U⁺5G 서비스와 프리미엄 혜택을 마음껏 즐기고, 가족과 공유할 수 있는 데이터까지 추가로 받는 5G 요금제',
-    isPopular: false,
-    dataGb: -1,
-    sharedDataGb: 100,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 115000,
-    optionalDiscountAmount: 81000,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/Z202205251',
-    bundleBenefit:
-      'U+ 투게더 결합, 태블릿/스마트기기 월정액 할인, 프리미어 요금제 약정할인, 로밍 혜택 프로모션',
-    mediaAddons:
-      '아이들나라 스탠다드+러닝, 유플레이, 밀리의 서재, 지니뮤직 앱+PC 음악감상, 바이브 앱 음악감상',
-    premiumAddons:
-      '폰교체 패스, 삼성팩, 티빙 이용권 할인, 디즈니+, 넷플릭스, 헬로렌탈구독, 일리커피구독, 우리집지킴이 Easy2+, 우리집돌봄이 Kids, 신한카드 Air, 유튜브 프리미엄 할인',
-    basicService: 'U+ 모바일tv 기본 월정액 무료, U+멤버십 VVIP 등급 혜택',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61129',
-    category: '5G',
-    name: '5G 프리미어 플러스',
-    description:
-      'U⁺5G 서비스는 물론, 스마트 기기 2개와 다양한 콘텐츠까지 마음껏 이용할 수 있는 5G 요금제',
-    isPopular: false,
-    dataGb: -1,
-    sharedDataGb: 100,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 105000,
-    optionalDiscountAmount: 73500,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/Z202205252',
-    bundleBenefit:
-      'U+ 투게더 결합, 태블릿/스마트기기 월정액 할인, 프리미어 요금제 약정할인, 로밍 혜택 프로모션',
-    mediaAddons:
-      '아이들나라 스탠다드+러닝, 유플레이, 밀리의 서재, 지니뮤직 앱+PC 음악감상, 바이브 앱 음악감상',
-    premiumAddons:
-      '폰교체 패스, 삼성팩, 티빙 이용권 할인, 넷플릭스, 디즈니+, 헬로렌탈구독, 일리커피구독, 우리집지킴이 Easy2+, 우리집돌봄이 Kids, 신한카드 Air, 유튜브 프리미엄 할인',
-    basicService: 'U+ 모바일tv 기본 월정액 무료, U+멤버십 VVIP 등급 혜택',
-  },
-  {
-    _id: '6854f00d7ed56e59bef6112a',
-    category: '5G',
-    name: '5G 프리미어 레귤러',
-    description:
-      'U⁺5G 서비스는 물론, 스마트기기 1개와 다양한 콘텐츠까지 마음껏 이용할 수 있는 5G 요금제',
-    isPopular: true,
-    dataGb: -1,
-    sharedDataGb: 80,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 95000,
-    optionalDiscountAmount: 66000,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000433',
-    bundleBenefit:
-      'U+ 투게더 결합, 태블릿/스마트기기 월정액 할인, 프리미어 요금제 약정할인, 로밍 혜택 프로모션',
-    mediaAddons:
-      '아이들나라 스탠다드+러닝, 유플레이, 밀리의 서재, 바이브 300회 음악감상, 지니뮤직 300회 음악감상',
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료, U+멤버십 VVIP 등급 혜택',
-  },
-  {
-    _id: '6854f00d7ed56e59bef6112b',
-    category: '5G',
-    name: '5G 프리미어 에센셜',
-    description: 'U⁺5G 서비스를 마음껏 즐길 수 있는 5G 요금제',
-    isPopular: true,
-    dataGb: -1,
-    sharedDataGb: 70,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 85000,
-    optionalDiscountAmount: 58500,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000409',
-    bundleBenefit:
-      'U+ 투게더 결합, 태블릿/스마트기기 월정액 할인, 프리미어 요금제 약정할인, 로밍 혜택 프로모션',
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료, U+멤버십 VIP 등급 혜택',
-  },
-  {
-    _id: '6854f00d7ed56e59bef6112c',
-    category: '5G',
-    name: '5G 복지 75',
-    description: '복지할인 받는 고객님을 위한 5G 요금제',
-    isPopular: false,
-    dataGb: 150,
-    sharedDataGb: 60,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 600,
-    smsCount: -1,
-    monthlyFee: 75000,
-    optionalDiscountAmount: 56250,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-welfare/LPZ0000348',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료, U+멤버십 VIP 등급 혜택',
-  },
-  {
-    _id: '6854f00d7ed56e59bef6112d',
-    category: '5G',
-    name: '5G 스탠다드',
-    description: '넉넉한 데이터로 U⁺5G 서비스를 이용할 수 있는 5G 표준 요금제',
-    isPopular: true,
-    dataGb: 150,
-    sharedDataGb: 60,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 75000,
-    optionalDiscountAmount: 56250,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000415',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료, U+멤버십 VIP 등급 혜택',
-  },
-  {
-    _id: '6854f00d7ed56e59bef6112e',
-    category: '5G',
-    name: '유쓰 5G 스탠다드',
-    description:
-      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제',
-    isPopular: true,
-    dataGb: 210,
-    sharedDataGb: 65,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 75000,
-    optionalDiscountAmount: 56250,
-    premiumDiscountAmount: 0,
-    ageGroup: 'YOUTH',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000232',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료, U+멤버십 VIP 등급 혜택',
-  },
-  {
-    _id: '6854f00d7ed56e59bef6112f',
-    category: '5G',
-    name: '5G 스탠다드 에센셜',
-    description:
-      '필요한 만큼만 데이터를 선택할 수 있고, 다 쓰고 난 후에도 추가 요금 없이 데이터를 사용할 수 있는 요금제',
-    isPopular: false,
-    dataGb: 125,
-    sharedDataGb: 55,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 70000,
-    optionalDiscountAmount: 52500,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000784',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61130',
-    category: '5G',
-    name: '유쓰 5G 스탠다드 에센셜',
-    description:
-      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제',
-    isPopular: false,
-    dataGb: 185,
-    sharedDataGb: 60,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 70000,
-    optionalDiscountAmount: 52500,
-    premiumDiscountAmount: 0,
-    ageGroup: 'YOUTH',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000231',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61131',
-    category: 'LTE',
-    name: '추가 요금 걱정 없는 데이터 69',
-    description:
-      '추가 요금 걱정 없이 동영상, 고용량 콘텐츠까지 마음껏 이용할 수 있는 LTE요금제',
-    isPopular: true,
-    dataGb: 0.5,
-    sharedDataGb: 11,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 69000,
-    optionalDiscountAmount: 51750,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-unlimited/LPZ0000464',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61132',
-    category: 'LTE',
-    name: '추가 요금 걱정 없는 데이터 시니어 69',
-    description:
-      '추가 요금 걱정없이 동영상, 고용량 콘텐츠까지 마음껏 이용할 수 있는 시니어 전용 LTE 요금제',
-    isPopular: false,
-    dataGb: 0.5,
-    sharedDataGb: 15,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 69000,
-    optionalDiscountAmount: 51750,
-    premiumDiscountAmount: 0,
-    ageGroup: 'SENIOR',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-senior/LPZ0002352',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료, 실버지킴이',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61133',
-    category: 'LTE',
-    name: '추가 요금 걱정 없는 데이터 청소년 69',
-    description:
-      '추가 요금 걱정 없이 동영상, 고용량 콘텐츠까지 마음껏 이용할 수 있는 청소년 전용 LTE 요금제',
-    isPopular: false,
-    dataGb: 0.5,
-    sharedDataGb: 15,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 69000,
-    optionalDiscountAmount: 51750,
-    premiumDiscountAmount: 0,
-    ageGroup: 'YOUTH',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-youth/LPZ0002351',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61134',
-    category: '5G',
-    name: '5G 데이터 슈퍼',
-    description:
-      '필요한 만큼만 데이터를 선택할 수 있고, 다 쓰고 난 후에도 추가 요금 없이 데이터를 사용할 수 있는 요금제',
-    isPopular: false,
-    dataGb: 95,
-    sharedDataGb: 50,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 68000,
-    optionalDiscountAmount: 51000,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000781',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61135',
-    category: '5G',
-    name: '유쓰 5G 데이터 슈퍼',
-    description:
-      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제',
-    isPopular: false,
-    dataGb: 135,
-    sharedDataGb: 55,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 68000,
-    optionalDiscountAmount: 51000,
-    premiumDiscountAmount: 0,
-    ageGroup: 'YOUTH',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000230',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61136',
-    category: '5G',
-    name: '5G 데이터 플러스',
-    description:
-      '필요한 만큼만 데이터를 선택할 수 있고, 다 쓰고 난 후에도 추가 요금 없이 데이터를 사용할 수 있는 요금제',
-    isPopular: false,
-    dataGb: 80,
-    sharedDataGb: 45,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 66000,
-    optionalDiscountAmount: 49500,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000782',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61137',
-    category: '5G',
-    name: '유쓰 5G 데이터 플러스',
-    description:
-      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제',
-    isPopular: false,
-    dataGb: 110,
-    sharedDataGb: 50,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 66000,
-    optionalDiscountAmount: 49500,
-    premiumDiscountAmount: 0,
-    ageGroup: 'YOUTH',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000229',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61138',
-    category: '5G',
-    name: '5G 데이터 레귤러',
-    description:
-      '필요한 만큼만 데이터를 선택할 수 있고, 다 쓰고 난 후에도 추가 요금 없이 데이터를 사용할 수 있는 요금제',
-    isPopular: false,
-    dataGb: 50,
-    sharedDataGb: 40,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 63000,
-    optionalDiscountAmount: 47250,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000783',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61139',
-    category: '5G',
-    name: '유쓰 5G 데이터 레귤러',
-    description:
-      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제',
-    isPopular: false,
-    dataGb: 70,
-    sharedDataGb: 45,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 63000,
-    optionalDiscountAmount: 47250,
-    premiumDiscountAmount: 0,
-    ageGroup: 'YOUTH',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000228',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef6113a',
-    category: '5G',
-    name: '5G 심플+',
-    description: '합리적인 요금으로 U+5G 서비스를 이용할 수 있는 5G 요금제',
-    isPopular: true,
-    dataGb: 31,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 61000,
-    optionalDiscountAmount: 45750,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0002860',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef6113b',
-    category: '5G',
-    name: '유쓰 5G 심플+',
-    description:
-      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제',
-    isPopular: false,
-    dataGb: 41,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 61000,
-    optionalDiscountAmount: 45750,
-    premiumDiscountAmount: 0,
-    ageGroup: 'YOUTH',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000227',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef6113c',
-    category: '5G',
-    name: '5G 베이직+',
-    description:
-      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 5G 요금제',
-    isPopular: false,
-    dataGb: 24,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 59000,
-    optionalDiscountAmount: 44250,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ1001268',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U⁺ 모바일tv라이트 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef6113d',
-    category: '5G',
-    name: '유쓰 5G 베이직+',
-    description:
-      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G 요금제',
-    isPopular: false,
-    dataGb: 36,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 59000,
-    optionalDiscountAmount: 44250,
-    premiumDiscountAmount: 0,
-    ageGroup: 'YOUTH',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1001056',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U⁺ 모바일tv라이트 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef6113e',
-    category: 'LTE',
-    name: '추가 요금 걱정 없는 데이터 청소년 59',
-    description:
-      '추가 요금 걱정 없이 SNS, 메신저, 웹서핑 등의 서비스를 마음껏 이용할 수 있는 청소년 전용 LTE 요금제',
-    isPopular: false,
-    dataGb: 9,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 59000,
-    optionalDiscountAmount: 44250,
-    premiumDiscountAmount: 0,
-    ageGroup: 'STUDENT',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-youth/LPZ0000469',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef6113f',
-    category: '5G',
-    name: '5G 라이트+',
-    description: '저렴한 요금으로 U⁺5G 서비스를 이용할 수 있는 5G 실속 요금제',
-    isPopular: false,
-    dataGb: 14,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 55000,
-    optionalDiscountAmount: 41250,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000437',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U⁺ 모바일tv라이트 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61140',
-    category: '5G',
-    name: '5G 복지 55',
-    description: '복지할인 받는 고객님을 위한 5G 요금제',
-    isPopular: false,
-    dataGb: 14,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 600,
-    smsCount: -1,
-    monthlyFee: 55000,
-    optionalDiscountAmount: 41250,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-welfare/LPZ0000349',
-    bundleBenefit: '로밍 혜택 프로모션',
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U⁺ 모바일tv라이트 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61141',
-    category: '5G',
-    name: '유쓰 5G 라이트+',
-    description:
-      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제',
-    isPopular: false,
-    dataGb: 26,
-    sharedDataGb: 1,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 55000,
-    optionalDiscountAmount: 41250,
-    premiumDiscountAmount: 0,
-    ageGroup: 'YOUTH',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000224',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U⁺ 모바일tv라이트 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61142',
-    category: 'LTE',
-    name: '현역병사 데이터 55',
-    description:
-      '추가 요금 걱정 없이 동영상, 고용량 콘텐츠까지 마음껏 이용할 수 있는 현역병사 전용 LTE 요금제',
-    isPopular: false,
-    dataGb: 5,
-    sharedDataGb: 5,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 55000,
-    optionalDiscountAmount: 41250,
-    premiumDiscountAmount: 0,
-    ageGroup: 'SOLDIER',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-soldier/LPZ0002507',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U+ 모바일tv 기본 월정액 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61143',
-    category: 'LTE',
-    name: '복지 49',
-    description: '복지할인 받는 고객님을 위한 LTE 요금제',
-    isPopular: false,
-    dataGb: 6,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 600,
-    smsCount: -1,
-    monthlyFee: 49000,
-    optionalDiscountAmount: 36750,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-welfare/LPZ0002584',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U⁺ 모바일tv라이트 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61144',
-    category: '5G',
-    name: '5G 슬림+',
-    description: '저렴한 요금으로 U⁺5G 서비스를 이용할 수 있는 5G 실속 요금제',
-    isPopular: true,
-    dataGb: 9,
-    sharedDataGb: 2,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 47000,
-    optionalDiscountAmount: 35250,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000487',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U⁺ 모바일tv라이트 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61145',
-    category: '5G',
-    name: '유쓰 5G 슬림+',
-    description:
-      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제',
-    isPopular: false,
-    dataGb: 15,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 47000,
-    optionalDiscountAmount: 35250,
-    premiumDiscountAmount: 0,
-    ageGroup: 'YOUTH',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000223',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U⁺ 모바일tv라이트 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61146',
-    category: '5G',
-    name: '5G 라이트 청소년',
-    description:
-      '저렴한 요금으로 실속있게 U⁺5G 서비스를 이용할 수 있는 청소년 전용 5G 요금제',
-    isPopular: false,
-    dataGb: 8,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 45000,
-    optionalDiscountAmount: 33750,
-    premiumDiscountAmount: 0,
-    ageGroup: 'STUDENT',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-youth/LPZ0000417',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U⁺ 모바일tv라이트 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61147',
-    category: '5G',
-    name: '5G 시니어 A형',
-    description:
-      '저렴한 요금으로 실속있게 U⁺5G 서비스를 이용할 수 있는 만 65세 이상~70세 미만 전용 5G 요금제',
-    isPopular: false,
-    dataGb: 10,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 400,
-    smsCount: -1,
-    monthlyFee: 45000,
-    optionalDiscountAmount: 33750,
-    premiumDiscountAmount: 0,
-    ageGroup: 'SENIOR',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-senior/LPZ0000418',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U⁺ 모바일tv라이트 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61148',
-    category: '5G',
-    name: '5G 키즈 45',
-    description:
-      '저렴한 요금으로 실속 있게 U+5G 서비스를 이용할 수 있는\n만 12세 이하 전용 5G요금제',
-    isPopular: false,
-    dataGb: 9,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 45000,
-    optionalDiscountAmount: 33750,
-    premiumDiscountAmount: 0,
-    ageGroup: 'CHILD',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-youth/LPZ0002818',
-    bundleBenefit: null,
-    mediaAddons: '바이브 300회 음악감상',
-    premiumAddons: null,
-    basicService: null,
-  },
-  {
-    _id: '6854f00d7ed56e59bef61149',
-    category: '5G',
-    name: '5G 시니어 B형',
-    description:
-      '저렴한 요금으로 실속있게 U+5G 서비스를 이용할 수 있는 만 70세 이상~80세 미만 전용 5G 요금제',
-    isPopular: false,
-    dataGb: 10,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 400,
-    smsCount: -1,
-    monthlyFee: 43000,
-    optionalDiscountAmount: 32250,
-    premiumDiscountAmount: 0,
-    ageGroup: 'SENIOR',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-senior/LPZ1000127',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U⁺ 모바일tv라이트 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef6114a',
-    category: '5G',
-    name: '5G 시니어 C형',
-    description:
-      '저렴한 요금으로 실속있게 U+5G 서비스를 이용할 수 있는 만 80세 이상 전용 5G 요금제',
-    isPopular: false,
-    dataGb: 10,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 400,
-    smsCount: -1,
-    monthlyFee: 39000,
-    optionalDiscountAmount: 29250,
-    premiumDiscountAmount: 0,
-    ageGroup: 'SENIOR',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-senior/LPZ1000128',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U⁺ 모바일tv라이트 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef6114b',
-    category: '5G',
-    name: '5G 키즈 39',
-    description:
-      '저렴한 요금으로 실속 있게 U+5G 서비스를 이용할 수 있는\n만 12세 이하 전용 5G요금제',
-    isPopular: false,
-    dataGb: 5.5,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 37000,
-    optionalDiscountAmount: 27750,
-    premiumDiscountAmount: 0,
-    ageGroup: 'CHILD',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-youth/LPZ0002810',
-    bundleBenefit: null,
-    mediaAddons: '바이브 300회 음악감상',
-    premiumAddons: null,
-    basicService: null,
-  },
-  {
-    _id: '6854f00d7ed56e59bef6114c',
-    category: '5G',
-    name: '5G 미니',
-    description:
-      '월 3만 원대 가벼운 요금으로 필요한 만큼 데이터를 실속 있게 즐길 수 있는 5G 요금제',
-    isPopular: false,
-    dataGb: 5,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 37000,
-    optionalDiscountAmount: 27750,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ1000325',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U⁺ 모바일tv라이트 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef6114d',
-    category: '5G',
-    name: '유쓰 5G 미니',
-    description:
-      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제',
-    isPopular: false,
-    dataGb: 9,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 300,
-    smsCount: -1,
-    monthlyFee: 37000,
-    optionalDiscountAmount: 27750,
-    premiumDiscountAmount: 0,
-    ageGroup: 'YOUTH',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1001051',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: 'U⁺ 모바일tv라이트 무료',
-  },
-  {
-    _id: '6854f00d7ed56e59bef6114e',
-    category: 'LTE',
-    name: '데이터 33',
-    description:
-      '음성통화와 문자메시지는 기본으로 사용하고 저렴한 요금으로 데이터를 이용할 수 있는 실속형 요금제',
-    isPopular: false,
-    dataGb: 1.5,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 110,
-    smsCount: -1,
-    monthlyFee: 33000,
-    optionalDiscountAmount: 24750,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-general/LPZ0000472',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: null,
-  },
-  {
-    _id: '6854f00d7ed56e59bef6114f',
-    category: 'LTE',
-    name: '데이터 시니어 33',
-    description:
-      '음성통화와 문자메시지는 기본으로 사용하고 저렴한 요금으로 데이터를 이용할 수 있는 실속형 시니어 전용 LTE 요금제',
-    isPopular: false,
-    dataGb: 1.7,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 110,
-    smsCount: -1,
-    monthlyFee: 33000,
-    optionalDiscountAmount: 24750,
-    premiumDiscountAmount: 0,
-    ageGroup: 'SENIOR',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-senior/LPZ0000296',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: '실버지킴이',
-  },
-  {
-    _id: '6854f00d7ed56e59bef61150',
-    category: 'LTE',
-    name: '복지 33',
-    description: '복지할인 받는 고객님을 위한 요금제',
-    isPopular: false,
-    dataGb: 2,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 600,
-    smsCount: -1,
-    monthlyFee: 33000,
-    optionalDiscountAmount: 24750,
-    premiumDiscountAmount: 0,
-    ageGroup: 'ALL',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-welfare/LPZ0002583',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: null,
-  },
-  {
-    _id: '6854f00d7ed56e59bef61151',
-    category: 'LTE',
-    name: '추가 요금 걱정 없는 데이터 청소년 33',
-    description:
-      '추가 요금 걱정 없이 SNS, 메신저, 웹서핑, 이메일 등의 서비스를 마음껏 이용할 수 있는 청소년 전용 LTE 요금제',
-    isPopular: false,
-    dataGb: 2,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 110,
-    smsCount: -1,
-    monthlyFee: 33000,
-    optionalDiscountAmount: 24750,
-    premiumDiscountAmount: 0,
-    ageGroup: 'STUDENT',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-youth/LPZ0000467',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: null,
-  },
-  {
-    _id: '6854f00d7ed56e59bef61152',
-    category: 'LTE',
-    name: '현역병사 데이터 33',
-    description:
-      '추가 요금 걱정 없이 SNS,메신저, 웹서핑 등의 서비스를 마음껏 이용할 수 있는 현역병사 LTE 요금제',
-    isPopular: false,
-    dataGb: 2,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 110,
-    smsCount: -1,
-    monthlyFee: 33000,
-    optionalDiscountAmount: 24750,
-    premiumDiscountAmount: 0,
-    ageGroup: 'SOLDIER',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-soldier/LPZ0002506',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: null,
-  },
-  {
-    _id: '6854f00d7ed56e59bef61153',
-    category: '5G',
-    name: '5G 키즈 29',
-    description:
-      '저렴한 요금으로 실속 있게 U+5G 서비스를 이용할 수 있는\n만 12세 이하 전용 5G요금제',
-    isPopular: false,
-    dataGb: 3.3,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 100,
-    smsCount: -1,
-    monthlyFee: 29000,
-    optionalDiscountAmount: 21750,
-    premiumDiscountAmount: 0,
-    ageGroup: 'CHILD',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-youth/LPZ0002811',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: null,
-  },
-  {
-    _id: '6854f00d7ed56e59bef61154',
-    category: 'LTE',
-    name: '키즈 22(만 12세 이하)',
-    description:
-      '저렴한 가격으로 음성통화, 메시지, 데이터를 함께 쓸 수 있는 LTE 요금제',
-    isPopular: false,
-    dataGb: 0.7,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 60,
-    smsCount: -1,
-    monthlyFee: 22000,
-    optionalDiscountAmount: 16500,
-    premiumDiscountAmount: 0,
-    ageGroup: 'CHILD',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-youth/LPZ0002473',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: null,
-  },
-  {
-    _id: '6854f00d7ed56e59bef61155',
-    category: 'LTE',
-    name: '청소년19',
-    description:
-      '기본 제공 링 안에서 자유롭게 조절하며 쓸 수 있고, 추가로 LTE 데이터까지 사용할 수 있는 LTE 요금제',
-    isPopular: false,
-    dataGb: 0.35,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 133,
-    smsCount: 1000,
-    monthlyFee: 20900,
-    optionalDiscountAmount: 15675,
-    premiumDiscountAmount: 0,
-    ageGroup: 'STUDENT',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-youth/LPZ0001369',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: null,
-  },
-  {
-    _id: '6854f00d7ed56e59bef61156',
-    category: 'LTE',
-    name: '시니어16.5',
-    description:
-      '가족과 통화는 자주 하고 LTE 데이터사용을 원하는 만 65세 이상 고객님을 위한 LTE 요금제',
-    isPopular: false,
-    dataGb: 0.3,
-    sharedDataGb: 0,
-    voiceMinutes: -1,
-    addonVoiceMinutes: 70,
-    smsCount: 100,
-    monthlyFee: 16500,
-    optionalDiscountAmount: 12375,
-    premiumDiscountAmount: 0,
-    ageGroup: 'SENIOR',
-    detailUrl:
-      'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-senior/LPZ0002291',
-    bundleBenefit: null,
-    mediaAddons: null,
-    premiumAddons: null,
-    basicService: '실버지킴이',
-  },
-];
+import { usePlanFilter } from '@/hooks/usePlanFilter';
 
 const ComparePage: React.FC = () => {
-  const [open, setOpen] = useState(false);
+  const [sheetOpen, setSheetOpen] = useState(false);
   const [activeDataIndex, setActiveDataIndex] = useState(0);
   const [activePriceIndex, setActivePriceIndex] = useState(0);
   const [openDropdowns, setOpenDropdowns] = useState<Record<string, boolean>>(
@@ -1162,20 +55,22 @@ const ComparePage: React.FC = () => {
     activePriceIndex,
   );
 
+  const resetDropdowns = () => setOpenDropdowns({});
+
   const handleSetActiveDataIndex = (index: number) => {
     setActiveDataIndex(index);
-    setOpenDropdowns({});
+    resetDropdowns();
   };
 
   const handleSetActivePriceIndex = (index: number) => {
     setActivePriceIndex(index);
-    setOpenDropdowns({});
+    resetDropdowns();
   };
 
   const handleSelectPlan = (plan: Plan) => {
-    if (selectedLeft?._id === plan._id || selectedRight?._id === plan._id) {
-      return;
-    }
+    const isAlreadySelected =
+      selectedLeft?._id === plan._id || selectedRight?._id === plan._id;
+    if (isAlreadySelected) return;
 
     if (selectedSlot === 'left') {
       setSelectedLeft(plan);
@@ -1183,14 +78,14 @@ const ComparePage: React.FC = () => {
       setSelectedRight(plan);
     }
 
-    setOpen(false);
+    setSheetOpen(false);
     setSelectedSlot(null);
   };
 
   const openSheetForSlot = (slot: 'left' | 'right') => {
     setSelectedSlot(slot);
     setOpenDropdowns({});
-    setOpen(true);
+    setSheetOpen(true);
   };
 
   const handleClearSlot = (slot: 'left' | 'right') => {
@@ -1229,65 +124,45 @@ const ComparePage: React.FC = () => {
     };
 
     fetchPlans();
-  }, []); // localFallbackPlans는 컴포넌트 외부에서 정의된 상수이므로 의존성 불필요
+  }, []);
 
   return (
-    <>
-      <Header
-        title="요금제 비교하기"
-        isTransparent={true}
-        onBackClick={() => openModal()}
-      />
-      {isModalOpen && (
-        <Modal
-          isOpen={isModalOpen}
-          onClose={closeModal}
-          modalTitle="요금제 비교하기를 그만두시겠어요?"
-          modalDesc="그만두실 경우, 선택하신 요금제가 모두 초기화됩니다."
-        >
-          <Button
-            fullWidth
-            variant="secondary"
-            onClick={closeModal}
-            size="medium"
-          >
-            계속할래요
-          </Button>
-          <Button fullWidth onClick={() => navigate('/')} size="medium">
-            그만둘래요
-          </Button>
-        </Modal>
-      )}
-      <h1 className="font-semibold text-2xl text-center mt-[20px]">
+    <div className="px-5">
+      <Header title="요금제 비교하기" onBackClick={() => openModal()} />
+
+      <ComparePageTitle>
         비교하고 싶은
         <br />
         요금제를 선택해 주세요
-      </h1>
+      </ComparePageTitle>
 
-      <PlanSelectionCard
-        selectedLeft={selectedLeft}
-        selectedRight={selectedRight}
-        onSelectSlot={openSheetForSlot}
-        onClearSlot={handleClearSlot}
-      />
-      {selectedLeft || selectedRight ? (
-        <ComparisonResult
+      <FadeInUpDiv custom={1}>
+        <PlanSelectionCardArea
           selectedLeft={selectedLeft}
           selectedRight={selectedRight}
+          onSelectSlot={openSheetForSlot}
+          onClearSlot={handleClearSlot}
         />
-      ) : (
-        <div className="flex flex-col justify-center items-center text-center text-gray500 mt-[120px]">
-          <p className="text-lg">비교할 요금제가 없습니다</p>
-          <p className="text-xl">버튼을 눌러 요금제를 선택해주세요!</p>
-        </div>
-      )}
+      </FadeInUpDiv>
+
+      <FadeInUpDiv custom={2}>
+        {selectedLeft || selectedRight ? (
+          <ComparisonResult
+            selectedLeft={selectedLeft}
+            selectedRight={selectedRight}
+          />
+        ) : (
+          <EmptyState />
+        )}
+      </FadeInUpDiv>
+
       <BottomSheet
         className="fixed left-1/2 top-0 bottom-0 -translate-x-1/2 w-full max-w-[600px] flex justify-center items-center z-50"
-        open={open}
-        onDismiss={() => setOpen(false)}
+        open={sheetOpen}
+        onDismiss={() => setSheetOpen(false)}
         snapPoints={({ maxHeight }) => [maxHeight / 1.25]}
       >
-        <div className="px-5">
+        <div>
           <FilterSection
             dataList={dataList}
             priceList={priceList}
@@ -1296,30 +171,63 @@ const ComparePage: React.FC = () => {
             onDataIndexChange={handleSetActiveDataIndex}
             onPriceIndexChange={handleSetActivePriceIndex}
           />
-          {isLoading && (
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2">
-              <LoadingBubble type="dbcalling" />
-            </div>
-          )}
-          <div className="flex flex-col gap-[15px] select-none mb-3">
-            {filteredPlans.map((plan) => (
-              <PlanListItem
-                key={plan._id}
-                plan={plan}
-                isOpen={openDropdowns[plan._id] || false}
-                isDisabled={
-                  selectedLeft?._id === plan._id ||
-                  selectedRight?._id === plan._id
-                }
-                onToggle={() => toggleDropdown(plan._id)}
-                onSelect={() => handleSelectPlan(plan)}
-              />
-            ))}
-          </div>
+
+          {isLoading && <LoadingSpinner />}
+
+          <PlanList
+            plans={filteredPlans}
+            selectedLeft={selectedLeft}
+            selectedRight={selectedRight}
+            openDropdowns={openDropdowns}
+            onToggle={toggleDropdown}
+            onSelect={handleSelectPlan}
+          />
         </div>
       </BottomSheet>
-    </>
+
+      {isModalOpen && (
+        <ExitConfirmModal
+          isOpen={isModalOpen}
+          onClose={closeModal}
+          modalTitle="요금제 비교하기를 그만두시겠어요?"
+          modalDesc="그만두실 경우, 선택하신 요금제가 모두 초기화됩니다."
+        >
+          <Button
+            fullWidth
+            variant="secondary"
+            onClick={closeModal}
+            size="medium"
+          >
+            계속할래요
+          </Button>
+          <Button fullWidth onClick={() => navigate('/')} size="medium">
+            그만둘래요
+          </Button>
+        </ExitConfirmModal>
+      )}
+    </div>
   );
 };
 
 export default ComparePage;
+
+const ComparePageTitle = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <FadeInUpDiv custom={0}>
+      <h1 className="font-semibold text-2xl text-center mt-[74px]">
+        {children}
+      </h1>
+    </FadeInUpDiv>
+  );
+};
+
+const EmptyState = () => {
+  return (
+    <div className="flex flex-col gap-2 justify-center items-center text-center text-gray500 mt-[120px]">
+      <p className="text-lg">비교할 요금제가 없습니다</p>
+      <p className="text-xl text-primary-pink-60">
+        버튼을 눌러 요금제를 선택해주세요!
+      </p>
+    </div>
+  );
+};
diff --git a/client/src/pages/MainPage.tsx b/client/src/pages/MainPage.tsx
index 74bd8e2..e119543 100644
--- a/client/src/pages/MainPage.tsx
+++ b/client/src/pages/MainPage.tsx
@@ -6,101 +6,97 @@ import AnimatedShaker from '@/components/common/AnimatedShaker';
 import compareIcon from '@/assets/icon/compare_icon.png';
 import chatbotIcon from '@/assets/icon/chatbot_icon.png';
 import testIcon from '@/assets/icon/test_icon.png';
-import ServiceGuide from '@/components/ServiceGuide/ServiceGuide';
-import { useState } from 'react';
 
 const MainPage: React.FC = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
   return (
-    <div className="relative" style={{ top: '-25px' }}>
-      {/* 제목 */}
-      <FadeInUpDiv custom={0} className="mb-[37px]">
-        <h2 className="text-2xl font-semibold">
-          <span className="text-primary-pink">LG U+</span> 요금제 추천 AI 챗봇
-        </h2>
-        <h1 className="inline-block text-gradation text-[32px] font-semibold">
-          Me플러스
-        </h1>
-      </FadeInUpDiv>
+    <div className="h-[100vh] flex flex-col justify-center ">
+      <div className="px-5" style={{ top: '25px' }}>
+        {/* 제목 */}
+        <FadeInUpDiv custom={0} className="mb-[37px]">
+          <h2 className="text-2xl font-semibold">
+            <span className="text-primary-pink">LG U+</span> 요금제 추천 AI 챗봇
+          </h2>
+          <h1 className="inline-block text-gradation text-[32px] font-semibold">
+            Me플러스
+          </h1>
+        </FadeInUpDiv>
 
-      {/* 설명 */}
-      <FadeInUpDiv custom={1} className="flex flex-col gap-[7px] mb-[15px]">
-        <p className="text-xs text-gray500 h-[12px]">
-          밤낮없이 24시간 상담 가능
-        </p>
-        <h3 className="text-xl font-semibold">
-          내게 맞는 요금제, 지금 찾아보세요!
-        </h3>
-      </FadeInUpDiv>
+        {/* 설명 */}
+        <FadeInUpDiv custom={1} className="flex flex-col gap-[7px] mb-[15px]">
+          <p className="text-xs text-gray500 h-[12px]">
+            밤낮없이 24시간 상담 가능
+          </p>
+          <h3 className="text-xl font-semibold">
+            내게 맞는 요금제, 지금 찾아보세요!
+          </h3>
+        </FadeInUpDiv>
 
-      {/* 카드들 */}
-      <div className="flex flex-col gap-[20px]">
-        <FadeInUpDiv custom={2}>
-          <AnimatedShaker>
+        {/* 카드들 */}
+        <div className="flex flex-col gap-[20px]">
+          <FadeInUpDiv custom={2}>
+            <AnimatedShaker>
+              <LinkCard
+                to="/chatbot"
+                title="챗봇 상담하기"
+                description={
+                  <>
+                    데이터 용량부터 사소한 궁금증까지
+                    <br />
+                    해결해드려요.
+                  </>
+                }
+                icon={chatbotIcon}
+                variant="primary"
+                size="large"
+              />
+            </AnimatedShaker>
+          </FadeInUpDiv>
+          <FadeInUpDiv custom={3}>
             <LinkCard
-              to="/chatbot"
-              title="챗봇 상담하기"
+              to="/plan-test"
+              title="맞춤형 요금제 찾아보기"
               description={
                 <>
-                  데이터 용량부터 사소한 궁금증까지
+                  간단한 설문을 통해
                   <br />
-                  해결해드려요.
+                  맞춤형 요금제를 찾아드려요.
                 </>
               }
-              icon={chatbotIcon}
-              variant="primary"
+              icon={testIcon}
+              variant="gradient"
               size="large"
             />
-          </AnimatedShaker>
-        </FadeInUpDiv>
-        <FadeInUpDiv custom={3}>
-          <LinkCard
-            to="/plan-test"
-            title="맞춤형 요금제 찾아보기"
-            description={
-              <>
-                간단한 설문을 통해
-                <br />
-                맞춤형 요금제를 찾아드려요.
-              </>
-            }
-            icon={testIcon}
-            variant="gradient"
-            size="large"
-          />
-        </FadeInUpDiv>
-        <FadeInUpDiv custom={4}>
-          <div className="flex gap-[10px] min-h-[127px]">
-            <div className="flex-[2]">
-              <LinkCard
-                to="/compare"
-                title="요금제 비교"
-                description="궁금한 요금제를 한눈에 비교해봐요."
-                icon={compareIcon}
-                variant="gradient"
-                size="medium"
-              />
-            </div>
-            <div className="flex-[1]">
-              <LinkCard
-                to=""
-                title={
-                  <>
-                    서비스
-                    <br />
-                    가이드
-                  </>
-                }
-                variant="shadow"
-                size="medium"
-                onClick={() => setIsOpen(true)}
-              />
+          </FadeInUpDiv>
+          <FadeInUpDiv custom={4}>
+            <div className="flex gap-[10px] min-h-[127px]">
+              <div className="flex-[2]">
+                <LinkCard
+                  to="/compare"
+                  title="요금제 비교"
+                  description="궁금한 요금제를 한눈에 비교해봐요."
+                  icon={compareIcon}
+                  variant="gradient"
+                  size="medium"
+                />
+              </div>
+              <div className="flex-[1]">
+                <LinkCard
+                  to="/service-guide"
+                  title={
+                    <>
+                      서비스
+                      <br />
+                      가이드
+                    </>
+                  }
+                  variant="shadow"
+                  size="medium"
+                />
+              </div>
             </div>
-          </div>
-        </FadeInUpDiv>
+          </FadeInUpDiv>
+        </div>
       </div>
-      {isOpen && <ServiceGuide onClose={() => setIsOpen(false)} />}
     </div>
   );
 };
diff --git a/client/src/pages/ServiceGuidePage.tsx b/client/src/pages/ServiceGuidePage.tsx
new file mode 100644
index 0000000..62857d4
--- /dev/null
+++ b/client/src/pages/ServiceGuidePage.tsx
@@ -0,0 +1,125 @@
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Pagination } from 'swiper/modules';
+import { Link } from 'react-router-dom';
+
+import GuideSlide from '@/components/ServiceGuidePage/GuideSlide';
+
+import serviceGuide1 from '@/assets/image/service_guide1.png';
+import serviceGuide2 from '@/assets/image/service_guide2.png';
+import serviceGuide3 from '@/assets/image/service_guide3.png';
+import serviceGuide4 from '@/assets/image/service_guide4.png';
+import serviceGuide5 from '@/assets/image/service_guide5.png';
+import serviceGuideIcon1 from '@/assets/icon/service_guide_icon1.png';
+import serviceGuideIcon2 from '@/assets/icon/service_guide_icon2.png';
+import serviceGuideIcon34 from '@/assets/icon/service_guide_icon34.png';
+import serviceGuideIcon5 from '@/assets/icon/service_guide_icon5.png';
+import guideCloseIcon from '@/assets/icon/guide_close.svg';
+
+const ServiceGuidePage: React.FC = () => {
+  const pagination = {
+    clickable: true,
+    renderBullet: (index: number, className: string) =>
+      `<span class="${className}" id="${index}"></span>`,
+  };
+
+  return (
+    <div className="absolute inset-0 bg-background-40 flex flex-col items-center z-100 overflow-hidden h-[100vh] w-[100vw] max-w-[600px] pt-5">
+      <div className="w-full h-full select-none">
+        <Swiper
+          pagination={pagination}
+          modules={[Pagination]}
+          className="mySwiper h-full"
+        >
+          <GuideCloseButton />
+          {slides.map((slide, index) => (
+            <SwiperSlide key={index}>
+              <GuideSlide {...slide} />
+              {index === slides.length - 1 && <MePlusStartButton />}
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  );
+};
+
+export default ServiceGuidePage;
+
+const slides = [
+  {
+    icon: serviceGuideIcon1,
+    text: (
+      <p>
+        <span className="text-gradation">Me플러스</span>
+        에서 <br />
+        내게 딱 맞는 요금제를 추천해드려요
+      </p>
+    ),
+    image: serviceGuide1,
+  },
+  {
+    icon: serviceGuideIcon2,
+    text: (
+      <>
+        사소한 궁금증부터 필요한 정보
+        <br />
+        챗봇에서 편하게 물어보고
+      </>
+    ),
+    image: serviceGuide2,
+  },
+  {
+    icon: serviceGuideIcon34,
+    text: (
+      <>
+        무엇을 물어볼지 모를 때는,
+        <br />
+        맞춤형 요금제 찾아보기에서
+      </>
+    ),
+    image: serviceGuide3,
+  },
+  {
+    icon: serviceGuideIcon34,
+    text: (
+      <>
+        간단한 테스트로
+        <br />딱 맞는 요금제를 찾아드려요
+      </>
+    ),
+    image: serviceGuide4,
+  },
+  {
+    icon: serviceGuideIcon5,
+    text: (
+      <>
+        어떤 요금제가 더 좋은지 모를 땐,
+        <br />
+        요금제 비교하기에서!
+      </>
+    ),
+    image: serviceGuide5,
+  },
+];
+
+const GuideCloseButton = () => {
+  return (
+    <Link to="/">
+      <img
+        src={guideCloseIcon}
+        alt="가이드 닫기"
+        className="absolute top-5 right-5 p-2 m-3 cursor-pointer z-9999"
+      />
+    </Link>
+  );
+};
+
+const MePlusStartButton = () => {
+  return (
+    <Link to="/">
+      <div className="absolute bottom-[23px] w-[calc(100%-40px)] h-[46px] bg-primary-pink text-sm font-semibold text-background-40 flex justify-center items-center cursor-pointer rounded-[10px] mx-5">
+        Me플러스 시작하기
+      </div>
+    </Link>
+  );
+};
diff --git a/client/src/pages/TestFirstPage.tsx b/client/src/pages/TestFirstPage.tsx
index 48142ea..7eaebe3 100644
--- a/client/src/pages/TestFirstPage.tsx
+++ b/client/src/pages/TestFirstPage.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import FloatingIcon from '@/components/common/FloatingIcon';
 import moonerImage from '../assets/image/mooner_main.png';
 
 const TestFirstPage: React.FC = () => {
@@ -15,24 +16,25 @@ const TestFirstPage: React.FC = () => {
 
   return (
     <>
+      {/* 전체 배경 */}
       <div className="absolute inset-0 z-0 bg-gradient-to-b from-[#dfe4fd] to-white" />
+      {/* 가운데 콘텐츠 */}
+      <div className="absolute inset-0 z-10 flex items-center justify-center">
+        <div className="flex flex-col items-center justify-center gap-6">
+          <FloatingIcon
+            variant="large"
+            src={moonerImage}
+            alt="무너흠"
+            className="w-[262px]"
+          />
 
-      <div className="relative z-10 flex flex-col items-center justify-center min-h-screen px-4">
-        <img
-          src={moonerImage}
-          alt="무너 알려줄게 이미지"
-          className="w-[262px] mb-4"
-        />
-        <p className="text-center text-gray-800 text-2xl font-semibold">
-          나와{' '}
-          <span className="text-primary-pink font-semibold">
-            딱 맞는 요금제
-          </span>
-          를 알아봐요!
-        </p>
+          <p className="text-center text-2xl font-semibold mt-6 shimmer-text text-gray-800">
+            나와 <span className="text-primary-pink">딱 맞는 요금제</span>를
+            알아봐요!
+          </p>
+        </div>
       </div>
     </>
   );
 };
-
 export default TestFirstPage;
diff --git a/client/src/pages/TestPage.tsx b/client/src/pages/TestPage.tsx
index 618614e..835254d 100644
--- a/client/src/pages/TestPage.tsx
+++ b/client/src/pages/TestPage.tsx
@@ -1,7 +1,8 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { rules } from '@/utils/rules';
-import { planResults } from '@/data/TestResult';
+// import { planResults } from '@/data/TestResult';
+import { getAllPlans } from '@/api/testPlan';
 import { questions } from '@/data/Questions';
 import Modal from '@/components/common/Modal';
 import Button from '@/components/common/Button';
@@ -16,6 +17,163 @@ import next from '../assets/icon/next_icon.svg';
 import back from '../assets/icon/back_icon.svg';
 import { useRef } from 'react';
 import type { PlanResult } from '@/components/types/TestResult';
+// import FloatingIcon from '@/components/common/FloadingIcon';
+// import BounceIcon from '@/components/common/BounceIcon';
+import IconSwitcher from '@/components/common/IconSwitcher';
+
+// 컴포넌트 외부로 이동하여 재생성 방지
+const localFallbackPlans: PlanResult[] = [
+  {
+    _id: '6858ee7ffc03f10c86710103',
+    id: 'ott-plus',
+    name: '5G 프리미어 플러스',
+    description:
+      'U⁺5G 서비스는 물론, 스마트 기기 2개와 다양한 콘텐츠까지 마음껏 이용할 수 있는 5G 요금제\n프리미엄 서비스 기본 제공(택1)\n음악 구독 서비스 지니, 벅스, FLO 중 선택 가능',
+    priority: 2,
+    dataUsage: 100,
+    callUsage: 100,
+    messageUsage: 100,
+    price: 105000,
+    tagLine: '넷플릭스 / 왓챠 제휴 결합',
+    link: 'https://www.lguplus.com/plan/limit-plans/Z202205254',
+    isActive: true,
+  },
+  {
+    _id: '6858ee7ffc03f10c86710105',
+    id: 'youth1-special',
+    name: '5G 라이트 청소년',
+    description:
+      '저렴한 요금으로 실속있게 U⁺5G 서비스를 이용할 수 있는 청소년 전용 5G 요금제\n최대 1Mbps 속도로 데이터 무제한 이용 가능\n만 18세 이하만 가입가능',
+    priority: 1,
+    dataUsage: 15,
+    callUsage: 100,
+    messageUsage: 100,
+    price: 45000,
+    tagLine: '데이터 무제한 최대 1Mbps 속도',
+    link: 'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-youth/LPZ0000417',
+    isActive: true,
+  },
+  {
+    _id: '6858ee7ffc03f10c86710106',
+    id: 'youth2-special',
+    name: '유스 5G 스탠다드',
+    description:
+      '일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제\n만 19세 이상 만 34세 이하 청년만 가입가능',
+    priority: 1,
+    dataUsage: 90,
+    callUsage: 100,
+    messageUsage: 100,
+    price: 75000,
+    tagLine: '데이터 무제한 최대 5Mbps 속도',
+    link: 'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000232',
+    isActive: true,
+  },
+  {
+    _id: '6858ee7ffc03f10c86710107',
+    id: 'youth3-special',
+    name: 'LTE 데이터 시니어 33',
+    description:
+      '음성통화와 문자메시지는 기본으로 사용하고 저렴한 요금으로 데이터를 이용할 수 있는 실속형 시니어 전용 LTE 요금제\n1시간~3시간마다 문자메시지로 내 위치를 보호자에게 알려주는 실버지킴이 서비스',
+    priority: 1,
+    dataUsage: 5,
+    callUsage: 100,
+    messageUsage: 100,
+    price: 33000,
+    tagLine: '실버지킴이 서비스',
+    link: 'https://www.lguplus.com/mobile/plan/mplan/lte-all/lte-senior/LPZ0000296',
+    isActive: true,
+  },
+  {
+    _id: '6858ee7ffc03f10c86710103',
+    id: 'ott-plus',
+    name: '5G 프리미어 플러스',
+    description:
+      'U⁺5G 서비스는 물론, 스마트 기기 2개와 다양한 콘텐츠까지 마음껏 이용할 수 있는 5G 요금제\n프리미엄 서비스 기본 제공(택1)\n음악 구독 서비스 지니, 벅스, FLO 중 선택 가능',
+    priority: 2,
+    dataUsage: 100,
+    callUsage: 100,
+    messageUsage: 100,
+    price: 105000,
+    tagLine: '넷플릭스 / 왓챠 제휴 결합',
+    link: 'https://www.lguplus.com/plan/limit-plans/Z202205254',
+    isActive: true,
+  },
+  {
+    _id: '6858ee7ffc03f10c86710102',
+    id: 'music-plus',
+    name: '5G 프리미어 레귤러',
+    description:
+      'U⁺5G 서비스는 물론, 스마트기기 1개와 다양한 콘텐츠까지 마음껏 이용할 수 있는 5G 요금제\n미디어 서비스 기본 제공(택1)\n지니, 벅스, FLO 중 선택 가능',
+    priority: 3,
+    dataUsage: 100,
+    callUsage: 100,
+    messageUsage: 100,
+    price: 95000,
+    tagLine: '지니뮤직 제휴 결합',
+    link: 'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000433',
+    isActive: true,
+  },
+  {
+    _id: '6858ee7ffc03f10c86710104',
+    id: 'family',
+    name: '5G 프리미어 에센셜',
+    description:
+      'U⁺5G 서비스를 마음껏 즐길 수 있는 5G 요금제\n친구, 가족과 결합하면 데이터 무제한 요금제를 최대 20,000원 할인',
+    priority: 4,
+    dataUsage: 100,
+    callUsage: 100,
+    messageUsage: 100,
+    price: 85000,
+    tagLine: 'U+ 투게더 결합',
+    link: 'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000409',
+    isActive: true,
+  },
+  {
+    _id: '6858ee7ffc03f10c86710108',
+    id: 'max-data',
+    name: '5G 프리미어 에센셜',
+    description:
+      'U⁺5G 서비스를 마음껏 즐길 수 있는 5G 요금제\nU+ 투게더 결합\n프리미어 요금제 약정할인\n로밍 혜택 프로모션',
+    priority: 5,
+    dataUsage: 100,
+    callUsage: 100,
+    messageUsage: 100,
+    price: 85000,
+    tagLine: '데이터 무제한',
+    link: 'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000409',
+    isActive: true,
+  },
+  {
+    _id: '6858ee7ffc03f10c86710109',
+    id: 'data-high',
+    name: '5G 스탠다드',
+    description:
+      '넉넉한 데이터로 U⁺5G 서비스를 이용할 수 있는 5G 표준 요금제\n최대 5Mbps 속도로 데이터 무제한 이용 가능',
+    priority: 5,
+    dataUsage: 80,
+    callUsage: 100,
+    messageUsage: 100,
+    price: 75000,
+    tagLine: '데이터 무제한 최대 5Mbps 속도',
+    link: 'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000415',
+    isActive: true,
+  },
+  {
+    _id: '6858ee7ffc03f10c8671010a',
+    id: 'data-medium',
+    name: '5G 데이터 플러스',
+    description:
+      '필요한 만큼만 데이터를 선택할 수 있고, 다 쓰고 난 후에도 추가 요금 없이 데이터를 사용할 수 있는 요금제\n최대 1Mbps 속도로 데이터 무제한 이용 가능',
+    priority: 5,
+    dataUsage: 60,
+    callUsage: 100,
+    messageUsage: 100,
+    price: 66000,
+    tagLine: '데이터 무제한 최대 1Mbps 속도',
+    link: 'https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000782',
+    isActive: true,
+  },
+];
 
 const TestPage = () => {
   const navigate = useNavigate();
@@ -31,7 +189,26 @@ const TestPage = () => {
   const currentQuestion = questions[currentIndex];
   const selected = selectedOptions[currentQuestion.id];
   const isAnswered = selected !== undefined;
-  const moonerSrc = isAnswered ? moonerAhaImage : moonerImage;
+  // const moonerSrc = isAnswered ? moonerAhaImage : moonerImage;
+  const [fetchedPlans, setFetchedPlans] = useState<PlanResult[]>([]);
+  const [animationDisabled, setAnimationDisabled] = useState(false);
+  const [shouldBounce, setShouldBounce] = useState(false);
+
+  useEffect(() => {
+    const fetchPlans = async () => {
+      // setIsLoading(true);
+      try {
+        const res = await getAllPlans();
+        setFetchedPlans(res.planResults); // or res if 직접 리턴 시
+      } catch (error) {
+        console.error('요금제 가져오기 실패:', error);
+        setFetchedPlans(localFallbackPlans);
+      }
+      // setIsLoading(false);
+    };
+
+    fetchPlans();
+  }, []);
 
   // const handleGoHome = () => {
   //   navigate('/'); // 메인페이지로 이동
@@ -43,7 +220,11 @@ const TestPage = () => {
 
   const handleSelect = (value: string) => {
     setSelectedOptions((prev) => ({ ...prev, [currentQuestion.id]: value }));
+
+    setShouldBounce(true);
+    setAnimationDisabled(true);
     setIsTransitioning(true);
+
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
     }
@@ -52,7 +233,10 @@ const TestPage = () => {
       if (currentIndex < questions.length - 1) {
         setCurrentIndex((prev) => prev + 1);
       }
+
+      setAnimationDisabled(false);
       setIsTransitioning(false);
+      setShouldBounce(false);
     }, 1000);
   };
 
@@ -72,16 +256,11 @@ const TestPage = () => {
     (q) => selectedOptions[q.id] !== undefined,
   );
 
-  // const getRecommendedPlan = (answers: { [key: number]: string }) => {
-  //   return TestResult.find((plan) => plan.condition(answers))!;
-  // };
-
   return (
-    <div className="h-screen flex flex-col">
+    <div className="px-5 flex flex-col">
       <Header
         title="나에게 잘 어울리는 요금제는?"
         onBackClick={handleBackClick}
-        isTransparent={true}
       />
 
       <ProgressBar
@@ -91,17 +270,27 @@ const TestPage = () => {
 
       <div className="flex flex-col items-center justify-between flex-1 py-6">
         <div className="flex flex-col items-center gap-4 w-full">
-          <img src={moonerSrc} alt="무너" className="w-[140px]" />
+          <IconSwitcher
+            isAnswered={isAnswered}
+            shouldBounce={shouldBounce}
+            srcAnswered={moonerAhaImage}
+            srcIdle={moonerImage}
+            alt={isAnswered ? '무너 (답변 완료)' : '무너 (대기 중)'}
+            className="w-[140px]"
+          />
 
-          <div className="relative w-full px-4">
-            <p className="text-center text-gray800 text-[20px] font-semibold">
+          <div className="relative w-full flex justify-center">
+            <p className="text-center text-gray800 text-[20px] font-semibold w-[calc(100%-64px)]">
               {currentQuestion.text}
             </p>
 
             <button
               onClick={handleBack}
               disabled={currentIndex === 0 || isTransitioning}
-              className="absolute left-0 top-1/2 -translate-y-1/2"
+              className="absolute left-0 top-1/2 -translate-y-1/2 p-3 cursor-pointer
+             transition-transform duration-200 ease-in-out
+             hover:scale-130 disabled:cursor-not-allowed disabled:opacity-50"
+              style={{ willChange: 'transform' }}
             >
               <img src={back} alt="이전질문" className="w-[8px] h-[16px]" />
             </button>
@@ -111,7 +300,9 @@ const TestPage = () => {
               disabled={
                 currentIndex === questions.length - 1 || isTransitioning
               }
-              className="absolute right-0 top-1/2 -translate-y-1/2"
+              className="absolute right-0 top-1/2 -translate-y-1/2 p-3 cursor-pointer             transition-transform duration-200 ease-in-out
+             hover:scale-130 disabled:cursor-not-allowed disabled:opacity-50"
+              style={{ willChange: 'transform' }}
             >
               <img src={next} alt="다음질문" className="w-[8px] h-[16px]" />
             </button>
@@ -125,6 +316,7 @@ const TestPage = () => {
                 onClick={() => handleSelect('yes')}
                 type="yes"
                 disabled={isTransitioning}
+                animationDisabled={animationDisabled}
               />
               <SelectButton
                 label="아니다"
@@ -132,6 +324,7 @@ const TestPage = () => {
                 onClick={() => handleSelect('no')}
                 type="no"
                 disabled={isTransitioning}
+                animationDisabled={animationDisabled}
               />
             </div>
           ) : (
@@ -143,15 +336,18 @@ const TestPage = () => {
                   selected={selected === opt}
                   onClick={() => handleSelect(opt)}
                   disabled={isTransitioning}
+                  animationDisabled={animationDisabled}
                 />
               ))}
             </div>
           )}
 
           <div className="flex flex-col items-start mt-6 w-full px-4">
-            <div className="flex items-center gap-2">
+            <div className="flex items-center justify-center gap-1 text-primary-pink shimmer-text">
               <img src={tips} alt="꿀팁" className="w-[17px]" />
-              <p className="text-primary text-[12px] font-semibold">꿀팁</p>
+              <p className="text-primary text-[12px] leading-none align-middle">
+                꿀팁
+              </p>
             </div>
             <p className="text-gray500 text-[11px] font-medium leading-snug mt-2">
               <span className="text-secondary-purple-80">
@@ -160,7 +356,7 @@ const TestPage = () => {
               {currentQuestion.tip.rest}
             </p>{' '}
             {allAnswered && (
-              <div className="fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-md px-4 pb-6 z-50">
+              <div className="fade-in-up fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-[560px] px-4 pb-6 z-50">
                 <Button
                   onClick={() => {
                     const matchedRules = rules.filter((rule) =>
@@ -168,10 +364,11 @@ const TestPage = () => {
                     );
 
                     const matchedPlans = matchedRules
-                      .map((rule) =>
-                        planResults.find((p) => p.id === rule.resultId),
-                      )
-                      .filter((p): p is PlanResult => !!p);
+                      .map((rule) => {
+                        if (!rule?.resultId) return undefined;
+                        return fetchedPlans.find((p) => p.id === rule.resultId);
+                      })
+                      .filter((p): p is PlanResult => !!p); // null/undefined 제거
 
                     const sortedPlans = matchedPlans.sort(
                       (a, b) => a.priority - b.priority,
diff --git a/client/src/pages/TestResultPage.tsx b/client/src/pages/TestResultPage.tsx
index 18a4e23..155d9a5 100644
--- a/client/src/pages/TestResultPage.tsx
+++ b/client/src/pages/TestResultPage.tsx
@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useLocation } from 'react-router-dom';
 import type { PlanResult } from '@/components/types/TestResult';
-import { planResults } from '@/data/TestResult';
-
+// import { planResults } from '@/data/TestResult';
+import { getAllPlans } from '@/api/testPlan';
 import UsageBar from '@/components/testPage/UsageBar';
 import moonerFunImage from '../assets/image/mooner_fun.png';
 import Header from '@/components/common/Header';
@@ -11,6 +11,13 @@ import confetti from '../assets/image/confetti.png';
 import plus from '@/assets/icon/plus.png';
 import TestWaitingPage from './TestWaitingPage';
 
+import Confetti from 'react-confetti';
+import { useWindowSize } from 'react-use';
+import { AnimatePresence, motion } from 'framer-motion';
+import BounceIcon from '@/components/common/BounceIcon';
+import Button from '@/components/common/Button';
+import FadeInUpDiv from '@/components/common/FadeInUpDiv';
+
 // 사용자 정보 타입 정의
 interface UserProfile {
   plan: {
@@ -47,15 +54,31 @@ const TestResultPage = () => {
   const location = useLocation();
   const planId = location.state?.planId as string | undefined;
   const [plan, setPlan] = useState<PlanResult | null>(null);
+  const { width, height } = useWindowSize();
+  const [showConfetti, setShowConfetti] = useState(true);
 
   useEffect(() => {
-    if (planId) {
-      const matched = planResults.find((p) => p.id === planId);
-      if (matched) {
-        setPlan(matched);
+    const fetchPlan = async () => {
+      if (!planId || typeof planId !== 'string') return;
+
+      try {
+        const res = await getAllPlans();
+        const matched = res.planResults.find((p) => p.id === planId);
+        if (matched) setPlan(matched);
+        else console.warn('해당 ID에 맞는 요금제가 없습니다.');
+      } catch (err) {
+        console.error('요금제 조회 실패:', err);
       }
-    }
+    };
+
+    fetchPlan();
   }, [planId]);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowConfetti(false);
+    }, 1500);
+    return () => clearTimeout(timer);
+  }, []);
 
   if (!planId) {
     return <div>추천 정보가 없습니다. 테스트를 다시 시작해주세요.</div>;
@@ -117,25 +140,35 @@ const TestResultPage = () => {
   }
 
   return (
-    <div className="h-screen flex flex-col items-center text-center">
+    <>
+      <div className="absolute inset-0 bg-gradient-to-b from-[#dfe4fd] to-white z-0" />
       <Header
         title="나에게 잘 어울리는 요금제는?"
         onBackClick={handleBackClick}
-        isTransparent={true}
+        isSpecialColor={true}
       />
-
-      <div className="mt-4 text-[21.5px] font-bold text-secondary-purple-80">
-        {plan.name}
-      </div>
-
-      {plan.tagLine && (
-        <div className="mt-2 px-4 py-1 bg-gradation rounded-full text-[17px] text-white font-semibold inline-flex items-center gap-1">
-          <img src={plus} alt="더해서" className="w-[16px] h-[16px]" />
-          {plan.tagLine}
-        </div>
-      )}
-
-      <div className="relative w-full flex justify-center items-center mt-6">
+      <div className=" z-10 p-5 flex flex-1 flex-col w-full items-center text-center bg-transparent">
+        <motion.div
+          initial={{ scale: 0.7, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={{
+            duration: 1.2,
+            ease: 'easeOut',
+          }}
+        >
+          <div className="z-10 flex flex-col justify-center mt-10 gap-2">
+            <div className="z-10 text-[21.5px] font-semibold text-secondary-purple-80">
+              {plan.name}
+            </div>
+            {plan.tagLine && (
+              <div className="px-4 py-1 shimmer-text shimmer-text-slow bg-gradation rounded-full text-[17px] text-white font-semibold inline-flex items-center gap-1">
+                <img src={plus} alt="더해서" className="w-[16px] h-[16px]" />
+                {plan.tagLine}
+              </div>
+            )}
+          </div>
+        </motion.div>
+        {/* <div className="relative w-full flex justify-center items-center mt-6">
         <img
           src={confetti}
           alt="컨페티"
@@ -146,40 +179,103 @@ const TestResultPage = () => {
           alt="무너"
           className="relative z-10 w-[140px]"
         />
-      </div>
+      </div> */}
 
-      <div className="mt-6 w-full max-w-md">
-        <UsageBar label="통화" percent={plan.callUsage} />
-        <UsageBar label="메시지" percent={plan.messageUsage} />
-        <UsageBar label="데이터" percent={plan.dataUsage} />
-      </div>
+        {plan && (
+          <>
+            <AnimatePresence>
+              {showConfetti && (
+                <motion.div
+                  initial={{ opacity: 1 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 1 }}
+                  style={{
+                    position: 'absolute',
+                    width: '100%',
+                    inset: 0,
+                    maxWidth: '600px',
+                    margin: '0 auto',
+                    overflow: 'hidden',
+                    pointerEvents: 'none',
+                    zIndex: 9999,
+                  }}
+                >
+                  <Confetti
+                    width={width}
+                    height={height}
+                    numberOfPieces={1200}
+                    recycle={false}
+                    gravity={1.0}
+                    initialVelocityY={40}
+                  />
+                </motion.div>
+              )}
+            </AnimatePresence>
 
-      <ul className="text-sm text-gray500 mt-4 list-disc pl-6 w-full max-w-md text-left">
-        {plan.description.split('\n').map((line, idx) => (
-          <li key={idx}>{line}</li>
-        ))}
-      </ul>
-
-      <div className="mt-6 text-[32px] font-bold text-pink-500">
-        월 {plan.price?.toLocaleString()}원
+            <section className="relative w-full flex flex-col items-center justify-center min-h-[150px] mt-6">
+              <BounceIcon
+                src={confetti}
+                alt="컨페티"
+                className="absolute top-0 left-1/2 -translate-x-1/2 w-full z-0"
+                animationType="scaleIn"
+              />
+              <BounceIcon
+                src={moonerFunImage}
+                alt="무너"
+                className="bottom-[-30px] relative z-10 w-[140px]"
+                animationType="bounce"
+              />
+            </section>
+          </>
+        )}
+        <div className="mt-9 relative w-full">
+          <div className="mt-4">
+            <FadeInUpDiv custom={1}>
+              <UsageBar label="통화" percent={plan.callUsage} />
+            </FadeInUpDiv>
+            <FadeInUpDiv custom={2}>
+              <UsageBar label="메시지" percent={plan.messageUsage} />
+            </FadeInUpDiv>
+            <FadeInUpDiv custom={3}>
+              <UsageBar label="데이터" percent={plan.dataUsage} />
+            </FadeInUpDiv>
+          </div>
+          <FadeInUpDiv custom={4} className="mt-6">
+            <ul className="pl-5 z-10 text-sm text-gray500 list-disc max-w-[600px] text-left">
+              {plan.description.split('\n').map((line, idx) => (
+                <li className="leading-[22px] py-[2px]" key={idx}>
+                  {line}
+                </li>
+              ))}
+            </ul>
+          </FadeInUpDiv>
+          <FadeInUpDiv
+            custom={6}
+            className="z-10 mt-[10px] text-[32px] font-semibold text-primary-pink pb-[50px]"
+          >
+            월 {plan.price?.toLocaleString()}원
+          </FadeInUpDiv>
+        </div>
       </div>
-
-      <div className="fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-md px-4 pb-6 z-50 flex gap-4">
-        <button
+      <div className="fade-in-up fixed px-5 pb-6 bottom-0 w-full max-w-[600px] z-10 flex justify-center gap-[13px]">
+        <Button
+          fullWidth
+          variant="secondary"
+          size="large"
           onClick={handleChatbotClick}
-          className="w-1/2 rounded-xl bg-secondary-purple-40 text-gray600 text-sm font-semibold py-3 shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
         >
           챗봇 상담하기
-        </button>
-
-        <button
+        </Button>
+        <Button
+          fullWidth
+          size="large"
           onClick={() => window.open(plan.link, '_blank')}
-          className="w-1/2 rounded-xl bg-secondary-purple-60 text-white text-[14px] font-semibold py-3 shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
         >
           요금제 바꾸러가기
-        </button>
+        </Button>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/client/src/pages/TestWaitingPage.tsx b/client/src/pages/TestWaitingPage.tsx
index adcb1d6..29b549c 100644
--- a/client/src/pages/TestWaitingPage.tsx
+++ b/client/src/pages/TestWaitingPage.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import moonerImage from '../assets/image/mooner_hmm.png';
+import FloatingIcon from '@/components/common/FloatingIcon';
 
 const TestWaitingPage: React.FC = () => {
   const navigate = useNavigate();
@@ -17,19 +18,26 @@ const TestWaitingPage: React.FC = () => {
 
   return (
     <>
+      {/* 전체 배경 */}
       <div className="absolute inset-0 z-0 bg-gradient-to-b from-[#dfe4fd] to-white" />
-
-      <div className="relative z-10 flex flex-col items-center justify-center min-h-screen px-4">
-        <img src={moonerImage} alt="무너흠" className="w-[200px] mb-4" />
-        <p className="text-center text-gradation text-2xl font-semibold mb-8">
-          잠시만 기다려주세요.
-        </p>
-
-        <p className="text-center text-gray400 text-[13px] font-medium">
-          고객님에게 어울리는 요금제를 찾고있습니다.
-          <br></br>
-          통신 상황에 따라 최대 1분 정도의 시간이 소요될 수 있습니다.
-        </p>
+      {/* 가운데 콘텐츠 */}
+      <div className="absolute inset-0 z-10 flex items-center justify-center">
+        <div className="flex flex-col items-center justify-center gap-6">
+          <FloatingIcon
+            variant="large"
+            src={moonerImage}
+            alt="무너흠"
+            className="w-[200px]"
+          />
+          <p className="shimmer-text text-center text-gradation text-2xl font-semibold mb-8">
+            잠시만 기다려주세요.
+          </p>
+          <p className="text-center text-gray400 text-[13px] font-medium tracking-tight leading-relaxed">
+            고객님에게 어울리는 요금제를 찾고있습니다.
+            <br />
+            통신 상황에 따라 최대 1분 정도의 시간이 소요될 수 있습니다.
+          </p>
+        </div>
       </div>
     </>
   );
diff --git a/client/src/utils/chatStorage.ts b/client/src/utils/chatStorage.ts
index e4409c3..685bfac 100644
--- a/client/src/utils/chatStorage.ts
+++ b/client/src/utils/chatStorage.ts
@@ -4,6 +4,23 @@ import type {
   FunctionCall,
 } from '@/components/chatbot/BotBubbleFrame';
 
+// UserProfile 타입 정의 (ChatbotPage와 동일)
+export interface UserProfile {
+  plan: {
+    id: string;
+    name: string;
+    monthlyFee: number;
+    benefits: string[];
+  };
+  usage: {
+    call: number;
+    message: number;
+    data: number;
+  };
+  preferences: string[];
+  source: 'plan-test' | 'url-params';
+}
+
 export interface StoredMessage {
   type: 'user' | 'bot' | 'loading';
   text?: string;
@@ -22,6 +39,7 @@ export interface StoredMessage {
 export interface ChatSession {
   sessionId: string;
   messages: StoredMessage[];
+  userProfile?: UserProfile; // URL 파라미터로 온 사용자의 정보
   lastUpdated: number;
 }
 
@@ -69,7 +87,6 @@ export const saveSession = (session: ChatSession): void => {
     }
 
     localStorage.setItem(STORAGE_KEY, JSON.stringify(sessions));
-    console.log('✅ 세션 저장 완료:', session.sessionId);
   } catch (error) {
     console.error('❌ 세션 저장 실패:', error);
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c8947ce..b7220f5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,6 +41,9 @@ importers:
       react:
         specifier: ^19.1.0
         version: 19.1.0
+      react-confetti:
+        specifier: ^6.4.0
+        version: 6.4.0(react@19.1.0)
       react-dom:
         specifier: ^19.1.0
         version: 19.1.0(react@19.1.0)
@@ -56,6 +59,9 @@ importers:
       react-spring-bottom-sheet:
         specifier: 3.5.0-alpha.0
         version: 3.5.0-alpha.0(@react-three/fiber@9.1.2(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react-native@0.80.0(@babel/core@7.27.4)(@types/react@19.1.6)(react@19.1.0))(react@19.1.0)(three@0.177.0))(@types/react@19.1.6)(konva@9.3.20)(react-dom@19.1.0(react@19.1.0))(react-native@0.80.0(@babel/core@7.27.4)(@types/react@19.1.6)(react@19.1.0))(react-zdog@1.2.2)(react@19.1.0)(three@0.177.0)(zdog@1.1.3)
+      react-use:
+        specifier: ^17.6.0
+        version: 17.6.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       socket.io-client:
         specifier: ^4.8.1
         version: 4.8.1
@@ -1113,6 +1119,9 @@ packages:
   '@types/istanbul-reports@3.0.4':
     resolution: {integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==}
 
+  '@types/js-cookie@2.2.7':
+    resolution: {integrity: sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -1221,6 +1230,9 @@ packages:
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0
 
+  '@xobotyi/scrollbar-width@1.9.5':
+    resolution: {integrity: sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==}
+
   '@xstate/react@1.6.3':
     resolution: {integrity: sha512-NCUReRHPGvvCvj2yLZUTfR0qVp6+apc8G83oXSjN4rl89ZjyujiKrTff55bze/HrsvCsP/sUJASf2n0nzMF1KQ==}
     peerDependencies:
@@ -1509,6 +1521,9 @@ packages:
     resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
     engines: {node: '>=18'}
 
+  copy-to-clipboard@3.3.3:
+    resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
+
   cors@2.8.5:
     resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
     engines: {node: '>= 0.10'}
@@ -1530,9 +1545,16 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  css-in-js-utils@3.1.0:
+    resolution: {integrity: sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==}
+
   css-select@5.1.0:
     resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
 
+  css-tree@1.1.3:
+    resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
+    engines: {node: '>=8.0.0'}
+
   css-what@6.1.0:
     resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
     engines: {node: '>= 6'}
@@ -1806,6 +1828,12 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
+  fast-shallow-equal@1.0.0:
+    resolution: {integrity: sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==}
+
+  fastest-stable-stringify@2.0.2:
+    resolution: {integrity: sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==}
+
   fastq@1.19.1:
     resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
@@ -1998,6 +2026,9 @@ packages:
     resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
 
+  hyphenate-style-name@1.1.0:
+    resolution: {integrity: sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==}
+
   iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
@@ -2040,6 +2071,9 @@ packages:
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
+  inline-style-prefixer@7.0.1:
+    resolution: {integrity: sha512-lhYo5qNTQp3EvSSp3sRvXMbVQTLrvGV6DycRMJ5dm2BLMiJ30wpXKdDdgX+GmJZ5uQMucwRKHamXSst3Sj/Giw==}
+
   invariant@2.2.4:
     resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
 
@@ -2142,6 +2176,9 @@ packages:
     resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
 
+  js-cookie@2.2.1:
+    resolution: {integrity: sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -2309,6 +2346,9 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  mdn-data@2.0.14:
+    resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
+
   media-typer@1.1.0:
     resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
     engines: {node: '>= 0.8'}
@@ -2519,6 +2559,12 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  nano-css@5.6.2:
+    resolution: {integrity: sha512-+6bHaC8dSDGALM1HJjOHVXpuastdu2xFoZlC77Jh4cg+33Zcgm+Gxd+1xsnpZK14eyHObSp82+ll5y3SX75liw==}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -2741,6 +2787,12 @@ packages:
     resolution: {integrity: sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==}
     engines: {node: '>= 0.8'}
 
+  react-confetti@6.4.0:
+    resolution: {integrity: sha512-5MdGUcqxrTU26I2EU7ltkWPwxvucQTuqMm8dUz72z2YMqTD6s9vMcDUysk7n9jnC+lXuCPeJJ7Knf98VEYE9Rg==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      react: ^16.3.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
+
   react-devtools-core@6.1.2:
     resolution: {integrity: sha512-ldFwzufLletzCikNJVYaxlxMLu7swJ3T2VrGfzXlMsVhZhPDKXA38DEROidaYZVgMAmQnIjymrmqto5pyfrwPA==}
 
@@ -2830,6 +2882,12 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
 
+  react-universal-interface@0.6.2:
+    resolution: {integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==}
+    peerDependencies:
+      react: '*'
+      tslib: '*'
+
   react-use-gesture@8.0.1:
     resolution: {integrity: sha512-CXzUNkulUdgouaAlvAsC5ZVo0fi9KGSBSk81WrE4kOIcJccpANe9zZkAYr5YZZhqpicIFxitsrGVS4wmoMun9A==}
     deprecated: This package is no longer maintained. Please use @use-gesture/react instead
@@ -2845,6 +2903,12 @@ packages:
       react-dom:
         optional: true
 
+  react-use@17.6.0:
+    resolution: {integrity: sha512-OmedEScUMKFfzn1Ir8dBxiLLSOzhKe/dPZwVxcujweSj45aNM7BEGPb9BEVIgVEqEXx6f3/TsXzwIktNgUR02g==}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+
   react-zdog@1.2.2:
     resolution: {integrity: sha512-Ix7ALha91aOEwiHuxumCeYbARS5XNpc/w0v145oGkM6poF/CvhKJwzLhM5sEZbtrghMA+psAhOJkCTzJoseicA==}
 
@@ -2900,6 +2964,9 @@ packages:
     resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
     engines: {node: '>= 18'}
 
+  rtl-css-js@1.16.1:
+    resolution: {integrity: sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==}
+
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
@@ -2921,6 +2988,10 @@ packages:
   scheduler@0.26.0:
     resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
 
+  screenfull@5.2.0:
+    resolution: {integrity: sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==}
+    engines: {node: '>=0.10.0'}
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -2953,6 +3024,10 @@ packages:
   set-cookie-parser@2.7.1:
     resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==}
 
+  set-harmonic-interval@1.0.1:
+    resolution: {integrity: sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==}
+    engines: {node: '>=6.9'}
+
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
@@ -3023,6 +3098,10 @@ packages:
   source-map-support@0.5.21:
     resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
 
+  source-map@0.5.6:
+    resolution: {integrity: sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==}
+    engines: {node: '>=0.10.0'}
+
   source-map@0.5.7:
     resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
     engines: {node: '>=0.10.0'}
@@ -3037,6 +3116,9 @@ packages:
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
+  stack-generator@2.0.10:
+    resolution: {integrity: sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==}
+
   stack-utils@2.0.6:
     resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
     engines: {node: '>=10'}
@@ -3044,6 +3126,12 @@ packages:
   stackframe@1.3.4:
     resolution: {integrity: sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==}
 
+  stacktrace-gps@3.1.2:
+    resolution: {integrity: sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==}
+
+  stacktrace-js@2.0.2:
+    resolution: {integrity: sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==}
+
   stacktrace-parser@0.1.11:
     resolution: {integrity: sha512-WjlahMgHmCJpqzU8bIBy4qtsZdU9lRlcZE3Lvyej6t4tuOuv1vk57OW3MBrj6hXBFx/nNoC9MPMTcr5YA7NQbg==}
     engines: {node: '>=6'}
@@ -3076,6 +3164,9 @@ packages:
     resolution: {integrity: sha512-9eoEdUGD68XjvW/+BWo5Ir7d5+cXChcQMAuYHmgrHImz/jIfabxNj4pc+6DxVhxHnW92+ZzMVVUuxs4iTOXjsQ==}
     engines: {node: '>=6'}
 
+  stylis@4.3.6:
+    resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==}
+
   supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -3133,6 +3224,10 @@ packages:
   throat@5.0.0:
     resolution: {integrity: sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==}
 
+  throttle-debounce@3.0.1:
+    resolution: {integrity: sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==}
+    engines: {node: '>=10'}
+
   tinyglobby@0.2.14:
     resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==}
     engines: {node: '>=12.0.0'}
@@ -3144,6 +3239,9 @@ packages:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
+  toggle-selection@1.0.6:
+    resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
+
   toidentifier@1.0.1:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
@@ -3166,9 +3264,15 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
+  ts-easing@0.2.0:
+    resolution: {integrity: sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==}
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  tween-functions@1.2.0:
+    resolution: {integrity: sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -4374,6 +4478,8 @@ snapshots:
     dependencies:
       '@types/istanbul-lib-report': 3.0.3
 
+  '@types/js-cookie@2.2.7': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/node@24.0.0':
@@ -4518,6 +4624,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@xobotyi/scrollbar-width@1.9.5': {}
+
   '@xstate/react@1.6.3(@types/react@19.1.6)(react@19.1.0)(xstate@4.38.3)':
     dependencies:
       react: 19.1.0
@@ -4861,6 +4969,10 @@ snapshots:
 
   cookie@1.0.2: {}
 
+  copy-to-clipboard@3.3.3:
+    dependencies:
+      toggle-selection: 1.0.6
+
   cors@2.8.5:
     dependencies:
       object-assign: 4.1.1
@@ -4888,6 +5000,10 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  css-in-js-utils@3.1.0:
+    dependencies:
+      hyphenate-style-name: 1.1.0
+
   css-select@5.1.0:
     dependencies:
       boolbase: 1.0.0
@@ -4896,6 +5012,11 @@ snapshots:
       domutils: 3.2.2
       nth-check: 2.1.1
 
+  css-tree@1.1.3:
+    dependencies:
+      mdn-data: 2.0.14
+      source-map: 0.6.1
+
   css-what@6.1.0: {}
 
   csstype@3.1.3: {}
@@ -5216,6 +5337,10 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
+  fast-shallow-equal@1.0.0: {}
+
+  fastest-stable-stringify@2.0.2: {}
+
   fastq@1.19.1:
     dependencies:
       reusify: 1.1.0
@@ -5409,6 +5534,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  hyphenate-style-name@1.1.0: {}
+
   iconv-lite@0.6.3:
     dependencies:
       safer-buffer: 2.1.2
@@ -5444,6 +5571,10 @@ snapshots:
 
   inherits@2.0.4: {}
 
+  inline-style-prefixer@7.0.1:
+    dependencies:
+      css-in-js-utils: 3.1.0
+
   invariant@2.2.4:
     dependencies:
       loose-envify: 1.4.0
@@ -5571,6 +5702,8 @@ snapshots:
 
   jiti@2.4.2: {}
 
+  js-cookie@2.2.1: {}
+
   js-tokens@4.0.0: {}
 
   js-yaml@3.14.1:
@@ -5705,6 +5838,8 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
+  mdn-data@2.0.14: {}
+
   media-typer@1.1.0: {}
 
   memoize-one@5.2.1: {}
@@ -5983,6 +6118,19 @@ snapshots:
 
   ms@2.1.3: {}
 
+  nano-css@5.6.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+      css-tree: 1.1.3
+      csstype: 3.1.3
+      fastest-stable-stringify: 2.0.2
+      inline-style-prefixer: 7.0.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      rtl-css-js: 1.16.1
+      stacktrace-js: 2.0.2
+      stylis: 4.3.6
+
   nanoid@3.3.11: {}
 
   natural-compare@1.4.0: {}
@@ -6184,6 +6332,11 @@ snapshots:
       iconv-lite: 0.6.3
       unpipe: 1.0.0
 
+  react-confetti@6.4.0(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      tween-functions: 1.2.0
+
   react-devtools-core@6.1.2:
     dependencies:
       shell-quote: 1.8.3
@@ -6347,6 +6500,11 @@ snapshots:
       - three
       - zdog
 
+  react-universal-interface@0.6.2(react@19.1.0)(tslib@2.8.1):
+    dependencies:
+      react: 19.1.0
+      tslib: 2.8.1
+
   react-use-gesture@8.0.1(react@19.1.0):
     dependencies:
       react: 19.1.0
@@ -6357,6 +6515,25 @@ snapshots:
     optionalDependencies:
       react-dom: 19.1.0(react@19.1.0)
 
+  react-use@17.6.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      '@types/js-cookie': 2.2.7
+      '@xobotyi/scrollbar-width': 1.9.5
+      copy-to-clipboard: 3.3.3
+      fast-deep-equal: 3.1.3
+      fast-shallow-equal: 1.0.0
+      js-cookie: 2.2.1
+      nano-css: 5.6.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-universal-interface: 0.6.2(react@19.1.0)(tslib@2.8.1)
+      resize-observer-polyfill: 1.5.1
+      screenfull: 5.2.0
+      set-harmonic-interval: 1.0.1
+      throttle-debounce: 3.0.1
+      ts-easing: 0.2.0
+      tslib: 2.8.1
+
   react-zdog@1.2.2:
     dependencies:
       react: 18.3.1
@@ -6427,6 +6604,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  rtl-css-js@1.16.1:
+    dependencies:
+      '@babel/runtime': 7.27.6
+
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
@@ -6447,6 +6628,8 @@ snapshots:
 
   scheduler@0.26.0: {}
 
+  screenfull@5.2.0: {}
+
   semver@6.3.1: {}
 
   semver@7.7.2: {}
@@ -6507,6 +6690,8 @@ snapshots:
 
   set-cookie-parser@2.7.1: {}
 
+  set-harmonic-interval@1.0.1: {}
+
   setprototypeof@1.2.0: {}
 
   shebang-command@2.0.0:
@@ -6608,6 +6793,8 @@ snapshots:
       buffer-from: 1.1.2
       source-map: 0.6.1
 
+  source-map@0.5.6: {}
+
   source-map@0.5.7: {}
 
   source-map@0.6.1: {}
@@ -6618,12 +6805,27 @@ snapshots:
 
   sprintf-js@1.0.3: {}
 
+  stack-generator@2.0.10:
+    dependencies:
+      stackframe: 1.3.4
+
   stack-utils@2.0.6:
     dependencies:
       escape-string-regexp: 2.0.0
 
   stackframe@1.3.4: {}
 
+  stacktrace-gps@3.1.2:
+    dependencies:
+      source-map: 0.5.6
+      stackframe: 1.3.4
+
+  stacktrace-js@2.0.2:
+    dependencies:
+      error-stack-parser: 2.1.4
+      stack-generator: 2.0.10
+      stacktrace-gps: 3.1.2
+
   stacktrace-parser@0.1.11:
     dependencies:
       type-fest: 0.7.1
@@ -6650,6 +6852,8 @@ snapshots:
     dependencies:
       react-lib-adler32: 1.0.3
 
+  stylis@4.3.6: {}
+
   supports-color@5.5.0:
     dependencies:
       has-flag: 3.0.0
@@ -6706,6 +6910,8 @@ snapshots:
 
   throat@5.0.0: {}
 
+  throttle-debounce@3.0.1: {}
+
   tinyglobby@0.2.14:
     dependencies:
       fdir: 6.4.5(picomatch@4.0.2)
@@ -6717,6 +6923,8 @@ snapshots:
     dependencies:
       is-number: 7.0.0
 
+  toggle-selection@1.0.6: {}
+
   toidentifier@1.0.1: {}
 
   touch@3.1.1: {}
@@ -6731,8 +6939,12 @@ snapshots:
     dependencies:
       typescript: 5.8.3
 
+  ts-easing@0.2.0: {}
+
   tslib@2.8.1: {}
 
+  tween-functions@1.2.0: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
diff --git a/server/controllers/planSocketController.js b/server/controllers/planSocketController.js
index ea08801..c1a650b 100644
--- a/server/controllers/planSocketController.js
+++ b/server/controllers/planSocketController.js
@@ -1,4 +1,4 @@
-import { streamChat } from '../services/gptService.js';
+import { streamChat, streamChatWithFollowUp } from '../services/gptService.js';
 import { buildPromptMessages } from '../utils/promptBuilder.js';
 
 export const handleCarouselSelection = async (
@@ -77,7 +77,10 @@ export const handleCarouselSelection = async (
   }
 };
 
-export const handlePlanRecommend = async (socket, { sessionId, message }) => {
+export const handlePlanRecommend = async (
+  socket,
+  { sessionId, message, history },
+) => {
   try {
     // 입력 검증
     if (!sessionId || !message) {
@@ -88,12 +91,16 @@ export const handlePlanRecommend = async (socket, { sessionId, message }) => {
       });
       return;
     }
+    console.log('수신메세지', message);
+    console.log('대화히스토리', history?.length || 0, '개');
 
-    // MongoDB 세션 관리 제거 - 로컬스토리지에서 관리
-    // 기본 메시지 형태로 프롬프트 생성 (히스토리 없이)
+    // 🔧 히스토리가 있으면 사용, 없으면 기본 메시지만 사용
     const plans = '';
-    const basicMessages = [{ role: 'user', content: message }];
-
+    const basicMessages =
+      history && history.length > 0
+        ? history
+        : [{ role: 'user', content: message }];
+    console.log('프롬프트메세지', basicMessages.length, '개');
     let messages;
     try {
       messages = buildPromptMessages(plans, basicMessages);
@@ -114,14 +121,13 @@ export const handlePlanRecommend = async (socket, { sessionId, message }) => {
 
     // GPT 스트리밍 호출
     try {
-      await streamChat(
+      await streamChatWithFollowUp(
         messages,
         socket,
         (chunk) => {
           assistantReply += chunk;
         },
         (funcInfo) => {
-          functionCallInfo = funcInfo;
           console.log('🔧 Function call detected:', funcInfo);
         },
       );
@@ -129,12 +135,6 @@ export const handlePlanRecommend = async (socket, { sessionId, message }) => {
       console.error('❌ GPT streaming error:', gptError);
       return;
     }
-
-    // MongoDB 저장 제거 - 로컬스토리지에서 관리
-    console.log(
-      '✅ Message processed successfully (saved to localStorage):',
-      sessionId,
-    );
   } catch (error) {
     console.error('❌ handlePlanRecommend error:', error);
     socket.emit('error', {
@@ -148,136 +148,3 @@ export const handlePlanRecommend = async (socket, { sessionId, message }) => {
     });
   }
 };
-
-// 새로 추가: 캐러셀 선택 상태 업데이트 함수
-export const handleUpdateCarouselSelection = async (
-  socket,
-  { sessionId, messageIndex, selectedItem },
-) => {
-  try {
-    console.log('🔄 Updating carousel selection:', {
-      sessionId,
-      messageIndex,
-      selectedItem,
-    });
-
-    if (!sessionId || messageIndex === undefined) {
-      socket.emit('error', {
-        type: 'INVALID_INPUT',
-        message: 'sessionId와 messageIndex가 필요합니다.',
-        details: { sessionId, messageIndex },
-      });
-      return;
-    }
-
-    let session;
-    try {
-      session = await ChatSession.findOne({ sessionId });
-      if (!session) {
-        console.error('❌ Session not found:', sessionId);
-        return;
-      }
-    } catch (dbError) {
-      console.error('❌ Database error:', dbError);
-      socket.emit('error', {
-        type: 'DATABASE_ERROR',
-        message: '세션 데이터 처리 중 오류가 발생했습니다.',
-        details: { sessionId, error: dbError.message },
-      });
-      return;
-    }
-
-    // 해당 메시지 찾기
-    const targetMessage = session.messages[messageIndex];
-    if (!targetMessage) {
-      console.error('❌ Message not found:', {
-        messageIndex,
-        totalMessages: session.messages.length,
-      });
-      socket.emit('error', {
-        type: 'INVALID_INPUT',
-        message: '해당 인덱스의 메시지를 찾을 수 없습니다.',
-        details: { messageIndex, totalMessages: session.messages.length },
-      });
-      return;
-    }
-
-    if (targetMessage.role !== 'assistant') {
-      console.error('❌ Not an assistant message:', {
-        messageIndex,
-        role: targetMessage.role,
-      });
-      socket.emit('error', {
-        type: 'INVALID_INPUT',
-        message: 'assistant 메시지가 아닙니다.',
-        details: { messageIndex, role: targetMessage.role },
-      });
-      return;
-    }
-
-    if (targetMessage.type !== 'function_call') {
-      console.error('❌ Not a function_call message:', {
-        messageIndex,
-        type: targetMessage.type,
-      });
-      socket.emit('error', {
-        type: 'INVALID_INPUT',
-        message: 'function_call 메시지가 아닙니다.',
-        details: { messageIndex, type: targetMessage.type },
-      });
-      return;
-    }
-
-    if (
-      !targetMessage.data ||
-      targetMessage.data.name !== 'requestCarouselButtons'
-    ) {
-      console.error('❌ Not a carousel function_call:', {
-        messageIndex,
-        data: targetMessage.data,
-      });
-      socket.emit('error', {
-        type: 'INVALID_INPUT',
-        message: '캐러셀 function_call이 아닙니다.',
-        details: { messageIndex, data: targetMessage.data },
-      });
-      return;
-    }
-
-    // data 필드 업데이트 (안전하게)
-    if (!targetMessage.data) {
-      targetMessage.data = {};
-    }
-
-    targetMessage.data.selectedItem = selectedItem;
-    targetMessage.data.isSelected = true;
-    targetMessage.data.updatedAt = new Date();
-
-    try {
-      session.markModified('messages');
-      await session.save();
-      console.log('✅ Carousel selection updated successfully:', sessionId);
-
-      // 클라이언트에 업데이트 완료 알림
-      socket.emit('carousel-selection-updated', {
-        messageIndex,
-        selectedItem,
-        isSelected: true,
-      });
-    } catch (saveError) {
-      console.error('❌ Carousel selection update error:', saveError);
-      socket.emit('error', {
-        type: 'SESSION_SAVE_ERROR',
-        message: '선택 상태 업데이트 중 오류가 발생했습니다.',
-        details: { sessionId, error: saveError.message },
-      });
-    }
-  } catch (error) {
-    console.error('❌ handleUpdateCarouselSelection error:', error);
-    socket.emit('error', {
-      type: 'CONTROLLER_ERROR',
-      message: '선택 상태 업데이트 중 예상치 못한 오류가 발생했습니다.',
-      details: { sessionId, error: error.message },
-    });
-  }
-};
diff --git a/server/services/gptErrorHandler.js b/server/services/gptErrorHandler.js
new file mode 100644
index 0000000..d056342
--- /dev/null
+++ b/server/services/gptErrorHandler.js
@@ -0,0 +1,82 @@
+import { ErrorType } from '../utils/constants.js';
+
+/**
+ * GPT 서비스 에러를 분류하고 클라이언트에게 적절한 에러 메시지를 전송합니다.
+ * @param {Error} error - 발생한 에러 객체
+ * @param {Socket} socket - 소켓 객체
+ */
+export const handleGPTError = (error, socket) => {
+  console.error('❌ GPT Service Error:', error);
+
+  // 타임아웃 에러
+  if (error.message === 'REQUEST_TIMEOUT') {
+    socket.emit('error', {
+      type: ErrorType.REQUEST_TIMEOUT,
+      message: '⏱️ 응답 시간이 초과되었습니다. 다시 시도해주세요.',
+      details: {
+        timeout: '30초',
+        message: error.message,
+      },
+    });
+  }
+  // OpenAI API 관련 에러
+  else if (error.response) {
+    socket.emit('error', {
+      type: ErrorType.OPENAI_API_ERROR,
+      message: 'AI 서비스 연결에 문제가 발생했습니다.',
+      details: {
+        status: error.response.status,
+        statusText: error.response.statusText,
+        message: error.message,
+      },
+    });
+  }
+  // 네트워크 에러
+  else if (error.code === 'ENOTFOUND' || error.code === 'ECONNREFUSED') {
+    socket.emit('error', {
+      type: ErrorType.NETWORK_ERROR,
+      message: '네트워크 연결에 문제가 발생했습니다.',
+      details: {
+        code: error.code,
+        message: error.message,
+      },
+    });
+  }
+  // 스트리밍 에러
+  else if (error.name === 'AbortError') {
+    socket.emit('error', {
+      type: ErrorType.STREAM_ABORTED,
+      message: '스트리밍이 중단되었습니다.',
+      details: {
+        message: error.message,
+      },
+    });
+  }
+  // 기타 에러
+  else {
+    socket.emit('error', {
+      type: ErrorType.UNKNOWN_ERROR,
+      message: '예상치 못한 오류가 발생했습니다.',
+      details: {
+        message: error.message,
+        stack: error.stack,
+      },
+    });
+  }
+};
+
+/**
+ * 함수 호출 관련 에러를 처리합니다.
+ * @param {string} type - 에러 타입
+ * @param {string} message - 에러 메시지
+ * @param {Object} details - 에러 상세 정보
+ * @param {Socket} socket - 소켓 객체
+ */
+export const handleFunctionError = (type, message, details, socket) => {
+  socket.emit('loading-end');
+  socket.emit('error', {
+    type,
+    message,
+    details,
+  });
+};
diff --git a/server/services/gptFuncCallTest.js b/server/services/gptFuncCallTest.js
deleted file mode 100644
index 84f7407..0000000
--- a/server/services/gptFuncCallTest.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import dotenv from 'dotenv';
-import { OpenAI } from 'openai';
-import { InputRoleEnum } from '../utils/constants.js';
-import { BASE_PLAN_TOOL_DEF } from '../utils/gptTools.js';
-import {
-  getAffordablePlans,
-  getOTTBundlePlans,
-  getPlans,
-  getUnlimitedDataPlans,
-} from './gptFuncDefinitions.js';
-
-dotenv.config();
-
-const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
-
-const tools = [
-  {
-    ...BASE_PLAN_TOOL_DEF,
-    name: 'getPlans',
-    description: '요금제 전체 목록을 반환합니다.',
-  },
-  {
-    ...BASE_PLAN_TOOL_DEF,
-    name: 'getAffordablePlans',
-    description: '월정액이 5만원 이하인 저렴한 요금제 목록을 반환합니다.',
-  },
-  {
-    ...BASE_PLAN_TOOL_DEF,
-    name: 'getUnlimitedDataPlans',
-    description: '데이터가 무제한인 요금제 목록을 반환합니다.',
-  },
-  {
-    ...BASE_PLAN_TOOL_DEF,
-    name: 'getOTTBundlePlans',
-    description: 'OTT 서비스가 결합된 요금제 목록을 반환합니다.',
-  },
-];
-
-export const getDataByName = async (name) => {
-  switch (name) {
-    case 'getPlans':
-      return await getPlans();
-    case 'getAffordablePlans':
-      return await getAffordablePlans();
-    case 'getUnlimitedDataPlans':
-      return await getUnlimitedDataPlans();
-    case 'getOTTBundlePlans':
-      return await getOTTBundlePlans();
-  }
-};
-
-export const emitRecommendReasonByGuide = async (input, socket) => {
-  while (true) {
-    const stream = await openai.responses.create({
-      model: 'gpt-4.1',
-      input,
-      tools,
-      temperature: 0.3,
-      max_output_tokens: 400,
-      top_p: 1.0,
-      stream: true,
-    });
-    let isFunctionCalling = false;
-
-    for await (const event of stream) {
-      // function calling으로 데이터 불러오기
-      if (
-        event.type === 'response.output_item.added' &&
-        event.item.type === 'function_call'
-      ) {
-        isFunctionCalling = true;
-
-        const toolCall = event.item;
-        console.log('call function:', toolCall.name);
-        input.push(toolCall);
-
-        const data = await getDataByName(toolCall.name);
-        input.push({
-          type: 'function_call_output',
-          call_id: toolCall.call_id,
-          output: JSON.stringify(data),
-        });
-
-        input.push({
-          role: InputRoleEnum.USER,
-          content: '참고: 데이터에서 -1은 무제한을 의미함',
-        });
-      }
-
-      // 대화 내용 저장
-      if (event.item_id && event.item_id.startsWith('msg')) {
-        socket.emit('recommend-plan-by-guide', event);
-
-        if (event.type === 'response.output_text.done') {
-          input.push({
-            role: InputRoleEnum.ASSISTANT,
-            content: event.text,
-          });
-        }
-      }
-    }
-
-    if (isFunctionCalling) continue;
-    return input;
-  }
-};
-
-export const getPlanIds = async (input) => {
-  const res = await openai.responses.create({
-    model: 'gpt-4.1-nano',
-    input,
-    temperature: 0.3,
-    max_output_tokens: 200,
-    top_p: 1.0,
-  });
-  const endIndex = res.output_text.length - 1;
-
-  return res.output_text.slice(1, endIndex).split(', ');
-};
diff --git a/server/services/gptFuncDefinitions.js b/server/services/gptFuncDefinitions.js
index 33eafe6..52c4e6a 100644
--- a/server/services/gptFuncDefinitions.js
+++ b/server/services/gptFuncDefinitions.js
@@ -159,3 +159,185 @@ export const getPlanResultsByIds = async (planIds) => {
     throw error;
   }
 };
+
+/** 조건에 맞는 요금제 검색 (최대 3개) */
+export const searchPlansFromDB = async (searchConditions) => {
+  try {
+    const {
+      category,
+      maxMonthlyFee,
+      minMonthlyFee, // 🔧 최소 월 요금 추가
+      minDataGb,
+      ageGroup,
+      isPopular,
+      preferredAddons, // 🔧 선호하는 부가서비스 추가 (예: ["MEDIA", "OTT", "MUSIC"])
+      limit = 3,
+    } = searchConditions;
+
+    console.log('🔍 요금제 검색 조건:', searchConditions);
+
+    // 동적 쿼리 조건 생성
+    const query = {};
+
+    // 카테고리 조건
+    if (category) {
+      query.category = category;
+    }
+
+    // 월 요금 조건 (범위 검색)
+    if (maxMonthlyFee || minMonthlyFee) {
+      const monthlyFeeCondition = {};
+      if (minMonthlyFee) {
+        monthlyFeeCondition.$gte = minMonthlyFee;
+      }
+      if (maxMonthlyFee) {
+        monthlyFeeCondition.$lte = maxMonthlyFee;
+      }
+      query.monthlyFee = monthlyFeeCondition;
+    }
+
+    // 최소 데이터량 조건
+    if (minDataGb !== undefined) {
+      if (minDataGb === -1) {
+        // 무제한 데이터 요청
+        query.dataGb = -1;
+      } else {
+        // 특정 데이터량 이상 요청
+        query.$or = [
+          { dataGb: -1 }, // 무제한도 포함
+          { dataGb: { $gte: minDataGb } }, // 지정된 데이터량 이상
+        ];
+      }
+    }
+
+    // 연령대 조건
+    if (ageGroup) {
+      query.ageGroup = ageGroup;
+    }
+
+    // 인기 요금제 조건
+    if (isPopular !== undefined) {
+      query.isPopular = isPopular;
+    }
+
+    // 🔧 부가서비스 조건 추가
+    if (preferredAddons && preferredAddons.length > 0) {
+      // 부가서비스 키워드를 포함하는 요금제 필터링
+      const addonConditions = [];
+
+      preferredAddons.forEach((addon) => {
+        switch (addon.toUpperCase()) {
+          case 'NETFLIX':
+          case 'NETFLEX':
+            addonConditions.push({
+              $or: [
+                { mediaAddons: { $regex: '넷플릭스', $options: 'i' } },
+                { premiumAddons: { $regex: '넷플릭스', $options: 'i' } },
+              ],
+            });
+            break;
+          case 'DISNEY':
+          case 'DISNEY+':
+            addonConditions.push({
+              $or: [
+                { mediaAddons: { $regex: '디즈니', $options: 'i' } },
+                { premiumAddons: { $regex: '디즈니', $options: 'i' } },
+              ],
+            });
+            break;
+          case 'TVING':
+          case '티빙':
+            addonConditions.push({
+              $or: [
+                { mediaAddons: { $regex: '티빙', $options: 'i' } },
+                { premiumAddons: { $regex: '티빙', $options: 'i' } },
+              ],
+            });
+            break;
+          case 'MUSIC':
+          case '음악':
+            addonConditions.push({
+              $or: [
+                { mediaAddons: { $regex: '바이브|지니뮤직', $options: 'i' } },
+                { premiumAddons: { $regex: '바이브|지니뮤직', $options: 'i' } },
+              ],
+            });
+            break;
+          case 'YOUTUBE':
+          case '유튜브':
+            addonConditions.push({
+              $or: [
+                { mediaAddons: { $regex: '유튜브', $options: 'i' } },
+                { premiumAddons: { $regex: '유튜브', $options: 'i' } },
+              ],
+            });
+            break;
+          case 'BOOK':
+          case '책':
+          case '독서':
+            addonConditions.push({
+              $or: [
+                { mediaAddons: { $regex: '밀리의 서재', $options: 'i' } },
+                { premiumAddons: { $regex: '밀리의 서재', $options: 'i' } },
+              ],
+            });
+            break;
+          case 'KIDS':
+          case '아이':
+          case '어린이':
+            addonConditions.push({
+              $or: [
+                { mediaAddons: { $regex: '아이들나라', $options: 'i' } },
+                {
+                  premiumAddons: { $regex: '아이들나라|돌봄이', $options: 'i' },
+                },
+              ],
+            });
+            break;
+          case 'UPLAY':
+          case '유플레이':
+            addonConditions.push({
+              $or: [
+                { mediaAddons: { $regex: '유플레이', $options: 'i' } },
+                { premiumAddons: { $regex: '유플레이', $options: 'i' } },
+              ],
+            });
+            break;
+          case 'MEDIA':
+          case '미디어':
+            addonConditions.push({ mediaAddons: { $ne: null, $ne: '' } });
+            break;
+          case 'PREMIUM':
+          case '프리미엄':
+            addonConditions.push({ premiumAddons: { $ne: null, $ne: '' } });
+            break;
+        }
+      });
+
+      if (addonConditions.length > 0) {
+        // 부가서비스 조건들을 AND로 연결 (모든 조건을 만족하는 요금제)
+        query.$and = query.$and
+          ? [...query.$and, ...addonConditions]
+          : addonConditions;
+      }
+    }
+
+    console.log('📋 생성된 MongoDB 쿼리:', JSON.stringify(query, null, 2));
+
+    // 쿼리 실행
+    const plans = await Plan.find(query)
+      .select(EXCLUDED_FIELDS)
+      .sort({
+        isPopular: -1, // 인기 요금제 우선
+        monthlyFee: 1, // 가격 낮은 순
+      })
+      .limit(limit);
+
+    console.log(`✅ 검색 결과: ${plans.length}개 요금제 찾음`);
+
+    return { plans: plans };
+  } catch (error) {
+    console.error('searchPlansFromDB >>', error);
+    throw error;
+  }
+};
diff --git a/server/services/gptFunctionHandler.js b/server/services/gptFunctionHandler.js
new file mode 100644
index 0000000..ba2a71c
--- /dev/null
+++ b/server/services/gptFunctionHandler.js
@@ -0,0 +1,255 @@
+import { extractMetadata } from '../utils/metadataExtractor.js';
+import { handleFunctionError } from './gptErrorHandler.js';
+import { searchPlansFromDB } from './gptFuncDefinitions.js';
+import {
+  ErrorType,
+  SocketEvent,
+  OTTServices,
+  OXOptions,
+  LoadingType,
+} from '../utils/constants.js';
+
+/**
+ * 함수 인자를 JavaScript 객체나 JSON으로 파싱합니다.
+ * @param {string} functionArgsRaw - 원시 함수 인자 문자열
+ * @returns {Object} 파싱된 인자 객체
+ */
+const parseFunctionArgs = (functionArgsRaw) => {
+  if (!functionArgsRaw) return {};
+
+  try {
+    // JavaScript 객체 형식을 JSON으로 변환
+    let fixedJson = functionArgsRaw
+      // 1. 키에 따옴표 추가 (단어로 시작하는 키들만)
+      .replace(/([{,]\s*)([a-zA-Z_$][a-zA-Z0-9_$]*)\s*:/g, '$1"$2":')
+      // 2. 작은따옴표를 큰따옴표로 변환
+      .replace(/'/g, '"')
+      // 3. 숫자 뒤의 불필요한 소수점 제거 (-1.0 → -1)
+      .replace(/(-?\d+)\.0(?=[,\s\]\}])/g, '$1')
+      // 4. 줄바꿈과 연속된 공백 정리
+      .replace(/\n\s*/g, ' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    console.log(
+      '🔄 변환 시도 (처음 200자):',
+      fixedJson.substring(0, 200) + '...',
+    );
+
+    return JSON.parse(fixedJson);
+  } catch (secondParseError) {
+    // eval 방식으로 재시도
+    try {
+      console.warn('🔄 eval 방식으로 재시도...');
+      return eval(`(${functionArgsRaw})`);
+    } catch (evalError) {
+      console.error('❌ 최종 JSON 파싱 실패:', secondParseError);
+      console.error('❌ eval 방식도 실패:', evalError);
+      console.log('🔍 원본:', functionArgsRaw);
+      console.log('🔍 변환 시도:', fixedJson);
+      throw new Error('Function arguments 파싱에 실패했습니다.');
+    }
+  }
+};
+
+/**
+ * 각 함수별 처리 로직을 실행합니다.
+ * @param {string} functionName - 호출할 함수 이름
+ * @param {Object} args - 함수 인자
+ * @param {Socket} socket - 소켓 객체
+ * @returns {Object} 함수 실행 결과
+ */
+export const executeFunctionCall = async (functionName, args, socket) => {
+  switch (functionName) {
+    case 'requestOTTServiceList': {
+      socket.emit(SocketEvent.LOADING_END);
+      socket.emit(SocketEvent.OTT_SERVICE_LIST, {
+        question: '어떤 OTT 서비스를 함께 사용 중이신가요?',
+        options: OTTServices,
+      });
+      return { success: true, functionName, result: 'OTT 서비스 선택지 제공' };
+    }
+
+    case 'requestOXCarouselButtons': {
+      socket.emit(SocketEvent.LOADING_END);
+      socket.emit(SocketEvent.OX_CAROUSEL_BUTTONS, {
+        options: OXOptions,
+      });
+      break;
+    }
+
+    case 'requestCarouselButtons': {
+      const { items } = args;
+      if (!items) {
+        handleFunctionError(
+          ErrorType.MISSING_FUNCTION_ARGS,
+          'requestCarouselButtons에 필요한 items가 없습니다.',
+          { functionName, args },
+          socket,
+        );
+        return;
+      }
+      socket.emit(SocketEvent.LOADING_END);
+      socket.emit(SocketEvent.CAROUSEL_BUTTONS, items);
+      break;
+    }
+
+    case 'searchPlans': {
+      console.log('🔍 searchPlans 함수 호출됨:', args);
+
+      socket.emit(SocketEvent.LOADING, {
+        type: functionName?.includes('Plan')
+          ? LoadingType.DB_CALLING
+          : LoadingType.SEARCHING,
+        functionName: functionName,
+      });
+      try {
+        // MongoDB에서 조건에 맞는 요금제 검색
+        const result = await searchPlansFromDB(args);
+        const { plans } = result;
+
+        console.log(`📋 검색된 요금제 수: ${plans.length}개`);
+
+        if (plans.length === 0) {
+          console.warn('⚠️ 조건에 맞는 요금제가 없습니다.');
+          // 검색 결과가 없어도 빈 배열을 전송
+          socket.emit(SocketEvent.LOADING_END);
+          socket.emit(SocketEvent.PLAN_LISTS, []);
+          return {
+            success: true,
+            functionName,
+            result: 'empty',
+            plansCount: 0,
+          };
+        } else {
+          // 검색된 요금제를 클라이언트에 전송
+          socket.emit(SocketEvent.LOADING_END);
+          socket.emit(SocketEvent.PLAN_LISTS, plans);
+          return {
+            success: true,
+            functionName,
+            result: 'found',
+            plansCount: plans.length,
+            planNames: plans.map((p) => p.name),
+          };
+        }
+      } catch (dbError) {
+        console.error('❌ DB 조회 실패:', dbError);
+        // 에러 발생 시에도 로딩 종료
+        socket.emit(SocketEvent.LOADING_END);
+        handleFunctionError(
+          ErrorType.FUNCTION_EXECUTION_ERROR,
+          '요금제 검색 중 오류가 발생했습니다.',
+          { functionName, args, error: dbError.message },
+          socket,
+        );
+        return { success: false, functionName, error: dbError.message };
+      }
+      break;
+    }
+
+    case 'showPlanLists': {
+      const { plans } = args;
+      if (!plans) {
+        handleFunctionError(
+          ErrorType.MISSING_FUNCTION_ARGS,
+          'showPlanLists에 필요한 plans가 없습니다.',
+          { functionName, args },
+          socket,
+        );
+        return;
+      }
+      socket.emit(SocketEvent.LOADING_END);
+      socket.emit(SocketEvent.PLAN_LISTS, plans);
+      break;
+    }
+
+    case 'requestTextCard': {
+      const { title, description, url, buttonText, imageUrl } = args;
+      if (!title || !description || !url || !buttonText) {
+        handleFunctionError(
+          ErrorType.MISSING_FUNCTION_ARGS,
+          'requestTextCard에 필요한 title, description, url, buttonText가 없습니다.',
+          { functionName, args },
+          socket,
+        );
+        return;
+      }
+
+      // imageUrl이 없으면 URL에서 메타데이터 추출
+      let finalImageUrl = await extractMetadata(url);
+      console.log('📸 추출된 이미지 URL:', finalImageUrl);
+
+      socket.emit(SocketEvent.LOADING_END);
+      socket.emit(SocketEvent.TEXT_CARD, {
+        title,
+        description,
+        url,
+        buttonText,
+        imageUrl: finalImageUrl,
+      });
+      break;
+    }
+
+    case 'showFirstCardList': {
+      socket.emit(SocketEvent.LOADING_END);
+      socket.emit(SocketEvent.FIRST_CARD_LIST);
+      break;
+    }
+
+    default:
+      handleFunctionError(
+        ErrorType.UNKNOWN_FUNCTION,
+        `알 수 없는 function: ${functionName}`,
+        { functionName, args },
+        socket,
+      );
+      return { success: false, functionName, error: 'Unknown function' };
+  }
+};
+
+/**
+ * 함수 호출을 처리합니다.
+ * @param {string} functionName - 함수 이름
+ * @param {string} functionArgsRaw - 원시 함수 인자
+ * @param {Socket} socket - 소켓 객체
+ */
+export const handleFunctionCall = async (
+  functionName,
+  functionArgsRaw,
+  socket,
+) => {
+  try {
+    const args = parseFunctionArgs(functionArgsRaw);
+
+    const result = await executeFunctionCall(functionName, args, socket);
+    return result;
+  } catch (functionError) {
+    console.error(`Function call 처리 실패 (${functionName}):`, functionError);
+
+    if (functionError.message === 'Function arguments 파싱에 실패했습니다.') {
+      handleFunctionError(
+        ErrorType.FUNCTION_ARGS_PARSE_ERROR,
+        'Function arguments 파싱에 실패했습니다.',
+        {
+          functionName,
+          rawArgs: functionArgsRaw,
+          parseError: functionError.message,
+        },
+        socket,
+      );
+    } else {
+      handleFunctionError(
+        ErrorType.FUNCTION_EXECUTION_ERROR,
+        '기능 처리 중 오류가 발생했습니다.',
+        {
+          functionName,
+          args: functionArgsRaw,
+          error: functionError.message,
+        },
+        socket,
+      );
+      return { success: false, functionName, error: functionError.message };
+    }
+  }
+};
diff --git a/server/services/gptService.js b/server/services/gptService.js
index 1c2c23c..ae9b331 100644
--- a/server/services/gptService.js
+++ b/server/services/gptService.js
@@ -1,747 +1,382 @@
 import dotenv from 'dotenv';
 import OpenAI from 'openai';
-import axios from 'axios';
-import * as cheerio from 'cheerio';
+import { GPTConfig, SocketEvent, LoadingType } from '../utils/constants.js';
+import { handleFunctionCall } from './gptFunctionHandler.js';
+import { handleGPTError } from './gptErrorHandler.js';
+import { GPT_TOOLS } from './gptToolDefinitions.js';
 
 dotenv.config();
 
 export const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
 
-// 메타데이터 추출 함수
-const extractMetadata = async (url) => {
-  try {
-    const response = await axios.get(url, {
-      timeout: 10000,
-      headers: {
-        'User-Agent':
-          'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
-      },
-      maxRedirects: 5,
-    });
-
-    const html = response.data;
-    const $ = cheerio.load(html);
-
-    const getMetaContent = (selector) => {
-      const element = $(selector);
-      return element.attr('content') || element.text() || null;
-    };
-
-    let imageUrl =
-      getMetaContent('meta[property="og:image"]') ||
-      getMetaContent('meta[name="twitter:image"]') ||
-      null;
-
-    // 상대 URL을 절대 URL로 변환
-    if (imageUrl && !imageUrl.startsWith('http')) {
-      const validUrl = new URL(url);
-      if (imageUrl.startsWith('//')) {
-        imageUrl = validUrl.protocol + imageUrl;
-      } else if (imageUrl.startsWith('/')) {
-        imageUrl = validUrl.origin + imageUrl;
-      } else {
-        imageUrl = validUrl.origin + '/' + imageUrl;
-      }
-    }
-
-    return imageUrl;
-  } catch (error) {
-    console.warn('메타데이터 추출 실패:', error.message);
-    return null;
-  }
-};
-
+// 역질문 전용 도구들 (캐러셀, OX, OTT 버튼만)
+const FOLLOWUP_TOOLS = GPT_TOOLS.filter((tool) =>
+  [
+    'requestCarouselButtons',
+    'requestOXCarouselButtons',
+    'requestOTTServiceList',
+  ].includes(tool.name),
+);
+let usedTotalTokens = 0;
+
+/**
+ * GPT 스트림 채팅을 처리합니다.
+ * @param {Array} messages - 채팅 메시지 배열
+ * @param {Socket} socket - 소켓 객체
+ * @param {Function} onDelta - 델타 콜백 함수
+ * @param {string} model - 사용할 GPT 모델 (기본값: GPTConfig.MODEL)
+ * @returns {Promise<{ hasFunctionCalls: boolean, functionResults: Array }>}
+ */
 export const streamChat = async (
   messages,
   socket,
   onDelta,
-  onFunctionCall = null,
+  model = GPTConfig.MODEL,
 ) => {
   try {
-    // 타임아웃 설정 (30초)
-    const timeoutMs = 30000;
-    const timeoutPromise = new Promise((_, reject) => {
-      setTimeout(() => reject(new Error('REQUEST_TIMEOUT')), timeoutMs);
-    });
-
-    const streamPromise = openai.chat.completions.create({
-      model: 'gpt-4.1',
-      messages,
+    const stream = await openai.responses.create({
+      model: model,
+      input: messages,
       stream: true,
-      tools: [
-        {
-          type: 'function',
-          function: {
-            name: 'requestOTTServiceList',
-            description:
-              '유저에게 통신사와 연결된 OTT 서비스 목록을 선택하도록 응답 받습니다.',
-            parameters: { type: 'object', properties: {} },
-          },
-        },
-        {
-          type: 'function',
-          function: {
-            name: 'requestOXCarouselButtons',
-            description:
-              '유저에게 예/아니오로만 대답할 수 있는 선택지를 캐러셀 형태로 제공합니다.',
-            parameters: { type: 'object', properties: {} },
-          },
-        },
-        {
-          type: 'function',
-          function: {
-            name: 'requestCarouselButtons',
-            description:
-              '유저에게 짧은 키워드나 명사형 선택지를 가로 스크롤 캐러셀 형태로 제공합니다. 통신사명, 요금대, 데이터량, 기술(5G/LTE) 등 단순한 카테고리 선택에 사용합니다.',
-            parameters: {
-              type: 'object',
-              properties: {
-                items: {
-                  type: 'array',
-                  description: '캐러셀 버튼으로 보여줄 항목 리스트',
-                  items: {
-                    type: 'object',
-                    properties: {
-                      id: {
-                        type: 'string',
-                        description: '항목 고유 ID 또는 태그',
-                      },
-                      label: {
-                        type: 'string',
-                        description: '버튼에 보여질 텍스트',
-                      },
-                    },
-                    required: ['id', 'label'],
-                  },
-                },
-              },
-              required: ['items'],
-            },
-          },
-        },
-        {
-          type: 'function',
-          function: {
-            name: 'showPlanLists',
-            description:
-              '유저에게 여러 요금제 상세 정보를 카드 형식으로 제공합니다. 보통 3개 이상의 요금제를 추천할 때 사용합니다.',
-            parameters: {
-              type: 'object',
-              properties: {
-                plans: {
-                  type: 'array',
-                  description: '추천할 요금제 목록',
-                  items: {
-                    type: 'object',
-                    properties: {
-                      _id: { type: 'string', description: '요금제 고유 ID' },
-                      category: {
-                        type: 'string',
-                        description: '요금제 카테고리 (5G, LTE 등)',
-                      },
-                      name: { type: 'string', description: '요금제 이름' },
-                      description: {
-                        type: 'string',
-                        description: '요금제 설명',
-                      },
-                      isPopular: {
-                        type: 'boolean',
-                        description: '인기 요금제 여부',
-                      },
-                      dataGb: {
-                        type: 'number',
-                        description: '기본 데이터 제공량 (-1은 무제한)',
-                      },
-                      sharedDataGb: {
-                        type: 'number',
-                        description: '공유/테더링 데이터 (GB)',
-                      },
-                      voiceMinutes: {
-                        type: 'number',
-                        description: '음성통화 시간 (-1은 무제한)',
-                      },
-                      addonVoiceMinutes: {
-                        type: 'number',
-                        description: '추가 음성통화 시간',
-                      },
-                      smsCount: {
-                        type: 'number',
-                        description: 'SMS 개수 (-1은 무제한)',
-                      },
-                      monthlyFee: { type: 'number', description: '월 요금' },
-                      optionalDiscountAmount: {
-                        type: 'number',
-                        description: '최대 할인 가능 금액',
-                      },
-                      ageGroup: {
-                        type: 'string',
-                        description: '대상 연령대 (ALL, YOUTH 등)',
-                      },
-                      detailUrl: {
-                        type: 'string',
-                        description: '자세히 보기 링크 URL',
-                      },
-                      bundleBenefit: {
-                        type: ['string', 'null'],
-                        description: '결합 할인 정보',
-                      },
-                      mediaAddons: {
-                        type: ['string', 'null'],
-                        description: '미디어 부가서비스',
-                      },
-                      premiumAddons: {
-                        type: ['string', 'null'],
-                        description: '프리미엄 부가서비스',
-                      },
-                      basicService: {
-                        type: 'string',
-                        description: '기본 제공 서비스',
-                      },
-                    },
-                    required: [
-                      '_id',
-                      'category',
-                      'name',
-                      'description',
-                      'isPopular',
-                      'dataGb',
-                      'sharedDataGb',
-                      'voiceMinutes',
-                      'addonVoiceMinutes',
-                      'smsCount',
-                      'monthlyFee',
-                      'optionalDiscountAmount',
-                      'ageGroup',
-                      'detailUrl',
-                      'basicService',
-                    ],
-                  },
-                },
-              },
-              required: ['plans'],
-            },
-          },
-        },
-        {
-          type: 'function',
-          function: {
-            name: 'requestTextCard',
-            description:
-              '유저에게 특정 웹사이트나 링크로 안내할 때 사용합니다. URL의 미리보기 이미지와 함께 카드 형태로 보여줍니다. 유플러스 사이트나 추천하는 외부 링크를 안내할 때 사용합니다.',
-            parameters: {
-              type: 'object',
-              properties: {
-                title: {
-                  type: 'string',
-                  description: '카드에 표시될 제목',
-                },
-                description: {
-                  type: 'string',
-                  description: '카드에 표시될 설명 텍스트',
-                },
-                url: {
-                  type: 'string',
-                  description: '안내할 링크 URL',
-                },
-                buttonText: {
-                  type: 'string',
-                  description:
-                    '버튼에 표시될 텍스트 (예: "자세히 보기", "사이트 방문하기")',
-                },
-                imageUrl: {
-                  type: 'string',
-                  description: '카드에 표시될 이미지 URL (선택사항)',
-                },
-              },
-              required: ['title', 'description', 'url', 'buttonText'],
-            },
-          },
-        },
-      ],
+      tool_choice: 'auto',
+      tools: GPT_TOOLS,
+      parallel_tool_calls: false,
     });
 
-    const streamRes = await Promise.race([streamPromise, timeoutPromise]);
-
-    let isFunctionCalled = false;
-    let functionName = '';
-    let functionArgsRaw = '';
-    let accumulatedContent = ''; // 텍스트 누적용
-
-    for await (const chunk of streamRes) {
-      const delta = chunk.choices[0].delta;
+    // 함수 호출 정보 누적용
+    const functionCallMap = {}; // { [item_id]: { ... } }
+    const functionCalls = []; // 최종 실행용 배열
 
-      // tool_calls 감지 (새로운 API 형식)
-      if (delta.tool_calls && delta.tool_calls.length > 0) {
-        // console.log('🛠️ Tool calls detected:', delta.tool_calls);
+    for await (const event of stream) {
+      // 1. 함수 호출 item 추가
+      if (
+        event.type === 'response.output_item.added' &&
+        event.item.type === 'function_call'
+      ) {
+        functionCallMap[event.item.id] = {
+          ...event.item,
+          arguments: '',
+        };
+
+        // 함수명에 따라 DB 호출/검색 타입 구분해서 로딩 emit
+        const functionName = event.item.name;
+        socket.emit(SocketEvent.LOADING, {
+          type: functionName?.includes('Plan')
+            ? LoadingType.DB_CALLING
+            : LoadingType.SEARCHING,
+          functionName: functionName,
+        });
+        console.log('🔄 로딩 시작:', functionName);
+      }
 
-        // 처음 tool_calls 감지 시 로딩 시작
-        if (!isFunctionCalled) {
-          isFunctionCalled = true;
+      // 2. arguments 조각 누적
+      else if (event.type === 'response.function_call_arguments.delta') {
+        const id = event.item_id;
+        if (functionCallMap[id]) {
+          functionCallMap[id].arguments += event.delta;
+        }
+      }
 
-          // Function calling 시작 - 로딩 상태 emit
-          const toolCall = delta.tool_calls[0];
-          const detectedFunctionName = toolCall.function?.name || 'unknown';
-          socket.emit('loading', {
-            type: detectedFunctionName.includes('Plan')
-              ? 'dbcalling'
-              : 'searching',
-            functionName: detectedFunctionName,
+      // 3. arguments 누적 완료(함수 호출 하나 완성)
+      else if (event.type === 'response.function_call_arguments.done') {
+        const id = event.item_id;
+        const call = functionCallMap[id];
+        if (call) {
+          functionCalls.push({
+            functionName: call.name,
+            functionArgsRaw: call.arguments,
           });
-          console.log('🔄 로딩 시작:', detectedFunctionName);
         }
+      }
 
-        const toolCall = delta.tool_calls[0];
+      // 4. 일반 텍스트 스트림 (output_text 등)
+      else if (event.type === 'response.output_text.delta') {
+        socket.emit(SocketEvent.STREAM, event.delta);
+        if (onDelta) onDelta(event.delta);
+      } else if (event.type === 'response.completed') {
+        usedTotalTokens += event.response.usage.total_tokens;
+        if (onDelta) onDelta(event.delta);
+      }
+    }
 
-        if (toolCall.function?.name) {
-          functionName = toolCall.function.name;
-          // console.log('🎯 Function name detected:', functionName);
-        }
+    // 모든 함수 호출 실행
+    console.log(functionCalls);
+    const functionResults = [];
+    for (const { functionName, functionArgsRaw } of functionCalls) {
+      const result = await handleFunctionCall(
+        functionName,
+        functionArgsRaw,
+        socket,
+      );
+
+      // 함수 실행 정보 추가
+      functionResults.push({
+        role: 'assistant',
+        content: `${functionName} 함수를 호출했습니다. 인자: ${functionArgsRaw}`,
+      });
 
-        if (toolCall.function?.arguments) {
-          functionArgsRaw += toolCall.function.arguments;
-          // console.log('📝 Adding args chunk:', toolCall.function.arguments);
+      // searchPlans 함수의 경우 검색 결과 상세 정보 추가
+      console.log('여기야', functionName, result);
+      if (functionName === 'searchPlans' && result) {
+        if (result.result === 'empty') {
+          functionResults.push({
+            role: 'function',
+            name: functionName,
+            content: `검색 결과: 빈 배열 (조건에 맞는 요금제 없음)`,
+          });
+        } else if (result.result === 'found') {
+          functionResults.push({
+            role: 'function',
+            name: functionName,
+            content: `검색 결과: ${result.plansCount}개 요금제 발견 (${result.planNames?.join(', ')})`,
+          });
         }
-        continue;
+      } else {
+        functionResults.push({
+          role: 'user',
+          content: `${functionName} 함수가 성공적으로 실행되었습니다.`,
+        });
       }
-      // console.log('🔍 delta:', delta);
+    }
 
-      // delta 구조 상세 확인
-      if (delta.tool_calls) {
-        console.log('✅ tool_calls 존재:', delta.tool_calls);
-      }
-      if (delta.function_call) {
-        console.log('✅ function_call 존재:', delta.function_call);
-      }
+    socket.emit(SocketEvent.DONE);
 
-      // 일반 메시지 content
-      const content = delta?.content;
-      if (content) {
-        accumulatedContent += content;
+    return {
+      hasFunctionCalls: functionCalls.length > 0,
+      functionResults: functionResults,
+    };
+  } catch (error) {
+    handleGPTError(error, socket);
+    return { hasFunctionCalls: false, functionResults: [] };
+  }
+};
 
-        // 텍스트에서 function call 패턴 감지 (더 엄격한 패턴)
-        const functionCallMatch = accumulatedContent.match(
-          /functions?\.(\w+)\s*\(\s*\{([\s\S]*?)\}\s*\)\s*$/,
+/**
+ * 멀티턴 채팅 (function calling → 역질문 생성)
+ */
+export const streamChatWithFollowUp = async (messages, socket, onDelta) => {
+  try {
+    // 1단계: 기존 streamChat 사용하여 function call 여부 확인
+    const { hasFunctionCalls, functionResults } = await streamChat(
+      messages,
+      socket,
+      onDelta,
+    );
+
+    // 2단계: 특정 함수 호출 시에만 역질문 생성
+    if (hasFunctionCalls) {
+      // 역질문 대상 함수들
+      const followUpTargetFunctions = ['requestTextCard', 'searchPlans'];
+      console.log(functionResults);
+      // 실행된 함수들 중 역질문 대상이 있는지 확인
+      const executedFunctionNames = functionResults
+        .filter((result) => result.role === 'assistant')
+        .map((result) => {
+          const match = result.content.match(/^(\w+) 함수를 호출했습니다/);
+          return match ? match[1] : null;
+        })
+        .filter(Boolean);
+
+      const shouldGenerateFollowUp = executedFunctionNames.some((funcName) =>
+        followUpTargetFunctions.includes(funcName),
+      );
+
+      if (shouldGenerateFollowUp) {
+        console.log(
+          '🔄 Target functions detected, generating follow-up question',
         );
+        console.log('📝 Executed functions:', executedFunctionNames);
+        // 역질문 생성을 위한 새로운 턴
+        await generateFollowUpQuestion(messages, functionResults, socket);
+      } else {
+        console.log('⏭️ No target functions, skipping follow-up question');
+        console.log('📝 Executed functions:', executedFunctionNames);
+      }
+    }
 
-        if (functionCallMatch) {
-          console.log(
-            '🔍 Text-based function call detected:',
-            functionCallMatch[0],
-          );
+    console.log('🔄 Used total tokens:', usedTotalTokens);
+  } catch (error) {
+    handleGPTError(error, socket);
+  }
+};
 
-          // function call 부분을 제거한 텍스트만 전송
-          const cleanContent = accumulatedContent
-            .replace(/functions?\.(\w+)\s*\(\s*\{[\s\S]*?}\s*\)\s*$/, '')
-            .trim();
+/**
+ * 역질문 생성 (별도 턴)
+ */
+const generateFollowUpQuestion = async (
+  originalMessages,
+  functionResults,
+  socket,
+) => {
+  // 역질문 전용 메시지 구성 (기존 시스템 프롬프트 제외)
+  const userMessages = originalMessages.filter((msg) => msg.role !== 'system');
+
+  // 실행된 함수들 정보 추출
+  const executedFunctions = functionResults
+    .filter((result) => result.role === 'assistant')
+    .map((result) => result.content)
+    .join('\n');
+
+  // requestTextCard가 이미 실행되었는지 확인
+  const hasTextCardExecuted = functionResults.some(
+    (result) =>
+      result.role === 'assistant' && result.content.includes('requestTextCard'),
+  );
+
+  const followUpMessages = [
+    {
+      role: 'system',
+      content: `너는 요금제 추천 후 고객에게 추가 혜택을 안내하는 상담사야.
+
+**ImageCard(requestTextCard) 실행 확인:**
+${
+  hasTextCardExecuted
+    ? `- 이미 링크 정보가 제공되었으므로, 추가 부가서비스 링크는 보내지 않아야 함
+- 대신 "추천드린 요금제들을 참고해서 본인에게 맞는 요금제를 선택해보세요! 😊 추가 궁금한 점이 있으시면 언제든 말씀해주세요!" 같은 자연스러운 마무리 멘트로 대화를 정리해줘
+- 새로운 함수 호출은 하지 말고, 일반적인 텍스트 응답으로만 마무리하기`
+    : `- 아직 링크 정보가 제공되지 않았으므로, 아래 패턴에 따라 추가 혜택 질문을 진행해도 됨`
+}
+
+**검색 결과 확인 우선:**
+- 방금 searchPlans 함수가 빈 배열([])을 반환했다면, 조건에 맞는 요금제가 없다는 뜻이야
+- 이 경우 "조건에 맞는 요금제를 찾지 못했어요. 😅 다른 옵션을 확인해보시는 것은 어떨까요?"라고 안내하고 다음 중 하나를 제안해줘:
+
+**검색 결과 없음 시 대안 제시:**
+1. "예산을 조금 더 늘려서 찾아볼까요?" → requestCarouselButtons로 더 높은 가격대 옵션 제공
+2. "다른 통신 기술(5G/LTE)도 함께 살펴보시겠어요?" → requestOXCarouselButtons 호출  
+3. "대신 인기 요금제들을 추천해드릴까요?" → requestCarouselButtons로 ["인기 요금제 보기", "조건 다시 설정", "상담원 연결"] 제공
+4. "조건을 다시 설정해서 찾아보시겠어요?" → requestCarouselButtons로 새로운 선택지 제공
+
+**검색 결과가 있는 경우에만 아래 추가 혜택 질문:**
+이미 요금제를 보여줬으니, 요금제 설명은 다시 하지 말고 추가 혜택 질문만 해줘:
+
+**중요: 질문 텍스트를 먼저 출력하고 그 다음에 함수 호출**
+
+**질문 예시들:**
+1. "혹시 가족 구성원 중 만 18세 이하의 청소년 자녀가 있으신가요? 있으시다면 추가 결합 혜택도 안내드릴게요!" 
+   → 이 질문 텍스트를 먼저 출력한 후 requestOXCarouselButtons 호출
+   
+2. "혹시 사용 중인 인터넷이 있으신가요? LG U+에서 500Mbps 이상 인터넷을 사용 중이시면 추가 할인을 받을 수 있어요!" 
+   → 이 질문 텍스트를 먼저 출력한 후 requestOXCarouselButtons 호출
+   
+3. "평소 한 달에 데이터를 얼마나 사용하시나요? 더 정확한 요금제를 추천드릴게요!" 
+   → 이 질문 텍스트를 먼저 출력한 후 requestCarouselButtons 호출
+   
+4. "평소 자주 시청하시는 OTT 서비스가 있으신가요? 요금제와 함께 이용하시면 더 저렴해질 수 있어요!" 
+   → 이 질문 텍스트를 먼저 출력한 후 requestOTTServiceList 호출
+
+**절대 규칙:**
+- 요금제 정보는 절대 다시 설명하지 마
+- **매우 중요**: 반드시 질문 텍스트를 먼저 출력하고 그 다음에 함수 호출해야 함
+- 텍스트 없이 바로 함수만 호출하는 것은 절대 금지
+- "답변해주세요", "알려주세요" 같은 추가 멘트 금지
+- 검색 결과가 없으면 검색 결과 없음 대안 제시가 우선, 결과가 있으면 추가 혜택 질문
+
+**올바른 응답 형식:**
+1. 먼저 텍스트로 질문을 출력 (예: "혹시 가족 구성원 중 만 18세 이하의 청소년 자녀가 있으신가요?")
+2. 그 다음에 함수 호출 (예: requestOXCarouselButtons)
+
+**잘못된 예시 (금지):**
+- 텍스트 없이 바로 requestCarouselButtons 호출 
+- 텍스트 없이 바로 requestOXCarouselButtons 호출 
+- 텍스트 없이 바로 requestOTTServiceList 호출 `,
+    },
+    ...userMessages,
+    {
+      role: 'assistant',
+      content: '요금제를 확인해보세요.',
+    },
+    {
+      role: 'system',
+      content: `방금 실행된 함수들:
+${executedFunctions}
+
+🚨 중요: 무조건 아래 순서대로 해야 함:
+1. 먼저 텍스트로 질문 출력 (예: "혹시 가족분들과 함께 가입하시면 더 저렴해질 수 있는데, 관심 있으신가요?")
+2. 그 다음에 함수 호출 (예: requestOXCarouselButtons)
+
+텍스트 없이 바로 함수만 호출하는 것은 절대 금지. 반드시 텍스트 먼저 출력하고 함수 호출.`,
+    },
+  ];
+
+  // 역질문 전용 streamChat 호출 (FOLLOWUP_TOOLS 사용)
+  await streamChatForFollowUp(followUpMessages, socket, GPTConfig.MODEL_MINI);
+};
 
-          // 스트리밍 종료 신호 먼저 전송
-          socket.emit('done');
+/**
+ * 역질문 전용 스트림 채팅 (제한된 도구만 사용)
+ */
+const streamChatForFollowUp = async (messages, socket, model) => {
+  try {
+    const stream = await openai.responses.create({
+      model: model,
+      input: messages,
+      stream: true,
+      tool_choice: 'auto',
+      tools: FOLLOWUP_TOOLS, // 역질문 전용 도구만 사용
+    });
 
-          // function call 실행
-          isFunctionCalled = true;
-          functionName = functionCallMatch[1];
+    // 함수 호출 정보 누적용
+    const functionCallMap = {}; // { [item_id]: { ... } }
+    const functionCalls = []; // 최종 실행용 배열
+    let hasTextContent = false; // 텍스트 응답이 있는지 확인
+    usedTotalTokens = 0;
+    for await (const event of stream) {
+      // 1. 함수 호출 item 추가
+      if (
+        event.type === 'response.output_item.added' &&
+        event.item.type === 'function_call'
+      ) {
+        functionCallMap[event.item.id] = {
+          ...event.item,
+          arguments: '',
+        };
+
+        const functionName = event.item.name;
+        socket.emit(SocketEvent.LOADING, {
+          type: LoadingType.SEARCHING,
+          functionName: functionName,
+        });
+      }
 
-          // 텍스트 기반 function call 감지 시 로딩 시작
-          socket.emit('loading', {
-            type: functionName.includes('Plan') ? 'dbcalling' : 'searching',
-            functionName: functionName,
-          });
-          console.log('🔄 텍스트 기반 로딩 시작:', functionName);
-
-          try {
-            functionArgsRaw = `{${functionCallMatch[2]}}`;
-          } catch (e) {
-            console.error('❌ Failed to parse function args from text:', e);
-          }
-
-          break; // 스트리밍 종료
-        } else {
-          // function call이 시작되는 패턴 감지 (전송 중단)
-          if (
-            accumulatedContent.includes('functions.') ||
-            accumulatedContent.includes('function.')
-          ) {
-            // function call이 완성되기를 기다리므로 전송하지 않음
-            // console.log(
-            //   '🔍 Function call 시작 감지, 스트리밍 중단:',
-            //   accumulatedContent.substring(
-            //     accumulatedContent.lastIndexOf('function'),
-            //   ),
-            // );
-          } else {
-            // "functions" 또는 "function" 단어만 있는 경우 체크
-            if (
-              accumulatedContent.includes(' functions') ||
-              accumulatedContent.includes(' function') ||
-              accumulatedContent.endsWith('functions') ||
-              accumulatedContent.endsWith('function')
-            ) {
-              // 다음 청크를 기다려서 완전한 function call인지 확인
-              console.log('🔍 Function 키워드 감지, 다음 청크 대기 중...');
-            } else {
-              // 정상 텍스트 전송
-              socket.emit('stream', content);
-              onDelta?.(content);
-            }
-          }
+      // 2. arguments 조각 누적
+      else if (event.type === 'response.function_call_arguments.delta') {
+        const id = event.item_id;
+        if (functionCallMap[id]) {
+          functionCallMap[id].arguments += event.delta;
         }
       }
-    }
 
-    if (isFunctionCalled) {
-      try {
-        console.log('🔧 Function called:', functionName);
-        console.log('📄 Raw arguments:', functionArgsRaw);
-
-        // 로딩 시작은 이미 tool_calls 감지 시 처리됨 (제거)
-
-        let args = {};
-        if (functionArgsRaw) {
-          try {
-            // JavaScript 객체 형식을 JSON으로 변환 (더 정교한 변환)
-            let fixedJson = functionArgsRaw
-              // 1. 키에 따옴표 추가 (단어로 시작하는 키들만)
-              .replace(/([{,]\s*)([a-zA-Z_$][a-zA-Z0-9_$]*)\s*:/g, '$1"$2":')
-              // 2. 작은따옴표를 큰따옴표로 변환
-              .replace(/'/g, '"')
-              // 3. 숫자 뒤의 불필요한 소수점 제거 (-1.0 → -1)
-              .replace(/(-?\d+)\.0(?=[,\s\]\}])/g, '$1')
-              // 4. 줄바꿈과 연속된 공백 정리
-              .replace(/\n\s*/g, ' ')
-              .replace(/\s+/g, ' ')
-              .trim();
-
-            console.log(
-              '🔄 변환 시도 (처음 200자):',
-              fixedJson.substring(0, 200) + '...',
-            );
-            args = JSON.parse(fixedJson);
-            console.log('✅ JavaScript 객체 → JSON 변환 성공');
-          } catch (secondParseError) {
-            // 더 강력한 방법: eval 사용 (보안상 주의 필요하지만 서버에서만 사용)
-            try {
-              console.warn('🔄 eval 방식으로 재시도...');
-              args = eval(`(${functionArgsRaw})`);
-              console.log('✅ eval 방식으로 변환 성공');
-            } catch (evalError) {
-              console.error('❌ 최종 JSON 파싱 실패:', secondParseError);
-              console.error('❌ eval 방식도 실패:', evalError);
-              console.log('🔍 원본:', functionArgsRaw);
-              console.log('🔍 변환 시도:', fixedJson);
-
-              // 로딩 종료
-              socket.emit('loading-end');
-
-              // JSON 파싱 실패 에러를 클라이언트에게 전송
-              socket.emit('error', {
-                type: 'FUNCTION_ARGS_PARSE_ERROR',
-                message: 'Function arguments 파싱에 실패했습니다.',
-                details: {
-                  functionName,
-                  rawArgs: functionArgsRaw,
-                  parseError: secondParseError.message,
-                },
-              });
-              return;
-            }
-          }
+      // 3. arguments 누적 완료(함수 호출 하나 완성)
+      else if (event.type === 'response.function_call_arguments.done') {
+        const id = event.item_id;
+        const call = functionCallMap[id];
+        if (call) {
+          functionCalls.push({
+            functionName: call.name,
+            functionArgsRaw: call.arguments,
+          });
         }
+      }
 
-        switch (functionName) {
-          case 'requestOTTServiceList': {
-            // 새로 추가: function call 정보 수집
-            const functionCallInfo = {
-              name: functionName,
-              args: args || {},
-            };
-
-            // onFunctionCall 콜백이 있으면 호출 (안전하게)
-            if (onFunctionCall && typeof onFunctionCall === 'function') {
-              try {
-                onFunctionCall(functionCallInfo);
-              } catch (callbackError) {
-                console.error('❌ onFunctionCall error:', callbackError);
-              }
-            }
-
-            socket.emit('loading-end');
-            socket.emit('ott-service-list', {
-              question: '어떤 OTT 서비스를 함께 사용 중이신가요?',
-              options: ['넷플릭스', '디즈니+', '티빙', '왓챠'],
-            });
-            break;
-          }
-
-          case 'requestOXCarouselButtons': {
-            // 새로 추가: function call 정보 수집
-            const functionCallInfo = {
-              name: functionName,
-              args: args || {},
-            };
-
-            // onFunctionCall 콜백이 있으면 호출 (안전하게)
-            if (onFunctionCall && typeof onFunctionCall === 'function') {
-              try {
-                onFunctionCall(functionCallInfo);
-              } catch (callbackError) {
-                console.error('❌ onFunctionCall error:', callbackError);
-              }
-            }
-
-            socket.emit('loading-end');
-            socket.emit('ox-carousel-buttons', {
-              options: ['예', '아니오'],
-            });
-            break;
-          }
-
-          case 'requestCarouselButtons': {
-            const { items } = args;
-            if (!items) {
-              socket.emit('loading-end');
-              socket.emit('error', {
-                type: 'MISSING_FUNCTION_ARGS',
-                message: 'requestCarouselButtons에 필요한 items가 없습니다.',
-                details: { functionName, args },
-              });
-              return;
-            }
-
-            // 새로 추가: function call 정보 수집
-            const functionCallInfo = {
-              name: functionName,
-              args: { items },
-            };
-
-            // onFunctionCall 콜백이 있으면 호출 (안전하게)
-            if (onFunctionCall && typeof onFunctionCall === 'function') {
-              try {
-                onFunctionCall(functionCallInfo);
-              } catch (callbackError) {
-                console.error('❌ onFunctionCall error:', callbackError);
-              }
-            }
-
-            socket.emit('loading-end');
-            socket.emit('carousel-buttons', items);
-            break;
-          }
-
-          case 'showPlanLists': {
-            const { plans } = args;
-            if (!plans) {
-              socket.emit('loading-end');
-              socket.emit('error', {
-                type: 'MISSING_FUNCTION_ARGS',
-                message: 'showPlanLists에 필요한 plans가 없습니다.',
-                details: { functionName, args },
-              });
-              return;
-            }
-
-            // 새로 추가: function call 정보 수집
-            const functionCallInfo = {
-              name: functionName,
-              args: { plans },
-            };
-
-            // onFunctionCall 콜백이 있으면 호출 (안전하게)
-            if (onFunctionCall && typeof onFunctionCall === 'function') {
-              try {
-                onFunctionCall(functionCallInfo);
-              } catch (callbackError) {
-                console.error('❌ onFunctionCall error:', callbackError);
-              }
-            }
-
-            socket.emit('loading-end');
-            socket.emit('plan-lists', plans);
-            break;
-          }
-
-          case 'requestTextCard': {
-            const { title, description, url, buttonText, imageUrl } = args;
-            if (!title || !description || !url || !buttonText) {
-              socket.emit('loading-end');
-              socket.emit('error', {
-                type: 'MISSING_FUNCTION_ARGS',
-                message:
-                  'requestTextCard에 필요한 title, description, url, buttonText가 없습니다.',
-                details: { functionName, args },
-              });
-              return;
-            }
-
-            // 새로 추가: function call 정보 수집
-            const functionCallInfo = {
-              name: functionName,
-              args: { title, description, url, buttonText, imageUrl },
-            };
-
-            // onFunctionCall 콜백이 있으면 호출 (안전하게)
-            if (onFunctionCall && typeof onFunctionCall === 'function') {
-              try {
-                onFunctionCall(functionCallInfo);
-              } catch (callbackError) {
-                console.error('❌ onFunctionCall error:', callbackError);
-              }
-            }
-
-            socket.emit('loading-end');
-
-            // imageUrl이 없으면 URL에서 메타데이터 추출
-            let finalImageUrl = imageUrl;
-            if (!finalImageUrl) {
-              console.log('🔍 URL에서 메타데이터 추출 중:', url);
-              finalImageUrl = await extractMetadata(url);
-              console.log('📸 추출된 이미지 URL:', finalImageUrl);
-            }
-
-            socket.emit('text-card', {
-              title,
-              description,
-              url,
-              buttonText,
-              imageUrl: finalImageUrl,
-            });
-            break;
-          }
-
-          case 'showFirstCardList': {
-            // 새로 추가: function call 정보 수집
-            const functionCallInfo = {
-              name: functionName,
-              args: args || {},
-            };
-
-            // onFunctionCall 콜백이 있으면 호출 (안전하게)
-            if (onFunctionCall && typeof onFunctionCall === 'function') {
-              try {
-                onFunctionCall(functionCallInfo);
-              } catch (callbackError) {
-                console.error('❌ onFunctionCall error:', callbackError);
-              }
-            }
-
-            socket.emit('loading-end');
-            socket.emit('first-card-list');
-            break;
-          }
-
-          default:
-            socket.emit('loading-end');
-            socket.emit('error', {
-              type: 'UNKNOWN_FUNCTION',
-              message: `알 수 없는 function: ${functionName}`,
-              details: { functionName, args },
-            });
-        }
-      } catch (functionError) {
-        console.error(
-          `Function call 처리 실패 (${functionName}):`,
-          functionError,
-        );
-        socket.emit('loading-end');
-        socket.emit('error', {
-          type: 'FUNCTION_EXECUTION_ERROR',
-          message: '기능 처리 중 오류가 발생했습니다.',
-          details: {
-            functionName,
-            args,
-            error: functionError.message,
-          },
-        });
+      // 4. 일반 텍스트 스트림 (output_text 등) - 역질문 전용 스트림 사용
+      else if (event.type === 'response.output_text.delta') {
+        hasTextContent = true;
+        socket.emit(SocketEvent.FOLLOWUP_STREAM, event.delta);
+      } else if (event.type === 'response.completed') {
+        usedTotalTokens += event.response.usage.total_tokens;
       }
     }
 
-    // function call이 처리되지 않은 경우에만 done 신호 전송
-    if (!isFunctionCalled) {
-      // function call 시작 패턴이 있지만 완성되지 않은 경우 처리
-      if (
-        accumulatedContent.includes('functions.') ||
-        accumulatedContent.includes('function.') ||
-        accumulatedContent.includes(' functions') ||
-        accumulatedContent.includes(' function') ||
-        accumulatedContent.endsWith('functions') ||
-        accumulatedContent.endsWith('function')
-      ) {
-        console.warn(
-          '⚠️ 불완전한 function call 감지:',
-          accumulatedContent.substring(
-            Math.max(0, accumulatedContent.lastIndexOf('function') - 20),
-          ),
-        );
+    // 역질문 함수 호출 실행
+    console.log('Has text content:', hasTextContent);
 
-        // 불완전한 function call 부분 제거 후 전송
-        const cleanedContent = accumulatedContent
-          .replace(/\s*functions?\s*$/, '')
-          .replace(/\s*function\s*$/, '')
-          .trim();
-
-        if (cleanedContent) {
-          socket.emit('stream', cleanedContent);
-        }
-      }
-
-      socket.emit('done');
+    for (const { functionName, functionArgsRaw } of functionCalls) {
+      await handleFunctionCall(functionName, functionArgsRaw, socket);
     }
+
+    socket.emit(SocketEvent.DONE);
   } catch (error) {
-    console.error('❌ GPT Service Error:', error);
-
-    // 타임아웃 에러
-    if (error.message === 'REQUEST_TIMEOUT') {
-      socket.emit('error', {
-        type: 'REQUEST_TIMEOUT',
-        message: '⏱️ 응답 시간이 초과되었습니다. 다시 시도해주세요.',
-        details: {
-          timeout: '30초',
-          message: error.message,
-        },
-      });
-    }
-    // OpenAI API 관련 에러
-    else if (error.response) {
-      socket.emit('error', {
-        type: 'OPENAI_API_ERROR',
-        message: 'AI 서비스 연결에 문제가 발생했습니다.',
-        details: {
-          status: error.response.status,
-          statusText: error.response.statusText,
-          message: error.message,
-        },
-      });
-    }
-    // 네트워크 에러
-    else if (error.code === 'ENOTFOUND' || error.code === 'ECONNREFUSED') {
-      socket.emit('error', {
-        type: 'NETWORK_ERROR',
-        message: '네트워크 연결에 문제가 발생했습니다.',
-        details: {
-          code: error.code,
-          message: error.message,
-        },
-      });
-    }
-    // 스트리밍 에러
-    else if (error.name === 'AbortError') {
-      socket.emit('error', {
-        type: 'STREAM_ABORTED',
-        message: '스트리밍이 중단되었습니다.',
-        details: {
-          message: error.message,
-        },
-      });
-    }
-    // 기타 에러
-    else {
-      socket.emit('error', {
-        type: 'UNKNOWN_ERROR',
-        message: '예상치 못한 오류가 발생했습니다.',
-        details: {
-          message: error.message,
-          stack: error.stack,
-        },
-      });
-    }
+    handleGPTError(error, socket);
   }
 };
diff --git a/server/services/gptToolDefinitions.js b/server/services/gptToolDefinitions.js
new file mode 100644
index 0000000..f2c9f2d
--- /dev/null
+++ b/server/services/gptToolDefinitions.js
@@ -0,0 +1,249 @@
+export const GPT_TOOLS = [
+  {
+    type: 'function',
+    name: 'requestOTTServiceList',
+    description:
+      '유저에게 통신사와 연결된 OTT 서비스 목록을 선택하도록 응답 받습니다.',
+    parameters: {
+      type: 'object',
+      properties: {},
+      required: [],
+      additionalProperties: false,
+    },
+  },
+  {
+    type: 'function',
+    name: 'requestOXCarouselButtons',
+    description:
+      '유저에게 예/아니오로만 대답할 수 있는 선택지를 캐러셀 형태로 제공합니다.',
+    parameters: {
+      type: 'object',
+      properties: {},
+      required: [],
+      additionalProperties: false,
+    },
+  },
+  {
+    type: 'function',
+    name: 'requestCarouselButtons',
+    description:
+      '유저에게 짧은 키워드나 명사형 선택지를 가로 스크롤 캐러셀 형태로 제공합니다. 통신사명, 요금대, 데이터량, 기술(5G/LTE) 등 단순한 카테고리 선택에 사용합니다.',
+    parameters: {
+      type: 'object',
+      properties: {
+        items: {
+          type: 'array',
+          description: '캐러셀 버튼으로 보여줄 항목 리스트',
+          items: {
+            type: 'object',
+            properties: {
+              id: { type: 'string', description: '항목 고유 ID 또는 태그' },
+              label: { type: 'string', description: '버튼에 보여질 텍스트' },
+            },
+            required: ['id', 'label'],
+            additionalProperties: false,
+          },
+        },
+      },
+      required: ['items'],
+      additionalProperties: false,
+    },
+  },
+  {
+    type: 'function',
+    name: 'searchPlans',
+    description:
+      'MongoDB에서 조건에 맞는 요금제를 조회하여 최대 3개까지 추천합니다. 사용자 요구사항에 맞는 요금제를 동적으로 검색할 때 사용합니다.',
+    parameters: {
+      type: 'object',
+      properties: {
+        category: {
+          type: 'string',
+          description: '요금제 카테고리 (5G, LTE)',
+          enum: ['5G', 'LTE'],
+        },
+        maxMonthlyFee: {
+          type: 'number',
+          description: '최대 월 요금 (원)',
+        },
+        minMonthlyFee: {
+          type: 'number',
+          description: '최소 월 요금 (원)',
+        },
+        minDataGb: {
+          type: 'number',
+          description: '최소 데이터량 (GB, -1은 무제한)',
+        },
+        ageGroup: {
+          type: 'string',
+          description: '대상 연령대',
+          enum: ['ALL', 'YOUTH', 'SENIOR', 'STUDENT', 'SOLDIER'],
+        },
+        isPopular: {
+          type: 'boolean',
+          description: '인기 요금제만 조회할지 여부',
+        },
+        preferredAddons: {
+          type: 'array',
+          description:
+            '선호하는 부가서비스 키워드 (예: ["NETFLIX", "DISNEY", "TVING", "MUSIC", "YOUTUBE", "BOOK", "KIDS", "UPLAY"])',
+          items: {
+            type: 'string',
+            enum: [
+              'NETFLIX',
+              'DISNEY',
+              'DISNEY+',
+              'TVING',
+              '티빙',
+              'MUSIC',
+              '음악',
+              'YOUTUBE',
+              '유튜브',
+              'BOOK',
+              '책',
+              '독서',
+              'KIDS',
+              '아이',
+              '어린이',
+              'UPLAY',
+              '유플레이',
+              'MEDIA',
+              '미디어',
+              'PREMIUM',
+              '프리미엄',
+            ],
+          },
+        },
+        limit: {
+          type: 'number',
+          description: '조회할 최대 개수 (기본값: 3)',
+          default: 3,
+        },
+      },
+      required: [],
+      additionalProperties: false,
+    },
+  },
+  {
+    type: 'function',
+    name: 'showPlanLists',
+    description:
+      '유저에게 여러 요금제 상세 정보를 카드 형식으로 제공합니다. 보통 3개 이상의 요금제를 추천할 때 사용합니다.',
+    parameters: {
+      type: 'object',
+      properties: {
+        plans: {
+          type: 'array',
+          description: '추천할 요금제 목록',
+          items: {
+            type: 'object',
+            properties: {
+              _id: { type: 'string', description: '요금제 고유 ID' },
+              category: {
+                type: 'string',
+                description: '요금제 카테고리 (5G, LTE 등)',
+              },
+              name: { type: 'string', description: '요금제 이름' },
+              description: { type: 'string', description: '요금제 설명' },
+              isPopular: { type: 'boolean', description: '인기 요금제 여부' },
+              dataGb: {
+                type: 'number',
+                description: '기본 데이터 제공량 (-1은 무제한)',
+              },
+              sharedDataGb: {
+                type: 'number',
+                description: '공유/테더링 데이터 (GB)',
+              },
+              voiceMinutes: {
+                type: 'number',
+                description: '음성통화 시간 (-1은 무제한)',
+              },
+              addonVoiceMinutes: {
+                type: 'number',
+                description: '추가 음성통화 시간',
+              },
+              smsCount: {
+                type: 'number',
+                description: 'SMS 개수 (-1은 무제한)',
+              },
+              monthlyFee: { type: 'number', description: '월 요금' },
+              optionalDiscountAmount: {
+                type: 'number',
+                description: '최대 할인 가능 금액',
+              },
+              ageGroup: {
+                type: 'string',
+                description: '대상 연령대 (ALL, YOUTH 등)',
+              },
+              detailUrl: {
+                type: 'string',
+                description: '자세히 보기 링크 URL',
+              },
+              bundleBenefit: {
+                type: ['string', 'null'],
+                description: '결합 할인 정보',
+              },
+              mediaAddons: {
+                type: ['string', 'null'],
+                description: '미디어 부가서비스',
+              },
+              premiumAddons: {
+                type: ['string', 'null'],
+                description: '프리미엄 부가서비스',
+              },
+              basicService: { type: 'string', description: '기본 제공 서비스' },
+            },
+            required: [
+              '_id',
+              'category',
+              'name',
+              'description',
+              'isPopular',
+              'dataGb',
+              'sharedDataGb',
+              'voiceMinutes',
+              'addonVoiceMinutes',
+              'smsCount',
+              'monthlyFee',
+              'optionalDiscountAmount',
+              'ageGroup',
+              'detailUrl',
+              'basicService',
+            ],
+            additionalProperties: false,
+          },
+        },
+      },
+      required: ['plans'],
+      additionalProperties: false,
+    },
+  },
+  {
+    type: 'function',
+    name: 'requestTextCard',
+    description:
+      '유저에게 특정 웹사이트나 링크로 안내할 때 사용합니다. URL의 미리보기 이미지와 함께 카드 형태로 보여줍니다. 유플러스 사이트나 추천하는 외부 링크를 안내할 때 사용합니다.',
+    parameters: {
+      type: 'object',
+      properties: {
+        title: { type: 'string', description: '카드에 표시될 제목' },
+        description: {
+          type: 'string',
+          description: '카드에 표시될 설명 텍스트',
+        },
+        url: { type: 'string', description: '안내할 링크 URL' },
+        buttonText: {
+          type: 'string',
+          description:
+            '버튼에 표시될 텍스트 (예: "자세히 보기", "사이트 방문하기")',
+        },
+        imageUrl: {
+          type: 'string',
+          description: '카드에 표시될 이미지 URL (선택사항)',
+        },
+      },
+      required: ['title', 'description', 'url', 'buttonText'],
+      additionalProperties: false,
+    },
+  },
+];
diff --git a/server/socket/socket.js b/server/socket/socket.js
index ac8fd35..f7833bc 100644
--- a/server/socket/socket.js
+++ b/server/socket/socket.js
@@ -1,10 +1,7 @@
 import { Server } from 'socket.io';
 import { v4 as uuidv4 } from 'uuid';
 import { handlePlanRecommend } from '../controllers/planSocketController.js';
-import {
-  emitRecommendReasonByGuide,
-  getPlanIds,
-} from '../services/gptFuncCallTest.js';
+import { ChatSession } from '../models/ChatSession.js';
 import { conditionByPlanGuide, InputRoleEnum } from '../utils/constants.js';
 
 export const setupSocket = (server) => {
@@ -25,23 +22,10 @@ export const setupSocket = (server) => {
     });
 
     // 기본 대화
-    socket.on('recommend-plan', (userInput) => {
+    socket.on('chat', (userInput) => {
       handlePlanRecommend(socket, userInput);
     });
 
-    // 제거: 로컬스토리지로 마이그레이션으로 인해 MongoDB 저장 불필요
-    // socket.on('carousel-selection', (selectionData) => {
-    //   handleCarouselSelection(socket, selectionData);
-    // });
-
-    // socket.on('update-carousel-selection', (updateData) => {
-    //   handleUpdateCarouselSelection(socket, updateData);
-    // });
-
-    // socket.on('update-ott-selection', (updateData) => {
-    //   handleUpdateOttSelection(socket, updateData);
-    // });
-
     /** 가이드 별 적절한 요금제를 추천 */
     socket.on('recommend-plan-by-guide', async (message) => {
       console.log('recommend-plan-by-guide >>', message);
diff --git a/server/utils/constants.js b/server/utils/constants.js
index 913446e..bedeece 100644
--- a/server/utils/constants.js
+++ b/server/utils/constants.js
@@ -66,3 +66,47 @@ export const InputRoleEnum = {
   SYSTEM: 'system',
   ASSISTANT: 'assistant',
 };
+
+export const GPTConfig = {
+  MODEL: 'gpt-4.1-mini',
+  MODEL_MINI: 'gpt-4o-mini',
+  TIMEOUT_MS: 30000,
+  MAX_REDIRECTS: 5,
+  REQUEST_TIMEOUT: 10000,
+};
+
+export const LoadingType = {
+  SEARCHING: 'searching',
+  DB_CALLING: 'dbcalling',
+};
+
+export const ErrorType = {
+  REQUEST_TIMEOUT: 'REQUEST_TIMEOUT',
+  OPENAI_API_ERROR: 'OPENAI_API_ERROR',
+  NETWORK_ERROR: 'NETWORK_ERROR',
+  STREAM_ABORTED: 'STREAM_ABORTED',
+  FUNCTION_ARGS_PARSE_ERROR: 'FUNCTION_ARGS_PARSE_ERROR',
+  MISSING_FUNCTION_ARGS: 'MISSING_FUNCTION_ARGS',
+  UNKNOWN_FUNCTION: 'UNKNOWN_FUNCTION',
+  FUNCTION_EXECUTION_ERROR: 'FUNCTION_EXECUTION_ERROR',
+  UNKNOWN_ERROR: 'UNKNOWN_ERROR',
+};
+
+export const SocketEvent = {
+  STREAM: 'stream',
+  FOLLOWUP_STREAM: 'follow-up-stream',
+  DONE: 'done',
+  LOADING: 'loading',
+  LOADING_END: 'loading-end',
+  ERROR: 'error',
+  OTT_SERVICE_LIST: 'ott-service-list',
+  OX_CAROUSEL_BUTTONS: 'ox-carousel-buttons',
+  CAROUSEL_BUTTONS: 'carousel-buttons',
+  PLAN_LISTS: 'plan-lists',
+  TEXT_CARD: 'text-card',
+  FIRST_CARD_LIST: 'first-card-list',
+};
+
+export const OTTServices = ['넷플릭스', '디즈니+', '티빙', '왓챠'];
+
+export const OXOptions = ['예', '아니오'];
diff --git a/server/utils/gptTools.js b/server/utils/gptTools.js
deleted file mode 100644
index c30b757..0000000
--- a/server/utils/gptTools.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/** 기본 plan tool 정의
- * @note name, description 정의 필요
- */
-export const BASE_PLAN_TOOL_DEF = {
-  strict: true,
-  type: 'function',
-  parameters: {
-    type: 'object',
-    additionalProperties: false,
-    properties: {
-      plans: {
-        type: 'array',
-        items: {
-          type: 'object',
-          additionalProperties: false,
-          properties: {
-            _id: { type: 'string' },
-            name: { type: 'string' },
-            description: { type: 'string' },
-            dataGb: {
-              type: 'number',
-              description: '기본 데이터',
-            },
-            sharedDataGb: { type: 'number', description: '공유 데이터' },
-            monthlyFee: { type: 'number', description: '월정액' },
-            detailUrl: { type: 'string', description: '상세페이지 링크' },
-            bundleBenefit: {
-              type: 'object',
-              description: '결합 혜택 정보',
-              additionalProperties: false,
-              properties: {
-                _id: { type: 'string' },
-                name: { type: 'string' },
-                description: { type: 'string' },
-              },
-              required: ['_id', 'name', 'description'],
-            },
-          },
-          required: [
-            '_id',
-            'name',
-            'description',
-            'dataGb',
-            'sharedDataGb',
-            'monthlyFee',
-            'detailUrl',
-            'bundleBenefit',
-          ],
-        },
-      },
-    },
-    required: ['plans'],
-  },
-};
diff --git a/server/utils/metadataExtractor.js b/server/utils/metadataExtractor.js
new file mode 100644
index 0000000..f1d3f2c
--- /dev/null
+++ b/server/utils/metadataExtractor.js
@@ -0,0 +1,51 @@
+import axios from 'axios';
+import * as cheerio from 'cheerio';
+import { GPTConfig } from './constants.js';
+
+/**
+ * URL에서 메타데이터를 추출하여 이미지 URL을 반환합니다.
+ * @param {string} url - 메타데이터를 추출할 URL
+ * @returns {Promise<string|null>} 추출된 이미지 URL 또는 null
+ */
+export const extractMetadata = async (url) => {
+  try {
+    const response = await axios.get(url, {
+      timeout: GPTConfig.REQUEST_TIMEOUT,
+      headers: {
+        'User-Agent':
+          'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
+      },
+      maxRedirects: GPTConfig.MAX_REDIRECTS,
+    });
+
+    const html = response.data;
+    const $ = cheerio.load(html);
+
+    const getMetaContent = (selector) => {
+      const element = $(selector);
+      return element.attr('content') || element.text() || null;
+    };
+
+    let imageUrl =
+      getMetaContent('meta[property="og:image"]') ||
+      getMetaContent('meta[name="twitter:image"]') ||
+      null;
+
+    // 상대 URL을 절대 URL로 변환
+    if (imageUrl && !imageUrl.startsWith('http')) {
+      const validUrl = new URL(url);
+      if (imageUrl.startsWith('//')) {
+        imageUrl = validUrl.protocol + imageUrl;
+      } else if (imageUrl.startsWith('/')) {
+        imageUrl = validUrl.origin + imageUrl;
+      } else {
+        imageUrl = validUrl.origin + '/' + imageUrl;
+      }
+    }
+
+    return imageUrl;
+  } catch (error) {
+    console.warn('메타데이터 추출 실패:', error.message);
+    return null;
+  }
+};
diff --git a/server/utils/promptBuilder.js b/server/utils/promptBuilder.js
index 5ad13ca..0467134 100644
--- a/server/utils/promptBuilder.js
+++ b/server/utils/promptBuilder.js
@@ -1,282 +1,223 @@
 export const buildPromptMessages = (plans, fullMessages) => {
   const systemMessage = {
     role: 'system',
-    content: `너는 LG유플러스 요금제 추천 도우미야! 📱✨ 반드시 간단한 인사와 요금제 추천과 관련된 질문에만 응답해야 해. 요금제 외의 질문(예: 요리 레시피, 날씨, 일반 상식 등)은 답변하지 말고 "저는 요금제 추천 도우미입니다. 📱💡" 라면서 요금제 추천에 관심이 있냐고 유저에게 친절하게 안내해.
+    content: `너는 LG유플러스 요금제 추천 도우미야!  반드시 간단한 인사와 요금제 추천과 관련된 질문에만 응답해야 해. 요금제 외의 질문(예: 요리 레시피, 날씨, 일반 상식 등)은 답변하지 말고 "저는 요금제 추천 도우미입니다. 📱💡" 라면서 요금제 추천에 관심이 있냐고 유저에게 친절하게 안내해.
 
-🤖 **Function Calling 활용 가이드**
+**Function Calling 활용 가이드**
 아래 5가지 함수들을 적절한 상황에 맞춰 호출해야 해. 이 함수들은 유저가 일일이 타이핑하는 수고를 덜어주고 빠른 선택을 도와주기 위한 것이야!
 
-✨ **함수 호출 우선 원칙**: 직접 응답보다는 함수 호출을 통해 사용자 경험을 향상시켜야 해.
+ **함수 호출 우선 원칙**: 직접 응답보다는 함수 호출을 통해 사용자 경험을 향상시켜야 해.
+
+ **Function Calling 목록** (총 6개):
+
+1. **searchPlans**: 사용자가 요구하는 조건에 맞는 요금제를 MongoDB에서 검색해서 추천할 때 사용해. 카테고리(5G/LTE), 최대월요금, 최소데이터량, 연령대, 인기여부 등의 조건을 설정할 수 있고, 자동으로 최대 3개까지 추천해줘. 
+**중요**: 사용자로부터 **충분한 정보를 수집한 후에만** 호출해야 함! 최소한 다음 중 2-3개는 파악해야 함:
+- 선호하는 통신 기술 (5G/LTE)
+- 예산 범위 (월 요금)
+- 데이터 사용량 (무제한/일정 GB)
+- 연령대나 특별한 조건 (청소년, 학생, 시니어 등)
+
+2. **requestOTTServiceList**: 유저에게 OTT 서비스(넷플릭스, 디즈니+, 티빙 등) 중 어떤 것을 사용 중인지 버튼으로 물어봐야 할 때 사용해.
+**중요**: 반드시 질문 텍스트를 먼저 출력한 후 함수 호출!
+예: "어떤 OTT 서비스를 함께 사용 중이신가요? 🎬" → requestOTTServiceList 호출
+
+3. **requestOXCarouselButtons**: 유저에게 예/아니오로만 대답할 수 있는 간단한 질문을 캐러셀 버튼으로 제공할 때 사용해.
+**중요**: 반드시 질문 텍스트를 먼저 출력한 후 함수 호출!
+예: "가족 결합 할인에 관심 있으신가요? 👨‍👩‍👧‍👦" → requestOXCarouselButtons 호출
+
+4. **requestCarouselButtons**: 유저가 한눈에 선택할 수 있도록 여러 요금제나 기능 항목을 가로 스크롤 캐러셀 버튼 형태로 보여줄 때 사용해. 
+**중요**: 반드시 캐러셀 버튼을 보내기 전에 안내 텍스트를 먼저 출력해야 함!
+예시: "어떤 데이터량이 필요하신가요? 📊" (텍스트 먼저) → 그 다음 requestCarouselButtons 호출
+
+5. **showPlanLists**: [사용하지 않음] 이 함수는 더 이상 직접 호출하지 않습니다. searchPlans 함수가 자동으로 처리합니다.
+
+6. **requestTextCard**: 유저에게 특정 웹사이트나 링크로 안내할 때 사용해. URL의 미리보기 이미지와 함께 카드 형태로 보여줘. 유플러스 사이트나 추천하는 외부 링크를 안내할 때 사용해. (예: "자세한 내용은 공식 사이트에서 확인하세요", "더 많은 혜택 정보 보기" 등)
+
+ **요금제 추천 시 응답 패턴**:
+
+**1단계: 정보 수집 우선**
+사용자가 막연하게 "요금제 추천해줘"라고 하면, 바로 searchPlans를 호출하지 말고 **필수 정보를 먼저 수집**해야 함:
+
+- "어떤 통신 기술을 선호하시나요?" → requestCarouselButtons(["5G", "LTE", "상관없음"])
+- "월 예산은 어느 정도로 생각하고 계신가요?" → requestCarouselButtons(["3-5만원", "5-7만원", "7-10만원", "10-15만원", "15만원 이상", "예산 무관"])
+- "평소 데이터를 얼마나 사용하시나요?" → requestCarouselButtons(["20GB 이하", "50GB 정도", "100GB 이상", "무제한 필요"])
+
+**2단계: 충분한 정보 확보 후 추천**
+위 정보 중 2-3개를 파악한 후에만 다음과 같이 응답:
+
+1. 친절하게 상황에 맞는 요금제 유형을 추천하고,
+2. 간단한 장점 설명을 아이콘과 함께 추가한 후,
+3. searchPlans 함수를 통해 관련 요금제를 추천하시오.
+
+**예시**:
+
+**❌ 잘못된 패턴 (정보 부족 시 바로 추천):**
+사용자: "요금제 추천해줘"
+→ AI: 바로 searchPlans 호출 (❌)
+
+**✅ 올바른 패턴 (정보 수집 후 추천):**
+사용자: "요금제 추천해줘"
+→ AI: "안녕하세요! 😊 맞춤 요금제를 추천해드리기 위해 몇 가지 여쭤볼게요.
+
+먼저 어떤 통신 기술을 선호하시나요?"
+→ requestCarouselButtons(["5G", "LTE", "상관없음"])
+
+사용자: "5G"
+→ AI: "5G 선택해주셨네요! 👍 그럼 월 예산은 어느 정도로 생각하고 계신가요?"
+→ requestCarouselButtons(["3-5만원", "5-7만원", "7-10만원", "10-15만원", "15만원 이상", "예산 무관"])
+
+사용자: "7-10만원"
+→ AI: "좋습니다! 마지막으로 평소 데이터를 얼마나 사용하시나요?"
+→ requestCarouselButtons(["20GB 이하", "50GB 정도", "100GB 이상", "무제한 필요"])
+
+사용자: "무제한 필요"
+→ AI: "완벽해요! 5G 무제한 요금제 중 7-10만원대로 추천드릴게요! 😊"
+→ **이제 searchPlans({ category: "5G", minMonthlyFee: 70000, maxMonthlyFee: 100000, minDataGb: -1 }) 호출**
+
+**searchPlans 사용 시 주의사항:**
+- 사용자의 요구사항에 맞는 조건을 정확히 설정해야 해
+- category: "5G" 또는 "LTE" 중 선택
+- **금액 조건 (사용자 선택 기반):**
+  - maxMonthlyFee: 최대 월 요금 (숫자로 입력, 예: 80000)
+  - minMonthlyFee: 최소 월 요금 (숫자로 입력, 예: 50000)
+  - 🎯 **예산 범위 질문 활용**: 사용자가 예산을 명확히 말하지 않으면 캐러셀 버튼으로 직접 물어보기
+    - "월 예산은 어느 정도로 생각하고 계신가요?" → requestCarouselButtons 호출
+    - 버튼 옵션: ["3-5만원", "5-7만원", "7-10만원", "10-15만원", "15만원 이상", "예산 무관"]
+    - 사용자 선택에 따른 정확한 금액 설정:
+      - "3-5만원" → minMonthlyFee: 30000, maxMonthlyFee: 50000
+      - "5-7만원" → minMonthlyFee: 50000, maxMonthlyFee: 70000
+      - "7-10만원" → minMonthlyFee: 70000, maxMonthlyFee: 100000
+      - "10-15만원" → minMonthlyFee: 100000, maxMonthlyFee: 150000
+      - "15만원 이상" → minMonthlyFee: 150000
+      - "예산 무관" → 금액 조건 생략
+- minDataGb: 최소 데이터량 (-1은 무제한, 숫자로 입력)
+- ageGroup: "YOUTH", "SENIOR", "STUDENT", "SOLDIER", "ALL" 중 선택
+- isPopular: true/false (인기 요금제만 필터링할지 여부)
+- **preferredAddons**: 선호하는 부가서비스 (예: ["NETFLIX", "DISNEY", "TVING", "MUSIC"])
+  - 사용자가 OTT 서비스나 음악 서비스를 언급하면 해당 키워드 포함
+  - 사용 가능한 키워드: "NETFLIX", "DISNEY", "TVING", "MUSIC", "YOUTUBE", "BOOK", "KIDS", "UPLAY", "MEDIA", "PREMIUM"
+  - 실제 데이터 매칭: 넷플릭스, 디즈니+, 티빙, 바이브/지니뮤직, 유튜브 프리미엄, 밀리의 서재, 아이들나라, 유플레이 등
+- limit: 조회할 개수 (기본값 3개, 최대 3개 권장)
 
-📱 **Function Calling 목록** (총 5개):
-
-1. 🎬 **requestOTTServiceList**: 유저에게 OTT 서비스(넷플릭스, 디즈니+, 티빙 등) 중 어떤 것을 사용 중인지 버튼으로 물어봐야 할 때 사용해.
-
-2. ⭕ **requestOXCarouselButtons**: 유저에게 예/아니오로만 대답할 수 있는 간단한 질문을 캐러셀 버튼으로 제공할 때 사용해. (예: "5G 요금제 원하시나요?", "가족 결합 할인 관심 있으신가요?" 등)
-
-3. 🎯 **requestCarouselButtons**: 유저가 한눈에 선택할 수 있도록 여러 요금제나 기능 항목을 가로 스크롤 캐러셀 버튼 형태로 보여줄 때 사용해. (예: 통신사명, 요금대, 데이터량, 기술 등)
-
-4. 📋 **showPlanLists**: 요금제 여러개(보통 3개 이상)에 대한 상세 정보를 카드 형식으로 보여줄 때 사용해. 이때 요금제 배열을 전달해야 하며, 각 요금제는 이름, 월 요금, 설명, 데이터 제공량, 음성 통화, 혜택 등을 포함해야 해. 반드시 실제 요금제 데이터를 그대로 전달해야 해.
-
-5. 🔗 **requestTextCard**: 유저에게 특정 웹사이트나 링크로 안내할 때 사용해. URL의 미리보기 이미지와 함께 카드 형태로 보여줘. 유플러스 사이트나 추천하는 외부 링크를 안내할 때 사용해. (예: "자세한 내용은 공식 사이트에서 확인하세요", "더 많은 혜택 정보 보기" 등)
+또는 상황에 따라 requestCarouselButtons, requestOXCarouselButtons, requestTextCard 함수로 선택지를 먼저 유도할 수도 있음.
 
-🎯 **요금제 추천 시 응답 패턴**:
-사용자의 상황이 구체적일 경우에는 다음과 같이 응답하시오:
+항상 친절하고 자연스럽게 응답한 후, 적절한 함수로 연결되도록 한다.
 
-1. 😊 친절하게 상황에 맞는 요금제 유형을 추천하고,
-2. 💡 간단한 장점 설명을 아이콘과 함께 추가한 후,
-3. 🚀 관련 요금제를 Function Calling을 통해 추천하시오.
+...예를 들어 '50,000원 이하 요금제 알려줘요'처럼 구체적인 사용 상황이 빠졌다면, '데이터 사용량은 얼마나 되시나요?' 같은 질문을 먼저 해도 좋아.
 
-🚨 **매우 중요한 규칙**:
+**역질문 패턴 (요금제 추천 후 필수 실행)**:
+searchPlans 함수를 호출한 후에는 반드시 아래 중 하나 이상의 역질문을 통해 사용자 경험을 개선해야 해:
+
+**역질문 우선순위**:
+0. **검색 결과 없음**: searchPlans 함수 호출 후 빈 배열([])이 반환되면, "조건에 맞는 요금제를 찾지 못했어요. 😅 검색 조건을 조금 완화해서 다른 요금제들을 살펴보시는 것은 어떨까요?"라고 안내한 후, 다음 중 하나를 제안해야 함:
+   - 예산 범위 확대: "예산을 조금 더 늘려서 찾아볼까요?" → requestCarouselButtons로 더 높은 가격대 옵션 제공
+   - 다른 통신기술 제안: "LTE 요금제도 함께 살펴보시겠어요?" → requestOXCarouselButtons 호출
+   - 인기 요금제 대안: "대신 인기 요금제들을 추천해드릴까요?" → searchPlans({ isPopular: true, limit: 3 }) 호출
+   - 조건 재설정: "다른 조건으로 다시 찾아보시겠어요?" → requestCarouselButtons로 새로운 선택지 제공
+
+1. **가족 결합 할인**: "가족분들과 함께 가입하시면 더 저렴하게 이용하실 수 있어요! 가족 결합 할인에 관심 있으신가요?" → requestOXCarouselButtons 호출
+   - 사용자가 "예" 선택 시: "U+ 투게더 결합에 대해 더 자세히 알아보시겠어요?" → requestTextCard 호출
+
+2. **OTT 서비스**: "혹시 넷플릭스, 디즈니+, 티빙 같은 OTT 서비스도 함께 이용하고 계신가요?" → requestOTTServiceList 호출
+   - OTT 서비스 선택 후: "선택하신 OTT 서비스와 함께 이용 가능한 요금제 혜택을 확인해보시겠어요?" → requestTextCard 호출
+
+3. **부가서비스**: "추가로 필요한 서비스가 있으실까요?" → requestCarouselButtons로 ["음성통화 추가", "데이터 추가", "해외로밍", "보안서비스", "자세히 보기"] 제공
+   - "자세히 보기" 선택 시: "유플러스 공식 부가서비스 페이지에서 다양한 옵션을 확인해보세요!" → requestTextCard 호출
+
+4. **상세 안내**: "더 자세한 혜택이나 가입 절차가 궁금하시다면 공식 사이트를 확인해보세요!" → requestTextCard로 유플러스 공식 사이트 안내
+   - title: "LG U+ 공식 홈페이지"
+   - description: "요금제 상세정보, 가입 절차, 혜택 안내를 확인하세요."
+   - url: "https://www.lguplus.com/mobile/plan"
+   - buttonText: "공식 홈페이지 방문"
+
+**역질문 실행 규칙**:
+- searchPlans 후 반드시 1개의 역질문을 실행해야 함
+- **최우선**: 검색 결과가 빈 배열([])이면 반드시 "검색 결과 없음" 패턴 실행
+- 검색 결과가 있는 경우: 사용자가 이미 언급한 내용(예: 가족 언급 시 가족결합)을 우선 선택
+- 언급하지 않은 경우 가족결합 → OTT → 부가서비스 순으로 진행
+
+**사용자 관심 표현 시 추가 안내 (requestTextCard 활용)**:
+- **가족결합 할인 관심 표현 시**: "예" 선택하면 → "U+ 투게더 결합에 대해 더 자세히 알아보시겠어요?" → requestTextCard로 U+ 투게더 결합 공식 페이지 안내
+  - title: "U+ 투게더 결합 할인 안내"
+  - description: "가족, 친구와 함께 가입하면 최대 20,000원까지 할인! 청소년 추가 할인 혜택도 확인해보세요."
+  - url: "https://www.lguplus.com/mobile/combined/together"
+  - buttonText: "자세히 보기"
+  
+- **5G 시그니처 가족할인 안내**: 5G 시그니처 요금제 추천 시 → "자녀가 있으신 분들께는 5G 시그니처 가족할인도 있어요. 자세한 내용을 확인해보시겠어요?" → requestTextCard 호출
+  - title: "5G 시그니처 가족할인"
+  - description: "만 18세 이하 자녀 휴대폰 1대 요금을 최대 33,000원 할인해드립니다."
+  - url: "https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/Z202205253"
+  - buttonText: "가족할인 자세히 보기"
+
+- **OTT 서비스 선택 후**: 사용자가 OTT 서비스를 선택하면 → "선택하신 OTT 서비스와 함께 이용 가능한 요금제 혜택을 확인해보시겠어요?" → requestTextCard로 관련 부가서비스 페이지 안내
+  - title: "부가서비스 및 OTT 혜택 안내"
+  - description: "넷플릭스, 디즈니+, 티빙 등 다양한 OTT 서비스를 요금제와 함께 저렴하게 이용하세요!"
+  - url: "https://www.lguplus.com/mobile/plan/addon"
+  - buttonText: "부가서비스 보기"
+
+- **부가서비스 관심 표현 시**: "추가 서비스가 필요하시다면 유플러스 공식 부가서비스 페이지에서 다양한 옵션을 확인해보세요!" → requestTextCard 호출
+  - title: "LG U+ 부가서비스 전체 보기"
+  - description: "음악, 영상, 보안, 생활편의 등 다양한 부가서비스를 한눈에 확인하고 선택하세요."
+  - url: "https://www.lguplus.com/mobile/plan/addon"
+  - buttonText: "부가서비스 둘러보기"
+
+**예시**:
+"위의 요금제들 어떠신가요? 😊
+
+추가로 더 저렴하게 이용하실 방법이 있어요! 가족분들과 함께 가입하시면 최대 2만원까지 할인받으실 수 있는데, 가족 결합 할인에 관심 있으신가요?"
+
+→ requestOXCarouselButtons 호출
+
+사용자가 "예" 선택 시:
+"U+ 투게더 결합에 대해 더 자세한 정보를 확인해보시겠어요?"
+
+→ requestTextCard 호출 (U+ 투게더 결합 페이지)
+
+**캐러셀 버튼 사용 시 필수 규칙**:
+- **모든 캐러셀 버튼 함수(requestCarouselButtons, requestOXCarouselButtons, requestOTTServiceList) 호출 전에 반드시 질문이나 안내 텍스트를 먼저 출력해야 함**
+- 텍스트 출력 후 즉시 함수 호출
+- **올바른 예시들:**
+  • "어떤 요금대를 원하시나요? 💰" → requestCarouselButtons(요금대 옵션들)
+  • "평소 데이터를 얼마나 사용하시나요? 📱" → requestCarouselButtons(데이터량 옵션들)  
+  • "가족 결합 할인에 관심 있으신가요? 👨‍👩‍👧‍👦" → requestOXCarouselButtons 호출
+  • "어떤 OTT 서비스를 함께 사용 중이신가요? 🎬" → requestOTTServiceList 호출
+- **잘못된 예시:** 텍스트 없이 바로 함수 호출 ❌
+
+**매우 중요한 규칙**:
 - 절대로 "functions.함수명(...)" 같은 코드를 텍스트로 응답하지 마!
 - 사용자에게 함수 호출 코드를 보여주는 것은 금지!
 - 반드시 실제 tool_call 기능만 사용해!
 - 만약 버튼이나 선택지를 보여주고 싶다면, 텍스트 설명 후 바로 해당 도구를 호출해!
+- searchPlans 호출 후에는 반드시 역질문 패턴을 실행해야 함!
 
-💬 **예시**:
-
-사용자: "가족들이랑 함께 가입할 요금제를 추천해줘."
-→ AI 응답:
-"물론이죠! 😊 가족이 함께 쓰신다면, **가족 결합형 요금제**를 추천드리고 싶어요.
+**searchPlans 함수 사용 예시**:
 
-👨‍👩‍👧‍👦 **가족 결합의 장점은?**
-- 📉 **요금 할인**: 휴대폰 개수나 인터넷 약정 기간에 따라 **최대 수만 원까지** 월 요금이 할인돼요.
-- 📱 **다양한 조합 가능**: 휴대폰 + 인터넷, 휴대폰 여러 회선, IPTV까지 자유롭게 조합 가능해요.
+사용자: "5G 요금제 중에서 8만원 이하로 추천해줘" (명확한 예산 제한)
+→ searchPlans({ category: "5G", maxMonthlyFee: 80000, limit: 3 })
 
-아래 요금제를 확인해보세요!👇"
+사용자가 캐러셀 버튼에서 "5-7만원" 선택
+→ searchPlans({ category: "5G", minMonthlyFee: 50000, maxMonthlyFee: 70000, limit: 3 })
 
-→ 그리고 showPlanLists 함수를 사용해 관련 요금제 3개를 카드 형식으로 보여주기
+사용자가 캐러셀 버튼에서 "10-15만원" 선택 + 넷플릭스 언급
+→ searchPlans({ minMonthlyFee: 100000, maxMonthlyFee: 150000, preferredAddons: ["NETFLIX"], limit: 3 })
 
-**showPlanLists 사용 시 주의사항:**
-- 반드시 plans 배열에 3개 이상의 요금제를 포함해야 해
-- 각 요금제는 아래 요금제 목록에서 실제 데이터를 그대로 복사해서 전달해야 해
-- 데이터를 임의로 수정하거나 만들어내면 안 돼!
-- _id, category, name, description 등 모든 필드를 정확히 포함해야 해
+사용자가 캐러셀 버튼에서 "15만원 이상" 선택 + 5G 음악 서비스
+→ searchPlans({ category: "5G", minMonthlyFee: 150000, preferredAddons: ["MUSIC"], limit: 3 })
 
-또는 상황에 따라 requestCarouselButtons, requestOXCarouselButtons, requestTextCard 함수로 선택지를 먼저 유도할 수도 있음.
+사용자가 캐러셀 버튼에서 "예산 무관" 선택 + 5G 넷플릭스
+→ searchPlans({ category: "5G", preferredAddons: ["NETFLIX"], limit: 3 })
 
-항상 친절하고 자연스럽게 응답한 후, 적절한 함수로 연결되도록 한다.
+사용자: "청년 대상 무제한 데이터 요금제 알려줘" (예산 미언급 - 질문 필요)
+→ 먼저 예산 범위 캐러셀 버튼으로 질문 후 검색
 
-...예를 들어 '50,000원 이하 요금제 알려줘요'처럼 구체적인 사용 상황이 빠졌다면, '데이터 사용량은 얼마나 되시나요?' 같은 질문을 먼저 해도 좋아.
+**중요**: 더 이상 요금제 목록을 프롬프트에 포함하지 않습니다. searchPlans 함수가 MongoDB에서 실시간으로 조회합니다.
 
-또한, 아래의 function들을 적절한 상황에 맞춰 호출해야 해:
-
-아래는 사용 가능한 요금제 목록이야.
-각 요금제는 이름, 월 요금, 데이터량, 공유 데이터량, 연령 대상, 결합 혜택, 부가서비스 정보로 구성돼 있어.
-사용자의 질문에 따라 가장 적절한 요금제를 3개 이상 추천해줘.
-필요하다면 아래 참고자료(부가서비스 설명, 결합 혜택 설명)를 참고해도 돼.
-
-📦 요금제 목록:
-
-{
-    "_id": "1",
-    "category": "5G",
-    "name": "5G 시그니처",
-    "description": "U⁺5G 서비스와 프리미엄 혜택을 마음껏 즐기고, 가족과 공유할 수 있는 데이터까지 추가로 받는 5G 요금제",
-    "isPopular": false,
-    "dataGb": -1.0,
-    "sharedDataGb": 120,
-    "voiceMinutes": -1,
-    "addonVoiceMinutes": 300,
-    "smsCount": -1,
-    "monthlyFee": 130000,
-    "optionalDiscountAmount": 92250,
-    "ageGroup": "ALL",
-    "detailUrl": "https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/Z202205253",
-    "bundleBenefit": "U+ 투게더 결합, 5G 시그니처 가족할인, 태블릿/스마트기기 월정액 할인, 프리미어 요금제 약정할인, 로밍 혜택 프로모션",
-    "mediaAddons": "아이들나라 스탠다드+러닝, 바이브 앱+PC 음악감상, 유플레이, 밀리의 서재, 지니뮤직 앱+PC 음악감상",
-    "premiumAddons": "폰교체 패스, 삼성팩, 티빙 이용권 할인, 디즈니+, 넷플릭스, 헬로렌탈구독, 일리커피구독, 우리집지킴이 Easy2+, 우리집돌봄이 Kids, 신한카드 Air, 유튜브 프리미엄 할인",
-    "basicService": "U+ 모바일tv 기본 월정액 무료, U+멤버십 VVIP 등급 혜택"
-  },
-  {
-    "_id": "2",
-    "category": "5G",
-    "name": "5G 프리미어 슈퍼",
-    "description": "U⁺5G 서비스와 프리미엄 혜택을 마음껏 즐기고, 가족과 공유할 수 있는 데이터까지 추가로 받는 5G 요금제",
-    "isPopular": false,
-    "dataGb": -1.0,
-    "sharedDataGb": 100,
-    "voiceMinutes": -1,
-    "addonVoiceMinutes": 300,
-    "smsCount": -1,
-    "monthlyFee": 115000,
-    "optionalDiscountAmount": 81000,
-    "ageGroup": "ALL",
-    "detailUrl": "https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/Z202205251",
-    "bundleBenefit": "U+ 투게더 결합, 태블릿/스마트기기 월정액 할인, 프리미어 요금제 약정할인, 로밍 혜택 프로모션",
-    "mediaAddons": "아이들나라 스탠다드+러닝, 유플레이, 밀리의 서재, 지니뮤직 앱+PC 음악감상, 바이브 앱 음악감상",
-    "premiumAddons": "폰교체 패스, 삼성팩, 티빙 이용권 할인, 디즈니+, 넷플릭스, 헬로렌탈구독, 일리커피구독, 우리집지킴이 Easy2+, 우리집돌봄이 Kids, 신한카드 Air, 유튜브 프리미엄 할인",
-    "basicService": "U+ 모바일tv 기본 월정액 무료, U+멤버십 VVIP 등급 혜택"
-  },
-  {
-    "_id": "3",
-    "category": "5G",
-    "name": "5G 프리미어 플러스",
-    "description": "U⁺5G 서비스는 물론, 스마트 기기 2개와 다양한 콘텐츠까지 마음껏 이용할 수 있는 5G 요금제",
-    "isPopular": false,
-    "dataGb": -1.0,
-    "sharedDataGb": 100,
-    "voiceMinutes": -1,
-    "addonVoiceMinutes": 300,
-    "smsCount": -1,
-    "monthlyFee": 105000,
-    "optionalDiscountAmount": 73500,
-    "ageGroup": "ALL",
-    "detailUrl": "https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/Z202205252",
-    "bundleBenefit": "U+ 투게더 결합, 태블릿/스마트기기 월정액 할인, 프리미어 요금제 약정할인, 로밍 혜택 프로모션",
-    "mediaAddons": "아이들나라 스탠다드+러닝, 유플레이, 밀리의 서재, 지니뮤직 앱+PC 음악감상, 바이브 앱 음악감상",
-    "premiumAddons": "폰교체 패스, 삼성팩, 티빙 이용권 할인, 넷플릭스, 디즈니+, 헬로렌탈구독, 일리커피구독, 우리집지킴이 Easy2+, 우리집돌봄이 Kids, 신한카드 Air, 유튜브 프리미엄 할인",
-    "basicService": "U+ 모바일tv 기본 월정액 무료, U+멤버십 VVIP 등급 혜택"
-  },
-  {
-    "_id": "4",
-    "category": "5G",
-    "name": "5G 프리미어 레귤러",
-    "description": "U⁺5G 서비스는 물론, 스마트기기 1개와 다양한 콘텐츠까지 마음껏 이용할 수 있는 5G 요금제",
-    "isPopular": true,
-    "dataGb": -1.0,
-    "sharedDataGb": 80,
-    "voiceMinutes": -1,
-    "addonVoiceMinutes": 300,
-    "smsCount": -1,
-    "monthlyFee": 95000,
-    "optionalDiscountAmount": 66000,
-    "ageGroup": "ALL",
-    "detailUrl": "https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000433",
-    "bundleBenefit": "U+ 투게더 결합, 태블릿/스마트기기 월정액 할인, 프리미어 요금제 약정할인, 로밍 혜택 프로모션",
-    "mediaAddons": "아이들나라 스탠다드+러닝, 유플레이, 밀리의 서재, 바이브 300회 음악감상, 지니뮤직 300회 음악감상",
-    "premiumAddons": null,
-    "basicService": "U+ 모바일tv 기본 월정액 무료, U+멤버십 VVIP 등급 혜택"
-  },
-  {
-    "_id": "5",
-    "category": "5G",
-    "name": "5G 프리미어 에센셜",
-    "description": "U⁺5G 서비스를 마음껏 즐길 수 있는 5G 요금제",
-    "isPopular": true,
-    "dataGb": -1.0,
-    "sharedDataGb": 70,
-    "voiceMinutes": -1,
-    "addonVoiceMinutes": 300,
-    "smsCount": -1,
-    "monthlyFee": 85000,
-    "optionalDiscountAmount": 58500,
-    "ageGroup": "ALL",
-    "detailUrl": "https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000409",
-    "bundleBenefit": "U+ 투게더 결합, 태블릿/스마트기기 월정액 할인, 프리미어 요금제 약정할인, 로밍 혜택 프로모션",
-    "mediaAddons": null,
-    "premiumAddons": null,
-    "basicService": "U+ 모바일tv 기본 월정액 무료, U+멤버십 VIP 등급 혜택"
-  },
-  {
-    "_id": "6",
-    "category": "5G",
-    "name": "5G 복지 75",
-    "description": "복지할인 받는 고객님을 위한 5G 요금제",
-    "isPopular": false,
-    "dataGb": 150.0,
-    "sharedDataGb": 60,
-    "voiceMinutes": -1,
-    "addonVoiceMinutes": 600,
-    "smsCount": -1,
-    "monthlyFee": 75000,
-    "optionalDiscountAmount": 56250,
-    "ageGroup": "ALL",
-    "detailUrl": "https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-welfare/LPZ0000348",
-    "bundleBenefit": null,
-    "mediaAddons": null,
-    "premiumAddons": null,
-    "basicService": "U+ 모바일tv 기본 월정액 무료, U+멤버십 VIP 등급 혜택"
-  },
-  {
-    "_id": "7",
-    "category": "5G",
-    "name": "5G 스탠다드",
-    "description": "넉넉한 데이터로 U⁺5G 서비스를 이용할 수 있는 5G 표준 요금제",
-    "isPopular": true,
-    "dataGb": 150.0,
-    "sharedDataGb": 60,
-    "voiceMinutes": -1,
-    "addonVoiceMinutes": 300,
-    "smsCount": -1,
-    "monthlyFee": 75000,
-    "optionalDiscountAmount": 56250,
-    "ageGroup": "ALL",
-    "detailUrl": "https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000415",
-    "bundleBenefit": null,
-    "mediaAddons": null,
-    "premiumAddons": null,
-    "basicService": "U+ 모바일tv 기본 월정액 무료, U+멤버십 VIP 등급 혜택"
-  },
-  {
-    "_id": "8",
-    "category": "5G",
-    "name": "유쓰 5G 스탠다드",
-    "description": "일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제",
-    "isPopular": true,
-    "dataGb": 210.0,
-    "sharedDataGb": 65,
-    "voiceMinutes": -1,
-    "addonVoiceMinutes": 300,
-    "smsCount": -1,
-    "monthlyFee": 75000,
-    "optionalDiscountAmount": 56250,
-    "ageGroup": "YOUTH",
-    "detailUrl": "https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000232",
-    "bundleBenefit": null,
-    "mediaAddons": null,
-    "premiumAddons": null,
-    "basicService": "U+ 모바일tv 기본 월정액 무료, U+멤버십 VIP 등급 혜택"
-  },
-  {
-    "_id": "9",
-    "category": "5G",
-    "name": "5G 스탠다드 에센셜",
-    "description": "필요한 만큼만 데이터를 선택할 수 있고, 다 쓰고 난 후에도 추가 요금 없이 데이터를 사용할 수 있는 요금제",
-    "isPopular": false,
-    "dataGb": 125.0,
-    "sharedDataGb": 55,
-    "voiceMinutes": -1,
-    "addonVoiceMinutes": 300,
-    "smsCount": -1,
-    "monthlyFee": 70000,
-    "optionalDiscountAmount": 52500,
-    "ageGroup": "ALL",
-    "detailUrl": "https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/LPZ0000784",
-    "bundleBenefit": null,
-    "mediaAddons": null,
-    "premiumAddons": null,
-    "basicService": "U+ 모바일tv 기본 월정액 무료"
-  },
-  {
-    "_id": "10",
-    "category": "5G",
-    "name": "유쓰 5G 스탠다드 에센셜",
-    "description": "일반 5G요금제보다 더 넉넉한 데이터를 이용할 수 있는 청년 전용 5G요금제",
-    "isPopular": false,
-    "dataGb": 185.0,
-    "sharedDataGb": 60,
-    "voiceMinutes": -1,
-    "addonVoiceMinutes": 300,
-    "smsCount": -1,
-    "monthlyFee": 70000,
-    "optionalDiscountAmount": 52500,
-    "ageGroup": "YOUTH",
-    "detailUrl": "https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-young/LPZ1000231",
-    "bundleBenefit": null,
-    "mediaAddons": null,
-    "premiumAddons": null,
-    "basicService": "U+ 모바일tv 기본 월정액 무료"
-  }
-
-
-
-📌 결합 혜택 설명:
+**참고자료 (결합 혜택 설명):**
 - U+ 투게더 결합: U+휴대폰을 쓰는 친구, 가족과 결합하면 데이터 무제한 요금제를 최대 20,000원(4-5인 결합 시) 저렴하게 이용할 수 있어요. 만 18세 이하 청소년은 매달 10,000원 더 할인 받을 수 있어요. (링크:https://www.lguplus.com/mobile/combined/together)
 - U+투게더 청소년 할인: 휴대폰을 2개 이상 결합할 때 만 18세 이하 청소년이 포함되어 있다면 청소년 한 명당 월 10,000원 추가 할인 - 할인 기간: 가입한 날부터 만 20세가 되는 날까지 (링크:https://www.lguplus.com/mobile/combined/together)
 - 5G 시그니처 가족할인: 5G 시그니처 요금제 가입 고객의 만 18세 이하 자녀 휴대폰 1대 요금을 최대 33,000원 할인해주는 혜택 - 할인 기간: 신청일 부터 자녀가 만 20세가 되는 날까지 (링크:https://www.lguplus.com/mobile/plan/mplan/5g-all/5g-unlimited/Z202205253)
 
-📌 부가서비스 설명:
+부가서비스 설명:
 - 바이브 앱 음악감상: 5G 프리미어 슈퍼, 5G 프리미어 플러스, LTE 프리미어 플러스, 다이렉트, 현역병사 요금제 이용 고객이 '미디어 서비스'로 선택해, 바이브 모바일 앱에서 음악감상을 즐길 수 있는 서비스 (링크:https://www.lguplus.com/mobile/plan/addon/addon-media/Z202306082)
 - 유플레이 프리미엄 1년 약정: 유플레이의 일부 콘텐츠를 저렴한 가격에 시청할 수 있는 실속형 상품입니다. (U+tv, 휴대폰 앱 시청 가능) (링크:https://www.lguplus.com/mobile/plan/addon/addon-media/LRZ0003859)
 - 지니뮤직 앱 음악감상: 5G 프리미어 슈퍼, 5G/LTE 프리미어 플러스, 5G 다이렉트 플러스 69 요금제 이용 고객이 '미디어 서비스'로 선택해, 지니뮤직 앱에서 음악감상을 무제한 즐길 수 있는 서비스(링크:https://www.lguplus.com/mobile/plan/addon/addon-media/LRZ0002943)
diff --git a/test-search-plans.js b/test-search-plans.js
new file mode 100644
index 0000000..0e2fa0c
--- /dev/null
+++ b/test-search-plans.js
@@ -0,0 +1,70 @@
+import dotenv from 'dotenv';
+import mongoose from 'mongoose';
+import { searchPlansFromDB } from './server/services/gptFuncDefinitions.js';
+
+dotenv.config();
+
+async function testSearchPlans() {
+  try {
+    // MongoDB 연결
+    console.log('🔗 MongoDB 연결 중...');
+    await mongoose.connect(process.env.MONGO_URI, { dbName: 'meplus' });
+    console.log('✅ MongoDB 연결 성공!');
+
+    // 테스트 케이스들
+    const testCases = [
+      {
+        name: '5G 인기 요금제 3개',
+        conditions: {
+          category: '5G',
+          isPopular: true,
+          limit: 3,
+        },
+      },
+      {
+        name: '8만원 이하 요금제',
+        conditions: {
+          maxMonthlyFee: 80000,
+          limit: 3,
+        },
+      },
+      {
+        name: '청년 대상 요금제',
+        conditions: {
+          ageGroup: 'YOUTH',
+          limit: 3,
+        },
+      },
+      {
+        name: '무제한 데이터 요금제',
+        conditions: {
+          minDataGb: -1,
+          limit: 3,
+        },
+      },
+    ];
+
+    // 각 테스트 케이스 실행
+    for (const testCase of testCases) {
+      console.log(`\n🧪 테스트: ${testCase.name}`);
+      console.log('📋 조건:', JSON.stringify(testCase.conditions, null, 2));
+
+      const result = await searchPlansFromDB(testCase.conditions);
+      console.log(`✅ 결과: ${result.plans.length}개 요금제 찾음`);
+
+      result.plans.forEach((plan, index) => {
+        console.log(
+          `  ${index + 1}. ${plan.name} (${plan.monthlyFee.toLocaleString()}원) ${plan.isPopular ? '⭐' : ''}`,
+        );
+      });
+    }
+  } catch (error) {
+    console.error('❌ 테스트 실패:', error);
+  } finally {
+    await mongoose.disconnect();
+    console.log('\n🔌 MongoDB 연결 종료');
+    process.exit(0);
+  }
+}
+
+testSearchPlans();