-
- {nickname}님 안녕하세요!
+
+ 
+
);
}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 395f3c8..c4971d8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,3 +3,305 @@
@theme {
--color-primary: #5bb5f8;
}
+.no-scrollbar {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+ display: none;
+}
+@keyframes questy-float {
+ 0%,
+ 100% {
+ transform: translateY(0) rotate(-1deg);
+ }
+
+ 50% {
+ transform: translateY(-8px) rotate(2deg);
+ }
+}
+
+.animate-questy-float {
+ animation: questy-float 3s ease-in-out infinite;
+}
+@keyframes questy-tumble {
+ 0% {
+ transform: translateY(0) rotate(-1deg) scale(1);
+ }
+
+ 18% {
+ transform: translateY(-7px) rotate(2deg) scale(1.02);
+ }
+
+ 36% {
+ transform: translateY(0) rotate(-1deg) scale(1);
+ }
+
+ 48% {
+ transform: translateY(-10px) rotate(8deg) scale(1.04);
+ }
+
+ 56% {
+ transform: translateY(-12px) rotate(180deg) scale(1.05);
+ }
+
+ 64% {
+ transform: translateY(-8px) rotate(360deg) scale(1.04);
+ }
+
+ 72% {
+ transform: translateY(0) rotate(2deg) scale(1);
+ }
+
+ 86% {
+ transform: translateY(-6px) rotate(-2deg) scale(1.02);
+ }
+
+ 100% {
+ transform: translateY(0) rotate(-1deg) scale(1);
+ }
+}
+
+.animate-questy-tumble {
+ transform-origin: center center;
+ animation: questy-tumble 5.6s ease-in-out infinite;
+}
+@keyframes questy-airplane-fly {
+ 0% {
+ transform: translate(0, 0) rotate(-2deg) scale(1);
+ }
+
+ 12% {
+ transform: translate(-4px, -6px) rotate(2deg) scale(1.02);
+ }
+
+ 26% {
+ transform: translate(6px, 4px) rotate(-1deg) scale(1);
+ }
+
+ 42% {
+ transform: translate(18px, -12px) rotate(5deg) scale(1.03);
+ }
+
+ 56% {
+ transform: translate(38px, -24px) rotate(9deg) scale(1.05);
+ }
+
+ 68% {
+ transform: translate(78px, -38px) rotate(14deg) scale(1.02);
+ opacity: 1;
+ }
+
+ 76% {
+ transform: translate(128px, -54px) rotate(18deg) scale(0.94);
+ opacity: 0;
+ }
+
+ 77% {
+ transform: translate(-120px, 36px) rotate(-10deg) scale(0.9);
+ opacity: 0;
+ }
+
+ 86% {
+ transform: translate(-58px, 16px) rotate(-5deg) scale(0.96);
+ opacity: 1;
+ }
+
+ 94% {
+ transform: translate(-12px, -4px) rotate(2deg) scale(1.02);
+ }
+
+ 100% {
+ transform: translate(0, 0) rotate(-2deg) scale(1);
+ }
+}
+
+.animate-questy-airplane-fly {
+ transform-origin: center center;
+ animation: questy-airplane-fly 6.4s ease-in-out infinite;
+}
+
+@keyframes airplane-trail {
+ 0%,
+ 100% {
+ transform: translateX(0);
+ opacity: 0.4;
+ }
+
+ 45% {
+ transform: translateX(-16px);
+ opacity: 0.9;
+ }
+
+ 75% {
+ transform: translateX(-34px);
+ opacity: 0;
+ }
+}
+
+.animate-airplane-trail {
+ animation: airplane-trail 1.4s ease-in-out infinite;
+}
+
+.animate-airplane-trail-delay {
+ animation: airplane-trail 1.6s ease-in-out infinite;
+ animation-delay: 0.25s;
+}
+
+.animate-airplane-trail-slow {
+ animation: airplane-trail 1.8s ease-in-out infinite;
+ animation-delay: 0.45s;
+}
+@keyframes questy-wait {
+ 0%,
+ 100% {
+ transform: translateY(0) rotate(0deg) scale(1);
+ opacity: 1;
+ }
+
+ 15% {
+ transform: translateY(-4px) rotate(-2deg) scale(1.02);
+ opacity: 1;
+ }
+
+ 30% {
+ transform: translateY(2px) rotate(2deg) scale(0.99);
+ opacity: 1;
+ }
+
+ 42% {
+ transform: translateY(-3px) rotate(-1deg) scale(1.01);
+ opacity: 1;
+ }
+
+ 48% {
+ transform: translateY(0) scale(1);
+ opacity: 1;
+ }
+
+ 56% {
+ transform: translateY(-2px) scale(0.96);
+ opacity: 0;
+ }
+
+ 100% {
+ transform: translateY(0) scale(0.96);
+ opacity: 0;
+ }
+}
+
+.animate-questy-wait {
+ animation: questy-wait 7.2s ease-in-out infinite;
+}
+
+@keyframes plane-enter-and-fly {
+ 0% {
+ transform: translateX(180px) translateY(18px) rotate(0deg) scale(0.95);
+ opacity: 0;
+ }
+
+ 16% {
+ transform: translateX(180px) translateY(18px) rotate(0deg) scale(0.95);
+ opacity: 0;
+ }
+
+ 28% {
+ transform: translateX(32px) translateY(8px) rotate(-2deg) scale(1);
+ opacity: 1;
+ }
+
+ 40% {
+ transform: translateX(8px) translateY(4px) rotate(1deg) scale(1);
+ opacity: 1;
+ }
+
+ 52% {
+ transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
+ opacity: 1;
+ }
+
+ 66% {
+ transform: translateX(-32px) translateY(-18px) rotate(-6deg) scale(1.02);
+ opacity: 1;
+ }
+
+ 78% {
+ transform: translateX(-92px) translateY(-46px) rotate(-10deg) scale(0.98);
+ opacity: 1;
+ }
+
+ 88% {
+ transform: translateX(-156px) translateY(-84px) rotate(-12deg) scale(0.9);
+ opacity: 0;
+ }
+
+ 89% {
+ transform: translateX(190px) translateY(28px) rotate(3deg) scale(0.92);
+ opacity: 0;
+ }
+
+ 100% {
+ transform: translateX(180px) translateY(18px) rotate(0deg) scale(0.95);
+ opacity: 0;
+ }
+}
+
+.animate-plane-enter-and-fly {
+ animation: plane-enter-and-fly 7.2s ease-in-out infinite;
+}
+
+@keyframes questy-on-plane {
+ 0%,
+ 100% {
+ transform: translateY(0) rotate(0deg);
+ }
+
+ 30% {
+ transform: translateY(-1px) rotate(-1deg);
+ }
+
+ 60% {
+ transform: translateY(2px) rotate(1deg);
+ }
+
+ 80% {
+ transform: translateY(-2px) rotate(-2deg);
+ }
+}
+
+.animate-questy-on-plane {
+ animation: questy-on-plane 1.6s ease-in-out infinite;
+}
+
+@keyframes air-trail {
+ 0%,
+ 100% {
+ opacity: 0;
+ transform: translateX(0) scaleX(0.9);
+ }
+
+ 35% {
+ opacity: 0.85;
+ transform: translateX(-6px) scaleX(1);
+ }
+
+ 80% {
+ opacity: 0;
+ transform: translateX(-24px) scaleX(1.1);
+ }
+}
+
+.animate-air-trail-1 {
+ animation: air-trail 1s ease-in-out infinite;
+}
+
+.animate-air-trail-2 {
+ animation: air-trail 1.1s ease-in-out infinite;
+ animation-delay: 0.1s;
+}
+
+.animate-air-trail-3 {
+ animation: air-trail 1.2s ease-in-out infinite;
+ animation-delay: 0.2s;
+}
\ No newline at end of file
diff --git a/src/layouts/BottomNavigationLayout.tsx b/src/layouts/BottomNavigationLayout.tsx
index 49f6432..de03ede 100644
--- a/src/layouts/BottomNavigationLayout.tsx
+++ b/src/layouts/BottomNavigationLayout.tsx
@@ -38,7 +38,7 @@ const NAV_ITEMS = [
export default function BottomNavigationLayout() {
return (
<>
-
+
@@ -49,38 +49,29 @@ export default function BottomNavigationLayout() {
const BottomNavigation = () => {
return (
-
+
+ 안녕 {nickname}님!
-
+
-
+
미션으로 떠나는
- 특별한 여행
+ 특별한 여행
-
- 특별한 여행 + 특별한 여행
+
Questy와 함께 일상을
여행으로 바꿔보세요
+ {/* 1) 처음 가만히 떠 있는 퀘스티 */}
+ 
+
+ {/* 2) 1~2초 뒤 들어오는 비행기 + 탑승 퀘스티 */}
+
+ 
+
+
+
+
+
+
+
+