diff --git a/src/assets/OnBoardingCardSnacker.svg b/src/assets/OnBoardingCardSnacker.svg new file mode 100644 index 00000000..dcef07c1 --- /dev/null +++ b/src/assets/OnBoardingCardSnacker.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/components/card/OnboardingCard.tsx b/src/shared/components/card/OnboardingCard.tsx index 5474a512..27ab1664 100644 --- a/src/shared/components/card/OnboardingCard.tsx +++ b/src/shared/components/card/OnboardingCard.tsx @@ -1,19 +1,21 @@ import useEmblaCarousel from 'embla-carousel-react'; import { useCallback, useEffect, useState } from 'react'; -import OnBoardingCard0 from '@/assets/OnBoardingCard0.svg?react'; import OnBoardingCard1 from '@/assets/OnBoardingCard1.svg?react'; import OnBoardingCard2 from '@/assets/OnBoardingCard2.svg?react'; import OnBoardingCard3 from '@/assets/OnBoardingCard3.svg?react'; import OnBoardingCard4 from '@/assets/OnBoardingCard4.svg?react'; import OnBoardingCard5 from '@/assets/OnBoardingCard5.svg?react'; +// import OnBoardingCard0 from '@/assets/OnBoardingCard0.svg?react'; +import OnBoardingCardSnacker from '@/assets/OnBoardingCardSnacker.svg?react'; import LeftActiveArrowIcon from '@/shared/assets/left-arrow-active.svg?react'; import LeftInactiveArrowIcon from '@/shared/assets/left-arrow-inactive.svg?react'; import RightActiveArrowIcon from '@/shared/assets/right-arrow-active.svg?react'; import RightInactiveArrowIcon from '@/shared/assets/right-arrow-inactive.svg?react'; +import { SNACKER_NOTION_URL } from '@/shared/constants/urlConstants'; const cards = [ - { id: 'card0', icon: OnBoardingCard0, title: 'OnBoarding Card 0' }, + { id: 'card0', icon: OnBoardingCardSnacker, title: 'OnBoarding Card 0' }, { id: 'card1', icon: OnBoardingCard1, title: 'OnBoarding Card 1' }, { id: 'card2', icon: OnBoardingCard2, title: 'OnBoarding Card 2' }, { id: 'card3', icon: OnBoardingCard3, title: 'OnBoarding Card 3' }, @@ -25,6 +27,8 @@ export default function OnboardingCard() { const [emblaRef, embla] = useEmblaCarousel({ loop: false, align: 'center' }); const [selectedIndex, setSelectedIndex] = useState(0); const [scrollSnaps, setScrollSnaps] = useState([]); + const [showMobileHint, setShowMobileHint] = useState(true); + const [fadeOut, setFadeOut] = useState(false); const scrollTo = useCallback((index: number) => embla?.scrollTo(index), [embla]); const scrollPrev = useCallback(() => embla?.scrollPrev(), [embla]); @@ -40,6 +44,22 @@ export default function OnboardingCard() { embla.on('select', () => setSelectedIndex(embla.selectedScrollSnap())); }, [embla]); + // 모바일 힌트: 2초 후 fade-out 시작, 0.3초 후 완전히 사라짐 + useEffect(() => { + const fadeTimer = setTimeout(() => { + setFadeOut(true); + }, 2000); + + const hideTimer = setTimeout(() => { + setShowMobileHint(false); + }, 2300); + + return () => { + clearTimeout(fadeTimer); + clearTimeout(hideTimer); + }; + }, []); + return (
{/* 캐러셀 박스 */} @@ -66,12 +86,40 @@ export default function OnboardingCard() {
{cards.map((card) => { const IconComponent = card.icon; + const isCard0 = card.id === 'card0'; + return (
window.open(SNACKER_NOTION_URL, '_blank', 'noopener,noreferrer') + : undefined + } > + {/* SVG */} + + {/* 모바일/태블릿용 힌트*/} + {isCard0 && showMobileHint && ( +
+ {/* 말풍선 박스 */} +
+ 스내커 보러가기 + {/* 말풍선 꼬리표 */} +
+
+
+ )}
); })} diff --git a/src/shared/constants/urlConstants.ts b/src/shared/constants/urlConstants.ts new file mode 100644 index 00000000..31c6e0a8 --- /dev/null +++ b/src/shared/constants/urlConstants.ts @@ -0,0 +1 @@ +export const SNACKER_NOTION_URL = 'https://cheddar-gooseberry-e64.notion.site/snack-umc8th-2025';