From b80fb7d4cbcf4ce4da48f0b6fa7617ce477ee6eb Mon Sep 17 00:00:00 2001 From: seojeongm Date: Sat, 1 Nov 2025 14:27:38 +0900 Subject: [PATCH 1/7] =?UTF-8?q?chore:=20=EB=85=B8=EC=85=98=20url=20?= =?UTF-8?q?=EC=83=81=EC=88=98=EC=97=90=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/constants/urlConstants.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/shared/constants/urlConstants.ts diff --git a/src/shared/constants/urlConstants.ts b/src/shared/constants/urlConstants.ts new file mode 100644 index 0000000..31c6e0a --- /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'; From d3916ce729b29d61da3faf05e8f9945ad0c77fd3 Mon Sep 17 00:00:00 2001 From: seojeongm Date: Sat, 1 Nov 2025 17:48:17 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=EC=9A=94=EC=83=81=ED=95=9C=20UI?= =?UTF-8?q?=EB=A1=9C=20=EA=B8=B0=EB=8A=A5=EC=9D=80=20=EC=99=84=EB=A3=8C=20?= =?UTF-8?q?=EC=88=98=EB=B9=88=EC=95=84=20=EB=8F=84=EC=99=80=EC=A4=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/components/card/OnboardingCard.tsx | 34 ++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/src/shared/components/card/OnboardingCard.tsx b/src/shared/components/card/OnboardingCard.tsx index 5474a51..a3097bd 100644 --- a/src/shared/components/card/OnboardingCard.tsx +++ b/src/shared/components/card/OnboardingCard.tsx @@ -11,6 +11,7 @@ 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' }, @@ -66,12 +67,43 @@ export default function OnboardingCard() {
{cards.map((card) => { const IconComponent = card.icon; + return (
- + {/* ✅ 변경1: absolute 대신 Grid로 같은 셀에 SVG와 오버레이를 겹치기 */} +
+ {/* SVG 그대로 */} + + + {/* ✅ 변경2: card0에서만 보이는 오버레이(텍스트/버튼). SVG 바깥으로 못 나가게 overflow-hidden 상태 */} + {card.id === 'card0' && ( +
+
+ {/* 문장 부분 */} +

+ SNACK + 을 만든 + + SNACKER + 들을 소개합니다! +

+ + {/* 버튼 */} + + 보러가기 > + +
+
+ )} +
); })} From 1ffe07618f47ff467ad5db0a62d43ab7972467e3 Mon Sep 17 00:00:00 2001 From: sooloin Date: Mon, 3 Nov 2025 00:02:20 +0900 Subject: [PATCH 3/7] =?UTF-8?q?fix:=20=EC=8A=A4=EB=82=B4=EC=BB=A4=20?= =?UTF-8?q?=EC=86=8C=EA=B0=9C=20=EC=98=A8=EB=B3=B4=EB=94=A9=20=EC=B9=B4?= =?UTF-8?q?=EB=93=9C=20svg=20=EB=B3=80=EA=B2=BD=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/OnBoardingCardSnacker.svg | 91 +++++++++++++++++++ src/shared/components/card/OnboardingCard.tsx | 39 +------- 2 files changed, 96 insertions(+), 34 deletions(-) create mode 100644 src/assets/OnBoardingCardSnacker.svg diff --git a/src/assets/OnBoardingCardSnacker.svg b/src/assets/OnBoardingCardSnacker.svg new file mode 100644 index 0000000..dcef07c --- /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 a3097bd..8d68e7f 100644 --- a/src/shared/components/card/OnboardingCard.tsx +++ b/src/shared/components/card/OnboardingCard.tsx @@ -1,20 +1,20 @@ 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' }, @@ -73,37 +73,8 @@ export default function OnboardingCard() { key={card.id} className="scroll-snap-center flex h-[240px] w-full flex-shrink-0 flex-col rounded-[16px] sm:h-[260px] sm:w-auto sm:rounded-[20px] lg:h-[280px] lg:w-auto lg:rounded-[24px]" > - {/* ✅ 변경1: absolute 대신 Grid로 같은 셀에 SVG와 오버레이를 겹치기 */} -
- {/* SVG 그대로 */} - - - {/* ✅ 변경2: card0에서만 보이는 오버레이(텍스트/버튼). SVG 바깥으로 못 나가게 overflow-hidden 상태 */} - {card.id === 'card0' && ( -
-
- {/* 문장 부분 */} -

- SNACK - 을 만든 - - SNACKER - 들을 소개합니다! -

- - {/* 버튼 */} - - 보러가기 > - -
-
- )} -
+ {/* SVG */} +
); })} From de2b509ddaf3b269664e52079851556f357f08a8 Mon Sep 17 00:00:00 2001 From: sooloin Date: Mon, 3 Nov 2025 00:27:31 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=EC=98=A8=EB=B3=B4=EB=94=A9=20?= =?UTF-8?q?=EC=B9=B4=EB=93=9C=200=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C,=20?= =?UTF-8?q?=EC=83=88=20=ED=83=AD=EC=97=90=EC=84=9C=20=EC=86=8C=EA=B0=9C=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EA=B0=80=20=EC=97=B4=EB=A6=AC?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=ED=95=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/components/card/OnboardingCard.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/shared/components/card/OnboardingCard.tsx b/src/shared/components/card/OnboardingCard.tsx index 8d68e7f..4071d0b 100644 --- a/src/shared/components/card/OnboardingCard.tsx +++ b/src/shared/components/card/OnboardingCard.tsx @@ -12,6 +12,7 @@ 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: OnBoardingCardSnacker, title: 'OnBoarding Card 0' }, @@ -67,11 +68,19 @@ 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 */} From 191b347d11fb753b7b25da8dbff7ecd33c842a61 Mon Sep 17 00:00:00 2001 From: sooloin Date: Mon, 3 Nov 2025 00:36:55 +0900 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=EC=98=A8=EB=B3=B4=EB=94=A9=20?= =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=ED=98=B8=EB=B2=84=20=EC=8B=9C=20sacle=20?= =?UTF-8?q?=EB=B0=8F=20shadow=20=ED=9A=A8=EA=B3=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/components/card/OnboardingCard.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/shared/components/card/OnboardingCard.tsx b/src/shared/components/card/OnboardingCard.tsx index 4071d0b..ae4e82f 100644 --- a/src/shared/components/card/OnboardingCard.tsx +++ b/src/shared/components/card/OnboardingCard.tsx @@ -74,7 +74,9 @@ export default function OnboardingCard() {
Date: Mon, 3 Nov 2025 01:00:11 +0900 Subject: [PATCH 6/7] =?UTF-8?q?feat:=20=EC=98=A8=EB=B3=B4=EB=94=A9=20?= =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=ED=85=8C=EB=B8=94=EB=A6=BF/=EB=AA=A8?= =?UTF-8?q?=EB=B0=94=EC=9D=BC=20=EA=B2=BD=EC=9A=B0=20=EB=A7=90=ED=92=8D?= =?UTF-8?q?=EC=84=A0=20=EB=9D=84=EC=9B=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/components/card/OnboardingCard.tsx | 38 ++++++++++++++++++- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/src/shared/components/card/OnboardingCard.tsx b/src/shared/components/card/OnboardingCard.tsx index ae4e82f..c020b65 100644 --- a/src/shared/components/card/OnboardingCard.tsx +++ b/src/shared/components/card/OnboardingCard.tsx @@ -27,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]); @@ -42,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 (
{/* 캐러셀 박스 */} @@ -64,7 +82,7 @@ export default function OnboardingCard() { {/* Embla 캐러셀 */} -
+
{cards.map((card) => { const IconComponent = card.icon; @@ -73,7 +91,7 @@ export default function OnboardingCard() { return (
{/* SVG */} + + {/* 모바일/태블릿용 힌트*/} + {isCard0 && showMobileHint && ( +
+ {/* 말풍선 박스 */} +
+ 스내커 보러가기 + {/* 말풍선 꼬리표 */} +
+
+
+ )}
); })} From afbc6090affb5f85a87530cb4e12197d19751585 Mon Sep 17 00:00:00 2001 From: sooloin Date: Mon, 3 Nov 2025 01:16:25 +0900 Subject: [PATCH 7/7] =?UTF-8?q?fix:=20Embla=20=EC=BA=90=EB=9F=AC=EC=85=80?= =?UTF-8?q?=20overflow-hidden=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/components/card/OnboardingCard.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/shared/components/card/OnboardingCard.tsx b/src/shared/components/card/OnboardingCard.tsx index c020b65..27ab166 100644 --- a/src/shared/components/card/OnboardingCard.tsx +++ b/src/shared/components/card/OnboardingCard.tsx @@ -82,7 +82,7 @@ export default function OnboardingCard() { {/* Embla 캐러셀 */} -
+
{cards.map((card) => { const IconComponent = card.icon; @@ -91,7 +91,7 @@ export default function OnboardingCard() { return (