diff --git a/client/src/App.js b/client/src/App.js index bb5cba8..393f8ba 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -11,6 +11,7 @@ import CapsuleList from './pages/CapsuleList'; import CapsuleDetail from './pages/CapsuleDetail'; import ThemeList from './pages/ThemeList'; import Three from './pages/Three'; +import SendCapsule from './pages/SendCapsule'; function App() { return ( @@ -27,6 +28,7 @@ function App() { } /> } /> } /> + } /> ); diff --git a/client/src/assets/sendcapsule_bottom.svg b/client/src/assets/sendcapsule_bottom.svg new file mode 100644 index 0000000..d1454a8 --- /dev/null +++ b/client/src/assets/sendcapsule_bottom.svg @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/assets/sendcapsule_top.svg b/client/src/assets/sendcapsule_top.svg new file mode 100644 index 0000000..b2d928b --- /dev/null +++ b/client/src/assets/sendcapsule_top.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/pages/SendCapsule.js b/client/src/pages/SendCapsule.js new file mode 100644 index 0000000..d813bcf --- /dev/null +++ b/client/src/pages/SendCapsule.js @@ -0,0 +1,29 @@ +import React, { useEffect, useState } from 'react'; +import '../styles/style-sendcapsule.css'; +import CapsuleTop from '../assets/sendcapsule_top.svg'; +import CapsuleBottom from '../assets/sendcapsule_bottom.svg'; +import { useNavigate } from 'react-router-dom'; + +const SendCapsule = () => { + const navigate = useNavigate(); + + useEffect(() => { + // 3초 후 메인페이지로 이동 + setTimeout(() => { + navigate('/home'); + }, 7000); + }, []); + + return ( +
+
+ 캡슐 뚜껑 + 캡슐 몸통 +
+ +

전송을 완료했습니다!

+
+ ); +}; + +export default SendCapsule; diff --git a/client/src/styles/style-sendcapsule.css b/client/src/styles/style-sendcapsule.css new file mode 100644 index 0000000..3aa676b --- /dev/null +++ b/client/src/styles/style-sendcapsule.css @@ -0,0 +1,89 @@ +.sendcapsule { + height: 100vh; + overflow: hidden; + position: relative; +} + +.capsule-image { + max-width: 200px; + display: flex; + flex-direction: column; + height: 100%; + box-sizing: border-box; + margin: 0 auto; + align-items: center; + justify-content: center; + position: relative; + padding: 40px 40px; + animation: fadeOutAnimation 1s 2.5s ease forwards; + + /*animation: fadeOutAnimation 1s 2s ease forwards; /* 애니메이션 추가 */ +} + +.capsule-top { + animation: downAnimation 1.7s ease forwards; /* 애니메이션 추가 */ +} + +.capsule-bottom { + margin-top: -162px; +} + +.sendcapsule p.complete-text { + position: absolute; + color: #fff; + font-family: Helvetica; + font-size: 32px; + width: 100%; + text-align: center; + font-style: normal; + font-weight: 700; + line-height: normal; + z-index: 1; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + /* 0.5초 동안 애니메이션, 2.7초 후 실행 */ + animation: fadeInTextAnimation 0.5s 3.5s ease forwards; + /*2.7s ease forwards;*/ + opacity: 0; +} + +@keyframes downAnimation { + from { + transform: translateY(-80px); + } + to { + transform: translateY(0); /* translateY 값을 조절하여 이동 거리 조절 가능 */ + } +} + +@keyframes fadeInAnimation { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes fadeOutAnimation { + from { + opacity: 1; + } + to { + opacity: 0; + display: none; + } +} + +@keyframes fadeInTextAnimation { + from { + opacity: 0; + transform: translate(-50%, -50%); /* 위쪽 중앙에서 시작하도록 수정 */ + } + to { + opacity: 1; + transform: translate(-50%, -50%); + } +}