[Feat] 결제 모듈 모달 연동

pu2rile · Aug 8, 2024 · 1f59b34 · 1f59b34
1 parent c7f53fd
commit 1f59b34
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 55 deletions.
diff --git a/src/components/CardAddPage.js b/src/components/CardAddPage.js
@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
 import CardForm from './CardForm';
-import { useNavigate } from 'react-router-dom';
+import Modal from './Modal';
 import './CardAddPage.css';
 
-const CardAddPage = ({ addCard }) => {
-  const navigate = useNavigate();
+const CardAddPage = ({ addCard, isOpen, onClose }) => {
   const [cardData, setCardData] = useState({
     cardNumber: '',
     expiry: '',
@@ -15,44 +14,46 @@ const CardAddPage = ({ addCard }) => {
 
   const handleAddCard = (newCard) => {
     addCard(newCard);
-    navigate('/card-management');
+    onClose();  // 모달 닫기
   };
 
   return (
-    <div className="card-add-page">
-      <div className="card-add-header">
-        <button className="back-button" onClick={() => navigate('/card-management')}>
-          <img src={`${process.env.PUBLIC_URL}/images/back-icon.png`} alt="뒤로가기" className="back-icon" />
-        </button>
-        <h2>카드 추가</h2>
-        <button className="close-button" onClick={() => navigate('/')}>×</button>
-      </div>
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <div className="card-add-page">
+        <div className="card-add-header">
+          <button className="back-button" onClick={onClose}>
+            <img src={`${process.env.PUBLIC_URL}/images/back-icon.png`} alt="뒤로가기" className="back-icon" />
+          </button>
+          <h2>카드 추가</h2>
+          <button className="close-button" onClick={onClose}>×</button>
+        </div>
 
-      {/* 카드 미리보기 섹션 */}
-      <div className="preview-section">
-        <div className="live-preview-card">
-          <div className="live-preview-card-chip"></div>
-          <div className="card-content">
-            <div className="card-number">
-              {cardData.cardNumber || ''}
-            </div>
-            <div className="card-holder-expiry">
-              <div className="card-holder">
-                {cardData.holderName || 'NAME'}
+        {/* 카드 미리보기 섹션 */}
+        <div className="preview-section">
+          <div className="live-preview-card">
+            <div className="live-preview-card-chip"></div>
+            <div className="card-content">
+              <div className="card-number">
+                {cardData.cardNumber || ''}
               </div>
-              <div className="expiry-date">
-                {cardData.expiry || 'MM/YY'}
+              <div className="card-holder-expiry">
+                <div className="card-holder">
+                  {cardData.holderName || 'NAME'}
+                </div>
+                <div className="expiry-date">
+                  {cardData.expiry || 'MM/YY'}
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
 
-      {/* 카드 입력 폼 섹션 */}
-      <div className="form-section">
-        <CardForm onAddCard={handleAddCard} cardData={cardData} setCardData={setCardData} />
+        {/* 카드 입력 폼 섹션 */}
+        <div className="form-section">
+          <CardForm onAddCard={handleAddCard} cardData={cardData} setCardData={setCardData} />
+        </div>
       </div>
-    </div>
+    </Modal>
   );
 };
 

diff --git a/src/components/CardManagement.js b/src/components/CardManagement.js
@@ -1,36 +1,32 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 import AddCardButton from './AddCardButton';
 import RegisteredCard from './RegisteredCard';
+import Modal from './Modal';
 
-const CardManagement = ({ cards }) => {
-  const navigate = useNavigate();
-
+const CardManagement = ({ cards, isOpen, onClose, openCardAddPage }) => {
   const handleAddCard = () => {
-    navigate('/add-card');
-  };
-
-  const handleClose = () => {
-    navigate('/');
+    openCardAddPage();
   };
 
   return (
-    <div className="card-management">
-      <div className="card-header">
-        <h2>보유카드</h2>
-        <button className="close-button" onClick={handleClose}>×</button>
-      </div>
-      <div className="cards-list">
-        {cards.length === 0 ? (
-          <div className="no-cards">
-            <p>새로운 카드를 등록해주세요.</p>
-          </div>
-        ) : (
-          cards.map((card, index) => <RegisteredCard key={index} card={card} />)
-        )}
-        <AddCardButton onClick={handleAddCard} />
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <div className="card-management">
+        <div className="card-header">
+          <h2>보유카드</h2>
+          <button className="close-button" onClick={onClose}>×</button>
+        </div>
+        <div className="cards-list">
+          {cards.length === 0 ? (
+            <div className="no-cards">
+              <p>새로운 카드를 등록해주세요.</p>
+            </div>
+          ) : (
+            cards.map((card, index) => <RegisteredCard key={index} card={card} />)
+          )}
+          <AddCardButton onClick={handleAddCard} />
+        </div>
       </div>
-    </div>
+    </Modal>
   );
 };
 

diff --git a/src/components/ShoppingCart.js b/src/components/ShoppingCart.js
@@ -1,12 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useCart } from '../context/CartContext';
+import CardManagement from './CardManagement';
+import CardAddPage from './CardAddPage';
 import './ShoppingCart.css';
 
 const ShoppingCart = () => {
   const navigate = useNavigate();
   const { cart } = useCart();
   const [quantities, setQuantities] = useState(cart.map(item => ({ id: item.id, quantity: 1 })));
+  const [isCardManagementOpen, setIsCardManagementOpen] = useState(false);
+  const [isCardAddOpen, setIsCardAddOpen] = useState(false);
+  const [cards, setCards] = useState([]); // 카드 상태 추가
 
   useEffect(() => {
     window.scrollTo(0, 0);
@@ -21,7 +26,7 @@ const ShoppingCart = () => {
   };
 
   const handleCheckout = () => {
-    navigate('/card-management');
+    setIsCardManagementOpen(true);
   };
 
   const handleQuantityChange = (id, delta) => {
@@ -34,6 +39,14 @@ const ShoppingCart = () => {
     );
   };
 
+  const openCardAddPage = () => setIsCardAddOpen(true);
+  const closeCardAddPage = () => setIsCardAddOpen(false);
+
+  const addCard = (newCard) => {
+    setCards(prevCards => [...prevCards, newCard]); // 새로운 카드를 기존 카드 목록에 추가
+    setIsCardAddOpen(false);
+  };
+
   return (
     <div className="shopping-cart-page">
       <div className="shopping-cart-header">
@@ -76,6 +89,17 @@ const ShoppingCart = () => {
           </>
         )}
       </div>
+      <CardManagement 
+        cards={cards} // 카드 상태 전달
+        isOpen={isCardManagementOpen} 
+        onClose={() => setIsCardManagementOpen(false)} 
+        openCardAddPage={openCardAddPage}
+      />
+      <CardAddPage 
+        addCard={addCard} // addCard 함수 전달
+        isOpen={isCardAddOpen} 
+        onClose={closeCardAddPage} 
+      />
     </div>
   );
 };