From efea8f6dd0cbe03131eb34a4b7dc27b5782bb538 Mon Sep 17 00:00:00 2001 From: soyeon <134855312+rlathdus@users.noreply.github.com> Date: Mon, 5 Feb 2024 02:06:01 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=EB=8B=AB=ED=9E=88=EB=8A=94=20=EC=95=A0?= =?UTF-8?q?=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/App.js | 2 + client/src/assets/sendcapsule_bottom.svg | 115 +++++++++++++++++++++++ client/src/assets/sendcapsule_top.svg | 33 +++++++ client/src/pages/SendCapsule.js | 29 ++++++ client/src/styles/style-sendcapsule.css | 76 +++++++++++++++ 5 files changed, 255 insertions(+) create mode 100644 client/src/assets/sendcapsule_bottom.svg create mode 100644 client/src/assets/sendcapsule_top.svg create mode 100644 client/src/pages/SendCapsule.js create mode 100644 client/src/styles/style-sendcapsule.css 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..cb28584 --- /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('/'); + }, 4000); + }, []); + + 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..37134d6 --- /dev/null +++ b/client/src/styles/style-sendcapsule.css @@ -0,0 +1,76 @@ +.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 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; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + /* 0.5초 동안 애니메이션, 2.7초 후 실행 */ + animation: fadeInAnimation 0.5s 2.7s ease forwards; + opacity: 0; +} + +@keyframes downAnimation { + from { + transform: translateY(-80px); + } + to { + transform: translateY(0); /* translateY 값을 조절하여 이동 거리 조절 가능 */ + } +} + +@keyframes fadeOutAnimation { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +@keyframes fadeInAnimation { + from { + opacity: 0; + } + to { + opacity: 1; + } +} From b563f057ce6767a511f40fbe0ad4f3f23639d6ca Mon Sep 17 00:00:00 2001 From: rlathdus <134855312+rlathdus@users.noreply.github.com> Date: Mon, 5 Feb 2024 02:58:52 +0900 Subject: [PATCH 2/3] Add files via upload --- client/src/pages/SendCapsule.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/pages/SendCapsule.js b/client/src/pages/SendCapsule.js index cb28584..d813bcf 100644 --- a/client/src/pages/SendCapsule.js +++ b/client/src/pages/SendCapsule.js @@ -10,8 +10,8 @@ const SendCapsule = () => { useEffect(() => { // 3초 후 메인페이지로 이동 setTimeout(() => { - navigate('/'); - }, 4000); + navigate('/home'); + }, 7000); }, []); return ( From 0e4feb99d42e1298a82d4b430dfb6bd1d79184ff Mon Sep 17 00:00:00 2001 From: rlathdus <134855312+rlathdus@users.noreply.github.com> Date: Mon, 5 Feb 2024 03:01:44 +0900 Subject: [PATCH 3/3] Add files via upload --- client/src/styles/style-sendcapsule.css | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/client/src/styles/style-sendcapsule.css b/client/src/styles/style-sendcapsule.css index 37134d6..3aa676b 100644 --- a/client/src/styles/style-sendcapsule.css +++ b/client/src/styles/style-sendcapsule.css @@ -15,8 +15,9 @@ justify-content: center; position: relative; padding: 40px 40px; + animation: fadeOutAnimation 1s 2.5s ease forwards; - animation: fadeOutAnimation 1s 2s ease forwards; /* 애니메이션 추가 */ + /*animation: fadeOutAnimation 1s 2s ease forwards; /* 애니메이션 추가 */ } .capsule-top { @@ -38,13 +39,13 @@ font-weight: 700; line-height: normal; z-index: 1; - position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 0.5초 동안 애니메이션, 2.7초 후 실행 */ - animation: fadeInAnimation 0.5s 2.7s ease forwards; + animation: fadeInTextAnimation 0.5s 3.5s ease forwards; + /*2.7s ease forwards;*/ opacity: 0; } @@ -57,20 +58,32 @@ } } +@keyframes fadeInAnimation { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + @keyframes fadeOutAnimation { from { opacity: 1; } to { opacity: 0; + display: none; } } -@keyframes fadeInAnimation { +@keyframes fadeInTextAnimation { from { opacity: 0; + transform: translate(-50%, -50%); /* 위쪽 중앙에서 시작하도록 수정 */ } to { opacity: 1; + transform: translate(-50%, -50%); } }