diff --git a/src/api/store.ts b/src/api/store.ts new file mode 100644 index 0000000..61ba04e --- /dev/null +++ b/src/api/store.ts @@ -0,0 +1,8 @@ +// api/store.ts +import axios from '@/api/axiosInstance'; + +// 메인화면 가맹점 개수 조회 API +export const getRegionCount = async () => { + const res = await axios.get('/api/v1/store/region-count'); + return res.data.results.count as number; +}; \ No newline at end of file diff --git a/src/components/common/RegionUpdateDialog.tsx b/src/components/common/RegionUpdateDialog.tsx index 46db50e..076362e 100644 --- a/src/components/common/RegionUpdateDialog.tsx +++ b/src/components/common/RegionUpdateDialog.tsx @@ -47,8 +47,8 @@ const RegionUpdateDialog: React.FC = ({ {/* 텍스트 영역 */}
-
- 현재 서비스 지역은 +
+ 많은 분들이 요청해주신
@@ -61,8 +61,8 @@ const RegionUpdateDialog: React.FC = ({ WebkitTextFillColor: 'transparent', }} > - 서울 인천 부천 수원 - 고양 용인 부산 성남 + 경산 지역 가맹점이 + 업데이트 되었어요!
diff --git a/src/components/home/AllRegionBottomSheet.tsx b/src/components/home/AllRegionBottomSheet.tsx new file mode 100644 index 0000000..b7f2eb7 --- /dev/null +++ b/src/components/home/AllRegionBottomSheet.tsx @@ -0,0 +1,78 @@ +import { useNavigate } from "react-router-dom"; + +interface RegionBottomSheetProps { + onClose: () => void; + } + + export default function RegionBottomSheet({ + onClose, + }: RegionBottomSheetProps) { + const navigate = useNavigate(); + + return ( +
+ + {/* 헤더 */} +
+ 현재 서비스 중인 지역 +
+ + {/* 지역 내용 전체 wrapper */} +
+ + {/* 좌우 영역 */} +
+ + {/* 왼쪽 */} +
+

서울특별시

+

인천광역시

+

대구광역시

+

부산광역시

+
+ + {/* 오른쪽 */} +
+ +
+

경기도

+
+

부천시

+

수원시

+

성남시

+

고양시

+

용인시

+
+
+ +
+

경상북도

+
+

경산시

+
+
+ +
+ +
+
+ + {/* 하단 버튼 */} +
+ + + +
+
+ ); + } \ No newline at end of file diff --git a/src/components/home/CarouselBanner.tsx b/src/components/home/CarouselBanner.tsx index 9d33d0f..27493a8 100644 --- a/src/components/home/CarouselBanner.tsx +++ b/src/components/home/CarouselBanner.tsx @@ -4,20 +4,23 @@ import { Autoplay } from 'swiper/modules'; import 'swiper/css'; import { useEffect, useState } from 'react'; import CongG from '@/assets/svgs/logo/congG.svg'; -import AddIcon from '@/assets/svgs/common/add-icon.svg'; import CongG3D from '@/assets/svgs/common/3DCongG.svg'; import { useNavigate } from 'react-router-dom'; +import { getRegionCount } from '@/api/store'; interface CarouselBannerProps { onSlideChange: (index: number) => void; swiperRef: React.MutableRefObject; + onOpenRegionBottomSheet: () => void; } export default function CarouselBanner({ onSlideChange, swiperRef, + onOpenRegionBottomSheet, }: CarouselBannerProps) { const [activeIndex, setActiveIndex] = useState(0); + const [regionCount, setRegionCount] = useState(0); const navigate = useNavigate(); // ✅ CongG3D 미리 로드 (Safari object 로딩 지연 방지) @@ -26,6 +29,19 @@ export default function CarouselBanner({ preload.src = CongG3D; }, []); + // region-count 조회 + useEffect(() => { + const fetchRegionCount = async () => { + try { + const count = await getRegionCount(); + setRegionCount(count); + } catch (e) { + console.error('region count 조회 실패:', e); + } + }; + fetchRegionCount(); + }, []); + const slides = [ // 첫 번째 슬라이드 { @@ -49,7 +65,7 @@ export default function CarouselBanner({ 현재는{' '} - 서울, 인천 외 일부 지역 + 서울, 인천 외 {regionCount}개 지역 만 제공되며,{' '} @@ -57,11 +73,10 @@ export default function CarouselBanner({
), diff --git a/src/components/home/HeaderToCarouselSection.tsx b/src/components/home/HeaderToCarouselSection.tsx index f8a8a22..dff8363 100644 --- a/src/components/home/HeaderToCarouselSection.tsx +++ b/src/components/home/HeaderToCarouselSection.tsx @@ -8,12 +8,15 @@ import { useGps } from '@/contexts/GpsContext'; import axiosInstance from '@/api/axiosInstance'; import { Store } from '@/types/store'; import { trackSearchStore } from '@/analytics/ga'; +import BottomSheet from '@/components/common/BottomSheet'; +import AllRegionBottomSheet from '@/components/home/AllRegionBottomSheet'; const bgColors = ['#F3F5ED', '#F4F6F8', '#F3F5ED']; function HeaderToCarouselSection() { const [inputValue, setInputValue] = useState(''); const [activeSlide, setActiveSlide] = useState(0); + const [isRegionBottomSheetOpen, setIsRegionBottomSheetOpen] = useState(false); const navigate = useNavigate(); const swiperRef = useRef(null); // Swiper에 대한 ref @@ -119,7 +122,15 @@ function HeaderToCarouselSection() { /> - + setIsRegionBottomSheetOpen(true)} + /> + + setIsRegionBottomSheetOpen(false)}> + setIsRegionBottomSheetOpen(false)} /> + ); }