Merge remote-tracking branch 'origin/feature/SP1' into SP1/#566-cart-…

…page-api

src/common/Modal/DeleteCartModal/DeleteCartModal.tsx

@@ -0,0 +1,24 @@
+import ModalPortal from '../ModalPortal';
+import EscapeModalForm from '../EscapeModal/EscapeModalForm';
+
+interface DeleteCartModalProps {
+  setModalOn: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const DeleteCartModal = ({ setModalOn }: DeleteCartModalProps) => {
+  return (
+    <ModalPortal>
+      <EscapeModalForm
+        onClose={() => setModalOn(false)}
+        pageName={'CartPage'}
+        title={'선택한 상품을 삭제하시나요?'}
+        subTitle={'삭제하시면 결제 대상에서'}
+        subTitle2={'해당 상품이 제외돼요'}
+        continueBtn={'삭제하기'}
+        stopBtn={'그만하기'}
+      />
+    </ModalPortal>
+  );
+};
+
+export default DeleteCartModal;

src/common/Modal/EscapeModal/EscapeModalForm.tsx

@@ -26,10 +26,21 @@ const EscapeModalForm = ({
 }: EscapeModalFormProps) => {
   const navigate = useNavigate();
 
+  const handleClickContinueBtn = () => {
+    onClose();
+    switch (pageName) {
+      case 'CartPage':
+        // 아이템 삭제 로직 추가
+        break;
+
+      default:
+        break;
+    }
+  };
+
   const handleClickStopBtn = () => {
     onClose();
     switch (pageName) {
-      // 페이지 이름과 라우팅 주소는 나중에 보고 수정
       case 'LoginPage':
         navigate('/');
         removeAccessToken();
@@ -43,6 +54,10 @@ const EscapeModalForm = ({
         navigate('/onboarding');
         break;
 
+      case 'CartPage':
+        navigate('/cart');
+        break;
+
       default:
         navigate('/');
         break;
@@ -60,7 +75,7 @@ const EscapeModalForm = ({
         </St.ModalTitleWrapper>
 
         <St.BtnWrapper>
-          <St.ContinueBtn onClick={onClose}>{continueBtn}</St.ContinueBtn>
+          <St.ContinueBtn onClick={handleClickContinueBtn}>{continueBtn}</St.ContinueBtn>
           <St.StopBtn onClick={handleClickStopBtn}>{stopBtn}</St.StopBtn>
         </St.BtnWrapper>
       </St.ModalContent>

src/components/Cart/CartBottom.tsx

@@ -25,6 +25,8 @@ const St = {
     color: ${({ theme }) => theme.colors.gray8};
   `,
   LightBorder: styled.hr`
+    width: 100%;
+    max-width: 43rem;
     height: 1.3rem;
     border: none;
     background-color: ${({ theme }) => theme.colors.gray0};
@@ -34,6 +36,7 @@ const St = {
     position: fixed;
     bottom: 7rem;
     width: 100%;
+    max-width: 43rem;
   `,
 };
 

src/components/Cart/CartFooter.tsx

@@ -22,6 +22,7 @@ const St = {
     position: fixed;
     bottom: 0;
     width: 100%;
+    max-width: 43rem;
     height: 7rem;
   `,
 

src/components/Cart/CartItem.tsx

@@ -1,6 +1,11 @@
 import styled from 'styled-components';
 import { IcCancelDark, IcMinus, IcMinusOneunder, IcPlus } from '../../assets/icon';
 import { useState } from 'react';
+import DeleteCartModal from '../../common/Modal/DeleteCartModal/DeleteCartModal';
+
+const CartItem = ({ id, name, price, originalPrice }) => {
+  const [count, setCount] = useState(1);
+  const [modalOn, setModalOn] = useState(false);
 
 const CartItem = ({
   id,
@@ -46,7 +51,8 @@ const CartItem = ({
         </St.TitleSection>
       </St.ItemInformation>
       <St.ButtonSection>
-        <IcCancelDark />
+        <IcCancelDark onClick={() => setModalOn(true)} />
+        {modalOn && <DeleteCartModal setModalOn={setModalOn} />}
         <St.Stepper>
           {quantity === 1 ? (
             <IcMinusOneunder />

src/page/MainPage.tsx

@@ -13,7 +13,6 @@ import SideMenu from '../common/SideMenu';
 import HotCustom from '../common/HotCustom';
 import Toast from '../common/ToastMessage/Toast';
 import { useLocation } from 'react-router';
-import WelcomeModal from '../common/Modal/WelcomeModal/WelcomeModal';
 import ChargePointCompleteModal from '../common/Modal/ChargePointModal/ChargePointCompleteModal';
 import MainArticle from '../components/MainPage/MainArticle';
 
@@ -26,9 +25,6 @@ const MainPage = () => {
 
   const location = useLocation();
 
-  const [isWelcomeModalOpen, setIsWelcomeModalOpen] = useState(
-    location.state?.isWellcomeModalOpen || false,
-  );
   const [isPointModalOpen, setIsPointModalOpen] = useState(
     location.state?.isPointModalOpen || false,
   );
@@ -76,7 +72,6 @@ const MainPage = () => {
       renderHeader={reanderMainPageHeader}
       footer={<MainFooter isFooterVisible={isFooterVisible} />}
     >
-      {isWelcomeModalOpen && <WelcomeModal setModalOn={setIsWelcomeModalOpen} />}
       <MainBanner />
       <HotCustom isList={false} />
       <MainEventBanner setToast={setToast} />