diff --git a/src/assets/svgs/common/region-update-gradient-bg.svg b/src/assets/svgs/common/region-update-gradient-bg.svg new file mode 100644 index 0000000..30e6ac3 --- /dev/null +++ b/src/assets/svgs/common/region-update-gradient-bg.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/svgs/logo/card-congG.svg b/src/assets/svgs/logo/card-congG.svg new file mode 100644 index 0000000..4e6cadf --- /dev/null +++ b/src/assets/svgs/logo/card-congG.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/components/common/RegionUpdateDialog.tsx b/src/components/common/RegionUpdateDialog.tsx new file mode 100644 index 0000000..e984df2 --- /dev/null +++ b/src/components/common/RegionUpdateDialog.tsx @@ -0,0 +1,109 @@ +import React from 'react'; +import CongG from '@/assets/svgs/logo/card-congG.svg'; +import GradientBg from '@/assets/svgs/common/region-update-gradient-bg.svg'; + +interface Props { + open: boolean; + onGoHome: () => void; + onDontShowAgain: () => void; +} + +// 서울 지역 추가 안내 다이얼로그 +const RegionUpdateDialog: React.FC = ({ + open, + onGoHome, + onDontShowAgain, +}) => { + if (!open) return null; + + return ( +
+
+ {/* 상단 배경 */} +
+ {/* 그라데이션 원 배경 (SVG) */} + + + {/* 텍스트 영역 */} +
+
+ 많은 분들이 요청해주신 +
+ +
+
+ 서울 지역 가맹점이 + 업데이트 되었어요! +
+
+ + +
+ + {/* 콩쥐 이미지 */} +
+ 카드를 든 콩쥐 +
+ + {/* 블러 영역 */} +
+
+ + {/* 버튼 영역 */} +
+ +
+ +
+
+
+ ); +}; + +export default RegionUpdateDialog; diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx index a02ae55..ec713a7 100644 --- a/src/pages/home/HomePage.tsx +++ b/src/pages/home/HomePage.tsx @@ -1,12 +1,19 @@ - - import HeaderToCarouselSection from '@/components/home/HeaderToCarouselSection'; import CategorySection from '@/components/home/CategorySection'; import Top8StoreSection from '@/components/home/Top8StoreSection'; import ConvenienceStoreSection from '@/components/home/ConvenienceStoreSection'; import CommunitySection from '@/components/home/CommunitySection'; +import { useEffect, useState } from 'react'; +import RegionUpdateDialog from '@/components/common/RegionUpdateDialog'; function HomePage() { + const [openDialog, setOpenDialog] = useState(false); + + useEffect(() => { + const hidden = localStorage.getItem('hideRegionUpdateDialog'); + if (hidden !== 'true') setOpenDialog(true); + }, []); + return ( <>
@@ -19,6 +26,14 @@ function HomePage() {
+ setOpenDialog(false)} + onDontShowAgain={() => { + localStorage.setItem('hideRegionUpdateDialog', 'true'); + setOpenDialog(false); + }} + /> ); }