Merge branch 'develop' of https://github.com/TEAM-TATTOUR/tattour-client

into Refactor/#596-order-page
TEAM-TATTOUR · Feb 24, 2024 · aebed0d · aebed0d
2 parents ce57798 + a25717e
commit aebed0d
Show file tree

Hide file tree

Showing 32 changed files with 616 additions and 467 deletions.
diff --git a/src/Router.tsx b/src/Router.tsx
@@ -23,10 +23,12 @@ import MagazinePage from './page/MagazinePage';
 import CartPage from './page/CartPage';
 import ExpirationPage from './page/Expiration/ExpirationPage';
 import OrderDepositPage from './page/Order/OrderDepositPage';
+import Interceptors from './libs/hooks/Interceptors';
 
 const Router = () => {
   return (
     <BrowserRouter>
+      <Interceptors />
       <ScrollToTop />
       <Routes>
         <Route path='/list' element={<ListPage />} />

diff --git a/src/common/BottomSheet.tsx b/src/common/BottomSheet.tsx
@@ -0,0 +1,94 @@
+import { ReactNode } from 'react';
+import Sheet from 'react-modal-sheet';
+import { SheetDetent } from 'react-modal-sheet/dist/types';
+import styled from 'styled-components';
+
+interface BottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  detent?: SheetDetent;
+  disableDrag: boolean;
+  children: ReactNode;
+}
+
+const Header = ({ disableDrag, children }: { disableDrag: boolean; children?: ReactNode }) => {
+  return <Sheet.Header disableDrag={disableDrag}>{children}</Sheet.Header>;
+};
+const Content = ({ children }: { children: ReactNode }) => {
+  return <Sheet.Content>{children}</Sheet.Content>;
+};
+const Container = ({ children, className }: { children: ReactNode; className?: string }) => {
+  return <Sheet.Container className={className}>{children}</Sheet.Container>;
+};
+const Scroller = ({ children }: { children: ReactNode }) => {
+  return <Sheet.Scroller>{children}</Sheet.Scroller>;
+};
+const Backdrop = ({ onTap }: { onTap: () => void }) => {
+  return <Sheet.Backdrop onTap={onTap} />;
+};
+const BottomSheet = ({ isOpen, onClose, detent, disableDrag, children }: BottomSheetProps) => {
+  return (
+    <Sheet
+      className='react-modal-sheet-wrapper'
+      isOpen={isOpen}
+      onClose={onClose}
+      detent={detent}
+      disableDrag={disableDrag}
+    >
+      <St.SheetWrapper>{children}</St.SheetWrapper>
+    </Sheet>
+  );
+};
+
+export const CustomSheet = Object.assign(BottomSheet, {
+  Header,
+  Content,
+  Container,
+  Backdrop,
+  Scroller,
+});
+
+const St = {
+  SheetWrapper: styled.div`
+    .react-modal-sheet-backdrop {
+      max-width: 43rem;
+      left: auto !important;
+      background-color: rgba(0, 0, 0, 0.6) !important;
+    }
+    .react-modal-sheet-container {
+      max-width: 43rem;
+      border-radius: 1rem 1rem 0 0;
+    }
+    .text-bottom-sheet {
+      padding: 2.5rem 2.4rem 0rem 2.4rem;
+      height: calc(100% - 10.6rem) !important;
+
+      left: initial !important;
+
+      & > div:first-child {
+        display: flex;
+        justify-content: space-between !important;
+      }
+    }
+    .detail-bottom-sheet {
+      padding: 2.5rem 0rem 7rem 0rem;
+      left: initial !important;
+
+      & > div:first-child {
+        display: flex;
+        justify-content: space-between !important;
+        margin-bottom: 2.8rem;
+        padding: 0rem 2.4rem 0rem 2.4rem;
+      }
+    }
+    .react-modal-sheet-header {
+      height: 1.6rem !important;
+    }
+    .react-modal-sheet-scroller {
+      padding-bottom: 6rem;
+    }
+    .react-modal-sheet-drag-indicator {
+      display: none;
+    }
+  `,
+};
diff --git a/src/common/Modal/CheckDepositModal/CheckDepositModal.tsx b/src/common/Modal/CheckDepositModal/CheckDepositModal.tsx
@@ -1,13 +1,17 @@
-import ModalPortal from '../ModalPortal';
 import EscapeModalForm from '../EscapeModal/EscapeModalForm';
+import ModalPortal from '../ModalPortal';
 
 interface CheckDepositModalProps {
   setModalOn: React.Dispatch<React.SetStateAction<boolean>>;
   setIsActiveNext: React.Dispatch<React.SetStateAction<boolean>>;
-  state: object;
+  depositModalHandler: () => void | Promise<void>;
 }
 
-const CheckDepositModal = ({ setModalOn, setIsActiveNext, state }: CheckDepositModalProps) => {
+const CheckDepositModal = ({
+  setModalOn,
+  setIsActiveNext,
+  depositModalHandler,
+}: CheckDepositModalProps) => {
   return (
     <ModalPortal>
       <EscapeModalForm
@@ -19,7 +23,7 @@ const CheckDepositModal = ({ setModalOn, setIsActiveNext, state }: CheckDepositM
         continueBtn={'입금했어요'}
         stopBtn={'돌아가기'}
         setIsActiveNext={setIsActiveNext}
-        state={state}
+        continueBtnFunc={() => depositModalHandler()}
       />
     </ModalPortal>
   );

diff --git a/src/common/Modal/CheckDepositModal/CustomCheckDepositModal.tsx b/src/common/Modal/CheckDepositModal/CustomCheckDepositModal.tsx
diff --git a/src/common/Modal/EscapeModal/EscapeModalForm.tsx b/src/common/Modal/EscapeModal/EscapeModalForm.tsx
@@ -1,13 +1,13 @@
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { IcCancelDark } from '../../../assets/icon';
-import { useNavigate } from 'react-router-dom';
 import { removeAccessToken } from '../../../libs/api';
 
 interface EscapeModalFormProps {
   redirectURL?: string;
   setIsActiveNext?: React.Dispatch<React.SetStateAction<boolean>>;
 
-  state?: object;
+  // state?: object;
 
   onClose: () => void;
   pageName: string;
@@ -16,15 +16,15 @@ interface EscapeModalFormProps {
   subTitle2: string;
   continueBtn: string;
   stopBtn: string;
-  continueBtnFunc?: () => void;
+  continueBtnFunc?: () => void | Promise<void>;
 
-  setStep?: React.Dispatch<React.SetStateAction<number>>;
+  // setStep?: React.Dispatch<React.SetStateAction<number>>;
 }
 
 const EscapeModalForm = ({
   redirectURL,
   setIsActiveNext,
-  state,
+
   onClose,
   pageName,
   title,
@@ -33,27 +33,28 @@ const EscapeModalForm = ({
   continueBtn,
   stopBtn,
   continueBtnFunc,
-  setStep,
 }: EscapeModalFormProps) => {
   const navigate = useNavigate();
 
   const handleClickContinueBtn = () => {
     onClose();
     switch (pageName) {
       case 'CartPage':
-        if (continueBtnFunc) {
-          continueBtnFunc();
-        }
+        continueBtnFunc && continueBtnFunc();
         break;
 
       case 'DepositPage':
-        navigate('/complete', { state: state && state });
+        continueBtnFunc && continueBtnFunc();
         break;
 
-      case 'CustomDepositPage':
-        if (!setStep) break; //setStep optional props라서 추가
-        setStep((prev) => prev + 1);
-        break;
+      // case 'DepositPage':
+      //   navigate('/complete', { state: state && state });
+      //   break;
+
+      // case 'CustomDepositPage':
+      //   if (!setStep) break; //setStep optional props라서 추가
+      //   setStep((prev) => prev + 1);
+      //   break;
 
       default:
         break;

diff --git a/src/common/SideMenu.tsx b/src/common/SideMenu.tsx
@@ -25,7 +25,11 @@ const SideMenu = ({ isSideMenuOpen, setIsSideMenuOpen }: SideMenuProps) => {
   };
 
   const handleClickMyTattooButton = () => {
-    navigate('/my-tattoo');
+    isLogin ? navigate('/my-tattoo') : navigate('/login');
+  };
+
+  const handleClickCartButton = () => {
+    isLogin ? navigate('/cart') : navigate('/login');
   };
 
   const NAV_MENU_ITEM = [
@@ -47,9 +51,7 @@ const SideMenu = ({ isSideMenuOpen, setIsSideMenuOpen }: SideMenuProps) => {
     {
       icon: <IcCart />,
       text: '장바구니',
-      clickHandler: () => {
-        navigate('/cart');
-      },
+      clickHandler: handleClickCartButton,
     },
   ];
 
@@ -181,7 +183,7 @@ const St = {
     justify-content: space-between;
     width: 100%;
     padding-left: 3rem;
-    padding-right: 2.4rem;
+    padding-right: 1.8rem;
 
     text-align: center;
 
@@ -196,19 +198,21 @@ const St = {
   `,
 
   SideMenuCSButton: styled.button`
-    ${({ theme }) => theme.fonts.body_medium_14};
+    ${({ theme }) => theme.fonts.body_bold_14};
     color: ${({ theme }) => theme.colors.gray3};
+    padding-right: 1.2rem;
   `,
 
   Delimeter: styled.div`
     width: 0.1rem;
     height: 1.4rem;
-    border: 0.1rem solid ${({ theme }) => theme.colors.gray1};
+    border: 0.01rem solid ${({ theme }) => theme.colors.gray1};
   `,
 
   SideMenuLogOutButton: styled.button`
-    ${({ theme }) => theme.fonts.body_medium_14};
+    ${({ theme }) => theme.fonts.body_bold_14};
     color: ${({ theme }) => theme.colors.gray3};
+    padding-left: 1.2rem;
   `,
 };
 

diff --git a/src/common/SideMenuUserInfo.tsx b/src/common/SideMenuUserInfo.tsx
@@ -15,7 +15,7 @@ const SideMenuUserInfo = ({ isLogin }: { isLogin: boolean }) => {
   ) : (
     <St.SideMenuAnonymousSection>
       <St.SideMenuLoginButton onClick={handleClickLoginButton}>
-        <St.SideMenuAnoymousTitle>로그인이 필요합니다</St.SideMenuAnoymousTitle>
+        <St.SideMenuAnoymousTitle>로그인이 필요해요</St.SideMenuAnoymousTitle>
         <IcArrowRightLight />
       </St.SideMenuLoginButton>
     </St.SideMenuAnonymousSection>
@@ -37,7 +37,7 @@ const St = {
   `,
 
   SideMenuAnoymousTitle: styled.h2`
-    font: ${({ theme }) => theme.fonts.title_semibold_16};
+    ${({ theme }) => theme.fonts.title_bold_16};
     color: ${({ theme }) => theme.colors.gray1};
   `,
 };

diff --git a/src/components/Cart/CartBottom.tsx b/src/components/Cart/CartBottom.tsx
@@ -37,6 +37,7 @@ const St = {
     bottom: 7rem;
     width: 100%;
     max-width: 43rem;
+    z-index: 10;
   `,
 };
 

diff --git a/src/components/Cart/CartItemSection.tsx b/src/components/Cart/CartItemSection.tsx
@@ -32,7 +32,7 @@ const St = {
     padding-top: 5.6rem;
     padding-left: 2.2rem;
     padding-right: 2.2rem;
-    height: calc(100vh - 30.2rem);
+    height: calc(100dvh - 30.2rem);
     overflow: scroll;
     &::-webkit-scrollbar {
       display: none;