Release/0.0.2

client/src/App.tsx

@@ -5,28 +5,22 @@ import {
   Route,
   Routes,
 } from 'react-router-dom';
-import ChatTestPage from './pages/ChatTestPage';
 import ChatbotPage from './pages/ChatbotPage';
 import TestFirstPage from './pages/TestFirstPage';
 import TestWaitingPage from './pages/TestWaitingPage';
 import TestPage from './pages/TestPage';
 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-1"
-          style={{ minHeight: 'calc(100vh - 50px - 80px)' }}
-        >
+        <main style={{ minHeight: 'calc(100vh - 50px - 80px)' }}>
           <Outlet />
         </main>
-        <Footer />
       </div>
     </>
   );
@@ -45,7 +39,6 @@ function App() {
           <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>
       </Routes>

client/src/components/ComparePage/ComparisonActionButtons.tsx

@@ -5,17 +5,19 @@ interface ComparisonActionButtonsProps {
   rightButtonText?: string;
   onLeftClick: () => void;
   onRightClick: () => void;
+  className?: string;
 }
 
 const ComparisonActionButtons: React.FC<ComparisonActionButtonsProps> = ({
   leftButtonText,
   rightButtonText,
   onLeftClick,
   onRightClick,
+  className = '',
 }) => {
   return (
     <div
-      className="flex flex-col justify-center items-center text-center gap-6 fixed bottom-[50px] max-w-[560px]"
+      className={`flex flex-col justify-center items-center text-center gap-6 ${className}`}
       style={{ width: 'calc(100% - 40px)' }}
     >
       <div className="flex w-full">

client/src/components/ComparePage/ComparisonResult.tsx

@@ -1,10 +1,14 @@
+import { useEffect, useState } from 'react';
 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 Modal from '../common/Modal';
+import Button from '../common/Button';
+
 import type { Plan } from '@/components/types/Plan';
 
 interface ComparisonResultProps {
@@ -16,11 +20,35 @@ const ComparisonResult: React.FC<ComparisonResultProps> = ({
   selectedLeft,
   selectedRight,
 }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [pendingLink, setPendingLink] = useState<string | null>(null);
+  const [showButtons, setShowButtons] = useState(false);
+
   const handleDetailClick = (detailUrl?: string) => {
     if (detailUrl) {
-      window.open(detailUrl, '_blank');
+      setPendingLink(detailUrl); // 링크만 저장
+      setIsModalOpen(true); // 모달 먼저 띄우기
     }
   };
+  useEffect(() => {
+    const scrollContainer = document.querySelector('.scroll-target');
+    if (!scrollContainer) return;
+
+    const handleScroll = () => {
+      const scrollTop = scrollContainer.scrollTop;
+      const containerHeight = scrollContainer.clientHeight;
+      const scrollHeight = scrollContainer.scrollHeight;
+
+      if (scrollTop + containerHeight >= scrollHeight - 100) {
+        setShowButtons(true);
+      } else {
+        setShowButtons(false);
+      }
+    };
+
+    scrollContainer.addEventListener('scroll', handleScroll);
+    return () => scrollContainer.removeEventListener('scroll', handleScroll);
+  }, []);
 
   // 데이터 값 계산
   const leftDataValue = selectedLeft
@@ -151,13 +179,47 @@ const ComparisonResult: React.FC<ComparisonResultProps> = ({
           />
         </div>
       </div>
-
       <ComparisonActionButtons
         leftButtonText={selectedLeft ? '자세히 보기' : ''}
         rightButtonText={selectedRight ? '자세히 보기' : ''}
         onLeftClick={() => handleDetailClick(selectedLeft?.detailUrl)}
         onRightClick={() => handleDetailClick(selectedRight?.detailUrl)}
+        className={`fixed bottom-[50px] max-w-[560px] transition-all duration-500
+    ${showButtons ? 'opacity-100 translate-y-0 pointer-events-auto' : 'opacity-0 translate-y-5 pointer-events-none'}
+  `}
       />
+
+      <Modal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        modalTitle="요금제 자세히 알아보기"
+        modalDesc={
+          <>
+            요금제 상세 페이지는 외부 사이트로 연결됩니다.
+            <br />
+            계속 진행하시겠습니까?
+          </>
+        }
+      >
+        <Button
+          fullWidth
+          variant="secondary"
+          size="medium"
+          onClick={() => setIsModalOpen(false)}
+        >
+          닫기
+        </Button>
+        <Button
+          fullWidth
+          size="medium"
+          onClick={() => {
+            if (pendingLink) window.open(pendingLink, '_blank');
+            setIsModalOpen(false);
+          }}
+        >
+          이동하기
+        </Button>
+      </Modal>
     </>
   );
 };

client/src/components/ComparePage/FilterSection.tsx

@@ -3,19 +3,25 @@ import Carousel from '@/components/ComparePage/Carousel';
 interface FilterSectionProps {
   dataList: string[];
   priceList: string[];
+  dataAmountList: string[];
   activeDataIndex: number;
   activePriceIndex: number;
+  activeDataAmountIndex: number;
   onDataIndexChange: (index: number) => void;
   onPriceIndexChange: (index: number) => void;
+  onDataAmountIndexChange: (index: number) => void;
 }
 
 const FilterSection: React.FC<FilterSectionProps> = ({
   dataList,
   priceList,
+  dataAmountList,
   activeDataIndex,
   activePriceIndex,
+  activeDataAmountIndex,
   onDataIndexChange,
   onPriceIndexChange,
+  onDataAmountIndexChange,
 }) => {
   return (
     <div className="fixed top-[45px] w-full pt-2 bg-background-40 z-5">
@@ -36,6 +42,11 @@ const FilterSection: React.FC<FilterSectionProps> = ({
           activeIndex={activePriceIndex}
           setActiveIndex={onPriceIndexChange}
         />
+        <Carousel
+          categoryList={dataAmountList}
+          activeIndex={activeDataAmountIndex}
+          setActiveIndex={onDataAmountIndexChange}
+        />
       </div>
     </div>
   );

client/src/components/ComparePage/PlanListItem.tsx

@@ -2,6 +2,7 @@
 import dropdownIcon from '@/assets/icon/dropdown_icon.svg';
 import PlanDetailInfo from '@/components/ComparePage/PlanDetailInfo';
 import type { Plan } from '@/components/types/Plan';
+import { useEffect, useRef, useState } from 'react';
 
 interface PlanListItemProps {
   plan: Plan;
@@ -18,8 +19,22 @@
   onToggle,
   onSelect,
 }) => {
+  const itemRef = useRef<HTMLDivElement>(null);
+  const [wasOpen, setWasOpen] = useState(false);
+
+  useEffect(() => {
+    if (isOpen && !wasOpen && itemRef.current) {
+      setTimeout(() => {
+        itemRef.current?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+        });
+      }, 0);
+    }
+    setWasOpen(isOpen);
+  }, [isOpen]);
   return (
-    <div>
+    <div ref={itemRef}>
       <motion.div
         whileHover={
           !isOpen

client/src/components/chatbot/BotBubbleFrame.tsx

@@ -169,7 +169,7 @@ const BotBubbleFrame = ({
           />
         ) : null;
       case 'showPlanLists':
-        return args?.plans ? (
+        return args?.plans && args.plans.length > 0 ? (
           <div className="space-y-3">
             {args.plans.map((plan, index) => (
               <ToggleCard
@@ -179,7 +179,11 @@ const BotBubbleFrame = ({
               />
             ))}
           </div>
-        ) : null;
+        ) : (
+          <>
+            <BotBubble messageChunks={['해당하는 요금제가 없습니다.']} />
+          </>
+        );
       case 'showFirstCardList':
         return <FirstCardList onButtonClick={onButtonClick} />;
       default:

client/src/components/common/Footer.tsx

@@ -1,6 +1,6 @@
 const Footer = () => {
   return (
-    <footer className="w-full max-w-[600px] mx-auto px-5 py-1 flex justify-center items-center text-xs text-[rgba(87,50,161,0.8)] text-center">
+    <footer className="absolute bottom-0 w-full max-w-[600px] mx-auto px-5 py-1 flex justify-center items-center text-xs text-[rgba(87,50,161,0.8)] text-center">
       <p>@meplus.com</p>
     </footer>
   );

client/src/components/common/Modal.tsx

@@ -5,7 +5,7 @@ interface ModalProps {
   isOpen: boolean;
   onClose: () => void;
   modalTitle: string;
-  modalDesc?: string;
+  modalDesc?: React.ReactNode;
   children: React.ReactNode;
 }
 
@@ -17,11 +17,11 @@ const Modal: React.FC<ModalProps> = ({
   children,
 }) => {
   useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'hidden';
-    }
+    // if (isOpen) {
+    //   document.body.style.overflow = 'hidden';
+    // } else {
+    //   document.body.style.overflow = 'hidden';
+    // }
 
     const handleEsc = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
@@ -32,7 +32,7 @@ const Modal: React.FC<ModalProps> = ({
     window.addEventListener('keydown', handleEsc);
     return () => {
       window.removeEventListener('keydown', handleEsc);
-      document.body.style.overflow = 'hidden';
+      // document.body.style.overflow = 'hidden';
     };
   }, [isOpen, onClose]);
 
@@ -41,7 +41,7 @@ const Modal: React.FC<ModalProps> = ({
       {isOpen && (
         <motion.div
           key="backdrop"
-          className="fixed left-1/2 top-0 bottom-0 -translate-x-1/2 w-full max-w-[600px] bg-black/50 flex justify-center items-center z-50"
+          className="fixed left-1/2 top-0 bottom-0 -translate-x-1/2 w-full max-w-[600px] bg-black/50 flex justify-center items-center z-100"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}

client/src/components/common/ToastAlert.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+interface ToastAlertProps {
+  message: string;
+  onClose?: () => void;
+}
+
+function ToastAlert({ message, onClose }: ToastAlertProps) {
+  const [visible, setVisible] = useState(true);
+  const [isClosing, setIsClosing] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsClosing(true);
+    }, 2500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleAnimationEnd = () => {
+    if (isClosing) {
+      setVisible(false);
+      if (onClose) onClose();
+    }
+  };
+
+  if (!visible) return null;
+
+  return createPortal(
+    <div
+      style={{
+        position: 'fixed',
+        top: '15px',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        width: 'calc(100% - 20px)',
+        maxWidth: '560px',
+        padding: '16px 20px',
+        backgroundColor: 'rgba(255, 255, 255, 1)',
+        borderRadius: '12px',
+        boxShadow: '0 0 10px rgba(0, 0, 0, 0.08)',
+        fontSize: '14px',
+        lineHeight: '19px',
+        textAlign: 'center',
+        color: '#6B7280',
+        zIndex: 9999,
+        animation: isClosing
+          ? 'slideUp 0.3s ease forwards'
+          : 'slideDown 0.3s ease forwards',
+        whiteSpace: 'pre-line',
+      }}
+      onAnimationEnd={handleAnimationEnd}
+    >
+      {message}
+      <style>
+        {`
+          @keyframes slideDown {
+            from {
+              opacity: 0.7;
+              transform: translate(-50%, -20px);
+            }
+            to {
+              opacity: 1;
+              transform: translate(-50%, 0);
+            }
+          }
+
+          @keyframes slideUp {
+            from {
+              opacity: 1;
+              transform: translate(-50%, 0);
+            }
+            to {
+              opacity: 0;
+              transform: translate(-50%, -20px);
+            }
+          }
+        `}
+      </style>
+    </div>,
+    document.body,
+  );
+}
+
+export default ToastAlert;

client/src/components/types/Plan.ts

@@ -4,7 +4,7 @@ export interface Plan {
   name: string;
   description?: string;
   isPopular: boolean;
-  dataGb?: number;
+  dataGb: number;
   sharedDataGb?: number;
   voiceMinutes?: number;
   addonVoiceMinutes?: number;