Feat : 요금제자세히보기 모달추가

client/src/components/ComparePage/ComparisonResult.tsx

@@ -1,10 +1,14 @@
+import { 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,9 +20,13 @@ const ComparisonResult: React.FC<ComparisonResultProps> = ({
   selectedLeft,
   selectedRight,
 }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [pendingLink, setPendingLink] = useState<string | null>(null);
+
   const handleDetailClick = (detailUrl?: string) => {
     if (detailUrl) {
-      window.open(detailUrl, '_blank');
+      setPendingLink(detailUrl); // 링크만 저장
+      setIsModalOpen(true); // 모달 먼저 띄우기
     }
   };
 
@@ -158,6 +166,32 @@ const ComparisonResult: React.FC<ComparisonResultProps> = ({
         onLeftClick={() => handleDetailClick(selectedLeft?.detailUrl)}
         onRightClick={() => handleDetailClick(selectedRight?.detailUrl)}
       />
+
+      <Modal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        modalTitle="외부 링크로 이동"
+        modalDesc="요금제 상세 페이지는 외부 사이트로 연결됩니다. 계속 진행하시겠습니까?"
+      >
+        <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/common/Modal.tsx

@@ -20,7 +20,7 @@ const Modal: React.FC<ModalProps> = ({
     if (isOpen) {
       document.body.style.overflow = 'hidden';
     } else {
-      document.body.style.overflow = 'hidden';
+      document.body.style.overflow = 'auto';
     }
 
     const handleEsc = (event: KeyboardEvent) => {

client/src/pages/TestResultPage.tsx

@@ -10,6 +10,7 @@ import Header from '@/components/common/Header';
 import confetti from '../assets/image/confetti.png';
 import plus from '@/assets/icon/plus.png';
 import TestWaitingPage from './TestWaitingPage';
+import Modal from '@/components/common/Modal';
 
 import Confetti from 'react-confetti';
 import { useWindowSize } from 'react-use';
@@ -56,6 +57,7 @@ const TestResultPage = () => {
   const [plan, setPlan] = useState<PlanResult | null>(null);
   const { width, height } = useWindowSize();
   const [showConfetti, setShowConfetti] = useState(true);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   useEffect(() => {
     const fetchPlan = async () => {
@@ -141,6 +143,36 @@ const TestResultPage = () => {
 
   return (
     <>
+      {isModalOpen && (
+        <Modal
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+          modalTitle="외부 링크로 이동"
+          modalDesc="요금제 상세 페이지는 LG U+외부 사이트로 연결됩니다. 계속 진행하시겠습니까?"
+        >
+          <Button
+            variant="secondary"
+            size="medium"
+            fullWidth
+            onClick={() => setIsModalOpen(false)}
+          >
+            취소
+          </Button>
+
+          <Button
+            variant="primary"
+            size="medium"
+            fullWidth
+            onClick={() => {
+              if (plan?.link) window.open(plan.link, '_blank');
+              setIsModalOpen(false);
+            }}
+          >
+            이동하기
+          </Button>
+        </Modal>
+      )}
+
       <div className="absolute inset-0 bg-gradient-to-b from-[#dfe4fd] to-white z-0" />
       <Header
         title="나에게 잘 어울리는 요금제는?"
@@ -168,6 +200,7 @@ const TestResultPage = () => {
             )}
           </div>
         </motion.div>
+
         {/* <div className="relative w-full flex justify-center items-center mt-6">
         <img
           src={confetti}
@@ -267,12 +300,8 @@ const TestResultPage = () => {
         >
           챗봇 상담하기
         </Button>
-        <Button
-          fullWidth
-          size="large"
-          onClick={() => window.open(plan.link, '_blank')}
-        >
-          요금제 바꾸러가기
+        <Button fullWidth size="large" onClick={() => setIsModalOpen(true)}>
+          요금제 자세히보기
         </Button>
       </div>
     </>