Merge pull request #77 from Beside-Potenday/kiyeong

feat: loading 애니메이션 추가
Beside-Potenday · Aug 7, 2024 · e345cfb · e345cfb
2 parents 5bf22b8 + 1690988
commit e345cfb
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 15 deletions.
diff --git a/public/images/loading.mp4 b/public/images/loading.mp4
diff --git a/public/images/loading.svg b/public/images/loading.svg
diff --git a/src/components/HomePage/TestersBox/Buttons.tsx b/src/components/HomePage/TestersBox/Buttons.tsx
@@ -7,11 +7,9 @@ import {
   ModalOverlay,
   ModalContent,
   ModalHeader,
-  ModalCloseButton,
   ModalBody,
   ModalFooter,
   Button,
-  Spinner,
 } from '@chakra-ui/react';
 import { useMail } from '@/Provider/MailContext';
 import { usePostBusiness } from '@/api/hooks/usePostBusiness';
@@ -97,16 +95,18 @@ export const Buttons = ({ handleListUniv, handleListBusiness, randomInput }: But
           <ModalOverlay />
           {isLoading ? (
             <SmallModalContent>
-              <ModalHeader>메일 생성 중...조금만 기다려 주세요!</ModalHeader>
-              <ModalCloseButton />
               <ModalBody>
-                <Spinner size="xl" />
+                <VideoContainer>
+                  <video src="/images/loading.mp4" autoPlay loop muted playsInline>
+                    Your browser does not support the video tag.
+                  </video>
+                  <OverlayImage src="/images/loading.svg" alt="Loading" />
+                </VideoContainer>
               </ModalBody>
             </SmallModalContent>
           ) : (
             <LargeModalContent>
               <StyledModalHeader>{title}</StyledModalHeader>
-              <ModalCloseButton />
               <StyledModalBody>
                 <p>{content}</p>
               </StyledModalBody>
@@ -201,7 +201,9 @@ const MailButton = styled(Button)`
 
 const SmallModalContent = styled(ModalContent)`
   width: auto;
+  max-width: 600px;
   height: auto;
+  max-height: 800px;
   border-radius: 10px;
   background: #ffffff;
   box-shadow: 0px 0px 15px 1px rgba(115, 128, 239, 0.3);
@@ -210,6 +212,14 @@ const SmallModalContent = styled(ModalContent)`
   justify-content: center;
 `;
 
+const OverlayImage = styled.img`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 101; /* Ensure the overlay is above the video */
+`;
+
 const LargeModalContent = styled(ModalContent)`
   width: auto;
   height: auto;
@@ -218,6 +228,20 @@ const LargeModalContent = styled(ModalContent)`
   box-shadow: 0px 0px 15px 1px rgba(115, 128, 239, 0.3);
 `;
 
+const VideoContainer = styled.div`
+  position: relative; /* Add this line */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+
+  video {
+    width: 100%;
+    height: auto;
+  }
+`;
+
 const StyledModalHeader = styled(ModalHeader)`
   margin-top: 10px;
   text-align: center;

diff --git a/src/components/Layout/UpperImage.tsx b/src/components/Layout/UpperImage.tsx
@@ -11,6 +11,7 @@ export const UpperImage = () => {
 
   return (
     <StyledWrapper>
+      <TransparentOverlay />
       <ImageContainer>
         <VStack spacing={4} align="stretch">
           <LeftBubble>
@@ -54,6 +55,17 @@ const StyledWrapper = styled(Box)`
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  position: relative;
+`;
+
+const TransparentOverlay = styled(Box)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+  z-index: 1;
 `;
 
 const ImageContainer = styled(Box)`
@@ -63,6 +75,7 @@ const ImageContainer = styled(Box)`
   align-items: center;
   justify-content: center;
   transform: translateY(-80px);
+  z-index: 2;
 `;
 
 const ArrowContainer = styled(Box)`
@@ -73,6 +86,7 @@ const ArrowContainer = styled(Box)`
   justify-content: center;
   cursor: pointer;
   margin-top: -90px; /* 화살표의 상단 마진 */
+  z-index: 2;
 `;
 
 const ArrowIcon = styled(Image)`

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -3,10 +3,12 @@ import { Outlet } from 'react-router-dom';
 import { Footer } from './Footer';
 import { HEADER_HEIGHT, MainHeader } from './Header/MainHeader';
 import { UpperImage } from './UpperImage';
+import { Box } from '@chakra-ui/react';
 
 export const Layout = () => {
   return (
     <Wrapper>
+      <TransparentOverlay />
       <HeaderPadding />
       <UpperImageWrapper>
         <UpperImage />
@@ -27,10 +29,20 @@ const Wrapper = styled.div`
   position: relative;
 `;
 
+const TransparentOverlay = styled(Box)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: ${HEADER_HEIGHT};
+  background: rgba(255, 255, 255, 0.3);
+  z-index: 1;
+`;
+
 const HeaderPadding = styled.div`
   width: 100%;
   height: ${HEADER_HEIGHT};
-  background-color: #E5EFFF;
+  background-color: #e5efff;
 `;
 
 const UpperImageWrapper = styled.div`

diff --git a/src/components/Mail/MailModal.tsx b/src/components/Mail/MailModal.tsx
@@ -10,7 +10,6 @@ import {
   Button,
   Input,
   Text,
-  Spinner,
 } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 import { mailSendUniv, mailSendBusiness } from '@/types';
@@ -256,25 +255,26 @@ export const MailModal = ({ isOpen, onOpen, onClose }: MailModalProps) => {
     >
       <ModalOverlay />
       <CustomModalContent>
-        {currentIndex > 0 && !isSubmitted && (
+        {currentIndex > 0 && !isLoading && !isSubmitted && (
           <ArrowUpButtonWrapper>
             <ArrowUpButton onClick={handlePrevClick} />
           </ArrowUpButtonWrapper>
         )}
         <CustomModalHeader>
-          {isSubmitted
-            ? title
-            : isLoading
-            ? '메일 생성 중 입니다...'
-            : currentModalHeaderContent[currentIndex]}
+          {isSubmitted ? title : isLoading ? '' : currentModalHeaderContent[currentIndex]}
         </CustomModalHeader>
         <CustomModalBody>
           {isSubmitted ? (
             <Text>{content}</Text>
           ) : (
             <>
               {isLoading ? (
-                <Spinner size="xl" />
+                <VideoContainer>
+                  <video src="/images/loading.mp4" autoPlay loop muted playsInline>
+                    Your browser does not support the video tag.
+                  </video>
+                  <OverlayImage src="/images/loading.svg" alt="Loading" />
+                </VideoContainer>
               ) : (
                 <>
                   {currentIndex === 0 && isActive === 'univ' && (
@@ -594,4 +594,26 @@ const PenIcon = styled.span`
   background-size: cover;
 `;
 
+const OverlayImage = styled.img`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 101; /* Ensure the overlay is above the video */
+`;
+
+const VideoContainer = styled.div`
+  position: relative; /* Add this line */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+
+  video {
+    width: 100%;
+    height: auto;
+  }
+`;
+
 export default MailModal;