diff --git a/public/images/loading.mp4 b/public/images/loading.mp4
new file mode 100644
index 0000000..a5c74ac
Binary files /dev/null and b/public/images/loading.mp4 differ
diff --git a/public/images/loading.svg b/public/images/loading.svg
new file mode 100644
index 0000000..9febcc1
--- /dev/null
+++ b/public/images/loading.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/components/HomePage/TestersBox/Buttons.tsx b/src/components/HomePage/TestersBox/Buttons.tsx
index 77331fe..61ed1f5 100644
--- 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
{isLoading ? (
- 메일 생성 중...조금만 기다려 주세요!
-
-
+
+
+
+
) : (
{title}
-
{content}
@@ -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
index 1984b13..74eb569 100644
--- a/src/components/Layout/UpperImage.tsx
+++ b/src/components/Layout/UpperImage.tsx
@@ -11,6 +11,7 @@ export const UpperImage = () => {
return (
+
@@ -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
index 1b695e9..bd64e82 100644
--- 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 (
+
@@ -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
index cc1dcd8..fc67349 100644
--- 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,17 +255,13 @@ export const MailModal = ({ isOpen, onOpen, onClose }: MailModalProps) => {
>
- {currentIndex > 0 && !isSubmitted && (
+ {currentIndex > 0 && !isLoading && !isSubmitted && (
)}
- {isSubmitted
- ? title
- : isLoading
- ? '메일 생성 중 입니다...'
- : currentModalHeaderContent[currentIndex]}
+ {isSubmitted ? title : isLoading ? '' : currentModalHeaderContent[currentIndex]}
{isSubmitted ? (
@@ -274,7 +269,12 @@ export const MailModal = ({ isOpen, onOpen, onClose }: MailModalProps) => {
) : (
<>
{isLoading ? (
-
+
+
+
+
) : (
<>
{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;